近期累计修改

guanqb

2023-06-25 cbb804de745718bae961008b524bdbca86a6572e

近期累计修改

 public/images/earth-navi-control.png

 src/api/dept/index.js

@@ -146,15 +146,15 @@
 */
export const getSearchExtensivelyBgAoiDeepdata = (ak, region, ids, infos) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/zhs/bs/search',
        // url: '/data/汇成观邸.json',
        // url: '/data/search.json',
        // url: '/data/阳光小区独栋.json',
        // url: '/data/search汇杰小区.json',
        url: '/data/search汇杰小区.json',
        // url: '/data/汪家园林家小区id详情搜.json',
        // url: '/data/search三江星座.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        // requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,
@@ -171,13 +171,13 @@
 */
export const getSearchExtensivelyHousesdata = (ak, region, ids, infos) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/zhs/bs/search',
        // url: '/data/汇成观邸-户室.json',
        // url: '/data/阳光小区独栋.json',
        // url: '/data/search汇杰小区1栋.json',
        url: '/data/search汇杰小区1栋.json',
        // url: '/data/汪家园林家小区2号id详情搜.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        // requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,
@@ -274,7 +274,7 @@
        params: {
            resBusId,
            buildId,
            status,
            ...status,
            current,
            realName,
            phone

 src/api/home/index.js

@@ -25,14 +25,15 @@
 * @param {*}   
 * @returns 
 */
export const getSchedulingList = (current, size, params) => {
// export const getSchedulingList = (current, size, params) => {
export const getSchedulingList = (params) => {
    return request({
        url: `/api/scheduling/scheduling/page`,
        method: 'get',
        params: {
            ...params,
            current: current,
            size: size
            // current: current,
            // size: size
        }
    })
}
@@ -197,4 +198,47 @@
    })
}

//实有房屋统计
export const getVillageStatisticData = (params) => {
    return request({
        url: `/api/villageDetail/villageDetail/getVillageStatisticData`,
        method: 'get',
        params: params
    })
}

//实有房屋统计--详情
export const getVillageStatisticDetail = (params) => {
    return request({
        url: `/api/villageDetail/villageDetail/page`,
        method: 'get',
        params: params
    })
}

//关注场所统计
export const getPlaceOfConcernStatisticData = (params) => {
    return request({
        url: `/api/placeOfConcern/placeOfConcern/getPlaceOfConcernStatisticData`,
        method: 'get',
        params: params
    })
}

//关注场所统计--详情
export const getPlaceOfConcernStatisticDetail = (params) => {
    return request({
        url: `/api/placeOfConcern/placeOfConcern/page`,
        method: 'get',
        params: params
    })
}

//实有住宅和关注场所统计总数
export const getVillageDetailAndPlaceStatisticNumber = (params) => {
    return request({
        url: `/api/placeOfConcern/placeOfConcern/getVillageDetailAndPlaceStatisticNumber`,
        method: 'get',
        params: params
    })
}

 src/components/map/components/architecturePopup.vue

