活动监控

guanqb

2023-01-30 9bc4dcfe0928011e4e986014a2bb5bf3b897e292

活动监控

 prod.env.js

@@ -27,7 +27,8 @@
    // 视频监控平台

    // 本地开发
    VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.126:18185/api',
    // VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.126:18185/api',
    VUE_APP_OUTER_NET_VIDEO: 'http://192.168.0.129:18185/api',
    // 内网部署
    VUE_APP_INTRANET_VIDEO: 'http://10.141.11.11:18185/api',
}

 src/api/video/index.js

@@ -41,7 +41,9 @@
export const getDevices = (channelId) => {
    return request({
        // 内网使用地址，外网把36110000002009999000更换掉
        url: `/play/start/36110000002009999000/${channelId}`,
        // url: `/play/start/36110000002009999000/${channelId}`,
        // 外网使用地址
        url: `/play/start/34020000002000000003/${channelId}`,
        method: 'get',
        requestBaseUrl: 'outside'
    })

 src/views/activity/index.vue

@@ -466,6 +466,7 @@
<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, updateSecurityPlot } from '@/api/activity/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import { getRegionList, getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'

let analyseLayer = null
@@ -677,6 +678,16 @@
                video7: true,
                video8: true,
            },
            flvListPlayer: {
                flvPlayer1: null,
                flvPlayer2: null,
                flvPlayer3: null,
                flvPlayer4: null,
                flvPlayer5: null,
                flvPlayer6: null,
                flvPlayer7: null,
                flvPlayer8: null,
            },
        }
    },
    created () {
@@ -694,6 +705,9 @@
        this.getCarList()

        this.getSecurityList(this.currentPage, this.pagesize)



    },
    mounted () {
        this.$parent.$parent.resize('400px', true)
@@ -866,6 +880,7 @@
                layerName: 'newCarDrawLayers',
                type: 'VectorLayer'
            })
            polylineAreaLayer.clear()
            getSecurityCarList(securityId).then(res => {
                this.isHavePoliceCar = res.data.data.some(item => {
                    return item.type == 3
@@ -892,10 +907,14 @@
                            let polygon = new global.DC.Polygon(coords)
                            polygon.setStyle({
                                material: global.DC.Color.RED.withAlpha(0.4)

                            })
                            polylineAreaLayer.addOverlay(polygon)
                            // polylineAreaLayer.show = false
                            let positionStr = ''
                            coords.forEach(item => {
                                positionStr += item[0] + ',' + item[1] + ';'
                            })
                            this.getRegionList(positionStr)
                        }
                        this.$EventBus.$emit('layerPolylineAdd', {
                            layerName: 'newCarDrawLayers',
@@ -1530,6 +1549,61 @@
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },

        getRegionList (positionNewStr) {
            getRegionList(1, 15, positionNewStr).then(res => {
                console.log(11, res.data.data.list)
                let monitorData = res.data.data.list
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvAddress = ''
                    getDevices(item.channelId).then(res => {
                        if ('data' in res.data) {
                            flvAddress = res.data.data.flv
                            console.log(1111, flvAddress)
                        } else {
                            flvAddress = 'nodata'
                            console.log(222, flvAddress)
                        }
                        this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}` })
                        if (index == monitorData.length - 1) {
                            this.monitorOption.forEach((itemm, indexx) => {
                                if (indexx < 4) {
                                    this.monitor[`type${indexx + 5}`] = itemm.label
                                    this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
                                }
                            })
                        }
                    })

                })
            })
        },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
                this.flvListPlayer[flvItemPlayer].detachMediaElement()
                this.flvListPlayer[flvItemPlayer].destroy()
                this.flvListPlayer[flvItemPlayer] = null
            }

            if (flvjs.isSupported() && flvUrl != 'nodata') {
                let videoElement = document.getElementById(videoEleName)
                this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    url: flvUrl
                })
                this.flvListPlayer[flvItemPlayer].attachMediaElement(videoElement)
                this.flvListPlayer[flvItemPlayer].load()
                this.flvListPlayer[flvItemPlayer].play()
            }
        },


    },

    computed: {

 src/views/video/region.vue

@@ -15,22 +15,33 @@
            <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>

                <div v-show="true" 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="saveRangeList" style="width: 100%"
                            <el-table
                                :data="saveRangeList"
                                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">
                                @cell-click="rowClick"
                            >
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="type" label="范围类型" min-width="50%">
                                    <template slot-scope="scope">
@@ -40,11 +51,20 @@
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
                                        <el-button @click="flytoRange(scope.row)" type="text" size="small" title="定位">
                                        <el-button
                                            @click="flytoRange(scope.row)"
                                            type="text"
                                            size="small"
                                            title="定位"
                                        >
                                            <i class="el-icon-location"></i>
                                        </el-button>
                                        <el-button @click="deleteRegionSaveList(scope.row.id)" type="text" size="small"
                                            title="删除">
                                        <el-button
                                            @click="deleteRegionSaveList(scope.row.id)"
                                            type="text"
                                            size="small"
                                            title="删除"
                                        >
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </template>
@@ -52,9 +72,14 @@
                            </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>
@@ -62,104 +87,247 @@
        </div>
        <div class="item video1" v-show="isShowVideo.video1">
            <div class="select" v-show="isShowSelect.video1">
                <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })"
                    placeholder="请选择" ref="videoSelect1">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type1"
                    @change="((val) => { navClick(val, 1) })"
                    placeholder="请选择"
                    ref="videoSelect1"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement1"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="select" v-show="isShowSelect.video2">
                <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })"
                    placeholder="请选择" ref="videoSelect2">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type2"
                    @change="((val) => { navClick(val, 2) })"
                    placeholder="请选择"
                    ref="videoSelect2"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement2"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="select" v-show="isShowSelect.video3">
                <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })"
                    placeholder="请选择" ref="videoSelect3">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type3"
                    @change="((val) => { navClick(val, 3) })"
                    placeholder="请选择"
                    ref="videoSelect3"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement3"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="select" v-show="isShowSelect.video4">
                <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })"
                    placeholder="请选择" ref="videoSelect4">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type4"
                    @change="((val) => { navClick(val, 4) })"
                    placeholder="请选择"
                    ref="videoSelect4"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="select" v-show="isShowSelect.video5">
                <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })"
                    placeholder="请选择" ref="videoSelect5">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type5"
                    @change="((val) => { navClick(val, 5) })"
                    placeholder="请选择"
                    ref="videoSelect5"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement5"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="select" v-show="isShowSelect.video6">
                <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })"
                    placeholder="请选择" ref="videoSelect6">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type6"
                    @change="((val) => { navClick(val, 6) })"
                    placeholder="请选择"
                    ref="videoSelect6"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement6"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <div class="select" v-show="isShowSelect.video7">
                <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7">
                    <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value"
                        :label="item.label" :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type7"
                    v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })"
                    placeholder="请选择"
                    ref="videoSelect7"
                >
                    <el-option
                        v-show="isShowSelect.video7"
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement7"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="select" v-show="isShowSelect.video8">
                <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })"
                    placeholder="请选择" ref="videoSelect8">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                <el-select
                    size="small"
                    v-model="monitor.type8"
                    @change="((val) => { navClick(val, 8) })"
                    placeholder="请选择"
                    ref="videoSelect8"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                <video
                    id="videoElement8"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </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>
    </div>
</template>
@@ -723,7 +891,7 @@
                border-radius: 10px;
                overflow-y: auto;

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

                &>div {
                & > div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;