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

guanqb

2023-01-11 a3c659fc5f9640743180d37e0a691b7fc1baa24b

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

 src/api/home/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 14:19:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-10 16:34:03
 * @LastEditTime: 2023-01-11 11:41:50
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -104,3 +104,15 @@
        }
    })
}

// 获取设备分页数据 
export const getEquipmentPaging = (params) => {
    return request({
        url: `/device/query/devices/36110000002009999000/channelsCar`,
        method: 'get',
        requestBaseUrl: 'outside',
        params: {
            ...params
        }
    })
}

 src/api/video/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-15 15:10:41
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-06 17:15:39
 * @LastEditTime: 2023-01-11 11:29:09
 * @FilePath: \srs-police-affairs\src\api\video\index.js
 * @Description: 
 * 
@@ -35,12 +35,13 @@

/**
 * 获取视频播放网址 
 * @param {*} equipmentNumber 设备编号
 * @param {*} channelId 通道编号
 * @returns 
 */
export const getDevices = (equipmentNumber, channelId) => {
export const getDevices = (channelId) => {
    return request({
        url: `/play/start/${equipmentNumber}/${channelId}`,
        // 内网使用地址，外网把36110000002009999000更换掉
        url: `/play/start/36110000002009999000/${channelId}`,
        method: 'get',
        requestBaseUrl: 'outside'
    })

 src/styles/base/index.scss

@@ -90,8 +90,8 @@
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 720px;
        height: 480px;
        width: 1000px;
        height: 620px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

 src/styles/media/index.scss

@@ -1822,13 +1822,8 @@
                        }

                        .el-dialog {
                            width: countSizeVw(720, 1920);
                            height: countSizeVh(480);
                        }

                        .el-dialog .el-dialog__body {
                            height: countSizeVh(450);
                            padding: countSizeVh(6);
                            width: countSizeVw(1000, 1920);
                            height: countSizeVh(620);
                        }
                    }


 src/styles/scssFile.scss

@@ -6,10 +6,9 @@

$tree-search-bg-color: rgba(35, 50, 167, 0.75);

$el-dialog-bg-color: $bg-one-color;
$el-dialog-bg-color: rgba(35, 50, 167, 1);

$select-box-bg-color: $bg-one-color;


$sub-tab-bg-color: linear-gradient(to bottom, rgba(2, 27, 121, .8), rgba(5, 117, 230, .8));


 src/views/home/components/bottomContainer.vue

@@ -67,28 +67,29 @@
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column prop="index" label="序号" min-width="6%"></el-table-column>
                    <el-table-column prop="JJDWMC" label="接警单位" min-width="12.6%"></el-table-column>
                    <el-table-column prop="JJYXM" label="接警员" min-width="7.6%"></el-table-column>
                    <el-table-column label="接警时间" min-width="9.6%">
                    <el-table-column :show-overflow-tooltip="true" prop="index" label="序号"
                        min-width="6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
                        min-width="12.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="接警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span :title="scope.row.JJSJ">{{ scope.row.JJSJ.substring(0, 10) }}</span>
                            <span>{{ scope.row.JJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BJRXM" label="报警人" min-width="7.6%"></el-table-column>
                    <el-table-column prop="LXDH" label="联系电话" min-width="10%"></el-table-column>
                    <el-table-column label="报警内容" min-width="12%">
                        <template slot-scope="scope">
                            <span :title="scope.row.BJNR">{{ scope.row.BJNR }}</span>
                        </template>
                    <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
                        min-width="10%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容" min-width="12%">
                    </el-table-column>
                    <el-table-column label="事发地址" min-width="12%">
                        <template slot-scope="scope">
                            <span :title="scope.row.SFDZ">{{ scope.row.SFDZ }}</span>
                        </template>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址" min-width="12%">
                    </el-table-column>
                    <el-table-column prop="BJLX" label="报警类型" min-width="8%"></el-table-column>
                    <el-table-column prop="MEMO" label="备注" min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
                        min-width="8%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"
                        min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">

 src/views/home/components/rightContainer.vue

@@ -100,12 +100,14 @@
</template>

<script>
const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

let equipmentmyChart
let eventchangemychart
let timer
let equimentDataLength = 0

import carArr from '@/assets/data/equimentsDate/car.js'
import phoneArr from '@/assets/data/equimentsDate/phone.js'
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'
@@ -147,15 +149,6 @@
            },
            regionTotal: 0,
            linetype: 0,
            timetype: 0,
            policeName: '全部',
            phoneNewArr: [],
            carNewArr: [],
            recorderNewArr: [],
            workingSaveArr: [],
            faultSaveArr: [],
            workingNewArr: [],
            faultNewArr: [],
            tableHeight: 0,
            schedulingList: [],

@@ -173,8 +166,6 @@

        this.defaultDate()

        this.workingSaveArr = this.workingSaveArr.concat(this.getEquimentChartStateData(phoneArr).workingArr).concat(this.getEquimentChartStateData(carArr).workingArr).concat(this.getEquimentChartStateData(recorderArr).workingArr)
        this.faultSaveArr = this.faultSaveArr.concat(this.getEquimentChartStateData(phoneArr).faultArr).concat(this.getEquimentChartStateData(carArr).faultArr).concat(this.getEquimentChartStateData(recorderArr).faultArr)
        this.getSchedulingList()
    },

