| | |
| | | * @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: 安保活动 |
| | | * |
| | |
| | | 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> |
| | |
| | | <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" |
| | |
| | | <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> |
| | |
| | | </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"> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | </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> |
| | |
| | | </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" |
| | |
| | | :value="item.value"></el-option> |
| | | </el-select> |
| | | <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> |
| | | <div class="value-name-box">选择颜色:</div> |
| | | <div class="pick-color-box"> |
| | | <el-color-picker v-model="chooseCarColor" :predefine="predefineColors" size="small"> |
| | | </el-color-picker> |
| | | </div> |
| | | </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> |
| | |
| | | <el-tree :data="policeTreeData" :props="policeDefaultProps" @node-click="handlePoliceNodeClick" |
| | | @mousedown.native="preventFocusLost" ref="policeTree" :filter-node-method="filterPoliceNode" |
| | | v-show="searchTreeShowFlag"></el-tree> |
| | | <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> |
| | | <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> |
| | | </div> |
| | | </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> |
| | |
| | | <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> |
| | | <el-color-picker v-model="chooseColor" :predefine="predefineColors" size="small"> |
| | | </el-color-picker> |
| | | </div> |
| | | </div> |
| | | <div class="edit-line-btn-box"> |
| | |
| | | <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> |
| | | <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small"> |
| | | </el-color-picker> |
| | | </div> |
| | | </div> |
| | | <div class="add-polygon-btn-box"> |
| | |
| | | <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> |
| | | <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small"> |
| | | </el-color-picker> |
| | | </div> |
| | | </div> |
| | | <div> |
| | |
| | | video4: true, |
| | | }, |
| | | flvListPlayer: { |
| | | flvPlayer5: null, |
| | | flvPlayer6: null, |
| | | flvPlayer7: null, |
| | | flvPlayer8: null, |
| | | flvPlayer1: null, |
| | | flvPlayer2: null, |
| | | flvPlayer3: null, |
| | | flvPlayer4: null, |
| | | }, |
| | | isHaveMonitor: { |
| | | video1: false, |
| | |
| | | video3: false, |
| | | video4: false, |
| | | }, |
| | | |
| | | playVideoHolders: { |
| | | text1: '', |
| | | text2: '', |
| | | text3: '', |
| | | text4: '', |
| | | }, |
| | | |
| | | valChoosed: '', |
| | | argsChoosed: '', |
| | | |
| | |
| | | polygonPositionStr: '', |
| | | chooseColor: '#1CA085', |
| | | choosePlotColor: '#1CA085', |
| | | chooseCarColor:'#1CA085', |
| | | choosePoliceColor:'#1CA085', |
| | | chooseCarColor: '#1CA085', |
| | | choosePoliceColor: '#1CA085', |
| | | chooseLineData: {}, |
| | | lineWidth: 100, |
| | | linePosition: '', |
| | |
| | | isLineEdit: true, |
| | | addLinePosition: '', |
| | | predefineColors: [ |
| | | '#ff4500', |
| | | '#ff8c00', |
| | | '#ffd700', |
| | | '#90ee90', |
| | | '#00ced1', |
| | | '#1e90ff', |
| | | '#c71585', |
| | | 'rgba(255, 69, 0, )', |
| | | 'rgb(255, 120, 0)', |
| | | 'hsv(51, 100, 98)', |
| | | 'hsva(120, 40, 94)', |
| | | 'hsl(181, 100%, 37%)', |
| | | 'hsla(209, 100%, 56%)', |
| | | '#c7158577' |
| | | '#ff4500', |
| | | '#ff8c00', |
| | | '#ffd700', |
| | | '#90ee90', |
| | | '#00ced1', |
| | | '#1e90ff', |
| | | '#c71585', |
| | | 'rgba(255, 69, 0, )', |
| | | 'rgb(255, 120, 0)', |
| | | 'hsv(51, 100, 98)', |
| | | 'hsva(120, 40, 94)', |
| | | 'hsl(181, 100%, 37%)', |
| | | 'hsla(209, 100%, 56%)', |
| | | '#c7158577' |
| | | ], |
| | | } |
| | | }, |
| | |
| | | // scale: 0.5 |
| | | // }) |
| | | // tc.addTrack(track) |
| | | |
| | | |
| | | }) |
| | | }, |
| | | |
| | |
| | | layerName: 'newDrawLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | if(pointCircleCarLayer!=null){ |
| | | if (pointCircleCarLayer != null) { |
| | | pointCircleCarLayer.clear() |
| | | } |
| | | getSecurityPoliceList(securityId).then(res => { |
| | |
| | | }) |
| | | |
| | | } else if (item.type == 3 && pointShow) { |
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId, item.deptId,item.color) |
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId, item.deptId, item.color) |
| | | let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat)) |
| | | let point = new global.DC.Point(position) |
| | | let color = '' |
| | |
| | | if (lineLayer != null) { |
| | | lineLayer.clear() |
| | | } |
| | | if(pointCircleManLayer!=null){ |
| | | if (pointCircleManLayer != null) { |
| | | pointCircleManLayer.clear() |
| | | } |
| | | |
| | |
| | | }, |
| | | }) |
| | | } else if (item.type == 3 && pointShow) { |
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId, item.deptId,item.color) |
| | | let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId, item.deptId, item.color) |
| | | let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat)) |
| | | let point = new global.DC.Point(position) |
| | | let color = '' |
| | |
| | | type: 'billboard', |
| | | params: positionObj, |
| | | incident: this.overlayTypeClick, |
| | | mouseOverIcident:this.pointMouseOver |
| | | mouseOverIcident: this.pointMouseOver |
| | | }) |
| | | |
| | | } |
| | |
| | | }, |
| | | |
| | | // 转换 点 坐标数据 |
| | | convertBillboardPositionDate (data, iconName, plotId, policeId, deptId,color) { |
| | | convertBillboardPositionDate (data, iconName, plotId, policeId, deptId, color) { |
| | | let positionStr = data |
| | | positionStr = data.slice(6, positionStr.length - 1) |
| | | let positionArr = positionStr.split(" ") |
| | |
| | | if (iconName == 'activity') { |
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' } |
| | | } else if (iconName == 'policeman') { |
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId,color:color } |
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId, color: color } |
| | | } else if (iconName == 'policecar') { |
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId,color:color } |
| | | positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId, color: color } |
| | | } |
| | | return positionObj |
| | | }, |
| | |
| | | layerName: 'newDrawLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | if(pointCircleManLayer!=null){ |
| | | pointCircleManLayer.clear() |
| | | if (pointCircleManLayer != null) { |
| | | pointCircleManLayer.clear() |
| | | } |
| | | if(pointCircleCarLayer!=null){ |
| | | if (pointCircleCarLayer != null) { |
| | | pointCircleCarLayer.clear() |
| | | } |
| | | }, |
| | |
| | | } |
| | | if (this.policeChooseCarVisible == true) { |
| | | if (this.policeType == '') { |
| | | this.$message({ |
| | | message: '请选择警车', |
| | | type: 'error' |
| | | }) |
| | | this.$message({ |
| | | message: '请选择警车', |
| | | type: 'error' |
| | | }) |
| | | } else { |
| | | this.policeChooseCarVisible = false |
| | | this.addCarAndRange({ carId: this.policeType, position: position, securityId: this.showingSecurityId, type: type ,color:this.chooseCarColor}) |
| | | this.policeIconIsCreated = false |
| | | this.policeChooseCarVisible = false |
| | | this.addCarAndRange({ carId: this.policeType, position: position, securityId: this.showingSecurityId, type: type, color: this.chooseCarColor }) |
| | | this.policeIconIsCreated = false |
| | | } |
| | | |
| | | |
| | | } else if (this.policeChooseVisible == true) { |
| | | if (this.searchPoliceTreeId == '') { |
| | | this.$message({ |
| | | message: '请选择警员', |
| | | type: 'error' |
| | | }) |
| | | this.$message({ |
| | | message: '请选择警员', |
| | | type: 'error' |
| | | }) |
| | | } else { |
| | | this.policeChooseVisible = false |
| | | this.addActivityPolice({policemanId:this.searchPoliceTreeId, position:position, securityId:this.showingSecurityId, type:type,color:this.choosePoliceColor}) |
| | | this.policeIconIsCreated = false |
| | | this.policeChooseVisible = false |
| | | this.addActivityPolice({ policemanId: this.searchPoliceTreeId, position: position, securityId: this.showingSecurityId, type: type, color: this.choosePoliceColor }) |
| | | this.policeIconIsCreated = false |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | } else { |
| | | if (this.policeChooseVisible == true) { |
| | | this.updateActivityPolice({id:this.policeIconId, policemanId:this.searchPoliceTreeId,color:this.choosePoliceColor}) |
| | | this.updateActivityPolice({ id: this.policeIconId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor }) |
| | | this.policeChooseVisible = false |
| | | } else if (this.policeChooseCarVisible == true) { |
| | | this.updateActivityCar({id:this.policeIconId, carId:this.policeType,color:this.chooseCarColor}) |
| | | this.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor }) |
| | | this.policeChooseCarVisible = false |
| | | } |
| | | this.policeIconIsCreated = false |
| | |
| | | if ('policemanId' in e.overlay.attrParams) { |
| | | this.policeIconId = e.overlay.attrParams.id |
| | | this.policeType = e.overlay.attrParams.policemanId |
| | | this.choosePoliceColor = e.overlay.attrParams.color!=''?e.overlay.attrParams.color:'#FF0000' |
| | | this.choosePoliceColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000' |
| | | let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.policemanId).name |
| | | this.searchPoliceTreeName = choosePoliceName |
| | | this.policeIconIsCreated = true |
| | |
| | | this.policeOption = this.policecarOption |
| | | this.policeIconId = e.overlay.attrParams.id |
| | | this.policeType = e.overlay.attrParams.carId |
| | | this.chooseCarColor = e.overlay.attrParams.color!=''?e.overlay.attrParams.color:'#FF0000' |
| | | this.chooseCarColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000' |
| | | this.policeIconIsCreated = true |
| | | this.policeChooseCarVisible = true |
| | | } |
| | |
| | | |
| | | 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 = '' |
| | | if ('data' in res.data) { |
| | | flvAddress = res.data.data.flv |
| | | } else { |
| | | flvAddress = 'nodata' |
| | | } |
| | | |
| | | this.playVideoList(`flvPlayer${args}`, `${flvAddress}`, `videoElement${args}`) |
| | | }) |
| | | |
| | | } else { |
| | | this.isHaveMonitor[`video${args}`] = false |
| | | this.playVideoHolders[`text${args}`] = '设备离线中……' |
| | | } |
| | | |
| | | 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}`) |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | |
| | | 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' |
| | | } |
| | | if (item.status == 1) { |
| | | this.isHaveMonitor[`video${ind}`] = true |
| | | |
| | | this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`) |
| | | }) |
| | | 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}`) |
| | | }) |
| | | } else { |
| | | this.isHaveMonitor[`video${ind}`] = false |
| | | this.playVideoHolders[`text${ind}`] = '设备离线中……' |
| | | } |
| | | |
| | | } |
| | | |
| | | }) |
| | |
| | | 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 |
| | |
| | | * @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', { |
| | |
| | | |
| | | // 保存巡逻路线信息 |
| | | saveLineInfo () { |
| | | this.updateActivityCar({id:this.policeIconId,color: this.chooseColor, width:this.lineWidth}) |
| | | this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth }) |
| | | this.lineEditVisible = false |
| | | }, |
| | | |
| | |
| | | }) |
| | | position = position.slice(0, position.length - 1) |
| | | lineLayer.addOverlay(overlayData) |
| | | this.updateActivityCar({id:this.policeIconId, color:this.chooseColor, width:this.lineWidth, type:1, position:position}) |
| | | this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth, type: 1, position: position }) |
| | | }) |
| | | }, |
| | | |
| | |
| | | }, |
| | | |
| | | // 鼠标移入图标事件 |
| | | pointMouseOver(e){ |
| | | console.log(12345); |
| | | console.log(e); |
| | | pointMouseOver (e) { |
| | | console.log(12345) |
| | | console.log(e) |
| | | }, |
| | | |
| | | }, |
| | |
| | | analyseLayer.clear() |
| | | arrowsListLayer.clear() |
| | | lineLayer.clear() |
| | | if(pointCircleManLayer!=null){ |
| | | pointCircleManLayer.clear() |
| | | if (pointCircleManLayer != null) { |
| | | pointCircleManLayer.clear() |
| | | } |
| | | |
| | | if(pointCircleCarLayer!=null){ |
| | | pointCircleCarLayer.clear() |
| | | } |
| | | if (pointCircleCarLayer != null) { |
| | | pointCircleCarLayer.clear() |
| | | } |
| | | this.removeAll() |
| | | this.removeAllArrow() |
| | | if (tc) { |