@@ -16,8 +16,133 @@
                                    详细信息
                                    <div class="close" @click="closePopup" title="关闭"></div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '学校'" class="label-content">
                                    <div class="item">
                                        <div>校园名:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>在校教职工人数:</div>
                                        <div>{{ architectureDataPopup.teacherScale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>在校学生数量:</div>
                                        <div>{{ architectureDataPopup.studentScale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>办学区域:</div>
                                        <div>{{ architectureDataPopup.officeArea }}</div>
                                    </div>
                                    <div class="item">
                                        <div>学校类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                    <div class="item">
                                        <div>办学主体:</div>
                                        <div>{{ architectureDataPopup.officeMain }}</div>
                                    </div>
                                </div>

                                <div
                                <div v-show="architectureDataPopup.curDataType == '危爆品'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>危险物品名称:</div>
                                        <div>{{ architectureDataPopup.hazardousGoodsName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '医院'" class="label-content">
                                    <div class="item">
                                        <div>医院名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '党政机关' || architectureDataPopup.curDataType == '银行'"
                                    class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>关注类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '其它重点单位'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '油气站'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>关注类型:</div>
                                        <div>{{ architectureDataPopup.attentionType }}</div>
                                    </div>
                                    <div class="item">
                                        <div>规模:</div>
                                        <div>{{ architectureDataPopup.scale }}</div>
                                    </div>
                                    <div class="item">
                                        <div>状态:</div>
                                        <div>{{ architectureDataPopup.status }}</div>
                                    </div>
                                </div>
                                <div v-show="architectureDataPopup.curDataType == '旅馆酒店公寓'" class="label-content">
                                    <div class="item">
                                        <div>单位名称:</div>
                                        <div>{{ architectureDataPopup.unitName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>座机:</div>
                                        <div>{{ architectureDataPopup.tel }}</div>
                                    </div>
                                </div>
                                <div class="label-content public">
                                    <div class="item">
                                        <div>地址:</div>
                                        <div>{{ architectureDataPopup.address }}</div>
                                    </div>
                                    <div class="item">
                                        <div>辖区派出所:</div>
                                        <div>{{ architectureDataPopup.policeStationName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人:</div>
                                        <div>{{ architectureDataPopup.person }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人职务:</div>
                                        <div>{{ architectureDataPopup.job }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任人电话:</div>
                                        <div>{{ architectureDataPopup.phone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任民警:</div>
                                        <div>{{ architectureDataPopup.policeman }}</div>
                                    </div>
                                    <div class="item">
                                        <div>责任民警电话:</div>
                                        <div>{{ architectureDataPopup.policemanPhone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>安保级别:</div>
                                        <div>{{ architectureDataPopup.securityLevel }}</div>
                                    </div>
                                    <div class="item">
                                        <div>备注:</div>
                                        <div>{{ architectureDataPopup.remark }}</div>
                                    </div>
                                </div>
                                <!-- <div
                                    v-show="architectureDataPopup.curDataTitle == '学校'"
                                    class="label-content"
                                >
@@ -179,7 +304,7 @@
                                        <div>列管事由:</div>
                                        <div>{{ architectureDataPopup.realNameLGSY }}</div>
                                    </div>
                                </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="b-t-l"></div>
@@ -257,20 +382,16 @@
}

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

.divForms .area {
@@ -363,14 +484,14 @@
        align-items: center;
        justify-content: space-around;

        & > div {
        &>div {
            width: 36%;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
        }

        & > div.on {
        &>div.on {
            color: #3d95f3;
            border-bottom: 2px solid #3d95f3;
        }
@@ -388,7 +509,7 @@
            margin: 0 10px;
            text-align: left;

            & > div:first-child {
            &>div:first-child {
                min-width: 112px;
                text-align: justify;
                display: inline-block;
@@ -396,7 +517,7 @@
                margin-right: 20px;
            }

            & > div:nth-of-type(2) {
            &>div:nth-of-type(2) {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
@@ -405,6 +526,11 @@
        }
    }

    .public {
        padding-top: 0;
        margin-top: -10px;
    }

    .label-content.no-data {
        display: flex;
        align-items: center;

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-18 15:43:37
 * @LastEditTime: 2023-05-30 10:15:14
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -12,6 +12,14 @@
    <div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>

        <div class="compass-btn">
            <el-tooltip content="指北针" placement="top" effect="dark">
                <i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer"
                    :style="{ transform: compassBtnTranslate }" @click="compassBtnClick"></i>
            </el-tooltip>
        </div>

        <div class="over-look-btn">
            <el-tooltip content="一键俯视" placement="top" effect="dark">
                <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
@@ -190,7 +198,8 @@
            showImgBtn: false,
            imgtype: 0,
            tilesetLayerType: '',
            angleCheck: true
            angleCheck: true,
            compassBtnTranslate: 'rotate(0deg)'
        }
    },

@@ -217,6 +226,12 @@
                        preserveDrawingBuffer: true
                    }
                }
            })

            global.viewer.scene.postRender.addEventListener(function () {
                var heading = global.viewer.scene.camera.heading
                var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading)
                that.compassBtnTranslate = "rotate(" + x + "deg)"
            })

            const curTools = createTools()
@@ -584,11 +599,40 @@
                lat: curLatitude,
            }
        },
        compassBtnClick () {
            const degrees = global.viewer.camera.heading * (180 / Math.PI)
            if (degrees == 360) {
                return
            }
            const position = global.DC.Transform.transformCartesianToWGS84(global.viewer.camera.position)


            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Transform.transformWGS84ToCartesian(new global.DC.Position(position.lng, position.lat, position.alt + 1000)),

                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    // 视角
                    pitch: global.viewer.camera.pitch,
                    roll: global.viewer.camera.roll
                },
                duration: 3
            })
        },

        overLookClick () {
            const degrees = global.viewer.camera.pitch * (180 / Math.PI)

            if (degrees == -90) {
                return
            }

            const position = this.getSceneCenterPosition(global.viewer)

            global.viewer.camera.setView({
            global.viewer.camera.flyTo({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -596,11 +640,12 @@
                ),
                orientation: {
                    // 指向
                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    heading: global.viewer.camera.heading,
                    // 视角
                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    roll: 0.0
                }
                    roll: global.viewer.camera.roll
                },
                duration: 3
            })
        },

@@ -839,12 +884,14 @@
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
                document.querySelector('.screen-full-btn').classList.add('homebottom')
                document.querySelector('.over-look-btn').classList.add('homebottom')
                document.querySelector('.compass-btn').classList.add('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            } else {
                // if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
                document.querySelector('.screen-full-btn').classList.remove('homebottom')
                document.querySelector('.over-look-btn').classList.remove('homebottom')
                document.querySelector('.compass-btn').classList.remove('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom')
            }

@@ -963,11 +1010,9 @@
            let pointElement
            let labelElement

            let alt = params.alt || 2

            if (type == "billboard") {
                // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)
                pointElement.setStyle(params.setStyle)
                pointElement.size = [32, 32]
                pointElement.style = "clustering"
@@ -979,7 +1024,7 @@
                pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
            } else if (type == "label") {
                // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text)
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text)
                let fontColor = 'fontColor' in params ? params.fontColor : global.DC.Color.CRIMSON
                let style = 'fontColor' in params ? global.DC.Namespace.Cesium.LabelStyle.FILL : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
                labelElement.setStyle({
@@ -996,14 +1041,14 @@
                labelElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == "billboardOrLabel") {
                // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)
                pointElement.size = [32, 32]
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)

                // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text)
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text)
                labelElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,

 src/store/modules/user.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 09:33:01
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-02 12:18:26
 * @LastEditTime: 2023-06-07 09:40:52
 * @FilePath: \srs-police-affairs\src\store\modules\user.js
 * @Description: 
 * 
@@ -39,27 +39,26 @@
                    .then((res) => {
                        const data = res.data
                        if (res.status != 200) {
                            Message({
                                message: '系统异常，请联系管理员',
                                type: "error",
                            })
                            reject(res)
                        }
                        else {
                            if (data.error_description) {
                                Message({
                                    message: data.error_description,
                                    type: "error",
                                })
                                reject(res)
                            } else {
                                commit("SET_TOKEN", data.access_token)
                                commit('SET_USER_INFO', data)
                                commit('SET_REFRESH_TOKEN', data.refresh_token)
                                commit('SET_TENANT_ID', data.tenant_id)
                                resolve()
                            }
                            else {
                                Message({
                                    message: '系统异常，请联系管理员',
                                    type: "error",
                                })
                                reject(res)
                            }
                        }
                        else {
                            commit("SET_TOKEN", data.access_token)
                            commit('SET_USER_INFO', data)
                            commit('SET_REFRESH_TOKEN', data.refresh_token)
                            commit('SET_TENANT_ID', data.tenant_id)
                            resolve()
                        }
                    })
                    .catch((error) => {

 src/styles/base/index.scss

@@ -319,7 +319,12 @@
        .online {
            background-color: #4ccc7d;
        }
    }
}

.syld-details-box {
    .syld_page {
        margin-top: 14px;
    }
}


 src/styles/dc/index.scss

@@ -81,6 +81,32 @@
    left: 410px !important;
}

.compass-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    bottom: 244px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 97;
    background-color: $bg-color !important;
}

.compass-btn.homebottom {
    left: 402px !important;
    bottom: 580px;
}

.compass-btn.shrink-btn {
    left: 410px !important;
}

.screen-full-btn {
    display: flex;
    align-items: center;

 src/styles/icon/index.css

New file
@@ -0,0 +1,99 @@
@charset "UTF-8";
.el-icon-my-path {
  background: url(/img/icon/path.png) center no-repeat;
  background-size: 14px 14px;
}

.el-icon-my-path:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-search {
  background: url(/img/icon/search.png) center no-repeat;
  background-size: 14px 14px;
}

.el-icon-my-search:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-route {
  background: url(/img/icon/route.png) center no-repeat;
  background-size: countSizeVh(14) countSizeVh(14);
}

.el-icon-my-route:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-user-back {
  background: url(/img/icon/user-back.png) center no-repeat;
  background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-user-back:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-user-quit {
  background: url(/img/icon/user-quit.png) center no-repeat;
  background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-user-quit:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-draw-qycx {
  background: url(/img/draw/qycx.png) center no-repeat;
  background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-draw-qycx:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-draw-line {
  background: url(/img/draw/line.png) center no-repeat;
  background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-draw-line:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-police-track {
  background: url(/img/draw/track.png) center no-repeat;
  background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-police-track:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

.el-icon-compass-btn {
  background: url(/images/earth-navi-control.png) center no-repeat;
  background-size: countSizeVh(36) countSizeVh(24);
}

.el-icon-compass-btn:before {
  content: "替";
  font-size: countSizeVh(16);
  visibility: hidden;
}

 src/styles/icon/index.min.css

New file
@@ -0,0 +1 @@
.el-icon-my-path{background:url(/img/icon/path.png) center no-repeat;background-size:14px 14px}.el-icon-my-path:before{content:"替";font-size:16px;visibility:hidden}.el-icon-my-search{background:url(/img/icon/search.png) center no-repeat;background-size:14px 14px}.el-icon-my-search:before{content:"替";font-size:16px;visibility:hidden}.el-icon-my-route{background:url(/img/icon/route.png) center no-repeat;background-size:countSizeVh(14) countSizeVh(14)}.el-icon-my-route:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-user-back{background:url(/img/icon/user-back.png) center no-repeat;background-size:countSizeVh(16) countSizeVh(16)}.el-icon-user-back:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-user-quit{background:url(/img/icon/user-quit.png) center no-repeat;background-size:countSizeVh(16) countSizeVh(16)}.el-icon-user-quit:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-draw-qycx{background:url(/img/draw/qycx.png) center no-repeat;background-size:countSizeVh(16) countSizeVh(16)}.el-icon-draw-qycx:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-draw-line{background:url(/img/draw/line.png) center no-repeat;background-size:countSizeVh(16) countSizeVh(16)}.el-icon-draw-line:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-police-track{background:url(/img/draw/track.png) center no-repeat;background-size:countSizeVh(16) countSizeVh(16)}.el-icon-police-track:before{content:"替";font-size:countSizeVh(16);visibility:hidden}.el-icon-compass-btn{background:url(/images/earth-navi-control.png) center no-repeat;background-size:countSizeVh(36) countSizeVh(24)}.el-icon-compass-btn:before{content:"替";font-size:countSizeVh(16);visibility:hidden}

 src/styles/icon/index.scss

@@ -84,4 +84,15 @@
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-compass-btn {
    background: url(/images/earth-navi-control.png) center no-repeat;
    background-size: countSizeVh(36) countSizeVh(24);
}

.el-icon-compass-btn:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

 src/styles/media/index.scss

@@ -2437,7 +2437,26 @@
                // 地图，控制按钮
                .over-look-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(224);
                    bottom: countSizeVh(220);
                    width: countSizeVh(36);
                    height: countSizeVh(36);
                    font-size: countSizeVh(20);
                }

                .compass-btn.homebottom {
                    left: countSizeVw(402, 1920) !important;
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(266));
                }

                .compass-btn.shrink-btn {
                    left: countSizeVw(410, 1920) !important;
                    bottom: countSizeVh(264);
                }

                // 地图，控制按钮
                .compass-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(264);
                    width: countSizeVh(36);
                    height: countSizeVh(36);
                    font-size: countSizeVh(20);
@@ -3003,6 +3022,26 @@
        }
    }

    .syld-details-box {
        .el-dialog {
            width: countSizeVw(1060, 1920);
            height: countSizeVh(730);
        }

        .el-dialog__header button {
            font-size: countSizeVh(18);
            right: countSizeVw(10, 1920);
        }

        .el-dialog .el-dialog__body .el-table {
            height: calc(100% - countSizeVh(100)) !important;
        }

        .syld_page {
            margin-top: countSizeVh(14);
        }
    }

    .police-infor-table.el-table {

        th,

 src/views/activity/components/drawBtnBox.vue

@@ -432,8 +432,8 @@
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                addPlotOverlayData.setStyle({
                    material: lineColor,
                    width: 3
                    material: new global.DC.PolylineArrowMaterialProperty(lineColor),
                    width: 10
                })

                data.linePositionStr = positionNewArr
@@ -663,8 +663,8 @@
                        lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                    }
                    overlay.attrParams.lineObj.setStyle({
                        "material": lineColor,
                        'width': 3
                        material: new global.DC.PolylineArrowMaterialProperty(lineColor),
                        width: 10
                    })
                    overlay.attrParams.linePositionStr = linePosition
                    overlay.attrParams.polygonPositionStr = positionStr

 src/views/activity/components/publicIndex.vue

@@ -672,6 +672,7 @@
         */
        addMapLineLayers (data) {
            this.$parent.chooseActivityLineList = data

            data.forEach(item => {
                let maxHeight = item.altitude.split(',').reduce((pre, cur) => {
                    return cur > pre ? cur : pre
@@ -705,9 +706,9 @@
                let lineObj = new global.DC.Polyline(positionNewArr)
                lineObj.customType = 'polyline'
                lineObj.setStyle({
                    material: lineColor,
                    material: new global.DC.PolylineArrowMaterialProperty(lineColor),
                    clampToGround: this.currentPlotType == 3 ? false : true,
                    width: 3
                    width: 10
                })

                lineLayer.addOverlay(lineObj)

 src/views/activity/components/twoDrawBtnBox.vue

@@ -417,8 +417,8 @@
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                addPlotOverlayData.setStyle({
                    material: lineColor,
                    width: 3
                    material: new global.DC.PolylineArrowMaterialProperty(lineColor),
                    width: 10
                })

                data.linePositionStr = positionNewArr
@@ -590,8 +590,8 @@
                        lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                    }
                    overlay.attrParams.lineObj.setStyle({
                        "material": lineColor,
                        'width': 3
                        material: new global.DC.PolylineArrowMaterialProperty(lineColor),
                        width: 10
                    })
                    overlay.attrParams.linePositionStr = linePosition
                    overlay.attrParams.polygonPositionStr = positionStr

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 16:36:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-22 09:32:18
 * @LastEditTime: 2023-06-21 09:58:58
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 
 * 
@@ -29,30 +29,29 @@
                        @change="handleActivityChange" class="activity-list">
                        <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
                            <template slot="title">{{ item.name }}({{ item.plotType == 1 ? '二维' : '三维' }})</template>
                            <el-collapse v-model="activeActivityElementIndex" accordion>
                            <el-collapse class="collapse-item-box" v-model="activeActivityElementIndex" accordion>
                                <el-collapse-item title="要素资源" :name="yszy">
                                    <el-collapse v-model="elementPoliceIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="elementPoliceIndex" accordion>
                                        <el-collapse-item title="警车" :name="jc">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
                                                    @click="carOrPoliceItemClick(carItem.position, 'point')">{{
                                                        carItem.serialNumber }}</li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="elementPoliceCarIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="elementPoliceCarIndex" accordion>
                                        <el-collapse-item title="警员" :name="jy">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
                                                    @click="carOrPoliceItemClick(policeItem.position, 'point')">{{
                                                        policeItem.policeName }}</li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>

                                    <el-collapse v-model="elementCustomIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="elementCustomIndex" accordion>
                                        <el-collapse-item title="自定义图片标注" :name="wxrw">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(item, index) in customList" :key="item.id"
                                                    @click="carOrPoliceItemClick(item.position, 'people')">
                                                    {{ item.remark && item.remark.trim() != '' ? item.remark :
@@ -61,10 +60,9 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>

                                    <el-collapse v-model="elementNormalIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="elementNormalIndex" accordion>
                                        <el-collapse-item title="其他" :name="wxrw">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(item, index) in restList" :key="item.id"
                                                    @click="carOrPoliceItemClick(item.position, 'people')">
                                                    {{ item.remark && item.remark.trim() != '' ? item.remark :
@@ -75,11 +73,12 @@
                                    </el-collapse>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="activeActivityArrowIndex" accordion>
                            <el-collapse class="collapse-item-box" v-model="activeActivityArrowIndex" accordion>
                                <el-collapse-item title="作战标绘" :name="zzbh">
                                    <el-collapse v-model="attackArrowIndex" accordion v-show="item.plotType == 1">
                                    <el-collapse class="collapse-item-box-child" v-model="attackArrowIndex" accordion
                                        v-show="item.plotType == 1">
                                        <el-collapse-item title="进攻箭头" :name="jgjt">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
                                                    @click="carOrPoliceItemClick(attackItem.position, 'arrow')">
                                                    {{ attackItem.remark && attackItem.remark.trim() != '' ?
@@ -89,10 +88,10 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>

                                    <el-collapse v-model="doubleArrowIndex" accordion v-show="item.plotType == 1">
                                    <el-collapse class="collapse-item-box-child" v-model="doubleArrowIndex" accordion
                                        v-show="item.plotType == 1">
                                        <el-collapse-item title="双箭头" :name="sjt">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
                                                    @click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
                                                    {{ doubleItem.remark && doubleItem.remark.trim() != '' ?
@@ -102,9 +101,10 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="fineArrowIndex" accordion v-show="item.plotType == 1">
                                    <el-collapse class="collapse-item-box-child" v-model="fineArrowIndex" accordion
                                        v-show="item.plotType == 1">
                                        <el-collapse-item title="直箭头" :name="zjt">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
                                                    @click="carOrPoliceItemClick(fineItem.position, 'arrow')">
                                                    {{ fineItem.remark && fineItem.remark.trim() != '' ? fineItem.remark :
@@ -114,9 +114,10 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="tailedAttackArrowIndex" accordion v-show="item.plotType == 1">
                                    <el-collapse class="collapse-item-box-child" v-model="tailedAttackArrowIndex" accordion
                                        v-show="item.plotType == 1">
                                        <el-collapse-item title="燕尾箭头" :name="ywjt">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(tailedItem, index) in tailedAttackArrowList"
                                                    :key="tailedItem.id"
                                                    @click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
@@ -127,9 +128,9 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="polygonArrowIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="polygonArrowIndex" accordion>
                                        <el-collapse-item title="多边形" :name="dbx">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
                                                    @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
                                                    {{ polygonItem.remark && polygonItem.remark.trim() != '' ?
@@ -139,9 +140,9 @@
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="borkenlineIndex" accordion>
                                    <el-collapse class="collapse-item-box-child" v-model="borkenlineIndex" accordion>
                                        <el-collapse-item title="折线" :name="dbx">
                                            <ul>
                                            <ul class="collapse-item-box-child-child">
                                                <li v-for="(polygonItem, index) in borkenList" :key="polygonItem.id"
                                                    @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
                                                    {{ polygonItem.remark && polygonItem.remark.trim() != '' ?
@@ -153,11 +154,11 @@
                                    </el-collapse>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="activeActivityLineIndex" accordion>
                            <el-collapse class="collapse-item-box" v-model="activeActivityLineIndex" accordion>
                                <el-collapse-item title="巡逻路线" :name="xllx">
                                    <ul>
                                    <ul class="collapse-item-box-child-child">
                                        <li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
                                            @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')">
                                            @click="carOrPoliceItemClick(lineItem.position, 'line')">
                                            {{ lineItem.remark && lineItem.remark.trim() != '' ? lineItem.remark :
                                                `路线${index + 1}` }}
                                        </li>
@@ -605,15 +606,11 @@
                let positionStr = position.slice(6, position.length - 1)
                lng = Number(positionStr.split(" ")[0])
                lat = Number(positionStr.split(" ")[1])
            } else if (type == 'line') {
                let positionArr = this.getCenter(position, 'line')
                lng = Number(positionArr[0])
                lat = Number(positionArr[1])
            } else if (type == 'people') {
                let positionStr = position.slice(11, position.length - 1)
                lng = Number(positionStr.split(",")[0].split(' ')[0])
                lat = Number(positionStr.split(",")[0].split(' ')[1])
            } else if (type == 'polygon') {
            } else if (type == 'polygon' || type == 'line') {
                let itPositionStr = position.slice(11, position.length - 1)
                let positionArr = itPositionStr.split(',')
                positionArr = positionArr.map(item => {
@@ -1298,4 +1295,16 @@
        width: 25vw;
    }
}

::v-deep(.collapse-item-box) {
    background: #85A5FF;

    .collapse-item-box-child {
        background: #597EF7;
    }

    .collapse-item-box-child-child {
        background: #2F54EB;
    }
}
</style>

 src/views/home/components/bottomContainer.vue

@@ -14,92 +14,39 @@
            <div class="header">
                <div class="bottom-title">警情动态</div>
                <div class="timeTab" v-show="historytype">
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 0 }"
                        @click="timeTabClick(0)"
                    >周</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 1 }"
                        @click="timeTabClick(1)"
                    >月</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 2 }"
                        @click="timeTabClick(2)"
                    >自定义</span>
                    <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                    <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                    <span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span>
                </div>

                <div class="timeSeclect" v-show="historytype">
                    <div v-show="timetype == 0">
                        <el-date-picker
                            size="small"
                            v-model="currentWeekTime"
                            @change="datePickerChange"
                            type="week"
                            align="center"
                            format="yyyy 第 WW 周"
                            placeholder="选择周"
                            popper-class="date-week-style"
                        ></el-date-picker>
                        <el-date-picker size="small" v-model="currentWeekTime" @change="datePickerChange" type="week"
                            align="center" format="yyyy 第 WW 周" placeholder="选择周"
                            popper-class="date-week-style"></el-date-picker>
                    </div>
                    <div v-show="timetype == 1">
                        <el-date-picker
                            size="small"
                            v-model="currentMonthTime"
                            @change="datePickerChange"
                            type="month"
                            align="center"
                            placeholder="选择月"
                            popper-class="date-mouth-style"
                        ></el-date-picker>
                        <el-date-picker size="small" v-model="currentMonthTime" @change="datePickerChange" type="month"
                            align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker>
                    </div>
                    <div v-show="timetype == 2">
                        <el-date-picker
                            size="small"
                            :clearable="false"
                            v-model="currentTime"
                            type="daterange"
                            align="center"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="datePickerChange"
                            :picker-options="pickerOptions"
                            popper-class="date-day-style"
                        ></el-date-picker>
                        <el-date-picker size="small" :clearable="false" v-model="currentTime" type="daterange"
                            align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            @change="datePickerChange" :picker-options="pickerOptions"
                            popper-class="date-day-style"></el-date-picker>
                    </div>
                    <div>
                        <el-select
                            style="flex: 1;"
                            size="small"
                            v-model="policeInforValue"
                            @change="policeTypeChange"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in policeInforOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        <el-select style="flex: 1;" size="small" v-model="policeInforValue" @change="policeTypeChange"
                            placeholder="请选择">
                            <el-option v-for="item in policeInforOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>

                <div class="history-tab">
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)"
                    >实时</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)"
                    >历史</span>
                    <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
                </div>
            </div>

@@ -118,46 +65,22 @@
                </ul>

                <!-- <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp" :class-option="classOption"> -->
                <div
                    v-if="policeSituationRealtimeArr.length > 0"
                    :data="policeSituationRealtimeArr"
                    class="warp"
                    :class-option="classOption"
                >
                    <el-carousel
                        indicator-position="none"
                        direction="vertical"
                        @change="changeAlarm"
                    >
                <div v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp"
                    :class-option="classOption">
                    <el-carousel indicator-position="none" direction="vertical" @change="changeAlarm">
                        <el-carousel-item v-for="item in alarmPageCount" :key="item">
                            <ul class="item">
                                <li
                                    v-for="(item, index) in policeSituationRealtimeArr"
                                    :key="index"
                                    class="row"
                                    @click.stop="handleSelectClick(item)"
                                >
                                <li v-for="(item, index) in policeSituationRealtimeArr" :key="index" class="row"
                                    @click.stop="handleSelectClick(item)">
                                    <span class="num" v-text="item.index"></span>
                                    <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                                    <span class="receiving-alarm-time" v-text="item.BJSJ"></span>
                                    <span
                                        class="call-police-content"
                                        :title="item.BJNR"
                                        v-text="item.BJNR"
                                    ></span>
                                    <span
                                        class="incident-site"
                                        :title="item.SFDZ"
                                        v-text="item.SFDZ"
                                    ></span>
                                    <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
                                    <span class="incident-site" :title="item.SFDZ" v-text="item.SFDZ"></span>
                                    <span class="call-police-type" v-text="item.BJLX"></span>
                                    <span class="have-position">
                                        <i
                                            v-show="item.position == '有'"
                                            class="el-icon-location"
                                            style="color: #1AFA29;"
                                            @click.stop="policeSituationClick(item)"
                                        ></i>
                                        <i v-show="item.position == '有'" class="el-icon-location" style="color: #1AFA29;"
                                            @click.stop="policeSituationClick(item)"></i>
                                    </span>
                                    <span class="alarm-bz" v-text="item.MEMO"></span>
                                </li>
@@ -172,40 +95,20 @@
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table
                    :data="policeSituationHistoryArr"
                    :key="currentPage"
                    style="width: 100%"
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    @cell-click="handleSelectClick"
                >
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="index"
                        label="序号"
                        width="60"
                    ></el-table-column>
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="handleSelectClick">
                    <el-table-column :show-overflow-tooltip="true" prop="index" label="序号" width="60"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"></el-table-column>
                    <el-table-column prop="BJSJ" label="报警时间"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="jqlxName" label="报警类型"></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="position"
                        label="坐标"
                        width="60"
                    >
                    <el-table-column :show-overflow-tooltip="true" prop="position" label="坐标" width="60">
                        <template slot-scope="scope">
                            <el-button
                                v-show="scope.row.position == '有'"
                                @click.stop="policeSituationClick(scope.row)"
                                type="text"
                                size="small"
                                title="定位"
                            >
                            <el-button v-show="scope.row.position == '有'" @click.stop="policeSituationClick(scope.row)"
                                type="text" size="small" title="定位">
                                <i class="el-icon-location" style="color: #1AFA29;"></i>
                            </el-button>
                        </template>
@@ -213,59 +116,33 @@
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"></el-table-column>
                </el-table>

                <div
                    class="pages all-pagination-sty"
                    ref="ElPagination"
                    v-if="policeSituationHistoryArr.length > 0"
                >
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                <div class="pages all-pagination-sty" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path
                    id="bottom-box-path"
                <path id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent"
                />
                    fill="transparent" />
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion
                            dur="8s"
                        <animateMotion dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto"
                            repeatCount="indefinite"
                        />
                            rotate="auto" repeatCount="indefinite" />
                    </circle>
                </mask>
            </defs>

            <use
                stroke-width="2"
                xlink:href="#bottom-box-path"
                mask="url(#border-box-mask)"
                stroke="#4fd2dd"
            >
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 3220"
                    to="3220, 0"
                    dur="8s"
                    repeatCount="indefinite"
                />
            <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
                <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" />
            </use>
        </svg>
    </div>
@@ -783,7 +660,7 @@
            display: flex;
            align-items: center;

            & > div {
            &>div {
                margin: 0 5px;
                flex: 1;
                display: flex;

 src/views/home/components/dialog/areaDetailsBox.vue

@@ -147,7 +147,8 @@

            getPersonInfoPage({
                status,
                depaId: this.userInfo.dept_id,
                // deptId: this.userInfo.dept_id,
                deptId: this.peopleSearchQuery.dept_id,
                areaId: this.peopleSearchQuery.id,
                realName: this.peoplePoliceName,
                phone: this.peopleCallPhone,
@@ -176,12 +177,24 @@
            })
        },

        showpeopledetail (id, name) {
        showpeopledetail (id, name, isIncludeKeypeople, deptId) {
            this.peopleTitle = name
            this.peopleSearchQuery.id = id
            if (deptId) {
                this.peopleSearchQuery.dept_id = deptId
            } else {
                this.peopleSearchQuery.dept_id = this.userInfo.dept_id
            }
            this.peopleVisible = true
            this.peopleInfoList = []
            this.getPersonInfoPage(1)
            console.log('id, name, isIncludeKeypeople,deptId', id, name, isIncludeKeypeople, deptId)
            if (isIncludeKeypeople == 'includeKeypeople') {
                this.getPersonInfoPage()
            } else if (isIncludeKeypeople == 'onlyKeypeople') {
                this.getPersonInfoPage(2)
            } else {
                this.getPersonInfoPage()
            }
        }
    },
}

 src/views/home/components/dialog/keyPersonBox.vue

@@ -1,14 +1,7 @@
<template>
    <!-- 重点人员 -->
    <el-dialog
        :title="keyPersonTitle"
        :visible.sync="keyPersonVisible"
        :before-close="personInfoClose"
        :modal="true"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        class="keyPerson-details-box"
    >
    <el-dialog :title="keyPersonTitle" :visible.sync="keyPersonVisible" :before-close="personInfoClose" :modal="true"
        :modal-append-to-body="false" :close-on-click-modal="false" class="keyPerson-details-box">
        <div class="header" v-show="userInfo.dept_id != '1596020515064381442'">
            <div>
                人员名称：
@@ -22,19 +15,11 @@
            <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
        </div>

        <div
            v-loading="curLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
            class="body"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
        <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <template slot="empty">
                    <div>{{ keyPersonEmptyText }}</div>
                </template>
@@ -43,51 +28,28 @@
                        <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="address"
                    label="地址"
                    min-width="240%"
                ></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdryzry" label="责任人"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="zdrtjdld" label="街道责任领导"></el-table-column>

                <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column> -->
                <!-- <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column> -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            :disabled="positionDisabled(scope.row)"
                            @click="rowClick(scope.row)"
                            type="text"
                            size="small"
                            title="定位"
                        >
                            <i
                                class="el-icon-location"
                                :style="{ color: positionColor(scope.row) }"
                            ></i>
                        <el-button :disabled="positionDisabled(scope.row)" @click="rowClick(scope.row)" type="text"
                            size="small" title="定位">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div
                class="pages all-pagination-sty"
                ref="tablePagination"
                v-show="userInfo.dept_id != '1596020515064381442'"
            >
                <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"
                ></el-pagination>
            <div class="pages all-pagination-sty" ref="tablePagination" v-show="userInfo.dept_id != '1596020515064381442'">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
            </div>
        </div>
    </el-dialog>

 src/views/home/components/leftContainer.vue

@@ -77,12 +77,12 @@
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                            <div class="tab-title-small">实有楼栋:</div>
                            <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                            <div class="tab-title-small">关注场所:</div>
                            <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                            <div class="tab-title-small">实有楼栋:</div>
                            <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box"></div>
@@ -135,7 +135,7 @@

<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
import { getAreaStatisticInfo, getVillageStatisticData, getVillageStatisticDetail, getPlaceOfConcernStatisticData, getPlaceOfConcernStatisticDetail, getVillageDetailAndPlaceStatisticNumber } from "@/api/home/index.js"
import { schoolJSON } from '../homeleft/school'
import { hospitalJSON } from '../homeleft/hospital'
import { hotelJSON } from '../homeleft/hotel'
@@ -146,6 +146,7 @@
import { antiTerroristJSON } from '../homeleft/antiTerrorist'
import { dExplosionJSON } from '../homeleft/dExplosion'
import { serviceObjJSON } from '../homeleft/serviceObj'
import { difficultyJSON } from '../homeleft/difficulty'

import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"

@@ -196,7 +197,25 @@
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%'
            personEchartsHeight: '100%',
            syldPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
            gzcsPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
            syldBigType: '',
            syldName: '',
            gzcsType: '',
            gzcsUnitName: '',
            gzcsPerson: '',
            gzcsPhone: '',
            isFirstMounted: true,
            clickPoliceStationId: '',
        }
    },

@@ -216,6 +235,8 @@
        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })

        this.getVillageDetailAndPlaceStatisticNumber({ deptld: this.userInfo.dept_id })
    },

    methods: {
@@ -297,7 +318,7 @@
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

            this.isFirstMounted = true
            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false
@@ -332,15 +353,17 @@
         * @return {*}
         */
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            this.personEchartsLoading = true

            this.disposeEchart()

            if (type == 0) {
                if (this.tabType == 0 && !this.isFirstMounted) {
                    console.log('再次点击人口总数', this.isFirstMounted)
                    this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
                    return
                }
                this.isFirstMounted = false
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.personEchartsHeight = '100%'

                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

                    this.getPoliceStationInfo()
@@ -350,8 +373,17 @@
                }

            } else if (type == 1) {
                if (this.tabType == 1 && !this.isFirstMounted) {
                    console.log('再次点击重点人口')
                    this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
                    return
                }
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.initkeyPersonEcharts()
            }
            this.tabType = type
        },

        /**
@@ -394,11 +426,11 @@
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data
                    console.log('this.personAll', this.personAll)

                    if (this.userInfo.dept_id == '1596020515064381442') {
                        this.personAll.emphasisNum = 23
                    }


                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate1 = [], yDate2 = []
@@ -418,7 +450,6 @@
                            })
                        })
                    }

                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
                    this.clickPeopleChart()

@@ -685,8 +716,8 @@
                        yDate = [34, 2, 33, 11, 22, 30, 14]
                        this.inithouseEcharts(xDate, yDate)
                    } else {
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象']
                        yDate = [14, 13, 10]
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                        yDate = [14, 13, 10, 17]
                        this.inithouseEcharts(xDate, yDate)
                    }

@@ -700,6 +731,92 @@
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 现有住宅和关注场所统计总数
        getVillageDetailAndPlaceStatisticNumber (params) {
            getVillageDetailAndPlaceStatisticNumber(params).then(res => {
                if (res.data.data.length > 0) {
                    res.data.data.forEach(item => {
                        if (item.typeName == 'gzcs') {
                            this.keyPlaceNum = item.number
                        } else if (item.typeName == 'syld') {
                            this.realHouseNum = item.number
                        }
                    })
                }
            })
        },

        // 实有住宅统计
        getVillageStatisticData (params) {
            getVillageStatisticData(params).then(res => {
                console.log('getVillageStatisticData', params)
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })
                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('实有住宅')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 实有住宅详情
        getVillageStatisticDetail () {
            getVillageStatisticDetail({ deptld: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.syldPage.currentPage, size: this.syldPage.pageSize }).then(res => {
                console.log('getVillageStatisticDetail', res, res.data.data.records)
                this.$parent.syldPage.total = res.data.data.total
                this.$parent.syldArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.syldLoading = false
                }, 500)
            })
        },

        // 关注场所统计
        getPlaceOfConcernStatisticData (params) {
            getPlaceOfConcernStatisticData(params).then(res => {
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })
                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('关注场所')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 关注场所详情
        getPlaceOfConcernStatisticDetail () {
            getPlaceOfConcernStatisticDetail({ deptld: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.gzcsPage.currentPage, size: this.gzcsPage.pageSize }).then(res => {
                console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
                this.$parent.gzcsPage.total = res.data.data.total
                this.$parent.gzcsArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.gzcsLoading = false
                }, 500)
            })
        },
@@ -767,7 +884,7 @@
                    {
                        data: y1Date,
                        type: 'bar',
                        // barWidth: '10%',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
@@ -812,37 +929,38 @@
                    bottom: '2%',
                    containLabel: true
                },
                // dataZoom: [
                //     {
                //         type: "inside",
                //         startValue: 0,
                //         endValue: 8,
                //         minValueSpan: 2,
                //         maxValueSpan: 2,
                //         yAxisIndex: [0],
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                //     },
                //     {
                //         type: 'slider',
                //         realtime: true,
                //         startValue: 0,
                //         endValue: 8,
                //         width: '3.5',
                //         height: '80%',
                //         yAxisIndex: [0], // 控制y轴滚动
                //         fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
                //         handleSize: 0, // 两边手柄尺寸
                //         showDataShadow: false,//是否显示数据阴影 默认auto
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '1%',
                //         right: '5',
                //     }
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }

                // ]
                ]
            }
        },

@@ -852,10 +970,12 @@
            this.houseEchartsLoading = true

            this.disposeHouseEchart()
            if (type == 0) {
                this.getHouseStatisticInfo(2)
            if (type == 1) {
                // this.getHouseStatisticInfo(2)
                this.getVillageStatisticData({ deptld: this.userInfo.dept_id })
            } else {
                this.getHouseStatisticInfo(1)
                // this.getHouseStatisticInfo(1)
                this.getPlaceOfConcernStatisticData({ deptld: this.userInfo.dept_id })
            }
        },

@@ -961,95 +1081,124 @@
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                    this.clickPoliceStationId = params.data.id
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }
            })
        },

        clickHouseChart () {
        clickHouseChart (type) {
            houseMyChart.on('click', params => {
                this.$parent.architectureTitle = params.name

                if (params.name == '学校') {
                    this.$parent.xxPopupShow = true
                    this.$parent.houseArr = []
                    this.$parent.houseLoading = true
                    setTimeout(() => {
                        this.$parent.houseLoading = false
                        this.$parent.houseArr = schoolJSON
                    }, 1000)
                console.log(params, 'clickHouseChart')
                if (type == '实有住宅') {
                    this.syldPage.currentPage = 1
                    this.$parent.syldPage.currentPage = 1
                    this.$parent.syldPopupTitle = params.name
                    this.syldBigType = params.name
                    this.syldName = ''
                    this.$parent.syldArr = []
                    this.$parent.syldPopupShow = true
                    this.$parent.syldLoading = true
                    this.getVillageStatisticDetail()
                } else {
                    this.$parent.architectureShow = true
                    this.$parent.architectureTable = []
                    this.$parent.architectureLoad = true

                    if (params.name == '医院') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = hospitalJSON
                        }, 1000)
                    }

                    if (params.name == '宾馆酒店') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = hotelJSON
                        }, 1000)
                    }

                    if (params.name == '数字经济') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = digitalJSON
                        }, 1000)
                    }

                    if (params.name == '房屋建筑业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = housingJSON
                        }, 1000)
                    }

                    if (params.name == '批发业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = wholesaleJSON
                        }, 1000)
                    }

                    if (params.name == '零售业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = retailJSON
                        }, 1000)
                    }

                    if (params.name == '反恐重点目标') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = antiTerroristJSON
                        }, 1000)
                    }

                    if (params.name == '危爆品') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = dExplosionJSON
                        }, 1000)
                    }

                    if (params.name == '重点服务对象') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = serviceObjJSON
                        }, 1000)
                    }

                    console.log('关注场所')
                    this.gzcsPage.currentPage = 1
                    this.$parent.gzcsPage.currentPage = 1
                    this.gzcsType = params.name
                    this.gzcsUnitName = ''
                    this.gzcsPerson = ''
                    this.gzcsPhone = ''
                    this.$parent.gzcsArr = []
                    this.$parent.gzcsPopupShow = true
                    this.$parent.gzcsLoading = true
                    this.getPlaceOfConcernStatisticDetail()
                }

                // this.$parent.architectureTitle = params.name
                // if (params.name == '学校') {
                //     this.$parent.xxPopupShow = true
                //     this.$parent.houseArr = []
                //     this.$parent.houseLoading = true
                //     setTimeout(() => {
                //         this.$parent.houseLoading = false
                //         this.$parent.houseArr = schoolJSON
                //     }, 1000)
                // } else {
                //     this.$parent.architectureShow = true
                //     this.$parent.architectureTable = []
                //     this.$parent.architectureLoad = true

                //     if (params.name == '医院') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = hospitalJSON
                //         }, 1000)
                //     }

                //     if (params.name == '宾馆酒店') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = hotelJSON
                //         }, 1000)
                //     }

                //     if (params.name == '数字经济') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = digitalJSON
                //         }, 1000)
                //     }

                //     if (params.name == '房屋建筑业') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = housingJSON
                //         }, 1000)
                //     }

                //     if (params.name == '批发业') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = wholesaleJSON
                //         }, 1000)
                //     }

                //     if (params.name == '零售业') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = retailJSON
                //         }, 1000)
                //     }

                //     if (params.name == '反恐重点目标') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = antiTerroristJSON
                //         }, 1000)
                //     }

                //     if (params.name == '危爆品') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = dExplosionJSON
                //         }, 1000)
                //     }

                //     if (params.name == '重点服务对象') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = serviceObjJSON
                //         }, 1000)
                //     }

                //     if (params.name == '困难儿童') {
                //         setTimeout(() => {
                //             this.$parent.architectureLoad = false
                //             this.$parent.architectureTable = difficultyJSON
                //         }, 1000)
                //     }
                // }
            })
        },

@@ -1061,7 +1210,7 @@
            this.disposeEchart()

            let personInfo = await this.getPersonInfo()

            console.log('personInfo', personInfo)
            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [
@@ -1108,6 +1257,8 @@
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })

                res.data = res.data.map(item => {
                    item = {
                        ...item,

 src/views/home/components/leftContainer楼栋修改前.vue

New file
@@ -0,0 +1,1610 @@
<template>
    <div class="container">
        <div class="person-box" style="position: relative;">
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                </div>
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="peopletype == 0">
                        <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                            <div class="tab-title-small">人口总数:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.total ? personAll.total : 0
                                }}人
                            </div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                            <div class="tab-title-small">重点人员:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.emphasisNum ? personAll.emphasisNum : 0
                                }}人
                            </div>
                        </div>
                    </div>

                    <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
                        <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
                    </div>
                </el-main>

                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
                </div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        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" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                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"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">现有住宅</div>
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                            <div class="tab-title-small">实有楼栋:</div>
                            <div class="tab-title-small">{{ realHouseNum ? realHouseNum : 0 }}栋</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                            <div class="tab-title-small">关注场所:</div>
                            <div class="tab-title-small">{{ keyPlaceNum ? keyPlaceNum : 0 }}栋</div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有小区</div>
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab" v-show="isAllPoliceStation">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                            <div class="tab-title-small">小区:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                            <div class="tab-title-small">责任区:</div>
                            <div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div>
                        </div>
                    </div>
                    <div class="sub-tab" v-show="!isAllPoliceStation">
                        <div class="tab1 select-on-tab">
                            <div class="tab-title-small">小区:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                    </div>
                    <div id="landEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
    </div>
</template>

<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
import { schoolJSON } from '../homeleft/school'
import { hospitalJSON } from '../homeleft/hospital'
import { hotelJSON } from '../homeleft/hotel'
import { digitalJSON } from '../homeleft/digital'
import { housingJSON } from '../homeleft/housing'
import { wholesaleJSON } from '../homeleft/wholesale'
import { retailJSON } from '../homeleft/retail'
import { antiTerroristJSON } from '../homeleft/antiTerrorist'
import { dExplosionJSON } from '../homeleft/dExplosion'
import { serviceObjJSON } from '../homeleft/serviceObj'
import { difficultyJSON } from '../homeleft/difficulty'

import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId, getPersonInfo, getPersonInfoPage, getHouseStatisticInfo } from "@/api/dept"

let homePersonmyChart = null
let keyPersonmyChart = null
let houseMyChart
let landMyChart
let timer
let curSubofficeData

let leftTiming = null
let keyPeopleDataLength = 0

let myColor = ['#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC', '#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62']

const myLandColors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']

const peopleColor1 = '#53eefe'
const peopleColor2 = '#f26390'

export default {
    inject: ['userInfo'],

    data () {
        return {
            tabType: 0,
            personEchartsLoading: false,
            houseEchartsLoading: false,
            landEchartsLoading: false,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            peopleTitle: '',
            peopleVisible: false,
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
            policeVillageNum: '',
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
            showBack: true,
            isAllPoliceStation: true,
            realHouseNum: '',
            keyPlaceNum: '',
            personAll: '',
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%'
        }
    },

    created () {
    },

    mounted () {
        // 获取所有数据并加载
        this.getHomeAllData()

        if (this.userInfo.dept_id != '1123598813738675201') {
            // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
            this.showBack = false
            this.isAllPoliceStation = false
        }

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
        })
    },

    methods: {
        // 设备饼图轮播
        keyPeopleEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % keyPeopleDataLength
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            keyPersonmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = param.dataIndex
            })

            keyPersonmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    keyPersonmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % keyPeopleDataLength
                    keyPersonmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    keyPersonmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },

        /**
         * @description: 获取首页的所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.policeStaionID = id

            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false

                this.tabTypeThree = 0
            } else {
                this.showBack = true
                this.isAllPoliceStation = true
            }

            this.personTabClick(this.tabType)

            this.houseTabClick(this.tabTypeTwo)

            this.landTabClick(this.tabTypeThree)

            if (leftTiming != null) {
                clearInterval(leftTiming)
                leftTiming = null
            }

            leftTiming = setInterval(async () => {
                this.houseTabClick(this.tabTypeTwo)

                this.landTabClick(this.tabTypeThree)
            }, 600000)
        },

        /**
         * @description: 户籍人口和重点人员切换
         * @param {*} type
         * @return {*}
         */
        personTabClick (type) {
            this.tabType = type
            this.dataDeep = 1
            this.personEchartsLoading = true

            this.disposeEchart()

            if (type == 0) {
                this.personEchartsHeight = '100%'

                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

                    this.getPoliceStationInfo()

                } else {
                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }

            } else if (type == 1) {
                this.initkeyPersonEcharts()
            }
        },

        /**
         * @description: 获取分局户籍人口数据
         * @return {*}
         */
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()
                    curSubofficeData = res.data.data
                    this.personAll = res.data.data
                    console.log('getPoliceStationInfo', res.data.data)
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                    setTimeout(() => {
                        this.personEchartsLoading = false
                    }, 500)
                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 获取派出所户籍人口数据
         * @param {*} policeStationId
         * @param {*} name
         * @return {*}
         */
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
                    this.disposeEchart()
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data

                    if (this.userInfo.dept_id == '1596020515064381442') {
                        this.personAll.emphasisNum = 23
                    }


                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate1 = [], yDate2 = []

                    if (this.villagePersonStatisticInfoList.data.length > 0) {
                        this.villagePersonStatisticInfoList.data.forEach(e => {
                            xDate.push(e.name.replace('居民委员会', ''))
                            yDate1.push({
                                value: e.hjnum,
                                name: e.name,
                                id: e.id
                            })
                            yDate2.push({
                                value: e.synum,
                                name: e.name,
                                id: e.id
                            })
                        })
                    }

                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
                    this.clickPeopleChart()

                    setTimeout(() => {
                        this.dataDeep = 2
                        this.personEchartsLoading = false
                    }, 1000)

                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 初始化现有人图表
         * @return {*}
         */
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [], yDate1 = [], yDate2 = []
            //传入x,y轴数据

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出', ''))
                    yDate1.push({
                        value: e.hjnum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                    yDate2.push({
                        value: e.synum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                })
            }

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
        },

        /**
         * @description: 图表数据处理
         * @param {*} xDate
         * @param {*} yDate
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
            let options

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据1',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
                        backgroundColor: 'rgba(8, 56, 185, 0.9)',
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xDate,

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
                    legend: {
                        itemWidth: 15,
                        itemHeight: 15,
                        data: ['户籍人口', '实有人口'],
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (name) {
                            var data = []
                            if (name == '户籍人口') {
                                data = options.series[0].data
                            } else {
                                data = options.series[1].data
                            }
                            var total = 0
                            for (var i = 0; i < data.length; i++) {
                                total += data[i].value
                            }
                            return `${name} (${total}人)`
                        }
                    },
                    series: [
                        {
                            name: '户籍人口',
                            data: yDate1,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[0] },
                                    //             { offset: 0.5, color: colors1[1] },
                                    //             { offset: 1, color: colors1[2] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[2] },
                                    //             { offset: 0.7, color: colors1[1] },
                                    //             { offset: 1, color: colors1[0] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },
                        {
                            name: '实有人口',
                            data: yDate2,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[2] },
                                    //             { offset: 0.5, color: colors2[1] },
                                    //             { offset: 1, color: colors2[0] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[0] },
                                    //             { offset: 0.7, color: colors2[1] },
                                    //             { offset: 1, color: colors2[2] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },

                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options

        },

        /**
         * @description: 现有人图表中的返回按钮
         * @return {*}
         */
        backBegin () {
            this.personAll = curSubofficeData
            this.dataDeep = 1
            this.initPersonEcharts()
            this.$parent.getAllPoliceStationCenter()
        },

        /**
         * @description: 获取现有住宅信息
         * @param {*} deptld
         * @param {*} isFollow
         * @return {*}
         */
        getHouseStatisticInfo (isFollow) {
            getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
                this.disposeHouseEchart()

                let xDate = []
                let yDate = []
                if (isFollow == 1) {
                    this.keyPlaceNum = res.data.data.count
                } else {
                    this.realHouseNum = res.data.data.count
                }
                res.data.data.data.forEach(item => {
                    xDate.push(item.name)
                    yDate.push(item.num)
                })
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.keyPlaceNum = 28
                    this.realHouseNum = 205
                    if (isFollow == 2) {
                        xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                        yDate = [34, 2, 33, 11, 22, 30, 14]
                        this.inithouseEcharts(xDate, yDate)
                    } else {
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                        yDate = [14, 13, 10, 17]
                        this.inithouseEcharts(xDate, yDate)
                    }

                    this.clickHouseChart()
                } else {
                    this.inithouseEcharts(xDate, yDate)
                }
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },

        initHouseOptions (xDate, y1Date, y2Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万栋'
                        } else {
                            msg = params.value + '栋'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        // barWidth: '10%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                // barBorderRadius: [0, 30, 30, 0],
                                //     color: function (params) {
                                //     var num = myColor.length
                                //     return myColor[params.dataIndex % num]
                                // },
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                    // {
                    //     data: y2Date,
                    //     show: true,
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: '35%', //统计条宽度
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(102, 102, 102,0.5)'
                    //         },
                    //     },
                    //     z: 1,
                    // }
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                // dataZoom: [
                //     {
                //         type: "inside",
                //         startValue: 0,
                //         endValue: 8,
                //         minValueSpan: 2,
                //         maxValueSpan: 2,
                //         yAxisIndex: [0],
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                //     },
                //     {
                //         type: 'slider',
                //         realtime: true,
                //         startValue: 0,
                //         endValue: 8,
                //         width: '3.5',
                //         height: '80%',
                //         yAxisIndex: [0], // 控制y轴滚动
                //         fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
                //         handleSize: 0, // 两边手柄尺寸
                //         showDataShadow: false,//是否显示数据阴影 默认auto
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '1%',
                //         right: '5',
                //     }

                // ]
            }
        },

        houseTabClick (type) {
            this.tabTypeTwo = type

            this.houseEchartsLoading = true

            this.disposeHouseEchart()
            if (type == 0) {
                this.getHouseStatisticInfo(2)
            } else {
                this.getHouseStatisticInfo(1)
            }
        },

        initLandOptions (xDate, yDate) {
            return {
                color: ['#0532ff'],
                grid: {
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '28%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        return `${params.marker} ${params.name}: ${params.value} 个`
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(10)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(12)
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '24%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                // color: function (params) {
                                //     var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                                //     return myLandColors[params.dataIndex % num]
                                // },
                            }
                        },
                    }
                ],
                // zoomData: [  // 有滚动条 平移
                // dataZoom: [  // 有滚动条 平移
                //     {
                //         type: 'slider',
                //         show: true,
                //         realtime: true,
                //         start: 0,
                //         end: 40,  // 初始展示40%
                //         height: 4,
                //         backgroundColor: 'rgba(47,69,84,0.2)',
                //         fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         handleSize: 0, // 两边手柄尺寸
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '96%',
                //     },
                //     {
                //         type: "inside",  // 支持内部鼠标滚动平移
                //         start: 0,
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                //     }
                // ]
            }
        },

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                if (params.data.type == 'policeStation') {
                    const center = this.$parent.getPoliceStationCenter(params.data.id)
                    this.$EventBus.$emit('toPosition', {
                        layerName: 'carLayers',
                        siteJd: center[0],
                        siteWd: center[1]
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }
            })
        },

        clickHouseChart () {
            houseMyChart.on('click', params => {
                this.$parent.architectureTitle = params.name

                if (params.name == '学校') {
                    this.$parent.xxPopupShow = true
                    this.$parent.houseArr = []
                    this.$parent.houseLoading = true
                    setTimeout(() => {
                        this.$parent.houseLoading = false
                        this.$parent.houseArr = schoolJSON
                    }, 1000)
                } else {
                    this.$parent.architectureShow = true
                    this.$parent.architectureTable = []
                    this.$parent.architectureLoad = true

                    if (params.name == '医院') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = hospitalJSON
                        }, 1000)
                    }

                    if (params.name == '宾馆酒店') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = hotelJSON
                        }, 1000)
                    }

                    if (params.name == '数字经济') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = digitalJSON
                        }, 1000)
                    }

                    if (params.name == '房屋建筑业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = housingJSON
                        }, 1000)
                    }

                    if (params.name == '批发业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = wholesaleJSON
                        }, 1000)
                    }

                    if (params.name == '零售业') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = retailJSON
                        }, 1000)
                    }

                    if (params.name == '反恐重点目标') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = antiTerroristJSON
                        }, 1000)
                    }

                    if (params.name == '危爆品') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = dExplosionJSON
                        }, 1000)
                    }

                    if (params.name == '重点服务对象') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = serviceObjJSON
                        }, 1000)
                    }

                    if (params.name == '困难儿童') {
                        setTimeout(() => {
                            this.$parent.architectureLoad = false
                            this.$parent.architectureTable = difficultyJSON
                        }, 1000)
                    }
                }


            })
        },

        /**
         * @description: 初始化重点人员饼状图
         * @return {*}
         */
        async initkeyPersonEcharts () {
            this.disposeEchart()

            let personInfo = await this.getPersonInfo()

            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [
                    { count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
                    { count: 1, name: '楼盘业主维权群体', value: 1 },
                    { count: 1, name: '欠薪讨债群体', value: 1 },
                    { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
                    { count: 11, name: '征地拆迁群体', value: 11 },
                ]
            }

            const high = this.$refs.REFPERSONECHARTS.offsetHeight

            if (personInfo.length * (high / 7) > high) {
                this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
            } else {
                this.personEchartsHeight = '100%'
            }

            this.$nextTick(() => {
                var chartDom = document.getElementById('PersonEcharts')
                keyPersonmyChart = this.$echarts.init(chartDom)
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

                this.clickkeyPersonChart()
                if (personInfo.length > 1) {
                    this.keyPeopleEchartsCarousel()
                } else {
                    clearInterval(timer)
                    keyPersonmyChart.off("mouseover")
                    keyPersonmyChart.off("mouseout")
                }
            })


            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
        },

        /**
         * @description: 调用接口获取重点人员数据
         * @return {*}
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                res.data = res.data.map(item => {
                    item = {
                        ...item,
                        name: item.zdryxl,
                        value: item.count
                    }

                    return item
                })

                return res.data
            })

            return data
        },

        /**
         * @description: 重点人员饼状图渲染的options
         * @param {*} dataArr
         * @return {*}
         */
        initkeyPersonOption (dataArr) {
            let options

            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无重点人员数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: params => {
                            let msg
                            if (params.value > 10000) {
                                msg = (params.value / 10000).toFixed(2) + '万人'
                            } else {
                                msg = params.value + '人'
                            }
                            msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            return msg
                        },
                        backgroundColor: "rgba(8, 56, 185, 0.9)",
                        borderColor: "rgba(8, 56, 185, 0.9)",
                        textStyle: {
                            fontSize: fontSize(12)
                        },
                        confine: true
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'middle',
                        right: '2%',
                        y: '1%',
                        itemGap: 15,
                        textStyle: {
                            color: '#fff'
                        },
                        align: 'left',
                        formatter: function (name) {
                            let data = dataArr
                            let tarValue
                            for (let i = 0; i < data.length; i++) {
                                if (data[i].name == name) {
                                    tarValue = data[i].value
                                }
                            }
                            let v = tarValue
                            return `${name}  ${v} 人    `
                        },
                    },
                    series: [
                        {
                            top: 110,
                            left: 60,
                            type: 'pie',
                            radius: [20, 50],
                            center: [0, 0],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: dataArr
                        }
                    ],
                    grid: {
                        x: 10,
                        y: 10,
                        x2: 10,
                        y2: 20
                    },
                }
            }

            return options
        },

        /**
         * @description: 重点人员饼状图的点击事件
         * @return {*}
         */
        async clickkeyPersonChart () {
            keyPersonmyChart.on('click', async params => {
                this.$emit('showkeypersondetail', params.name)
            })
        },

        /**
         * @description: 现有小区切换
         * @param {*} type
         * @return {*}
         */
        landTabClick (type) {
            this.tabTypeThree = type
            this.landEchartsLoading = true

            this.disposeLandEchart()
            if (type == 0) {
                this.getAreaStatisticInfo(2)
            } else if (type == 1) {
                this.getAreaStatisticInfo(1)
            }
        },

        /**
         * @description: 获取现有小区数据
         * @param {*} type
         * @param {*} deptId
         * @return {*}
         */
        getAreaStatisticInfo (type) {
            getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
                this.disposeLandEchart()

                let landData = []
                if (type == 2) {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出', '').replace('居民委员会', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                } else if (type == 1) {
                    // this.areaNum = res.data.data.areaNum
                    // this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                }
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)

                this.initLandEcharts(landData)
            }).catch(res => {
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 现有小区图表渲染
         * @param {*} landData
         * @return {*}
         */
        initLandEcharts (landData) {
            this.disposeLandEchart()
            var chartDom = document.getElementById('landEcharts')

            landMyChart = this.$echarts.init(chartDom)

            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))

            this.clickLandChart()
        },

        /**
         * @description: 现有小区图表点击事件
         * @return {*}
         */
        clickLandChart () {
            landMyChart.on('click', params => {
                console.log('clickLandChart')
                if (this.tabTypeThree == 0) {
                    this.$emit('showlanddetail', params.name, 2, params.data.id)
                } else {
                    this.$emit('showlanddetail', params.name, 1, params.data.id)
                }
            })
        },

        /**
         * @description: 视图窗口改变时，echarts图表重置
         * @return {*}
         */
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeEchart () {
            if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
                homePersonmyChart.dispose()
                homePersonmyChart.off('click')
            }

            if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
                keyPersonmyChart.dispose()
                keyPersonmyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeHouseEchart () {
            if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
                houseMyChart.dispose()
                houseMyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeLandEchart () {
            if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
                landMyChart.dispose()
                landMyChart.off('click')
            }
        },


    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)

        this.disposeEchart()
        this.disposeHouseEchart()
        this.disposeLandEchart()

        if (leftTiming != null) {
            clearInterval(leftTiming)
            leftTiming = null
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;

    .person-box {
        .word {
            color: #fff;
            font-size: 14px;
        }

        .before {
            margin-left: 108px;
        }

        .back {
            color: #fff;
            position: absolute;
            top: 96px;
            right: 16px;
            width: 20px;
            height: 20px;
            font-size: 20px;
            cursor: pointer;
        }

        .back:hover {
            color: #43bafe;
        }

        .back::after {
            font-family: element-icons;
            content: '\e6ea';
        }
    }

    .person-box,
    .house-box,
    .land-box {
        margin: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px 0 18px;
            position: relative;
            font-size: 16px;

            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;

            .title-tab {
                span {
                    color: #99cccc;
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .title-num {
                color: #fff;

                span {
                    color: #99cccc;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .choosed {
                color: #fff;
            }

            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }

        // .sub-title {
        //     display: flex;
        //     justify-content: space-between;
        //     height: 36px;
        // }

        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;

            .tab,
            .tab3 {
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

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

            .tab {
                display: flex;
                justify-content: center;
            }

            .tab1 {
                width: 50%;
                margin-left: 25% !important;
                display: flex;
                justify-content: center;
                margin: 0 10px;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
            }
        }

        :deep(.el-main) {
            padding: 0;
        }

        .echarts-box {
            padding: 12px;
            padding-top: 0;
            flex: 1;
            width: 100%;
            // height: 100%;
        }
    }

    .house-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }
    }

    :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
    }
}