@@ -377,8 +368,6 @@

        // 现有设备统计
        getEquipment () {
            const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
            const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            const typeData = {
                carCount: '警车',
                monitorCount: '摄像头',
@@ -386,13 +375,19 @@
                phoneCount: '手持记录仪'
            }

            let data = []
            this.regionTotal = 0

            const dataAll = getEquipment().then(res => {
                let data = []

                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {

                        this.regionTotal += item.count

                        return {
                            type: item.type,
                            equimentType: item.type == '车辆' ? 0 : 1,
                            name: item.type,
                            value: item.count,
                            working: item.online,
                            fault: item.offline,
@@ -400,12 +395,16 @@
                        }
                    })

                    equimentDataLength = data.length

                    return data
                } else {
                    let normalData = { value: 0, name: '正常', color: '#4caf50', label: { color: oneColor[0] } }
                    let faultData = { value: 0, name: '故障', color: '#ffd600', label: { color: oneColor[2] } }
                    let normalData = { value: 0, name: '正常', color: '#4caf50', online: true, label: { color: oneColor[0] } }
                    let faultData = { value: 0, name: '故障', color: '#ffd600', online: false, label: { color: oneColor[2] } }

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

                        normalData.value += item.online

                        for (let key in typeData) {
@@ -418,7 +417,11 @@
                        faultData.value += item.offline
                    })

                    return [normalData, faultData]
                    data = [normalData, faultData]

                    equimentDataLength = data.length

                    return data
                }
            })

@@ -434,6 +437,7 @@
            equipmentmyChart.setOption(this.initEquipmentOptions(data), true)
        },

        // 现有设备饼图初始化
        async initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            equipmentmyChart = this.$echarts.init(chartDom)
