首页加载面数据更改

shuishen

2023-07-11 642169a0f3836dfcbecd1a4c5953160d4e316934

首页加载面数据更改

 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-30 10:15:14
 * @LastEditTime: 2023-07-11 15:07:02
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -1245,7 +1245,7 @@
         * @param {*} flag 显示隐藏
         */
        layerShow (layerName, flag) {
            layersObjcect[layerName].show = flag
            if (layersObjcect[layerName]) layersObjcect[layerName].show = flag
        },

        /**

 src/utils/turfPolygon.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-31 10:52:25
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-07 14:34:41
 * @LastEditTime: 2023-07-11 15:30:20
 * @FilePath: \srs-police-affairs\src\utils\turfPolygon.js
 * @Description:
 *
@@ -37,9 +37,16 @@
  let arr = [];

  params.forEach((areaArray) => {
    JSON.parse(areaArray).coordinates.forEach((item) => {
      arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates);
    });
    let data = JSON.parse(areaArray);
    if (data.type == "Polygon") {
      data.coordinates.forEach((item) => {
        arr.push(turf.centroid(turf.polygon([item])).geometry.coordinates);
      });
    } else {
      data.coordinates.forEach((item) => {
        arr.push(turf.centroid(turf.polygon([item[0]])).geometry.coordinates);
      });
    }
  });

  if (arr.length == 1) {

 src/views/home/index copy.vue

New file
@@ -0,0 +1,2800 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-11 14:54:15
 * @FilePath: \srs-police-affairs\src\views\home\index copy.vue
 * @Description: 小区-栋-层-房屋
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
-->

<template>
    <div class="home-page container" v-show="isShowHomeContent">
        <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>

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

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

        <div class="center-container">
            <div class="layers-control-btn area">
                <el-checkbox v-model="areaPolygonLayerShow" @change="areaPolygonChange">辖区</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn house">     <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox> </div> -->
            <div class="layers-control-btn car">
                <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
            </div>
            <div class="layers-control-btn phone">
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">    <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>      </div> -->
            <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
        </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="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>
        </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">
            <!-- <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">
            <div class="item">
                <div>包干民警：</div>
                <div>{{ phoneDetails.person }}</div>
            </div>
            <div class="item">
                <div>联系方式：</div>
                <div>{{ phoneDetails.phoneID }}</div>
            </div>
            <div class="item">
                <div>手台类型：</div>
                <div>{{ phoneDetails.phoneType }}</div>
            </div>
            <div class="item">
                <div>所在地址：</div>
                <div>{{ phoneDetails.location }}</div>
            </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">
            <div class="header">
                <div>
                    设备名称：
                    <input type="text" v-model="equimentSearchVal" placeholder="请输入…" />
                </div>

                <el-button type="primary" icon="el-icon-search" @click="searchEquiment">搜索</el-button>
                <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%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName">
                    <template slot="empty">
                        <div>{{ equimentEmtyText }}</div>
                    </template>

                    <el-table-column label="序号" type="index" align="center">
                        <template slot-scope="scope">
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </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 label="设备状态">
                        <template slot-scope="scope">
                            <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <i class="el-icon-video-play"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </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>
                </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">
            <div class="btn-change">
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
                <div class="item">
                    <div>接警单位编号:</div>
                    <div>{{ policeSituationDetailObj.JJDWBH }}</div>
                </div>
                <div class="item">
                    <div>接警单位名称:</div>
                    <div>{{ policeSituationDetailObj.JJDWMC }}</div>
                </div>
                <div class="item">
                    <div>接警单编号:</div>
                    <div>{{ policeSituationDetailObj.JJDBH }}</div>
                </div>
                <div class="item">
                    <div>接警员编号:</div>
                    <div>{{ policeSituationDetailObj.JJYBH }}</div>
                </div>
                <div class="item">
                    <div>接警员姓名:</div>
                    <div>{{ policeSituationDetailObj.JJYXM }}</div>
                </div>
                <div class="item">
                    <div>报警时间:</div>
                    <div>{{ policeSituationDetailObj.BJSJ }}</div>
                </div>
                <div class="item">
                    <div>报警电话:</div>
                    <div>{{ policeSituationDetailObj.LXDH }}</div>
                </div>
                <div class="item">
                    <div>报警人姓名:</div>
                    <div>{{ policeSituationDetailObj.BJRXM }}</div>
                </div>
                <div class="item">
                    <div>报警类别:</div>
                    <div>{{ policeSituationDetailObj.BJLB }}</div>
                </div>

                <div class="item">
                    <div>报警类型:</div>
                    <div>{{ policeSituationDetailObj.BJLX }}</div>
                </div>

                <div class="dialog-content">
                    <div>事发地址:</div>
                    <div>{{ policeSituationDetailObj.SFDZ }}</div>
                </div>

                <div class="dialog-content">
                    <div>报警内容:</div>
                    <div>{{ policeSituationDetailObj.BJNR }}</div>
                </div>

                <div class="dialog-content">
                    <div>备注:</div>
                    <div>{{ policeSituationDetailObj.MEMO }}</div>
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
                </div>
                <div class="item">
                    <div>处警单位名称:</div>
                    <div>{{ CJdata.CJDWMC }}</div>
                </div>
                <div class="item">
                    <div>处警单编号:</div>
                    <div>{{ CJdata.CJDBH }}</div>
                </div>
                <div class="item">
                    <div>处警员编号:</div>
                    <div>{{ CJdata.CJYBH }}</div>
                </div>
                <div class="item">
                    <div>处警员姓名:</div>
                    <div>{{ CJdata.CJYXM }}</div>
                </div>
                <div class="item">
                    <div>接警时间:</div>
                    <div>{{ CJdata.JJSJ }}</div>
                </div>
                <div class="item">
                    <div>到达现场时间:</div>
                    <div>{{ CJdata.DDXCSJ }}</div>
                </div>
                <div class="item">
                    <div>首次反馈时间:</div>
                    <div>{{ CJdata.SCFKSJ }}</div>
                </div>
                <div class="item">
                    <div>处理完毕时间:</div>
                    <div>{{ CJdata.CLWBSJ }}</div>
                </div>
                <div class="item">
                    <div>出动人员:</div>
                    <div>{{ CJdata.CDRY }}</div>
                </div>
                <div class="item">
                    <div>出动车辆:</div>
                    <div>{{ CJdata.CDCL }}</div>
                </div>

                <div class="item">
                    <div>处警类型:</div>
                    <div>{{ CJdata.CJLX }}</div>
                </div>

                <div class="dialog-content">
                    <div>备注:</div>
                    <div>{{ CJdata.MEMO }}</div>
                </div>
            </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">
            <video-loading v-show="videoPlayShow"></video-loading>

            <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%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                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>
                <el-table-column :show-overflow-tooltip="true" prop="JZDZ" label="地址"></el-table-column>
                <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>
                    </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%"
                :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('KNCJ')" :show-overflow-tooltip="true" prop="KNCJ"
                    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('KNSFZ')" :show-overflow-tooltip="true" prop="KNSFZ"
                    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>
                    </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>
        <area-details-box ref="areaDetailsBox" :policeStaionID="policeStaionID"></area-details-box>
        <key-person-box ref="keyPersonBox" :policeStaionID="policeStaionID"></key-person-box>
    </div>
</template>

<script>
let cylinderLayer = null
let circleLayer = null
let DataSourcesArray = []
let loading = null
let xinzhouLayer = null

let treeData = [
    {
        label: '全部',
        id: '1',
        children: [
            {
                label: '车站派出所',
                id: '2',
                children: [{
                    label: '责任区1',
                    id: '4',
                }, {
                    label: '责任区2',
                    id: '5',
                }]
            },
            {
                label: '沙溪派出所',
                id: '3',
                children: [{
                    label: '责任区1',
                    id: '6',
                }, {
                    label: '责任区2',
                    id: '7',
                }]
            },
            {
                label: '北门派出所',
                id: '8',
                children: [{
                    label: '责任区1',
                    id: '9',
                }, {
                    label: '责任区2',
                    id: '10',
                }]
            },
            {
                label: '灵溪派出所',
                id: '11',
                children: [{
                    label: '责任区1',
                    id: '12',
                }, {
                    label: '责任区2',
                    id: '13',
                }]
            },
            {
                label: '江光派出所',
                id: '14',
                children: [{
                    label: '责任区1',
                    id: '15',
                }, {
                    label: '责任区2',
                    id: '16',
                }]
            }],
    }]
let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(208, 167, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 90),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 90),
]
let timer = []

import flvjs from 'flv.js'

import geoJson from './444.json'

import { keypeopleJSON } from './homeleft/keyPeople'
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 { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'

import monitoringList from '@/assets/data/monitoring.js'
import leftContainer from './components/leftContainer'
import schedulingList from './components/schedulingList'
import rightContainer from './components/rightContainer'
import bottomContainer from './components/bottomContainer'
import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
import { getPoliceStationList } from "@/api/dept"
import { convertStringToList } from "@/utils/geometryStringTool"

import { getDevices } from '@/api/video/index.js'
import { getActAsPoliceList, getEquipmentPaging, getPoliceStationTree, getEquipmentAll } from "@/api/home/index.js"
import { getTalkEquimentPage, getPoliceCameraEquimentPage } from '@/api/home/equiment.js'

import landDetailsBox from './components/dialog/landDetailsBox.vue'
import areaDetailsBox from './components/dialog/areaDetailsBox.vue'
import keyPersonBox from './components/dialog/keyPersonBox.vue'

import { initMapPosition } from '@/utils/mapPositionInit'
import { mapGetters } from 'vuex'
import { xinzhou } from './xinzhou.js'

export default {
    inject: ['userInfo'],

    data () {
        return {
            syldName: '',
            architectureTitle: '',
            xxPopupShow: false,
            architectureShow: false,
            houseLoading: false,
            syldLoading: false,
            architectureLoad: false,
            houseArr: [],
            architectureTable: [],
            equimentLoading: false,
            equimentEmtyText: "",
            // 是否显示辖区
            areaPolygonLayerShow: true,
            selectAllClass: false,
            selectHouseClass: false,
            // 是否显示第一级select
            houseLayerShow: true,
            carLayerShow: false,
            cameraLayerShow: false,
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            policeSituationLayerShow: true,
            panoramaTitle: '',
            panoramaVrUrl: '',
            equimentTitle: '',
            panoramaVisible: false,
            equimentVisible: false,
            policeSituationVisible: false,
            policeInformationType: '接警信息',

            phoneDetails: {},
            phoneTitle: '',
            peopleId: "",
            phoneVisible: false,

            houseList: [],

            monitoringList: [],
            panoramaList: [],
            activityList: [],
            policeSituationList: [],
            policeStationCheckValue: '全部',
            areaOptionData: [],
            areaCheckValue: '请选择责任区',
            housingCheckValue: '请选择小区',
            //下拉框的内容 （Array类型） 必传
            policeStationOptions: [],
            policeStaionChecked: '',
            areaChecked: '',
            areaOptions: [],
            housingOptions: [],

            defaultProps: {
                children: 'children',
                label: 'label'
            },

            // 设备搜索条件
            equimentSearchVal: '',
            // 现有设备表格
            equimentTableData: [],
            equimentCurrentSelect: {},
            // 设备分页
            currentPage: 1,
            pagesize: 12,
            equimentPagingTotal: 0,

            // 现有设备视屏播放的
            dialogEquimentVideoTitle: '',
            dialogEquimentVideoVisible: false,

            timetype: 0,
            historyArr: [],
            underwayArr: [],
            activityType: 0,
            policeSituationHistoryType: 0,
            policeSituationDetailObj: {},
            CJdata: {},

            // 当前下拉选中的ID
            policeStaionID: '',

            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: '',
        }
    },

    components: { leftContainer, rightContainer, bottomContainer, schedulingList, landDetailsBox, areaDetailsBox, keyPersonBox },

    computed: {
        ...mapGetters([
            'isShowHomeContent'
        ]),

        positionColor () {
            return (row) => {
                if (row.X && row.X != 0
                    || row.lng && row.lng != 0
                    || row.longitude && row.longitude != 0
                    || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },

        currentItemShow () {
            return (item) => {
                if (this.architectureTable.length > 0) {
                    if (item in this.architectureTable[0]) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    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 () {
        const that = this

        this.monitoringList = monitoringList
        this.historyArr = historyArr
        this.underwayArr = underwayArr
        this.getPanoramaList()
        // this.getResidentialQuartersList('361102')

        this.$EventBus.$on('policeSituationSiteClick', (params) => {
            that.policeSituationSiteClick(params)
        })

        if (this.userInfo.dept_id != '1123598813738675201') {
            this.policeStationCheckValue = this.userInfo.user_name
            this.selectAllClass = true
            this.policeStaionID = this.userInfo.dept_id
        }
        this.$store.commit('SET_ISSHOWHOMECONTENT', true)
        this.$store.commit('SET_ISSHOWHOMECONTENTBTN', true)
        this.getPoliceStationTree(1)

        // setTimeout(() => {
        //     this.initGeoJson()
        // }, 3000)
    },

    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)

            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
            // 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()

            if (this.userInfo.dept_id == '1596020515064381442') {
                keypeopleJSON.forEach(item => {
                    if (item.x && item.x != '' && item.y && item.y != '') {
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'keypeopleslayer',
                            type: "billboard",
                            layerType: 'ClusterLayer',
                            params: {
                                lng: Number(item.x),
                                lat: Number(item.y),
                                url: '/img/icon/keypeople.png',
                                ClusterLayerType: "clustering"
                            }
                        })
                    }
                })

                schoolJSON.forEach(item => {
                    if (item.x && item.x != '' && item.y && item.y != '') {
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'schoolJSONlayer',
                            type: "billboard",
                            layerType: 'ClusterLayer',
                            params: {
                                lng: Number(item.x),
                                lat: Number(item.y),
                                url: '/img/icon/school.png',
                                ClusterLayerType: "circle"
                            }
                        })
                    }
                })

                this.architectureSitesLayer(hospitalJSON)

                this.architectureSitesLayer(hotelJSON)

                this.architectureSitesLayer(digitalJSON)

                this.architectureSitesLayer(housingJSON)

                this.architectureSitesLayer(wholesaleJSON)

                this.architectureSitesLayer(retailJSON)

                this.architectureSitesLayer(antiTerroristJSON)

                this.architectureSitesLayer(dExplosionJSON)

                this.architectureSitesLayer(serviceObjJSON)

                this.architectureSitesLayer(difficultyJSON)

            }
            // 绘制信州边界线
            let xinzhouRange = xinzhou.reduce(
                (previous, current) => {
                    previous += current[0] + ',' + current[1] + ';'
                    return previous
                },
                []
            )
            xinzhouLayer = new global.DC.VectorLayer('xinzhouLayer')
            global.viewer.addLayer(xinzhouLayer)
            let xinzhouPolyline = new global.DC.Polyline(xinzhouRange)
            xinzhouPolyline.setStyle({
                width: 10,
                material: global.DC.Namespace.Cesium.Color.fromBytes(255, 134, 62, 255),
                clampToGround: true
            })
            xinzhouLayer.addOverlay(xinzhouPolyline)
        })

        this.$EventBus.$on('closeLoading', () => {
            that.closeLoading()
        })

        window.addEventListener('resize', this.setDomStyle)

    },

    methods: {
        architectureSitesLayer (paramsJSON) {
            paramsJSON.forEach(item => {
                if (item.x && item.x != '' && item.y && item.y != '') {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'architectureLayer',
                        type: "billboard",
                        params: {
                            ...item,
                            lng: Number(item.x),
                            lat: Number(item.y),
                            url: '/img/icon/JZWZ.png'
                        }
                    })
                }
            })
        },

        // 实有楼栋点击事件
        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,
                siteWd: row.y,
                siteGd: 200
            })

            if (this.architectureTitle == '学校' || this.architectureTitle == '宾馆酒店' || this.architectureTitle == '医院') {
                this.$store.commit('SET_ARCHITECTUREPOPUP', true)

                this.$store.commit('SET_ARCHITECTUREDATAPOPUP', { ...row, curDataTitle: this.architectureTitle, curDataType: '茅家岭派出所' })
                console.log('landRowClick', row)
                // eslint-disable-next-line no-redeclare
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'architectureDivElementDom',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(row.x),
                                Number(row.y),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.$store.commit('SET_MAPSEARCHPOPUP', true)

                let name

                if ('name' in row) {
                    name = row.name
                } else if ('QYMC' in row) {
                    name = row.QYMC
                } else if ('JDMC' in row) {
                    name = row.JDMC
                } else if ('YYMC' in row) {
                    name = row.YYMC
                } else if ('DWMC' in row) {
                    name = row.DWMC
                }

                this.$store.commit('SET_MAPSEARCHPOPUPDATA', {
                    name: name
                })

                // eslint-disable-next-line no-redeclare
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'mapSearchPopup',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(row.x),
                                Number(row.y),
                                0
                            )
                        )
                    ]
                })

            }

            this.xxPopupShow = false
            this.architectureShow = false
        },

        // 获取派出所中心点
        getPoliceStationCenter (id) {
            let clickPoliceStation = this.policeStationOptions.filter(item => item.id === id)
            const center = this.getRegionCenter(clickPoliceStation[0].position)
            return center
        },

        // 获取责任区中心点
        getAreaCenter (id) {
            // let clickPoliceStation = this.policeStationOptions.filter(item => item.id === id)
            // const center = this.getRegionCenter(clickPoliceStation[0].position)
            // return center
            // this.(getPoliceStationTree2, item.id)
        },

        // 加载首页下拉列表数据
        getPoliceStationTree (type, id = '') {
            getPoliceStationTree(type, id).then(res => {
                if (type == 1) {

                    this.policeStationOptions = res.data.data

                    this.policeStationOptions.unshift({
                        name: '全部',
                        id: 1
                    })

                    if (this.userInfo.dept_id != '1123598813738675201') {

                        let currentItem

                        res.data.data.some(item => {
                            if (item.id == this.userInfo.dept_id) currentItem = item
                        })

                        this.getPoliceStationTree(2, this.userInfo.dept_id)
                        this.policeStaionChecked = currentItem

                    } else {
                        this.initPoliceStationLayer()
                    }

                } else if (type == 2) {
                    this.areaOptions = res.data.data
                    this.areaOptions.unshift({
                        name: '全部',
                        id: 1
                    })
                    this.initAreaOptionLayer()
                } else {
                    if (res.data.data.length == 0 || JSON.stringify(res.data.data) === "{}") {
                        this.selectHouseClass = true
                        this.housingCheckValue = '该责任区暂无小区'
                        this.initHousingLayer()
                        return
                    }

                    this.selectHouseClass = false
                    this.housingCheckValue = '请选择小区'
                    this.housingOptions = res.data.data
                    this.housingOptions.unshift({
                        name: '全部',
                        id: 1
                    })

                    this.initHousingLayer()
                }
            })
        },

        initGeoJson () {
            geoJson.features.forEach((item, index) => {
                if (item.geometry.coordinates.length > 1) {
                    item.geometry.coordinates.forEach(small => {
                        this.$EventBus.$emit('layerPolygonAdd', {
                            layerName: 'polygonLayer',
                            positions: small[0].join(';'),
                            material: index > positionColor.length ? positionColor[index % positionColor.length] : positionColor[index],
                        })
                    })
                } else {
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: item.geometry.coordinates[0].join(';'),
                        material: index > positionColor.length ? positionColor[index % positionColor.length] : positionColor[index],
                    })
                }
            })
        },

        getEquipmentAll (params) {
            this.loading()

            getEquipmentAll({ ...params }).then(res => {
                if (params.type == 0) {
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(item => {
                            if (item.longitude && item.latitude) {
                                this.$EventBus.$emit('layerPointAdd', {
                                    layerName: 'homeCarLayers',
                                    type: "billboard",
                                    layerType: 'ClusterLayer',
                                    params: {
                                        ...item,
                                        lng: item.longitude,
                                        lat: item.latitude,
                                        url: '/img/icon/car.png',
                                        setStyle: {
                                            disableDepthTestDistance: Number.POSITIVE_INFINITY
                                        }
                                    },
                                    incident: this.phoneSiteClick
                                })
                            }
                        })
                    }
                } else {
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(item => {
                            if (item.longitude && item.latitude) {
                                this.$EventBus.$emit('layerPointAdd', {
                                    layerName: 'homeCameraLayers',
                                    type: "billboard",
                                    layerType: 'ClusterLayer',
                                    params: {
                                        ...item,
                                        lng: item.longitude,
                                        lat: item.latitude,
                                        url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
                                        channelId: item.channelId,
                                        setStyle: {
                                            disableDepthTestDistance: Number.POSITIVE_INFINITY
                                        }
                                    },
                                    incident: this.siteClick,
                                })
                            }
                        })

                    }
                }

                this.closeLoading()
            })
        },

        // 接出警切换
        alarmOrActAsPolice (type) {
            this.policeInformationType = type

            if (type == '出警信息') {
                this.CJdata = {}

                getActAsPoliceList(this.policeSituationDetailObj.JJDBH, this.userInfo.dept_id).then(res => {
                    if (res.data.data.records.length > 0) {
                        this.CJdata = res.data.data.records[0]
                    }
                })
            }
        },

        searchName (name, arr) {
            let obj = {}
            let flag = false
            arr.forEach(item => {
                if (item.label == name) {
                    flag = true
                    obj = item
                }
            })

            if (flag) {
                return obj
            } else {
                arr.forEach(item => {
                    if (item.children) {
                        obj = this.searchName(name, item.children)
                    }
                })
                return obj
            }
        },

        // 获取小区列表
        getResidentialQuartersList (adcode) {
            getResidentialQuartersList(adcode).then(res => {
                let position = []
                res.data.data.forEach(item => {
                    position = JSON.parse(item.geom).coordinates
                    this.houseList.push({ name: `${item.aoi_name}`, lng: `${position[0]}`, lat: `${position[1]}`, alt: 1, url: '/img/icon/house.png' })
                })
                this.houseChange(true)
            })
        },

        policeStationSelect (item) {
            if (this.policeStationCheckValue == item.name && this.policeStationCheckValue != '全部') return

            this.policeStationCheckValue = item.name
            this.selectHouseClass = true

            this.areaOptions = []
            this.housingOptions = []
            this.areaCheckValue = '请选择责任区'
            this.housingCheckValue = '请选择小区'

            if (item.name == "全部") {
                this.clearPolygonLayer()
                cylinderLayer.clear()
                cylinderLayer.remove()
                cylinderLayer = null

                this.initPoliceStationLayer()

                this.policeStaionID = ''

                this.carChange(this.carLayerShow)
                this.cameraChange(this.cameraLayerShow)
            } else {
                cylinderLayer.clear()
                this.getPoliceStationTree(2, item.id)

                this.policeStaionID = item.id

                this.carChange(this.carLayerShow)
                this.cameraChange(this.cameraLayerShow)
            }

            this.$refs.leftContainer.getHomeAllData(this.policeStaionID)
            this.$refs.rightContainer.getHomeAllData(this.policeStaionID)
            this.$refs.bottomContainer.getHomeAllData(this.policeStaionID)

            this.policeStaionChecked = item

            // this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            // this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
            // this.$refs.bottomContainer.selectPoliceSituatiionArr(item.policeStationName)
            // this.policeSituationChange()
        },

        areaSelect (item) {
            this.areaCheckValue = item.name
            this.housingOptions = []

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polygonLayer',
                type: 'VectorLayer'
            })

            if (item.name == "全部") {
                this.initAreaOptionLayer()
            } else {
                this.areaChecked = item
                this.getPoliceStationTree(3, item.id)
            }
        },

        housingSelect (item) {
            this.housingCheckValue = item.name
            if (item.name == "全部") {
                this.initHousingLayer(this.areaChecked)
            } else {
                this.initLivingLayer(item)
            }
        },

        getCenter (str) {
            let itPositionStr = str.replace(/MULTIPOLYGON\(\(\(/g, '')
            itPositionStr = itPositionStr.replace(/\)\)\)/g, '')
            let positionArr = itPositionStr.split(',')
            let positionNewArr = []
            positionArr.forEach(item => {
                positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
            })
            let polygon = this.$turf.polygon([positionNewArr])
            let center = this.$turf.centroid(polygon)
            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },

        /**
        * @description: 辖区是否展示，默认展示
        * @param {*} e
        * @return {*}
        */
        areaPolygonChange (e) {
            if (e == true) {
                DataSourcesArray.forEach(i => i.show = true)

                this.$EventBus.$emit('layerShow', {
                    layerName: 'areaPolygonLabel',
                    flag: true
                })

                this.$EventBus.$emit('layerShow', {
                    layerName: 'polygonLayer',
                    flag: true
                })
                xinzhouLayer.show = true
            } else {
                DataSourcesArray.forEach(i => i.show = false)

                this.$EventBus.$emit('layerShow', {
                    layerName: 'areaPolygonLabel',
                    flag: false
                })

                this.$EventBus.$emit('layerShow', {
                    layerName: 'polygonLayer',
                    flag: false
                })
                xinzhouLayer.show = false

            }
        },

        /**
         * @description: 小区是否展示
         * @param {*} e
         * @return {*}
         */
        houseChange (e) {
            if (e == true) {
                this.houseList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'houseLayers',
                        type: "billboard",
                        layerType: 'ClusterLayer',
                        params: item,
                        incident: this.houseSiteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'houseLayers',
                    type: 'VectorLayer'
                })
            }
        },

        houseSiteClick (e) {
            this.$router.push({ path: '/layout/house', query: { id: e.overlay.attrParams.id } })
        },

        carChange (e) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'homeCarLayers',
                type: 'VectorLayer'
            })

            if (e == true) {
                if (this.userInfo.dept_id == '1123598813738675201') {
                    //分局定位
                    initMapPosition()
                }
                else {
                    //其他派出所定位
                    const center = this.getAllRegionCenter(this.areaOptions)

                    this.$EventBus.$emit('toPosition', {
                        siteJd: center[0] + 0.0046,
                        siteWd: center[1] - 0.04,
                        siteGd: 4000,
                        siteHeading: -3,
                        sitePitch: -45
                    })
                }

                this.getEquipmentAll({ type: 0, deptId: this.policeStaionID == '' ? this.userInfo.dept_id : this.policeStaionID })
            }
        },

        cameraChange (e) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'homeCameraLayers',
                type: 'VectorLayer'
            })

            if (e == true) {

                if (this.userInfo.dept_id == '1123598813738675201') {
                    //分局定位
                    initMapPosition()
                }
                else {
                    //其他派出所定位
                    const center = this.getAllRegionCenter(this.areaOptions)

                    this.$EventBus.$emit('toPosition', {
                        siteJd: center[0] + 0.0046,
                        siteWd: center[1] - 0.04,
                        siteGd: 4000,
                        siteHeading: -3,
                        sitePitch: -45
                    })
                }


                this.getEquipmentAll({ type: 1, deptId: this.policeStaionID == '' ? this.userInfo.dept_id : this.policeStaionID })
            }
        },

        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        closeLoading () {
            console.log('closeLoading---------')
            if (loading != null) {
                setTimeout(() => {
                    loading.close()
                }, 1000)
            }
        },

        monitoringChange (e) {
            if (e == true) {
                this.monitoringList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'monitoringLayers',
                        type: "billboard",
                        layerType: 'ClusterLayer',
                        params: item,
                        incident: this.siteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
            }
        },

        panoramaChange (e) {
            if (e == true) {
                this.panoramaList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'panoramaLayers',
                        type: "billboard",
                        layerType: 'ClusterLayer',
                        params: item,
                        incident: this.panoramaSiteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'panoramaLayers',
                    type: 'VectorLayer'
                })
            }
        },

        async policeSituationChange () {
            await this.policeSituationSelectChange()
            if (circleLayer && circleLayer != null && circleLayer != '' && circleLayer != undefined) {
                circleLayer.clear()
                circleLayer.remove()
                circleLayer = null
                circleLayer = new global.DC.PrimitiveLayer('circleLayer')
                global.viewer.addLayer(circleLayer)
            }

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

                    switch (item.jqlxJointName) {
                        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)

                    let num = 0

                    timer[index] = setInterval(() => {
                        num++
                        if (num >= 10) {
                            num = 0
                        }
                        point.setStyle({
                            outlineColor: pointOutlineColor,//边框颜色
                            outlineWidth: num,//边框大小，
                            color: pointColor
                        })
                    }, 100)

                    point.attrParams = item
                    point.on(global.DC.MouseEventType.CLICK, this.policeSituationSiteClick)
                    circleLayer.addOverlay(point)
                })
            } else {
                circleLayer.clear()
            }
        },

        policeSituationSelectChange () {
            let showArr = []

            this.$nextTick(() => {
                if (this.policeSituationHistoryType == 0) {
                    showArr = this.$refs.bottomContainer.chooseRealData()
                } else {
                    showArr = this.$refs.bottomContainer.chooseTimeDate()
                }

                showArr.forEach((item, index) => {
                    item.lng = Number(item.lng)
                    item.lat = Number(item.lat)
                    item.url = '/img/icon/jq.png'
                })

                this.policeSituationList = showArr
            })
        },

        siteClick (e) {
            this.dialogEquimentVideoTitle = e.overlay.attrParams.name

            this.play(e.overlay.attrParams)
        },

        dialogBeforeClose () {
            this.dialogEquimentVideoVisible = false
        },

        panoramaSiteClick (e) {
            this.panoramaTitle = '全景'
            this.panoramaVrUrl = e.overlay.attrParams.vrurl
            this.panoramaVisible = true
        },

        phoneSiteClick (e) {
            this.phoneTitle = e.overlay.attrParams.name
            this.phoneDetails = e.overlay.attrParams
            this.phoneVisible = true
        },

        policeSituationSiteClick (e) {
            if ('overlay' in e) {
                this.$store.commit('SET_DETAILSPOPUP', {
                    showBox: true,
                    showBtn: true
                })

                this.$store.commit('SET_DATAPOPUP', e.overlay.attrParams)
                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(e.overlay.attrParams.lng),
                                Number(e.overlay.attrParams.lat),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.policeSituationDetailObj = e
                this.policeInformationType = '接警信息'
                this.policeSituationVisible = true
            }
        },

        initAreaCheckoptions (areaArr) {
            areaArr.forEach((item, index) => {
                if (item.areaCheckName != '全部') {
                    let str = ''
                    item.position.forEach(it => {
                        str = str + `${it[0]},${it[1]},${it[2]};`
                    })
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: positionColor[index]
                    })
                    const center = this.getCenter(item.position)
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'polygonLayer',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1],
                            alt: 0,
                            text: item.areaCheckName
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })
                }
            })
        },

        initHousingOptions (housingArr) {
            housingArr.forEach((item, index) => {
                if (item.housingsName != '全部') {
                    let str = ''
                    item.position.forEach(it => {
                        str = str + `${it[0]},${it[1]},${it[2]};`
                    })
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: positionColor[index]
                    })
                    const center = this.getCenter(item.position)
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'polygonLayer',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1],
                            alt: 1,
                            text: item.housingsName
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })
                }
            })
        },

        multPolyganToList (data) {
            let ployganStringList = []

            let tempData = data.slice(15, data.length - 3)

            if (tempData.indexOf('),(') != -1) {
                let tempPloyganList = tempData.split('),(')

                tempPloyganList.forEach((polygonStr) => {
                    polygonStr = polygonStr.replace(/,/g, ";")
                    polygonStr = polygonStr.replace(/ /g, ",")


                    ployganStringList.push(polygonStr)
                })

                return {
                    data: ployganStringList,
                    type: 'Array'
                }
            } else {
                let polygonStr = tempData
                polygonStr = polygonStr.replace(/,/g, ";")
                polygonStr = polygonStr.replace(/ /g, ",")

                return {
                    data: polygonStr,
                    type: 'string'
                }
            }

        },

        /**
         * @description: 计算多个多边形面中心点
         * @param {Array} params 多个面的数据
         * @return {Array} 多边形的中心点坐标
         */
        getRegionCenter (params) {
            let arr = []

            params.forEach(areaArray => {
                JSON.parse(areaArray).coordinates.forEach(item => {
                    arr.push(this.$turf.centroid(this.$turf.polygon([item[0]])).geometry.coordinates)
                })
            })

            if (arr.length == 1) {
                return arr[0]
            } else if (arr.length == 2) {

                return this.$turf.centroid(this.$turf.midpoint(this.$turf.point(arr[0]), this.$turf.point(arr[1]))).geometry.coordinates
            } else {
                arr.push(arr[0])

                return this.$turf.centroid(this.$turf.polygon([arr])).geometry.coordinates
            }

        },

        getAllRegionCenter (data) {
            let arr = []

            data.forEach(item => {
                if (item.position && item.position.length > 0) {
                    arr.push(this.getRegionCenter(item.position))
                }
            })

            arr.push(arr[0])

            if (arr.length == 1) {
                return arr[0]
            } else if (arr.length == 2) {

                return this.$turf.centroid(this.$turf.midpoint(this.$turf.point(arr[0]), this.$turf.point(arr[1]))).geometry.coordinates
            } else {
                arr.push(arr[0])

                return this.$turf.centroid(this.$turf.polygon([arr])).geometry.coordinates
            }
        },

        drawText (style) {
            const text = style.text
            var c = document.createElement("canvas")
            const d = (text + "").length * style.fontSize
            c.width = d
            c.height = style.fontSize
            var ctx = c.getContext("2d")

            ctx.fillStyle = style.color
            ctx.font = "bold " + style.fontSize + "px 微软雅黑" //设置字体
            ctx.textBaseline = 'hanging' //在绘制文本时使用的当前文本基线 
            //绘制文本  
            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'
            }
        },

        // 加载面数据的方法
        initPoliceStationLayer () {
            const that = this
            cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
            global.viewer.addLayer(cylinderLayer)

            DataSourcesArray.forEach(item => {
                global.viewer.dataSources.remove(item, true)
            })

            this.policeStationOptions.forEach((item, index) => {
                if (item.position && item.position.length > 0) {
                    item.position.forEach((sourceItem, sourceIndex) => {

                        const Json = { ...JSON.parse(sourceItem) }
                        global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
                            stroke: positionColor[index],
                            fill: positionColor[index], //注意：颜色必须大写，即不能为blue
                            strokeWidth: 0,
                            clampToGround: true
                        }).then(function (dataSource) {
                            DataSourcesArray.push(dataSource)
                            that.areaPolygonLayerShow == false ? dataSource.show = false : dataSource.show = true
                            global.viewer.dataSources.add(dataSource)
                        })

                    })

                    const center = this.getRegionCenter(item.position)

                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'areaPolygonLabel',
                        type: 'label',
                        params: {
                            lng: center[0],
                            lat: center[1],
                            alt: 0,
                            text: `${item.name}`,
                            outW: 20
                        },
                        distanceDisplayCondition: { "near": 0, "far": 200000 }
                    })

                    // this.$EventBus.$emit('layerPolygonAdd', {
                    //     layerName: 'areaPolygonLabel',
                    //     positions: `${center[0] - 0.01},${center[1] - 0.0020};
                    //                 ${center[0] + 0.01},${center[1] - 0.0020};
                    //                 ${center[0] + 0.01},${center[1] + 0.0020};
                    //                 ${center[0] - 0.01},${center[1] + 0.0020};`,
                    //     material: new global.DC.Namespace.Cesium.ImageMaterialProperty({
                    //         image: that.drawText({
                    //             fontSize: 16,
                    //             color: 'red',
                    //             text: item.name
                    //         }),
                    //         transparent: true,
                    //         color: global.DC.Namespace.Cesium.Color.WHITE
                    //     }),
                    // })

                    // this.$EventBus.$emit('layerPointAdd', {
                    //     layerName: 'personNumLayer',
                    //     type: 'label',
                    //     params: {
                    //         lng: center[0],
                    //         lat: center[1],
                    //         alt: 1,
                    //         text: `${item.num}`,
                    //         outW: 20
                    //     },
                    //     distanceDisplayCondition: { "near": 0, "far": 160000 }
                    // })

                    // let cylinder = new global.DC.LightCylinderPrimitive(new global.DC.Position(center[0], center[1]), 600, 1, 300)
                    // cylinder.setStyle({
                    //     color: global.DC.Namespace.Cesium.Color.fromBytes(
                    //         2, 27, 121,
                    //         255
                    //     )
                    // })
                    // cylinderLayer.addOverlay(cylinder)
                }

            })

            const center = this.getAllRegionCenter(this.policeStationOptions)

            this.$EventBus.$emit('toPosition', {
                siteJd: center[0] + 0.046,
                siteWd: center[1] - 0.36,
                siteGd: 36000,
                siteHeading: -3,
                sitePitch: -45
            })

            this.houseChange(true)
        },

        initAreaOptionLayer () {
            const that = this
            this.clearPolygonLayer()
            this.areaOptions.forEach((item, index) => {
                item.position && item.position.forEach(sourceItem => {
                    const Json = { ...JSON.parse(sourceItem) }
                    global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
                        stroke: positionColor[index],
                        fill: positionColor[index], //注意：颜色必须大写，即不能为blue
                        strokeWidth: 0,
                        clampToGround: true
                    }).then(function (dataSource) {
                        DataSourcesArray.push(dataSource)

                        that.areaPolygonLayerShow == false ? dataSource.show = false : dataSource.show = true

                        global.viewer.dataSources.add(dataSource)
                    })
                })

                // const center = this.getRegionCenter(item.position)
                // this.$EventBus.$emit('layerPointAdd', {
                //     layerName: 'personNumLayer',
                //     type: 'label',
                //     params: {
                //         lng: center[0],
                //         lat: center[1],
                //         alt: 200,
                //         text: `${item.num}`,
                //         outW: 20
                //     },
                //     distanceDisplayCondition: { "near": 0, "far": 160000 }
                // })

                // let cylinder = new global.DC.LightCylinderPrimitive(new global.DC.Position(center[0], center[1]), 200, 1, 50)
                // cylinder.setStyle({
                //     color: global.DC.Namespace.Cesium.Color.fromBytes(
                //         2, 27, 121,
                //         255
                //     )
                // })
                // cylinderLayer.addOverlay(cylinder)
            })

            const center = this.getAllRegionCenter(this.areaOptions)

            this.$EventBus.$emit('toPosition', {
                siteJd: center[0] + 0.0046,
                siteWd: center[1] - 0.04,
                siteGd: 4000,
                siteHeading: -3,
                sitePitch: -45
            })
        },

        initHousingLayer () {
            const that = this
            let positionArr = JSON.parse(this.areaChecked.position).coordinates[0][0]
            let polygon = this.$turf.polygon([positionArr])
            let center = this.$turf.centroid(polygon)
            let centerPosition = [center.geometry.coordinates[0], center.geometry.coordinates[1]]
            this.clearPolygonLayer()
            this.$EventBus.$emit('toPosition', {
                siteJd: centerPosition[0] + 0.001,
                siteWd: centerPosition[1] - 0.018,
                siteGd: 2000,
                siteHeading: -3,
                sitePitch: -45
            })

            this.areaChecked.position && this.areaChecked.position.forEach(sourceItem => {
                const Json = { ...JSON.parse(sourceItem) }
                global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
                    stroke: positionColor[0],
                    fill: positionColor[0], //注意：颜色必须大写，即不能为blue
                    strokeWidth: 0,
                    clampToGround: true
                }).then(function (dataSource) {
                    DataSourcesArray.push(dataSource)

                    that.areaPolygonLayerShow == false ? dataSource.show = false : dataSource.show = true

                    global.viewer.dataSources.add(dataSource)
                })
            })

            this.housingOptions.length > 0 && this.housingOptions.forEach(item => {
                if (item.name == '全部') return
                const positions = JSON.parse(item.position[0]).coordinates
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'polygonLayer',
                    type: 'billboard',
                    params: {
                        lng: Number(positions[0]),
                        lat: Number(positions[1]),
                        alt: 1,
                        url: '/img/icon/house.png',
                        id: item.id
                    },
                    incident: this.houseSiteClick,
                    distanceDisplayCondition: { "near": 0, "far": 200000 }
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'polygonLayer',
                    type: 'label',
                    params: {
                        lng: Number(positions[0]),
                        lat: Number(positions[1]),
                        alt: 1,
                        text: item.name
                    }
                })
            })
        },

        initLivingLayer (item) {
            let positionArr = JSON.parse(item.position).coordinates
            this.clearPolygonLayer()
            this.$EventBus.$emit('toPosition', {
                siteJd: positionArr[0],
                siteWd: positionArr[1],
                siteGd: 1000,
                siteHeading: -3,
                sitePitch: -90
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polygonLayer',
                type: 'label',
                params: {
                    lng: positionArr[0],
                    lat: positionArr[1],
                    alt: 1,
                    text: item.name
                }
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polygonLayer',
                type: 'billboard',
                params: {
                    lng: positionArr[0],
                    lat: positionArr[1],
                    alt: 1,
                    url: '/img/icon/house.png',
                    id: item.id
                },
                incident: this.houseSiteClick,
                distanceDisplayCondition: { "near": 0, "far": 200000 }
            })
        },

        clearPolygonLayer () {
            DataSourcesArray.forEach(item => {
                global.viewer.dataSources.remove(item, true)
            })

            DataSourcesArray = []

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polygonLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'areaPolygonLabel',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'personNumLayer',
                type: 'VectorLayer'
            })

            // cylinderLayer.clear()
        },

        // 修改下拉容器的left

        setDomStyle () {
            const bodyWidth = document.body.clientWidth
            const domWidth = this.$refs.RegionSelect.offsetWidth
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        /**
         * @description: 显示现有列表表格数据
         * @param {*} name
         * @param {*} typeVale
         * @param {*} type
         * @return {*}
         */
        async showequimentdetail (name, typeVale, type) {
            this.equimentLoading = true
            this.equimentTitle = name
            this.equimentCurrentSelect = {}
            this.equimentCurrentSelect[type] = typeVale
            this.currentPage = 1
            this.equimentPagingTotal = 0
            this.equimentVisible = true

            this.getEquipmentPaging(this.equimentCurrentSelect)
        },

        /**
         * @description: 显示现有列表表格数据
         * @param {*} name
         * @param {*} typeVale
         * @param {*} type
         * @return {*}
         */
        async showschedulingdetail (name, dept, type) {
            const data = {
                name: name,
                dept: dept,
                type: type
            }
            this.$refs.schedulingList.init(data)
        },

        /**
         * @description: 设备查询
         * @return {*}
         */
        searchEquiment () {
            this.equimentLoading = true
            this.currentPage = 1
            this.equimentPagingTotal = 0

            this.getEquipmentPaging(this.equimentCurrentSelect)
        },

        /**
         * @description: 设备查询清空
         * @return {*}
         */
        clearSearchEquiment () {
            this.equimentLoading = true
            this.currentPage = 1
            this.equimentPagingTotal = 0
            this.equimentSearchVal = ''
            this.getEquipmentPaging(this.equimentCurrentSelect)
        },

        // 获取设备分页数据
        getEquipmentPaging (params) {
            this.equimentTableData = []
            this.equimentEmtyText = ""

            getEquipmentPaging({
                page: this.currentPage,
                count: this.pagesize,
                dwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
                query: this.equimentSearchVal,
                ...params
            }).then(res => {

                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list
                    this.equimentPagingTotal = res.data.data.total
                } else {
                    this.equimentEmtyText = "暂无设备数据"
                    this.equimentTableData = []
                    this.equimentPagingTotal = 0
                }

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

        getTalkEquimentPage (params) {
            getTalkEquimentPage(params).then(res => {
                res.data.data.records = []
            })
        },

        getPoliceCameraEquimentPage (params) {
            getPoliceCameraEquimentPage(params).then(res => {
            })
        },

        // 设备分页查询
        handleCurrentChange (currentPage) {
            this.equimentLoading = true
            this.currentPage = currentPage

            this.getEquipmentPaging(this.equimentCurrentSelect)
        },

        // 设备的视频播放
        async play (row) {
            this.videoPlayShow = true

            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogEquimentVideoTitle = row.name
            this.dialogEquimentVideoVisible = true

            let flvUrl = ''

            await this.getDevices(row.channelId).then(res => {
                flvUrl = res
            })

            if (typeof flvUrl === 'object') {
                this.$message.error(flvUrl.msg)
                this.dialogEquimentVideoVisible = false
                return
            }


            if (flvjs.isSupported()) {
                this.$nextTick(() => {
                    var videoElement = document.getElementById('videoElement')
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        url: flvUrl
                    })
                    this.flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer.load()
                    this.videoPlayShow = false
                    this.flvPlayer.play()
                })
            }
        },

        async getDevices (channelId) {
            let flvAddress = ''

            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = res.data
                }
            })

            return flvAddress
        },

        /**
         * @description: 显示户籍人口列表
         * @param {*} id
         * @param {*} name
         * @return {*}
         */
        showpeopledetail (id, name, isIncludeKeypeople, deptId) {
            this.$refs.areaDetailsBox.showpeopledetail(id, name, isIncludeKeypeople, deptId)
        },

        /**
         * @description: 显示重点人员列表
         * @param {*} name 当前类别名称
         * @return {*}
         */
        showkeypersondetail (name) {
            this.$refs.keyPersonBox.showkeypersondetail(name)
        },

        changeActivityType (type) {
            this.activityType = type
        },

        changePoliceSituationHistoryType (type) {
            this.policeSituationHistoryType = type
        },

        /**
         * 获取所有全景数据
         */
        getPanoramaList () {
            getPanoramaList().then(res => {
                if (res.data.code == 200 && res.data.data.length > 0) {
                    this.panoramaList = res.data.data.map(e => {
                        const item = {
                            lng: e.longitude,
                            lat: e.latitude,
                            alt: 1,
                            url: '/img/icon/map-panorama.png',
                            vrurl: e.url
                        }

                        return item
                    })
                }
            })
        },

        indexMethod (index) {
            return index + 1
        },



        /**
         * @description: 现有人员和重点人员列表弹窗关闭的事件
         * @return {*}
         */
        equimentBeforeClose () {
            this.currentPage = 1
            this.equimentSearchVal = ''
            this.equimentTableData = []
            this.equimentEmtyText = ""
            this.equimentVisible = false
        },

        // 获取所有派出所中心
        getAllPoliceStationCenter () {
            const center = this.getAllRegionCenter(this.policeStationOptions)
            console.log('center', center)
            this.$EventBus.$emit('toPosition', {
                siteJd: center[0] + 0.046,
                siteWd: center[1] - 0.36,
                siteGd: 36000,
                siteHeading: -3,
                sitePitch: -45
            })
        },

        showlanddetail (name, type, id) {
            this.$refs.landDetailsBox.showlanddetail(name, type, id)
        },

        // 首页显示隐藏页面进入跳转逻辑
        showHomeContentBtnStyle () {
            if (!this.$store.state.popupParams.isShowHomeContent) {
                this.$store.commit('SET_ISSHOWHOMECONTENT', true)
                // if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
                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')
            }
        },

    },

    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)
        this.$store.commit('SET_DETAILSPOPUP', {
            showBox: false,
            showBtn: false
        })

        this.showHomeContentBtnStyle()

        loading && loading.close()

        this.clearPolygonLayer()

        // cylinderLayer != null && cylinderLayer != undefined && cylinderLayer != '' && cylinderLayer.remove()

        // global.viewer.dataSources.removeAll()

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'personNumLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polygonLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'areaPolygonLabel',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'homeCarLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'houseLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'homeCameraLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'panoramaLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activityLayers',
            type: 'ClusterLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'keypeopleslayer',
            type: 'ClusterLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'schoolJSONlayer',
            type: 'ClusterLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'architectureLayer',
            type: 'VectorLayer'
        })

        if (cylinderLayer != null) {
            cylinderLayer.remove()
            cylinderLayer = null
        }
        if (xinzhouLayer != null) {
            xinzhouLayer.remove()
            xinzhouLayer = null
        }

        circleLayer.remove()
        circleLayer = null

        for (let i = 0; i < timer.length; i++) {
            clearInterval(timer[i])
        }

        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }

        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
        // 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)

        this.$EventBus.$off('policeSituationSiteClick')
        this.$EventBus.$off('closeLoading')
    },
}
</script>

