~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 15:07:24
			* @LastEditTime: 2023-02-28 16:19:59
			* @FilePath: \srs-police-affairs\src\views\activity\index.vue
			* @Description: 安保活动
			*
			@@ -22,11 +22,11 @@
			v-model="activityType"
			placeholder="请选择"
			@change="activityTypeChange"
			>
			<el-option
			v-for="item in activityOptions"
			:key="item.dictKey"
			:label="item.dictValue"
			>
			<el-option
			v-for="item in activityOptions"
			:key="item.dictKey"
			:label="item.dictValue"
			:value="item.dictKey"
			class="activity-option"
			></el-option>
			@@ -38,12 +38,12 @@
			<div class="category">选择时间：</div>
			<div class="category-value">
			<!-- <el-date-picker
			size="small"
			v-model="selectTime"
			type="date"
			placeholder="选择日期"
			style="width:268px"
			></el-date-picker>-->
			size="small"
			v-model="selectTime"
			type="date"
			placeholder="选择日期"
			style="width:268px"
			></el-date-picker>-->
			<el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
			format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
			start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
			@@ -141,10 +141,10 @@
			<ul>
			<li>
			<!-- <el-button
			title="路线绘制"
			@click="draw('billboard', 'policeman')"
			icon="el-icon-my-route"
			></el-button>-->
			title="路线绘制"
			@click="draw('billboard', 'policeman')"
			icon="el-icon-my-route"
			></el-button>-->
			<button @click="draw('polyline', 'policecar')" title="巡逻路线">
			<img src="../../../public/img/icon/route1.png" style="height:100%" />
			</button>
			@@ -276,9 +276,9 @@
			</div>
			</div>

			<div class="item video5" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video5">
			<el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择"
			<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">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			@@ -287,14 +287,14 @@
			</el-option>
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video5">
			<div class="video" v-show="isHaveMonitor.video1">
			<video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video5">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video1">设备离线</div>
			</div>
			<div class="item video6" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video6">
			<el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择"
			<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">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			@@ -303,30 +303,30 @@
			</el-option>
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video6">
			<div class="video" v-show="isHaveMonitor.video2">
			<video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video6">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video2">设备离线</div>
			</div>
			<div class="item video7" v-show="videoShow">
			<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"
			<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">
			<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>
			{{ item.label }}
			</el-option>
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video7">
			<div class="video" v-show="isHaveMonitor.video3">
			<video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video7">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video3">设备离线</div>
			</div>
			<div class="item video8" v-show="videoShow">
			<div class="select" v-show="isShowSelect.video8">
			<el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择"
			<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">
			<el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
			class="activity-video-option-css">
			@@ -335,10 +335,10 @@
			</el-option>
			</el-select>
			</div>
			<div class="video" v-show="isHaveMonitor.video8">
			<div class="video" v-show="isHaveMonitor.video4">
			<video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video8">设备离线</div>
			<div class="no-video" v-show="!isHaveMonitor.video4">设备离线</div>
			</div>
			<div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>

			@@ -384,13 +384,13 @@
			<div>
			<div class="value-name-box">选择范围颜色：</div>
			<div class="pick-color-box">
			<v-swatches v-model="chooseColor"></v-swatches>
			<v-swatches v-model="chooseColor"></v-swatches>
			</div>
			</div>
			<div class="edit-line-btn-box">
			<el-button @click="watchVideo" v-show="isLineEdit">查看视频</el-button>
			<el-button @click="editLineInfo" v-show="isLineEdit">编辑</el-button>
			<el-button @click="saveLineInfo" v-show="isLineEdit">保存</el-button>
			<el-button @click="saveLineInfo" v-show="isLineEdit">保存</el-button>
			<el-button @click="deleteLine" v-show="isLineEdit">删除</el-button>
			<el-button @click="addLineInfo" v-show="!isLineEdit">添加</el-button>
			<el-button @click="cancelSaveLine">取消</el-button>
			@@ -402,13 +402,13 @@
			<div class="line" v-show="isNeedName">
			<div class="value-name-box">设置名称：</div>
			<div>
			<input type="text" v-model="polygonName" />
			<input type="text" v-model="polygonName" />
			</div>
			</div>
			<div class="line">
			<div class="value-name-box">选择颜色：</div>
			<div class="pick-color-box">
			<v-swatches v-model="choosePlotColor"></v-swatches>
			<v-swatches v-model="choosePlotColor"></v-swatches>
			</div>
			</div>
			<div class="add-polygon-btn-box">
			@@ -422,7 +422,7 @@
			<div>
			<div class="value-name-box">选择标绘颜色：</div>
			<div class="pick-color-box">
			<v-swatches v-model="choosePlotColor"></v-swatches>
			<v-swatches v-model="choosePlotColor"></v-swatches>
			</div>
			</div>
			<div>
			@@ -616,16 +616,16 @@
			userInfo: {},
			monitorOption: [],
			monitor: {
			type5: '',
			type6: '',
			type7: '',
			type8: '',
			type1: '',
			type2: '',
			type3: '',
			type4: '',
			},
			isShowSelect: {
			video5: true,
			video6: true,
			video7: true,
			video8: true,
			video1: true,
			video2: true,
			video3: true,
			video4: true,
			},
			flvListPlayer: {
			flvPlayer5: null,
			@@ -634,11 +634,14 @@
			flvPlayer8: null,
			},
			isHaveMonitor: {
			video5: false,
			video6: false,
			video7: false,
			video8: false,
			video1: false,
			video2: false,
			video3: false,
			video4: false,
			},
			valChoosed: '',
			argsChoosed: '',

			isShowActivityClearBtn: false,
			videoShow: false,
			lineEditVisible: false,
			@@ -668,11 +671,11 @@
			searchTreeShowFlag: false,
			plotOverlayData: null,
			lineObjdata: null,
			isNeedName:false,
			plotSaveType:1,
			arrowPositionSre:'',
			isLineEdit:true,
			addLinePosition:'',
			isNeedName: false,
			plotSaveType: 1,
			arrowPositionSre: '',
			isLineEdit: true,
			addLinePosition: '',
			}
			},

			@@ -1342,7 +1345,7 @@
			this.dialogVisible = false
			this.polylineBtnSwitch = false
			this.isTrackBtnShow = false
			this.closeVideo ()
			this.closeVideo()
			this.currentClickIndex = ''
			analyseLayer.clear()
			arrowsListLayer.clear()
			@@ -1376,7 +1379,7 @@
			if (overlay) {
			drawLayers.addOverlay(overlay)
			plot.edit(overlay, (e) => {
			drawLayers.addOverlay(overlay)
			drawLayers.addOverlay(overlay)
			flag = true
			overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
			overlay.drawType = poltType
			@@ -1486,7 +1489,7 @@
			},

			removeAllArrow () {
			if(drawArrowLayers!=null){
			if (drawArrowLayers != null) {
			drawArrowLayers.clear()
			}
			},
			@@ -1529,19 +1532,19 @@
			videoList.forEach(item => {
			item.classList.add('item-new-width')
			})
			document.querySelector('.video5').classList.add('video5-new-left')
			document.querySelector('.video6').classList.add('video6-new-left')
			document.querySelector('.video7').classList.add('video7-new-left')
			document.querySelector('.video8').classList.add('video8-new-left')
			document.querySelector('.video1').classList.add('video1-new-left')
			document.querySelector('.video2').classList.add('video2-new-left')
			document.querySelector('.video3').classList.add('video3-new-left')
			document.querySelector('.video4').classList.add('video4-new-left')
			} else {
			let videoList = document.querySelectorAll('.item')
			videoList.forEach(item => {
			item.classList.remove('item-new-width')
			})
			document.querySelector('.video5').classList.remove('video5-new-left')
			document.querySelector('.video6').classList.remove('video6-new-left')
			document.querySelector('.video7').classList.remove('video7-new-left')
			document.querySelector('.video8').classList.remove('video8-new-left')
			document.querySelector('.video1').classList.remove('video1-new-left')
			document.querySelector('.video2').classList.remove('video2-new-left')
			document.querySelector('.video3').classList.remove('video3-new-left')
			document.querySelector('.video4').classList.remove('video4-new-left')
			}
			},

			@@ -1555,9 +1558,9 @@
			},

			// 取消保存多边形
			cancelSavePolygon(){
			cancelSavePolygon () {
			this.polygonAddVisible = false
			if(drawArrowLayers!=null){
			if (drawArrowLayers != null) {
			drawArrowLayers.clear()
			}
			},
			@@ -1600,7 +1603,7 @@
			}
			if (this.policeChooseCarVisible == true) {
			this.policeChooseCarVisible = false
			this.addCarAndRange({carId:this.policeType, position:position, securityId:this.showingSecurityId, type:type})
			this.addCarAndRange({ carId: this.policeType, position: position, securityId: this.showingSecurityId, type: type })
			} else if (this.policeChooseVisible == true) {
			this.policeChooseVisible = false

			@@ -1643,9 +1646,9 @@
			},

			// 取消保存巡逻路线
			cancelSaveLine(){
			cancelSaveLine () {
			this.lineEditVisible = false
			if(drawLayers!=null){
			if (drawLayers != null) {
			drawLayers.clear()
			}
			},
			@@ -1915,31 +1918,62 @@
			this.searchClick()
			},


			navClick (val, args) {
			if (this.valChoosed == val && this.argsChoosed == args) return
			this.valChoosed = val
			this.argsChoosed = args

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

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

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


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

			/**
			* @description: 获取视频播放列表
			* @param {*} positionNewStr
			* @return {*}
			*/
			getRegionList (positionNewStr) {
			getRegionList({ page: 1, count: 15, range: positionNewStr }).then(res => {
			let monitorData = res.data.data.list
			this.initMonitoringIcon(monitorData)
			this.monitorOption = []
			monitorData.forEach((item, index) => {
			let flvAddress = ''
			getDevices(item.channelId).then(res => {
			if ('data' in res.data) {
			flvAddress = res.data.data.flv
			} else {
			flvAddress = 'nodata'
			}
			this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}`, status: `${item.status}` })
			if (index == monitorData.length - 1) {
			console.log('this.monitorOption',this.monitorOption);
			this.monitorOption.forEach((itemm, indexx) => {
			if (indexx < 4) {
			this.isHaveMonitor[`video${indexx + 5}`] = itemm.status == '0' ? false:true
			this.monitor[`type${indexx + 5}`] = itemm.label
			this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
			}
			})
			}
			})

			this.monitorOption.push({ value: `${index}`, label: `${item.name}`, status: `${item.status}`, item })

			if (index < 4) {
			const ind = index + 1

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

			getDevices(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}`)
			})
			}

			})
			})
			@@ -1953,12 +1987,12 @@
			type: 'VectorLayer'
			})
			if (tc) {
			tc.clear()
			}
			tc.clear()
			}
			},

			playVideoList (flvItemPlayer, flvUrl, videoEleName) {
			console.log('flvUrl',flvUrl);
			console.log('flvUrl', flvUrl)
			if (this.flvListPlayer[flvItemPlayer] != null) {
			this.flvListPlayer[flvItemPlayer].pause()
			this.flvListPlayer[flvItemPlayer].unload()
			@@ -1991,7 +2025,7 @@
			const chunkLine = this.$turf.lineChunk(line, 0.1)
			let newPostion = chunkLine.features.reduce((pre, cur) =>
			pre.concat(cur.geometry.coordinates)
			, [])
			, [])
			newPostion = newPostion.filter((item, index) => index == newPostion.lastIndexOf(item))

			this.getRegionList(this.polygonPosition)
			@@ -2003,10 +2037,18 @@

			tc = new global.DC.TrackController(global.viewer)

			track = new global.DC.Track(newPostion, 100)
			/**
			* @description:
			* @param {*} position 当前行驶位置信息
			* @param {*} isLast 是否为最后一个点位
			* @return {*}
			*/
			track = new global.DC.Track(newPostion, 100, (position, isLast) => {

			})

			track.setModel('/model/qiche.gltf', {
			scale: 0.5
			scale: 0.8
			})

			tc.addTrack(track)
			@@ -2020,8 +2062,8 @@
			},

			// 新增巡逻路线信息
			addLineInfo(){
			this.addCarAndRange({position:this.addLinePosition, securityId:this.showingSecurityId, type:1,color:this.chooseColor,width:this.lineWidth})
			addLineInfo () {
			this.addCarAndRange({ position: this.addLinePosition, securityId: this.showingSecurityId, type: 1, color: this.chooseColor, width: this.lineWidth })
			this.cancelSaveLine()
			},

			@@ -2068,18 +2110,18 @@

			// 保存绘制区域
			savePolygonInfo () {
			if(this.isNeedName){
			if (this.isNeedName) {
			if (this.polygonName == '') {
			this.$message({
			message: '请输入名称',
			type: 'error'
			})
			this.$message({
			message: '请输入名称',
			type: 'error'
			})
			} else {
			this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.polygonPositionStr, type: 5, name: this.polygonName, color: this.choosePlotColor })
			this.polygonAddVisible = false
			}
			} else {
			this.addSecurityPlot({securityId:this.showingSecurityId, position:this.polygonPositionStr, type:5, name:this.polygonName,color:this.choosePlotColor})
			this.polygonAddVisible = false
			}
			}else{
			this.addSecurityPlot({securityId:this.showingSecurityId, position:this.arrowPositionStr, type:this.plotSaveType, color:this.choosePlotColor})
			this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.arrowPositionStr, type: this.plotSaveType, color: this.choosePlotColor })
			this.polygonAddVisible = false
			}
			},
			@@ -2809,7 +2851,7 @@
			width: 25vw;
			}

			.video5 {
			.video1 {
			left: calc(400 / 1920 * 100vw);

			.video {
			@@ -2821,7 +2863,7 @@
			}
			}

			.video6 {
			.video2 {
			left: calc(780 / 1920 * 100vw);

			.video {
			@@ -2833,7 +2875,7 @@
			}
			}

			.video7 {
			.video3 {
			left: calc(1160 / 1920 * 100vw);

			.video {
			@@ -2845,23 +2887,23 @@
			}
			}

			.video8 {
			.video4 {
			left: calc(1540 / 1920 * 100vw);
			}

			.video5-new-left {
			.video1-new-left {
			left: 0;
			}

			.video6-new-left {
			.video2-new-left {
			left: 25vw;
			}

			.video7-new-left {
			.video3-new-left {
			left: 50vw;
			}

			.video8-new-left {
			.video4-new-left {
			left: 75vw;
			}