样式

guanqb

2022-12-28 46c620066f5196527c266cee6cd094e3c71b98cf

 样式

 src/assets/data/equimentsDate/car.js

@@ -1,22 +1,22 @@
export default [
    { 'equimentType': '警车', 'carID': '#11111', 'carType': '大众', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#22222', 'carType': '宝马', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '保养' },
    { 'equimentType': '警车', 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '警车', 'carID': '#33333', 'carType': '奔驰', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#44444', 'carType': '红旗', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '#55555', 'carType': '大众', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#66666', 'carType': '宝马', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '封存' },
    { 'equimentType': '警车', 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '警车', 'carID': '#77777', 'carType': '奔驰', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#88888', 'carType': '红旗', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '*99911', 'carType': '大众', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '*99922', 'carType': '宝马', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '*99933', 'carType': '奔驰', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '保养' },
    { 'equimentType': '警车', 'carID': '*99944', 'carType': '红旗', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '警车', 'carID': '*99933', 'carType': '奔驰', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '*99944', 'carType': '红旗', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '*99955', 'carType': '大众', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '*99966', 'carType': '宝马', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '*99977', 'carType': '奔驰', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '保养' },
    { 'equimentType': '警车', 'carID': '*99988', 'carType': '红旗', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '警车', 'carID': '*99977', 'carType': '奔驰', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '*99988', 'carType': '红旗', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '警车', 'carID': '#11***', 'carType': '大众', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#22***', 'carType': '宝马', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '封存' },
    { 'equimentType': '警车', 'carID': '#33***', 'carType': '奔驰', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '保养' },
    { 'equimentType': '警车', 'carID': '#44***', 'carType': '红旗', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '停用' }
    { 'equimentType': '警车', 'carID': '#22***', 'carType': '宝马', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#33***', 'carType': '奔驰', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '警车', 'carID': '#44***', 'carType': '红旗', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '故障' }
]

 src/assets/data/equimentsDate/phone.js

@@ -1,22 +1,22 @@
export default [
    { 'equimentType': '手台', 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '手台', 'phoneID': '188XXX11111', 'phoneType': '魅族', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '188XXX22222', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '188XXX33333', 'phoneType': '一加', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '188XXX44444', 'phoneType': '华为', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '手台', 'phoneID': '188XXX55555', 'phoneType': '三星', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '188XXX66666', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '188XXX77777', 'phoneType': '小米', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '133XXX11111', 'phoneType': '魅族', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '133XXX22222', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '手台', 'phoneID': '188XXX88888', 'phoneType': '华为', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX11111', 'phoneType': '魅族', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX22222', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '133XXX33333', 'phoneType': '一加', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX44444', 'phoneType': '华为', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '133XXX55555', 'phoneType': '三星', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '133XXX66666', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '封存' },
    { 'equimentType': '手台', 'phoneID': '133XXX55555', 'phoneType': '三星', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX66666', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX77777', 'phoneType': '小米', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '133XXX88888', 'phoneType': '华为', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '175XXX11111', 'phoneType': '魅族', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '手台', 'phoneID': '175XXX22222', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '手台', 'phoneID': '175XXX33333', 'phoneType': '一加', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '封存' },
    { 'equimentType': '手台', 'phoneID': '175XXX11111', 'phoneType': '魅族', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '175XXX22222', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '手台', 'phoneID': '175XXX33333', 'phoneType': '一加', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '手台', 'phoneID': '175XXX44444', 'phoneType': '华为', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '正常' }
]

 src/assets/data/equimentsDate/recorder.js

@@ -1,22 +1,22 @@
export default [
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC111', 'recorderType': '爱国', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC222', 'recorderType': '百步', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '封存' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC111', 'recorderType': '爱国', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC222', 'recorderType': '百步', 'policeStation': '车站派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC333', 'recorderType': '飞利', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC444', 'recorderType': '途强', 'policeStation': '车站派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC555', 'recorderType': '鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC555', 'recorderType': '鹰眼', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC666', 'recorderType': '致业', 'policeStation': '沙溪派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC777', 'recorderType': '联想', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'ABC888', 'recorderType': '高新', 'policeStation': '沙溪派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF111', 'recorderType': '爱国', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF222', 'recorderType': '百步', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF111', 'recorderType': '爱国', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF222', 'recorderType': '百步', 'policeStation': '北门派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF333', 'recorderType': '飞利', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF444', 'recorderType': '途强', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '封存' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF555', 'recorderType': '鹰眼', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF666', 'recorderType': '致业', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF444', 'recorderType': '途强', 'policeStation': '北门派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF555', 'recorderType': '鹰眼', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF666', 'recorderType': '致业', 'policeStation': '灵溪派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF777', 'recorderType': '联想', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF888', 'recorderType': '高新', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG111', 'recorderType': '爱国', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '保养' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG222', 'recorderType': '百步', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'FFF888', 'recorderType': '高新', 'policeStation': '灵溪派出所', 'area': '责任区2', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG111', 'recorderType': '爱国', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG222', 'recorderType': '百步', 'policeStation': '江光派出所', 'area': '责任区1', 'state': '故障' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG333', 'recorderType': '飞利', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '正常' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG444', 'recorderType': '途强', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '停用' },
    { 'equimentType': '执法记录仪', 'recorderID': 'GGG444', 'recorderType': '途强', 'policeStation': '江光派出所', 'area': '责任区2', 'state': '故障' },
]

 src/components/map/components/mapPopup.vue

@@ -150,158 +150,163 @@
            width: calc(100% - 120px);
        }
    }
}
.divForms-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;
}
.box {
    width: 100%;
    height: 100%;
    transform: translate(0, 25%);
}

.divForms .arrow {
    position: absolute;
    bottom: 40%;
    left: 0;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg) translate(5px, -15px);
    background-color: #28bbf0;
}
    .divForms-dom {
        position: fixed;
        left: 0;
        z-index: 1 !important;
    }
    .box {
        width: 100%;
        height: 100%;
        transform: translate(0, 25%);
    }

.divForms-theme .area {
    background-image: linear-gradient(
    .divForms .arrow {
        position: absolute;
        bottom: 40%;
        left: 0;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg) translate(5px, -15px);
        background-color: #28bbf0;
    }

    .divForms-theme .area {
        background-image: linear-gradient(
                135deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50%,
                transparent 50%
            ),
            linear-gradient(
                -45deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50.1%,
                transparent 50%
            );
    }

    .divForms .area {
        position: relative;
        min-width: 320px;
    }

    .divForms-wrap {
        position: relative;
        overflow: hidden;
        padding: 30px;
    }

    .divForms-theme .b-b,
    .divForms-theme .b-b-r,
    .divForms-theme .b-l,
    .divForms-theme .b-r,
    .divForms-theme .b-t,
    .divForms-theme .b-t-l {
        background-color: #1831a7;
        box-shadow: 0 0 10px 2px #1831a7;
    }

    .divForms .b-t {
        position: absolute;
        top: 0;
        left: 44px;
        right: 0;
        height: 1px;
        z-index: 10;
    }

    .divForms .b-r {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 44px;
        width: 1px;
        z-index: 10;
    }

    .divForms .b-l {
        position: absolute;
        top: 44px;
        left: 0;
        bottom: 0;
        width: 1px;
        z-index: 10;
    }

    .divForms .b-b {
        position: absolute;
        left: 0;
        right: 44px;
        bottom: 0;
        height: 1px;
        z-index: 10;
    }

    .divForms .b-b-r {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1px;
        height: 62px;
        transform: rotate(45deg) translate(-52px, 22px);
        z-index: 10;
    }

    .divForms .b-t-l {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 62px;
        transform: rotate(45deg) translate(52px, -22px);
        z-index: 10;
    }

    .divForms .label-wrap {
        padding: 0 12px;
        color: #fff;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
    }

    .divForms-theme .title {
        background-image: linear-gradient(
            135deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50%,
            transparent 50%
        ),
        linear-gradient(
            -45deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50.1%,
            transparent 50%
            transparent 25px,
            #1c309e9a 25px
        );
}
    }

.divForms .area {
    position: relative;
    min-width: 320px;
}
    .divForms .title {
        margin-top: 20px;
        padding: 0 12px 0 30px;
        height: 36px;
        line-height: 36px;
        position: relative;
    }

.divForms-wrap {
    position: relative;
    overflow: hidden;
    padding: 30px;
}
    .divForms .label-content {
        padding: 4px 0;
    }

.divForms-theme .b-b,
.divForms-theme .b-b-r,
.divForms-theme .b-l,
.divForms-theme .b-r,
.divForms-theme .b-t,
.divForms-theme .b-t-l {
    background-color: #1831a7;
    box-shadow: 0 0 10px 2px #1831a7;
}
    .divForms-theme .arrow,
    .divForms-theme .title::before {
        background-color: #1c309e;
    }

.divForms .b-t {
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-r {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 44px;
    width: 1px;
    z-index: 10;
}

.divForms .b-l {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 1px;
    z-index: 10;
}

.divForms .b-b {
    position: absolute;
    left: 0;
    right: 44px;
    bottom: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-b-r {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(-52px, 22px);
    z-index: 10;
}

.divForms .b-t-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(52px, -22px);
    z-index: 10;
}

.divForms .label-wrap {
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

.divForms-theme .title {
    background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
}

.divForms .title {
    margin-top: 20px;
    padding: 0 12px 0 30px;
    height: 36px;
    line-height: 36px;
    position: relative;
}

.divForms .label-content {
    padding: 4px 0;
}

.divForms-theme .arrow,
.divForms-theme .title::before {
    background-color: #1c309e;
}

.divForms .title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 2px;
    .divForms .title::before {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        z-index: 10;
        height: 2px;
    }
}
</style>

 src/styles/media/index.scss

@@ -1872,6 +1872,142 @@
                             margin-top: countSizeVh(40);
                          }
                      }
                      #divFormsDomBox {
                        width: 280px;
                        height: countSizeVh(360);
                        .title {
                            height: countSizeVh(40);
                            line-height: countSizeVh(42);
                            background-image: linear-gradient(
                                135deg,
                                transparent countSizeVh(25),
                                #29baf1 countSizeVh(25)
                            );
                            .close {
                                right: countSizeVh(5);
                                top: countSizeVh(-2);
                            }
                            .close::before {
                                font-size: countSizeVh(16);
                            }
                        }
                        .item {
                            width: calc(100% - 20px);
                            height: countSizeVh(30);
                            line-height: countSizeVh(30);
                            margin: 0 10px;
                    
                            & > div:first-child {
                                width: 100px;
                                margin-right: 20px;
                            }
                    
                            & > div:nth-of-type(2) {
                                width: calc(100% - 120px);
                            }
                        }
             
                        .divForms .arrow {
                            width: 45px;
                            height: countSizeVh(2);
                            transform: rotate(-45deg) translate(countSizeVh(5), countSizeVh(-15));
                        }
                    
                        .divForms-theme .area {
                            background-image: linear-gradient(
                                    135deg,
                                    transparent 30px,
                                    #1831a79a 30px,
                                    #3f487ba6 50%,
                                    transparent 50%
                                ),
                                linear-gradient(
                                    -45deg,
                                    transparent 30px,
                                    #1831a79a 30px,
                                    #3f487ba6 50.1%,
                                    transparent 50%
                                );
                        }
                    
                        .divForms .area {
                            min-width: 320px;
                        }
                    
                        .divForms-wrap {
                            padding: countSizeVh(30);
                        }
                    
                        .divForms-theme .b-b,
                        .divForms-theme .b-b-r,
                        .divForms-theme .b-l,
                        .divForms-theme .b-r,
                        .divForms-theme .b-t,
                        .divForms-theme .b-t-l {
                            box-shadow: 0 0 countSizeVh(10) countSizeVh(2) #1831a7;
                        }
                    
                        .divForms .b-t {
                            left: countSizeVh(44);
                            height: countSizeVh(1);
                        }
                    
                        .divForms .b-r {
                            bottom: countSizeVh(44);
                            width: countSizeVh(1);
                        }
                    
                        .divForms .b-l {
                            top: countSizeVh(44);
                            width: countSizeVh(1);
                        }
                    
                        .divForms .b-b {
                            right: countSizeVh(44);
                            height: countSizeVh(1);
                        }
                    
                        .divForms .b-b-r {
                            width: countSizeVw(1,1920);
                            height: countSizeVh(62);
                            transform: rotate(45deg) translate(-52px, 22px);
                        }
                    
                        .divForms .b-t-l {
                            width: countSizeVw(1,1920);
                            height: countSizeVh(62);
                            transform: rotate(45deg) translate(countSizeVw(52,1920), countSizeVw(-22,1920));
                        }
                    
                        .divForms .label-wrap {
                            padding: 0 countSizeVw(12,1920);
                            font-size: countSizeVh(16);
                        }
                    
                        .divForms-theme .title {
                            background-image: linear-gradient(
                                135deg,
                                transparent countSizeVw(25,1920),
                                #1c309e9a countSizeVw(25,1920)
                            );
                        }
                    
                        .divForms .title {
                            margin-top: countSizeVh(20);
                            padding: 0 countSizeVh(12) 0 countSizeVw(30,1920);
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                        }
                    
                        .divForms .label-content {
                            padding: countSizeVh(4) 0;
                        }
                    
                        .divForms .title::before {
                            bottom: -4px;
                            height: countSizeVh(2);
                        }
                    }
                }

                .flexible-btn {

 src/utils/fontSize.js

New file
@@ -0,0 +1,6 @@
export function fontSize (size) {
    let clientHeight = window.screen.availHeight
    if (!clientHeight) return
    let fontSize = size / 1080 * clientHeight
    return fontSize
}

 src/views/home/components/leftContainer.vue

@@ -13,21 +13,38 @@
                </div>
            </div>
            <div class="sub-tab" v-show="peopletype == 0">
                <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 0 }"
                    @click="personTabClick(0)"
                >
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 1 }"
                    @click="personTabClick(1)"
                >
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 2 }"
                    @click="personTabClick(2)"
                >
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>

            <!-- <svg viewBox="0 0 384 329" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <defs>
