警情热力图更改

shuishen

2023-05-08 1f55eba16712c8c89507ccc85fdefb96c23bf63a

警情热力图更改

 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-08 17:31:26
 * @LastEditTime: 2023-05-08 18:34:01
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -320,21 +320,21 @@
            // global.viewer.addTerrain(terrain)

            // 内网
            // that.switchImg()
            that.switchImg()

            // 地形数据添加
            // that.addTerrain()

            // 外网 
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d083e4cf30bfc438ef93436c10c2c20a',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -1300,8 +1300,8 @@
                        polygonHierarchy: new global.DC.Namespace.Cesium.PolygonHierarchy(
                            global.DC.Namespace.Cesium.Cartesian3.fromDegreesArray(floorPositions),
                        ),
                        extrudedHeight: maxHeight,//分层顶部海拔
                        height: minHeight,//分层底部海拔
                        extrudedHeight: maxHeight - 73,//分层顶部海拔
                        height: minHeight - 73,//分层底部海拔
                    }),

                    attributes: {

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-04 19:08:52
 * @LastEditTime: 2023-05-08 18:33:03
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -13,63 +13,112 @@
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <el-popover ref="popover" placement="bottom" trigger="manual" v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup" @mousedown.native="preventFocusLost">
                    <el-tree v-show="searchLazyFlag == true" ref="popupTree" style="overflow: auto;" class="select-tree-box"
                        :load="loadNode" :lazy="true" :props="props" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="manual"
                    v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup"
                    @mousedown.native="preventFocusLost"
                >
                    <el-tree
                        v-show="searchLazyFlag == true"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :load="loadNode"
                        :lazy="true"
                        :props="props"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>

                    <el-tree v-show="searchLazyFlag == false" :empty-text="treeEmptyText" ref="popupTree"
                        style="overflow: auto;" class="select-tree-box" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                    <el-tree
                        v-show="searchLazyFlag == false"
                        :empty-text="treeEmptyText"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>
                </el-popover>

                <el-input ref="searchTreeInput" v-model="searchTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" v-popover:popover
                    placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
                <el-input
                    ref="searchTreeInput"
                    v-model="searchTreeName"
                    @input="searchInputTree"
                    @focus="searchTreeShowFlag = true"
                    @blur="searchTreeShowFlag = false"
                    v-popover:popover
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
            </div>

            <div v-show="contentShow" class="result-content" ref="resultContentBox">
                <el-main v-loading="villageInfoLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                    style="overflow:hidden;padding:0px;">
                <el-main
                    v-loading="villageInfoLoading"
                    element-loading-background="rgba(0, 0, 0, 0.5)"
                    element-loading-text="数据正在加载中"
                    element-loading-spinner="el-icon-loading"
                    style="overflow:hidden;padding:0px;"
                >
                    <div class="housing-estate-info" ref="housingEstateInfoBox">
                        <div class="housing-title">
                            {{ villageInfo.name }}
                            <div class="progress"></div>
                        </div>
                        <div class="housing-bg">
                            <el-image fit="contain" :src="villageInfo.pic_url"
                                :preview-src-list="villageInfo.pic_url_singleArr">
                            <el-image
                                fit="contain"
                                :src="villageInfo.pic_url"
                                :preview-src-list="villageInfo.pic_url_singleArr"
                            >
                                <div slot="error" class="image-slot">暂无照片</div>
                            </el-image>
                            <el-empty :image-size="120" description="暂无照片"
                                v-show="!villageInfo.pic_url && isHaveNoPic == true"></el-empty>
                            <el-empty
                                :image-size="120"
                                description="暂无照片"
                                v-show="!villageInfo.pic_url && isHaveNoPic == true"
                            ></el-empty>
                        </div>
                        <div class="housing-introduce">
                            <div @click="test">测试</div>
                            <div>
                                <div class="l">分类属性：</div>
                                <div class="r">{{ villageInfo.type_name ? villageInfo.type_name : '暂无数据' }}</div>
                                <div
                                    class="r"
                                >{{ villageInfo.type_name ? villageInfo.type_name : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">所属辖区：</div>
                                <div class="r">{{ villageInfo.policeStationName ? villageInfo.policeStationName : '暂无数据' }}
                                </div>
                                <div
                                    class="r"
                                >{{ villageInfo.policeStationName ? villageInfo.policeStationName : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">包干民警：</div>
                                <div class="r">{{ villageInfo.policeName ? villageInfo.policeName : '暂无数据' }}</div>
                                <div
                                    class="r"
                                >{{ villageInfo.policeName ? villageInfo.policeName : '暂无数据' }}</div>
                            </div>
                            <div>
                                <div class="l">标准地址：</div>
                                <div class="r">{{ villageInfo.address ? villageInfo.address : '暂无数据' }}</div>
                                <div
                                    class="r"
                                >{{ villageInfo.address ? villageInfo.address : '暂无数据' }}</div>
                            </div>
                            <div class="code">
                                <el-image fit="contain" :src="villageInfo.codeUrl"
                                    :preview-src-list="[villageInfo.codeUrl]">
                                    <div slot="error" class="image-slot"> </div>
                                <el-image
                                    fit="contain"
                                    :src="villageInfo.codeUrl"
                                    :preview-src-list="[villageInfo.codeUrl]"
                                >
                                    <div slot="error" class="image-slot"></div>
                                </el-image>
                            </div>
                        </div>
@@ -77,52 +126,101 @@
                </el-main>

                <div class="nav-tab" ref="navTabBox">
                    <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
                    <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">报警信息</div>
                    <div
                        class="nav"
                        :class="navType == 0 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="0"
                    >基本信息</div>
                    <div
                        class="nav"
                        :class="navType == 1 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="1"
                    >报警信息</div>
                </div>

                <div class="base-info" v-show="navType == 0">
                    <div class="sub-nav-list">
                        <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="switchSubNav(1)">楼栋</div>
                        <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="switchSubNav(2)">出入口</div>
                        <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="switchSubNav(3)">停车场</div>
                        <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="switchSubNav(4)">商业</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 1 }"
                            @click="switchSubNav(1)"
                        >楼栋</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 2 }"
                            @click="switchSubNav(2)"
                        >出入口</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 3 }"
                            @click="switchSubNav(3)"
                        >停车场</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 4 }"
                            @click="switchSubNav(4)"
                        >商业</div>
                    </div>

                    <div class="floor-content" v-show="subNavType == 1">
                        <el-main v-loading="BuildListLoading" v-show="isShowBuildListBox"
                            element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="数据正在加载中"
                            element-loading-spinner="el-icon-loading" style="overflow:hidden;padding:0px;"
                            class="build-item">
                            <div class="build-info" v-show="!BuildListLoading && buildingList.length">
                        <el-main
                            v-loading="BuildListLoading"
                            v-show="isShowBuildListBox"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                            element-loading-text="数据正在加载中"
                            element-loading-spinner="el-icon-loading"
                            style="overflow:hidden;padding:0px;"
                            class="build-item"
                        >
                            <div
                                class="build-info"
                                v-show="!BuildListLoading && buildingList.length"
                            >
                                <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                                    <i class="el-icon-caret-left"></i>
                                </div>
                                <div class="build-outBox" ref="BuildOutBox">
                                    <div class="build-box" style="left: 0px;">
                                        <div class="ridgepole-list" v-for="index of Math.ceil(buildingList.length / 10)"
                                            :key="index">
                                            <div v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                                :key="index" @click="buildingClick(item)"
                                                :class="{ on: buildingChoosed.name == item.name }" :title="item.name">
                                        <div
                                            class="ridgepole-list"
                                            v-for="index of Math.ceil(buildingList.length / 10)"
                                            :key="index"
                                        >
                                            <div
                                                v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                                :key="index"
                                                @click="buildingClick(item)"
                                                :class="{ on: buildingChoosed.name == item.name }"
                                                :title="item.name"
                                            >
                                                {{
                                                    item.name
                                                item.name
                                                }}
                                                <div @click.stop title="显示/隐藏楼栋高亮">
                                                    <el-checkbox v-model="isBuildHighLightchecked"
                                                    <el-checkbox
                                                        v-model="isBuildHighLightchecked"
                                                        v-show="buildingChoosed.name == item.name"
                                                        @change="changeBuildHighLightchecked"></el-checkbox>
                                                        @change="changeBuildHighLightchecked"
                                                    ></el-checkbox>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nextBtn rightBtn" @click="nextBtn">
                                    <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                                    <i
                                        v-show="buildingList.length > 10 && nextBtnShow"
                                        class="el-icon-caret-right"
                                    ></i>
                                </div>
                            </div>
                            <div class="build-info" v-show="!BuildListLoading && !buildingList.length"
                                style="justify-content: center;">暂无楼栋数据</div>
                            <div
                                class="build-info"
                                v-show="!BuildListLoading && !buildingList.length"
                                style="justify-content: center;"
                            >暂无楼栋数据</div>
                        </el-main>
                        <div class="ridgepole-info" v-if="isShowHouseBox">
                            <div class="title">楼栋信息</div>
@@ -146,7 +244,9 @@
                            <div class="content">
                                <div class="one">
                                    <div @click="goTOPeopleDetail(1)">
                                        <div style="color:#72fff8">{{ peopleInfo.registeredPopulation }}</div>
                                        <div
                                            style="color:#72fff8"
                                        >{{ peopleInfo.registeredPopulation }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(2)">
@@ -165,95 +265,166 @@
                            <div class="condo" v-show="isShowUnitChoose">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select size="small" v-model="unitValue" placeholder="请选择" @change="chooseUnit">
                                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                            :value="item.value" class="unit-option"></el-option>
                                    <el-select
                                        size="small"
                                        v-model="unitValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in unitOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            class="unit-option"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <el-main v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                style="overflow:hidden;padding:0px;height: 240px;">
                            <el-main
                                v-loading="pictLoading"
                                element-loading-background="rgba(0, 0, 0, 0.5)"
                                element-loading-text="数据正在加载中"
                                element-loading-spinner="el-icon-loading"
                                style="overflow:hidden;padding:0px;height: 240px;"
                            >
                                <div class="floor-outBox">
                                    <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                    <div
                                        @click="lastFloorBtn"
                                        class="floorBtn"
                                        v-show="lastFloorShow"
                                    >
                                        <i class="el-icon-caret-left"></i>
                                    </div>
                                    <div class="floor-box">
                                        <div class="floor-num" style="left: 0;">
                                            <div :class="{ on: floorsType == index }" @click="floorsType = index"
                                                v-for="index in Math.ceil(unitChoosedArr.length / 5)" :key="index">
                                            <div
                                                :class="{ on: floorsType == index }"
                                                @click="floorsType = index"
                                                v-for="index in Math.ceil(unitChoosedArr.length / 5)"
                                                :key="index"
                                            >
                                                {{ unitChoosedArr[index * 5 - 5].sname }}{{ unitChoosedArr[index * 5
                                                    - 5].sname ==
                                                    unitChoosedArr[unitChoosedArr.length - 1].sname ? '' : '-' }}{{
        unitChoosedArr[index *
        5
        - 1] ? (unitChoosedArr[index * 5
            - 1].sname) : (unitChoosedArr[index * 5 - 5].sname ==
                unitChoosedArr[unitChoosedArr.length - 1].sname
                ? '' : unitChoosedArr[unitChoosedArr.length - 1].sname)
    }}层
                                                - 5].sname ==
                                                unitChoosedArr[unitChoosedArr.length - 1].sname ? '' : '-' }}{{
                                                unitChoosedArr[index *
                                                5
                                                - 1] ? (unitChoosedArr[index * 5
                                                - 1].sname) : (unitChoosedArr[index * 5 - 5].sname ==
                                                unitChoosedArr[unitChoosedArr.length - 1].sname
                                                ? '' : unitChoosedArr[unitChoosedArr.length - 1].sname)
                                                }}层
                                            </div>
                                        </div>
                                    </div>
                                    <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                    <div
                                        @click="nextFloorBtn"
                                        class="floorBtn rightFloorBtn"
                                        v-show="nextFloorShow"
                                    >
                                        <i class="el-icon-caret-right"></i>
                                    </div>
                                </div>
                                <div class="floor-detail" v-show="!pictLoading && isHaveResidentData">
                                    <div v-for="(item, index) in unitChoosedArr.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index">
                                <div
                                    class="floor-detail"
                                    v-show="!pictLoading && isHaveResidentData"
                                >
                                    <div
                                        v-for="(item, index) in unitChoosedArr.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index"
                                    >
                                        <div class="title">{{ item.sname }}层：</div>
                                        <div class="detail">
                                            <div v-for="(value, index) in item.children_infos" :key="index"
                                            <div
                                                v-for="(value, index) in item.children_infos"
                                                :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.sname }">{{ value.sname }}室</div>
                                                :class="{ on: floorChoosed == value.sname }"
                                            >{{ value.sname }}室</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="floor-detail" v-show="!pictLoading && !isHaveResidentData"
                                    style="display: flex;justify-content: center;align-items: center;">暂无户室数据</div>
                                <div
                                    class="floor-detail"
                                    v-show="!pictLoading && !isHaveResidentData"
                                    style="display: flex;justify-content: center;align-items: center;"
                                >暂无户室数据</div>
                            </el-main>
                        </div>
                    </div>

                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeOutData" style="width: 100%"
                        <el-table
                            :data="comeOutData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'comeOut')"
                            :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'comeOut')"
                            :empty-text="houseDeepNoDataText"
                            v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="park-content" v-show="subNavType == 3">
                        <el-table :data="parkingLotData" style="width: 100%"
                        <el-table
                            :data="parkingLotData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'park')"
                            :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'park')"
                            :empty-text="houseDeepNoDataText"
                            v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="business-content" v-show="subNavType == 4">
                        <el-table :data="businessData" style="width: 100%"
                        <el-table
                            :data="businessData"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')"
                            @sort-change="sortDevName" :empty-text="houseDeepNoDataText" v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)">
                            <el-table-column sortable="custom" prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'business')"
                            @sort-change="sortDevName"
                            :empty-text="houseDeepNoDataText"
                            v-loading="houseDeepLoading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                        >
                            <el-table-column
                                sortable="custom"
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
@@ -261,15 +432,38 @@
                </div>

                <div class="police-info" v-if="navType == 1" ref="policeTableBox">
                    <el-main v-loading="policeInfoLoading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                    <el-main
                        v-loading="policeInfoLoading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.5)"
                    >
                        <div class="select-type">
                            <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
                                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
                            <el-select v-model="typeValue" @change="changeJQType" placeholder="请选择" class="type-select-css">
                                <el-option v-for="item in policeInforOptions" :key="item.value" :label="item.label"
                                    :value="item.value" class="option-css"></el-option>
                            <el-date-picker
                                :clearable="false"
                                v-model="eventTime"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="caseTimeChange"
                                :picker-options="pickerOptions"
                            ></el-date-picker>
                            <el-select
                                v-model="typeValue"
                                @change="changeJQType"
                                placeholder="请选择"
                                class="type-select-css"
                            >
                                <el-option
                                    v-for="item in policeInforOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    class="option-css"
                                ></el-option>
                            </el-select>
                        </div>
                        <div class="jq-tab">