<style scoped lang="scss">
.container {
    color: #fff;
    width: 100%;

    .left-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 400px;
        height: calc(100% - 60px);
        z-index: 90;
    }

    .right-container {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        width: 400px;
        height: calc(100% - 60px);

        z-index: 90;
    }

    .center-container {
        display: flex;
        position: absolute;
        left: 50%;
        bottom: 328px;
        transform: translate(-50%, 0);
        z-index: 90;

        .layers-control-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            width: 96px;
            height: 40px;
            border-radius: 20px;
            background-color: $bg-color;

            :deep(.el-checkbox__inner) {
                border-radius: 50%;
            }
        }

        .house {
            :deep(.el-checkbox__inner) {
                background: rgb(255, 221, 136);
                border-color: rgb(255, 221, 136);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(255, 183, 0);
                    border-color: rgb(255, 183, 0);
                }
            }
        }

        .area {
            :deep(.el-checkbox__inner) {
                background: rgb(190, 143, 89);
                border-color: rgb(190, 143, 89);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(182, 97, 0);
                    border-color: rgb(182, 97, 0);
                }
            }
        }

        .car {
            :deep(.el-checkbox__inner) {
                background: rgb(79, 114, 252);
                border-color: rgb(79, 114, 252);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(0, 24, 120);
                    border-color: rgb(0, 24, 120);
                }
            }
        }

        .phone {
            :deep(.el-checkbox__inner) {
                background: rgb(209, 179, 255);
                border-color: rgb(209, 179, 255);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(102, 0, 255);
                    border-color: rgb(102, 0, 255);
                }
            }
        }

        .moitor {
            :deep(.el-checkbox__inner) {
                background: rgb(147, 190, 255);
                border-color: rgb(147, 190, 255);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(96, 160, 255);
                    border-color: rgb(96, 160, 255);
                }
            }
        }

        .panorama {
            :deep(.el-checkbox__inner) {
                background: rgb(184, 206, 239);
                border-color: rgb(184, 206, 239);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(18, 91, 201);
                    border-color: rgb(18, 91, 201);
                }
            }
        }

        .activity {
            :deep(.el-checkbox__inner) {
                background: rgb(251, 222, 201);
                border-color: rgb(251, 222, 201);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(241, 145, 73);
                    border-color: rgb(241, 145, 73);
                }
            }
        }

        .police-situation {
            :deep(.el-checkbox__inner) {
                background: rgb(228, 63, 63);
                border-color: rgb(228, 63, 63);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(228, 63, 63);
                    border-color: rgb(228, 63, 63);
                }
            }
        }
    }

    .bottom-container {
        position: absolute;
        left: 400px;
        bottom: 8px;
        height: 320px;
        width: calc(100% - 800px);
        box-sizing: border-box;
        z-index: 99;
    }

    .region-select {
        display: flex;
        position: absolute;
        top: 80px;
        width: 720px;
        height: 36px;
        z-index: 99;

        .map-select {
            margin: 0 5px;
            flex: 1;
        }
    }

    .equiment-detail {
        height: 540px;
        width: 100%;

        .others {
            width: 100%;
            height: 495px;

            .pages {
                background-color: transparent;
                padding-bottom: 3px;
                padding-top: 10px;
            }
        }
    }
}
</style>

 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-06-27 10:13:40
 * @LastEditTime: 2023-07-11 15:13:20
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -1466,8 +1466,8 @@
                    layerName: 'polygonLayer',
                    flag: false
                })
                xinzhouLayer.show = false

                xinzhouLayer.show = false
            }
        },