@@ -43,16 +60,24 @@
    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
        <div class="house-box" style="position: relative;">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                    @click="houseTabClick(0)"
                >
                    <div class="tab-title-small">实有房屋:</div>
                    <div class="tab-title-small">182万户</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                    @click="houseTabClick(1)"
                >
                    <div class="tab-title-small">关注场所:</div>
                    <div class="tab-title-small">634个</div>
                </div>
@@ -65,16 +90,24 @@
    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
        <div class="land-box" style="position: relative;">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 0 }"
                    @click="landTabClick(0)"
                >
                    <div class="tab-title-small">小区:</div>
                    <div class="tab-title-small">634个</div>
                </div>
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 1 }"
                    @click="landTabClick(1)"
                >
                    <div class="tab-title-small">责任区:</div>
                    <div class="tab-title-small">634个</div>
                </div>
@@ -87,12 +120,13 @@
    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" />
            </svg> -->
            </svg>-->
        </div>
    </div>
</template>

<script>
import { fontSize } from '@/utils/fontSize.js'
let homePersonmyChart
let houseMyChart
let landMyChart
@@ -231,7 +265,6 @@
        this.clickPeopleChart()
        this.clickLandChart()


        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
@@ -263,6 +296,7 @@
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -276,7 +310,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
@@ -313,10 +348,11 @@
                    }
                ],
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 20
                    top: '4%',
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
            }
        },
