视频聚合添加，警情信息添加

shuishen

2023-02-24 41127ac064e5c4cc8f8bb806d12c34691b3b3cad

视频聚合添加，警情信息添加

 src/components/assemble/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-23 09:09:09
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-24 09:03:59
 * @LastEditTime: 2023-02-24 13:49:38
 * @FilePath: \srs-police-affairs\src\components\assemble\index.vue
 * @Description: 聚合图标点的点击事件
 * 
@@ -101,9 +101,16 @@
         */
        viewerClick (e) {
            const that = this
            let layerName
            if (e.target && e.target != undefined && e.target.id && e.target.id.length) {
                if (this.$route.path == '/layout/video/list') {
                    layerName = 'treeValAllLayer'
                } else {
                    layerName = 'cameraLayers'
                }

                this.$EventBus.$emit('getOverLayerID', {
                    layerName: 'cameraLayers',
                    layerName,
                    ids: e.target.id,
                    cb (data) {
                        console.log(data, 456)

 src/views/policeInfor/index.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 16:54:24
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @LastEditTime: 2023-02-24 14:26:02
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -12,648 +12,302 @@
<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        class="option-css"></el-option>
                </el-select>

            <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>

            <div class="list-show" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
                </div>
            <div class="police-info" ref="policeTableBox">
                <el-table :data="policeInforData" 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"
                    @row-click="clickData">
                    <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                        min-width="34%"></el-table-column>
                    <el-table-column label="报警时间" min-width="26%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                        min-width="20%"></el-table-column>
                    <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                        min-width="20%"></el-table-column>
                </el-table>

                <div class="list" ref="tableBox">
                    <el-table :data="equimentTableData"
                        :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 prop="newName" :show-overflow-tooltip="true" label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"></el-table-column>
                        <el-table-column prop="status" label="状态" :min-width="typeValue == 0 ? '14%' : '14%'">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" :min-width="typeValue == 0 ? '30%' : '18%'">
                            <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 v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text" size="small"
                                    title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pages" ref="tablePagination">
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                <div class="pages" ref="ElPagination">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
                        :current-page="pages.current" :pager-count="3"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>

            <div class="track-box" v-show="detailFlag">
                <div class="track-box-info">
                    <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div>
                    <ul>
                        <li>
                            <div>通道编号：</div>
                            <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div>
                        </li>

                        <li>
                            <div>设备编号：</div>
                            <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div>
                        </li>

                        <li>
                            <div>通道名称：</div>
                            <div>{{ currentSelectEquipment.name ? currentSelectEquipment.name : '' }}</div>
                        </li>

                        <li>
                            <div>状态：</div>
                            <div>
                                {{
                                    currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                    ''
                                }}
                            </div>
                        </li>

                        <li>
                            <div>选择时间：</div>
                            <div class="datetime">
                                <el-date-picker v-model="trackTime" type="daterange" unlink-panels 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>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>

<script>
import { getHistoricalTrack } from '@/api/police/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import { getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'
import { getEquipmentPaging } from '@/api/home/index.js'

let tc = null
let track = null
import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"

export default {
    inject: ['userInfo'],

    data () {
        return {
            navType: 0,
            dialogTitle: '',
            dialogVisible: false,
            searchValue: '',
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
            options: [
                {
                    value: '0',
                    label: '警车'
                },
                {
                    value: '1',
                    label: '摄像头'
                }
                // , {
                //     value: '3',
                //     label: '电台'
                // }, {
                //     value: '4',
                //     label: '执法记录仪'
                // }
            ],
            typeValue: '0',
            boxShow: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            flvPlayer: null,

            equimentTableData: [],
            equimentPage: {
            policeInforData: [],
            boxShow: false,
            pages: {
                total: 0,
                pageSize: 25,
                count: 0,
                currentPage: 1
                size: 15,
                current: 1
            },

            currentSelectEquipment: {}
            navType: 0,
            currentTableHeight: 0
        }
    },
    created () {
        window.addEventListener('resize', this.setTableHeight)
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.navClick()

        tc = new global.DC.TrackController(global.viewer)

        this.$nextTick(() => {
            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },
    methods: {
        // 搜索框改变事件
        searchChange () {
            this.detailFlag = false
        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []

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

            this.equimentPage.currentPage = 1

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

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

            this.getEquipmentPaging({ type: this.navType })
        },
        // 设备分页处理
        handleCurrentChange (currentPage) {
            this.equimentPage.currentPage = currentPage

            this.getEquipmentPaging({ type: this.navType })
        },

        // 获取设备分页数据
        getEquipmentPaging (params) {
            getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => {
                this.equimentTableData = []
                this.equimentPage.count = 0

                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list.map(item => {
                        let newName = ''
                        if (params.type == 0) {
                            newName = item.name.replace('上饶-', '')
                        } else {
                            if (item.name.charAt(7) == '-') {
                                newName = item.name.slice(8)
                            } else {
                                newName = item.name.slice(7)
                            }
                        }

                        return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 1 }
                if (res.data.result.length > 0) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })

                    this.equimentTableData.forEach(item => {
                        if (this.navType == 0) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'carLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/car.png'
                                },
                                incident: this.siteClick
                            })
                        } else if (this.navType == 1) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'policeMonitoringLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/camera.png'
                                },
                                incident: this.siteClick
                            })
                        }
                    })

                    this.equimentPage.count = res.data.data.pages
                } else {
                    this.equimentTableData = []

                    this.equimentPage.total = 0
                    this.policeSituationRealtimeArr = []
                }

                this.$emit('policeSituationChange')
            })

            // this.policeSituationRealtimeArr = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })

            // this.$emit('policeSituationChange')
        },

        // 类别切换
        navClick (type) {
            if (type && type == this.navType) return
            this.detailFlag = false
        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages

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

            if (type) {
                this.navType = type
            }

            this.searchValue = ''

            this.equimentPage.currentPage = 1

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

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

            this.getEquipmentPaging({ type: this.navType })
        },

        // 表格行点击查看定位
        rowClick (row) {
            if (row.lng == 0 || row.lat == 0) {
                this.$message.error('暂无位置信息！')

                return
            }
            this.$EventBus.$emit('toPosition', {
                layerName: 'carLayers',
                siteJd: row.lng,
                siteWd: row.lat
            })
        },

        // 表格行点击查看轨迹
        equipmentTrack (row) {
            this.detailFlag = true

            this.currentSelectEquipment = row
        },

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

            this.dialogTitle = row.name
            let flvUrl = ''

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

            if (typeof flvUrl === 'object') {
                this.$message.error(flvUrl.msg)

                return
            }

            this.dialogVisible = true

            if (flvjs.isSupported()) {
                this.$nextTick(() => {
                    var videoElement = document.getElementById('videoElement')
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        url: flvUrl
                if (res.data.data.records.length > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                    this.flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer.load()
                    this.flvPlayer.play()
                })
            }
        },

        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = res.data
                    this.policeSituationHistoryArr = []
                }
            })
            return flvAddress
        },

        siteClick (e) {
            this.play(e.overlay.attrParams)
        },
                this.setTableHeight()

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

        // 轨迹返回
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

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

            tc.pause()
            // this.policeSituationHistoryArr = [{
            //     ZDDWXZB: 112,
            //     ZDDWYZB: 25,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            tc.removeTrack(track)
        },
            // this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })

        // 查看轨迹
        async lookTrack () {
            global.viewer.scene.globe.depthTestAgainstTerrain = false

            if (this.trackTime.length == 0) {
                this.$message({ message: '请选择开始时间', duration: 2000 })
                return
            }
            const startTime = new Date(this.trackTime[0])
            const start = startTime.getFullYear() + '-' + this.disposeTime(startTime.getMonth() + 1) + '-' + this.disposeTime(startTime.getDate()) + ' ' + this.disposeTime(startTime.getHours()) + ':' + this.disposeTime(startTime.getMinutes()) + ':' + this.disposeTime(startTime.getSeconds())
            if (this.trackTime.length == 1) {
                this.$message({ message: '请选择结束时间', duration: 2000 })
                return
            }
            const endTime = new Date(this.trackTime[1])
            const end = endTime.getFullYear() + '-' + this.disposeTime(endTime.getMonth() + 1) + '-' + this.disposeTime(endTime.getDate()) + ' ' + this.disposeTime(endTime.getHours()) + ':' + this.disposeTime(endTime.getMinutes()) + ':' + this.disposeTime(endTime.getSeconds())

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

            let positionsArr = []
            await this.getHistoricalTrack({ start: start, end: end, channelId: this.currentSelectEquipment.channelId }).then(res => {
                positionsArr = res
            })

            if (positionsArr.length == 0) {
                this.$message({
                    message: '该设备暂无轨迹数据',
                    type: 'warning'
                })

                return
            }

            let positionStr = ''
            positionsArr.forEach(item => {
                positionStr = positionStr + item.longitude + ',' + item.latitude + ';'
            })

            this.$EventBus.$emit('layerPolylineAdd', {
                layerName: 'polylineLayer',
                positions: positionStr,
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: global.DC.Color.GREEN,
                    speed: 10,
                    image: '/img/icon/arrow.png',
                    repeat: { x: 10, y: 1 }
                }),
                width: 6
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[0].longitude,
                    lat: positionsArr[0].latitude,
                    alt: 1,
                    url: '/img/icon/orgin.png'
                }
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[positionsArr.length - 1].longitude,
                    lat: positionsArr[positionsArr.length - 1].latitude,
                    alt: 1,
                    url: '/img/icon/end.png'
                }
            })

            track = new global.DC.Track(positionStr, 5000)

            track.setModel('/model/qiche.gltf', {
                scale: 1
            })

            tc.addTrack(track)

            this.$EventBus.$emit('toPosition', {
                siteJd: 114.928669,
                siteWd: 25.850383,
                siteGd: 500,
                siteHeading: 0,
                sitePitch: -90
            })

            tc.play()
        },

        // 处理时间补零操作
        disposeTime (s) {
            return s < 10 ? '0' + s : s
            // this.setTableHeight()
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight
            this.currentTableHeight = this.$refs.policeTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
        },

        /**
         * @description: 实时历史警情切换
         * @param {*} e
         * @return {*}
         */
        navClick (e) {
            this.navType = e.target.dataset.type
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },

        async getHistoricalTrack (params) {
            let positionArr = []

            await getHistoricalTrack(params).then(res => {
                positionArr = res.data.data
            })
            return positionArr
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 1,
                        text: this.searchExtensivelyArray[0].name
                    }
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'billboard',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    url: '/img/icon/location.png'
                }
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        }
    },

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

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

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

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

        tc.pause()

        tc.removeTrack(track)

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')
@@ -675,247 +329,30 @@
        color: #fff;
        background: $bg-color;

        .switch-box {
            padding: 6px;
            // background: blue;
        .nav-tab {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            &>div {
            .nav {
                flex: 1;
            }
        }

        .list-show {
            position: relative;
            height: calc(100% - 50px);

            .search-box {
                padding: 6px;
                padding-top: 0;
                height: 46px;
                display: flex;
                align-items: center;

                input {
                    flex: 1;
                    height: 100%;
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(24, 79, 202, 0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }
            }

            .list {
                height: calc(100% - 48px);
                display: flex;
                flex-direction: column;

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

                .state-box {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    margin: 0 auto;
                    border-radius: 50%;
                    background-color: #adadad;
                }

                .online {
                    background-color: #4ccc7d;
                }
            }

            :deep(.el-table td.el-table__cell div) {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .track-box {
            height: calc(100% - 50px);

            .back-btn {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }

            .back-btn::before {
                content: '\e6ea';
                font-family: element-icons;
                height: 28px;
                line-height: 28px;
                color: #fff;
                position: absolute;
                top: 4px;
                left: 8px;
            }

            .back-btn:hover::before {
                color: #fff;
            }

            ul {
                margin: 0;
                padding: 0;
            }

            li {
                margin: 0;
                padding: 0 4px;
                list-style: none;
                height: 42px;
                line-height: 42px;
                display: flex;
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                    text-align: center;
                }

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

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

                    &>div {
                        width: 100% !important;
                    }
                }
            }

            li:last-child {
                text-align: center;
                position: relative;

                .el-button {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    padding: 0 !important;
                    width: 68px;
                    height: 32px;
                    line-height: 32px;
                }
            }
        }
    }

    .search-content {
        position: absolute;
        position: fixed;
        z-index: 99;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            .choosed {
                // background-color: rgba(0, 92, 169, 1);
                background-color: #3d5ad5;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }
        .police-info {
            height: calc(100% - 40px);

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

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

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            .pages {
                height: 40px;
                line-height: 40px;
            }
        }
    }

 src/views/video/list.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 08:56:50
 * @LastEditTime: 2023-02-24 13:45:15
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -15,11 +15,11 @@
            <div class="search-box">
                点位名称：
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
        </div>
            </div>

        <div class="draw-btn">
            搜索范围：
            <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
            <div class="draw-btn">
                搜索范围：
                <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>
@@ -156,7 +156,7 @@
            defaultExpandedKeys: [],
            searchLazyFlag: true,
            searchTreeData: [],
            drawPlotData:{},
            drawPlotData: {},
        }
    },

@@ -234,12 +234,12 @@

        drawDialogBeforeClose () {
            this.drawName = ''
            if(drawPlotLayers!=null){
            if (drawPlotLayers != null) {
                drawPlotLayers.clear()
            }
            this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
            this.drawDialogVisible = false
        },
@@ -300,9 +300,9 @@
        removeDrawLayer () {
            this.inputpopup = false
            this.monitoringList = this.monitoringSaveList
            if(drawPlotLayers!=null){
            if (drawPlotLayers != null) {
                drawPlotLayers.clear()
            }  
            }
            this.drawPlotData = []
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'monitoringLayers',
@@ -332,24 +332,24 @@

        getRegionList (type, data) {
            let positionStr = ''
            if(type == 'polyline'){
               data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               console.log('positionStr',positionStr);
               let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
               let polygon = new global.DC.Polygon(coords)
               let position = ''
               polygon._positions.forEach(item => {
                   position += item._lng + ',' + item._lat + ';'
               })
               position += polygon._positions[0]._lng +',' + polygon._positions[0]._lat+ ';'
               positionStr = position
            }else{
                data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
            if (type == 'polyline') {
                data._positions.forEach(item => {
                    positionStr = positionStr + item._lng + ',' + item._lat + ';'
                })
                console.log('positionStr', positionStr)
                let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
                let polygon = new global.DC.Polygon(coords)
                let position = ''
                polygon._positions.forEach(item => {
                    position += item._lng + ',' + item._lat + ';'
                })
                position += polygon._positions[0]._lng + ',' + polygon._positions[0]._lat + ';'
                positionStr = position
            } else {
                data._positions.forEach(item => {
                    positionStr = positionStr + item._lng + ',' + item._lat + ';'
                })
                positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
            }
            getRegionList({
                page: 1,
@@ -405,7 +405,7 @@
                if (this.drawType == 1) {
                    // 获取线坐标
                    this.drawPlotData._positions.forEach(item => {
                        drawPositionStr += item._lng + ' ' + item._lat+ ','
                        drawPositionStr += item._lng + ' ' + item._lat + ','
                    })
                    drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                    // 求线长度
@@ -427,17 +427,17 @@
                    this.drawPlotData._positions.forEach(item => {
                        polygonPosition.push([item._lng, item._lat])
                    })
                    polygonPosition.push([this.drawPlotData._positions[0]._lng,this.drawPlotData._positions[0]._lat])
                    let polygon = this.$turf.polygon([polygonPosition]);
                    let area = this.$turf.area(polygon);
                    polygonPosition.push([this.drawPlotData._positions[0]._lng, this.drawPlotData._positions[0]._lat])
                    let polygon = this.$turf.polygon([polygonPosition])
                    let area = this.$turf.area(polygon)
                    extent = area.toFixed(3)
                }
                console.log({type:this.drawType, position:drawPositionStr, name:this.drawName, extent: extent,width:this.range},5555,this.drawPlotData._positions);
                this.insertRegionSaveList({type:this.drawType, positions:drawPositionStr, name:this.drawName, extent: extent,width:this.range})
                console.log({ type: this.drawType, position: drawPositionStr, name: this.drawName, extent: extent, width: this.range }, 5555, this.drawPlotData._positions)
                this.insertRegionSaveList({ type: this.drawType, positions: drawPositionStr, name: this.drawName, extent: extent, width: this.range })
                this.drawDialogVisible = false
                this.drawName = ''
                if(drawPlotLayers!=null) {
                   drawPlotLayers.clear()
                if (drawPlotLayers != null) {
                    drawPlotLayers.clear()
                }
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
@@ -448,7 +448,7 @@

        // 取消绘制线面
        cancelSaveDrawInfo () {
            this.drawDialogBeforeClose () 
            this.drawDialogBeforeClose()
        },

        // type线面类型, positions坐标, name名称, width线宽度, extent线长度或面面积
@@ -626,7 +626,8 @@
                    lat: node.latitude,
                    alt: 1,
                    text: node.name
                }
                },
                incident: this.siteClick
            })

            this.$EventBus.$emit('layerPointAdd', {