@@ -277,35 +471,61 @@
                            <div :class="{ choosed: jqType == 1 }" @click="jqTabClick(1)">统计图</div>
                        </div>
                        <div v-show="jqType == 0">
                            <el-table :data="callPoliceData" style="width: 100%" :height="currentTableHeight"
                            <el-table
                                :data="callPoliceData"
                                style="width: 100%"
                                :height="currentTableHeight"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                                :row-class-name="tableRowClassName" :empty-text="jqNoDataText" class="police-infor-table"
                                @cell-click="housingPoliceSiteClick">
                                <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                                    min-width="80%"></el-table-column>
                                :row-class-name="tableRowClassName"
                                :empty-text="jqNoDataText"
                                class="police-infor-table"
                                @cell-click="housingPoliceSiteClick"
                            >
                                <el-table-column
                                    prop="JJDWMC"
                                    :show-overflow-tooltip="true"
                                    label="接警单位"
                                    min-width="80%"
                                ></el-table-column>
                                <el-table-column label="报警时间" prop="BJSJ" min-width="50%"></el-table-column>
                                <el-table-column prop="BJLX" :show-overflow-tooltip="true" label="报警类型"></el-table-column>
                                <el-table-column
                                    prop="BJLX"
                                    :show-overflow-tooltip="true"
                                    label="报警类型"
                                ></el-table-column>
                                <el-table-column label="操作" align="center" min-width="36%">
                                    <template slot-scope="scope">
                                        <el-button v-if="!whetherPosition(scope.row)" @click="clickData(scope.row)"
                                            type="text" size="small" title="定位">
                                            <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                                        <el-button
                                            v-if="!whetherPosition(scope.row)"
                                            @click="clickData(scope.row)"
                                            type="text"
                                            size="small"
                                            title="定位"
                                        >
                                            <i
                                                class="el-icon-location"
                                                :style="{ color: positionColor(scope.row) }"
                                            ></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="pages all-pagination-sty" ref="ElPagination">
                                <el-pagination background layout="prev, pager, next" :page-size="callPolicePage.pageSize"
                                    :page-count="callPolicePage.count" :current-page="callPolicePage.currentPage"
                                    @current-change="handleCurrentChange"></el-pagination>
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :page-size="callPolicePage.pageSize"
                                    :page-count="callPolicePage.count"
                                    :current-page="callPolicePage.currentPage"
                                    @current-change="handleCurrentChange"
                                ></el-pagination>
                            </div>
                        </div>
                        <div>
                            <div class="echarts-box" id="JQSEchart"></div>
                        </div>

                    </el-main>
                </div>
            </div>
@@ -313,8 +533,15 @@

        <map-search-box></map-search-box>

        <el-dialog title="报警信息" :visible.sync="policeSituationVisible" :modal-append-to-body="false" :modal="true"
            :close-on-click-modal="false" :before-close="policeSituationBeforeClose" class="policeSituation-details-box">
        <el-dialog
            title="报警信息"
            :visible.sync="policeSituationVisible"
            :modal-append-to-body="false"
            :modal="true"
            :close-on-click-modal="false"
            :before-close="policeSituationBeforeClose"
            class="policeSituation-details-box"
        >
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
@@ -375,70 +602,118 @@
            </div>
        </el-dialog>

        <el-dialog :title="residentDetailsTitle" :visible.sync="residentDetailsShow" :modal-append-to-body="false"
            :modal="true" :close-on-click-modal="false" :before-close="residentDetailsClose" class="resident-details-box">
            <el-table :data="houseDate"
        <el-dialog
            :title="residentDetailsTitle"
            :visible.sync="residentDetailsShow"
            :modal-append-to-body="false"
            :modal="true"
            :close-on-click-modal="false"
            :before-close="residentDetailsClose"
            class="resident-details-box"
        >
            <el-table
                :data="houseDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                v-loading="residentLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)"
                :empty-text="residentNoDataText"
            >
                <el-table-column prop="realName" label="姓名">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.realName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.phone }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="cardNo" label="身份证号">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.cardNo }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="relation" label="户主关系">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.relation }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="censusAddress" label="户籍地址">
                    <template slot-scope="scope">
                        <span :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.censusAddress }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="人口类型">
                    <template slot-scope="scope"><span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                                scope.row.personType == 1 ? '户籍人口' : '实有人口' }}</span></template>
                    <template slot-scope="scope">
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="是否为重点人员">
                    <template slot-scope="scope"><span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }">{{
                                scope.row.status == 2 ? '是' :
                                '否'
                            }}</span></template>
                    <template slot-scope="scope">
                        <span
                            :style="{ color: (scope.row.status == 2 ? '#f00!important' : '#000') }"
                        >
                            {{
                            scope.row.status == 2 ? '是' :
                            '否'
                            }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mini-code">
                <el-image fit="contain" :src="residentCodeUrl" :preview-src-list="[residentCodeUrl]">
                    <div slot="error" class="image-slot"> </div>
                <el-image
                    fit="contain"
                    :src="residentCodeUrl"
                    :preview-src-list="[residentCodeUrl]"
                >
                    <div slot="error" class="image-slot"></div>
                </el-image>
            </div>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :visible.sync="keyPersonVisible" :modal-append-to-body="false" :modal="true"
            :close-on-click-modal="false" :before-close="keyPersonBeforeClose" class="keyPerson-details-box-two">
        <el-dialog
            :title="keyPersonTitle"
            :visible.sync="keyPersonVisible"
            :modal-append-to-body="false"
            :modal="true"
            :close-on-click-modal="false"
            :before-close="keyPersonBeforeClose"
            class="keyPerson-details-box-two"
        >
            <div class="header">
                <div>
                    姓名：
@@ -449,14 +724,25 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearPeopleDetailSearchValue"
                >清空</el-button>
            </div>
            <el-main v-loading="keyPeopleLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table :data="personDetailArr" style="width: 100%"
            <el-main
                v-loading="keyPeopleLoading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)"
            >
                <el-table
                    :data="personDetailArr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :empty-text="peopleNoDataText">
                    :empty-text="peopleNoDataText"
                >
                    <el-table-column label="序号" type="index" width="50" align="center">
                        <template slot-scope="scope">
                            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
@@ -466,16 +752,27 @@
                    <el-table-column prop="realName" label="姓名"></el-table-column>
                    <el-table-column prop="cardNo" label="身份证号"></el-table-column>
                    <el-table-column label="户室">
                        <template slot-scope="scope">{{ scope.row.address.split(villageInfo.name)[1] }}</template>
                        <template
                            slot-scope="scope"
                        >{{ scope.row.address.split(villageInfo.name)[1] }}</template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="policeStationName" label="所属派出所"></el-table-column>
                    <el-table-column prop="areaName" label="所属责任区"></el-table-column>
                </el-table>
                <div class="pages all-pagination-sty" ref="tablePagination" v-show="!keyPeopleLoading">
                    <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                        :total="peoplePage.total" :current-page="peoplePage.currentPage"
                        @current-change="peopleHandleCurrentChange"></el-pagination>
                <div
                    class="pages all-pagination-sty"
                    ref="tablePagination"
                    v-show="!keyPeopleLoading"
                >
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="peoplePage.pageSize"
                        :total="peoplePage.total"
                        :current-page="peoplePage.currentPage"
                        @current-change="peopleHandleCurrentChange"
                    ></el-pagination>
                </div>
            </el-main>
        </el-dialog>
@@ -2128,13 +2425,12 @@
        },
    },

    beforeDestroy () {
    destroyed () {
        this.$EventBus.$off("housingPoliceSiteClick")
        this.$EventBus.$off("showHouseingTileset")
    },

    destroyed () {
        this.$EventBus.$emit('unbindMxClick', this.getAoiByPtStd)


        this.$store.commit("SET_DETAILSPOPUP", {
            showBox: false,
@@ -2246,7 +2542,7 @@
            border-radius: 10px;
            overflow: hidden;

            &>div {
            & > div {
                height: 100%;
                overflow-y: auto;

@@ -2281,9 +2577,11 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgba(229, 253, 255, 0.013),
                                rgb(43 124 255 / 90%));
                        background: linear-gradient(
                            135deg,
                            rgba(229, 253, 255, 0.013),
                            rgb(43 124 255 / 90%)
                        );
                        z-index: -1;
                    }
                }
@@ -2327,7 +2625,7 @@
                .housing-introduce {
                    position: relative;

                    &>div {
                    & > div {
                        padding: 0 10px;
                        display: flex;

@@ -2398,7 +2696,7 @@
                    }
                }

                &>.floor-content {
                & > .floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
@@ -2447,7 +2745,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    &>div {
                                    & > div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
@@ -2474,14 +2772,16 @@
                                            right: 0;
                                        }

                                        :deep(.el-checkbox .el-checkbox__inner) {
                                        :deep(.el-checkbox
                                                .el-checkbox__inner) {
                                            width: 12px;
                                            height: 12px;
                                            border-radius: 1px;
                                            border: 0;
                                        }

                                        :deep(.el-checkbox .el-checkbox__inner::after) {
                                        :deep(.el-checkbox
                                                .el-checkbox__inner::after) {
                                            height: 7px;
                                            left: 5px;
                                        }
@@ -2500,7 +2800,7 @@
                        .content {
                            display: flex;

                            &>div {
                            & > div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -2508,11 +2808,11 @@
                                justify-content: center;
                                border-right: 1px solid #fff !important;

                                &>div {
                                & > div {
                                    cursor: default;
                                }

                                &>div:last-child {
                                & > div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
@@ -2520,11 +2820,11 @@
                                }
                            }

                            &>div:first-child {
                            & > div:first-child {
                                width: 30%;
                            }

                            &>div:last-child {
                            & > div:last-child {
                                border-right: 1px solid transparent !important;
                            }
                        }
@@ -2549,10 +2849,10 @@
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                & > div {
                                    flex: 1;

                                    &>div:first-child {
                                    & > div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
@@ -2560,7 +2860,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -2575,8 +2875,8 @@
                            justify-content: space-around;
                            background: rgba(8, 56, 185, 0.5);

                            &>div {
                                &>div:first-child {
                            & > div {
                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -2614,7 +2914,6 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -2637,12 +2936,12 @@
                                display: flex;
                                flex: 1;

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

                                    &>span {
                                    & > span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
@@ -2709,7 +3008,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -2722,7 +3021,7 @@
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    &>.on {
                                    & > .on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -2734,7 +3033,7 @@
                            margin-top: 14px;
                            height: 220px;

                            &>div {
                            & > div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
@@ -2748,7 +3047,7 @@
                                    flex: 1;
                                    display: flex;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -2772,34 +3071,38 @@
                                        }

                                        .focus {
                                            top: calc((100% - 18px) / 4 * 2 + 6px);
                                            top: calc(
                                                (100% - 18px) / 4 * 2 + 6px
                                            );
                                            background: rgb(255, 121, 108);
                                        }

                                        .warning {
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            top: calc(
                                                (100% - 18px) / 4 * 3 + 12px
                                            );
                                            background: rgb(254, 172, 4);
                                        }
                                    }

                                    &>.on {
                                    & > .on {
                                        color: orange;
                                        border-color: orange !important;
                                    }

                                    &>.chuzu {
                                    & > .chuzu {
                                        border: 1px solid #3a8b3a;
                                    }

                                    &>.zizhu {
                                    & > .zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    &>.kongzhi {
                                    & > .kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    &>.shangye {
                                    & > .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -2895,9 +3198,11 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    animation: prog 3s ease infinite;
}


 src/views/policeInfor/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-08 18:28:58
 * @LastEditTime: 2023-05-08 18:54:34
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -34,6 +34,7 @@
                    <div style="margin-left: 8px;">
                        <el-checkbox v-model="siteLayerShow" @change="siteLayerChange">点位图</el-checkbox>
                    </div>

                    <div style="margin-left: 8px;">
                        <el-checkbox v-model="heatMapShow" @change="heatMapChange">热力图</el-checkbox>
                    </div>
@@ -701,6 +702,7 @@
            this.loading()
            this.historyPoliceInforData = []
            this.heatMapData = []
            this.heatMapShow = false
            this.historyEmptyText = ""

            if (this.heatMap != null) {