.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.mypath {
    stroke: rgba(33, 150, 243, 1);
    stroke-width: 2;
    stroke-dasharray: 888;
    // stroke-dashoffset: 888;
    fill: none;
    animation: go 6s linear infinite forwards;
}

@keyframes go {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 888;
    }
}
</style>

 src/views/home/components/rightContainer.vue

@@ -6,41 +6,16 @@
                    <div>值班信息(当日)</div>
                </div>

                <div class="table-box" v-show="!showMJL">
                    <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"
                        :empty-text="schedulingNoDataText" v-loading="schedulingLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                        <el-table-column prop="dept" label="值班单位"></el-table-column>
                        <el-table-column prop="person" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
                    </el-table>
                    <div class="pointList" v-if="schedulingList == []">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
                            v-for="(item, index) in schedulingDeptList" :key="index">
                            <div class="point" @click="getSchedlingList(item)"></div>
                        </el-tooltip>
                    </div>
                </div>

                <div class="duty-information-box" v-show="showMJL">
                    <div>
                <div class="duty-information-box">
                    <div v-for="item in schedulingList" :key="item.id">
                        <div>
                            <span>值班</span>
                            <span>{{ item.type }}</span>
                        </div>
                        <div>
                            <span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
                            <span>{{ item.person }}</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>副班、巡逻</span>
                        </div>
                        <div>
                            <span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
                        </div>
                    </div>
                    <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div>
                </div>
            </div>

