shuishen
2023-02-24 62eda6429696c84a055a052293a651e4ea5d10fd
聚合和模型更改
3 files modified
1 files added
255 ■■■■ changed files
src/components/assemble/index.vue 13 ●●●●● patch | view | raw | blame | history
src/components/playVideo/index.vue 112 ●●●●● patch | view | raw | blame | history
src/views/home/index.vue 24 ●●●● patch | view | raw | blame | history
src/views/house/index.vue 106 ●●●●● patch | view | raw | blame | history
src/components/assemble/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-23 09:09:09
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 17:33:32
 * @LastEditTime: 2023-02-24 09:03:59
 * @FilePath: \srs-police-affairs\src\components\assemble\index.vue
 * @Description: 聚合图标点的点击事件
 * 
@@ -34,7 +34,7 @@
                <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称" min-width="320%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="channelId" label="通道编号"
                    min-width="160%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"
                <el-table-column :show-overflow-tooltip="true" prop="deptName" label="所属派出所"
                    min-width="140%"></el-table-column>
                <el-table-column label="设备状态">
                    <template slot-scope="scope">
@@ -56,6 +56,8 @@
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
        </el-dialog>
        <play-video ref="videoBox"></play-video>
    </div>
</template>
@@ -86,7 +88,7 @@
    computed: {
        currentData () {
            return this.searchData.filter((item, index) =>
                index > (this.pages.current - 1) * this.pages.size && index <= this.pages.current * this.pages.size
                index >= (this.pages.current - 1) * this.pages.size && index < this.pages.current * this.pages.size
            )
        }
    },
