~admin/srs-police-affairs.git

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2022-08-18 16:18:17
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2023-02-28 16:19:59
			* @LastEditTime: 2023-03-01 15:31:43
			* @FilePath: \srs-police-affairs\src\views\activity\index.vue
			* @Description: 安保活动
			*
			@@ -269,6 +269,7 @@
			</div>
			<button @click="searchExtensivelyClick" class="el-icon-search"></button>
			</div>

			<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
			<div>
			<div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
			@@ -279,7 +280,7 @@
			<div class="item video1" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video1">
			<el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
			ref="videoSelect5">
			ref="videoSelect1">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			<div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
			@@ -288,14 +289,17 @@
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video1">
			<video id="videoElement5" 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 class="no-video" v-show="!isHaveMonitor.video1">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video1">
			{{ playVideoHolders.text1 }}
			</div>
			</div>

			<div class="item video2" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video2">
			<el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
			ref="videoSelect6">
			ref="videoSelect2">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			<div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
			@@ -304,14 +308,17 @@
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video2">
			<video id="videoElement6" 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 class="no-video" v-show="!isHaveMonitor.video2">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video2">
			{{ playVideoHolders.text2 }}
			</div>
			</div>

			<div class="item video3" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video3">
			<el-select size="small" v-model="monitor.type3" v-show="isShowSelect.video3"
			@change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect7">
			@change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3">
			<el-option v-show="isShowSelect.video3" v-for="item in monitorOption" :key="item.value"
			:label="item.label" :value="item.value" class="activity-video-option-css">
			<div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
			@@ -320,14 +327,17 @@
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video3">
			<video id="videoElement7" 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 class="no-video" v-show="!isHaveMonitor.video3">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video3">
			{{ playVideoHolders.text3 }}
			</div>
			</div>

			<div class="item video4" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video4">
			<el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
			ref="videoSelect8">
			ref="videoSelect4">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			<div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
			@@ -336,10 +346,13 @@
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video4">
			<video id="videoElement8" 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 class="no-video" v-show="!isHaveMonitor.video4">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video4">
			{{ playVideoHolders.text4 }}
			</div>
			</div>

			<div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>

			<el-dialog :title="policeChooseCarTitle" :modal="false" :visible.sync="policeChooseCarVisible"
			@@ -352,14 +365,13 @@
			<div class="line">
			<div class="value-name-box">选择颜色：</div>
			<div class="pick-color-box">
			<el-color-picker
			v-model="chooseCarColor"
			:predefine="predefineColors" size="small">
			<el-color-picker v-model="chooseCarColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			</div>
			</div>
			<el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
			<el-button @click="deletePoliceElement" v-show="!isChoosePoliceElementDisabled&&policeIconIsCreated">删除</el-button>
			<el-button @click="deletePoliceElement"
			v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
			<el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
			</div>
			</el-dialog>
			@@ -376,15 +388,14 @@
			<div class="line">
			<div class="value-name-box">选择颜色：</div>
			<div class="pick-color-box">
			<el-color-picker
			v-model="choosePoliceColor"
			:predefine="predefineColors" size="small">
			<el-color-picker v-model="choosePoliceColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			</div>
			</div>
			<div class="police-btn-box">
			<el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
			<el-button @click="deletePoliceElement" v-show="!isChoosePoliceElementDisabled&&policeIconIsCreated">删除</el-button>
			<el-button @click="deletePoliceElement"
			v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
			<el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
			</div>
			</div>
			@@ -402,9 +413,7 @@
			<div>
			<div class="value-name-box">选择范围颜色：</div>
			<div class="pick-color-box">
			<el-color-picker
			v-model="chooseColor"
			:predefine="predefineColors" size="small">
			<el-color-picker v-model="chooseColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			</div>
			</div>
			@@ -429,9 +438,7 @@
			<div class="line">
			<div class="value-name-box">选择颜色：</div>
			<div class="pick-color-box">
			<el-color-picker
			v-model="choosePlotColor"
			:predefine="predefineColors" size="small">
			<el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			</div>
			</div>
			@@ -446,9 +453,7 @@
			<div>
			<div class="value-name-box">选择标绘颜色：</div>
			<div class="pick-color-box">
			<el-color-picker
			v-model="choosePlotColor"
			:predefine="predefineColors" size="small">
			<el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
			</el-color-picker>
			</div>
			</div>
			@@ -653,10 +658,10 @@
			video4: true,
			},
			flvListPlayer: {
			flvPlayer5: null,
			flvPlayer6: null,
			flvPlayer7: null,
			flvPlayer8: null,
			flvPlayer1: null,
			flvPlayer2: null,
			flvPlayer3: null,
			flvPlayer4: null,
			},
			isHaveMonitor: {
			video1: false,
			@@ -664,6 +669,14 @@
			video3: false,
			video4: false,
			},

			playVideoHolders: {
			text1: '',
			text2: '',
			text3: '',
			text4: '',
			},

			valChoosed: '',
			argsChoosed: '',

			@@ -2057,9 +2070,8 @@

			this.monitor[`type${args}`] = this.monitorOption[val].item.name

			if (this.monitorOption[val].item.status == 0) {
			if (this.monitorOption[val].item.status == 1) {
			this.isHaveMonitor[`video${args}`] = true
			}

			getDevices(this.monitorOption[val].item.channelId).then(res => {
			let flvAddress = ''
			@@ -2069,9 +2081,14 @@
			flvAddress = 'nodata'
			}


			this.playVideoList(`flvPlayer${args}`, `${flvAddress}`, `videoElement${args}`)
			})

			} else {
			this.isHaveMonitor[`video${args}`] = false
			this.playVideoHolders[`text${args}`] = '设备离线中……'
			}

			},

			/**
			@@ -2092,6 +2109,8 @@
			const ind = index + 1

			this.monitor[`type${ind}`] = item.name

			if (item.status == 1) {
			this.isHaveMonitor[`video${ind}`] = true

			getDevices(item.channelId).then(res => {
			@@ -2104,6 +2123,11 @@

			this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`)
			})
			} else {
			this.isHaveMonitor[`video${ind}`] = false
			this.playVideoHolders[`text${ind}`] = '设备离线中……'
			}

			}

			})
			@@ -2154,10 +2178,13 @@
			const line = this.$turf.lineString(this.linePosition.split(';').filter(item => item != '').map(item => item.split(',').map(i => Number(i))))
			// const lineLength = this.$turf.length(line) * 1000
			const chunkLine = this.$turf.lineChunk(line, 0.1)
			let newPostion = chunkLine.features.reduce((pre, cur) =>
			let arr = chunkLine.features.reduce((pre, cur) =>
			pre.concat(cur.geometry.coordinates)
			, [])
			newPostion = newPostion.filter((item, index) => index == newPostion.lastIndexOf(item))
			, []).map(item => item.join(','))


			const time = arr.filter(item => arr.indexOf(item) == arr.lastIndexOf(item)).length * 16
			const newPostion = arr.filter((item, index) => index == arr.lastIndexOf(item)).join(';')

			this.getRegionList(this.polygonPosition)
			this.videoShow = true
			@@ -2174,8 +2201,77 @@
			* @param {*} isLast 是否为最后一个点位
			* @return {*}
			*/
			track = new global.DC.Track(newPostion, 100, (position, isLast) => {
			track = new global.DC.Track(newPostion, time, (position, isLast) => {

			console.log(position, 65555)

			const carPosition = [position.lat, position.lng]

			let distanceArr = []

			this.monitorOption.forEach((item, index) => {
			const itemPosition = [item.item.latitude, item.item.longitude]

			var from = this.$turf.point(itemPosition)
			var to = this.$turf.point(carPosition)

			var distance = this.$turf.distance(from, to) * 1000

			if (distance > this.lineWidth) {
			distanceArr.push({
			...item,
			trackDistanceStatus: 0,
			distance
			})
			} else {

			distanceArr.push({
			...item,
			trackDistanceStatus: 1,
			distance
			})
			}

			})

			distanceArr.sort((a, b) => a.distance < b.distance ? -1 : a.distance > b.distance ? 1 : 0)

			distanceArr.forEach((item, index) => {
			const ind = index + 1

			if (index < 4) {

			console.log(item, 123)

			if (item.trackDistanceStatus == 1) {
			this.monitor[`type${ind}`] = item.item.name

			if (item.item.status == 1) {
			this.isHaveMonitor[`video${ind}`] = true

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

			this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`)
			})
			} else {
			this.isHaveMonitor[`video${ind}`] = false
			this.playVideoHolders[`text${ind}`] = '设备离线中……'
			}

			} else {
			this.monitor[`type${ind}`] = ''
			this.isHaveMonitor[`video${ind}`] = false
			this.playVideoHolders[`text${ind}`] = '警车周边暂无设备……'
			}

			}
			})
			})

			track.setModel('/model/qiche.gltf', {
			@@ -2369,8 +2465,8 @@

			// 鼠标移入图标事件
			pointMouseOver(e){
			console.log(12345);
			console.log(e);
			console.log(12345)
			console.log(e)
			},

			},