@@ -182,33 +157,41 @@
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        text: '最近一周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: "最近一个月",
                        text: '最近两周',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: "最近三个月",
                        text: '最近三个月',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
                            picker.$emit('pick', [start, end])
                        }
                    }]
            },
            regionTotal: 0,
            linetype: 0,
@@ -216,7 +199,6 @@
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            showMJL: false,
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
@@ -298,65 +280,25 @@

        getSchedulingList () {
            this.schedulingLoading = true
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                const data = [
                    {
                        person:
                            "徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
                        patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
                    }
                ]

                const matrixData = data.map((row) => {
                    let arr = []
                    for (let key in row) {
                        arr.push(row[key])
                    }
                    return arr
                })
                setTimeout(() => {
                    this.schedulingList = matrixData[0].map((col, i) => {
                        return [this.originTitle[i], ...matrixData.map((row) => {
                            return row[i]
                        })]
                    })
                    this.schedulingLoading = false
                }, 1000)

                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
                        this.$refs.caseBox.offsetHeight -
                        this.$refs.crowdBox.offsetHeight -
                        this.$refs.alertBoxTitle.offsetHeight
                })

                this.showMJL = true
            } else {
                const params = {
                    sameday: 1,
                }

                this.showMJL = false
                getSchedulingList(1, 100, params).then((res) => {
                    this.schedulingList = res.data.data.records
                })


                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                    }
                }, 500)


            const params = {
                sameday: 1,
                isPage: 1
            }

            getSchedulingList(params).then((res) => {
                this.schedulingList = res.data.data
            })

            setTimeout(() => {
                this.schedulingNoDataText = '  '
                this.schedulingLoading = false
                if (!this.schedulingList.length) {
                    setTimeout(() => {
                        this.schedulingNoDataText = '暂无值班数据'
                    }, 200)
                }
            }, 500)
        },

        echartsResize () {
@@ -1467,6 +1409,15 @@
                    text-align: left;
                }
            }

            .no-zb-data {
                width: 100%;
                height: 100%;
                background: transparent !important;
                align-items: center;
                display: flex;
                justify-content: center;
            }
        }

        #peopleList {

 src/views/home/components/rightContainer值班修改前.vue

New file
@@ -0,0 +1,1505 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="box">
                <div class="title" ref="alertBoxTitle">
                    <div>值班信息(当日)</div>
                </div>

                <div class="table-box" v-show="!showMJL">
                    <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"
                        :empty-text="schedulingNoDataText" v-loading="schedulingLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                        <el-table-column prop="dept" label="值班单位"></el-table-column>
                        <el-table-column prop="person" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
                    </el-table>
                    <div class="pointList" v-if="schedulingList == []">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
                            v-for="(item, index) in schedulingDeptList" :key="index">
                            <div class="point" @click="getSchedlingList(item)"></div>
                        </el-tooltip>
                    </div>
                </div>

                <div class="duty-information-box" v-show="showMJL">
                    <div>
                        <div>
                            <span>值班</span>
                        </div>
                        <div>
                            <span>徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>副班、巡逻</span>
                        </div>
                        <div>
                            <span>章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥</span>
                        </div>
                    </div>
                </div>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <div class="alert-box" ref="alertBox ">
            <div class="box">
                <div class="title">
                    警情统计
                    <div class="timer">
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
                            :picker-options="pickerOptions"></el-date-picker>
                    </div>
                </div>
                <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)">
                            <div class="tab-title-small">警情变化趋势</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
                            <div class="tab-title-small">警情排行</div>
                        </div>
                    </div>
                    <div id="EventChangeEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <!-- <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>电子沙盘</div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
                    <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
                    <el-table-column prop="scale" label="规模"></el-table-column>
                </el-table>
            </div>
        </div>-->

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
    </div>
</template>
 
<script>
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
]

let rightTiming = null
let equipmentmyChart = null
let eventchangemychart = null
let timer
let equimentDataLength = 0

import recorderArr from "@/assets/data/equimentsDate/recorder.js"
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"

import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"

const timeEvents = []