@@ -388,7 +424,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
@@ -425,9 +462,10 @@
                ],
                grid: {
                    top: '2%',
                    left: '70',
                    right: '-10',
                    bottom: '2%'
                    left: '2%',
                    right: '-1%',
                    bottom: '2%',
                    containLabel: true
                },

            }
@@ -477,6 +515,7 @@
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -490,7 +529,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    }
                },
                series: [
@@ -908,7 +948,6 @@
    height: 100%;

    .person-box {

        .word {
            color: #fff;
            font-size: 14px;
@@ -938,7 +977,6 @@
            content: '\e6ea';
        }
    }


    .person-box,
    .house-box,
@@ -994,7 +1032,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1018,7 +1056,7 @@
                border-radius: 8px;
                cursor: pointer;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                }

 src/views/home/components/rightContainer.vue

@@ -5,10 +5,15 @@
                <div>值班信息(当日)</div>
            </div>
            <div class="table-box">
                <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="schedulingList"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName">
                    :row-class-name="tableRowClassName"
                >
                    <el-table-column prop="station" label="岗位"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="contact" label="联系方式"></el-table-column>
@@ -16,13 +21,20 @@
            </div>
        </div>

        <div class="alert-box " ref="alertBox ">
        <div class="alert-box" ref="alertBox ">
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -78,6 +90,7 @@
import phoneArr from '@/assets/data/equimentsDate/phone.js'
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'