@@ -1855,9 +1855,16 @@
            let arr = []

            params.forEach(areaArray => {
                JSON.parse(areaArray).coordinates.forEach(item => {
                    arr.push(this.$turf.centroid(this.$turf.polygon([item[0]])).geometry.coordinates)
                })
                let data = JSON.parse(areaArray)
                if (data.type == "Polygon") {
                    data.coordinates.forEach(item => {
                        arr.push(this.$turf.centroid(this.$turf.polygon([item])).geometry.coordinates)
                    })
                } else {
                    data.coordinates.forEach(item => {
                        arr.push(this.$turf.centroid(this.$turf.polygon([item[0]])).geometry.coordinates)
                    })
                }
            })

            if (arr.length == 1) {
@@ -1947,6 +1954,17 @@
                            strokeWidth: 0,
                            clampToGround: true
                        }).then(function (dataSource) {
                            let entities = dataSource.entities.values
                            //修改entity样式
                            for (let i = 0; i < entities.length; i++) {
                                let entity = entities[i]
                                entity.polyline = {
                                    positions: entity.polygon.hierarchy._value.positions,
                                    width: 2,
                                    material: global.DC.Namespace.Cesium.Color.fromCssColorString('#ED7C2F')
                                }
                            }

                            DataSourcesArray.push(dataSource)
                            that.areaPolygonLayerShow == false ? dataSource.show = false : dataSource.show = true
                            global.viewer.dataSources.add(dataSource)
@@ -2036,10 +2054,19 @@
                        strokeWidth: 0,
                        clampToGround: true
                    }).then(function (dataSource) {
                        let entities = dataSource.entities.values
                        //修改entity样式
                        for (let i = 0; i < entities.length; i++) {
                            let entity = entities[i]
                            entity.polyline = {
                                positions: entity.polygon.hierarchy._value.positions,
                                width: 2,
                                material: global.DC.Namespace.Cesium.Color.fromCssColorString('#ED7C2F')
                            }
                        }

                        DataSourcesArray.push(dataSource)

                        that.areaPolygonLayerShow == false ? dataSource.show = false : dataSource.show = true

                        global.viewer.dataSources.add(dataSource)
                    })
                })

 vue.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-07-07 14:54:23
 * @LastEditTime: 2023-07-11 14:16:32
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description:
 *
@@ -169,8 +169,8 @@
    proxy: {
      "/api": {
        // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
        target: "http://localhost:82",
        // target: "http://192.168.1.176:82",
        // target: "http://localhost:82",
        target: "http://192.168.1.177:82",
        // target: "http://106.225.193.35:82",
        // target: "http://192.168.1.170:82",
        // target: "http://192.168.0.100:82",