video无数据处理，及首页处理

shuishen

2023-01-11 cf2b5e6d310ec9653e382d0902bd981e0f9ba05e

video无数据处理，及首页处理

 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-11 10:05:29
 * @LastEditTime: 2023-01-11 11:41:50
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -110,6 +110,7 @@
    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

@@ -378,92 +378,54 @@
            let data = []
            this.regionTotal = 0

            this.regionTotal = 2500
            equimentDataLength = 2
            const dataAll = getEquipment().then(res => {

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

            if (this.linetype == 0) {
                return [{
                    type: 0,
                    name: '车辆',
                    value: 500,
                    working: 400,
                    fault: 100,
                    label: twoColor[0]
                }, {
                    type: 1,
                    name: '摄像头',
                    value: 2000,
                    working: 1800,
                    fault: 200,
                    label: twoColor[1]
                }]
            } else {
                return [{
                    online: true,
                    color: '#4caf50',
                    name: '正常',
                    value: 2200,
                    carCount: 400,
                    monitorCount: 1800,
                }, {
                    online: false,
                    color: '#ffd600',
                    name: '故障',
                    value: 300,
                    carCount: 100,
                    monitorCount: 200,
                }]
            }
                        this.regionTotal += item.count

                        return {
                            equimentType: item.type == '车辆' ? 0 : 1,
                            name: item.type,
                            value: item.count,
                            working: item.online,
                            fault: item.offline,
                            label: twoColor[index]
                        }
                    })

            // const dataAll = getEquipment().then(res => {
                    equimentDataLength = data.length

            //     if (this.linetype == 0) {
            //         data = res.data.map((item, index) => {
                    return data
                } else {
                    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] } }

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

            //             return {
            //                 name: item.type,
            //                 value: item.count,
            //                 working: item.online,
            //                 fault: item.offline,
            //                 label: twoColor[index]
            //             }
            //         })
                        normalData.value += item.online

            //         equimentDataLength = data.length
                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = item.online
                                faultData[key] = item.offline
                            }
                        }

            //         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] } }
                        faultData.value += item.offline
                    })

            //         res.data.forEach(item => {
            //             this.regionTotal += item.count
                    data = [normalData, faultData]

            //             normalData.value += item.online
                    equimentDataLength = data.length

            //             for (let key in typeData) {
            //                 if (item.type == typeData[key]) {
            //                     normalData[key] = item.online
            //                     faultData[key] = item.offline
            //                 }
            //             }
                    return data
                }
            })

            //             faultData.value += item.offline
            //         })

            //         data = [normalData, faultData]

            //         equimentDataLength = data.length

            //         return data
            //     }
            // })

            // return dataAll
            return dataAll
        },

        // 设备种类，设备状态切换
@@ -645,10 +607,10 @@
        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if (params.type) {
                    this.$emit('showequimentdetail', params.name, params.type, 'type')
                if (params.equimentType) {
                    this.$emit('showequimentdetail', params.name, params.equimentType, 'type')
                } else {
                    this.$emit('showequimentdetail', params.name, params.online, 'online')
                    this.$emit('showequimentdetail', params.name, params.equimentType, 'online')
                }
            })
        },

 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-11 10:44:34
 * @LastEditTime: 2023-01-11 15:59:14
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -109,6 +109,8 @@
                        :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 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>
@@ -292,8 +294,7 @@
            </div>
        </el-dialog>


        <el-dialog :title="dialogEquimentVideoTitle" :modal="false" :visible.sync="dialogEquimentVideoVisible"
        <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>
@@ -422,6 +423,8 @@

import { getActAsPoliceList, getEquipmentPaging } from "@/api/home/index.js"

import { getDevices } from '@/api/video/index.js'

export default {
    data () {
        return {
@@ -480,7 +483,7 @@
            equimentTableData: [],
            equimentCurrentSelect: {},
            currentPage: 1,
            pagesize: 9,
            pagesize: 15,
            equimentPagingTotal: 0,

            // 现有设备视屏播放的
@@ -521,8 +524,6 @@


        this.$EventBus.$on('policeSituationSiteClick', (params) => {
            console.log(params)

            that.policeSituationSiteClick(params)
        })
    },
@@ -1099,8 +1100,6 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },



        showpeopledetail (name) {
            this.peopleTitle = name
            this.peopleVisible = true
@@ -1144,7 +1143,11 @@
                type: typeVale
            }

            await this.getEquipmentPaging({ type: typeVale })
            let obj = {}

            obj[type] = typeVale

            await this.getEquipmentPaging(obj)

            this.equimentVisible = true
        },
@@ -1160,13 +1163,21 @@
            }

            this.dialogEquimentVideoTitle = row.name
            this.dialogEquimentVideoVisible = 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',
@@ -1178,6 +1189,22 @@
                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) {
@@ -1254,8 +1281,14 @@
                    this.housingDate = data
                }
            })
        }
        },

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

    destroyed () {

 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;