const timeEvents = []
@@ -114,25 +127,16 @@
                }]
            },
            regionTotal: 0,
            // acttype: 0,
            linetype: 0,
            timetype: 0,
            // underwayArr: [],
            // historyArr: [],
            policeName: '全部',
            phoneNewArr: [],
            carNewArr: [],
            recorderNewArr: [],
            workingSaveArr: [],
            faultSaveArr: [],
            maintainSaveArr: [],
            disableSaveArr: [],
            sealingSaveArr: [],
            workingNewArr: [],
            faultNewArr: [],
            maintainNewArr: [],
            disableNewArr: [],
            sealingNewArr: [],
            tableHeight: 0,
            schedulingList: [],

@@ -141,10 +145,6 @@
    created () {
        this.workingSaveArr = this.workingSaveArr.concat(this.getEquimentChartStateData(phoneArr).workingArr).concat(this.getEquimentChartStateData(carArr).workingArr).concat(this.getEquimentChartStateData(recorderArr).workingArr)
        this.faultSaveArr = this.faultSaveArr.concat(this.getEquimentChartStateData(phoneArr).faultArr).concat(this.getEquimentChartStateData(carArr).faultArr).concat(this.getEquimentChartStateData(recorderArr).faultArr)
        this.maintainSaveArr = this.maintainSaveArr.concat(this.getEquimentChartStateData(phoneArr).maintainArr).concat(this.getEquimentChartStateData(carArr).maintainArr).concat(this.getEquimentChartStateData(recorderArr).maintainArr)
        this.disableSaveArr = this.disableSaveArr.concat(this.getEquimentChartStateData(phoneArr).disableArr).concat(this.getEquimentChartStateData(carArr).disableArr).concat(this.getEquimentChartStateData(recorderArr).disableArr)
        this.sealingSaveArr = this.sealingSaveArr.concat(this.getEquimentChartStateData(phoneArr).sealingArr).concat(this.getEquimentChartStateData(carArr).sealingArr).concat(this.getEquimentChartStateData(recorderArr).sealingArr)

        this.getSchedulingList()
    },

