From 7a2be276a3fc8dd28d09dfd070500739eb13d17a Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Mon, 13 Feb 2023 20:44:23 +0800
Subject: [PATCH] 活动修改巡逻范围宽度、轨迹对应播放
---
src/views/activity/index.vue | 175 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 120 insertions(+), 55 deletions(-)
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index 0a61fb7..54b9c62 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -289,7 +289,7 @@
</div>
</div>
- <div class="btn-box" v-show="isTrackBtnShow&&polylineBtnSwitch">
+ <div class="btn-box" v-show="videoShow">
<ul>
<li>
<button @click="play()">播放</button>
@@ -488,15 +488,26 @@
class="edit-line-box"
>
<div>
- <div>设置宽度:</div>
- <div>
- <input type="text" />
+ <div class="value-name-box">设置宽度：</div>
+ <div class="input-width-box">
+ <input type="text" v-model="lineWidth" placeholder="请输入..." />
</div>
</div>
<div>
- <div>选择颜色:</div>
- <div>
- <input type="text" />
+ <div class="value-name-box">选择颜色：</div>
+ <div class="color-box">
+ <div
+ class="red-color"
+ @click="changeLineColor('#FF0000')"
+ >{{ chooseColor == '#FF0000'?'√':'' }}</div>
+ <div
+ class="green-color"
+ @click="changeLineColor('#00FF00')"
+ >{{ chooseColor == '#00FF00'?'√':'' }}</div>
+ <div
+ class="blue-color"
+ @click="changeLineColor('#0000FF')"
+ >{{ chooseColor == '#0000FF'?'√':'' }}</div>
</div>
</div>
<div>
@@ -744,11 +755,22 @@
isShowActivityClearBtn: false,
videoShow: false,
lineEditVisible: false,
- lineEditTitle: '弹窗',
+ lineEditTitle: '修改巡逻路线',
polygonAddTitle: '新增活动区域',
polygonAddVisible: false,
polygonName: '',
polygonPositionStr: '',
+ optionColors: [
+ global.DC.Namespace.Cesium.Color.fromBytes(199, 237, 204, 400),
+ global.DC.Namespace.Cesium.Color.fromBytes(250, 249, 222, 400),
+ global.DC.Namespace.Cesium.Color.fromBytes(255, 242, 226, 400),
+ global.DC.Namespace.Cesium.Color.fromBytes(220, 226, 241, 400),
+ global.DC.Namespace.Cesium.Color.fromBytes(233, 235, 254, 400),
+ ],
+ chooseColor: '#FF0000',
+ chooseLineData: {},
+ lineWidth: 100,
+ linePosition: '',
}
},
created () {
@@ -770,7 +792,6 @@
},
mounted () {
this.$parent.$parent.resize('400px', true)
-
this.$nextTick(() => {
if (analyseLayer == null) {
analyseLayer = new global.DC.VectorLayer('analyseLayer')
@@ -952,44 +973,64 @@
this.isHaveLine = res.data.data.some(item => {
return item.type == 1
})
- let count = 0
+ // let count = 0
res.data.data.forEach(item => {
if (item.type == 1 && polylineShow) {
let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- count++
- if (count == 1) {
- if (tc) {
- tc.clear()
- }
- tc = new global.DC.TrackController(global.viewer)
- track = new global.DC.Track(positionNewArr, 15)
- track.setModel('/model/qiche.gltf', {
- scale: 0.5
- })
- tc.addTrack(track)
- let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, 100)
- 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)
+ item.positionStr = positionNewArr
+ // count++
+ // if (count == 1) {
+ // if (tc) {
+ // tc.clear()
+ // }
+ // tc = new global.DC.TrackController(global.viewer)
+ // track = new global.DC.Track(positionNewArr, 15)
+ // track.setModel('/model/qiche.gltf', {
+ // scale: 0.5
+ // })
+ // tc.addTrack(track)
+ let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
+ let polygon = new global.DC.Polygon(coords)
+ let color = ''
+ if (item.color == '') {
+ color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
+ } else {
+ let r = parseInt(item.color.slice(1, 3), 16)
+ let g = parseInt(item.color.slice(3, 5), 16)
+ let b = parseInt(item.color.slice(5, 7), 16)
+ color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
}
+ let position = ''
+ polygon._positions.forEach(item => {
+ position += item._lng + ',' + item._lat + ';'
+ })
+ // polygon.setStyle({
+ // material: color
+ // })
+ // polylineAreaLayer.addOverlay(polygon)
+ // polylineAreaLayer.attrParams = item
+ // polylineAreaLayer.on(global.DC.MouseEventType.CLICK, this.lineOverlayTypeClick)
+ this.$EventBus.$emit('layerPolygonAdd', {
+ layerName: 'newCarDrawLayers',
+ positions: position,
+ material: color,
+ params: item,
+ incident: this.lineOverlayTypeClick
+ })
+ // polylineAreaLayer.show = false
+ let positionStr = ''
+ coords.forEach(item => {
+ positionStr += item[0] + ',' + item[1] + ';'
+ })
+ this.getRegionList(positionStr)
+ // }
this.$EventBus.$emit('layerPolylineAdd', {
layerName: 'newCarDrawLayers',
positions: positionNewArr,
material: global.DC.Color.RED.withAlpha(0.8),
width: 3,
- params: {
- id: item.id,
- carId: item.carId
- },
- incident: this.overlayTypeClick
+ params: item,
+ // incident: this.lineOverlayTypeClick
})
} else if (item.type == 2) {
let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
@@ -1067,8 +1108,18 @@
},
// 修改活动警车
- updateActivityCar (id, carId) {
- updateActivityCar(id, carId).then(res => {
+ updateActivityCar (id, carId, color, width) {
+ updateActivityCar(id, carId, color, width).then(res => {
+ if (res.data.success) {
+ this.$message({
+ message: '保存成功',
+ type: 'warning'
+ })
+ } else {
+ this.$message({
+ message: '保存失败'
+ })
+ }
this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
})
},
@@ -1501,12 +1552,23 @@
this.policeType = e.overlay.attrParams.policemanId
this.policeChooseVisible = true
} else if ('carId' in e.overlay.attrParams) {
+ console.log(e.overlay.attrParams, 1111)
this.policeChooseTitle = '选择警车'
this.policeOption = this.policecarOption
this.policeIconId = e.overlay.attrParams.id
this.policeType = e.overlay.attrParams.carId
this.policeChooseVisible = true
}
+ },
+
+ lineOverlayTypeClick (e) {
+ this.videoShow = false
+ this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
+ this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
+ this.policeIconId = e.overlay.attrParams.id
+ this.linePosition = e.overlay.attrParams.positionStr
+ console.log(11, e, e.overlay.attrParams.id)
+ this.lineEditVisible = true
},
// 保存活动标绘箭头
@@ -1744,11 +1806,21 @@
// 观看视频
watchVideo () {
this.videoShow = true
+ if (tc) {
+ tc.clear()
+ }
+ tc = new global.DC.TrackController(global.viewer)
+ track = new global.DC.Track(this.linePosition, 15)
+ track.setModel('/model/qiche.gltf', {
+ scale: 0.5
+ })
+ tc.addTrack(track)
},
// 保存巡逻路线信息
saveLineInfo () {
- console.log('保存')
+ this.updateActivityCar(this.policeIconId, 2, this.chooseColor, this.lineWidth)
+ this.lineEditVisible = false
},
// 点击区域
@@ -1776,6 +1848,12 @@
return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
},
+ // 改变巡逻路线颜色
+ changeLineColor (color) {
+ this.chooseColor = color
+ },
+
+
},
computed: {
@@ -1785,15 +1863,6 @@
},
- watch: {
- videoShow (val) {
- if (val) {
- document.querySelector('.btn-box').classList.add('btn-box-new-top')
- } else {
- document.querySelector('.btn-box').classList.remove('btn-box-new-top')
- }
- }
- },
destroyed () {
this.$EventBus.$emit('mapRemoveLayer', {
@@ -2207,7 +2276,7 @@
position: fixed;
// bottom: calc(360 / 1080 * 100vh);
// position: absolute;
- top: calc(800 / 1080 * 100vh);
+ top: calc(680 / 1080 * 100vh);
// left: 50%;
left: calc(780 / 1920 * 100vw);
// transform: translate(-40%, 0);
@@ -2235,10 +2304,6 @@
}
}
}
- }
-
- .btn-box-new-top {
- top: calc(680 / 1080 * 100vh);
}
.search-content {
--
Gitblit v1.9.3