Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

guanqb

2022-10-29 248d657adecb15ea9edaf5a4f0b1a487b7abe93b

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 package-lock.json

@@ -5056,6 +5056,11 @@
                }
            }
        },
        "comutils": {
            "version": "1.1.19",
            "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
            "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
        },
        "concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -14010,6 +14015,14 @@
            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
            "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
        },
        "vue-seamless-scroll": {
            "version": "1.1.23",
            "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
            "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
            "requires": {
                "comutils": "^1.1.9"
            }
        },
        "vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

 package.json

@@ -19,6 +19,7 @@
        "vue": "^2.6.11",
        "vue-axios": "^3.3.7",
        "vue-router": "^3.2.0",
        "vue-seamless-scroll": "^1.1.23",
        "vuex": "^3.4.0"
    },
    "devDependencies": {

 public/img/icon/dt.png

 public/img/icon/zf.png

 src/assets/data/dt.js

New file
@@ -0,0 +1,155 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-23 17:54:16
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-29 15:15:05
 * @FilePath: \srs-police-affairs\src\assets\data\dt.js
 * @Description: 车辆相关数据
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */
export default [{
    name: '1号电台',
    lng: 116.022877,
    lat: 28.685077,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '2号电台',
    lng: 116.029917,
    lat: 28.685360,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '3号电台',
    lng: 116.031044,
    lat: 28.679445,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '4号电台',
    lng: 115.966750,
    lat: 28.595163,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '5号电台',
    lng: 116.150081,
    lat: 28.580119,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '6号电台',
    lng: 116.029917,
    lat: 28.685360,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '7号电台',
    lng: 116.235801,
    lat: 28.654740,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '8号电台',
    lng: 116.210143,
    lat: 28.691634,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '9号电台',
    lng: 116.072665,
    lat: 28.639879,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '10号电台',
    lng: 116.121559,
    lat: 28.699041,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '11号电台',
    lng: 116.106692,
    lat: 28.758830,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '12号电台',
    lng: 116.043007,
    lat: 28.736032,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '13号电台',
    lng: 116.002395,
    lat: 28.695900,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '14号电台',
    lng: 116.009437,
    lat: 28.660863,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '15号电台',
    lng: 116.067097,
    lat: 28.621827,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '16号电台',
    lng: 115.944243,
    lat: 28.669108,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}]

 src/assets/data/phone.js

@@ -1,5 +1,5 @@
export default [{
    name: '1号手台',
    name: '1号手持记录仪',
    person: "李会军",
    lng: 116.020804,
    lat: 28.678568,
@@ -9,7 +9,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '2号手台',
    name: '2号手持记录仪',
    person: "李会军",
    lng: 116.027659,
    lat: 28.678623,
@@ -19,7 +19,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '3号手台',
    name: '3号手持记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.680071,
@@ -29,7 +29,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '4号手台',
    name: '4号手持记录仪',
    person: "李会军",
    lng: 116.018759,
    lat: 28.686071,
@@ -39,7 +39,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '5号手台',
    name: '5号手持记录仪',
    person: "李会军",
    lng: 116.029759,
    lat: 28.685071,
@@ -49,7 +49,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '6号手台',
    name: '6号手持记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.684071,
@@ -59,7 +59,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '7号手台',
    name: '7号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.683071,
@@ -69,7 +69,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '8号手台',
    name: '8号手持记录仪',
    person: "李会军",
    lng: 116.022759,
    lat: 28.682071,
@@ -79,7 +79,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '9号手台',
    name: '9号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.681071,
@@ -89,7 +89,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '10号手台',
    name: '10号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.677071,
@@ -99,7 +99,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '11号手台',
    name: '11号手持记录仪',
    person: "李会军",
    lng: 115.947759,
    lat: 28.710071,
@@ -109,7 +109,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '12号手台',
    name: '12号手持记录仪',
    person: "李会军",
    lng: 115.977759,
    lat: 28.745071,
@@ -119,7 +119,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '13号手台',
    name: '13号手持记录仪',
    person: "李会军",
    lng: 116.164759,
    lat: 28.738071,
@@ -129,7 +129,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '14号手台',
    name: '14号手持记录仪',
    person: "李会军",
    lng: 116.149759,
    lat: 28.665071,
@@ -139,7 +139,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '15号手台',
    name: '15号手持记录仪',
    person: "李会军",
    lng: 116.301759,
    lat: 28.644071,
@@ -149,7 +149,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '16号手台',
    name: '16号手持记录仪',
    person: "李会军",
    lng: 116.115759,
    lat: 28.577071,
@@ -159,7 +159,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '17号手台',
    name: '17号手持记录仪',
    person: "李会军",
    lng: 116.165759,
    lat: 28.548071,
@@ -169,7 +169,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '18号手台',
    name: '18号手持记录仪',
    person: "李会军",
    lng: 116.020759,
    lat: 28.571071,
@@ -179,7 +179,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '19号手台',
    name: '19号手持记录仪',
    person: "李会军",
    lng: 116.002759,
    lat: 28.631071,

 src/assets/data/zf.js

New file
@@ -0,0 +1,191 @@
export default [{
    name: '1号执法记录仪',
    person: "李会军",
    lng: 116.020804,
    lat: 28.678568,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '2号执法记录仪',
    person: "李会军",
    lng: 116.027659,
    lat: 28.678623,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '3号执法记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.680071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '4号执法记录仪',
    person: "李会军",
    lng: 116.018759,
    lat: 28.686071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '5号执法记录仪',
    person: "李会军",
    lng: 116.029759,
    lat: 28.685071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '6号执法记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.684071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '7号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.683071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '8号执法记录仪',
    person: "李会军",
    lng: 116.022759,
    lat: 28.682071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '9号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.681071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '10号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.677071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '11号执法记录仪',
    person: "李会军",
    lng: 115.947759,
    lat: 28.710071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '12号执法记录仪',
    person: "李会军",
    lng: 115.977759,
    lat: 28.745071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '13号执法记录仪',
    person: "李会军",
    lng: 116.164759,
    lat: 28.738071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '14号执法记录仪',
    person: "李会军",
    lng: 116.149759,
    lat: 28.665071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '15号执法记录仪',
    person: "李会军",
    lng: 116.301759,
    lat: 28.644071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '16号执法记录仪',
    person: "李会军",
    lng: 116.115759,
    lat: 28.577071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '17号执法记录仪',
    person: "李会军",
    lng: 116.165759,
    lat: 28.548071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '18号执法记录仪',
    person: "李会军",
    lng: 116.020759,
    lat: 28.571071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '19号执法记录仪',
    person: "李会军",
    lng: 116.002759,
    lat: 28.631071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}]

 src/styles/element-ui/element-ui.css

File was deleted

 src/styles/element-ui/element-ui.min.css

File was deleted

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-27 16:01:02
 * @LastEditTime: 2022-10-29 15:20:12
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -18,12 +18,8 @@
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
@@ -37,25 +33,16 @@
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>
                        <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
                            style="width:268px"></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div
                        class="row-box"
                        :class="{on: currentClickIndex === index}"
                        v-for="(item, index) in activityList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                    >
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index" @click="goAbDetail(item, index)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -64,9 +51,7 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -75,16 +60,11 @@
                        </div>
                    </div>
                </div>

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

@@ -130,13 +110,8 @@
        </div>

        <div class="second-container">
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                @check="treeCheckClick"
                @node-click="treeNodeClick"
            ></el-tree>
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick" @node-click="treeNodeClick">
            </el-tree>
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
@@ -159,16 +134,14 @@

            <div class="row-box">
                <div class="category">活动内容1：</div>
                <div
                    class="category-value"
                >在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时， 工程物料部应做好停电前的应变工作。</div>
                <div class="category-value">在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时，
                    工程物料部应做好停电前的应变工作。</div>
            </div>

            <div class="row-box">
                <div class="category">活动内容2：</div>
                <div
                    class="category-value"
                >在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩 大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。</div>
                <div class="category-value">在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩
                    大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。</div>
            </div>

            <div class="row-box">
@@ -179,25 +152,16 @@
            <div class="row-box">
                <div class="category">撤离路线：</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
                    <el-input
                        @input="analyseChange"
                        size="mini"
                        type="number"
                        v-model="analyseInput"
                        placeholder="请输入范围"
                    ></el-input>
                    <el-input @input="analyseChange" size="mini" type="number" v-model="analyseInput"
                        placeholder="请输入范围"></el-input>
                </div>
            </div>
        </div>
@@ -214,7 +178,7 @@
                    <button @click="restore()">恢复</button>
                </li>
                <li>
                    <button @click="view('1',-20,100)">第一视角</button>
                    <button @click="view('1', -20, 100)">第一视角</button>
                </li>
                <li>
                    <button @click="view('2')">上帝视角</button>
@@ -629,6 +593,7 @@

        play () {
            tc.play()
            this.view('2')
        },

        pause () {
@@ -687,8 +652,8 @@
        background: $bg-color;

        .title {
            height: 51px;
            line-height: 58px;
            height: 40px;
            line-height: 40px;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 20px;
@@ -697,7 +662,11 @@
        .search-box {
            padding: 0 10px;

            & > div {
            &>div:first-child {
                margin-top: 0;
            }

            &>div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -771,7 +740,7 @@
                    font-size: 14px;

                    .row-content {
                        & > div {
                        &>div {
                            display: flex;
                            line-height: 28px;

@@ -788,6 +757,7 @@
                        }
                    }
                }

                .row-box:hover {
                    background-color: rgb(1, 76, 137);
                }
@@ -799,6 +769,7 @@
                :deep(.el-dialog) {
                    margin-right: 0px;
                }

                .tableClass {
                    margin: 0 auto;
                    width: 400px;
@@ -809,6 +780,14 @@
                .tableClass td {
                    width: 300px;
                }
            }


            .pages {
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
@@ -853,6 +832,7 @@
        :deep(.el-tree-node__content) {
            background: transparent;
        }

        :deep(.el-tree-node) {
            background: $bg-color;
            color: #fff;
@@ -891,7 +871,7 @@
            line-height: 28px;
            display: flex;

            & > div {
            &>div {
                text-align: left;
            }


 src/views/home/components/bottomContainer.vue

@@ -7,13 +7,45 @@
                <div class="rightBor"></div>
            </div>
            <div class="timeTab">
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">近一周</span>
                <span>/</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">近一月</span>
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
            </div>
        </div>

        <div class="body" ref="tableBox">
            <ul>
                <li style="color: #fff; background: rgb(1, 76, 137);">
                    <span class="num">序号</span>
                    <span class="type">警情类别</span>
                    <span class="comingPhone">报警电话</span>
                    <span class="dealTime">接警时间</span>
                    <span class="dealPolice">经办民警</span>
                    <span class="callPeople">报警人</span>
                    <span class="callPhone">报警人联系人</span>
                    <span class="callContent">报警内容</span>
                </li>
            </ul>
            <vue-seamless-scroll :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" class="warp"
                :style="{
                    height: currentTableHeight - 44 + 'px', width: '100%'
                }">
                <ul class="item">
                    <li v-for="(item, index) in (timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr)"
                        :key="index">
                        <span class="num" v-text="item.num"></span>
                        <span class="type" v-text="item.type"></span>
                        <span class="comingPhone" v-text="item.comingPhone"></span>
                        <span class="dealTime" v-text="item.dealTime"></span>
                        <span class="dealPolice" v-text="item.dealPolice"></span>
                        <span class="callPeople" v-text="item.callPeople"></span>
                        <span class="callPhone" v-text="item.callPhone"></span>
                        <span class="callContent" v-text="item.callContent"></span>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>

        <!-- <div class="body" ref="tableBox">
            <el-table :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" 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"
@@ -27,12 +59,13 @@
                <el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
                <el-table-column prop="callContent" label="报警内容"></el-table-column>
            </el-table>
        </div>
        </div> -->
    </div>
</template>

<script>
let interTime
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    data () {
@@ -44,6 +77,10 @@
                { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-09', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-12', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '6', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '7', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '8', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '9', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
            ],
            pliceSituationMouthArr: [
                { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-01', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
@@ -51,15 +88,22 @@
                { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-13', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-20', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '6', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '7', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '8', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '9', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
            ],
            currentTableHeight: 0,

        }
    },

    components: {
        vueSeamlessScroll
    },

    mounted () {
        this.$nextTick(() => {
            this.tableScroll()
            // this.tableScroll()
            this.setDomStyle()
        })

@@ -103,6 +147,7 @@
    width: 100%;

    .header {
        position: relative;
        width: 100%;
        height: 36px;

@@ -140,10 +185,20 @@
        }

        .timeTab {
            float: right;
            width: 20%;
            height: 36px;
            line-height: 36px;
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            border-radius: 6px;
            overflow: hidden;

            span {
                width: 42px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                background: rgb(1, 76, 137);
            }

            .beforetime {
                color: rgb(98, 95, 95);
@@ -166,6 +221,61 @@
        height: calc(100% - 56px);

        /* 解决自定义滚动条 x 轴显示问题 */
        .warp {
            margin: 0 auto;
            overflow: hidden;
        }

        ul {

            li {
                height: 44px;
                line-height: 44px;
                display: flex;

                .num {
                    width: 8%;
                }

                .type {
                    width: 10%;
                }

                .comingPhone {
                    width: 14%;
                }

                .dealTime {
                    width: 12%;
                }

                .dealPolice {
                    width: 12%;
                }

                .callPeople {
                    width: 12%;
                }

                .callPhone {
                    width: 14%;
                }

                .callContent {
                    flex: 1;
                }
            }

            li:nth-child(2n) {
                background: rgba(20, 50, 123, 1.0);
                color: #fff !important;
            }

            li:nth-child(2n-1) {
                background: rgba(29, 38, 105, 1.0);
                color: #fff;
            }
        }
    }
}
</style>

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-24 11:41:03
 * @LastEditTime: 2022-10-29 15:10:34
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -12,63 +12,45 @@
<template>
    <div class="container">
        <div class="switch-box">
            <div class="police-car" @click="navClick(1)" :class="{'choosed':navType == 1}">警车</div>
            <div class="interphone" @click="navClick(2)" :class="{'choosed':navType == 2}">手台</div>
            <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div class="list-show" ref="tableBox" v-show="!detailFlag">
            <div class="search-box">
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入搜索条件"
                />
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{item.name}}</div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                </div>
            </div>

            <div class="list" v-show="navType == 1">
                <el-table
                    :data="carList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                <el-table :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                    :height="currentTableHeight"
                >
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
                    <el-table-column prop="carType" label="警车类型" width="120"></el-table-column>
                    <el-table-column prop="carType" label="类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                @click="rowClick(scope.row)"
                                type="text"
                                size="small"
                                title="定位"
                            >
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button
                                @click="carDetail(scope.row)"
                                type="text"
                                size="small"
                                title="轨迹"
                            >
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
@@ -76,46 +58,106 @@
                </el-table>

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

            <div class="list" v-show="navType == 2">
                <el-table
                    :data="phoneList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                    @cell-click="rowClick"
                    :height="currentTableHeight"
                >
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="170"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="180"></el-table-column>
                    <el-table-column prop="name" label="名称" width="120"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

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

            <div class="list" v-show="navType == 3">
                <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
                    <el-table-column prop="carType" label="类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

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

            <div class="list" v-show="navType == 4">
                <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="120"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages">
                    <el-pagination background layout="prev, pager, next" :total="zfList.length" :page-size="pagesize"
                        pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
@@ -126,39 +168,68 @@
                    <i class="el-icon-back"></i>
                </el-button>详细资料及轨迹查询
            </div>
            <ul>
            <ul v-show="navType == 1">
                <li>
                    <div>车辆型号：</div>
                    <div>1</div>
                    <div>SC7103</div>
                </li>

                <li>
                    <div>责任人：</div>
                    <div>2</div>
                    <div>高德光</div>
                </li>

                <li>
                    <div>出场日期：</div>
                    <div>3</div>
                    <div>2019-12-02 00:00:00</div>
                </li>

                <li>
                    <div>厂商：</div>
                    <div>4</div>
                    <div>重庆长安铃木汽车有限公司</div>
                </li>

                <li>
                    <div>选择时间：</div>
                    <div class="datetime">
                        <el-date-picker
                            v-model="trackTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            size="mini"
                            :editable="false"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                        <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

                <li>
                    <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                </li>
            </ul>

            <ul v-show="navType == 2">
                <li>
                    <div>型号：</div>
                    <div>350m</div>
                </li>

                <li>
                    <div>责任人：</div>
                    <div>高德光</div>
                </li>

                <li>
                    <div>出场日期：</div>
                    <div>2019-12-02 00:00:00</div>
                </li>

                <li>
                    <div>厂商：</div>
                    <div>摩托罗拉</div>
                </li>

                <li>
                    <div>选择时间：</div>
                    <div class="datetime">
                        <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

@@ -168,61 +239,32 @@
            </ul>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <video
                    src="/video/sp.mp4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    ref="videoElement"
                    style="object-fit: fill"
                ></video>
        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                    style="object-fit: fill"></video>
            </div>
        </el-dialog>

        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
            <div style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%;">
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>责任人：</div>
                    <div>{{phoneDetails.person}}</div>
                    <div>{{ phoneDetails.person }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>联系方式：</div>
                    <div>{{phoneDetails.phoneID}}</div>
                    <div>{{ phoneDetails.phoneID }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                    <div>手台类型：</div>
                    <div>{{phoneDetails.phoneType}}</div>
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>类型：</div>
                    <div>{{ phoneDetails.phoneType }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>所在地址：</div>
                    <div>{{phoneDetails.location}}</div>
                    <div>{{ phoneDetails.location }}</div>
                </div>
            </div>
        </el-dialog>
@@ -234,6 +276,8 @@

import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
import zfList from '@/assets/data/zf.js'
import dtList from '@/assets/data/dt.js'
export default {
    data () {
        return {
@@ -241,7 +285,9 @@
            currentPage: 1,
            pagesize: 13,
            carList: [],
            dtList: [],
            phoneList: [],
            zfList: [],
            dialogTitle: '',
            dialogVisible: false,
            phoneDetails: {},
@@ -253,11 +299,27 @@
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
            options: [{
                value: '1',
                label: '警车'
            }, {
                value: '2',
                label: '手持记录仪'
            }, {
                value: '3',
                label: '电台'
            }, {
                value: '4',
                label: '执法记录仪'
            }],
            typeValue: '1'
        }
    },
    created () {
        this.carList = carList
        this.dtList = dtList
        this.phoneList = phoneList
        this.zfList = zfList
        const that = this

        this.$nextTick(() => {
@@ -279,8 +341,12 @@
        },

        navClick (type) {
            console.log(global.viewer.entities)
            if (!type) { type = 1 }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            this.detailFlag = false
            this.navType = type

@@ -288,14 +354,31 @@
            this.searchValBoxShow = false
            this.searchArray = []
            this.carList = carList
            this.dtList = dtList
            this.phoneList = phoneList
            this.zfList = zfList

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

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

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

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

            if (type == 1) {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'phoneLayers',
                    type: 'VectorLayer'
                })

                this.carList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'carLayers',
@@ -310,15 +393,28 @@
                        incident: this.siteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'carLayers',
                    type: 'VectorLayer'
                })

            } else if (type == 2) {
                this.phoneList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'phoneLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
                    })
                })
            } else if (type == 3) {
                this.dtList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'dtLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
                    })
                })
            } else if (type == 4) {
                this.zfList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'zfLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
@@ -365,12 +461,18 @@
                this.searchValBoxShow = false
                this.searchArray = []
                this.carList = carList
                this.dtList = dtList
                this.phoneList = phoneList
                this.zfList = zfList
            } else {
                if (this.navType == 1) {
                    this.searchArray = listQuery(carList, this.searchValue, 'name')
                } else {
                } else if (this.navType == 2) {
                    this.searchArray = listQuery(phoneList, this.searchValue, 'name')
                } else if (this.navType == 3) {
                    this.searchArray = listQuery(dtList, this.searchValue, 'name')
                } else if (this.navType == 4) {
                    this.searchArray = listQuery(zfList, this.searchValue, 'name')
                }
                this.searchValBoxShow = true
            }
@@ -380,8 +482,12 @@
            this.searchValBoxShow = false
            if (this.navType == 1) {
                this.carList = accurateSearch(carList, this.searchValue, 'name')
            } else {
            } else if (this.navType == 2) {
                this.phoneList = accurateSearch(phoneList, this.searchValue, 'name')
            } else if (this.navType == 3) {
                this.dtList = accurateSearch(phoneList, this.searchValue, 'name')
            } else if (this.navType == 4) {
                this.zfList = accurateSearch(zfList, this.searchValue, 'name')
            }
        },

@@ -390,8 +496,12 @@
            this.searchArray = []
            if (this.navType == 1) {
                this.carList = [item]
            } else {
            } else if (this.navType == 2) {
                this.phoneList = [item]
            } else if (this.navType == 3) {
                this.dtList = [item]
            } else if (this.navType == 4) {
                this.zfList = [item]
            }
        },

@@ -402,6 +512,11 @@
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

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

        lookTrack () {
@@ -440,6 +555,20 @@
                ":" +
                this.disposeTime(endTime.getSeconds())

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

            this.$EventBus.$emit('layerPolylineAdd', {
                layerName: 'polylineLayer',
                positions: '116.025000, 28.686000; 116.025000, 28.678000; 116.020000, 28.678000',
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    255, 17, 0,
                    255
                ),
                width: 4
            })
        },

        // 处理时间补零操作
@@ -463,6 +592,21 @@
            type: 'VectorLayer'
        })

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

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

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

        window.removeEventListener('resize', this.setTableHeight)
    }
}
@@ -478,24 +622,13 @@
    background: $bg-color;

    .switch-box {
        padding: 6px;
        // background: blue;
        display: flex;
        justify-content: space-around;

        & > div {
            box-sizing: border-box;
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            border-bottom: 1px solid #33566c;
        }

        .choosed {
            background-color: rgb(0, 92, 169);
        &>div {
            flex: 1;
        }
    }

@@ -505,6 +638,7 @@

        .search-box {
            padding: 6px;
            padding-top: 0;
            height: 48px;
            display: flex;

@@ -560,7 +694,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -590,13 +724,14 @@
        height: calc(100% - 50px);
        background: rgba(20, 50, 123, 1);

        & > div {
        &>div {
            position: relative;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            border-bottom: 1px solid #fff;

            .el-button {
                padding: 0 !important;
                position: absolute;
@@ -607,10 +742,12 @@
                line-height: 28px;
            }
        }

        ul {
            margin: 0;
            padding: 0px;
        }

        li {
            margin: 0;
            padding: 0 4px;
@@ -620,15 +757,19 @@
            display: flex;
            color: #fff;
            border-bottom: 1px solid #fff;
            & > div {

            &>div {
                text-align: center;
            }
            & > div:first-child {

            &>div:first-child {
                flex: 2;
            }
            & > div:last-child {

            &>div:last-child {
                flex: 6;
                & > div {

                &>div {
                    width: 100% !important;
                }
            }
@@ -637,6 +778,7 @@
        li:last-child {
            text-align: center;
            position: relative;

            .el-button {
                position: absolute;
                top: 0;

 src/views/video/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-25 15:40:54
 * @LastEditTime: 2022-10-29 15:23:34
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -17,34 +17,28 @@
        </div>

        <div class="draw-btn">
            <button @click="draw('polygon')">绘制面</button>
            <button @click="draw('polyline')">绘制线</button>
            <button @click="removeDrawLayer">清除</button>
            <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
            <el-button type="primary" size="mini" @click="draw('polyline')">绘制线</el-button>
            <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{item.name}}</div>
                <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </div>
            </div>
        </div>

        <div class="list-show">
            <div class="car-list">
                <div class="list-box">
                    <el-table
                        :data="monitoringList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    <el-table :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                        @cell-click="rowClick"
                    >
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
@@ -52,39 +46,18 @@
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="monitoringList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <video
                    src="/video/sp.mp4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    ref="videoElement"
                    style="object-fit: fill"
                ></video>
        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                    style="object-fit: fill"></video>
            </div>
        </el-dialog>
    </div>
@@ -222,14 +195,14 @@
    background: $bg-color;

    .search-box {
        padding: 5px;
        padding: 8px;
        height: 48px;
        display: flex;

        input {
            flex: 1;
            height: 100%;
            font-size: 18px;
            font-size: 16px;
            text-indent: 1em;
            color: #ffffff;
            background-color: transparent;
@@ -278,7 +251,7 @@
        border-radius: 10px;
        overflow: hidden;

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

@@ -291,14 +264,22 @@
    }

    .draw-btn {
        margin: 8px;
        margin-top: 0;
        display: flex;
        height: 36px;
        align-items: center;
        justify-content: space-around;
        height: 26px;

        .el-button {
            flex: 1;
        }
    }

    .list-show {
        flex: 1;

        & > div {
        &>div {
            height: 100%;
            display: flex;
            flex-direction: column;
@@ -308,6 +289,13 @@
                flex: 1;
            }
        }

        .pages {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>