@@ -152,8 +152,6 @@
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.clickEquimentChart()
        // this.historyArr = historyArr
        // this.underwayArr = underwayArr

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
@@ -199,24 +197,25 @@
                    formatter: function (params) {
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><span style="margin-left:10px;color:#2979ff">故障：${params.data.fault}台</span><br /><span style="color:#ffd600">保养：${params.data.maintain}台</span><span style="margin-left:10px;color:#0d47a1">停用：${params.data.disable}台</span><span style="margin-left:10px;color:#b71c1c">封存：${params.data.sealing}台</span>`
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#2979ff">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#5c7bd9">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    borderColor: 'rgba(0,0,0,0.7)',
                    backgroundColor: 'rgba(9, 40, 199, 0.9)',
                    borderColor: 'rgba(9, 40, 199, 0.9)',
                },
                graphic: {
                    type: "text",
                    left: "36.5%",
                    // left: "36.5%",
                    left: "40%",
                    top: "48%",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: 18,
                        fontSize: fontSize(18),
                        fontWeight: 700
                    }
                },
@@ -226,7 +225,7 @@
                    top: "56%",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: 20,
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center"
                    }
@@ -241,34 +240,37 @@
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: 15,
                                length: fontSize(15),
                                lineStyle: {
                                    width: 3
                                    width: fontSize(3)
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                color: 'red'
                                color: 'red',
                                fontSize: fontSize(16)
                            }
                        },
                        label: {
                            color: function (params) {
                                let colorList = []
                                if ('carCount' in params.data) {
                                    colorList = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
                                    colorList = ['#4caf50', '#787878']
                                } else {
                                    colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                }
                                return colorList[params.dataIndex]
                            }
                            },
                            fontSize: fontSize(16)

                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
                                        colorList = ['#4caf50', '#787878']
                                    } else {
                                        colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
@@ -348,7 +350,8 @@
                    type: 'category',
                    data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'],
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -362,7 +365,8 @@
                        show: false
                    },
                    axisLabel: {
                        color: "#fff"
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisLine: {
                        lineStyle: {
@@ -409,10 +413,11 @@
                    }
                ],
                grid: {
                    x: 30,
                    y: 40,
                    x2: 10,
                    y2: 20
                    top: '4%',
                    left: '3%',
                    right: '2%',
                    bottom: '4%',
                    containLabel: true
                },
            }
        },
@@ -433,12 +438,6 @@
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.workingNewArr)
                } else if (params.name == '故障') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.faultNewArr)
                } else if (params.name == '保养') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.maintainNewArr)
                } else if (params.name == '停用') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.disableNewArr)
                } else if (params.name == '封存') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.sealingNewArr)
                }
            })
        },
@@ -498,11 +497,8 @@
        },

        getEquimentChartData (policeStationName) {

            const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']

            const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

            let dataArr = []
            let phoneCount = 0
            let carCount = 0
@@ -515,13 +511,10 @@
            // 设备状态
            this.workingNewArr = []
            this.faultNewArr = []
            this.maintainNewArr = []
            this.disableNewArr = []
            this.sealingNewArr = []
            let phoneState = {}
            let carState = {}
            let recorderState = {}
            let monitorState = { 'working': 4, 'fault': 2, 'maintain': 2, 'disable': 1, 'sealing': 1 }
            let monitorState = { 'working': 7, 'fault': 3 }

            if (policeStationName == '全部') {
                phoneCount = phoneArr.length
@@ -533,9 +526,6 @@
                monitorCount = 10
                this.workingNewArr = this.workingSaveArr
                this.faultNewArr = this.faultSaveArr
                this.maintainNewArr = this.maintainSaveArr
                this.disableNewArr = this.disableSaveArr
                this.sealingNewArr = this.sealingSaveArr
            } else {
                this.phoneNewArr = this.getEquimentDataCountandArr(phoneArr, policeStationName).arr
                phoneCount = this.getEquimentDataCountandArr(phoneArr, policeStationName).count
@@ -546,35 +536,26 @@
                monitorCount = 10
                this.workingNewArr = this.getEquimentDataCountandArr(this.workingSaveArr, policeStationName).arr
                this.faultNewArr = this.getEquimentDataCountandArr(this.faultSaveArr, policeStationName).arr
                this.maintainNewArr = this.getEquimentDataCountandArr(this.maintainSaveArr, policeStationName).arr
                this.disableNewArr = this.getEquimentDataCountandArr(this.disableSaveArr, policeStationName).arr
                this.sealingNewArr = this.getEquimentDataCountandArr(this.sealingSaveArr, policeStationName).arr
            }
            phoneState = this.getEquimentChartStateData(this.phoneNewArr)
            carState = this.getEquimentChartStateData(this.carNewArr)
            recorderState = this.getEquimentChartStateData(this.recorderNewArr)
            if (this.linetype == 0) {
                dataArr = [
                    { value: carCount, name: '车辆', working: carState.working, fault: carState.fault, maintain: carState.maintain, disable: carState.disable, sealing: carState.sealing, label: { color: twoColor[0] } },
                    { value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, maintain: monitorState.maintain, disable: monitorState.disable, sealing: monitorState.sealing, label: { color: twoColor[1] } },
                    { value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, maintain: recorderState.maintain, disable: recorderState.disable, sealing: recorderState.sealing, label: { color: twoColor[2] } },
                    { value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, maintain: phoneState.maintain, disable: phoneState.disable, sealing: phoneState.sealing, label: { color: twoColor[3] } },
                    { value: carCount, name: '车辆', working: carState.working, fault: carState.fault, label: { color: twoColor[0] } },
                    { value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, label: { color: twoColor[1] } },
                    { value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, label: { color: twoColor[2] } },
                    { value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, label: { color: twoColor[3] } },
                ]
                this.regionTotal = phoneCount + monitorCount + carCount + recorderCount
            } else {
                let workingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).workingObj
                let faultObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).faultObj
                let maintainObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).maintainObj
                let disableObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).disableObj
                let sealingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).sealingObj
                dataArr = [
                    { value: workingObj.total, name: '正常', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount, color: '#4caf50', label: { color: oneColor[0] } },
                    { value: maintainObj.total, name: '保养', carCount: maintainObj.carCount, monitorCount: maintainObj.monitorCount, recorderCount: maintainObj.recorderCount, phoneCount: maintainObj.phoneCount, color: '#2979ff', label: { color: oneColor[1] } },
                    { value: faultObj.total, name: '故障', carCount: faultObj.carCount, monitorCount: faultObj.monitorCount, recorderCount: faultObj.recorderCount, phoneCount: faultObj.phoneCount, color: '#ffd600', label: { color: oneColor[2] } },
                    { value: disableObj.total, name: '停用', carCount: disableObj.carCount, monitorCount: disableObj.monitorCount, recorderCount: disableObj.recorderCount, phoneCount: disableObj.phoneCount, color: '#0d47a1', label: { color: oneColor[3] } },
                    { value: sealingObj.total, name: '封存', carCount: sealingObj.carCount, monitorCount: sealingObj.monitorCount, recorderCount: sealingObj.recorderCount, phoneCount: sealingObj.phoneCount, color: '#b71c1c', label: { color: oneColor[4] } },
                ]
                this.regionTotal = workingObj.total + faultObj.total + maintainObj.total + disableObj.total + sealingObj.total
                this.regionTotal = workingObj.total + faultObj.total
            }
            return dataArr
        },
@@ -582,14 +563,8 @@
        getEquimentChartStateData (newArr) {
            let working = 0
            let fault = 0
            let maintain = 0
            let disable = 0
            let sealing = 0
            let workingArr = []
            let faultArr = []
            let maintainArr = []
            let disableArr = []
            let sealingArr = []

            newArr.forEach(item => {
                for (let p in item) {
@@ -603,18 +578,9 @@
                } else if (item.state == '故障') {
                    fault++
                    faultArr.push(item)
                } else if (item.state == '保养') {
                    maintain++
                    maintainArr.push(item)
                } else if (item.state == '停用') {
                    disable++
                    disableArr.push(item)
                } else if (item.state == '封存') {
                    sealing++
                    sealingArr.push(item)
                }
            })
            return { 'working': working, 'fault': fault, 'maintain': maintain, 'disable': disable, 'sealing': sealing, 'workingArr': workingArr, 'faultArr': faultArr, 'maintainArr': maintainArr, 'disableArr': disableArr, 'sealingArr': sealingArr }
            return { 'working': working, 'fault': fault, 'workingArr': workingArr, 'faultArr': faultArr }
        },

        getEquimentChartTypeData (phoneState, carState, recorderState, monitorState) {
@@ -775,7 +741,7 @@
                background: $sub-tab-bg-color;
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }