From cf0f0e6b4d276df0a5d91c23dad438bf2e92fa1d Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 11 Feb 2023 09:59:57 +0800
Subject: [PATCH] 1
---
src/styles/base/index.scss | 29 +++++
src/views/video/region.vue | 5
src/components/map/index.vue | 18 +-
src/views/activity/index.vue | 202 +++++++++++++++++++++++++++-------------
4 files changed, 176 insertions(+), 78 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 1e367a0..44e4bb1 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -218,15 +218,15 @@
that.switchImg()
// 外网
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- format: 'image/jpeg',
- show: true,
- maximumLevel: 18
- })
- )
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
// 设置地图初始位置，角度等
global.viewer.camera.setView({
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index a8db6f8..4ffd4f3 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -774,6 +774,35 @@
}
}
+.edit-line-box {
+ .el-dialog {
+ margin: 0 !important;
+ display: flex;
+ flex-direction: column;
+ width: 340px;
+ height: 200px;
+ top: 50%;
+ left: 50% !important;
+ transform: translate(-50%, -50%);
+
+ .el-dialog__body {
+ .el-button {
+ padding: 0;
+ background-color: #409eff;
+ color: #fff;
+ width: 60px;
+ height: 30px;
+ text-align: center;
+ }
+
+ &>div {
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 10px;
+ }
+ }
+ }
+}
.select-on-tab {
box-shadow: 0 2px 2px $menu-tab-shadow;
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index 040c93a..4fd8df1 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -130,7 +130,7 @@
</div>
</div>
- <div v-show="dialogVisible&&!polylineBtnSwitch" class="draw-btn-box">
+ <div v-show="dialogVisible" class="draw-btn-box">
<div class="left">
<h3>预案布置</h3>
<div>
@@ -166,6 +166,9 @@
</li>
<li>
<button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
+ </li>
+ <li>
+ <button @click="drawArrow('polygon')" title="多边形">多边形</button>
</li>
</ul>
</div>
@@ -335,7 +338,7 @@
</div>
</div>
- <div class="item video5" v-show="polylineBtnSwitch&&videoShow">
+ <div class="item video5" v-show="videoShow">
<div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
<el-select
size="small"
@@ -364,7 +367,7 @@
</div>
<div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
</div>
- <div class="item video6" v-show="polylineBtnSwitch&&videoShow">
+ <div class="item video6" v-show="videoShow">
<div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
<el-select
size="small"
@@ -393,7 +396,7 @@
</div>
<div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
</div>
- <div class="item video7" v-show="polylineBtnSwitch&&videoShow">
+ <div class="item video7" v-show="videoShow">
<div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
<el-select
size="small"
@@ -424,7 +427,7 @@
</div>
<div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
</div>
- <div class="item video8" v-show="polylineBtnSwitch&&videoShow">
+ <div class="item video8" v-show="videoShow">
<div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
<el-select
size="small"
@@ -453,7 +456,7 @@
</div>
<div class="no-video" v-show="!isHaveMonitor.video8">暂无数据</div>
</div>
- <div class="deleteVideo" v-show="polylineBtnSwitch&&videoShow" @click="videoShow = false">关闭</div>
+ <div class="deleteVideo" v-show="videoShow" @click="videoShow = false">关闭</div>
<el-dialog
:title="policeChooseTitle"
@@ -474,6 +477,32 @@
</el-select>
<el-button @click="determine">确定</el-button>
<el-button @click="cancel">取消</el-button>
+ </div>
+ </el-dialog>
+
+ <el-dialog
+ :title="lineEditTitle"
+ :modal="false"
+ :visible.sync="lineEditVisible"
+ :before-close="lineEditBeforeClose"
+ :close-on-click-modal="true"
+ class="edit-line-box"
+ >
+ <div>
+ <div>设置宽度:</div>
+ <div>
+ <input type="text" />
+ </div>
+ </div>
+ <div>
+ <div>选择颜色:</div>
+ <div>
+ <input type="text" />
+ </div>
+ </div>
+ <div>
+ <el-button>查看视频</el-button>
+ <el-button>保存</el-button>
</div>
</el-dialog>
</div>
@@ -684,10 +713,6 @@
video8: true,
},
flvListPlayer: {
- flvPlayer1: null,
- flvPlayer2: null,
- flvPlayer3: null,
- flvPlayer4: null,
flvPlayer5: null,
flvPlayer6: null,
flvPlayer7: null,
@@ -701,6 +726,8 @@
},
isShowActivityClearBtn: false,
videoShow: false,
+ lineEditVisible: false,
+ lineEditTitle: '弹窗',
}
},
created () {
@@ -943,7 +970,7 @@
id: item.id,
carId: item.carId
},
- // incident: this.overlayTypeClick
+ incident: this.overlayTypeClick
})
} else if (item.type == 2) {
let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
@@ -1189,7 +1216,6 @@
// 切换轨迹播放控件
switchBtnChange (e) {
this.isTrackBtnShow = e
- this.videoShow = e
this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
},
@@ -1286,29 +1312,38 @@
},
drawArrow (type) {
- arrowPlot && arrowPlot.draw(type, overlay => {
- if (overlay) {
- let plotType = ''
- if (type == 'attack_arrow') {
- plotType = 1
- } else if (type == 'double_arrow') {
- plotType = 2
- } else if (type == 'fine_arrow') {
- plotType = 3
- } else if (type == 'tailed_attack_arrow') {
- plotType = 4
- }
- plot.edit(overlay, (e) => {
- let position = ''
- overlay._positions.forEach(item => {
- position += item._lng + ' ' + item._lat + ','
- })
- position = position.slice(0, position.length - 1)
+ if (type == 'polygon') {
+ plot && plot.draw(type, overlay => {
+ if (overlay) {
drawArrowLayers.addOverlay(overlay)
- this.addSecurityPlot(this.showingSecurityId, position, plotType)
- })
- }
- })
+ plot.edit(overlay)
+ }
+ })
+ } else {
+ arrowPlot && arrowPlot.draw(type, overlay => {
+ if (overlay) {
+ let plotType = ''
+ if (type == 'attack_arrow') {
+ plotType = 1
+ } else if (type == 'double_arrow') {
+ plotType = 2
+ } else if (type == 'fine_arrow') {
+ plotType = 3
+ } else if (type == 'tailed_attack_arrow') {
+ plotType = 4
+ }
+ plot.edit(overlay, (e) => {
+ let position = ''
+ overlay._positions.forEach(item => {
+ position += item._lng + ' ' + item._lat + ','
+ })
+ position = position.slice(0, position.length - 1)
+ drawArrowLayers.addOverlay(overlay)
+ this.addSecurityPlot(this.showingSecurityId, position, plotType)
+ })
+ }
+ })
+ }
},
removeAllArrow () {
@@ -1345,21 +1380,23 @@
boxResize (val) {
this.boxShow = val
if (!val) {
- // this.isTrackBtnShow = false
- this.polylineBtnSwitch = false
let videoList = document.querySelectorAll('.item')
videoList.forEach(item => {
- item.classList.add('newtop')
+ item.classList.add('item-new-width')
})
- document.querySelector('.btn-box ').classList.add('btn-box-new-top')
- document.querySelector('.deleteVideo').classList.add('deleteVideo-new-top')
+ 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')
} else {
let videoList = document.querySelectorAll('.item')
videoList.forEach(item => {
- item.classList.remove('newtop')
+ item.classList.remove('item-new-width')
})
- document.querySelector('.btn-box ').classList.remove('btn-box-new-top')
- document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-top')
+ 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')
}
},
@@ -1420,19 +1457,27 @@
// 地图绘制元素点击事件
overlayTypeClick (e) {
+ console.log(e)
this.policeIconIsCreated = true
if ('policemanId' in e.overlay.attrParams) {
this.policeChooseTitle = '选择警员'
this.policeOption = this.policemanOption
this.policeIconId = e.overlay.attrParams.id
this.policeType = e.overlay.attrParams.policemanId
+ this.policeChooseVisible = true
} else if ('carId' in e.overlay.attrParams) {
- this.policeChooseTitle = '选择警车'
- this.policeOption = this.policecarOption
- this.policeIconId = e.overlay.attrParams.id
- this.policeType = e.overlay.attrParams.carId
+ if (e.overlay.attrParams.carId) {
+ this.policeChooseTitle = '选择警车'
+ this.policeOption = this.policecarOption
+ this.policeIconId = e.overlay.attrParams.id
+ this.policeType = e.overlay.attrParams.carId
+ this.policeChooseVisible = true
+ } else {
+ console.log(111)
+ this.lineEditVisible = true
+ }
+
}
- this.policeChooseVisible = true
},
// 保存活动标绘箭头
@@ -1475,7 +1520,6 @@
// 双击修改箭头
reeditArrowDbClick (e) {
- console.log(111, e)
let overlayData = e.overlay
plot.edit(overlayData, (e) => {
let position = ''
@@ -1655,6 +1699,16 @@
return this.isHavePoliceCar || this.isHavePoliceMan
}
+ },
+
+ 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 () {
@@ -1891,12 +1945,13 @@
.draw-btn-box {
position: fixed;
display: flex;
- left: 50%;
+ // left: 50%;
+ left: calc(810 / 1920 * 100vw);
bottom: 40px;
color: #fff;
background: $bg-one-color;
white-space: nowrap;
- transform: translate(-50%, 0);
+ // transform: translate(-50%, 0);
.left,
.right {
@@ -2065,10 +2120,10 @@
}
.btn-box {
- // position: fixed;
+ position: fixed;
// bottom: calc(360 / 1080 * 100vh);
- position: absolute;
- top: calc(620 / 1080 * 100vh);
+ // position: absolute;
+ top: calc(800 / 1080 * 100vh);
// left: 50%;
left: calc(780 / 1920 * 100vw);
// transform: translate(-40%, 0);
@@ -2192,10 +2247,12 @@
.item {
background-color: $bg-color;
- position: absolute;
+ // position: absolute;
+ position: fixed;
z-index: 100;
width: calc((1920 - 400) / 4 / 1920 * 100vw);
height: calc((1080 - 60) / 3 / 1080 * 100vh);
+ top: calc(740 / 1080 * 100vh);
.select {
position: absolute;
@@ -2222,43 +2279,54 @@
}
}
+ .item-new-width {
+ width: 25vw;
+ }
+
.video5 {
left: calc(400 / 1920 * 100vw);
- top: calc(680 / 1080 * 100vh);
}
.video6 {
left: calc(780 / 1920 * 100vw);
- top: calc(680 / 1080 * 100vh);
}
.video7 {
left: calc(1160 / 1920 * 100vw);
- top: calc(680 / 1080 * 100vh);
}
.video8 {
left: calc(1540 / 1920 * 100vw);
- top: calc(680 / 1080 * 100vh);
}
- .newtop {
- top: calc(740 / 1080 * 100vh);
+ .video5-new-left {
+ left: 0;
+ }
+
+ .video6-new-left {
+ left: 25vw;
+ }
+
+ .video7-new-left {
+ left: 50vw;
+ }
+
+ .video8-new-left {
+ left: 75vw;
}
.deleteVideo {
- position: absolute;
+ // position: absolute;
+ position: fixed;
width: 60px;
height: 26px;
line-height: 26px;
- background-color: #eee;
- left: calc(1856 / 1920 * 100vw);
- top: calc(650 / 1080 * 100vh);
+ color: #fff;
+ background-color: $bg-color;
+ left: calc(1860 / 1920 * 100vw);
+ top: calc(710 / 1080 * 100vh);
cursor: pointer;
z-index: 100;
- }
- .deleteVideo-new-top {
- top: calc(710 / 1080 * 100vh);
}
}
</style>
diff --git a/src/views/video/region.vue b/src/views/video/region.vue
index af815f9..3f23b23 100644
--- a/src/views/video/region.vue
+++ b/src/views/video/region.vue
@@ -639,7 +639,7 @@
let lat = item.split(' ')[1]
positionNewStr += lng + ',' + lat + ';'
})
- getRegionList(1, 150, positionNewStr).then(res => {
+ getRegionList(1, 15, positionNewStr).then(res => {
let monitorData = res.data.data.list
console.log(res.data.data.list, 123)
this.monitoringList = res.data.data.list
@@ -1079,7 +1079,8 @@
width: 60px;
height: 26px;
line-height: 26px;
- background-color: #eee;
+ color: #fff;
+ background-color: $bg-color;
left: calc(1480 / 1920 * 100vw);
top: calc(70 / 1080 * 100vh);
cursor: pointer;
--
Gitblit v1.9.3