@@ -104,6 +106,7 @@
                    layerName: 'cameraLayers',
                    ids: e.target.id,
                    cb (data) {
                        console.log(data, 456)
                        that.tableData = data
                        that.searchData = data
                        that.pages.current = 1
@@ -128,8 +131,10 @@
         * @description: 视频播放
         * @return {*}
         */
        play () {
        // 设备的视频播放
        play (row) {
            this.$refs.videoBox.play(row)
        },
        /**
src/components/playVideo/index.vue
New file
@@ -0,0 +1,112 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-24 09:06:31
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-24 10:16:25
 * @FilePath: \srs-police-affairs\src\components\playVideo\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
    <div>
        <el-dialog :title="title" :modal="true" :visible.sync="visibleFlag" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>
<script>
import flvjs from 'flv.js'
import { getDevices } from '@/api/video/index.js'
export default {
    name: 'playVideo',
    data () {
        return {
            title: '',
            visibleFlag: false,
            flvPlayer: null
        }
    },
    methods: {
        // 设备的视频播放
        async play (row) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }
            this.title = row.name
            let flvUrl = ''
            await this.getDevices(row.channelId).then(res => {
                flvUrl = res
            })
            if (typeof flvUrl === 'object') {
                this.$message.error(flvUrl.msg)
                return
            }
            this.visibleFlag = true
            if (flvjs.isSupported()) {
                this.$nextTick(() => {
                    var videoElement = document.getElementById('videoElement')
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        url: flvUrl
                    })
                    this.flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer.load()
                    this.flvPlayer.play()
                })
            }
        },
        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
        },
        dialogBeforeClose () {
            this.visibleFlag = false
        },
    },
    destroyed () {
        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }
    }
}
</script>
<style lang="scss" scoped></style>
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-02-23 09:43:39
 * @LastEditTime: 2023-02-24 09:23:40
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -39,11 +39,11 @@
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">
                                        <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                    </div>
                                    <div class="layers-control-btn panorama">
                                        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                    </div> -->
                                            <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                        </div>
                                        <div class="layers-control-btn panorama">
                                            <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                        </div> -->
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
@@ -617,7 +617,9 @@
            // 现有地搜索条件-小区名称
            landSearchAoiName: '',
            destroyFlag: true
            destroyFlag: true,
            flvPlayer: null
        }
    },
@@ -2055,6 +2057,14 @@
            clearInterval(timer[i])
        }
        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
        // document.querySelector('.dc-container .dc-location-bar').classList.remove('homebottom')
        document.querySelector('.screen-full-btn').classList.remove('homebottom')
src/views/house/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 10:57:03
 * @LastEditTime: 2023-02-24 10:13:07
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -140,9 +140,9 @@
                                <div class="two">
                                    <div>
                                        <div>98</div>
                                                                                                                                                            <div>户籍人口</div>
                                                                                                                                                        </div>
                                                                                                                                                        <div>
                                                                                                                                                                    <div>户籍人口</div>
                                                                                                                                                                </div>
                                                                                                                                                                <div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
@@ -164,17 +164,17 @@
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                                                                                                                                    </div>
                                                                                                                                                    <div>
                                                                                                                                                        <div>160</div>
                                                                                                                                                        <div>自住</div>
                                                                                                                                                    </div>
                                                                                                                                                    <div>
                                                                                                                                                        <div>8</div>
                                                                                                                                                        <div>空置</div>
                                                                                                                                                    </div>
                                                                                                                                                </div>
                                                                                                                                            </div>-->
                                                                                                                                                            </div>
                                                                                                                                                            <div>
                                                                                                                                                                <div>160</div>
                                                                                                                                                                <div>自住</div>
                                                                                                                                                            </div>
                                                                                                                                                            <div>
                                                                                                                                                                <div>8</div>
                                                                                                                                                                <div>空置</div>
                                                                                                                                                            </div>
                                                                                                                                                        </div>
                                                                                                                                                    </div>-->
                        <div class="house-element-info" v-if="isShowHouseBox">
                        <!-- 选择单元 -->
                        <div class="condo" v-show="isShowUnitChoose">
@@ -219,17 +219,17 @@
                                    <div>
                                        <span class="zizhu"></span>
                                        自住
                                                                                                                                                        </div>
                                                                                                                                                        <div>
                                                                                                                                                            <span class="kongzhi"></span>
                                                                                                                                                            空置
                                                                                                                                                        </div>
                                                                                                                                                        <div>
                                                                                                                                                            <span class="shangye"></span>
                                                                                                                                                            商业
                                                                                                                                                        </div>
                                                                                                                                                    </div>
                                                                                                                                                </div>-->
                                                                                                                                                                </div>
                                                                                                                                                                <div>
                                                                                                                                                                    <span class="kongzhi"></span>
                                                                                                                                                                    空置
                                                                                                                                                                </div>
                                                                                                                                                                <div>
                                                                                                                                                                    <span class="shangye"></span>
                                                                                                                                                                    商业
                                                                                                                                                                </div>
                                                                                                                                                            </div>
                                                                                                                                                        </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
@@ -266,8 +266,8 @@
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                                                                                                                                                <div class="focus"></div>
                                                                                                                                                                    <div class="warning"></div>-->
                                                                                                                                                                        <div class="focus"></div>
                                                                                                                                                                            <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
@@ -483,6 +483,45 @@
let circleLayer = null
let timer = []
let label = [
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
    '16',
    '17',
    '18',
    '19',
    '20',
    '21',
    '22',
    '23',
    '24',
    '25',
    '26',
    '27',
    '28',
    '29',
    '30',
    '31',
    '32',
    '33',
    '34',
    '35',
    '36'
]
import {
    getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata,
    getPoliceStationLazyTree, getPoliceStationTrees, getVillageInfo,
@@ -645,12 +684,13 @@
            this.searchHouse = this.$route.query.searchName
            this.$EventBus.$emit('addMxTileset', {
                titlesetName: 'sdTilesetLayer',
                titlesetUrl: `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`,
                incident: that.getAoiByPtStd
            label.forEach(item => {
                this.$EventBus.$emit('addMxTileset', {
                    titlesetName: 'sdTilesetLayer',
                    titlesetUrl: `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`,
                    incident: that.getAoiByPtStd
                })
            })
            if (wallLayer == null) {
                wallLayer = new global.DC.VectorLayer('wallLayer')