export default {
    inject: ["userInfo"],
    data () {
        return {
            eventTime: [],
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            regionTotal: 0,
            linetype: 0,
            tableHeight: 0,
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            showMJL: false,
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
        }
    },

    created () {
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = new Date().getTime()
                return time.getTime() > curDate
            },
        }

        this.defaultDate()

        this.getSchedulingList()

        this.getSchedulingDeptList()
    },

    mounted () {
        this.getHomeAllData()

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight =
                this.$refs.Container.offsetHeight -
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                55
        })
    },

    methods: {
        //获取值班列表信息
        getSchedlingList (item) {
            this.$emit("showschedulingdetail", item.dept, item.dept, "type")
        },

        //获取值班单位信息
        getSchedulingDeptList () {
            getSchedulingDeptList().then((res) => {
                this.schedulingDeptList = res.data.data
            })
        },

        // actTabClick (type) {
        //     this.acttype = type
        //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

        /**
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = "") {
            this.policeStaionID = id

            this.initEventChangeEcharts(this.caseInfoType)

            this.initEquipmentEcharts(this.linetype)

            if (rightTiming != null) {
                clearInterval(rightTiming)
                rightTiming = null
            }

            rightTiming = setInterval(async () => {
                this.initEventChangeEcharts(this.caseInfoType)
                this.initEquipmentEcharts(this.linetype)
            }, 600000)
        },

        getSchedulingList () {
            this.schedulingLoading = true
            if (this.userInfo.dept_id == "1596020515064381442") {
                this.schedulingNoDataText = '  '
                const data = [
                    {
                        person:
                            "徐星逸，任圣日，娄永攀，蔡善龙，陈小强，刘开勇，梅祥，吕镇，付建冬",
                        patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
                    }
                ]

                const matrixData = data.map((row) => {
                    let arr = []
                    for (let key in row) {
                        arr.push(row[key])
                    }
                    return arr
                })
                setTimeout(() => {
                    this.schedulingList = matrixData[0].map((col, i) => {
                        return [this.originTitle[i], ...matrixData.map((row) => {
                            return row[i]
                        })]
                    })
                    this.schedulingLoading = false
                }, 1000)

                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
                        this.$refs.caseBox.offsetHeight -
                        this.$refs.crowdBox.offsetHeight -
                        this.$refs.alertBoxTitle.offsetHeight
                })

                this.showMJL = true
            } else {
                const params = {
                    sameday: 1,
                }

                this.showMJL = false
                getSchedulingList(1, 100, params).then((res) => {
                    this.schedulingList = res.data.data.records
                })


                setTimeout(() => {
                    this.schedulingNoDataText = '  '
                    this.schedulingLoading = false
                    if (!this.schedulingList.length) {
                        setTimeout(() => {
                            this.schedulingNoDataText = '暂无值班数据'
                        }, 200)
                    }
                }, 500)


            }

        },

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart &&
                eventchangemychart != null &&
                eventchangemychart.resize()
        },

        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })

            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                eventchangemychart.hideLoading()
                eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
            }, 500)
        },

        // 设置默认时间
        defaultDate () {
            var current = new Date()

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

            this.eventTime = [seven, current] //将值设置给插件绑定的数据
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        // 获取警情统计值
        getCaseAll (start, end) {
            getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let obj = {}
                if (res.data.timeList) {
                    console.log(res.data, 1111)
                    let yDataList = {}
                    yDataList.dqList = res.data.dqList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.zpList = res.data.zpList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.jfList = res.data.jfList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qtList = res.data.qtList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qjList = res.data.qjList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sdList = res.data.sdList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sduList = res.data.sduList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.shList = res.data.shList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    let xData = res.data.timeList.map(item => item.slice(5, 10))
                    obj = { xData, yDataList }
                } else {
                    obj = { xData: [], yDataList: {} }
                }

                eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 获取警情排行统计值
        getCaseRanking (start, end) {
            getCaseRanking(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let data = []

                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => a.value - b.value)
                    res.data.data = res.data.data.map((item, index) => {
                        item.value = item.count

                        if (index == 0) {
                            item.itemStyle = {
                                color: '#EB3C5A'
                            }
                        } else if (index == 1) {
                            item.itemStyle = {
                                color: '#FA8331'
                            }
                        } else if (index == 2) {
                            item.itemStyle = {
                                color: '#F7B833'
                            }
                        } else {
                            item.itemStyle = {
                                color: '#395FFD'
                            }
                        }

                        return item
                    }).sort((a, b) => b.value - a.value)

                    console.log(res.data.data, 465)

                    data = res.data.data
                } else {
                    data = []
                }

                eventchangemychart.setOption(this.initRankingOption(data))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 初始化警情数量统计
        async initEventChangeEcharts (type) {
            this.caseInfoType = type
            this.eventChangeEchartsLoading = true

            if (
                eventchangemychart != null &&
                eventchangemychart != "" &&
                eventchangemychart != undefined
            ) {

                eventchangemychart.clear()
                eventchangemychart.dispose()

            }

            var chartDom = document.getElementById("EventChangeEcharts")
            eventchangemychart = this.$echarts.init(chartDom)

            const date = this.eventTime.map((item) => {
                return this.dateFormat(item)
            })

            if (type == 0) {
                this.getCaseAll(date[0], date[1])
            } else {
                this.getCaseRanking(date[0], date[1])
            }

        },

        // 警情数量统计的options
        initEventChangeOption (xData, yDataList) {
            let option
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                option = {
                    color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
                    tooltip: {
                        trigger: "item",
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    legend: {
                        data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    yAxis: {
                        type: "value",

                        minInterval: 1,

                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            name: '盗窃',
                            data: yDataList.dqList,
                            type: "line",
                            smooth: true,
                            // areaStyle: {
                            //     normal: {
                            //         //渐变色
                            //         color: new this.$echarts.graphic.LinearGradient(
                            //             0,
                            //             0,
                            //             0,
                            //             1,
                            //             [
                            //                 {
                            //                     //波形图渐变色样式
                            //                     offset: 0,
                            //                     color: "rgba(3, 108, 255, 0.7)",
                            //                 },
                            //                 {
                            //                     offset: 0.8,
                            //                     color: "rgba(3, 108, 255, 0.1)",
                            //                 },
                            //             ],
                            //             false
                            //         ),
                            //     },
                            // },
                            // itemStyle: {
                            //     normal: {
                            //         color: "red", //改变折线点的颜色
                            //         lineStyle: {
                            //             color: "rgba(3, 108, 255, 1)", //改变折线颜色
                            //         },
                            //     },
                            // },
                        },
                        {
                            name: '涉诈',
                            data: yDataList.zpList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '纠纷',
                            data: yDataList.jfList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '其他',
                            data: yDataList.qtList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '求助',
                            data: yDataList.qjList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉毒',
                            data: yDataList.sduList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉赌',
                            data: yDataList.sdList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉黄',
                            data: yDataList.shList,
                            type: "line",
                            smooth: true,
                        }

                    ],
                    grid: {
                        top: "24%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
                        containLabel: true,
                    },
                }
            }

            return option
        },

        // 警情排行统计的options
        initRankingOption (dataArr) {
            let option
            if (dataArr.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情排行数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                let seriesData = dataArr.map(item => {
                    return { value: item.value, itemStyle: item.itemStyle }
                })
                let xData = dataArr.map((item) => {
                    let name = item.name.substring(0, 6) + '…'

                    return name
                })
                option = {
                    tooltip: {
                        trigger: "item",
                        confine: true,
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "value",
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            data: dataArr.map(item => item.name),
                            axisLabel: {
                                rich: {
                                    nt1: {
                                        color: "#fff",
                                        backgroundColor: '#EB3B5A',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt2: {
                                        color: "#fff",
                                        backgroundColor: '#FA8231',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt3: {
                                        color: "#fff",
                                        backgroundColor: '#F7B731',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt: {
                                        color: "#fff",
                                        backgroundColor: '#00a9c8',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    }
                                },
                                formatter: function (value, index) {
                                    let idx = index + 1
                                    if (idx <= 3) {
                                        return ["{nt" + idx + "|" + idx + "}"].join("\n")
                                    } else {
                                        return ["{nt|" + idx + "}"].join("\n")
                                    }
                                }
                            }
                        },
                        {//名称
                            type: 'category',
                            offset: -10,
                            position: "left",
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: {
                                color: '#fff',
                                align: "left",
                                verticalAlign: "bottom",
                                lineHeight: fontSize(24),
                                fontSize: fontSize(10)
                            },
                            data: xData.reverse(),
                        },
                    ],
                    series: [
                        {
                            zlevel: 1,
                            type: "bar",
                            barWidth: fontSize(10),
                            data: seriesData,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: fontSize(5)
                                }
                            },
                            label: {
                                show: true,
                                fontSize: fontSize(10),
                                color: "#fff"
                            }
                        }
                    ],
                    grid: {
                        top: "3%",
                        left: "-20%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
                    }
                }
            }

            return option
        },

        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: "车辆",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }

            const typeIndexData = {
                车辆: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
            }

            let data = []
            this.regionTotal = 0
            let dataAll = null
            dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {
                        this.regionTotal += item.count

                        return {
                            equimentType: typeIndexData[item.type],
                            name: item.type,
                            value: Number(item.count),
                            working: Number(item.online),
                            fault: Number(item.offline),
                            label: twoColor[index],
                        }
                    })

                    equimentDataLength = data.length

                    return data
                } else {
                    let normalData = {
                        value: 0,
                        name: "在线",
                        color: "#4caf50",
                        online: true,
                        label: { color: oneColor[0] },
                    }
                    let faultData = {
                        value: 0,
                        name: "离线",
                        color: "#ffd600",
                        online: false,
                        label: { color: oneColor[2] },
                    }

                    res.data.forEach((item) => {
                        this.regionTotal = Number(this.regionTotal) + Number(item.count)

                        normalData.value = Number(normalData.value) + Number(item.online)

                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = Number(item.online)
                                faultData[key] = Number(item.offline)
                            }
                        }

                        faultData.value = Number(faultData.value) + Number(item.offline)
                    })

                    data = [normalData, faultData]

                    equimentDataLength = data.length

                    return data
                }
            }).catch(res => {
                dataAll = '请求错误'
            })

            return dataAll
        },

        // 现有设备饼图初始化
        async initEquipmentEcharts (type) {
            this.linetype = type
            this.equipmentEchartsLoading = true

            if (
                equipmentmyChart != null &&
                equipmentmyChart != "" &&
                equipmentmyChart != undefined
            ) {
                equipmentmyChart.dispose()
                equipmentmyChart.off("click")
            }

            var chartDom = document.getElementById("EquipmentEcharts")
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            if (data == '请求错误') {
                setTimeout(() => {
                    this.equipmentEchartsLoading = false
                }, 500)
            }
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
            })

            equipmentmyChart.setOption(this.initEquipmentOptions(newData))

            this.clickEquimentChart()

            if (newData.length > 1) {
                this.equipmentEchartsCarousel()
            } else {
                clearInterval(timer)
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.equipmentEchartsLoading = false
            }, 500)
        },

        // 现有设备options饼图数据
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: "item",
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if (
                            "carCount" in params.data ||
                            "monitorCount" in params.data ||
                            "phoneCount" in params.data ||
                            "recorderCount" in params.data
                        ) {
                            tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${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="margin-left:10px;color:#fac858">执法记录仪：${params.data.phoneCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
                            `
                        } else {
                            tipHtml = `${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name
                                } ${params.data.value}台</strong>
                            <br />
                            <span style="color:#4caf50">在线：${params.data.working
                                }台</span>
                            <br />
                            <span style="color:#ccc">离线：${params.data.fault
                                }台</span>
                            <br />
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
                                    (params.data.fault /
                                        (params.data.working + params.data.fault)) *
                                    100
                                )}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: "rgba(8, 56, 185, 0.9)",
                    borderColor: "rgba(8, 56, 185, 0.9)",
                    textStyle: {
                        fontSize: fontSize(14),
                    },
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700,
                    },
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center",
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["90%", "136%"],
                        top: "middle",
                        left: "center",
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3),
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                color: "red",
                                fontSize: fontSize(16),
                            },
                        },
                        label: {
                            formatter: '{b} {c}',
                            color: function (params) {
                                let colorList = []
                                if ("carCount" in params.data) {
                                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                } 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", "#787878", "#fac858", "#d766ee"]
                                    } else {
                                        colorList = [
                                            "#5470FE",
                                            "#91cc75",
                                            "#fac858",
                                            "#ee6666",
                                            "#73c0de",
                                            "#3ba272",
                                            "#fc8452",
                                            "#9a60b4",
                                            "#ea7ccc",
                                        ]
                                    }
                                    return colorList[params.dataIndex]
                                },
                            },
                        },
                    },
                ],
            }
        },

        // 设备饼图轮播
        equipmentEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % equimentDataLength
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            equipmentmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % equimentDataLength
                    equipmentmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on("click", (params) => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if ("equimentType" in params.data) {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.equimentType,
                        "type"
                    )
                } else {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.online,
                        "online"
                    )
                }
            })
        },
    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)

        if (equipmentmyChart) {
            equipmentmyChart.dispose()
            equipmentmyChart = null
        }

        if (eventchangemychart) {
            eventchangemychart.dispose()
            eventchangemychart = null
        }

        if (timer) {
            clearInterval(timer)
            timer = null
        }

        if (rightTiming != null) {
            clearInterval(rightTiming)
            rightTiming = null
        }
    },
}
</script>
 
<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;

    .case-box,
    .alert-box,
    .crowd-box {
        position: relative;
        margin: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        // .title::after {
        //     content: '';
        //     position: absolute;
        //     top: 13px;
        //     left: 6px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     background: #43bafe;
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     margin-left: 8px;
        // }

        :deep(.el-main) {
            padding: 0;
        }

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px 0 18px;
            position: relative;

            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99cccc;

                span {
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .timer {
                width: 250px;
            }

            .regionTotal {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                margin-left: 50%;
                letter-spacing: 1px;
            }
        }

        .sub-title {
            display: flex;
            justify-content: space-between;
            height: 36px;
        }

        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;

            .tab {
                display: flex;
                justify-content: center;
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

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

        .echarts-box {
            padding: 12px;
            flex: 1;
            // height: 100%;
            // width: 100%;
        }

        .table-box {
            padding: 0 12px;
            flex: 1;

            .pointList {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-top: -10px;

                .point {
                    width: 12px;
                    height: 12px;
                    border-radius: 50px;
                    background-color: #006699;
                    cursor: pointer;
                }
            }

            :deep(.el-table) {
                .cell {
                    // white-space: pre-line;
                    white-space: pre-wrap;
                    height: 100% !important;
                    line-height: 3.2 !important;
                }

                .el-table__body-wrapper {
                    height: 100% !important;
                    overflow: hidden;

                    .el-table__body {
                        width: 100% !important;
                        height: 100% !important;

                        tbody {
                            width: 100% !important;
                            height: 100% !important;

                            td {
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }

        .duty-information-box {
            height: 100%;

            &>div:first-child {
                background: $table-body-tr-n-color;
            }

            &>div:last-child {
                background: $table-body-tr-2n-color;
            }

            &>div {
                display: flex;
                height: 50%;

                &>div {
                    display: flex;
                    align-items: center;
                }

                &>div:first-child {
                    width: 28%;
                    justify-content: center;
                }

                &>div:last-child {
                    width: 72%;
                    text-align: left;
                }
            }
        }

        #peopleList {
            height: 100%;
        }
    }

    .alert-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }

        :deep(.el-table__header-wrapper) {
            height: 40px;
        }
    }

    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}
</style>

 src/views/home/components/rightContainer值班修改后.vue

New file
@@ -0,0 +1,1438 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="box">
                <div class="title" ref="alertBoxTitle">
                    <div>值班信息(当日)</div>
                </div>

                <div class="duty-information-box">
                    <div v-for="item in schedulingList" :key="item.id">
                        <div>
                            <span>{{ item.type }}</span>
                        </div>
                        <div>
                            <span>{{ item.person }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <div class="alert-box" ref="alertBox ">
            <div class="box">
                <div class="title">
                    警情统计
                    <div class="timer">
                        <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="caseTimeChange"
                            :picker-options="pickerOptions"></el-date-picker>
                    </div>
                </div>
                <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)">
                            <div class="tab-title-small">警情变化趋势</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)">
                            <div class="tab-title-small">警情排行</div>
                        </div>
                    </div>
                    <div id="EventChangeEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>

        <!-- <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <div>电子沙盘</div>
                <div class="title-tab">
                    <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
                    <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                </div>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    size="small"
                    :height="tableHeight"
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
                    <el-table-column prop="scale" label="规模"></el-table-column>
                </el-table>
            </div>
        </div>-->

        <div class="crowd-box" ref="crowdBox">
            <div class="box">
                <div class="title">现有设备</div>
                <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <div class="sub-tab">
                        <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)">
                            <div class="tab-title-small">设备种类</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)">
                            <div class="tab-title-small">设备状态</div>
                        </div>
                    </div>
                    <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
    </div>
</template>
 
<script>
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
]

let rightTiming = null
let equipmentmyChart = null
let eventchangemychart = null
let timer
let equimentDataLength = 0

import recorderArr from "@/assets/data/equimentsDate/recorder.js"
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"

import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js"

const timeEvents = []

export default {
    inject: ["userInfo"],
    data () {
        return {
            eventTime: [],
            equipmentEchartsLoading: false,
            eventChangeEchartsLoading: false,
            schedulingNoDataText: ' ',
            schedulingLoading: false,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            regionTotal: 0,
            linetype: 0,
            tableHeight: 0,
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: "",
            originTitle: ['值班', '副班、巡逻'],
            transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },],
            caseInfoType: 0
        }
    },

    created () {
        this.pickerOptions = {
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = new Date().getTime()
                return time.getTime() > curDate
            },
        }

        this.defaultDate()

        this.getSchedulingList()

        this.getSchedulingDeptList()
    },

    mounted () {
        this.getHomeAllData()

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight =
                this.$refs.Container.offsetHeight -
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                55
        })
    },

    methods: {
        //获取值班列表信息
        getSchedlingList (item) {
            this.$emit("showschedulingdetail", item.dept, item.dept, "type")
        },

        //获取值班单位信息
        getSchedulingDeptList () {
            getSchedulingDeptList().then((res) => {
                this.schedulingDeptList = res.data.data
            })
        },

        // actTabClick (type) {
        //     this.acttype = type
        //     this.$refs.activityTable.bodyWrapper.scrollTop = 0
        //     this.$emit('changeActivityType', type)
        //     this.$emit('activityChange')
        // },

        /**
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = "") {
            this.policeStaionID = id

            this.initEventChangeEcharts(this.caseInfoType)

            this.initEquipmentEcharts(this.linetype)

            if (rightTiming != null) {
                clearInterval(rightTiming)
                rightTiming = null
            }

            rightTiming = setInterval(async () => {
                this.initEventChangeEcharts(this.caseInfoType)
                this.initEquipmentEcharts(this.linetype)
            }, 600000)
        },

        getSchedulingList () {
            this.schedulingLoading = true

            const params = {
                sameday: 1,
                isPage: 1
            }

            getSchedulingList(params).then((res) => {
                this.schedulingList = res.data.data
            })

            setTimeout(() => {
                this.schedulingNoDataText = '  '
                this.schedulingLoading = false
                if (!this.schedulingList.length) {
                    setTimeout(() => {
                        this.schedulingNoDataText = '暂无值班数据'
                    }, 200)
                }
            }, 500)
        },

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart &&
                eventchangemychart != null &&
                eventchangemychart.resize()
        },

        // 警情统计中时间变化
        async caseTimeChange (e) {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })

            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.showLoading({
                text: '拼命加载中',
                color: '#c23531',
                textColor: '#FFF',
                maskColor: 'rgba(0, 0, 0, 0.2)',
                zlevel: 0,
            })
            setTimeout(() => {
                eventchangemychart.hideLoading()
                eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
            }, 500)
        },

        // 设置默认时间
        defaultDate () {
            var current = new Date()

            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

            this.eventTime = [seven, current] //将值设置给插件绑定的数据
        },

        // 获取当前日期
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        // 获取警情统计值
        getCaseAll (start, end) {
            getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let obj = {}
                if (res.data.timeList) {
                    console.log(res.data, 1111)
                    let yDataList = {}
                    yDataList.dqList = res.data.dqList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.zpList = res.data.zpList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.jfList = res.data.jfList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qtList = res.data.qtList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.qjList = res.data.qjList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sdList = res.data.sdList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.sduList = res.data.sduList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    yDataList.shList = res.data.shList.reduce(
                        (previous, current) => {
                            previous.push(current.count)
                            return previous
                        },
                        []
                    )
                    let xData = res.data.timeList.map(item => item.slice(5, 10))
                    obj = { xData, yDataList }
                } else {
                    obj = { xData: [], yDataList: {} }
                }

                eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 获取警情排行统计值
        getCaseRanking (start, end) {
            getCaseRanking(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                let data = []

                if (res.data.data) {
                    res.data.data = res.data.data.sort((a, b) => a.value - b.value)
                    res.data.data = res.data.data.map((item, index) => {
                        item.value = item.count

                        if (index == 0) {
                            item.itemStyle = {
                                color: '#EB3C5A'
                            }
                        } else if (index == 1) {
                            item.itemStyle = {
                                color: '#FA8331'
                            }
                        } else if (index == 2) {
                            item.itemStyle = {
                                color: '#F7B833'
                            }
                        } else {
                            item.itemStyle = {
                                color: '#395FFD'
                            }
                        }

                        return item
                    }).sort((a, b) => b.value - a.value)

                    console.log(res.data.data, 465)

                    data = res.data.data
                } else {
                    data = []
                }

                eventchangemychart.setOption(this.initRankingOption(data))

                setTimeout(() => {
                    this.eventChangeEchartsLoading = false
                }, 500)
            })
        },

        // 初始化警情数量统计
        async initEventChangeEcharts (type) {
            this.caseInfoType = type
            this.eventChangeEchartsLoading = true

            if (
                eventchangemychart != null &&
                eventchangemychart != "" &&
                eventchangemychart != undefined
            ) {

                eventchangemychart.clear()
                eventchangemychart.dispose()

            }

            var chartDom = document.getElementById("EventChangeEcharts")
            eventchangemychart = this.$echarts.init(chartDom)

            const date = this.eventTime.map((item) => {
                return this.dateFormat(item)
            })

            if (type == 0) {
                this.getCaseAll(date[0], date[1])
            } else {
                this.getCaseRanking(date[0], date[1])
            }

        },

        // 警情数量统计的options
        initEventChangeOption (xData, yDataList) {
            let option
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                option = {
                    color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
                    tooltip: {
                        trigger: "item",
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    legend: {
                        data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'],
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    yAxis: {
                        type: "value",

                        minInterval: 1,

                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            name: '盗窃',
                            data: yDataList.dqList,
                            type: "line",
                            smooth: true,
                            // areaStyle: {
                            //     normal: {
                            //         //渐变色
                            //         color: new this.$echarts.graphic.LinearGradient(
                            //             0,
                            //             0,
                            //             0,
                            //             1,
                            //             [
                            //                 {
                            //                     //波形图渐变色样式
                            //                     offset: 0,
                            //                     color: "rgba(3, 108, 255, 0.7)",
                            //                 },
                            //                 {
                            //                     offset: 0.8,
                            //                     color: "rgba(3, 108, 255, 0.1)",
                            //                 },
                            //             ],
                            //             false
                            //         ),
                            //     },
                            // },
                            // itemStyle: {
                            //     normal: {
                            //         color: "red", //改变折线点的颜色
                            //         lineStyle: {
                            //             color: "rgba(3, 108, 255, 1)", //改变折线颜色
                            //         },
                            //     },
                            // },
                        },
                        {
                            name: '涉诈',
                            data: yDataList.zpList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '纠纷',
                            data: yDataList.jfList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '其他',
                            data: yDataList.qtList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '求助',
                            data: yDataList.qjList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉毒',
                            data: yDataList.sduList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉赌',
                            data: yDataList.sdList,
                            type: "line",
                            smooth: true,
                        },
                        {
                            name: '涉黄',
                            data: yDataList.shList,
                            type: "line",
                            smooth: true,
                        }

                    ],
                    grid: {
                        top: "24%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
                        containLabel: true,
                    },
                }
            }

            return option
        },

        // 警情排行统计的options
        initRankingOption (dataArr) {
            let option
            if (dataArr.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: "暂无警情排行数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                let seriesData = dataArr.map(item => {
                    return { value: item.value, itemStyle: item.itemStyle }
                })
                let xData = dataArr.map((item) => {
                    let name = item.name.substring(0, 6) + '…'

                    return name
                })
                option = {
                    tooltip: {
                        trigger: "item",
                        confine: true,
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: "value",
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        axisTick: { show: false },
                        axisLine: { show: false }
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLine: { show: false },
                            axisTick: { show: false },
                            data: dataArr.map(item => item.name),
                            axisLabel: {
                                rich: {
                                    nt1: {
                                        color: "#fff",
                                        backgroundColor: '#EB3B5A',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt2: {
                                        color: "#fff",
                                        backgroundColor: '#FA8231',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt3: {
                                        color: "#fff",
                                        backgroundColor: '#F7B731',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    },
                                    nt: {
                                        color: "#fff",
                                        backgroundColor: '#00a9c8',
                                        width: fontSize(12),
                                        height: fontSize(12),
                                        fontSize: fontSize(10),
                                        align: "center",
                                        borderRadius: fontSize(50),
                                        padding: [0, 1, 2, 1]
                                    }
                                },
                                formatter: function (value, index) {
                                    let idx = index + 1
                                    if (idx <= 3) {
                                        return ["{nt" + idx + "|" + idx + "}"].join("\n")
                                    } else {
                                        return ["{nt|" + idx + "}"].join("\n")
                                    }
                                }
                            }
                        },
                        {//名称
                            type: 'category',
                            offset: -10,
                            position: "left",
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: {
                                color: '#fff',
                                align: "left",
                                verticalAlign: "bottom",
                                lineHeight: fontSize(24),
                                fontSize: fontSize(10)
                            },
                            data: xData.reverse(),
                        },
                    ],
                    series: [
                        {
                            zlevel: 1,
                            type: "bar",
                            barWidth: fontSize(10),
                            data: seriesData,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: fontSize(5)
                                }
                            },
                            label: {
                                show: true,
                                fontSize: fontSize(10),
                                color: "#fff"
                            }
                        }
                    ],
                    grid: {
                        top: "3%",
                        left: "-20%",
                        right: "2%",
                        bottom: "3%",
                        containLabel: true,
                    }
                }
            }

            return option
        },

        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: "车辆",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }

            const typeIndexData = {
                车辆: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
            }

            let data = []
            this.regionTotal = 0
            let dataAll = null
            dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {
                        this.regionTotal += item.count

                        return {
                            equimentType: typeIndexData[item.type],
                            name: item.type,
                            value: Number(item.count),
                            working: Number(item.online),
                            fault: Number(item.offline),
                            label: twoColor[index],
                        }
                    })

                    equimentDataLength = data.length

                    return data
                } else {
                    let normalData = {
                        value: 0,
                        name: "在线",
                        color: "#4caf50",
                        online: true,
                        label: { color: oneColor[0] },
                    }
                    let faultData = {
                        value: 0,
                        name: "离线",
                        color: "#ffd600",
                        online: false,
                        label: { color: oneColor[2] },
                    }

                    res.data.forEach((item) => {
                        this.regionTotal = Number(this.regionTotal) + Number(item.count)

                        normalData.value = Number(normalData.value) + Number(item.online)

                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = Number(item.online)
                                faultData[key] = Number(item.offline)
                            }
                        }

                        faultData.value = Number(faultData.value) + Number(item.offline)
                    })

                    data = [normalData, faultData]

                    equimentDataLength = data.length

                    return data
                }
            }).catch(res => {
                dataAll = '请求错误'
            })

            return dataAll
        },

        // 现有设备饼图初始化
        async initEquipmentEcharts (type) {
            this.linetype = type
            this.equipmentEchartsLoading = true

            if (
                equipmentmyChart != null &&
                equipmentmyChart != "" &&
                equipmentmyChart != undefined
            ) {
                equipmentmyChart.dispose()
                equipmentmyChart.off("click")
            }

            var chartDom = document.getElementById("EquipmentEcharts")
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            if (data == '请求错误') {
                setTimeout(() => {
                    this.equipmentEchartsLoading = false
                }, 500)
            }
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
            })

            equipmentmyChart.setOption(this.initEquipmentOptions(newData))

            this.clickEquimentChart()

            if (newData.length > 1) {
                this.equipmentEchartsCarousel()
            } else {
                clearInterval(timer)
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
            setTimeout(() => {
                this.equipmentEchartsLoading = false
            }, 500)
        },

        // 现有设备options饼图数据
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: "item",
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if (
                            "carCount" in params.data ||
                            "monitorCount" in params.data ||
                            "phoneCount" in params.data ||
                            "recorderCount" in params.data
                        ) {
                            tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${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="margin-left:10px;color:#fac858">执法记录仪：${params.data.phoneCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#ee6666">手台：${params.data.recorderCount}台</span>
                            `
                        } else {
                            tipHtml = `${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name
                                } ${params.data.value}台</strong>
                            <br />
                            <span style="color:#4caf50">在线：${params.data.working
                                }台</span>
                            <br />
                            <span style="color:#ccc">离线：${params.data.fault
                                }台</span>
                            <br />
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
                                    (params.data.fault /
                                        (params.data.working + params.data.fault)) *
                                    100
                                )}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: "rgba(8, 56, 185, 0.9)",
                    borderColor: "rgba(8, 56, 185, 0.9)",
                    textStyle: {
                        fontSize: fontSize(14),
                    },
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700,
                    },
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center",
                    },
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["90%", "136%"],
                        top: "middle",
                        left: "center",
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3),
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                color: "red",
                                fontSize: fontSize(16),
                            },
                        },
                        label: {
                            formatter: '{b} {c}',
                            color: function (params) {
                                let colorList = []
                                if ("carCount" in params.data) {
                                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                } 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", "#787878", "#fac858", "#d766ee"]
                                    } else {
                                        colorList = [
                                            "#5470FE",
                                            "#91cc75",
                                            "#fac858",
                                            "#ee6666",
                                            "#73c0de",
                                            "#3ba272",
                                            "#fc8452",
                                            "#9a60b4",
                                            "#ea7ccc",
                                        ]
                                    }
                                    return colorList[params.dataIndex]
                                },
                            },
                        },
                    },
                ],
            }
        },

        // 设备饼图轮播
        equipmentEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % equimentDataLength
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            equipmentmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                equipmentmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % equimentDataLength
                    equipmentmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on("click", (params) => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if ("equimentType" in params.data) {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.equimentType,
                        "type"
                    )
                } else {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.online,
                        "online"
                    )
                }
            })
        },
    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)

        if (equipmentmyChart) {
            equipmentmyChart.dispose()
            equipmentmyChart = null
        }

        if (eventchangemychart) {
            eventchangemychart.dispose()
            eventchangemychart = null
        }

        if (timer) {
            clearInterval(timer)
            timer = null
        }

        if (rightTiming != null) {
            clearInterval(rightTiming)
            rightTiming = null
        }
    },
}
</script>
 
<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;

    .case-box,
    .alert-box,
    .crowd-box {
        position: relative;
        margin: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        // background: $bg-color;

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        // .title::after {
        //     content: '';
        //     position: absolute;
        //     top: 13px;
        //     left: 6px;
        //     width: 10px;
        //     height: 10px;
        //     border-radius: 50%;
        //     background: #43bafe;
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     margin-left: 8px;
        // }

        :deep(.el-main) {
            padding: 0;
        }

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px 0 18px;
            position: relative;

            font-size: 16px;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;
            // background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .title-tab {
                color: #99cccc;

                span {
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .timer {
                width: 250px;
            }

            .regionTotal {
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                margin-left: 50%;
                letter-spacing: 1px;
            }
        }

        .sub-title {
            display: flex;
            justify-content: space-between;
            height: 36px;
        }

        .sub-tab {
            padding: 10px;
            display: flex;
            color: #99cccc;

            .tab {
                display: flex;
                justify-content: center;
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

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

        .echarts-box {
            padding: 12px;
            flex: 1;
            // height: 100%;
            // width: 100%;
        }

        .table-box {
            padding: 0 12px;
            flex: 1;

            .pointList {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                margin-top: -10px;

                .point {
                    width: 12px;
                    height: 12px;
                    border-radius: 50px;
                    background-color: #006699;
                    cursor: pointer;
                }
            }

            :deep(.el-table) {
                .cell {
                    // white-space: pre-line;
                    white-space: pre-wrap;
                    height: 100% !important;
                    line-height: 3.2 !important;
                }

                .el-table__body-wrapper {
                    height: 100% !important;
                    overflow: hidden;

                    .el-table__body {
                        width: 100% !important;
                        height: 100% !important;

                        tbody {
                            width: 100% !important;
                            height: 100% !important;

                            td {
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }

        .duty-information-box {
            height: 100%;

            &>div:first-child {
                background: $table-body-tr-n-color;
            }

            &>div:last-child {
                background: $table-body-tr-2n-color;
            }

            &>div {
                display: flex;
                height: 50%;

                &>div {
                    display: flex;
                    align-items: center;
                }

                &>div:first-child {
                    width: 28%;
                    justify-content: center;
                }

                &>div:last-child {
                    width: 72%;
                    text-align: left;
                }
            }
        }

        #peopleList {
            height: 100%;
        }
    }

    .alert-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }

        :deep(.el-table__header-wrapper) {
            height: 40px;
        }
    }

    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}
</style>

 src/views/home/homeleft/difficulty.js

New file
@@ -0,0 +1,238 @@
export const difficultyJSON = [
    {
        "序号": "1",
        KNCJ: "塔水",
        name: "李学浩",
        KNXM: "李学浩",
        KNSFZ: "361102201202242035",
        KNDH: "13879307790",
        KNJTDZ: "茅家岭街道塔水村委会徐家16号附1号",
        KNHJDZ: "茅家岭街道塔水村委会徐家16号附1号",
        KNZFYY: "困难儿童",
        x: "117.9693363",
        y: "28.39041217"
    },
    {
        "序号": "2",
        KNCJ: "解放居委会",
        name: "刘开祥",
        KNXM: "刘开祥",
        KNSFZ: "361102200809092016",
        KNDH: "13870366144",
        KNJTDZ: "茅家岭街道解放居委会上杨家湖64号附2号",
        KNHJDZ: "茅家岭街道解放居委会上杨家湖64号附2号",
        KNZFYY: "留守儿童",
        x: "117.9613048",
        y: "28.42618442"
    },
    {
        "序号": "3",
        KNCJ: "畴口",
        name: "汪歆芮",

        KNXM: "汪歆芮",
        KNSFZ: "361102201310262025",
        KNDH: "15932915353",
        KNJTDZ: "茅家岭街道畴口居委会畴口62号附2号",
        KNHJDZ: "茅家岭街道畴口居委会畴口62号附2号",
        KNZFYY: "留守儿童",
        x: "117.9672497",
        y: "28.42518078"
    },
    {
        "序号": "4",
        KNCJ: "钟灵社区",
        name: "黄诗妍",

        KNXM: "黄诗妍",
        KNSFZ: "361121201712064020",
        KNDH: "15579377786",
        KNJTDZ: "创南东路50号",
        KNHJDZ: "田墩镇荷家村黄坞自然村104号",
        KNZFYY: "留守儿童",
        x: "117.9571234",
        y: "28.4347776"
    },
    {
        "序号": "5",
        KNCJ: "同心居委会",
        name: "徐安琪",

        KNXM: "徐安琪",
        KNSFZ: "361102201701132025",
        KNDH: "13687031072",
        KNJTDZ: "茅家岭街道同心居委会前湾21号",
        KNHJDZ: "茅家岭街道同心居委会前湾21号",
        KNZFYY: "贫困儿童",
        x: "117.9430983",
        y: "28.42606722"
    },
    {
        "序号": "6",
        KNCJ: "景苑社区",
        name: "林国增",

        KNXM: "林国增",
        KNSFZ: "361122200809180310",
        KNDH: "18270326365",
        KNJTDZ: "同心景苑7-2-1103",
        KNHJDZ: "洋口镇青桥村九龙湾25号",
        KNZFYY: "贫困儿童",
        x: "117.9446054",
        y: "28.41923146"
    },
    {
        "序号": "7",
        KNCJ: "世纪花园社区",
        name: "陈紫如",

        KNXM: "陈紫如",
        KNSFZ: "361121201206023322",
        KNDH: "13767336280",
        KNJTDZ: "兴粮小区1-1-车库",
        KNHJDZ: "铁山乡小溪畲族村上小溪102号",
        KNZFYY: "留守儿童",
        x: "117.9503325",
        y: "28.42902681"
    },
    {
        "序号": "8",
        KNCJ: "四吉居委会",
        name: "兰德隆",

        KNXM: "兰德隆",
        KNSFZ: "36110220091007201X",
        KNDH: "17879315113",
        KNJTDZ: "茅家岭街道四吉居委会沙洲棚50号附1号",
        KNHJDZ: "茅家岭街道四吉居委会沙洲棚50号附1号",
        KNZFYY: "困难家庭儿童",
        x: "117.9827435",
        y: "28.42449381"
    },
    {
        "序号": "9",
        KNCJ: "周田村委会",
        name: "邱昌伦",

        KNXM: "邱昌伦",
        KNSFZ: "361102200910252010",
        KNDH: "15180358210",
        KNJTDZ: "茅家岭街道周田村委会下周田17号附2号",
        KNHJDZ: "茅家岭街道周田村委会下周田17号附2号",
        KNZFYY: "困难儿童",
        x: "117.95329",
        y: "28.4015021"
    },
    {
        "序号": "10",
        KNCJ: "瀚林社区",
        name: "祝语辰",

        KNXM: "祝语辰",
        KNSFZ: "360203201604161052",
        KNDH: "13607031006",
        KNJTDZ: "滨江首座7-1-403",
        KNHJDZ: "南环路6号7幢1单元403室",
        KNZFYY: "留守儿童",
        x: "117.9773662",
        y: "28.42716967"
    },
    {
        "序号": "11",
        KNCJ: "汪家园社区",
        name: "童俊鹏",

        KNXM: "童俊鹏",
        KNSFZ: "361102201403172037",
        KNDH: "13117834246",
        KNJTDZ: "解放安置小区",
        KNHJDZ: "茅家岭街道汪家园居委会兰家157号",
        KNZFYY: "留守儿童",
        x: "117.9558029",
        y: "28.42530058"
    },
    {
        "序号": "12",
        KNCJ: "杨家湖社区",
        name: "蔡嘉鑫",

        KNXM: "蔡嘉鑫",
        KNSFZ: "361102200811171514",
        KNDH: "14796853726",
        KNJTDZ: "三江花园二期8-2-101",
        KNHJDZ: "龙潭路28号",
        KNZFYY: "困难儿童",
        x: "117.964529",
        y: "28.42878934"
    },
    {
        "序号": "13",
        KNCJ: "茅家岭村",
        name: "蔡智博",

        KNXM: "蔡智博",
        KNSFZ: "361102201407222011",
        KNDH: "13517936990",
        KNJTDZ: "茅家岭街道茅家岭村委会茅家岭98号附1号",
        KNHJDZ: "茅家岭街道茅家岭村委会茅家岭98号附1号",
        KNZFYY: "困难儿童",
        x: "117.9568596",
        y: "28.42606108"
    },
    {
        "序号": "14",
        KNCJ: "毓秀社区",
        name: "吴彦霖",

        KNXM: "吴彦霖",
        KNSFZ: "361102201206032019",
        KNDH: "15179004436",
        KNJTDZ: "钟灵路137号8栋1单元301室",
        KNHJDZ: "钟灵路137号8栋1单元301室",
        KNZFYY: "困难儿童",
        x: "117.9588057",
        y: "28.43423132"
    },
    {
        "序号": "15",
        KNCJ: "车头畲族村",
        name: "肖宇豪",

        KNXM: "肖宇豪",
        KNSFZ: "361102201511302011",
        KNDH: "15070300927",
        KNJTDZ: "茅家岭街道车头村委会下车头19号",
        KNHJDZ: "茅家岭街道车头村委会下车头19号",
        KNZFYY: "父亲因病已故跟随爷爷奶奶生活",
        x: "117.9910119",
        y: "28.42330882"
    },
    {
        "序号": "16",
        KNCJ: "车头畲族村",
        name: "郑思童",

        KNXM: "郑思童",
        KNSFZ: "361102201304082028",
        KNDH: "18379363578",
        KNJTDZ: "茅家岭街道车头村委会上车头73号附1号",
        KNHJDZ: "茅家岭街道车头村委会上车头73号附1号",
        KNZFYY: "父亲离家母亲改嫁跟随爷爷奶奶生活",
        x: "118.2363583",
        y: "28.73502291"
    },
    {
        "序号": "17",
        KNCJ: "车头畲族村",
        name: "郑青凤",

        KNXM: "郑青凤",
        KNSFZ: "361102201602232020",
        KNDH: "18379363578",
        KNJTDZ: "茅家岭街道车头村委会上车头73号附1号",
        KNHJDZ: "茅家岭街道车头村委会上车头73号附1号",
        KNZFYY: "父亲离家母亲改嫁跟随爷爷奶奶生活",
        x: "118.2363583",
        y: "28.73502291"
    }
]

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-05 16:07:00
 * @LastEditTime: 2023-06-20 15:17:51
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -11,30 +11,18 @@

<template>
    <div class="home-page container" v-show="isShowHomeContent">
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
            @showlanddetail="showlanddetail"
        ></left-container>
        <left-container class="left-container" @showpeopledetail="showpeopledetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"
            @showlanddetail="showlanddetail"></left-container>

        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @showschedulingdetail="showschedulingdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            ref="rightContainer"
        ></right-container>
        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @showschedulingdetail="showschedulingdetail" @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType" ref="rightContainer"></right-container>

        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
        <bottom-container class="bottom-container" ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>

        <scheduling-list ref="schedulingList"></scheduling-list>

@@ -59,55 +47,24 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'name'"
                :selectAllClass="selectAllClass"
            ></map-select>
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'" :selectAllClass="selectAllClass"></map-select>

            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'name'"
            ></map-select>
            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>

            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'name'"
                :selectAllClass="selectHouseClass"
            ></map-select>
            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'name'" :selectAllClass="selectHouseClass"></map-select>
        </div>

        <el-dialog
            :title="panoramaTitle"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :modal="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            class="panorama-details-box"
        >
        <el-dialog :title="panoramaTitle" :visible.sync="panoramaVisible" :before-close="panoramaBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="panorama-details-box">
            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0"></iframe>
        </el-dialog>

        <el-dialog
            :title="phoneTitle"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :modal="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            class="phone-details-box"
        >
        <el-dialog :title="phoneTitle" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="phone-details-box">
            <div class="item">
                <div>包干民警：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -126,15 +83,8 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="equimentTitle"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :modal="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            class="equiment-details-box"
        >
        <el-dialog :title="equimentTitle" :visible.sync="equimentVisible" :before-close="equimentBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="equiment-details-box">
            <div class="header">
                <div>
                    设备名称：
@@ -145,20 +95,12 @@
                <el-button type="primary" icon="el-icon-delete" @click="clearSearchEquiment">清空</el-button>
            </div>

            <div
                v-loading="equimentLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)"
                class="body"
            >
                <el-table
                    :data="equimentTableData"
                    style="width: 100%"
            <div v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
                <el-table :data="equimentTableData" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName"
                >
                    :row-class-name="tableRowClassName">
                    <template slot="empty">
                        <div>{{ equimentEmtyText }}</div>
                    </template>
@@ -169,24 +111,12 @@
                        </template>
                    </el-table-column>

                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="name"
                        label="设备名称"
                        min-width="320%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="channelId"
                        label="通道编号"
                        min-width="160%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="policeStationName"
                        label="所属派出所"
                        min-width="140%"
                    ></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"
                        min-width="320%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="channelId" label="通道编号"
                        min-width="160%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"
                        min-width="140%"></el-table-column>
                    <el-table-column label="设备状态">
                        <template slot-scope="scope">
                            <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
@@ -194,12 +124,7 @@
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                @click="play(scope.row)"
                                type="text"
                                size="small"
                                title="播放视频"
                            >
                            <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <i class="el-icon-video-play"></i>
                            </el-button>
                        </template>
@@ -207,37 +132,18 @@
                </el-table>

                <div class="pages all-pagination-sty">
                    <el-pagination
                        background
                        layout="prev, pager, next, total"
                        :total="equimentPagingTotal"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next, total" :total="equimentPagingTotal"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            title="警情信息"
            :visible.sync="policeSituationVisible"
            :modal="true"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            :before-close="policeSituationBeforeClose"
            class="policeSituation-details-box"
        >
        <el-dialog title="警情信息" :visible.sync="policeSituationVisible" :modal="true" :close-on-click-modal="false"
            :modal-append-to-body="false" :before-close="policeSituationBeforeClose" class="policeSituation-details-box">
            <div class="btn-change">
                <div
                    :class="{ on: policeInformationType == '接警信息' }"
                    @click="alarmOrActAsPolice('接警信息')"
                >接警信息</div>
                <div
                    :class="{ on: policeInformationType == '出警信息' }"
                    @click="alarmOrActAsPolice('出警信息')"
                >出警信息</div>
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
@@ -299,10 +205,7 @@
                </div>
            </div>

            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
                class="box"
            >
            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
@@ -359,54 +262,26 @@
                </div>
            </div>

            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
                class="box no-data"
            >暂无数据</div>
            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据</div>
        </el-dialog>

        <el-dialog
            :title="dialogEquimentVideoTitle"
            :visible.sync="dialogEquimentVideoVisible"
            :modal-append-to-body="false"
            :before-close="dialogBeforeClose"
            :modal="true"
            :close-on-click-modal="false"
            class="car-video-box"
        >
        <el-dialog :title="dialogEquimentVideoTitle" :visible.sync="dialogEquimentVideoVisible"
            :modal-append-to-body="false" :before-close="dialogBeforeClose" :modal="true" :close-on-click-modal="false"
            class="car-video-box">
            <video-loading v-show="videoPlayShow"></video-loading>

            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="videoElement"
                style="object-fit: fill"
            ></video>
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>

        <el-dialog
            title="学校"
            :visible.sync="xxPopupShow"
            :before-close="landBeforeClose"
            :modal="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            class="land-details-box"
            v-loading="houseLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
        >
            <el-table
                :data="houseArr"
                style="width: 100%"
        <el-dialog title="学校" :visible.sync="xxPopupShow" :before-close="landBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box" v-loading="houseLoading"
            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)">
            <el-table :data="houseArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                v-show="!houseLoading"
            >
                v-show="!houseLoading">
                <el-table-column :show-overflow-tooltip="true" prop="ZXXSQ" label="县（市、区）"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="XQPCS" label="辖区派出所"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="XXMC" label="校园名称"></el-table-column>
@@ -414,220 +289,221 @@
                <el-table-column :show-overflow-tooltip="true" prop="BGMJ" label="包干民警"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            :disabled="positionDisabled(scope.row)"
                            @click="landRowClick(scope.row)"
                            type="text"
                            size="small"
                            :title="'定位'"
                        >
                            <i
                                class="el-icon-location"
                                :style="{ color: positionColor(scope.row) }"
                            ></i>
                        <el-button :disabled="positionDisabled(scope.row)" @click="landRowClick(scope.row)" type="text"
                            size="small" :title="'定位'">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :title="architectureTitle"
            :visible.sync="architectureShow"
            :before-close="landBeforeClose"
            :modal="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            class="land-details-box"
            v-loading="architectureLoad"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)"
        >
            <el-table
                :data="architectureTable"
                style="width: 100%"
        <el-dialog :title="architectureTitle" :visible.sync="architectureShow" :before-close="landBeforeClose" :modal="true"
            :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box"
            v-loading="architectureLoad" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)">
            <el-table :data="architectureTable" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                v-show="!architectureLoad"
            >
                <el-table-column
                    v-if="currentItemShow('ZXXSQ')"
                    :show-overflow-tooltip="true"
                    prop="ZXXSQ"
                    label="县（市、区）"
                ></el-table-column>
                v-show="!architectureLoad">
                <el-table-column v-if="currentItemShow('KNCJ')" :show-overflow-tooltip="true" prop="KNCJ"
                    label="村居"></el-table-column>

                <el-table-column
                    v-if="currentItemShow('RYXM')"
                    :show-overflow-tooltip="true"
                    prop="RYXM"
                    label="姓名"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('RYXB')"
                    :show-overflow-tooltip="true"
                    prop="RYXB"
                    label="性别"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('RYNL')"
                    :show-overflow-tooltip="true"
                    prop="RYNL"
                    label="年龄"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('RYLB')"
                    :show-overflow-tooltip="true"
                    prop="RYLB"
                    label="类别"
                ></el-table-column>
                <el-table-column v-if="currentItemShow('KNXM')" :show-overflow-tooltip="true" prop="KNXM"
                    label="姓名"></el-table-column>

                <el-table-column
                    v-if="currentItemShow('XQPCS')"
                    :show-overflow-tooltip="true"
                    prop="XQPCS"
                    label="辖区派出所"
                ></el-table-column>
                <el-table-column v-if="currentItemShow('KNSFZ')" :show-overflow-tooltip="true" prop="KNSFZ"
                    label="身份证号码"></el-table-column>

                <el-table-column
                    v-if="currentItemShow('JZMC')"
                    :show-overflow-tooltip="true"
                    prop="XXMC"
                    label="学校名称"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JDMC')"
                    :show-overflow-tooltip="true"
                    prop="JDMC"
                    label="酒店名称"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('YYMC')"
                    :show-overflow-tooltip="true"
                    prop="YYMC"
                    label="医院名称"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('QYMC')"
                    :show-overflow-tooltip="true"
                    prop="QYMC"
                    label="企业名称"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('DWMC')"
                    :show-overflow-tooltip="true"
                    prop="DWMC"
                    label="单位名称"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('DWDZ')"
                    :show-overflow-tooltip="true"
                    prop="DWDZ"
                    label="单位地址"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('ZYBW')"
                    :show-overflow-tooltip="true"
                    prop="ZYBW"
                    label="重要部位"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JZSQ')"
                    :show-overflow-tooltip="true"
                    prop="JZSQ"
                    label="社区"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JDFR')"
                    :show-overflow-tooltip="true"
                    prop="JDFR"
                    label="法人"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JZFR')"
                    :show-overflow-tooltip="true"
                    prop="JZFR"
                    label="法人"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('FRSFZ')"
                    :show-overflow-tooltip="true"
                    prop="FRSFZ"
                    label="身份证号码"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JZDH')"
                    :show-overflow-tooltip="true"
                    prop="JZDH"
                    label="电话号码"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('FZR')"
                    :show-overflow-tooltip="true"
                    prop="FZR"
                    label="负责人"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('FZRDH')"
                    :show-overflow-tooltip="true"
                    prop="FZRDH"
                    label="联系电话"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('CLRQ')"
                    :show-overflow-tooltip="true"
                    prop="CLRQ"
                    label="成立日期"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JDDZ')"
                    :show-overflow-tooltip="true"
                    prop="JDDZ"
                    label="地址"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('JTZZ')"
                    :show-overflow-tooltip="true"
                    prop="JTZZ"
                    label="家庭住址"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('BGMJ')"
                    :show-overflow-tooltip="true"
                    prop="BGMJ"
                    label="包干民警"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('ZRMJ')"
                    :show-overflow-tooltip="true"
                    prop="ZRMJ"
                    label="责任民警"
                ></el-table-column>
                <el-table-column
                    v-if="currentItemShow('RYLX')"
                    :show-overflow-tooltip="true"
                    prop="RYLX"
                    label="联系方式"
                ></el-table-column>
                <el-table-column v-if="currentItemShow('KNDH')" :show-overflow-tooltip="true" prop="KNDH"
                    label="联系电话"></el-table-column>

                <el-table-column v-if="currentItemShow('KNJTDZ')" :show-overflow-tooltip="true" prop="KNJTDZ"
                    label="家庭地址"></el-table-column>

                <el-table-column v-if="currentItemShow('KNHJDZ')" :show-overflow-tooltip="true" prop="KNHJDZ"
                    label="户籍地址"></el-table-column>

                <el-table-column v-if="currentItemShow('KNZFYY')" :show-overflow-tooltip="true" prop="KNZFYY"
                    label="走访原因"></el-table-column>

                <el-table-column v-if="currentItemShow('ZXXSQ')" :show-overflow-tooltip="true" prop="ZXXSQ"
                    label="县（市、区）"></el-table-column>

                <el-table-column v-if="currentItemShow('RYXM')" :show-overflow-tooltip="true" prop="RYXM"
                    label="姓名"></el-table-column>
                <el-table-column v-if="currentItemShow('RYXB')" :show-overflow-tooltip="true" prop="RYXB"
                    label="性别"></el-table-column>
                <el-table-column v-if="currentItemShow('RYNL')" :show-overflow-tooltip="true" prop="RYNL"
                    label="年龄"></el-table-column>
                <el-table-column v-if="currentItemShow('RYLB')" :show-overflow-tooltip="true" prop="RYLB"
                    label="类别"></el-table-column>

                <el-table-column v-if="currentItemShow('XQPCS')" :show-overflow-tooltip="true" prop="XQPCS"
                    label="辖区派出所"></el-table-column>

                <el-table-column v-if="currentItemShow('JZMC')" :show-overflow-tooltip="true" prop="XXMC"
                    label="学校名称"></el-table-column>
                <el-table-column v-if="currentItemShow('JDMC')" :show-overflow-tooltip="true" prop="JDMC"
                    label="酒店名称"></el-table-column>
                <el-table-column v-if="currentItemShow('YYMC')" :show-overflow-tooltip="true" prop="YYMC"
                    label="医院名称"></el-table-column>
                <el-table-column v-if="currentItemShow('QYMC')" :show-overflow-tooltip="true" prop="QYMC"
                    label="企业名称"></el-table-column>
                <el-table-column v-if="currentItemShow('DWMC')" :show-overflow-tooltip="true" prop="DWMC"
                    label="单位名称"></el-table-column>
                <el-table-column v-if="currentItemShow('DWDZ')" :show-overflow-tooltip="true" prop="DWDZ"
                    label="单位地址"></el-table-column>
                <el-table-column v-if="currentItemShow('ZYBW')" :show-overflow-tooltip="true" prop="ZYBW"
                    label="重要部位"></el-table-column>
                <el-table-column v-if="currentItemShow('JZSQ')" :show-overflow-tooltip="true" prop="JZSQ"
                    label="社区"></el-table-column>
                <el-table-column v-if="currentItemShow('JDFR')" :show-overflow-tooltip="true" prop="JDFR"
                    label="法人"></el-table-column>
                <el-table-column v-if="currentItemShow('JZFR')" :show-overflow-tooltip="true" prop="JZFR"
                    label="法人"></el-table-column>
                <el-table-column v-if="currentItemShow('FRSFZ')" :show-overflow-tooltip="true" prop="FRSFZ"
                    label="身份证号码"></el-table-column>
                <el-table-column v-if="currentItemShow('JZDH')" :show-overflow-tooltip="true" prop="JZDH"
                    label="电话号码"></el-table-column>
                <el-table-column v-if="currentItemShow('FZR')" :show-overflow-tooltip="true" prop="FZR"
                    label="负责人"></el-table-column>
                <el-table-column v-if="currentItemShow('FZRDH')" :show-overflow-tooltip="true" prop="FZRDH"
                    label="联系电话"></el-table-column>
                <el-table-column v-if="currentItemShow('CLRQ')" :show-overflow-tooltip="true" prop="CLRQ"
                    label="成立日期"></el-table-column>
                <el-table-column v-if="currentItemShow('JDDZ')" :show-overflow-tooltip="true" prop="JDDZ"
                    label="地址"></el-table-column>
                <el-table-column v-if="currentItemShow('JTZZ')" :show-overflow-tooltip="true" prop="JTZZ"
                    label="家庭住址"></el-table-column>
                <el-table-column v-if="currentItemShow('BGMJ')" :show-overflow-tooltip="true" prop="BGMJ"
                    label="包干民警"></el-table-column>
                <el-table-column v-if="currentItemShow('ZRMJ')" :show-overflow-tooltip="true" prop="ZRMJ"
                    label="责任民警"></el-table-column>
                <el-table-column v-if="currentItemShow('RYLX')" :show-overflow-tooltip="true" prop="RYLX"
                    label="联系方式"></el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            :disabled="positionDisabled(scope.row)"
                            @click="landRowClick(scope.row)"
                            type="text"
                            size="small"
                            :title="'定位'"
                        >
                            <i
                                class="el-icon-location"
                                :style="{ color: positionColor(scope.row) }"
                            ></i>
                        <el-button :disabled="positionDisabled(scope.row)" @click="landRowClick(scope.row)" type="text"
                            size="small" :title="'定位'">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog :title="syldPopupTitle" :visible.sync="syldPopupShow" :modal="true" :modal-append-to-body="false"
            :close-on-click-modal="false" class="syld-details-box" v-loading="syldLoading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
            <div class="header">
                <div>
                    名称：
                    <input type="text" v-model="syldName" placeholder="请输入楼栋名称" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchSyldDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearSyldSearchValue">清空</el-button>
            </div>
            <el-table :data="syldArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <el-table-column :show-overflow-tooltip="true" prop="county" label="县（市、区）"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="辖区派出所"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" label="名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="bigType" label="大类名称"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="midType" label="中类名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="smallType" label="小类名称"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="address" label="地址"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeman" label="包干民警"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policemanPhone" label="包干民警电话"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="neighborhoodName" label="居委会名称"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="positionDisabled(scope.row)" @click="syldRowClick(scope.row)" type="text"
                            size="small" :title="'定位'">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="syld_page all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :page-size="syldPage.pageSize"
                    :total="syldPage.total" :current-page="syldPage.currentPage"
                    @current-change="handleSyldPageChange"></el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="gzcsPopupTitle" :visible.sync="gzcsPopupShow" :modal="true" :modal-append-to-body="false"
            :close-on-click-modal="false" class="syld-details-box" v-loading="gzcsLoading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
            <div class="header">
                <div>
                    单位名称：
                    <input type="text" v-model="gzcsUnitName" placeholder="请输入单位名称" />
                </div>
                <div>
                    责任人：
                    <input type="text" v-model="gzcsPerson" placeholder="请输入责任人" />
                </div>
                <div>
                    手机号：
                    <input type="text" v-model="gzcsPhone" placeholder="请输入手机号" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchGzcsDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearGzcsSearchValue">清空</el-button>
            </div>
            <el-table :data="gzcsArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }">
                <el-table-column v-if="currentGzcsItemShow('policeStationName')" :show-overflow-tooltip="true"
                    prop="policeStationName" label="辖区派出所"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('unitName')" :show-overflow-tooltip="true" prop="unitName"
                    label="名称"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('address')" :show-overflow-tooltip="true" prop="address"
                    label="地址"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('person')" :show-overflow-tooltip="true" prop="person"
                    label="责任人"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('phone')" :show-overflow-tooltip="true" prop="phone"
                    label="手机号"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('tel')" :show-overflow-tooltip="true" prop="tel"
                    label="座机"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('job')" :show-overflow-tooltip="true" prop="job"
                    label="职务"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('securityLevel')" :show-overflow-tooltip="true"
                    prop="securityLevel" label="安保级别"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('attentionType')" :show-overflow-tooltip="true"
                    prop="attentionType" label="关注类型"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('status')" :show-overflow-tooltip="true" prop="status"
                    label="状态"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('scale')" :show-overflow-tooltip="true" prop="scale"
                    label="规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('phteacherScaleone')" :show-overflow-tooltip="true"
                    prop="teacherScale" label="教师规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('studentScale')" :show-overflow-tooltip="true"
                    prop="studentScale" label="学生规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('officeArea')" :show-overflow-tooltip="true" prop="officeArea"
                    label="办公区域"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('officeMain')" :show-overflow-tooltip="true" prop="officeMain"
                    label="办公主体"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('hazardousGoodsName')" :show-overflow-tooltip="true"
                    prop="hazardousGoodsName" label="危险品名称"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('remark')" :show-overflow-tooltip="true" prop="remark"
                    label="备注"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button :disabled="positionDisabled(scope.row)" @click="gzcsRowClick(scope.row)" type="text"
                            size="small" :title="'定位'">
                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="syld_page all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :page-size="gzcsPage.pageSize"
                    :total="gzcsPage.total" :current-page="gzcsPage.currentPage"
                    @current-change="handleGzcsPageChange"></el-pagination>
            </div>
        </el-dialog>

        <land-details-box ref="landDetailsBox" :policeStaionID="policeStaionID"></land-details-box>
@@ -702,36 +578,36 @@
                    label: '责任区2',
                    id: '16',
                }]
            }]
            }],
    }]
let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(208, 167, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 150),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(208, 167, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 120),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 120),
]
let timer = []

@@ -750,6 +626,7 @@
import { antiTerroristJSON } from './homeleft/antiTerrorist'
import { dExplosionJSON } from './homeleft/dExplosion'
import { serviceObjJSON } from './homeleft/serviceObj'
import { difficultyJSON } from './homeleft/difficulty'

import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'
@@ -781,10 +658,12 @@

    data () {
        return {
            syldName: '',
            architectureTitle: '',
            xxPopupShow: false,
            architectureShow: false,
            houseLoading: false,
            syldLoading: false,
            architectureLoad: false,
            houseArr: [],
            architectureTable: [],
@@ -864,6 +743,26 @@
            flvPlayer: null,

            videoPlayShow: false,
            syldArr: [],
            syldPopupTitle: '',
            syldPopupShow: false,
            syldPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
            gzcsArr: [],
            gzcsPopupTitle: '',
            gzcsPopupShow: false,
            gzcsLoading: false,
            gzcsPage: {
                total: 0,
                pageSize: 15,
                currentPage: 1
            },
            gzcsUnitName: '',
            gzcsPerson: '',
            gzcsPhone: '',
        }
    },

@@ -909,7 +808,24 @@
                    return false
                }
            }
        }
        },

        currentGzcsItemShow () {
            return (item) => {
                if (this.gzcsArr.length > 0) {
                    if (item in this.gzcsArr[0]) {
                        if (this.gzcsArr[0][item] == '') {
                            return false
                        }
                        return true
                    } else {
                        return false
                    }
                } else {
                    return false
                }
            }
        },
    },

    created () {
@@ -940,7 +856,11 @@
    },

    mounted () {
        const that = this
        this.$nextTick(() => {
            global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, that.dataSourcesLayerSetCursorStyle)


            this.$EventBus.$emit('closeMxTileset')
            circleLayer = new global.DC.PrimitiveLayer('circleLayer')
            global.viewer.addLayer(circleLayer)
@@ -949,6 +869,7 @@
            // document.querySelector('.dc-container .dc-location-bar').classList.add('homebottom')
            document.querySelector('.screen-full-btn').classList.add('homebottom')
            document.querySelector('.over-look-btn').classList.add('homebottom')
            document.querySelector('.compass-btn').classList.add('homebottom')
            document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            this.setDomStyle()

@@ -1003,6 +924,8 @@

                this.architectureSitesLayer(serviceObjJSON)

                this.architectureSitesLayer(difficultyJSON)

            }
            // 绘制信州边界线
            let xinzhouRange = xinzhou.reduce(
@@ -1023,7 +946,6 @@
            xinzhouLayer.addOverlay(xinzhouPolyline)
        })

        const that = this
        this.$EventBus.$on('closeLoading', () => {
            that.closeLoading()
        })
@@ -1050,6 +972,123 @@
            })
        },

        // 实有楼栋点击事件
        syldRowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.longitude,
                siteWd: row.latitude,
                siteGd: 200
            })
            this.$store.commit('SET_MAPSEARCHPOPUP', true)
            this.$store.commit('SET_MAPSEARCHPOPUPDATA', {
                name: row.name
            })
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'mapSearchPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.longitude),
                            Number(row.latitude),
                            0
                        )
                    )
                ]
            })
            this.syldPopupShow = false
        },

        // 关注场所点击事件
        gzcsRowClick (row) {
            console.log('gzcsRowClick', row)
            this.$EventBus.$emit('toPosition', {
                siteJd: row.longitude,
                siteWd: row.latitude,
                siteGd: 200
            })
            this.$store.commit('SET_ARCHITECTUREPOPUP', true)
            this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataType: row.type })
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'architectureDivElementDom',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.longitude),
                            Number(row.latitude),
                            0
                        )
                    )
                ]
            })
            this.gzcsPopupShow = false
        },

        // 实有楼栋分页事件
        handleSyldPageChange (current) {
            this.syldLoading = true
            this.syldArr = []
            this.syldPage.currentPage = current
            this.$refs.leftContainer.syldPage.currentPage = this.syldPage.currentPage
            this.$refs.leftContainer.getVillageStatisticDetail()
        },

        // 实有楼栋搜索事件
        searchSyldDetail () {
            this.syldLoading = true
            this.syldArr = []
            this.$refs.leftContainer.syldName = this.syldName
            this.$refs.leftContainer.syldPage.currentPage = 1
            this.syldPage.currentPage = 1
            this.$refs.leftContainer.getVillageStatisticDetail()
        },

        // 实有楼栋清空事件
        clearSyldSearchValue () {
            this.syldLoading = true
            this.syldArr = []
            this.$refs.leftContainer.syldName = ''
            this.syldName = ''
            this.$refs.leftContainer.syldPage.currentPage = 1
            this.syldPage.currentPage = 1
            this.$refs.leftContainer.getVillageStatisticDetail()
        },

        // 关注场所分页事件
        handleGzcsPageChange (current) {
            this.gzcsLoading = true
            this.gzcsArr = []
            this.gzcsPage.currentPage = current
            this.$refs.leftContainer.gzcsPage.currentPage = this.gzcsPage.currentPage
            this.$refs.leftContainer.getPlaceOfConcernStatisticDetail()
        },

        // 关注场所搜索事件
        searchGzcsDetail () {
            this.gzcsLoading = true
            this.gzcsArr = []
            this.$refs.leftContainer.gzcsUnitName = this.gzcsUnitName
            this.$refs.leftContainer.gzcsPerson = this.gzcsPerson
            this.$refs.leftContainer.gzcsPhone = this.gzcsPhone
            this.$refs.leftContainer.gzcsPage.currentPage = 1
            this.gzcsPage.currentPage = 1
            this.$refs.leftContainer.getPlaceOfConcernStatisticDetail()
        },

        // 关注场所清空事件
        clearGzcsSearchValue () {
            this.gzcsLoading = true
            this.gzcsArr = []
            this.$refs.leftContainer.gzcsUnitName = ''
            this.$refs.leftContainer.gzcsPerson = ''
            this.$refs.leftContainer.gzcsPhone = ''
            this.gzcsUnitName = ''
            this.gzcsPerson = ''
            this.gzcsPhone = ''
            this.$refs.leftContainer.gzcsPage.currentPage = 1
            this.gzcsPage.currentPage = 1
            this.$refs.leftContainer.getPlaceOfConcernStatisticDetail()
        },

        landRowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.x,
@@ -1061,7 +1100,6 @@
                this.$store.commit('SET_ARCHITECTUREPOPUP', true)

                this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataTitle: this.architectureTitle })

                // eslint-disable-next-line no-redeclare
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'architectureDivElementDom',
@@ -1586,6 +1624,43 @@

            if (this.policeSituationLayerShow == true) {
                this.policeSituationList.forEach((item, index) => {
                    let pointColor, pointOutlineColor

                    switch (item.jqlxName) {
                        case '盗窃':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 125)
                            break
                        case '涉诈':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 125)
                            break
                        case '纠纷':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 125)
                            break
                        case '涉赌':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 125)
                            break
                        case '涉毒':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 125)
                            break
                        case '涉黄':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 125)
                            break
                        case '求助':
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 125)
                            break
                        default:
                            pointColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 255)
                            pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 125)
                            break
                    }

                    let center = new global.DC.Position(item.lng, item.lat)
                    let point = new global.DC.PointPrimitive(center)

@@ -1597,9 +1672,9 @@
                            num = 0
                        }
                        point.setStyle({
                            outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
                            outlineColor: pointOutlineColor,//边框颜色
                            outlineWidth: num,//边框大小，
                            color: global.DC.Color.RED
                            color: pointColor
                        })
                    }, 100)

@@ -1834,6 +1909,20 @@
            //绘制文本  
            ctx.fillText(text, 0, 0)
            return c
        },

        dataSourcesLayerSetCursorStyle (e) {
            if (e.target && 'id' in e.target) {
                let flag = DataSourcesArray.some(item => item._primitives._guid == e.target.id.entityCollection.owner._primitives._guid)

                if (flag) {
                    global.viewer.canvas.style.cursor = 'default'
                }
            }

            if (e.layer && 'id' in e.layer && e.layer.id == xinzhouLayer.id) {
                global.viewer.canvas.style.cursor = 'default'
            }
        },

        // 加载面数据的方法
@@ -2291,8 +2380,8 @@
         * @param {*} name
         * @return {*}
         */
        showpeopledetail (id, name) {
            this.$refs.areaDetailsBox.showpeopledetail(id, name)
        showpeopledetail (id, name, isIncludeKeypeople, deptId) {
            this.$refs.areaDetailsBox.showpeopledetail(id, name, isIncludeKeypeople, deptId)
        },

        /**
@@ -2376,6 +2465,7 @@
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
                document.querySelector('.screen-full-btn').classList.add('homebottom')
                document.querySelector('.over-look-btn').classList.add('homebottom')
                document.querySelector('.compass-btn').classList.add('homebottom')
                document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            }
        },
@@ -2383,6 +2473,10 @@
    },

    destroyed () {
        const that = this

        global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, that.dataSourcesLayerSetCursorStyle)

        this.$store.commit('SET_MAPSEARCHPOPUP', false)
        this.$store.commit('SET_ARCHITECTUREPOPUP', false)
        this.$store.commit('SET_ISSHOWHOMECONTENTBTN', false)
@@ -2489,6 +2583,7 @@
        // document.querySelector('.dc-container .dc-location-bar').classList.remove('homebottom')
        document.querySelector('.screen-full-btn').classList.remove('homebottom')
        document.querySelector('.over-look-btn').classList.remove('homebottom')
        document.querySelector('.compass-btn').classList.remove('homebottom')
        document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom')
        window.removeEventListener('resize', this.setDomStyle)


 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-23 16:39:02
 * @LastEditTime: 2023-06-20 20:11:38
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -596,7 +596,7 @@
                            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="zdryxl" label="重点人员类型" v-if="keyPeopleType == 2"></el-table-column>
                    <el-table-column prop="zdryxl" label="重点人员类型" v-if="keyPeopleType == 3"></el-table-column>
                    <el-table-column prop="realName" label="姓名"></el-table-column>
                    <el-table-column prop="cardNo" label="身份证号"></el-table-column>
                    <el-table-column label="户室">
@@ -1934,6 +1934,43 @@
                    })
                    this.callPoliceData.forEach((item, index) => {
                        if (item.lng != "" && item.lat != "") {
                            let pointColor, pointOutlineColor

                            switch (item.jqlxName) {
                                case '盗窃':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 125)
                                    break
                                case '涉诈':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 125)
                                    break
                                case '纠纷':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 125)
                                    break
                                case '涉赌':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 125)
                                    break
                                case '涉毒':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 125)
                                    break
                                case '涉黄':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 125)
                                    break
                                case '求助':
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 125)
                                    break
                                default:
                                    pointColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 255)
                                    pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 125)
                                    break
                            }

                            let center = new global.DC.Position(item.lng, item.lat)
                            let point = new global.DC.PointPrimitive(center)

@@ -1945,9 +1982,9 @@
                                    num = 0
                                }
                                point.setStyle({
                                    outlineColor: global.DC.Color.RED.withAlpha(0.5), //边框颜色
                                    outlineColor: pointOutlineColor, //边框颜色
                                    outlineWidth: num, //边框大小，
                                    color: global.DC.Color.RED,
                                    color: pointColor,
                                })
                            }, 100)


 src/views/layout/index.vue

@@ -12,23 +12,13 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -41,29 +31,17 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span
                        :class="{ on: currentUrl.indexOf(item.path) != -1 || currentUrl.indexOf(item.pathT) != -1 }"
                    >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 || currentUrl.indexOf(item.pathT) != -1 }">
                        {{
                        item.menuName }}
                            item.menuName }}
                    </span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click.stop="goToPath(subItem)"
                        >
                        <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
                            v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -109,25 +87,15 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button
                    slot="showButton"
                    v-show="leftShow"
                    class="flexible-btn"
                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
            </map-box>
        </div>
    </div>
@@ -245,6 +213,7 @@
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                })

@@ -307,13 +276,14 @@
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.over-look-btn').classList.add('shrink-btn')

                document.querySelector('.compass-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
            } else {
                // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                document.querySelector('.compass-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
            }
        },
@@ -331,13 +301,14 @@
                    document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                    document.querySelector('.over-look-btn').classList.add('shrink-btn')

                    document.querySelector('.compass-btn').classList.add('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                } else {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                }
            })
@@ -425,7 +396,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            & > img {
            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -441,7 +412,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                & > span {
                &>span {
                    transform: skew(-58deg);
                }
            }
@@ -455,7 +426,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                & > span {
                &>span {
                    transform: skew(58deg);
                }
            }
@@ -465,10 +436,11 @@
            display: flex;
            align-items: center;

            & > .nav-list {
            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                & > span.on {
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -600,7 +572,7 @@
                    font-size: 16px;
                    font-weight: normal;

                    & > div {
                    &>div {
                        margin-top: 4px;
                        width: 100px;
                        height: 32px;

 src/views/policeInfor/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-15 10:34:43
 * @LastEditTime: 2023-06-20 16:48:41
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -696,6 +696,43 @@
            this.siteLayerShow = true

            data.forEach((item, index) => {
                let pointColor, pointOutlineColor

                switch (item.jqlxName) {
                    case '盗窃':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(57, 16, 133, 125)
                        break
                    case '涉诈':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(196, 29, 127, 125)
                        break
                    case '纠纷':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 120, 117, 125)
                        break
                    case '涉赌':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 122, 69, 125)
                        break
                    case '涉毒':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(47, 84, 235, 125)
                        break
                    case '涉黄':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 236, 61, 125)
                        break
                    case '求助':
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(82, 196, 26, 125)
                        break
                    default:
                        pointColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 255)
                        pointOutlineColor = global.DC.Namespace.Cesium.Color.fromBytes(207, 19, 34, 125)
                        break
                }

                if (item.lng && item.lng != undefined && item.lng != '') {
                    let center = new global.DC.Position(Number(item.lng), Number(item.lat))
                    let point = new global.DC.PointPrimitive(center)
@@ -709,9 +746,9 @@
                        }

                        point.setStyle({
                            outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
                            outlineColor: pointOutlineColor,//边框颜色
                            outlineWidth: num,//边框大小，
                            color: global.DC.Color.RED
                            color: pointColor
                        })
                    }, 100)


 vue.config.js

@@ -167,6 +167,7 @@
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                target: "http://localhost:82",
                // target: "http://106.225.193.35:82",
                // target: "http://192.168.1.170:82",
                // target: "http://192.168.0.100:82",
                // target: "http://172.16.13.150:82",
                // target: "http://10.141.11.11:8081/api",