@@ -445,6 +449,7 @@
            this.equipmentEchartsCarousel()
        },

        // 现有设备options饼图数据
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
@@ -452,8 +457,18 @@
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if ('carCount' in params.data) {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                            tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
                            <br />
                            <strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong>
                            <br />
                            <span style="color:#5470c6">警车：${params.data.carCount}台</span>
                            <br />
                            <span style="margin-left:10px;color:#91cc75">摄像头：${params.data.monitorCount}台</span>
                            `
                        } else {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#ccc">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#ccc">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                        }
@@ -543,8 +558,8 @@
            }
        },

        // 饼图轮播
        equipmentEchartsCarousel () {
            let dataLen = this.getEquimentChartData(this.policeName).length
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
@@ -552,7 +567,7 @@

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                curIndex = (curIndex + 1) % dataLen
                curIndex = (curIndex + 1) % equimentDataLength
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
@@ -580,7 +595,7 @@
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                    curIndex = (curIndex + 1) % dataLen
                    curIndex = (curIndex + 1) % equimentDataLength
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    })
@@ -591,197 +606,14 @@
        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
                // 设备类型，监控弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                this.$emit('showequimentdetail', params.name, false, true, [false, false, false], [])
                if (params.name == '摄像头') {
                    this.$emit('showequimentdetail', params.name, true, false, [false, false, false], [])
                } else if (params.name == '手台') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, true], this.phoneNewArr)
                } else if (params.name == '车辆') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, true, false], this.carNewArr)
                } else if (params.name == '执法记录仪') {
                    this.$emit('showequimentdetail', params.name, false, true, [true, false, false], this.recorderNewArr)
                } else if (params.name == '正常') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.workingNewArr)
                } else if (params.name == '故障') {
                    this.$emit('showequimentdetail', params.name, false, true, [false, false, false, true], this.faultNewArr)
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if (params.equimentType) {
                    this.$emit('showequimentdetail', params.name, params.equimentType, 'type')
                } else {
                    this.$emit('showequimentdetail', params.name, params.equimentType, 'online')
                }
            })
        },

        selectPoliceChangeEquimentData (police) {
            // if (police != '全部') {
            //     let arr1 = []
            //     let arr2 = []
            //     underwayArr.some(item => {
            //         if (item.policeStationName == police) {
            //             arr1.push(item)
            //         }
            //     })
            //     this.underwayArr = arr1
            //     historyArr.some(item => {
            //         if (item.policeStationName == police) {
            //             arr2.push(item)
            //         }
            //     })
            //     this.historyArr = arr2
            // } else {
            //     this.underwayArr = underwayArr
            //     this.historyArr = historyArr
            // }
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
            this.policeName = police
        },

        getEquimentDataCountandArr (data, policeStationName) {
            let count = 0
            let arr = []
            let obj = {}
            data.some(item => {
                if (item.policeStation == policeStationName) {
                    count = Number(count) + 1
                    arr.push(item)
                }
            })
            obj = { 'count': count, 'arr': arr }
            return obj
        },

        getEquimentChartData (policeStationName) {
            const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
            const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            let dataArr = []
            let phoneCount = 0
            let carCount = 0
            let recorderCount = 0
            let monitorCount = 0
            // 设备种类
            this.phoneNewArr = []
            this.carNewArr = []
            this.recorderNewArr = []
            // 设备状态
            this.workingNewArr = []
            this.faultNewArr = []
            let phoneState = {}
            let carState = {}
            let recorderState = {}
            let monitorState = { 'working': 7, 'fault': 3 }

            if (policeStationName == '全部') {
                phoneCount = phoneArr.length
                this.phoneNewArr = phoneArr
                carCount = carArr.length
                this.carNewArr = carArr
                recorderCount = recorderArr.length
                this.recorderNewArr = recorderArr
                monitorCount = 10
                this.workingNewArr = this.workingSaveArr
                this.faultNewArr = this.faultSaveArr
            } else {
                this.phoneNewArr = this.getEquimentDataCountandArr(phoneArr, policeStationName).arr
                phoneCount = this.getEquimentDataCountandArr(phoneArr, policeStationName).count
                this.carNewArr = this.getEquimentDataCountandArr(carArr, policeStationName).arr
                carCount = this.getEquimentDataCountandArr(carArr, policeStationName).count
                this.recorderNewArr = this.getEquimentDataCountandArr(recorderArr, policeStationName).arr
                recorderCount = this.getEquimentDataCountandArr(recorderArr, policeStationName).count
                monitorCount = 10
                this.workingNewArr = this.getEquimentDataCountandArr(this.workingSaveArr, policeStationName).arr
                this.faultNewArr = this.getEquimentDataCountandArr(this.faultSaveArr, policeStationName).arr
            }
            phoneState = this.getEquimentChartStateData(this.phoneNewArr)
            carState = this.getEquimentChartStateData(this.carNewArr)
            recorderState = this.getEquimentChartStateData(this.recorderNewArr)
            if (this.linetype == 0) {
                dataArr = [
                    { value: carCount, name: '车辆', working: carState.working, fault: carState.fault, label: { color: twoColor[0] } },
                    { value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, label: { color: twoColor[1] } },
                    { value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, label: { color: twoColor[2] } },
                    { value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, label: { color: twoColor[3] } },
                ]
                this.regionTotal = phoneCount + monitorCount + carCount + recorderCount
            } else {
                let workingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).workingObj
                let faultObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).faultObj
                dataArr = [
                    { value: workingObj.total, name: '正常', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount, color: '#4caf50', label: { color: oneColor[0] } },
                    { value: faultObj.total, name: '故障', carCount: faultObj.carCount, monitorCount: faultObj.monitorCount, recorderCount: faultObj.recorderCount, phoneCount: faultObj.phoneCount, color: '#ffd600', label: { color: oneColor[2] } },
                ]
                this.regionTotal = workingObj.total + faultObj.total
            }
            return dataArr
        },

        getEquimentChartStateData (newArr) {
            let working = 0
            let fault = 0
            let workingArr = []
            let faultArr = []

            newArr.forEach(item => {
                for (let p in item) {
                    if (p.indexOf('ID') != -1) {
                        item['id'] = item[p]
                    }
                }
                if (item.state == '正常') {
                    working++
                    workingArr.push(item)
                } else if (item.state == '故障') {
                    fault++
                    faultArr.push(item)
                }
            })
            return { 'working': working, 'fault': fault, 'workingArr': workingArr, 'faultArr': faultArr }
        },

        getEquimentChartTypeData (phoneState, carState, recorderState, monitorState) {
            let workingObj = {}
            let faultObj = {}
            let maintainObj = {}
            let disableObj = {}
            let sealingObj = {}

            workingObj.phoneCount = phoneState.working
            workingObj.carCount = carState.working
            workingObj.recorderCount = recorderState.working
            workingObj.monitorCount = monitorState.working
            workingObj.total = monitorState.working + recorderState.working + carState.working + phoneState.working

            faultObj.phoneCount = phoneState.fault
            faultObj.carCount = carState.fault
            faultObj.recorderCount = recorderState.fault
            faultObj.monitorCount = monitorState.fault
            faultObj.total = monitorState.fault + recorderState.fault + carState.fault + phoneState.fault

            maintainObj.phoneCount = phoneState.maintain
            maintainObj.carCount = carState.maintain
            maintainObj.recorderCount = recorderState.maintain
            maintainObj.monitorCount = monitorState.maintain
            maintainObj.total = monitorState.maintain + recorderState.maintain + carState.maintain + phoneState.maintain

            disableObj.phoneCount = phoneState.disable
            disableObj.carCount = carState.disable
            disableObj.recorderCount = recorderState.disable
            disableObj.monitorCount = monitorState.disable
            disableObj.total = monitorState.disable + recorderState.disable + carState.disable + phoneState.disable

            sealingObj.phoneCount = phoneState.sealing
            sealingObj.carCount = carState.sealing
            sealingObj.recorderCount = recorderState.sealing
            sealingObj.monitorCount = monitorState.sealing
            sealingObj.total = monitorState.sealing + recorderState.sealing + carState.sealing + phoneState.sealing

            return { 'workingObj': workingObj, 'faultObj': faultObj, 'maintainObj': maintainObj, 'disableObj': disableObj, 'sealingObj': sealingObj }
        },

        // activityRowClick (row) {
        //     this.$EventBus.$emit('toPosition', {
        //         layerName: 'activityLayers',
        //         siteJd: Number(row.position[0]),
        //         siteWd: Number(row.position[1])
        //     })
        // },

    },

    destroyed () {

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-10 16:36:57
 * @LastEditTime: 2023-01-11 17:21:27
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -11,30 +11,17 @@

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

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

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

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -52,120 +39,30 @@
            <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
            <div class="layers-control-btn activity">
                <el-checkbox v-model="activityLayerShow" @change="activityChange">活动</el-checkbox>
            </div>
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
        </div>

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

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

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

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

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

        <el-dialog
            :title="activityTitle"
            :modal="true"
            :visible.sync="activityVisible"
            :before-close="activityBeforeClose"
            :close-on-click-modal="true"
            class="activity-details-box"
        >
            <div class="item">
                <div>活动名称:</div>
                <div>{{ activityDetailArr.activityName }}</div>
            </div>
            <div class="item">
                <div>开始时间:</div>
                <div>{{ activityDetailArr.startTime }}</div>
            </div>
            <div class="item">
                <div>结束时间:</div>
                <div>{{ activityDetailArr.endTime }}</div>
            </div>
            <div class="item">
                <div>规模:</div>
                <div>{{ activityDetailArr.scale }}</div>
            </div>
            <div class="item">
                <div>所属派出所:</div>
                <div>{{ activityDetailArr.policeStationName }}</div>
            </div>
            <div class="item">
                <div>坐标:</div>
                <div>{{ activityDetailArr.position }}</div>
            </div>
            <div class="item">
                <div>经度:</div>
                <div>{{ activityDetailArr.lng }}</div>
            </div>
            <div class="item">
                <div>纬度:</div>
                <div>{{ activityDetailArr.lat }}</div>
            </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 class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -184,14 +81,8 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
            <div class="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
@@ -210,75 +101,48 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
            <div class="equiment-detail">
                <div class="monitor" v-if="monitorContent">
                    <video
                        src="/video/sp.mp4"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        ref="videoElement"
                        style="object-fit: fill"
                    ></video>
                </div>
                <div class="others" v-if="othersContent">
                    <el-table
                        :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                <div class="others">
                    <el-table :data="equimentTableData" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                        <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                        <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                        <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                        <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
                        <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
                        <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
                        <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
                        <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                        <el-table-column prop="area" label="所属责任区"></el-table-column>
                        <el-table-column prop="state" label="状态"></el-table-column>
                        :row-class-name="tableRowClassName">
                        <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
                        <el-table-column prop="deviceId" label="设备编号"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <span>
                                    {{ scope.row.status == 0 ? '离线' : '在线' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="showArr.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="equimentPagingTotal"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="landDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -287,20 +151,11 @@
            </el-table>
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -311,23 +166,11 @@
            </el-table>
        </el-dialog>

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

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

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

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

        <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box">
            <video src="" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>
@@ -541,8 +385,12 @@
]
let timer = []

import flvjs from 'flv.js'
import axios from "axios"

import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'

import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
import monitoringList from '@/assets/data/monitoring.js'
@@ -553,7 +401,9 @@
import underwayArr from '@/assets/data/activitysData/underway.js'
import { getPoliceStationList } from "@/api/dept"
import { convertStringToList } from "@/utils/geometryStringTool"
import { getActAsPoliceList, getPoliceStationTree } from "@/api/home/index.js"

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

export default {
    data () {
@@ -563,18 +413,13 @@
            phoneLayerShow: false,
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            activityLayerShow: false,
            policeSituationLayerShow: false,
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
            panoramaVrUrl: '',
            activityTitle: '',
            equimentTitle: '',
            keyPersonTitle: '',
            landTitle: '',
            panoramaVisible: false,
            activityVisible: false,
            equimentVisible: false,
            keyPersonVisible: false,
            policeSituationVisible: false,
@@ -608,75 +453,23 @@
            areaChecked: '',
            areaOptions: [],
            housingOptions: [],
            jurisdictionData: [{
                label: '车站派出所',
                id: '2',
                children: [{
                    label: '责任区1',
                    id: '4',
                }, {
                    label: '责任区2',
                    id: '5',
                }]
            },
            {
                label: '沙溪派出所',
                id: '3',
                children: [{
                    label: '责任区1',
                    id: '6',
                }, {
                    label: '责任区2',
                    id: '7',
                }]
            },
            {
                label: '北门派出所',
                id: '8',
                children: [{
                    label: '责任区1',
                    id: '9',
                }, {
                    label: '责任区2',
                    id: '10',
                }]
            },
            {
                label: '灵溪派出所',
                id: '11',
                children: [{
                    label: '责任区1',
                    id: '12',
                }, {
                    label: '责任区2',
                    id: '13',
                }]
            },
            {
                label: '江光派出所',
                id: '14',
                children: [{
                    label: '责任区1',
                    id: '15',
                }, {
                    label: '责任区2',
                    id: '16',
                }]
            }],

            defaultProps: {
                children: 'children',
                label: 'label'
            },
            monitorContent: false,
            othersContent: false,
            showArr: [],
            saveArr: [],
            carArrShow: false,
            phoneArrShow: false,
            recorderArrShow: false,
            stateArrShow: false,

            // 现有设备表格
            equimentTableData: [],
            equimentCurrentSelect: {},
            currentPage: 1,
            pagesize: 9,
            pagesize: 15,
            equimentPagingTotal: 0,

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

            landDetailArr: [],
            keyPersonDetailArr: [],
            timetype: 0,
@@ -686,7 +479,6 @@
            policeSituationHistoryType: 0,
            policeSituationDetailArr: {},
            CJdata: {},
            activityDetailArr: {},

        }
    },
@@ -704,7 +496,6 @@
        // this.getResidentialQuartersList('361102')

        this.$EventBus.$on('policeSituationSiteClick', (params) => {
            console.log(params)
            that.policeSituationSiteClick(params)
        })
        getPoliceStationTree(1).then(res => {
@@ -835,7 +626,6 @@
            this.$refs.leftContainer.selectPoliceChangeData(item.policeStationName)
            this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
            this.activityChange()
            this.$refs.bottomContainer.selectPoliceSituatiionArr(item.policeStationName)
            this.policeSituationChange()

@@ -974,68 +764,7 @@
            }
        },

        activityChange () {
            this.activitySelectChange()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'activityLayers',
                type: 'ClusterLayer'
            })
            if (this.activityLayerShow == true) {
                this.activityList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'activityLayers',
                        type: "billboard",
                        layerType: 'ClusterLayer',
                        params: item,
                        incident: this.activitySiteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'activityLayers',
                    type: 'ClusterLayer'
                })
            }
        },

        activitySelectChange () {
            let showArr = []
            if (this.policeStaionChecked && this.policeStaionChecked.policeStationName != '全部') {
                let arr1 = []
                let arr2 = []
                underwayArr.some(item => {
                    if (item.policeStationName == this.policeStaionChecked.policeStationName) {
                        arr1.push(item)
                    }
                })
                this.underwayArr = arr1
                historyArr.some(item => {
                    if (item.policeStationName == this.policeStaionChecked.policeStationName) {
                        arr2.push(item)
                    }
                })
                this.historyArr = arr2

            } else {
                this.underwayArr = underwayArr
                this.historyArr = historyArr
            }
            if (this.activityType == 0) {
                showArr = this.underwayArr
            } else {
                showArr = this.historyArr
            }
            showArr.forEach((item, index) => {
                item.name = `${index + 1}号活动`
                item.lng = `${Number(item.position[0])}`
                item.lat = `${Number(item.position[1])}`
                item.alt = 100
                item.url = '/img/icon/activity.png'
            })
            this.activityList = showArr
        },

        policeSituatifonChange () {
        policeSituationChange () {
            this.policeSituationSelectChange()
            circleLayer.clear()
            circleLayer.remove()
@@ -1089,30 +818,18 @@
        },

        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

            if (this.$refs.videoElement && this.$refs.videoElement != null) {
                this.$refs.videoElement.currentTime = 0
                this.$refs.videoElement.play()
            }
            this.dialogEquimentVideoTitle = e.overlay.attrParams.name
            this.dialogEquimentVideoVisible = true
        },

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

        panoramaSiteClick (e) {
            this.panoramaTitle = e.overlay.attrParams.name
            this.panoramaVrUrl = e.overlay.attrParams.vrUrl
            this.panoramaVisible = true
        },

        activitySiteClick (e) {
            this.activityTitle = e.overlay.attrParams.name
            this.activityVisible = true
            this.activityDetailArr = e.overlay.attrParams
        },

        phoneSiteClick (e) {
@@ -1370,137 +1087,6 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        jurisdictionNodeClick (nodeObj) {
            this.currentPage = 1
            if (nodeObj.id == 1) {
                this.showArr = this.saveArr
            } else if (nodeObj.id == 2) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '车站派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 3) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '沙溪派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 4) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '车站派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 5) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '车站派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 6) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '沙溪派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 7) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '沙溪派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 8) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 9) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 10) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '北门派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 11) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 12) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 13) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '灵溪派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 14) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所') {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 15) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所' && item.area == "责任区1") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            } else if (nodeObj.id == 16) {
                let arr = []
                this.saveArr.some((item) => {
                    if (item.policeStation == '江光派出所' && item.area == "责任区2") {
                        arr.push(item)
                    }
                })
                this.showArr = arr
            }
        },

        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },

        showpeopledetail (name) {
            this.peopleTitle = name
            this.peopleVisible = true
@@ -1512,30 +1098,100 @@
            this.landDetailArr = arr
        },

        showequimentdetail (name, monitor, others, booleans, arr) {
            this.equimentVisible = true
        // 获取设备分页数据
        getEquipmentPaging (params) {
            this.equimentTableData = []
            this.equimentPagingTotal = 0

            getEquipmentPaging({ page: this.currentPage, count: this.pagesize, ...params }).then(res => {
                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list

                    this.equimentPagingTotal = res.data.data.total
                } else {
                    this.equimentTableData = []

                    this.equimentPagingTotal = 0
                }
            })
        },
        // 设备分页查询
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage

            this.getEquipmentPaging(this.equimentCurrentSelect)
        },

        // 显示现有列表表格数据
        async showequimentdetail (name, typeVale, type) {
            this.equimentTitle = name
            this.monitorContent = monitor
            this.othersContent = others
            this.recorderArrShow = booleans[0]
            this.carArrShow = booleans[1]
            this.phoneArrShow = booleans[2]
            this.stateArrShow = booleans[3]
            this.saveArr = arr
            this.showArr = arr
            // 动态改变树形控件数据
            if (this.policeStationCheckValue != '请选择派出所' && this.policeStationCheckValue != '全部') {
                this.jurisdictionData = [this.searchName(this.policeStationCheckValue, treeData)]
                let arr1 = []
                this.saveArr.some((item1) => {
                    if (item1.policeStation == this.policeStationCheckValue) {
                        arr1.push(item1)
                    }
                })
                this.showArr = arr1
            } else {
                this.jurisdictionData = treeData

            this.equimentCurrentSelect = {
                type: typeVale
            }

            let obj = {}

            obj[type] = typeVale

            await this.getEquipmentPaging(obj)

            this.equimentVisible = true
        },

        // 设备的视频播放
        async play (row) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogEquimentVideoTitle = row.name


            let flvUrl = ''

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

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

                return
            }

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

            this.dialogEquimentVideoVisible = true
        },

        async getDevices (channelId) {
            let flvAddress = ''

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

            return flvAddress
        },

        showkeypersondetail (name, arr) {
@@ -1614,6 +1270,12 @@
            })
        },

        indexMethod (index) {
            setTimeout(() => {
                console.log(index, 5000)
            })
            return index + 1
        }
    },

    destroyed () {
@@ -1849,12 +1511,6 @@
    .equiment-detail {
        height: 540px;
        width: 100%;

        .monitor {
            width: 100%;
            height: 540px;
            background-color: #fff;
        }

        .others {
            width: 100%;

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-26 09:17:46
 * @LastEditTime: 2023-01-11 17:09:36
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -16,48 +16,25 @@
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>-->

                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="click"
                    :visible-arrow="false"
                    popper-class="tree-search-popup"
                >
                <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false"
                    popper-class="tree-search-popup">
                    <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input>

                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :data="testData"
                        :props="defaultProps"
                        ref="popupTree"
                        @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll"
                        :accordion="accordion"
                        :highlight-current="highlightCurrent"
                        :expand-on-click-node="true"
                        check-strictly
                        :filter-node-method="filterNode"
                    ></el-tree>
                    <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box"
                        :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll" :accordion="accordion"
                        :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly
                        :filter-node-method="filterNode"></el-tree>
                </el-popover>

                <el-input
                    slot="reference"
                    v-model="prop"
                    v-popover:popover
                    :readonly="true"
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
                <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件"
                    style="cursor: pointer;"></el-input>
            </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>

@@ -91,48 +68,17 @@
                </div>

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

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

                    <div class="floor-content" v-show="subNavType == 1">
@@ -143,26 +89,17 @@
                            <div class="build-outBox" ref="BuildOutBox">
                                <div class="build-box" style="left: 0px;">
                                    <!-- :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }" -->
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index"
                                    >
                                        <div
                                            v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index"
                                            @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }"
                                            :title="item.name"
                                        >{{item.name}}</div>
                                    <div class="ridgepole-list" v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index">
                                        <div v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index" @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }" :title="item.name">
                                            {{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i
                                    v-show="buildingList.length > 10 && nextBtnShow"
                                    class="el-icon-caret-right"
                                ></i>
                                <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                            </div>
                        </div>

@@ -243,19 +180,9 @@
                            <div class="condo">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select
                                        size="small"
                                        v-model="unitValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in unitOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            class="unit-option"
                                        ></el-option>
                                    <el-select size="small" v-model="unitValue" placeholder="请选择" @change="chooseUnit">
                                        <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                            :value="item.value" class="unit-option"></el-option>
                                    </el-select>
                                </div>
                            </div>
@@ -309,41 +236,29 @@
                                </div>
                                <div class="floor-box">
                                    <div class="floor-num" style="left: 0">
                                        <div
                                            :class="{ on: floorsType == index }"
                                            @click="floorsType = index"
                                            v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                            :key="index"
                                        >
                                            {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{ unitHouseChoosed[index *
                                            5
                                            - 1] ? unitHouseChoosed[index * 5
                                            - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                        <div :class="{ on: floorsType == index }" @click="floorsType = index"
                                            v-for="index in Math.ceil(unitHouseChoosed.length / 5)" :key="index">
                                            {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                                unitHouseChoosed[index *
                                                    5
                                                    - 1]? unitHouseChoosed[index * 5
                                                        - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                            }}层
                                        </div>
                                    </div>
                                </div>
                                <div
                                    @click="nextFloorBtn"
                                    class="floorBtn rightFloorBtn"
                                    v-show="nextFloorShow"
                                >
                                <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </div>

                            <div class="floor-detail">
                                <div
                                    v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index"
                                >
                                <div v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index">
                                    <div class="title">{{ item.floor_num }}层：</div>
                                    <div class="detail">
                                        <div
                                            v-for="(value, index) in item.floor_house"
                                            :key="index"
                                            @click="residentDetailsClick(value)"
                                        >
                                        <div v-for="(value, index) in item.floor_house" :key="index"
                                            @click="residentDetailsClick(value)">
                                            <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                            {{ value.house_num }}
                                            <!-- <div class="flow"></div>
@@ -357,60 +272,36 @@
                    </div>

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

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

                    <div class="business-content" v-show="subNavType == 4">
                        <el-table
                            :data="businessData"
                            style="width: 100%"
                        <el-table :data="businessData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName"
                            @row-click="(row) => deepDataRowClick('business', row)"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
@@ -418,14 +309,10 @@
                </div>

                <div class="police-info" v-show="navType == 1">
                    <el-table
                        :data="arr"
                        style="width: 100%"
                    <el-table :data="arr" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -433,14 +320,10 @@
                </div>

                <div class="warning-info" v-show="navType == 2">
                    <el-table
                        :data="warningArray"
                        style="width: 100%"
                    <el-table :data="warningArray" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -450,13 +333,8 @@
        </div>
        <!-- <transition name="special-animal"></transition>-->
        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <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>
@@ -464,21 +342,12 @@
        </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 @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
            </div>
        </div>
        <el-dialog
            title="信息详情"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
        <el-dialog title="信息详情" :modal="false" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
            <div class="item">
                <div>名称：</div>
                <div>{{ JWdetails.name }}</div>
@@ -513,21 +382,12 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="residentDetailsTitle"
            :modal="false"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
        <el-dialog :title="residentDetailsTitle" :modal="false" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
            <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
            <el-table
                :data="houseDate.householdsDate"
            <el-table :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="peopleType" label="重点人员"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
@@ -552,20 +412,11 @@
            </el-table>-->
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
        <el-dialog :title="keyPersonTitle" :modal="false" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -763,7 +614,13 @@
            searchExtensivelyValue: '',
            isShowClearBtn: false,
            parkingLotData: [],
            comeOutData: [],
            comeOutData: [
                { name: 123, date: 555 },
                { name: 2, date: 5535 },
                { name: 123, date: 54255 },
                { name: 123, date: 542555 },
                { name: 112323, date: 555 },
            ],
            businessData: [],
            keyPersonTitle: '人员详情',
            keyPersonVisible: false,
@@ -1194,13 +1051,13 @@
            this.searchExtensivelyChange()
        },

        deepDataRowClick (param1, row) {
        deepDataRowClick (row, params) {
            let url = ''
            if (param1 == 'comeOut') {
            if (params == 'comeOut') {
                url = '/img/icon/bubble.png'
            } else if (param1 == 'park') {
            } else if (params == 'park') {
                url = '/img/icon/p-biao.png'
            } else if (param1 == 'business') {
            } else if (params == 'business') {
                url = '/img/icon/business.png'
            }
            this.$EventBus.$emit('mapClearLayer', {
@@ -1330,7 +1187,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -1365,11 +1222,9 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(
                            135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%)
                        );
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        z-index: -1;
                    }
                }
@@ -1380,7 +1235,7 @@
                }

                .housing-introduce {
                    & > div {
                    &>div {
                        padding: 0 10px;
                        display: flex;

@@ -1443,7 +1298,7 @@
                    }
                }

                & > .floor-content {
                &>.floor-content {
                    background: rgba(8, 56, 185, 0.5);

                    .build-info {
@@ -1494,7 +1349,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    & > div {
                                    &>div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
@@ -1524,11 +1379,12 @@
                            // border-bottom: 1px solid #33566c;
                            margin-left: 10px;
                        }

                        .content {
                            background: rgba(8, 56, 185, 0.5);
                            display: flex;

                            & > div {
                            &>div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1536,10 +1392,11 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                & > div {
                                &>div {
                                    cursor: pointer;
                                }
                                & > div:last-child {

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

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

                            & > div:last-child {
                            &>div:last-child {
                                border: none;
                            }
                        }
@@ -1561,6 +1418,7 @@
                        .title {
                            margin-left: 10px;
                        }

                        .content {
                            .one div {
                                cursor: pointer;
@@ -1577,10 +1435,10 @@
                                display: flex;
                                justify-content: space-around;

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

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

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

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

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1660,12 +1519,12 @@
                                display: flex;
                                flex: 1;

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

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

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

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

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

                                    & > div {
                                    &>div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -1795,33 +1654,29 @@
                                        }

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

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

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

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

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

                                    & > .shangye {
                                    &>.shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -1835,6 +1690,7 @@
                .business-content {
                    height: 380px;
                }

                :deep(.el-table td.el-table__cell div) {
                    overflow: hidden;
                    white-space: nowrap;
@@ -1893,6 +1749,7 @@
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
@@ -1933,7 +1790,7 @@
        border-radius: 10px;
        overflow: hidden;

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

@@ -1963,11 +1820,9 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}


 src/views/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-12-29 16:23:30
 * @LastEditTime: 2023-01-11 15:31:39
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -14,49 +14,29 @@
        <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 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>

            <div class="list-show" ref="tableBox" v-show="!detailFlag">
                <div class="search-box" ref="tableSearchBox">
                    资源名称：
                    <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
                        @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 class="list" v-show="navType == 1">
                    <el-table
                        :data="carList"
                    <el-table :data="carList"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column>
                        <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="25%">
@@ -67,28 +47,13 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <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>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -96,31 +61,20 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="carPagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="carPagesCount" :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' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column
                            prop="name"
                            label="名称"
                            min-width="25%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
                            <template slot-scope="scope">
@@ -130,28 +84,13 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <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>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -159,32 +98,20 @@
                    </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)"
                    <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
                            prop="name"
                            label="名称"
                            min-width="40%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="40%"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="20%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="15%">
                            <template slot-scope="scope">
@@ -194,28 +121,13 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <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>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -223,32 +135,20 @@
                    </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>
                        <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)"
                    <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
                            prop="name"
                            label="名称"
                            min-width="25%"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
                            <template slot-scope="scope">
@@ -258,28 +158,13 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <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>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -287,15 +172,9 @@
                    </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>
                        <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>
@@ -327,16 +206,9 @@
                        <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>
                                <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>

@@ -369,15 +241,9 @@
                        <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>

@@ -390,13 +256,8 @@
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <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>
@@ -404,41 +265,19 @@
        </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 @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
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>

        <el-dialog
            :title="phoneTitle"
            :modal="false"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
        <el-dialog :title="phoneTitle" :modal="false" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -661,10 +500,17 @@
            this.dialogTitle = row.name
            this.dialogVisible = true
            let flvUrl = ''
            await this.getDevices(row.deviceId, row.channelId).then(res => {
            await this.getDevices(row.channelId).then(res => {
                flvUrl = res
            })
            if (flvjs.isSupported() && flvUrl != 'nodata') {

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

                return
            }

            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
@@ -676,15 +522,17 @@
                this.flvPlayer.load()
                this.flvPlayer.play()
            }

            this.dialogVisible = true
        },

        async getDevices (id, channelId) {
        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(id, channelId).then(res => {
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = 'nodata'
                    flvAddress = res.data
                }
            })
            return flvAddress
@@ -1060,7 +908,7 @@
            align-items: center;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -1129,7 +977,7 @@
                border-radius: 10px;
                overflow-y: auto;

                & > div {
                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -1219,18 +1067,18 @@
                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;
                    }
                }
@@ -1291,6 +1139,7 @@
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
@@ -1331,7 +1180,7 @@
        border-radius: 10px;
        overflow: hidden;

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


 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: 2022-12-19 17:32:25
 * @LastEditTime: 2023-01-11 15:46:01
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -14,12 +14,7 @@
        <div v-show="boxShow" class="container-content">
            <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>

@@ -37,57 +32,39 @@
                <button @click="changeRange" class="btn">确定</button>
            </div>
            <div v-show="searchValBoxShow" class="search-val-box">
                <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 class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table
                            :data="monitoringList"
                            style="width: 100%"
                        <el-table :data="monitoringList" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="35%"></el-table-column>
                            <el-table-column prop="pTZTypeText" label="设备类型" min-width="35%"></el-table-column>
                            <el-table-column prop="status" label="状态" min-width="30%">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="设备类型"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%">
                                <template slot-scope="scope">
                                    <div
                                        class="state-box"
                                        :class="{ online: scope.row.status == '1' }"
                                    ></div>
                                    <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="pagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="pagesCount" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <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>
@@ -95,39 +72,17 @@
        </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 @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
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
        </el-dialog>
        <el-dialog
            :title="drawDialogTitle"
            :modal="false"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
        <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
            <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
            <button @click="saveDrawInfo">保存</button>
        </el-dialog>
@@ -190,7 +145,6 @@
        getVideoList (current, size, name) {
            getVideoList(current, size, name).then(res => {
                this.pagesCount = res.data.data.pages
                console.log(res, 22222)
                this.monitoringList = res.data.data.list
                this.monitoringSaveList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
@@ -201,13 +155,13 @@
            })
        },

        async getDevices (id, channelId) {
        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(id, channelId).then(res => {
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = 'nodata'
                    flvAddress = res.data
                }
            })
            return flvAddress
@@ -254,12 +208,21 @@
            }

            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

            let flvUrl = ''
            await this.getDevices(e.overlay.attrParams.deviceId, e.overlay.attrParams.channelId).then(res => {

            await this.getDevices(e.overlay.attrParams.channelId).then(res => {
                flvUrl = res
            })
            if (flvjs.isSupported() && flvUrl != 'nodata') {

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

                return
            }


            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
@@ -271,6 +234,8 @@
                this.flvPlayer.load()
                this.flvPlayer.play()
            }

            this.dialogVisible = true
        },

        dialogBeforeClose () {
@@ -334,7 +299,6 @@


            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新lastEventData', lastEventData)
                this.drawInfo = lastEventData
                this.getRegionList(type, JSON.stringify(lastEventData))
            })
@@ -352,7 +316,6 @@
        // 修改范围
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新')
                this.drawInfo = lastEventData
                this.getRegionList('polyline', JSON.stringify(lastEventData))
            })
@@ -433,7 +396,6 @@
                    drawPositionStr += this.drawInfo.data[0].lng + ' ' + this.drawInfo.data[0].lat
                }

                console.log('参', drawPositionStr)
                this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName, drawPositionLineStr)
                this.drawDialogVisible = false
                this.drawName = ''
@@ -465,7 +427,6 @@
        },

        searchExtensivelyClick () {
            console.log(111)
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
@@ -652,7 +613,7 @@
            border-radius: 10px;
            overflow-y: auto;

            & > div {
            &>div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -726,7 +687,7 @@
        .list-show {
            flex: 1;

            & > div {
            &>div {
                height: 100%;
                display: flex;
                flex-direction: column;
@@ -795,6 +756,7 @@
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
@@ -835,7 +797,7 @@
        border-radius: 10px;
        overflow: hidden;

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


 src/views/video/region.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-28 10:22:01
 * @LastEditTime: 2023-01-11 15:34:00
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
@@ -173,7 +173,7 @@
let graphicLayer = null

export default {
    data() {
    data () {
        return {
            currentPage: 1,
            pagesize: 13,
@@ -234,12 +234,12 @@
        }
    },

    created() {
    created () {
        // this.getVideoList(1, 100)
        this.getRegionSaveList(this.currentPage, this.pagesize)
    },

    mounted() {
    mounted () {
        this.$parent.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
    },
@@ -294,7 +294,7 @@
        //     })
        // },

        playVideoList(flvItemPlayer, flvUrl, videoEleName) {
        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
@@ -317,14 +317,14 @@
            }
        },

        navClick(val, args) {
        navClick (val, args) {
            if (this.valChoosed == val && this.argsChoosed == args) return
            this.valChoosed = val
            this.argsChoosed = args
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
        },

        getRegionSaveList(current, size, name) {
        getRegionSaveList (current, size, name) {
            getRegionSaveList(current, size, name).then(res => {
                this.saveRangeList = res.data.data.records
                this.pagesCount = res.data.data.pages
@@ -332,7 +332,7 @@
            })
        },

        deleteRegionSaveList(id) {
        deleteRegionSaveList (id) {
            deleteRegionSaveList(id).then(res => {
                if (res.data.success) {
                    this.$message({
@@ -348,7 +348,7 @@
            })
        },

        flytoRange(data) {
        flytoRange (data) {
            this.$EventBus.$emit('flytoLayer', {
                polygonName: 'polygon' + data.id,
                duration: 3
@@ -356,7 +356,7 @@

        },

        initRangeListLayer() {
        initRangeListLayer () {
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'rangeLayer',
                type: 'VectorLayer'
@@ -385,7 +385,7 @@

        },

        convertPositionDate(data, type) {
        convertPositionDate (data, type) {
            let positionStr = data
            positionStr = data.slice(11, positionStr.length - 1)
            let positionArr = positionStr.split(",")
@@ -401,9 +401,9 @@
            return positionNewStr
        },

        async getDevices(id, channelId) {
        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(id, channelId).then(res => {
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
@@ -413,7 +413,7 @@
            return flvAddress
        },

        initMonitoringIcon() {
        initMonitoringIcon () {
            this.monitoringList.forEach((item, index) => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
@@ -432,7 +432,7 @@
            })
        },

        rowClick(row) {
        rowClick (row) {
            if (this.saveRangeID == row.id) return
            this.saveRangeID = row.id

@@ -473,8 +473,10 @@
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvUrl = ''
                    this.getDevices(item.deviceId, item.channelId).then(res => {

                    this.getDevices(item.channelId).then(res => {
                        flvUrl = res

                        this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvUrl}` })
                        if (index == monitorData.length - 1) {
                            this.monitorOption.forEach((itemm, indexx) => {
@@ -519,11 +521,11 @@
        //     }
        // },

        dialogBeforeClose() {
        dialogBeforeClose () {
            this.dialogVisible = false
        },

        searchChange() {
        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
@@ -539,7 +541,7 @@
            }
        },

        searchClick() {
        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
@@ -551,7 +553,7 @@
            }
        },

        searchVlaClick(item) {
        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            // this.monitoringList = [item]
@@ -560,7 +562,7 @@
        },

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

@@ -615,7 +617,7 @@

    },

    destroyed() {
    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
@@ -674,7 +676,7 @@
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(24,79,202,0.6);
                    background-color: rgba(24, 79, 202, 0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                    border-radius: 20px 0 0 20px;