From e8efe7370ab9f2b9dfb07b0ae70b0e06d98e37c8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 01 Apr 2023 17:18:35 +0800
Subject: [PATCH] 菜单栏调整和视频监控调整，每个页面初始化位置调整
---
src/styles/base/index.scss | 10
src/styles/media/index.scss | 1
src/components/map/components/mapSearchPopup.vue | 18
src/views/policeInfor/index.vue | 7
src/views/activity/index.vue | 5
src/utils/mapPositionInit.js | 2
/dev/null | 1315 --------------------------------------
src/views/home/index.vue | 34
src/views/police/index.vue | 6
src/views/video/region.vue | 13
src/views/layout/index.vue | 38
src/views/video/index.vue | 7
src/views/activity/components/polygonPlot.vue | 4
src/components/map/components/videoListPopup.vue | 19
src/views/video/list.vue | 532 ++++++++-------
15 files changed, 395 insertions(+), 1,616 deletions(-)
diff --git a/src/components/map/components/mapSearchPopup.vue b/src/components/map/components/mapSearchPopup.vue
index c290e81..5397954 100644
--- a/src/components/map/components/mapSearchPopup.vue
+++ b/src/components/map/components/mapSearchPopup.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-02 09:39:32
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-31 17:03:52
+ * @LastEditTime: 2023-04-01 14:43:39
* @FilePath: \srs-police-affairs\src\components\map\components\mapSearchPopup.vue
* @Description:
*
@@ -16,6 +16,7 @@
<div class="content" :class="{ 'scale-dom': scaleDomFlag }">
{{ mapSearchPopupData.name }}
</div>
+ <div class="bottom-arrow"></div>
</div>
</div>
</div>
@@ -65,6 +66,21 @@
left: 0;
z-index: 1 !important;
+ &>.popup-box {
+ position: relative;
+ }
+
+ .bottom-arrow {
+ position: absolute;
+ left: 50%;
+ bottom: 0px;
+ width: 0;
+ height: 0;
+ border: 10px solid transparent;
+ border-top-color: $bg-color;
+ transform: translate(-50%, 100%);
+ }
+
.scale-dom {
transform: scale(3);
transform-origin: left;
diff --git a/src/components/map/components/videoListPopup.vue b/src/components/map/components/videoListPopup.vue
index f99d237..f1a5001 100644
--- a/src/components/map/components/videoListPopup.vue
+++ b/src/components/map/components/videoListPopup.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-02 09:39:32
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-07 11:04:16
+ * @LastEditTime: 2023-04-01 14:41:41
* @FilePath: \srs-police-affairs\src\components\map\components\videoListPopup.vue
* @Description:
*
@@ -16,6 +16,7 @@
<div class="content" :class="{ 'scale-dom': scaleDomFlag }">
{{ videoListPopupData.name }}
</div>
+ <div class="bottom-arrow"></div>
</div>
</div>
</div>
@@ -65,12 +66,28 @@
left: 0;
z-index: 1 !important;
+ &>.popup-box {
+ position: relative;
+ }
+
+ .bottom-arrow {
+ position: absolute;
+ left: 50%;
+ bottom: 0px;
+ width: 0;
+ height: 0;
+ border: 10px solid transparent;
+ border-top-color: $bg-color;
+ transform: translate(-50%, 100%);
+ }
+
.scale-dom {
transform: scale(3);
transform-origin: left;
}
.content {
+ margin-bottom: 10px;
padding: 0.5vh;
width: 220px;
background: $bg-color;
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index e021e9d..d06a88a 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -676,7 +676,6 @@
display: flex;
flex-direction: column;
width: 320px;
- height: 210px;
.el-dialog__body {
flex: 1;
@@ -688,11 +687,20 @@
flex-wrap: wrap;
&>div {
+ width: 100%;
+ height: 36px;
+ line-height: 36px;
display: flex;
+ justify-content: flex-start;
margin-bottom: 6px;
&>div {
width: 100px;
+ line-height: 36px;
+ }
+
+ &.button {
+ justify-content: space-around;
}
}
diff --git a/src/styles/media/index.scss b/src/styles/media/index.scss
index 2bdb8fd..5ba3ef1 100644
--- a/src/styles/media/index.scss
+++ b/src/styles/media/index.scss
@@ -2214,7 +2214,6 @@
.el-dialog {
width: countSizeVw(320, 1920);
- height: countSizeVh(210);
}
.pick-color-box {
diff --git a/src/utils/mapPositionInit.js b/src/utils/mapPositionInit.js
index 9b073f4..642bd68 100644
--- a/src/utils/mapPositionInit.js
+++ b/src/utils/mapPositionInit.js
@@ -7,7 +7,7 @@
global.viewer.flyToPosition(
new global.DC.Position(
Number(homeCenter[0] + 0.046),
- Number(homeCenter[1] - 0.36),
+ Number(homeCenter[1] - 0.284),
Number(36000),
Number(-3),
Number(-45),
diff --git a/src/views/activity/components/drawBtnBox copy.vue b/src/views/activity/components/drawBtnBox copy.vue
deleted file mode 100644
index 4f429bf..0000000
--- a/src/views/activity/components/drawBtnBox copy.vue
+++ /dev/null
@@ -1,1005 +0,0 @@
-<template>
- <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
- <div class="left">
- <h3>预案布置</h3>
- <div>
- <span>要素资源：</span>
- <ul>
- <li>
- <button @click="draw('billboard', 'policeman')" title="警员">
- <img src="/img/icon/police-people-btn.png" style="height:100%" />
- </button>
- </li>
- <li>
- <button @click="draw('billboard', 'policecar')" title="警车">
- <img src="/img/icon/car-btn.png" style="height:100%" />
- </button>
- </li>
- <li>
- <button @click="drawArrow('billboard', 'icon1')" title="普通群众">普通群众</button>
- </li>
- <li>
- <button @click="drawArrow('billboard', 'icon2')" title="保护对象">保护对象</button>
- </li>
- <li>
- <button @click="drawArrow('billboard', 'icon3')" title="危险人物">危险人物</button>
- </li>
- </ul>
- </div>
- <div>
- <span>作战标绘：</span>
-
- <ul>
- <li>
- <button @click="drawArrow('attack_arrow')" title="进攻箭头">进攻箭头</button>
- </li>
- <li>
- <button @click="drawArrow('double_arrow')" title="双箭头">双箭头</button>
- </li>
- <li>
- <button @click="drawArrow('fine_arrow')" title="直箭头">直箭头</button>
- </li>
- <li>
- <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
- </li>
- <li>
- <button @click="drawArrow('polygon')" title="多边形">多边形</button>
- </li>
- <li>
- <button @click="drawArrowLabel" title="文字标注">文字标注</button>
- </li>
- </ul>
- </div>
- <div>
- <span>巡逻路线：</span>
- <ul>
- <li>
- <!-- <el-button
- ></el-button>-->
- <button @click="draw('polyline', 'policecar')" title="巡逻路线">
- <img src="/img/icon/route1.png" style="height:100%" />
- </button>
- </li>
- </ul>
- </div>
- </div>
-
- <el-dialog :title="labelPopupTitle" :modal="false" :visible.sync="addLabelVisible" :close-on-click-modal="true"
- class="add-label-box" :before-close="cancelSaveLabel">
- <div>
- <div class="value-name-box">文字内容：</div>
- <div class="input-width-box">
- <input type="text" v-model="labelInput" placeholder="请输入..." />
- </div>
- </div>
- <div>
- <div class="value-name-box">字体大小：</div>
- <div class="input-fontsize-box">
- <el-input-number v-model="labelInputFontSize" :step="2" :min="12" max="72"
- step-strictly></el-input-number>
- </div>
- </div>
- <div>
- <div class="value-name-box">字体颜色：</div>
- <div class="pick-color-box">
- <el-color-picker v-model="labelInputFontColor" :predefine="predefineColors" size="small">
- </el-color-picker>
- </div>
- </div>
- <div class="btn-box">
- <el-button @click="lableBoxSave">保存</el-button>
- <el-button @click="lableBoxDelete">删除</el-button>
- <el-button @click="cancelSaveLabel">取消</el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import {
- updateActivityCar, updateActivityPolice,
- updateSecurityPlot
-} from '@/api/activity/index.js'
-
-let plotDrawEmit = undefined
-
-let drawArrowLayers = null
-let isAddLabel = false
-
-let curLabelOverLayer = null
-let drawLabelStatus = 'end'
-let labelPositionChange = false
-
-let labelOverLayerID = []
-
-let eventLast = 0
-let addPlotOverlayData = null
-let addPoliceIconOverlayData = null
-let lableOverlayData = null
-
-export default {
- props: [
- 'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
- 'policeSwitch', 'polylineBtnSwitch',
- 'arrowBtnSwitch', 'policeIconId', 'lineWidth'],
-
- data () {
- return {
- addLabelVisible: false,// 文字标注的窗口（内容是名称）
- labelInput: '',
- addLabelPosition: null,
- labelPopupTitle: '添加文字标注',
- labelId: '',
- labelInputFontSize: '40',
- labelInputFontColor: '#FFFFFF',
- 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'
- ],
- }
- },
-
- mounted () {
- drawLabelStatus = 'end'
-
- this.$nextTick(() => {
- plotDrawEmit = new global.DC.Plot(global.viewer, {
- clampToModel: true
- })
-
- if (drawArrowLayers == null) {
- drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
- global.viewer.addLayer(drawArrowLayers)
- }
-
- global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
- global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
- global.viewer.on(global.DC.MouseEventType.LEFT_UP, this.labelUp)
-
- // global.viewer.scene.globe.depthTestAgainstTerrain = true
- })
-
- },
-
- methods: {
- // 地图元素绘制
- draw (poltType, policeType) {
-
- labelPositionChange = false
- drawLabelStatus = 'end'
- isAddLabel = false
-
- let flag = false
-
- const that = this
-
- global.viewer.tooltip.enable = true
-
- plotDrawEmit && plotDrawEmit.draw(poltType, overlay => {
- if (isAddLabel) return
-
- if (poltType == 'billboard' && policeType == 'policeman') {
- overlay.icon = '/img/icon/man3.png'
- } else if (poltType == 'billboard' && policeType == 'policecar') {
- overlay.icon = '/img/icon/car3.png'
- }
-
- if (overlay) {
- addPoliceIconOverlayData = overlay
-
- if (poltType == 'polyline' && 'policecar' == policeType) {
- that.$parent.addLineLayer(overlay)
- } else {
- that.$parent.addPointCircleCarLayer(overlay)
- }
-
- plotDrawEmit.edit(overlay, (e) => {
- flag = true
-
- e.drawType = poltType
-
- e.policeType = policeType
-
- that.$emit('setOverlayObj', e)
-
- document.oncontextmenu = function () {
- if (flag == true && poltType == 'billboard') {
- flag == true && that.$parent.addSaveNewDrawPoint(policeType)
-
- flag = false
- } else if (flag == true && poltType == 'polyline') {
- let position = ''
- e._positions.forEach(item => {
- position += item._lng + ' ' + item._lat + ','
- })
- position = position.slice(0, position.length - 1)
-
- flag == true && that.$parent.addSaveNewDrawLine(position)
-
- flag = false
- }
- }
- })
- }
- }, { material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122) })
- },
-
- drawArrow (type, iconType) {
- labelPositionChange = false
- drawLabelStatus = 'end'
- isAddLabel = false
-
- global.viewer.tooltip.enable = true
-
- const that = this
- let flag = false
-
- if (type == 'polygon') {
- plotDrawEmit && plotDrawEmit.draw(type, overlay => {
- if (isAddLabel) return
-
- if (overlay) {
- addPlotOverlayData = overlay
-
- that.$parent.addArrowsListLayer(overlay)
-
- plotDrawEmit.edit(overlay, (e) => {
- flag = true
-
- let positionStr = ''
- overlay._positions.forEach(item => {
- positionStr += item._lng + ' ' + item._lat + ','
- })
- positionStr = positionStr.slice(0, positionStr.length - 1)
-
- document.oncontextmenu = function () {
- flag == true && that.$parent.addSaveNewDraw(positionStr, 5)
-
- flag = false
- }
- })
- }
- }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
- } else if (type == 'billboard') {
- plotDrawEmit && plotDrawEmit.draw(type, overlay => {
- if (isAddLabel) return
-
- if (iconType == 'icon1') {
- overlay.size = [24, 24]
- } else if (iconType == 'icon2') {
- overlay.size = [32, 32]
- }
- overlay.icon = `/img/icon/${iconType}.png`
- if (overlay) {
- addPlotOverlayData = overlay
-
- that.$parent.addPointCircleCarLayer(overlay)
-
- plotDrawEmit.edit(overlay, (e) => {
- flag = true
-
- document.oncontextmenu = function () {
- if (flag) {
- flag == true && that.$parent.addPointPopupShow(iconType, `${e._position._lng} ${e._position._lat}`)
-
- flag = false
- }
- }
- })
- }
- })
- } else {
- plotDrawEmit && plotDrawEmit.draw(type, overlay => {
- if (isAddLabel) return
-
- 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
- }
-
- addPlotOverlayData = overlay
-
- that.$parent.addArrowsListLayer(overlay)
-
- plotDrawEmit.edit(overlay, (e) => {
- flag = true
- let positionStr = ''
- overlay._positions.forEach(item => {
- positionStr += item._lng + ' ' + item._lat + ','
- })
- positionStr = positionStr.slice(0, positionStr.length - 1)
-
- document.oncontextmenu = function () {
- flag == true && that.$parent.addSaveNewDraw(positionStr, plotType)
-
- flag = false
- }
- })
- }
- }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
- }
- },
-
- // 删除所有地图绘制元素
- removeDraw () {
- addPoliceIconOverlayData != null && !addPoliceIconOverlayData.attrParams && addPoliceIconOverlayData.remove()
- },
-
- removeDrawArrow () {
- addPlotOverlayData != null && addPlotOverlayData.remove()
- labelOverLayerID = []
- },
-
- clearDrawArrow () {
- drawArrowLayers != null && drawArrowLayers.clear()
- },
-
- // 编辑标绘位置
- plotEdit (overlayData, type) {
- if (type == "arrow") {
- if ('pointOverlayData' in overlayData.attrParams) {
- overlayData.attrParams.pointOverlayData.remove()
- }
-
- plotDrawEmit.edit(overlayData, (e) => {
- let position = ''
- if ('_positions' in overlayData) {
- overlayData._positions.forEach((item, index) => {
- position += item._lng + ' ' + item._lat + ','
- })
- position = position.slice(0, position.length - 1)
- } else {
- overlayData.position = {
- lng: Number(overlayData._position._lng),
- lat: Number(overlayData._position._lat),
- alt: 0.5,
- }
- position = overlayData._position._lng + ' ' + overlayData._position._lat + ',' + overlayData._position._lng + ' ' + overlayData._position._lat
- let pointPosition = new global.DC.Position(Number(overlayData._position._lng), Number(overlayData._position._lat), 0)
- let point = new global.DC.Point(pointPosition)
- drawArrowLayers.addOverlay(point)
- point.attrParams = { 'id': overlayData.attrParams.id, 'color': overlayData.attrParams.color, 'item': overlayData.attrParams }
- let r = parseInt(overlayData.attrParams.color.slice(1, 3), 16)
- let g = parseInt(overlayData.attrParams.color.slice(3, 5), 16)
- let b = parseInt(overlayData.attrParams.color.slice(5, 7), 16)
- let a = Math.floor(Number(overlayData.attrParams.color.split(',')[1]) * 2.55)
- let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
- point.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- overlayData.attrParams.pointOverlayData = point
- }
- this.updateSecurityPlot({ id: overlayData.attrParams.id, position: position })
- })
- } else if (type == "line") {
- let lineOverlayData = overlayData.attrParams.lineObj
-
- plotDrawEmit.edit(lineOverlayData, (e) => {
- let position = ''
- let lineNewPositions = []
- lineOverlayData._positions.forEach((item, index) => {
- if (index % 2 == 0) {
- position += item._lng + ' ' + item._lat + ','
- lineNewPositions.push(item)
- }
- })
- overlayData.attrParams.lineObj.positions = lineNewPositions
- position = position.slice(0, position.length - 1)
-
- this.updateActivityCar({
- id: overlayData.attrParams.id,
- color: overlayData.attrParams.color,
- width: overlayData.attrParams.width,
- type: 1,
- position: position
- }, overlayData)
- })
- }
- },
-
- // 保存新增标绘样式修改
- addNewPlot (item) {
- 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)
- let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
- let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
- if (item.type == 9) {
- let position = item.position.slice(12, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
- position = position.split(';')[0].split(',')
- position = new global.DC.Position(Number(position[0]), Number(position[1]))
- let label = new global.DC.Label(position, item.name)
- label.attrParams = { 'id': item.id, item }
- label.setStyle({
- 'fillColor': color,
- "font": `${item.width}px sans-serif`,
- })
- this.lableAllEvent(label)
-
- this.$parent.addArrowsListLayer(label)
- return
- }
-
- addPlotOverlayData.attrParams = { 'id': item.id, 'color': item.color, item }
- addPlotOverlayData.setStyle({
- "material": color
- })
- addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
- if (item.type == 6 || item.type == 7 || item.type == 8) {
- let position = item.position.slice(12, item.position.length - 2).split(',')[0].split(' ')
- let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]))
- addPlotOverlayData.position = {
- lng: Number(position[0]),
- lat: Number(position[1]),
- alt: 0.5,
- }
- let point = new global.DC.Point(pointPosition)
-
- this.$parent.addPointCircleCarLayer(point)
-
- point.attrParams = { 'id': item.id, 'color': item.color, item }
- // point.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
- point.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- addPlotOverlayData.attrParams.pointOverlayData = point
- }
- if (item.type == 5 && item.areaType == 2) {
- let addPlotPositionArr = []
- addPlotOverlayData._positions.forEach(inItem => {
- addPlotPositionArr.push([Number(inItem._lng), Number(inItem._lat)])
- })
- addPlotPositionArr.push([Number(addPlotOverlayData._positions[0]._lng), Number(addPlotOverlayData._positions[0]._lat)])
- let cachePolygon = this.$turf.polygon([addPlotPositionArr])
- let arrowsListLayerOverlayList = this.$parent.getArrowsListLayerOverlayList()
- arrowsListLayerOverlayList.push(...drawArrowLayers.getOverlays())
- arrowsListLayerOverlayList.forEach(inItem => {
- if (inItem.attrParams.item.type == 5 && inItem.attrParams.item.areaType == 1) {
- let savePlotPositionArr = []
- let savePlotPositionStr = []
- inItem._positions.forEach(ininItem => {
- savePlotPositionArr.push([Number(ininItem._lng), Number(ininItem._lat)])
- savePlotPositionStr += ininItem._lng + ',' + ininItem._lat + ';'
- })
- savePlotPositionArr.push([Number(inItem._positions[0]._lng), Number(inItem._positions[0]._lat)])
- let carePolygon = this.$turf.polygon([savePlotPositionArr])
- let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
- // 如果完全包含就作为洞面扣去
- if (isContains) {
- addPlotOverlayData.holes = [savePlotPositionStr]
- }
-
- }
- })
- }
- },
-
- // 保存新增警力资源
- addNewPolice (data, type, carType) {
- // 巡逻路线添加
- if (type == 'policecar' && carType == 1) {
- // 线坐标字符串
- let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data.position, data.type)
- positionNewArr = positionNewArr.slice(1, positionNewArr.length - 2)
- // 范围面坐标串
- let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, data.width != -1 ? data.width : 100)
- let positionStr = ''
- coords.forEach((item, index) => {
- if (!(index == coords.length - 1)) {
- positionStr += item[0] + ',' + item[1] + ';'
- }
- })
- let polygonSavePositionStr = positionStr + coords[0][0] + ',' + coords[0][1] + ';'
- positionStr = positionStr.slice(0, positionStr.length - 1)
- // 面颜色
- let color = ''
- // 线颜色
- let lineColor = ''
- if (data.color == '') {
- color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
- } else {
- let r = parseInt(data.color.slice(1, 3), 16)
- let g = parseInt(data.color.slice(3, 5), 16)
- let b = parseInt(data.color.slice(5, 7), 16)
- color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
- lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
- }
- addPoliceIconOverlayData.setStyle({
- "material": lineColor,
- 'width': 3
- })
-
- data.linePositionStr = positionNewArr
- data.polygonPositionStr = polygonSavePositionStr
- data.lineObj = addPoliceIconOverlayData
-
- addPoliceIconOverlayData.attrParams = data
-
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'newCarDrawLineLayers',
- positions: positionStr,
- material: color,
- params: data,
- incident: this.$parent.lineOverlayTypeClick
- })
- } else {
- let positionObj = this.$parent.convertBillboardPositionDate(data, type)
- positionObj.lng = positionObj.lng.slice(1, positionObj.lng.length - 1)
- positionObj.lat = positionObj.lat.slice(0, positionObj.lat.length - 2)
- let positionArr = data.position.slice(7, data.position.length - 2).split(',')[0].split(' ')
- let position = new global.DC.Position(Number(positionArr[0]), Number(positionArr[1]))
- let point = new global.DC.Point(position)
- let color = ''
- if (data.color == '') {
- color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
- } else {
- let r = parseInt(data.color.slice(1, 3), 16)
- let g = parseInt(data.color.slice(3, 5), 16)
- let b = parseInt(data.color.slice(5, 7), 16)
- color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
- }
- point.attrParams = positionObj
- this.$parent.addPointCircleCarLayer(point)
- point.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- // point.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
- point.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
- point.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
- addPoliceIconOverlayData.attrParams = positionObj
- addPoliceIconOverlayData.attrParams.pointOverlayData = point
- addPoliceIconOverlayData.position = {
- lng: Number(positionArr[0]),
- lat: Number(positionArr[1]),
- alt: 0.5,
- }
- addPoliceIconOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
- // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
- // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
- }
- },
-
- // 修改标绘样式
- editPlotStyle (params, overlay) {
- if ('color' in params) {
- let r = parseInt(params.color.slice(1, 3), 16)
- let g = parseInt(params.color.slice(3, 5), 16)
- let b = parseInt(params.color.slice(5, 7), 16)
- let a = Math.floor(Number(params.color.split(',')[1]) * 2.55) ? Math.floor(Number(params.color.split(',')[1]) * 2.55) : 255
- let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
- overlay.attrParams.color = params.color
- if (overlay.attrParams.item.type == 9) {
- overlay.setStyle({
- "fillColor": color
- })
- } else {
- overlay.setStyle({
- "material": color
- })
- }
- if ('pointOverlayData' in overlay.attrParams) {
- let r = parseInt(params.color.slice(1, 3), 16)
- let g = parseInt(params.color.slice(3, 5), 16)
- let b = parseInt(params.color.slice(5, 7), 16)
- let a = Math.floor(Number(params.color.split(',')[1]) * 2.55)
- let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
- overlay.attrParams.pointOverlayData.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- }
- }
- if ('name' in params) {
- addPlotOverlayData.text = params.name
- }
-
- if ('width' in params) {
- overlay.setStyle({
- "font": `${params.width}px sans-serif`
- })
- }
- },
-
- // 修改警车样式
- editPoliceStyle (params, overlay) {
- if ('color' in params && 'pointOverlayData' in overlay.attrParams) {
- overlay.attrParams.data.color = params.color
- overlay.attrParams.pointOverlayData.attrParams.color = params.color
- let r = parseInt(params.color.slice(1, 3), 16)
- let g = parseInt(params.color.slice(3, 5), 16)
- let b = parseInt(params.color.slice(5, 7), 16)
- let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
- overlay.attrParams.pointOverlayData.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- }
-
- if ('carId' in params) {
- overlay.attrParams.data.carId = params.carId
- }
-
- if ('policemanId' in params) {
- overlay.attrParams.data.policemanId = params.policemanId
- }
-
- if ('width' in params) {
- if (overlay.attrParams && overlay.attrParams.data && overlay.attrParams.data.type && overlay.attrParams.data.type == 3) {
- overlay.attrParams.data.width = params.width
- } else {
- let linePosition = ''
- if ('position' in params) {
- linePosition = params.position.replace(/,/g, ";").replace(/ /g, ",")
- } else {
- linePosition = overlay.attrParams.linePositionStr
- }
- let coords = global.DC.GeoTools.polylineBuffer(linePosition, params.width)
- let positionStr = ''
- coords.forEach((item, index) => {
- if (!(index == coords.length - 1)) {
- positionStr += item[0] + ',' + item[1] + ';'
- }
- })
- positionStr = positionStr.slice(0, positionStr.length - 1)
- // 面颜色
- let color = ''
- // 线颜色
- let lineColor = ''
- if (params.color == '') {
- color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
- } else {
- let r = parseInt(params.color.slice(1, 3), 16)
- let g = parseInt(params.color.slice(3, 5), 16)
- let b = parseInt(params.color.slice(5, 7), 16)
- color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
- lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
- }
- overlay.attrParams.lineObj.setStyle({
- "material": lineColor,
- 'width': 3
- })
- overlay.attrParams.linePositionStr = linePosition
- overlay.attrParams.polygonPositionStr = positionStr
- overlay.attrParams.color = params.color
- overlay.attrParams.width = params.width
-
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'newCarDrawLineLayers',
- positions: positionStr,
- material: color,
- params: overlay.attrParams,
- incident: this.$parent.lineOverlayTypeClick
- })
-
- overlay.remove()
- }
- }
- },
-
- // 修改警车
- // idid, carId警车id, color颜色, width巡逻路线范围宽度, type线面类型, position坐标
- updateActivityCar (params, overlay) {
- updateActivityCar(params).then(res => {
- if (res.data.success) {
- this.editPoliceStyle(params, overlay)
- this.$message({
- message: '保存成功',
- type: 'success'
- })
- } else {
- this.$message({
- message: '保存失败',
- type: 'error'
- })
- }
-
- })
- },
-
- // 修改警员
- // idid, policemanId警察id ,color颜色
- updateActivityPolice (params, overlay) {
- updateActivityPolice(params).then(res => {
- if (res.data.success) {
- this.$message({
- message: '保存成功',
- type: 'success'
- })
- this.editPoliceStyle(params, overlay)
- } else {
- this.$message({
- message: '保存失败',
- type: 'error'
- })
- }
- })
- },
-
- updateSecurityPlot (params, overlay) {
- updateSecurityPlot(params).then(res => {
- if (res.data.success) {
- this.editPlotStyle(params, overlay)
- this.$message({
- message: '修改成功',
- type: 'success'
- })
- } else {
- this.$message({
- message: '修改失败',
- type: 'error'
- })
- }
- })
- },
-
- // 绘制文字标绘
- drawArrowLabel () {
- global.viewer.tooltip.enable = false
- plotDrawEmit != null && plotDrawEmit.stop()
-
- isAddLabel = true
- this.labelPopupTitle = ""
- drawLabelStatus = 'start'
-
- this.$emit('drawLabel', drawLabelStatus)
- },
-
- /**
- * @description: 点击覆盖物获取到的位置信息
- * @param {*} e
- * @return {*}
- */
- overlayClickPosition (e) {
- this.labelShowPopup(e)
- },
-
- /**
- * @description: 点击地图拿到的位置信息
- * @param {*} e
- * @return {*}
- */
- viewerClick (e) {
- if (drawLabelStatus == 'start') {
- this.labelShowPopup(e)
- }
- },
-
- // 文字编辑弹窗
- labelShowPopup (e) {
- this.labelPopupTitle = '添加文字标注'
- this.labelInputFontSize = 40
- this.labelInputFontColor = '#FFFFFF'
- this.addLabelVisible = true
- this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat
- this.labelInput = ''
- },
-
- // 文字标注窗口的添加按钮
- lableBoxSave () {
- if (this.labelInput == '') {
- this.$message({
- message: '请输入标注文字',
- type: 'error'
- })
- } else {
- if (this.labelPopupTitle == "添加文字标注") {
- this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize })
- } else {
- this.updateSecurityPlot({ id: this.labelId, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize }, addPlotOverlayData)
- }
- this.cancelSaveLabel()
- }
- },
-
- // 文字标注窗口的删除按钮
- lableBoxDelete () {
- this.$parent.deleteSecurityPlot(this.labelId)
- addPlotOverlayData && addPlotOverlayData.remove()
- this.cancelSaveLabel()
- },
-
- lableAllEvent (label) {
- labelOverLayerID.push(label.attrParams.id)
- label.on(global.DC.MouseEventType.CLICK, this.reEditLabel)
- label.on(global.DC.MouseEventType.LEFT_DOWN, this.labelDowm)
- },
-
- labelDowm (e) {
- eventLast = 0
-
- setTimeout(() => {
- if (eventLast == 0) {
- this.$EventBus.$emit('closeTooltip')
-
- labelPositionChange = true
- curLabelOverLayer = e.overlay
- global.viewer.scene.screenSpaceCameraController.enableRotate = false
- global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)
- }
- }, 500)
- },
-
- labelUp (e) {
- eventLast = new Date().getTime()
- if (labelPositionChange == true) {
- global.viewer.scene.screenSpaceCameraController.enableRotate = true
- global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)
-
- // curLabelOverLayer 中的位置就是移动后的位置
- let position = curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat + ',' + curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat
- this.updateSecurityPlot({ id: curLabelOverLayer.attrParams.id, position: position })
- labelPositionChange = false
- }
- },
-
- updateLableMove (e) {
- this.$EventBus.$emit('closeTooltip')
- curLabelOverLayer.position = {
- lng: e.wgs84SurfacePosition.lng,
- lat: e.wgs84SurfacePosition.lat,
- alt: e.wgs84SurfacePosition.alt,
- heading: curLabelOverLayer.position.heading,
- pitch: curLabelOverLayer.position.pitch,
- roll: curLabelOverLayer.position.roll,
- }
- },
-
- viewerLableMove (e) {
- if (isAddLabel == true) {
- this.$EventBus.$emit('showTooltip', {
- position: e.windowPosition,
- text: '单击选择文字标注位置'
- })
- } else {
- if (e.overlay && e.overlay.attrParams && e.overlay.attrParams.id) {
- const flag = labelOverLayerID.some(item => item == e.overlay.attrParams.id)
-
- if (flag == true && labelPositionChange != true) {
- this.$EventBus.$emit('showTooltip', {
- position: e.windowPosition,
- text: '长按开启拖拽,单击修改名称'
- })
- }
- } else {
- this.$EventBus.$emit('closeTooltip')
- }
- }
- },
-
- // 关闭添加标注弹窗
- cancelSaveLabel () {
- isAddLabel = false
- this.addLabelVisible = false
- drawLabelStatus = 'end'
- this.$EventBus.$emit('closeTooltip')
- },
-
- // 单击文字标绘
- reEditLabel (e) {
- addPlotOverlayData = e.overlay
- this.$EventBus.$emit('closeTooltip')
- this.labelId = addPlotOverlayData.attrParams.id
- this.labelPopupTitle = "修改文字标注"
- this.labelInput = addPlotOverlayData.text
- this.labelInputFontSize = Number(addPlotOverlayData.attrParams.item.width)
- this.labelInputFontColor = addPlotOverlayData.attrParams.item.color
- this.addLabelVisible = true
- },
-
-
- },
-
- destroyed () {
- plotDrawEmit != null && plotDrawEmit.stop()
-
- drawArrowLayers.clear()
- drawArrowLayers = null
-
- labelOverLayerID = []
-
- global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
- global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
- global.viewer.off(global.DC.MouseEventType.LEFT_UP, this.labelUp)
- },
-}
-</script>
-
-<style lang="scss" scoped>
-.draw-btn-box {
- position: fixed;
- display: flex;
- // left: 50%;
- bottom: 40px;
- color: #fff;
- background: $bg-one-color;
- white-space: nowrap;
- // transform: translate(-50%, 0);
-
- .left,
- .right {
- height: 100%;
-
- &>div {
- display: flex;
- }
-
- ul {
- display: flex;
-
- li {
- button {
- height: 30px;
- margin: 0 5px;
- background-color: $bg-color;
- border: 1px solid #cecece;
- border-radius: 4px;
- color: #fff;
- cursor: pointer;
- outline: none;
- }
- }
- }
- }
-
- .left {
- width: 100%;
-
- h3 {
- font-size: 16px;
- height: 30px;
- line-height: 30px;
- width: 100%;
- // padding-left: 16%;
- }
- }
-
- .right {
- width: 20%;
- padding-top: 35px;
-
- ul {
- flex-direction: column;
-
- li {
- height: 50px;
-
- button {
- background-color: #2a56cf;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index 9ce360c..d9c94d4 100644
--- a/src/views/activity/components/polygonPlot.vue
+++ b/src/views/activity/components/polygonPlot.vue
@@ -13,7 +13,7 @@
<div>
<div class="value-name-box">设置透明度：</div>
<div class="alpha">
- <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
+ <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
</div>
</div>
<div v-show="!polygonName" class="placeholder"></div>
@@ -46,7 +46,7 @@
<div class="line">
<div class="value-name-box">设置透明度：</div>
<div class="alpha">
- <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
+ <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
</div>
</div>
<div class="placeholder" v-show="!isNeedPolygonType"></div>
diff --git a/src/views/activity/components/publicIndex copy.vue b/src/views/activity/components/publicIndex copy.vue
deleted file mode 100644
index ee5cb15..0000000
--- a/src/views/activity/components/publicIndex copy.vue
+++ /dev/null
@@ -1,772 +0,0 @@
-<template>
- <div>
- <layers-show-control :dialogVisible="dialogVisible" :isHavePolice="isHavePolice" :isHaveArrow="isHaveArrow"
- :isHaveLine="isHaveLine" :policeSwitch="policeSwitch" :arrowBtnSwitch="arrowBtnSwitch"
- :polylineBtnSwitch="polylineBtnSwitch"></layers-show-control>
-
- <polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId"></polygon-plot>
- <polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot>
-
- <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
- :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch"
- :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth"
- @setOverlayObj="setOverlayObj" @drawLabel="drawLabel" @setPoliceOption="setPoliceOption"></draw-btn-box>
-
- <police-car-change ref="PoliceCarChange" :policeOption="policeOption"
- :policeIconId="policeIconId"></police-car-change>
-
- <police-person-change ref="PolicePersonChange" :policeTreeData="policeTreeData"></police-person-change>
-
- <activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
- @closeActivityDetails="closeActivityDetails"></activity-detail>
-
- <video-control-box ref="VIDEOCONTROLBOX"></video-control-box>
- </div>
-</template>
-
-<script>
-import {
- getSecurityPoliceList,
- getSecurityCarList,
- getSecurityPlotList,
- getPolicemanTree,
- getCarList
-} from '@/api/activity/index.js'
-
-import layersShowControl from './layersShowControl.vue'
-import polygonPlot from './polygonPlot.vue'
-import polylinePlot from './polylinePlot.vue'
-import drawBtnBox from './drawBtnBox.vue'
-import policeCarChange from './policeCarChange.vue'
-import policePersonChange from './policePersonChange.vue'
-import activityDetail from './activityDetail.vue'
-import videoControlBox from './videoControlBox.vue'
-
-
-// 要素的
-let pointCircleCarLayer = null
-// 作战的
-let arrowsListLayer = null
-// 巡逻的
-let lineLayer = undefined
-
-let drawLabelStatus = 'end'
-
-let policecarOption = []
-
-export default {
- inject: ['userInfo'],
-
- data () {
- return {
- dialogVisible: false,
- isShowActivityEditBox: false,
- activityDetails: {},
- isHaveLine: false,
- isHaveArrow: false,
- policeSwitch: true,
- arrowBtnSwitch: true,
- polylineBtnSwitch: true,
- policeTreeData: [],
- policeOption: [],
- policeIconId: '',
- policeType: '',
- pointAreaWidth: '',
- choosePoliceColor: '',
- searchPoliceTreeId: '',
- searchPoliceTreeName: '',
- policeIconIsCreated: false,
- policeChooseVisible: false,
- chooseCarColor: '',
- policeChooseCarVisible: false,
- isChoosePoliceElementDisabled: false,
- showingSecurityId: '',
- isHavePoliceCar: false,
- isHavePoliceMan: false,
- }
- },
-
- components: {
- layersShowControl,
- drawBtnBox,
- polygonPlot,
- polylinePlot,
- policeCarChange,
- policePersonChange,
- activityDetail,
- videoControlBox
- },
-
- computed: {
- isHavePolice () {
- return this.isHavePoliceCar || this.isHavePoliceMan
- }
- },
-
- mounted () {
- this.$nextTick(() => {
- if (pointCircleCarLayer == null) {
- pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
- global.viewer.addLayer(pointCircleCarLayer)
- }
-
- if (arrowsListLayer == null) {
- arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
- global.viewer.addLayer(arrowsListLayer)
- }
-
- if (lineLayer == null) {
- lineLayer = new global.DC.VectorLayer('lineLayer')
- global.viewer.addLayer(lineLayer)
- }
- })
- },
- methods: {
- addNewPolice (data, type, dataType = '') {
- this.$refs.DRAWBTNBOX.addNewPolice(data, type, dataType)
- },
-
-
- addPointPopupShow (type, positions) {
- this.$refs.PolygonPlotPage.addPointPopupShow(type, positions)
- },
-
- addSaveNewDrawPoint (type) {
- if (type == 'policeman') {
- this.$refs.PolicePersonChange.addPopupShow()
- } else if (type == 'policecar') {
- this.policeOption = policecarOption
- this.$refs.PoliceCarChange.addPopupShow()
- }
- },
- // 要素资源添加
- addPointCircleCarLayer (overlay) {
- pointCircleCarLayer.addOverlay(overlay)
- },
-
- addSaveNewDraw (positions, type) {
- this.$refs.PolygonPlotPage.addPopupShow(positions, type)
- },
- // 作战标绘的添加
- addArrowsListLayer (overlay) {
- arrowsListLayer.addOverlay(overlay)
- },
-
- addSaveNewDrawLine (positions) {
- this.$refs.PolylinePlotPage.addPopupShow(positions)
- },
- // 巡逻路线的添加
- addLineLayer (overlay) {
- lineLayer.addOverlay(overlay)
- },
-
- // 视频查看
- lookStartVideo (line, polygon) {
- this.$refs.VIDEOCONTROLBOX.watchVideo(line, polygon)
- },
-
- // 关闭详情弹窗
- closeActivityDetails () {
- this.dialogVisible = false
- this.polylineBtnSwitch = false
- this.$refs.VIDEOCONTROLBOX.closeVideo()
- this.$parent.currentTreeItem = ''
- this.$parent.activeActivityIndex = ''
-
- this.clearOrRemoveLayerAll('clear')
- },
-
- addNewPlot (data) {
- this.$refs.DRAWBTNBOX.addNewPlot(data)
- },
-
- removeDraw () {
- this.$refs.DRAWBTNBOX.removeDraw()
- },
-
- removeDrawArrow () {
- this.$refs.DRAWBTNBOX.removeDrawArrow()
- },
-
- plotEdit (overlay, type) {
- this.$refs.DRAWBTNBOX.plotEdit(overlay, type)
- },
-
- updateSecurityPlot (params, overlay) {
- this.$refs.DRAWBTNBOX.updateSecurityPlot(params, overlay)
- },
-
- updateActivityPolice (params, overlay) {
- this.$refs.DRAWBTNBOX.updateActivityPolice(params, overlay)
- },
-
- updateActivityCar (params, overlay) {
- this.$refs.DRAWBTNBOX.updateActivityCar(params, overlay)
- },
-
- setOverlayObj (e) {
- this.$refs.PoliceCarChange.setOverlayObj(e)
- this.$refs.PolicePersonChange.setOverlayObj(e)
- },
-
- drawLabel (status) {
- drawLabelStatus = status
- },
-
- reloadAll (params) {
- // 当前选中的ID
- this.showingSecurityId = params.item.id
- // 当前选中的详情
- this.activityDetails = params.item
- this.dialogVisible = true
-
- if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == params.item.deptId) {
- this.isShowActivityEditBox = true
- } else {
- this.isShowActivityEditBox = false
- }
-
- this.$refs.DRAWBTNBOX.removeDraw()
- this.$refs.DRAWBTNBOX.clearDrawArrow()
-
- this.policeSwitch = true
- this.arrowBtnSwitch = true
- this.polylineBtnSwitch = true
-
- this.clearOrRemoveLayerAll('clear')
-
- this.getPolicemanTree({ deptId: params.deptId })
- this.getCarList({ deptId: params.deptId })
-
- this.getSecurityPlotList(params.id)
- this.getSecurityPoliceList(params.id)
- this.getSecurityCarList(params.id)
- },
-
- // 获取树状警员列表
- getPolicemanTree (params) {
- getPolicemanTree(params).then(res => {
- this.policeTreeData = res.data.data
- })
- },
-
- // 获取警车列表，生成下拉数据
- getCarList (params) {
- getCarList(params).then(res => {
- res.data.data.forEach(item => {
- policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}`, carType: `${item.carType}`, serialNumber: `${item.serialNumber}`, unitCode: `${item.unitCode}`, unitName: `${item.unitName}`, carNo: `${item.carNo}`, deptName: `${item.deptName}` })
- })
-
- this.policeOption = policecarOption
- })
- },
-
- // 获取标绘箭头列表
- getSecurityPlotList (securityId) {
- this.$refs.DRAWBTNBOX.removeDrawArrow()
-
- getSecurityPlotList(securityId).then(res => {
- // 要素资源
- this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6)
- this.$parent.protectedPeopleList = res.data.data.filter(item => item.type == 7)
- this.$parent.dangerousPeopleList = res.data.data.filter(item => item.type == 8)
-
- // 作战标绘
- this.$parent.attackArrowList = res.data.data.filter(item => item.type == 1)
- this.$parent.doubleArrowList = res.data.data.filter(item => item.type == 2)
- this.$parent.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
- this.$parent.fineArrowList = res.data.data.filter(item => item.type == 4)
- this.$parent.polygonList = res.data.data.filter(item => item.type == 5)
- this.$parent.labelMarkList = res.data.data.filter(item => item.type == 9)
-
- this.isHaveArrow = res.data.data.some(item => {
- return item
- })
- let plotList = res.data.data
- res.data.data.forEach(item => {
- let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
- let chooseArrow = null
- // let nameLabel = null
- let color = ''
- if (item.color == '') {
- color = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
- } 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)
- let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
- color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
- }
- if (item.type == 1) {
- chooseArrow = new global.DC.AttackArrow(position)
- arrowsListLayer.addOverlay(chooseArrow)
- } else if (item.type == 2) {
- chooseArrow = new global.DC.DoubleArrow(position)
- arrowsListLayer.addOverlay(chooseArrow)
- } else if (item.type == 3) {
- chooseArrow = new global.DC.FineArrow(position)
- arrowsListLayer.addOverlay(chooseArrow)
- } else if (item.type == 4) {
- chooseArrow = new global.DC.TailedAttackArrow(position)
- arrowsListLayer.addOverlay(chooseArrow)
- } else if (item.type == 5) {
- chooseArrow = new global.DC.Polygon(position)
- arrowsListLayer.addOverlay(chooseArrow)
- // 缓存区的话需要扣去包含的核心区
- if (item.areaType == 2) {
- let itemPositionArr = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
- itemPositionArr.push(itemPositionArr[0])
- itemPositionArr = itemPositionArr.map(item => {
- return item.split(',').map(Number)
- })
- let cachePolygon = this.$turf.polygon([itemPositionArr])
- plotList.forEach(inItem => {
- // 查询被包含的核心区
- if (inItem.areaType == 1 && inItem.type == 5) {
- let inItemPositionArr = inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
- inItemPositionArr.push(inItemPositionArr[0])
- inItemPositionArr = inItemPositionArr.map(item => {
- return item.split(',').map(Number)
- })
- if (inItemPositionArr.length == 3 && inItemPositionArr[0][0] == inItemPositionArr[2][0] &&
- inItemPositionArr[2][1] == inItemPositionArr[0][1]) {
- return
- }
- let carePolygon = this.$turf.polygon([inItemPositionArr])
- let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
- // 如果完全包含就作为洞面扣去
- if (isContains) {
- chooseArrow.holes = [inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')]
- }
-
- }
- })
- }
- // let center = this.getCenter(item.position)
- // let centerPosition = new global.DC.Position(center[0], center[1])
- // nameLabel = new global.DC.Label(centerPosition, item.name)
- // arrowsListLayer.addOverlay(nameLabel)
- // nameLabel.setStyle({
- // "font": "30px",
- // })
- } else if (item.type == 9) {
- position = position.split(';')[0].split(',')
- position = new global.DC.Position(Number(position[0]), Number(position[1]))
- let label = new global.DC.Label(position, item.name)
- label.attrParams = { 'id': item.id, item }
- this.$refs.DRAWBTNBOX.lableAllEvent(label)
- label.setStyle({
- 'fillColor': color,
- "font": `${item.width}px sans-serif`,
- })
- arrowsListLayer.addOverlay(label)
- } else if (item.type == 6 || item.type == 7 || item.type == 8) {
- let iconImgName = ''
- if (item.type == 6) {
- iconImgName = 'icon1'
- } else if (item.type == 7) {
- iconImgName = 'icon2'
- } else if (item.type == 8) {
- iconImgName = 'icon3'
- }
- position = position.split(';')[0].split(',')
- let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]), 4)
- position = new global.DC.Position(Number(position[0]), Number(position[1]), 4.5)
- chooseArrow = new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
- chooseArrow.size = item.type == 6 ? [24, 24] : [32, 32]
-
- pointCircleCarLayer.addOverlay(chooseArrow)
- chooseArrow.setStyle({
- "material": color,
- })
-
- let point = new global.DC.Point(pointPosition)
- pointCircleCarLayer.addOverlay(point)
- point.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
- point.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
- }
-
- if (chooseArrow != null) {
- if (!(item.type == 6 || item.type == 7 || item.type == 8)) {
- chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
- }
- chooseArrow.setStyle({
- "material": color,
- })
- chooseArrow.off(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
- chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
- }
- })
- })
- },
-
- // 获取警员分布信息
- getSecurityPoliceList (securityId) {
- this.$refs.DRAWBTNBOX.removeDraw()
-
- getSecurityPoliceList(securityId).then(res => {
- this.isHavePoliceMan = res.data.data.some(item => {
- return item.type == 3
- })
-
- this.addMapCarAndPersonLayers(
- res.data.data.filter(item => item.type == 3),
- 'policeman',
- pointCircleCarLayer,
- 'newFactorResourcesLayers')
- })
- },
-
- /**
- * @description: 警力资源警车和巡逻路线的
- * @param {*} securityId
- * @param {*} polylineShow
- * @return {*}
- */
- getSecurityCarList (securityId) {
-
- getSecurityCarList(securityId).then(res => {
- this.isHavePoliceCar = res.data.data.some(item => {
- return item.type == 3
- })
-
- this.isHaveLine = res.data.data.some(item => {
- return item.type == 1
- })
-
- this.addMapCarAndPersonLayers(
- res.data.data.filter(item => item.type == 3),
- 'policecar',
- pointCircleCarLayer,
- 'newFactorResourcesLayers')
- this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
- })
- },
-
-
- /**
- * @description: 警力资源地图添加
- * @param {*} data
- * @param {*} type
- * @param {*} curLayer
- * @param {*} mapLayer
- * @return {*}
- */
- addMapCarAndPersonLayers (data, type, curLayer, mapLayer) {
- if (type == 'policecar') {
- this.$parent.chooseActivityPoliceCarList = data
- } else {
- this.$parent.chooseActivityPoliceManList = data
- }
- data.forEach(item => {
- let positionObj = this.$parent.convertBillboardPositionDate(item, type)
- let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
- let point = new global.DC.Point(position)
- 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, 255)
- }
- point.attrParams = positionObj
-
- curLayer.addOverlay(point)
-
- point.setStyle({
- "color": color, //颜色
- "outlineColor": color, //边框颜色
- "outlineWidth": 0, //边框大小，
- "pixelSize": 32,
- })
- // point.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
- point.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
- point.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
-
-
- // 预警范围先不显示
- // let circle = new global.DC.Circle(position, item.width != -1 ? item.width : 100)
- // curLayer.addOverlay(circle)
- // circle.setStyle({
- // "material": global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 100), //颜色
- // })
-
- positionObj.pointOverlayData = point
- this.$EventBus.$emit('layerPointAdd', {
- layerName: mapLayer,
- type: 'billboard',
- params: positionObj,
- incident: this.overlayTypeClick,
- mouseOverIncident: this.pointMouseOver,
- mouseOutIncident: this.pointMouseOut
- })
- })
- },
-
- // 鼠标移入图标事件
- pointMouseOver (e) {
- this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
- let hoverData = {}
- if ('carId' in e.overlay.attrParams.data) {
- hoverData = policecarOption.filter(item => item.value == e.overlay.attrParams.data.carId)[0]
- hoverData.policeData = { 'name': 'none' }
- hoverData.policeStationName = 'none'
- } else {
- let policeArr = this.filterTree(this.policeTreeData)
- hoverData.policeData = policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0]
- hoverData.policeStationName = policeArr.filter(item => item.id == policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
- hoverData.carType = 'none'
- hoverData.label = 'none'
- }
- this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)
-
- var popup = new global.DC.DivForms(global.viewer, {
- domId: 'ActivityPoliceDomBox',
- position: [
- global.DC.Transform.transformWGS84ToCartesian(
- new global.DC.Position(
- Number(e.overlay.attrParams.lng),
- Number(e.overlay.attrParams.lat),
- 0
- )
- )
- ]
- })
- },
-
- /**
- * @description: 鼠标移出事件
- * @param {*} e
- * @return {*}
- */
- pointMouseOut (e) {
- this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
- },
-
- /**
- * @description: 巡逻路线地图添加
- * @param {*} data
- * @return {*}
- */
- addMapLineLayers (data) {
- this.$parent.chooseActivityLineList = data
-
- data.forEach(item => {
- let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- // 线坐标字符串
- item.linePositionStr = positionNewArr
- let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
- let color = ''
- let lineColor = ''
- 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)
- lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
- }
-
- let positionStr = ''
- coords.forEach(item => {
- positionStr += item[0] + ',' + item[1] + ';'
- })
-
- item.polygonPositionStr = positionStr
-
- let lineObj = new global.DC.Polyline(positionNewArr)
-
- lineLayer.addOverlay(lineObj)
- lineObj.setStyle({
- 'material': lineColor,
- 'width': 3
- })
-
- item.lineObj = lineObj
-
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'newCarDrawLineLayers',
- positions: positionStr,
- material: color,
- params: item,
- incident: this.lineOverlayTypeClick
- })
-
- })
- },
-
- clearOrRemoveLayerAll (type) {
- if (type == 'clear') {
- // 要素的
- pointCircleCarLayer != null && pointCircleCarLayer.clear()
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newFactorResourcesLayers',
- type: 'VectorLayer'
- })
-
- // 作战的
- arrowsListLayer != null && arrowsListLayer.clear()
-
- // 巡逻的
- lineLayer != null && lineLayer.clear()
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newCarDrawLineLayers',
- type: 'VectorLayer'
- })
-
- // 活动区域的
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'polygonWallLayer',
- type: 'VectorLayer'
- })
- } else {
- // 要素的
- pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'newFactorResourcesLayers',
- type: 'VectorLayer'
- })
-
- // 作战的
- arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null
-
- // 巡逻的
- lineLayer != null && lineLayer.remove(), lineLayer = null
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'newCarDrawLineLayers',
- type: 'VectorLayer'
- })
-
- // 活动区域的
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'polygonWallLayer',
- type: 'VectorLayer'
- })
- }
- },
-
- // 切换轨警力资源显示
- switchChange (e) {
- pointCircleCarLayer.show = e
- this.$EventBus.$emit('layerShow', { layerName: 'newFactorResourcesLayers', flag: e })
- },
-
- // 切换作战标绘
- switchArrowBtnChange (e) {
- arrowsListLayer.show = e
- },
-
- // 切换轨迹播放控件
- switchBtnChange (e) {
- lineLayer.show = e
- this.$EventBus.$emit('layerShow', { layerName: 'newCarDrawLineLayers', flag: e })
- },
-
- // 获取标绘图层覆盖物
- getArrowsListLayerOverlayList () {
- return arrowsListLayer.getOverlays()
- },
-
- // 单击。标绘箭头
- reeditArrowClick (e) {
- this.$refs.PolygonPlotPage.setCurOver(e)
- },
-
- // 地图绘制元素点击事件
- overlayTypeClick (e) {
- if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
- this.isChoosePoliceElementDisabled = false
- } else {
- this.isChoosePoliceElementDisabled = true
- }
-
- if ('policemanId' in e.overlay.attrParams.data) {
- this.$refs.PolicePersonChange.setConfig(e)
-
- } else if ('carId' in e.overlay.attrParams.data) {
- this.$refs.PoliceCarChange.setConfig(e)
-
- }
- },
-
- // 树形数据传数组
- filterTree (tree, arr = []) {
- if (!tree.length) return []
- arr.push(...tree)
- for (let item of tree) {
- if (item.children && item.children.length) {
- this.filterTree(item.children, arr)
- }
- }
- return arr
- },
-
- // 巡逻路线面点击事件
- lineOverlayTypeClick (e) {
- this.policeIconId = e.overlay.attrParams.id
-
- this.$refs.VIDEOCONTROLBOX.closeVideo()
-
- this.$refs.PolylinePlotPage.setOverlay(e)
-
- if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
- this.$refs.PolylinePlotPage.setConfig({
- title: '修改巡逻路线',
- isLineEdit: true,
- lineEditVisible: true
- })
- } else {
- this.$refs.PolylinePlotPage.setConfig({
- lineEditVisible: true
- })
- }
- },
-
- // 转换 点 坐标数据
- convertBillboardPositionDate (data, iconName) {
- let positionStr = data.position
- positionStr = data.position.slice(6, positionStr.length - 1)
- let positionArr = positionStr.split(" ")
- let positionObj = {}
- 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.05, url: '/img/icon/man3.png', data: data }
- } else if (iconName == 'policecar') {
- positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data: data }
- }
- return positionObj
- },
-
- // 转换 线面 坐标数据
- convertPolylineOrPolygonPositionDate (data, type) {
- let positionStr = data.slice(11, data.length - 1)
- let positionArr = positionStr.split(',')
- let positionNewArr = ''
- positionArr.forEach(item => {
- if (type == 1) {
- positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
- } else {
- positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
- }
- })
- return positionNewArr
- },
- },
-
- destroyed () {
- this.clearOrRemoveLayerAll('remove')
- }
-}
-</script>
-
-<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index a9f8f45..3af7495 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -179,6 +179,7 @@
import { getEquipmentAll } from '@/api/home/index.js'
import publicIndex from './components/publicIndex.vue'
+import { initMapPosition } from '@/utils/mapPositionInit'
let loading = null
@@ -370,6 +371,10 @@
components: { publicIndex },
created () {
+ this.$nextTick(() => {
+ initMapPosition()
+ })
+
let userInfo = sessionStorage.getItem("userInfo")
if (userInfo != null) {
// 将JSON格式的对象解析为js对象
diff --git a/src/views/activity/index1.vue b/src/views/activity/index1.vue
deleted file mode 100644
index a628c6b..0000000
--- a/src/views/activity/index1.vue
+++ /dev/null
@@ -1,1457 +0,0 @@
-<!--
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2022-08-18 16:18:17
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-12-29 15:46:00
- * @FilePath: \srs-police-affairs\src\views\activity\index.vue
- * @Description: 电子沙盘
- *
- * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
--->
-
-<template>
- <div class="activity-page container">
- <div v-show="boxShow" class="container-content">
- <div class="title">安保活动</div>
- <div class="search-box">
- <div>
- <div class="category">活动类型：</div>
- <div class="category-value">
- <el-select size="small" v-model="activityType" placeholder="请选择" @change="activityTypeChange">
- <el-option v-for="item in activityOptions" :key="item.dictKey" :label="item.dictValue"
- :value="item.dictKey" class="activity-option"></el-option>
- </el-select>
- </div>
- </div>
-
- <div>
- <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>-->
- <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"
- @change="activityTimeChange"></el-date-picker>
- </div>
- </div>
-
- <div>
- <div class="category">活动名称：</div>
- <div class="category-value">
- <input type="text" placeholder="请输入活动名称" v-model="searchActivity" class="category-input"
- @input="inputChange" />
- <button class="category-button el-icon-search" @click="searchClick"></button>
- </div>
- </div>
- </div>
- <div class="result-content">
- <div class="table-box">
- <div v-show="activityList.length > 0" class="row-box" :class="{ on: currentClickIndex === index }"
- v-for="(item, index) in activityList" :key="index" @click="activityListClick(item, index)">
- <div class="row-title">常规安保</div>
- <div class="row-content">
- <div>
- <div class="category">活动名称：</div>
- <div class="category-value">{{ item.name }}</div>
- </div>
- <div>
- <div class="category">申报人数：</div>
- <div class="category-value">{{ item.number }}</div>
- </div>
- <div>
- <div class="category">活动时间：</div>
- <div class="category-value">{{ item.startTime }} 至 {{ item.endTime }}</div>
- </div>
- <div>
- <div class="category">活动详情：</div>
- <div class="category-value">{{ item.content }}</div>
- </div>
- </div>
- </div>
-
- <div v-show="activityList == 0" class="no-data">暂无数据</div>
- </div>
- <div class="pages all-pagination-sty">
- <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
- :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
- </div>
- </div>
- </div>
-
- <div class="draw-btn-box" v-show="arrangeVisible">
- <div>
- <span>警力资源：</span>
-
- <ul>
- <li>
- <button @click="draw('billboard', 'policeman')">
- <img src="../../../public/img/icon/police.png" style="height:100%" />
- </button>
- </li>
- <li>
- <button @click="draw('polyline', 'policeman')">警员路线</button>
- </li>
- <li>
- <button @click="draw('polygon', 'policeman')">警员范围</button>
- </li>
- <li>
- <button @click="draw('billboard', 'policecar')">
- <img src="../../../public/img/icon/car.png" style="height:100%" />
- </button>
- </li>
- <li>
- <button @click="draw('polyline', 'policecar')">警车路线</button>
- </li>
- <li>
- <button @click="draw('polygon', 'policecar')">警车范围</button>
- </li>
- </ul>
- </div>
- <div>
- <span>作战标绘：</span>
-
- <ul>
- <li>
- <button @click="drawArrow('attack_arrow')">进攻箭头</button>
- </li>
- <li>
- <button @click="drawArrow('double_arrow')">双箭头</button>
- </li>
- <li>
- <button @click="drawArrow('fine_arrow')">直箭头</button>
- </li>
- <li>
- <button @click="drawArrow('tailed_attack_arrow')">燕尾箭头</button>
- </li>
- <li>
- <button @click="removeAllArrow()">清除</button>
- </li>
- </ul>
- </div>
- <div>
- <span>撤离路线：</span>
- <ul>
- <li>
- <el-button title="路线绘制" @click="draw('billboard', 'policeman')" icon="el-icon-my-route"></el-button>
- </li>
- </ul>
- </div>
- </div>
-
- <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
- <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree>
- </div>
-
- <div v-show="dialogVisible" class="activity-details-box">
- <div class="title">
- 活动详情
- <div class="close" @click="closeActivityDetails"></div>
- </div>
-
- <div class="row-box">
- <div class="category">活动名称：</div>
- <div class="category-value">{{ activityDetails.name }}</div>
- </div>
-
- <div class="row-box">
- <div class="category">活动时间：</div>
- <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
- </div>
-
- <div class="row-box">
- <div class="category">活动内容1：</div>
- <div class="category-value">{{ activityDetails.content }}</div>
- </div>
-
- <!-- <div class="row-box">
- <div class="category">应急预案：</div>
- <div class="category-value">
- <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
- </div>
- </div>
-
- <div class="row-box">
- <div class="category">巡逻路线：</div>
- <div class="category-value">
- <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
- </div>
- </div>-->
-
- <!-- <div class="row-box">
- <div class="category">分析范围：</div>
- <div class="category-value">
- <el-input
- @input="analyseChange"
- size="mini"
- type="number"
- v-model="analyseInput"
- placeholder="请输入范围"
- ></el-input>
- </div>
- </div>-->
-
- <div class="row-box">
- <el-button @click="arrangeDraw">预案布置</el-button>
- </div>
- </div>
-
- <div class="plan-control">
- <div class="row-box">
- <div class="category">应急预案：</div>
- <div class="category-value">
- <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
- </div>
- </div>
-
- <div class="row-box">
- <div class="category">巡逻路线：</div>
- <div class="category-value">
- <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
- inactive-color="#ccc"></el-switch>
- </div>
- </div>
- </div>
-
- <div class="btn-box" v-show="isTrackBtnShow">
- <ul>
- <li>
- <button @click="play()">播放</button>
- </li>
- <li>
- <button @click="pause()">暂停</button>
- </li>
- <li>
- <button @click="restore()">恢复</button>
- </li>
- <li>
- <button @click="view('1', -20, 100)">第一视角</button>
- </li>
- <li>
- <button @click="view('2')">上帝视角</button>
- </li>
- <li>
- <button @click="view('tracked')">跟随视角</button>
- </li>
- <li>
- <button @click="view('free')">自由视角</button>
- </li>
- </ul>
- </div>
-
- <el-dialog :title="policeChooseTitle" :modal="true" :visible.sync="policeChooseVisible"
- :before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
- <div>
- <el-select size="small" v-model="policeType" placeholder="请选择">
- <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
- :value="item.value"></el-option>
- </el-select>
- <el-button @click="determine">确定</el-button>
- <el-button @click="cancel">取消</el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType } from '@/api/activity/index.js'
-
-let analyseLayer = null
-let analysePolygon = null
-let drawLayers = null
-let drawArrowLayers = null
-let plot = undefined
-let arrowPlot = undefined
-let tc = undefined
-let track = undefined
-let loading = null
-
-export default {
- data () {
- return {
- currentPage: 1,
- pagesize: 4,
- pagesCount: 1,
- activityOptions: [
- {
- dictKey: '',
- dictValue: '全部'
- }
- ],
- policeOption: [],
- policemanOption: [],
- policecarOption: [],
- activityType: '',
- policeType: '',
- searchActivity: '',
- selectTime: '',
- navType: 0,
- treeData: [{
- id: 1,
- label: '数据地图',
- children: [{
- id: 2,
- label: '实时警力',
- children: [{
- id: 7,
- label: 'BOOM',
- lng: 116.020595,
- lat: 28.686225,
- alt: 100,
- }, {
- id: 8,
- label: 'MDM',
- lng: 116.030370,
- lat: 28.685075,
- alt: 100,
- }, {
- id: 9,
- label: 'pdds',
- lng: 116.021054,
- lat: 28.684692,
- alt: 100,
- }]
- }, {
- id: 3,
- label: '视频监控',
- children: [{
- id: 10,
- label: '监控1',
- lng: 116.032703,
- lat: 28.677435,
- alt: 100,
- }]
- }, {
- id: 4,
- label: '治安重点场所',
- children: [{
- id: 10,
- label: '卡点',
- lng: 116.029703,
- lat: 28.683435,
- alt: 100,
- },
- {
- id: 11,
- label: '电警点',
- lng: 115.022703,
- lat: 28.682435,
- alt: 100,
- },
- {
- id: 12,
- label: '岗亭',
- lng: 116.028002,
- lat: 28.681302,
- alt: 100,
- }]
- }, {
- id: 5,
- label: '重点单位',
- children: [{
- id: 13,
- label: '大中型商超',
- lng: 116.023293,
- lat: 28.680986,
- alt: 100,
- },
- {
- id: 14,
- label: '幼儿园',
- lng: 116.0275001,
- lat: 28.679361,
- alt: 100,
- },
- {
- id: 15,
- label: '政府事业单位',
- lng: 116.024398,
- lat: 28.678066,
- alt: 100,
- },
- {
- id: 16,
- label: '机场',
- lng: 116.0268529,
- lat: 28.6829572,
- alt: 100,
- },
- {
- id: 17,
- label: '银行',
- lng: 116.025595,
- lat: 28.681225,
- alt: 100,
- }]
- },
- {
- id: 6,
- label: '特殊场所',
- children: [{
- id: 18,
- label: '印刷店',
- lng: 116.020370,
- lat: 28.680075,
- alt: 100,
- },
- {
- id: 19,
- label: '废旧金属收购',
- lng: 116.030054,
- lat: 28.683692,
- alt: 100,
- },
- {
- id: 20,
- label: '开锁店',
- lng: 116.022703,
- lat: 28.679435,
- alt: 100,
- },
- {
- id: 21,
- label: '酒店',
- lng: 115.028703,
- lat: 28.684435,
- alt: 100,
- }]
- },
- {
- id: 777,
- label: '热力图'
- }]
- }],
- defaultProps: {
- children: 'children',
- label: 'label'
- },
- dialogVisible: false,
- arrangeVisible: false,
- currentClickIndex: '',
- polylineSwitch: false,
- polylineBtnSwitch: false,
- analyseInput: 100,
- activityList: [],
- activityDetails: {},
- boxShow: true,
- policeChooseTitle: '选择警员',
- policeChooseVisible: false,
- overlayObj: {},
- isTrackBtnShow: false,
- showingSecurityId: '',
- policeIconIsCreated: false,
- policeIconId: {},
- }
- },
- created () {
- // 获取下拉列表数据
- this.getActivityType()
-
- this.getPoliceList()
-
- this.getCarList()
-
- this.getSecurityList(this.currentPage, this.pagesize)
- },
- mounted () {
- this.$parent.$parent.resize('400px', true)
-
- this.$nextTick(() => {
- if (analyseLayer == null) {
- analyseLayer = new global.DC.VectorLayer('analyseLayer')
- global.viewer.addLayer(analyseLayer)
- }
-
- if (drawLayers == null) {
- drawLayers = new global.DC.VectorLayer('drawLayers')
- global.viewer.addLayer(drawLayers)
- plot = new global.DC.Plot(global.viewer)
- }
-
- if (drawArrowLayers == null) {
- drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
- global.viewer.addLayer(drawArrowLayers)
- arrowPlot = new global.DC.Plot(global.viewer)
- }
- // 轨迹
- let positions = "116.023042, 28.684732; 116.023402, 28.679067; 116.023475, 28.678843; 116.023697, 28.678647; 116.024121, 28.678391; 116.026906, 28.678461; 116.027065, 28.676867; 116.033252, 28.676165"
- tc = new global.DC.TrackController(global.viewer)
- track = new global.DC.Track(positions, 15)
- track.setModel('/model/qiche.gltf', {
- scale: 0.5
- })
- tc.addTrack(track)
- })
- },
-
- updated () {
- },
-
- methods: {
- loading () {
- loading = this.$loading({
- lock: true,
- text: '拼命加载中',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- },
-
- getActivityType () {
- getServiceDictionary().then(response => {
- const activityType = response.data.data.records.filter(item => item.code == "securityType")
-
- getActivityType(activityType[0].id).then(res => {
- this.activityOptions.push(...res.data.data)
- })
- })
- },
-
- // 生成热力图坐标
- generatePosition (num) {
- let list = []
- for (let i = 0; i < num; i++) {
- let lng = 115.974 + Math.random() * 0.5
- let lat = 28.628 + Math.random() * 0.5
- list.push(new global.DC.Position(lng, lat))
- }
- return list
- },
-
- inputChange (e) {
- console.log(e)
- },
-
- // 点击搜索
- searchClick () {
- let startTime = ''
- let endTime = ''
- if (this.selectTime) {
- startTime = this.selectTime[0]
- endTime = this.selectTime[1]
- }
- this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
- },
-
- // 下拉选择值变化
- activityTypeChange () {
- let startTime = ''
- let endTime = ''
- if (this.selectTime) {
- startTime = this.selectTime[0]
- endTime = this.selectTime[1]
- }
- this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
- },
-
- // 时间选中值触发
- activityTimeChange () {
- let startTime = ''
- let endTime = ''
- if (this.selectTime) {
- startTime = this.selectTime[0]
- endTime = this.selectTime[1]
- }
- this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
- },
-
- // 获取活动警员分布信息
- getSecurityPoliceList (securityId) {
- this.removeAll()
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newDrawLayers',
- type: 'VectorLayer'
- })
- getSecurityPoliceList(securityId).then(res => {
- res.data.data.forEach(item => {
- if (item.type == 1) {
- let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- this.$EventBus.$emit('layerPolylineAdd', {
- layerName: 'newDrawLayers',
- positions: positionNewArr,
- material: global.DC.Color.ORANGE.withAlpha(0.6),
- width: 4,
- params: {
- id: item.id,
- policemanId: item.policemanId
- },
- incident: this.overlayTypeClick
- })
- } else if (item.type == 2) {
- let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'newDrawLayers',
- positions: positionNewArr,
- material: global.DC.Color.ORANGE.withAlpha(0.6),
- params: {
- id: item.id,
- policemanId: item.policemanId
- },
- incident: this.overlayTypeClick
- })
-
- } else if (item.type == 3) {
- let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId)
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'newDrawLayers',
- type: 'billboard',
- params: positionObj,
- incident: this.overlayTypeClick
- })
- }
- })
- })
- },
-
- // 获取活动警车分布信息
- getSecurityCarList (securityId) {
- this.removeAll()
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newCarDrawLayers',
- type: 'VectorLayer'
- })
- getSecurityCarList(securityId).then(res => {
- res.data.data.forEach(item => {
- if (item.type == 1) {
- let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- this.$EventBus.$emit('layerPolylineAdd', {
- layerName: 'newCarDrawLayers',
- positions: positionNewArr,
- material: global.DC.Color.BLUE.withAlpha(0.4),
- width: 8,
- params: {
- id: item.id,
- carId: item.carId
- },
- incident: this.overlayTypeClick
- })
- } else if (item.type == 2) {
- let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'newCarDrawLayers',
- positions: positionNewArr,
- material: global.DC.Color.BLUE.withAlpha(0.4),
- params: {
- id: item.id,
- carId: item.carId
- },
- incident: this.overlayTypeClick
- })
-
- } else if (item.type == 3) {
- let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId)
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'newCarDrawLayers',
- type: 'billboard',
- params: positionObj,
- incident: this.overlayTypeClick
- })
- }
- })
- })
- },
-
- // 获取活动列表
- getSecurityList (current, size, type, name, startTime, endTime) {
- this.loading()
-
- getSecurityList(current, size, type, name, startTime, endTime).then(res => {
- this.activityList = res.data.data.records.map(item => {
- item.startTime = item.startTime.substring(0, 16)
- item.endTime = item.endTime.substring(0, 16)
-
- return item
- })
-
- this.pagesCount = res.data.data.pages
-
- this.addActivityPoint()
-
- loading.close()
- })
- },
-
- // 获取警员列表，生成下拉数据
- getPoliceList () {
- getPoliceList().then(res => {
- res.data.data.forEach(item => {
- this.policemanOption.push({ value: `${item.id}`, label: `${item.name}` })
- })
- })
- },
-
- // 获取警车列表，生成下拉数据
- getCarList () {
- getCarList().then(res => {
- res.data.data.forEach(item => {
- this.policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}` })
- })
- })
- },
-
- // 修改活动警员
- updateActivityPolice (id, policemanId) {
- updateActivityPolice(id, policemanId).then(res => {
- this.getSecurityPoliceList(this.showingSecurityId)
- })
- },
-
- // 修改活动警车
- updateActivityCar (id, carId) {
- updateActivityCar(id, carId).then(res => {
- this.getSecurityCarList(this.showingSecurityId)
- })
- },
-
- // 活动添加警车和范围
- addCarAndRange (carId, position, securityId, type) {
- addCarAndRange(carId, position, securityId, type).then(res => {
- this.getSecurityCarList(securityId)
- })
- },
-
- // 添加活动图标
- addActivityPoint () {
- this.activityList.forEach(item => {
- let positionObj = this.convertBillboardPositionDate(item.position, 'activity')
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'activityLayers',
- type: "billboard",
- params: positionObj,
- incident: this.houseSiteClick
- })
- })
- },
-
- // 活动添加警员
- addActivityPolice (policemanId, position, securityId, type) {
- addActivityPolice(policemanId, position, securityId, type).then(res => {
- this.getSecurityPoliceList(securityId)
- })
- },
-
- // 转换 点 坐标数据
- convertBillboardPositionDate (data, iconName, plotId, policeId) {
- let positionStr = data
- positionStr = data.slice(6, positionStr.length - 1)
- let positionArr = positionStr.split(" ")
- let positionObj = {}
- if (iconName == 'activity') {
- positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/activity.png' }
- } else if (iconName == 'policeman') {
- positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/police.png', id: plotId, policemanId: policeId }
- } else if (iconName == 'policecar') {
- positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/car.png', id: plotId, carId: policeId }
- }
- return positionObj
- },
-
- // 转换 线面 坐标数据
- convertPolylineOrPolygonPositionDate (data, type) {
- let positionStr = data.slice(11, data.length - 1)
- let positionArr = positionStr.split(',')
- let positionNewArr = ''
- positionArr.forEach(item => {
- if (type == 1) {
- positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
- } else {
- positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
- }
- })
- return positionNewArr
- },
-
- // 树形控件选中事件
- treeCheckClick (e1, e2) {
- const that = this
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'activeHeatLayer',
- type: 'HeatLayer'
- })
- if (e1.label == '热力图' && e2.checkedKeys.some(item => {
- return item == 777
- })) {
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'activeHeatLayer',
- type: "HeatPoint",
- layerType: 'HeatLayer',
- params: {
- positions: that.generatePosition(2000)
- }
- })
- } else {
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'activeLayer',
- type: 'VectorLayer'
- })
- e2.checkedNodes.forEach(item => {
- if (item.lng) {
- item.url = '/img/icon/position.png'
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'activeLayer',
- type: "billboard",
- params: item
- })
- }
- })
- }
- },
-
- // 点击活动列表活动
- activityListClick (item, index) {
- this.removeAll()
- this.showingSecurityId = item.id
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newDrawLayers',
- type: 'VectorLayer'
- })
- this.getSecurityPoliceList(item.id)
- this.getSecurityCarList(item.id)
- if (this.currentClickIndex !== '' && this.currentClickIndex == index) {
- return
- }
- this.analyseInput = 100
-
- this.activityDetails = item
-
- this.polylineSwitch = false
-
- if (analyseLayer != null) {
- analyseLayer.clear()
- }
-
- let positionObj = this.convertBillboardPositionDate(item.position, 'activity')
-
- let point = new global.DC.Point(`${positionObj.lng}, ${positionObj.lat}`)
- analyseLayer.addOverlay(point)
-
- let coords = global.DC.GeoTools.pointBuffer(`${positionObj.lng}, ${positionObj.lat}`, 100)
- analysePolygon = new global.DC.Polygon(coords)
-
- analysePolygon.setStyle({
- material: global.DC.Color.RED.withAlpha(0.4)
- })
-
- analyseLayer.addOverlay(analysePolygon)
-
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'polylineLayer',
- type: 'VectorLayer'
- })
-
- this.dialogVisible = true
-
- this.currentClickIndex = index
-
- this.$EventBus.$emit('toPosition', {
- siteJd: positionObj.lng,
- siteWd: positionObj.lat,
- siteGd: 1500
- })
- },
-
- // 切换轨迹路线显示
- switchChange (e) {
- if (e == true) {
- this.$EventBus.$emit('layerPolylineAdd', {
- layerName: 'polylineLayer',
- positions: '116.023042, 28.684732; 116.023402, 28.679067; 116.023475, 28.678843; 116.023697, 28.678647; 116.024121, 28.678391; 116.026906, 28.678461; 116.027065, 28.676867; 116.033252, 28.676165',
- material: global.DC.Namespace.Cesium.Color.fromBytes(
- 255, 0, 0,
- 255
- ),
- distanceDisplayCondition: {
- near: 0, //最近距离
- far: Number.MAX_VALUE //最远距离
- }
- })
- } else {
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'polylineLayer',
- type: 'VectorLayer'
- })
- }
- },
-
- // 切换轨迹播放控件
- switchBtnChange (e) {
- this.isTrackBtnShow = e
- },
-
- // 输入绘制线范围
- analyseChange (e) {
- analyseLayer.removeOverlay(analysePolygon)
- let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)
- analysePolygon = new global.DC.Polygon(coords)
- analysePolygon.setStyle({
- material: global.DC.Color.RED.withAlpha(0.4)
- })
- analyseLayer.addOverlay(analysePolygon)
- },
-
- // 分页页码变化事件
- handleCurrentChange: function (currentPage) {
- this.currentPage = currentPage
- this.getSecurityList(this.currentPage, this.pagesize)
- },
-
- // 关闭活动详情弹窗
- closeActivityDetails () {
- this.dialogVisible = false
- this.currentClickIndex = ''
- this.polylineSwitch = false
- analyseLayer.clear()
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'polylineLayer',
- type: 'VectorLayer'
- })
- },
-
- // 地图元素绘制
- draw (poltType, policeType) {
- let flag = false
- const that = this
- this.policeType = ''
- plot && plot.draw(poltType, overlay => {
-
- if (poltType == 'billboard' && policeType == 'policeman') {
- overlay.icon = '/img/policeIcon.png'
- } else if (poltType == 'billboard' && policeType == 'policecar') {
- overlay.icon = '/img/policeCar.jfif'
- }
-
- if (overlay) {
-
- drawLayers.addOverlay(overlay)
- plot.edit(overlay, (e) => {
- flag = true
- overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
- overlay.drawType = poltType
- overlay.policeType = policeType
- this.overlayObj = overlay
- document.oncontextmenu = function () {
- if (flag == true && poltType == 'billboard') {
- if (policeType == 'policeman') {
- that.policeChooseTitle = '选择警员'
- that.policeOption = that.policemanOption
- } else if (policeType == 'policecar') {
- that.policeChooseTitle = '选择警车'
- that.policeOption = that.policecarOption
- }
- that.policeChooseVisible = true
- flag = false
- } else if (flag == true && poltType == 'polygon') {
- if (policeType == 'policecar') {
- that.policeChooseTitle = '选择警车'
- that.policeOption = that.policecarOption
- that.policeChooseVisible = true
- flag = false
- }
- }
- }
- })
- }
- })
- },
-
- // 删除所有地图绘制元素
- removeAll () {
- drawLayers.clear()
- },
-
- drawArrow (type) {
- arrowPlot && arrowPlot.draw(type, overlay => {
- if (overlay) {
- drawArrowLayers.addOverlay(overlay)
- plot.edit(overlay)
- }
- })
- },
-
- removeAllArrow () {
- drawArrowLayers.clear()
- },
-
- arrangeDraw () {
- this.arrangeVisible = true
- },
-
- // 播放轨迹
- play () {
- tc.play()
- this.view('1', -20, 100)
- },
-
- // 暂停播放轨迹
- pause () {
- tc.pause()
- },
-
- // 恢复播放轨迹
- restore () {
- tc.restore()
- },
-
- // 轨迹视角切换
- view (mode, pitch, range) {
- tc.viewTrack(track, {
- mode: mode,
- pitch: pitch,
- range: range
- })
- },
-
- // 大小重置
- boxResize (val) {
- this.boxShow = val
- },
-
- // 选择警员取消按钮
- cancel () {
- this.policeIconIsCreated = false
- this.policeChooseVisible = false
- this.overlayObj2 = {}
- this.removeAll()
- },
-
- // 选择警员关闭
- policeChooseBeforeClose () {
- this.policeChooseVisible = false
- this.policeIconIsCreated = false
- this.removeAll()
- },
-
- // 选择警员确认按钮
- determine () {
- if (!this.policeIconIsCreated) {
- let type = ''
- let position = ''
- if (this.overlayObj.drawType == 'billboard') {
- type = 3
- position = this.overlayObj._position._lng + ' ' + this.overlayObj._position._lat
- } else if (this.overlayObj.drawType == 'polyline') {
- type = 1
- this.overlayObj._positions.forEach(item => {
- position += item._lng + ' ' + item._lat + ','
- })
- position = position.slice(0, position.length - 1)
- } else if (this.overlayObj.drawType == 'polygon') {
- type = 2
- this.overlayObj._positions.forEach(item => {
- position += item._lng + ' ' + item._lat + ','
- })
- position += this.overlayObj._positions[0]._lng + ' ' + this.overlayObj._positions[0]._lat + ','
- position = position.slice(0, position.length - 1)
- }
- if (this.overlayObj.policeType == 'policeman') {
- this.addActivityPolice(this.policeType, position, this.showingSecurityId, type)
- } else if (this.overlayObj.policeType == 'policecar') {
- this.addCarAndRange(this.policeType, position, this.showingSecurityId, type)
- }
- this.policeChooseVisible = false
- this.policeIconIsCreated = false
- } else {
- if (this.policeChooseTitle == '选择警员') {
- this.updateActivityPolice(this.policeIconId, this.policeType)
- } else if (this.policeChooseTitle == '选择警车') {
- this.updateActivityCar(this.policeIconId, this.policeType)
- }
- this.policeChooseVisible = false
- this.policeIconIsCreated = false
- }
- },
-
- // 地图绘制元素点击事件
- overlayTypeClick (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
- } 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
- }
- this.policeChooseVisible = true
- }
- },
-
- destroyed () {
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'activeLayer',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'activityLayers',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'polylineLayer',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'activeHeatLayer',
- type: 'HeatLayer'
- })
-
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newDrawLayers',
- type: 'VectorLayer'
- })
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'newCarDrawLayers',
- type: 'VectorLayer'
- })
-
- analyseLayer.clear()
-
- this.removeAll()
- tc.clear()
-
- this.$parent.$parent.resize('0px')
- }
-}
-</script>
-
-<style scoped lang="scss">
-.container {
- height: 100%;
- width: 100%;
- position: relative;
-
- &-content {
- position: relative;
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- color: #fff;
- background: $bg-color;
-
- .title {
- height: 40px;
- line-height: 40px;
- font-weight: 700;
- font-size: 24px;
- letter-spacing: 20px;
- }
-
- .search-box {
- padding: 0 10px;
-
- &>div:first-child {
- margin-top: 0;
- }
-
- &>div {
- margin-top: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .category {
- width: 88px;
- font-size: 16px;
- }
-
- .category-value {
- flex: 1;
- }
-
- input {
- width: 209px;
- height: 32px;
- font-size: 12px;
- text-indent: 1em;
- color: #ffffff;
- background-color: transparent;
- border: 1px solid rgb(0, 92, 169);
- border-radius: 5px 0 0 5px;
- }
-
- input:focus {
- outline: none;
- }
-
- input::-webkit-input-placeholder {
- color: rgba(238, 238, 238, 0.7);
- }
-
- button {
- font-size: 20px;
- font-weight: 700;
- width: 60px;
- height: 32px;
- background-color: $table-body-tr-2n-color;
- color: #fff;
- border: 1px solid rgb(0, 92, 169);
- cursor: pointer;
- border-radius: 0 5px 5px 0;
- vertical-align: top;
- }
-
- button:active {
- background-color: $table-body-tr-2n-color;
- border: 1px solid rgb(0, 92, 169);
- color: rgb(189, 185, 185) !important;
- }
- }
- }
-
- .result-content {
- flex: 1;
- margin-top: 8px;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-
- .table-box {
- flex: 1;
- overflow-x: hidden;
- overflow-y: auto;
-
- .row-box {
- margin: 10px;
- padding: 10px;
- background: $table-body-tr-2n-color;
- cursor: pointer;
- font-size: 14px;
-
- .row-content {
- &>div {
- display: flex;
- line-height: 28px;
-
- .category {
- width: 88px;
- }
-
- .category-value {
- flex: 1;
- display: flex;
- justify-content: flex-start;
- flex-wrap: wrap;
- }
- }
- }
- }
-
- .row-box:hover {
- // background-color: $table-header-bg-color;
- background-color: rgba(17, 38, 163, 0.5);
- }
-
- .row-box.on {
- // background: $table-header-bg-color;
- background-color: rgba(17, 38, 163, 0.5);
- }
-
- :deep(.el-dialog) {
- margin-right: 0px;
- }
-
- .tableClass {
- margin: 0 auto;
- width: 400px;
- // height: 400px;
- border-collapse: collapse;
- }
-
- .tableClass td {
- width: 300px;
- }
- }
-
- .pages {
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
-
- .draw-btn-box {
- position: fixed;
- left: 50%;
- bottom: 40px;
- color: #fff;
- background: $bg-one-color;
- white-space: nowrap;
- transform: translate(-50%, 0);
-
- &>div {
- display: flex;
- }
-
- ul {
- display: flex;
-
- li {
- button {
- height: 30px;
- margin: 0 5px;
- background-color: $bg-color;
- border: 1px solid #cecece;
- border-radius: 4px;
- color: #fff;
- cursor: pointer;
- outline: none;
- }
- }
- }
- }
-
- .second-container {
- position: absolute;
- top: 0px;
- display: flex;
- flex-direction: column;
- width: 240px;
- background: $bg-color;
-
- :deep(.el-tree) {
- background: transparent;
- }
-
- :deep(.el-tree-node__content) {
- background: transparent;
- }
-
- :deep(.el-tree-node) {
- background: transparent;
- color: #fff;
- }
- }
-
- .second-container.spread {
- left: 444px;
- }
-
- .second-container.take-back {
- left: 10px;
- }
-
- .activity-details-box {
- position: fixed;
- top: 90px;
- right: 10px;
- width: 400px;
- padding: 10px;
-
- border-radius: 10px;
- color: #fff;
- background: $bg-color;
- overflow-x: hidden;
- overflow-y: auto;
-
- .title {
- position: relative;
- height: 36px;
- line-height: 36px;
-
- .close {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translate(0, -50%);
- cursor: pointer;
- }
-
- .close::before {
- content: '\e6db';
- font-family: element-icons;
- }
- }
-
- .row-box {
- width: 100%;
- line-height: 28px;
- display: flex;
-
- &>div {
- text-align: left;
- }
-
- .category {
- width: 96px;
- }
-
- .category-value {
- flex: 1;
- }
- }
- }
-
- .plan-control {
- position: fixed;
- top: 90px;
- right: 450px;
- width: 180px;
- padding: 10px;
- color: #fff;
- background-color: $bg-color;
-
- .row-box {
- width: 100%;
- line-height: 28px;
- display: flex;
-
- &>div {
- text-align: left;
- }
-
- .category {
- width: 96px;
- }
-
- .category-value {
- flex: 1;
- }
- }
- }
-
- .btn-box {
- position: fixed;
- top: 78px;
- left: 50%;
- transform: translate(-50%, 0);
- min-height: 40px;
- padding: 10px 10px 0 10px;
- border-radius: 10px;
- color: #fff;
- user-select: none;
-
- ul {
- display: flex;
-
- li {
- button {
- height: 30px;
- margin: 0 5px;
- background-color: $bg-color;
- border: 1px solid #cecece;
- border-radius: 4px;
- color: #fff;
- cursor: pointer;
- outline: none;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8141a05..2a0e777 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-04-01 11:24:57
+ * @LastEditTime: 2023-04-01 11:53:43
* @FilePath: \srs-police-affairs\src\views\home\index.vue
* @Description: 小区-栋-层-房屋
*
@@ -131,17 +131,17 @@
<el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" :before-close="personInfoClose"
:close-on-click-modal="true" class="keyPerson-details-box">
<!-- <div class="header" v-show="!isMaoJiaLin">
- <div>
- 人员名称：
- <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
- </div>
- <div>
- 联系电话：
- <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
- </div>
- <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
- <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
- </div> -->
+ <div>
+ 人员名称：
+ <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
+ </div>
+ <div>
+ 联系电话：
+ <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
+ </div>
+ <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
+ <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
+ </div> -->
<el-table :data="keyPersonDetailArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
@@ -169,10 +169,10 @@
</el-table>
<!-- <div class="pages all-pagination-sty" ref="tablePagination" v-show="!isMaoJiaLin">
- <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
- :total="peoplePage.total" :current-page="peoplePage.currentPage"
- @current-change="handlePersonPageChange"></el-pagination>
- </div> -->
+ <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
+ :total="peoplePage.total" :current-page="peoplePage.currentPage"
+ @current-change="handlePersonPageChange"></el-pagination>
+ </div> -->
</el-dialog>
<el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" :before-close="equimentBeforeClose"
@@ -2075,6 +2075,8 @@
},
destroyed () {
+ loading.close()
+
this.clearPolygonLayer()
// cylinderLayer != null && cylinderLayer != undefined && cylinderLayer != '' && cylinderLayer.remove()
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 1a437cb..9e8356d 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:24
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-18 09:00:11
+ * @LastEditTime: 2023-04-01 16:30:54
* @FilePath: \srs-police-affairs\src\views\layout\index.vue
* @Description:
*
@@ -33,9 +33,11 @@
<div class="menu-list right">
<div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
@click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
- <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
+ <span :class="{ on: currentUrl.indexOf(item.path) != -1 || currentUrl.indexOf(item.pathT) != -1 }">{{
+ item.menuName }}</span>
<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
- <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
+ <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
+ v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
{{
subItem.menuName
}}
@@ -67,16 +69,16 @@
<!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
<div class="userDetail" v-if="isShowUserDetail">
<div class="triangle"></div>
- <div class="userName">用户名：{{userName}}</div>
- <div class="userBtn">
- <div class="edit" @click="goTOLogin">
- >
- <img src="../../../public/img/editLogin.webp" alt />
- </div>
- <div class="return" @click="goTOFllow">返回引导页</div>
- </div>
- </div>
- </div>-->
+ <div class="userName">用户名：{{userName}}</div>
+ <div class="userBtn">
+ <div class="edit" @click="goTOLogin">
+ >
+ <img src="../../../public/img/editLogin.webp" alt />
+ </div>
+ <div class="return" @click="goTOFllow">返回引导页</div>
+ </div>
+ </div>
+ </div>-->
</div>
<div class="main-container">
@@ -141,7 +143,8 @@
menuRightList: [
{
menuName: '视频监控',
- path: '/layout/video',
+ path: '/layout/video/list',
+ pathT: '/layout/video/region',
childrenFlag: false,
children: [
{
@@ -249,7 +252,7 @@
* @return {*} 没有返回值
*/
goToPath (params) {
- if (params.children && params.children.length > 0) return
+ console.log(params, 215555)
if (params.path) {
if (this.$route.path == params.path) return
@@ -257,7 +260,6 @@
} else {
params.childrenFlag = !params.childrenFlag
}
-
},
flexibelClick () {
@@ -468,6 +470,10 @@
background: $table-body-tr-n-color;
cursor: pointer;
box-sizing: content-box;
+
+ &.on {
+ color: rgba(252, 189, 86, 1);
+ }
}
div:first-child {
diff --git a/src/views/police/index.vue b/src/views/police/index.vue
index 96607c6..5c2a696 100644
--- a/src/views/police/index.vue
+++ b/src/views/police/index.vue
@@ -145,6 +145,8 @@
let tc = null
let track = null
+import { initMapPosition } from '@/utils/mapPositionInit'
+
export default {
inject: ['userInfo'],
@@ -206,6 +208,10 @@
created () {
window.addEventListener('resize', this.setTableHeight)
+
+ this.$nextTick(() => {
+ initMapPosition()
+ })
},
mounted () {
diff --git a/src/views/policeInfor/index.vue b/src/views/policeInfor/index.vue
index 8f12eaa..c0b9477 100644
--- a/src/views/policeInfor/index.vue
+++ b/src/views/policeInfor/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-30 15:44:10
+ * @LastEditTime: 2023-04-01 16:42:12
* @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
* @Description: 辖区管理
*
@@ -199,6 +199,7 @@
let timer = []
import { getActAsPoliceList, getAnswerPolices, getAlarmList } from "@/api/home/index.js"
+import { initMapPosition } from '@/utils/mapPositionInit'
export default {
inject: ['userInfo'],
@@ -230,6 +231,10 @@
created () {
const that = this
+ this.$nextTick(() => {
+ initMapPosition()
+ })
+
this.defaultDate()
this.$EventBus.$on('PoliceInforSiteClick', (params) => {
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
index 932a1c1..a27e9b4 100644
--- a/src/views/video/index.vue
+++ b/src/views/video/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-11-18 10:06:55
+ * @LastEditTime: 2023-04-01 16:36:06
* @FilePath: \srs-police-affairs\src\views\video\index.vue
* @Description: 辖区管理
*
@@ -16,7 +16,12 @@
</template>
<script>
+
+
export default {
+ created () {
+
+ },
methods: {
boxResize (val) {
this.$refs['video-target-box'].boxResize(val)
diff --git a/src/views/video/list.vue b/src/views/video/list.vue
index 6e73eb3..7757dfb 100644
--- a/src/views/video/list.vue
+++ b/src/views/video/list.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-31 17:07:47
+ * @LastEditTime: 2023-04-01 17:09:18
* @FilePath: \srs-police-affairs\src\views\video\list.vue
* @Description: 辖区管理
*
@@ -13,8 +13,11 @@
<div class="list container">
<div v-show="boxShow" class="container-content">
<div class="search-box">
- 点位名称：
- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
+ <span style="display: inline-block; white-space:nowrap;">
+ 点位名称：
+ </span>
+ <el-input size="small" placeholder="请输入…" v-model="searchValue" @change="searchChange" clearable>
+ </el-input>
</div>
<div class="draw-btn">
@@ -41,7 +44,7 @@
- <span v-show="node.data.number && node.data.number != -1">
+ <span v-show="'number' in node.data && node.data.number != -1">
({{
node.data.number
}}个)
@@ -86,13 +89,11 @@
<el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
:before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
- <div>
- <div>名称：</div>
- <input type="text" v-model="drawName" placeholder="请输入绘制线的名称" />
- </div>
<div v-show="inputpopup">
<div>距离：</div>
- <input type="text" v-model="range" placeholder="请输入绘制线的范围" />
+ <div>
+ <input type="text" v-model="range" placeholder="请输入缓冲范围" />
+ </div>
</div>
<div class="line">
<div class="value-name-box">颜色：</div>
@@ -102,8 +103,15 @@
</div>
</div>
<div>
- <button @click="saveDrawInfo">保存</button>
- <button @click="cancelSaveDrawInfo">取消</button>
+ <div class="value-name-box">设置透明度：</div>
+ <div class="alpha">
+ <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
+ </div>
+ </div>
+ <div class="button">
+ <button @click="searchDraw">查询</button>
+
+ <button @click="drawDialogBeforeClose">取消</button>
</div>
</el-dialog>
</div>
@@ -121,29 +129,30 @@
equipmentNum = window.BASE_URL_CONFIG.VUE_APP_INTRANET_EQUIPMENT
}
-import EntityDraw from "@/utils/EntityDraw.js"
+import { getEquipmentAll } from '@/api/home/index.js'
+
import {
getDevices,
getRegionList,
- insertRegionSaveList,
getTreeDevices,
getSearchTreeDevices,
- getTreeDevicesNearby
} from '@/api/video/index.js'
import flvjs from 'flv.js'
-let graphicLayer = null
+import { initMapPosition } from '@/utils/mapPositionInit'
+
let plot = undefined
let drawPlotLayers = null
+let loading = null
+let drawFlag = false
+let drawPlotData = null
export default {
inject: ['userInfo'],
data () {
return {
- monitoringList: [],
- monitoringSaveList: [],
dialogTitle: '',
drawDialogTitle: '绘制线面',
dialogVisible: false,
@@ -154,7 +163,6 @@
range: 100,
inputpopup: false,
changeBtn: false,
- drawName: '',
drawType: 1,
props: {
label: 'name',
@@ -168,7 +176,6 @@
defaultExpandedKeys: [],
searchLazyFlag: true,
searchTreeData: [],
- drawPlotData: {},
chooseRangeColor: '#FF0000',
predefineColors: [
'#ff4500',
@@ -187,11 +194,15 @@
'#c7158577'
],
- videoPlayShow: false
+ videoPlayShow: false,
+ startDrawFlag: false,
+
+ choosePlotColorAlpha: 50
}
},
created () {
+
},
mounted () {
@@ -204,10 +215,17 @@
clampToModel: true
})
}
+
+ this.getEquipmentAll({ type: 1, deptid: this.userInfo.dept_id })
})
},
methods: {
+ // 计算透明度值
+ formatTooltip (val) {
+ return val / 100
+ },
+
async getDevices (channelId) {
let flvAddress = ''
await getDevices(channelId).then(res => {
@@ -269,22 +287,35 @@
},
drawDialogBeforeClose () {
- this.drawName = ''
+ plot.stop()
+
if (drawPlotLayers != null) {
drawPlotLayers.clear()
}
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
+
this.drawDialogVisible = false
},
searchChange (e) {
- if (e.target.value.trim() != '') {
+ this.inputpopup = false
+ plot.stop()
+
+ if (drawPlotLayers != null) {
+ drawPlotLayers.clear()
+ }
+
+ drawPlotData = null
+
+ if (e.trim() != '') {
this.searchLazyFlag = false
+ this.loading()
+ this.$EventBus.$emit('mapClearLayer', {
+ layerName: 'treeValAllLayer',
+ type: 'VectorLayer'
+ })
this.searchTreeData = []
+
getSearchTreeDevices({
deviceId: equipmentNum,
parentId: '361102',
@@ -292,20 +323,48 @@
name: this.searchValue.trim()
}).then(res => {
this.searchTreeData = res.data.data
+
+ res.data.data.length && res.data.data.forEach(item => {
+ this.$EventBus.$emit('layerPointAdd', {
+ layerName: 'treeValAllLayer',
+ type: "billboard",
+ layerType: 'ClusterLayer',
+ params: {
+ ...item,
+ text: item.name,
+ lng: item.longitude,
+ lat: item.latitude,
+ url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
+ channelId: item.channelId,
+ status: item.status,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ },
+ incident: this.siteClick,
+ // mouseOverIncident: this.pointMouseOver,
+ // mouseOutIncident: this.pointMouseOut,
+ })
+ })
+
+ this.closeLoading()
})
} else {
this.searchLazyFlag = true
+
+ this.getEquipmentAll({ type: 1, deptid: this.userInfo.dept_id })
}
},
- // 封装方法绘制线面 type:polygon/polyline
- // draww (type) {
- // if (graphicLayer == null) graphicLayer = new EntityDraw()
- // graphicLayer.activate(type, (lastEventData) => {
- // })
- // },
-
draw (type) {
+ const that = this
+ drawFlag = false
+ if (this.startDrawFlag == true) {
+ drawFlag = true
+ plot && plot.stop()
+ drawFlag = false
+ this.startDrawFlag = false
+ }
+ this.startDrawFlag = true
+
if (type == 'polyline') {
this.inputpopup = true
this.drawType = 1
@@ -313,44 +372,34 @@
this.inputpopup = false
this.drawType = 2
}
+
plot && plot.draw(type, overlay => {
+ if (drawFlag) return
+
if (overlay) {
+ drawPlotData = overlay
+ drawPlotData.customType = type
+ that.range = 100
drawPlotLayers.addOverlay(overlay)
- plot.edit(overlay)
- if (overlay) {
- drawPlotLayers.addOverlay(overlay)
- plot.edit(overlay, (e) => {
- this.drawDialogVisible = true
- this.range = 100
- this.drawPlotData = overlay
- document.oncontextmenu = function () {
- return false
- }
- this.getRegionList(type, overlay)
- })
- }
+
+ setTimeout(() => {
+ that.drawDialogVisible = true
+ }, 100)
}
- }, { material: global.DC.Color.RED })
+ }, { material: global.DC.Color.RED.withAlpha(0.5) })
},
removeDrawLayer () {
this.inputpopup = false
- this.monitoringList = this.monitoringSaveList
+ plot.stop()
+
if (drawPlotLayers != null) {
drawPlotLayers.clear()
}
- this.drawPlotData = []
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
- },
- // 修改范围
- setRegion (range) {
- graphicLayer.addPolyLineGon(range, (lastEventData) => {
- // this.getRegionList('polyline', JSON.stringify(lastEventData))
- })
+ drawPlotData = null
+
+ this.getEquipmentAll({ type: 1, deptid: this.userInfo.dept_id })
},
// 大小重置
@@ -358,147 +407,102 @@
this.boxShow = val
},
- changeRange () {
- this.setRegion(this.range)
+ searchDraw () {
+ this.searchLazyFlag = false
+
+ this.searchValue = ''
+
+ this.drawDialogVisible = false
+
+ this.loading()
+
+ const color = this.chooseRangeColor + ',' + this.choosePlotColorAlpha
+
+ let r = parseInt(color.slice(1, 3), 16)
+ let g = parseInt(color.slice(3, 5), 16)
+ let b = parseInt(color.slice(5, 7), 16)
+ let a = Math.floor(Number(color.split(',')[1]) * 2.55) ? Math.floor(Number(color.split(',')[1]) * 2.55) : 255
+
+ drawPlotData.setStyle({
+ material: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
+ })
+
+ this.$EventBus.$emit('mapClearLayer', {
+ layerName: 'treeValAllLayer',
+ type: 'VectorLayer'
+ })
+
+ this.getRegionList(drawPlotData)
},
- closeRangeInput () {
- this.inputpopup = false
- },
-
- getRegionList (type, data) {
+ getRegionList ({ customType, positions }) {
let positionStr = ''
- if (type == 'polyline') {
- data._positions.forEach(item => {
- positionStr = positionStr + item._lng + ',' + item._lat + ';'
+
+ const color = this.chooseRangeColor + ',' + this.choosePlotColorAlpha
+
+ let r = parseInt(color.slice(1, 3), 16)
+ let g = parseInt(color.slice(3, 5), 16)
+ let b = parseInt(color.slice(5, 7), 16)
+ let a = Math.floor(Number(color.split(',')[1]) * 2.55) ? Math.floor(Number(color.split(',')[1]) * 2.55) : 255
+
+ if (customType == 'polyline') {
+ positions.forEach(item => {
+ positionStr += `${item.lng},${item.lat};`
})
- let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
+ let coords = global.DC.GeoTools.polylineBuffer(positionStr, this.range)
let polygon = new global.DC.Polygon(coords)
- let position = ''
- polygon._positions.forEach(item => {
- position += item._lng + ',' + item._lat + ';'
+
+ polygon.setStyle({
+ material: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
})
- position += polygon._positions[0]._lng + ',' + polygon._positions[0]._lat + ';'
+ drawPlotLayers.addOverlay(polygon)
+
+ let position = ''
+
+ polygon.positions.forEach(item => {
+ position += `${item.lng},${item.lat};`
+ })
+
+ position += polygon.positions[0].lng + ',' + polygon.positions[0].lat + ';'
positionStr = position
} else {
- data._positions.forEach(item => {
- positionStr = positionStr + item._lng + ',' + item._lat + ';'
+ positions.forEach(item => {
+ positionStr += `${item.lng},${item.lat};`
})
- positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
+ positionStr = positionStr + positions[0].lng + ',' + positions[0].lat + ';'
}
+
+ this.searchTreeData = []
+
getRegionList({
page: 1,
count: 20,
range: positionStr
}).then(res => {
- this.monitoringList = res.data.data.list
+ this.searchTreeData = res.data.data
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
+ res.data.data.length && res.data.data.forEach(item => {
+ this.$EventBus.$emit('layerPointAdd', {
+ layerName: 'treeValAllLayer',
+ type: "billboard",
+ layerType: 'ClusterLayer',
+ params: {
+ ...item,
+ text: item.name,
+ lng: item.longitude,
+ lat: item.latitude,
+ url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
+ channelId: item.channelId,
+ status: item.status,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ },
+ incident: this.siteClick,
+ // mouseOverIncident: this.pointMouseOver,
+ // mouseOutIncident: this.pointMouseOut,
+ })
})
- this.initMonitoringIcon()
- })
- },
-
- /**
- * @description: 加载面调用接口返回的点数据
- * @return {*}
- */
- initMonitoringIcon () {
- this.monitoringList.forEach(item => {
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'monitoringLayers',
- type: "billboard",
- params: {
- name: item.name,
- lng: item.longitude,
- lat: item.latitude,
- alt: 1,
- url: '/img/icon/video.png',
- deviceId: item.deviceId,
- channelId: item.channelId
- },
- incident: this.siteClick
- })
- })
- },
-
- // 保存绘制的线面
- saveDrawInfo () {
- if (this.drawName == '') {
- this.$message({
- message: '请输入名称',
- type: 'error'
- })
- } else {
- let drawPositionStr = ''
- let extent = 0
- let width = 0
-
- if (this.drawType == 1) {
- // 获取线坐标
- this.drawPlotData._positions.forEach(item => {
- drawPositionStr += item._lng + ' ' + item._lat + ','
- })
- drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
- // 求线长度
- let linePosition = []
- this.drawPlotData._positions.forEach(item => {
- linePosition.push([item._lng, item._lat])
- })
- let line = this.$turf.lineString(linePosition)
- let length = this.$turf.length(line, { units: 'kilometers' })
- extent = length.toFixed(3)
- } else {
- // 获取面坐标
- this.drawPlotData._positions.forEach(item => {
- drawPositionStr += item.lng + ' ' + item.lat + ','
- })
- drawPositionStr += this.drawPlotData._positions[0]._lng + ' ' + this.drawPlotData._positions[0]._lat
- // 求面面积
- let polygonPosition = []
- this.drawPlotData._positions.forEach(item => {
- polygonPosition.push([item._lng, item._lat])
- })
- polygonPosition.push([this.drawPlotData._positions[0]._lng, this.drawPlotData._positions[0]._lat])
- let polygon = this.$turf.polygon([polygonPosition])
- let area = this.$turf.area(polygon)
- extent = area.toFixed(3)
- }
- this.insertRegionSaveList({ type: this.drawType, positions: drawPositionStr, name: this.drawName, extent: extent, width: this.range, color: this.chooseRangeColor })
- this.drawDialogVisible = false
- this.drawName = ''
- if (drawPlotLayers != null) {
- drawPlotLayers.clear()
- }
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
- }
- },
-
- // 取消绘制线面
- cancelSaveDrawInfo () {
- this.drawDialogBeforeClose()
- },
-
- // type线面类型, positions坐标, name名称, width线宽度, extent线长度或面面积
- insertRegionSaveList (parmas) {
- insertRegionSaveList(parmas).then(res => {
- if (res.data.success) {
- this.$message({
- message: '保存成功',
- type: 'warning'
- })
- } else {
- this.$message({
- message: '保存失败'
- })
- }
-
+ this.closeLoading()
})
},
@@ -518,24 +522,31 @@
sourceId = node.data.sourceId
}
+ console.log(node, 56)
+
+ const status = node.label == "在线" ? { status: 1 } : node.label == "离线" ? { status: 0 } : {}
+
await getTreeDevices({
deviceId: equipmentNum,
parentId,
deptId: this.userInfo.dept_id,
type,
sourceId,
+ ...status
}).then(res => {
data = res.data.data
- data.forEach(item => {
- item.leaf = !item.parent
+ if (data.length) {
+ data.forEach(item => {
+ item.leaf = !item.parent
- if (!item.longitude && !item.latitude && item.leaf) {
- item.disabled = true
- }
- })
+ if (!item.longitude && !item.latitude && item.leaf) {
+ item.disabled = true
+ }
+ })
- data[0].leaf == false && node.level < 2 && this.defaultExpandedKeys.push(data[0].id)
+ data[0].leaf == false && node.level < 2 && this.defaultExpandedKeys.push(data[0].id)
+ }
})
return resolve(data)
@@ -562,59 +573,23 @@
siteGd: 600,
})
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'treeValLayer',
- type: 'VectorLayer'
+ this.$store.commit('SET_VIDEOLISTPOPUP', true)
+
+ this.$store.commit('SET_VIDEOLISTPOPUPDATA', {
+ ...node
})
- this.$EventBus.$emit('mapClearLayer', {
- layerName: 'treeValAllLayer',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'treeValLayer',
- type: "billboard",
- params: {
- name: node.name,
- lng: node.longitude,
- lat: node.latitude,
- alt: 1,
- url: node.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
- channelId: node.id,
- status: node.status
- },
- incident: this.siteClick,
- mouseOverIncident: this.pointMouseOver,
- mouseOutIncident: this.pointMouseOut,
- // pointMouseMove: this.pointMouseMove
- })
-
- getTreeDevicesNearby({ longitude, latitude, mileage: 1 }).then(res => {
- res.data.data.forEach(item => {
- if (item.longitude && item.latitude && item.channelId != node.id) {
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'treeValAllLayer',
- type: "billboard",
- layerType: 'ClusterLayer',
- params: {
- ...item,
- text: item.name,
- lng: item.longitude,
- lat: item.latitude,
- alt: 1,
- url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
- channelId: item.channelId,
- status: item.status
- },
- incident: this.siteClick,
- mouseOverIncident: this.pointMouseOver,
- mouseOutIncident: this.pointMouseOut,
- // pointMouseMove: this.pointMouseMove
- })
- }
- })
-
+ var popup = new global.DC.DivForms(global.viewer, {
+ domId: 'videoListPopup',
+ position: [
+ global.DC.Transform.transformWGS84ToCartesian(
+ new global.DC.Position(
+ Number(node.longitude),
+ Number(node.latitude),
+ 0
+ )
+ )
+ ]
})
},
@@ -657,30 +632,75 @@
pointMouseOut (e) {
this.$store.commit('SET_VIDEOLISTPOPUP', false)
},
+
+ // 获取设备列表
+ getEquipmentAll (params, layerName) {
+ this.loading()
+
+ this.$EventBus.$emit('mapClearLayer', {
+ layerName: 'treeValAllLayer',
+ type: 'VectorLayer'
+ })
+
+ initMapPosition()
+
+ getEquipmentAll({ ...params, deptId: this.userInfo.dept_id }).then(res => {
+ if (params.type == 1 && res.data.data) {
+ res.data.data.forEach(item => {
+ if (item.longitude && item.latitude) {
+ this.$EventBus.$emit('layerPointAdd', {
+ layerName: 'treeValAllLayer',
+ type: "billboard",
+ layerType: 'ClusterLayer',
+ params: {
+ ...item,
+ text: item.name,
+ lng: item.longitude,
+ lat: item.latitude,
+ url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
+ channelId: item.channelId,
+ status: item.status,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY
+ },
+ incident: this.siteClick,
+ // mouseOverIncident: this.pointMouseOver,
+ // mouseOutIncident: this.pointMouseOut,
+ })
+ }
+ })
+ }
+
+ this.closeLoading()
+ })
+ },
+
+ loading () {
+ loading = this.$loading({
+ lock: true,
+ text: '拼命加载中',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.2)'
+ })
+ },
+
+ closeLoading () {
+ if (loading != null) {
+ setTimeout(() => {
+ loading.close()
+ }, 1000)
+ }
+ },
+
},
destroyed () {
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'searchLayer',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'treeValLayer',
- type: 'VectorLayer'
- })
+ this.$store.commit('SET_VIDEOLISTPOPUP', false)
+ loading.close()
this.$EventBus.$emit('mapRemoveLayer', {
layerName: 'treeValAllLayer',
type: 'VectorLayer'
})
-
- // graphicLayer.destroy()
this.$parent.$parent.$parent.resize('0px')
diff --git "a/src/views/video/region - \345\211\257\346\234\254.vue" "b/src/views/video/region - \345\211\257\346\234\254.vue"
deleted file mode 100644
index 8ca51d3..0000000
--- "a/src/views/video/region - \345\211\257\346\234\254.vue"
+++ /dev/null
@@ -1,1315 +0,0 @@
-<!--
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2022-08-18 16:18:17
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-03-02 16:11:51
- * @FilePath: \srs-police-affairs\src\views\video\region.vue
- * @Description: 辖区管理
- *
- * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
--->
-
-<template>
- <div class="region container">
- <div class="region-left-container">
- <div v-show="boxShow" class="container-content">
- <div class="search-box">
- 范围名称：
- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
- <button @click="searchClick" class="el-icon-search"></button>
- </div>
-
- <div v-show="true" class="search-val-box">
- <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
- </div>
- </div>
-
- <div class="list-show">
- <div class="car-list">
- <div class="list-box">
- <el-table :data="saveRangeList" style="width: 100%"
- :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
- :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
- <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
- <el-table-column prop="extent" label="长度km/面积㎡" min-width="50%">
- <!-- <template slot-scope="scope">
- <span>{{ scope.row.extent }}</span>
- <span>千米</span>
- </template>-->
- </el-table-column>
- <el-table-column prop="id" label="操作" min-width="50%">
- <template slot-scope="scope">
- <el-button @click.stop="flytoRange(scope.row)" type="text" size="small" title="定位">
- <i class="el-icon-location"></i>
- </el-button>
- <el-button @click.stop="deleteRegionSaveList(scope.row.id)" type="text" size="small"
- title="删除">
- <i class="el-icon-delete"></i>
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="pages all-pagination-sty">
- <el-pagination background layout="prev, pager, next" :page-size="pagesize"
- :page-count="pagesCount" :current-page="currentPage"
- @current-change="handleCurrentChange"></el-pagination>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="item video1" v-show="isShowVideo.video1">
- <div class="select" v-show="isShowSelect.video1">
- <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
- ref="videoSelect1">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video1 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video1">
- <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video1">设备离线中…</div>
- </div>
- <div class="item video2" v-show="isShowVideo.video2">
- <div class="select" v-show="isShowSelect.video2">
- <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
- ref="videoSelect2">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video2 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video2">
- <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video2">设备离线中…</div>
- </div>
- <div class="item video3" v-show="isShowVideo.video3">
- <div class="select" v-show="isShowSelect.video3">
- <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })" placeholder="请选择"
- ref="videoSelect3">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video3 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video3">
- <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video3">设备离线中…</div>
- </div>
- <div class="item video4" v-show="isShowVideo.video4">
- <div class="select" v-show="isShowSelect.video4">
- <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
- ref="videoSelect4">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video4 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video4">
- <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video4">设备离线中…</div>
- </div>
- <div class="item video5" v-show="isShowVideo.video5">
- <div class="select" v-show="isShowSelect.video5">
- <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择"
- ref="videoSelect5">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video5 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video5">
- <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video5">设备离线中…</div>
- </div>
- <div class="item video6" v-show="isShowVideo.video6">
- <div class="select" v-show="isShowSelect.video6">
- <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择"
- ref="videoSelect6">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video6 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video6">
- <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video6">设备离线中…</div>
- </div>
- <div class="item video7" v-show="isShowVideo.video7">
- <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"
- :label="item.label" :value="item.value" class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video7 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video7">
- <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video7">设备离线中…</div>
- </div>
- <div class="item video8" v-show="isShowVideo.video8">
- <div class="select" v-show="isShowSelect.video8">
- <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择"
- ref="videoSelect8">
- <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
- class="video-option-css">
- <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
- </div>
- {{ item.label }}
- </el-option>
- </el-select>
- <div class="close" @click="isShowVideo.video8 = false">
- <i class="el-icon-close"></i>
- </div>
- </div>
- <div class="video" v-show="!isShowOutline.video8">
- <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </div>
- <div class="outline" v-show="isShowOutline.video8">设备离线中…</div>
- </div>
- <!-- <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div> -->
-
- <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
- :close-on-click-modal="true" class="car-video-box">
- <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
- </el-dialog>
-
- <el-dialog title="修改范围" :modal="false" :visible.sync="editRangeVisible" :close-on-click-modal="true"
- class="edit-range-box">
- <div class="line">
- <div class="value-name-box">选择范围颜色：</div>
- <div class="pick-color-box">
- <el-color-picker v-model="chooseRangeColor" :predefine="predefineColors" size="small">
- </el-color-picker>
- </div>
- </div>
- <div v-show="!isLineRange" class="placeholder"></div>
- <div v-show="isLineRange">
- <div class="value-name-box">设置范围宽度：</div>
- <div class="input-width-box">
- <input type="text" v-model="lineWidth" placeholder="请输入..." />
- </div>
- <div class="units">米</div>
- </div>
- <div>
- <el-button @click="saveRangeInfo">保存</el-button>
- <el-button @click="editRange">编辑</el-button>
- <el-button @click="deleteRange">删除</el-button>
- <el-button @click="editRangeVisible = false">取消</el-button>
- </div>
- </el-dialog>
- </div>
-</template>
-
-<script>
-import EntityDraw from "@/utils/EntityDraw.js"
-import { listQuery, accurateSearch } from "@/utils/search.js"
-import { getVideoList, getDevices, getRegionSaveList, deleteRegionSaveList, getRegionList, updataRegionSaveList } from '@/api/video/index.js'
-import flvjs from 'flv.js'
-
-// let graphicLayer = null
-let rangeLayer = null
-let rangeLineLayer = null
-let plot = undefined
-
-export default {
- inject: ['userInfo'],
-
- data () {
- return {
- currentPage: 1,
- pagesize: 13,
- pagesCount: 1,
- monitoringList: [],
- dialogTitle: '',
- dialogVisible: false,
- searchValue: '',
- searchArray: [],
- searchValBoxShow: false,
- boxShow: true,
- flvPlayer: null,
- flvListPlayer: {
- flvPlayer1: null,
- flvPlayer2: null,
- flvPlayer3: null,
- flvPlayer4: null,
- flvPlayer5: null,
- flvPlayer6: null,
- flvPlayer7: null,
- flvPlayer8: null,
- },
- saveRangeList: [],
- monitorOption: [],
- monitor: {
- type1: '',
- type2: '',
- type3: '',
- type4: '',
- type5: '',
- type6: '',
- type7: '',
- type8: '',
- },
- isShowSelect: {
- video1: true,
- video2: true,
- video3: true,
- video4: true,
- video5: true,
- video6: true,
- video7: true,
- video8: true,
- },
- isShowVideo: {
- video1: false,
- video2: false,
- video3: false,
- video4: false,
- video5: false,
- video6: false,
- video7: false,
- video8: false,
- },
- saveRangeID: '',
- valChoosed: '',
- argsChoosed: '',
- isShowOutline: {
- video1: false,
- video2: false,
- video3: false,
- video4: false,
- video5: false,
- video6: false,
- video7: false,
- video8: false,
- },
- chooseRangeColor: '#FF0000',
- editRangeVisible: false,
- lineWidth: '',
- rangeOverlayData: {},
- isLineRange: false,
- isEndDrawPlot: true,
- 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'
- ],
- }
- },
-
- created () {
- // this.getVideoList(1, 100)
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
-
- },
-
- mounted () {
- this.$parent.$parent.$parent.resize('400px', true)
- // graphicLayer = new EntityDraw()
- this.$nextTick(() => {
- if (rangeLayer == null) {
- rangeLayer = new global.DC.VectorLayer('rangeLayer')
- global.viewer.addLayer(rangeLayer)
- plot = new global.DC.Plot(global.viewer)
- }
- if (rangeLineLayer == null) {
- rangeLineLayer = new global.DC.VectorLayer('rangeLineLayer')
- global.viewer.addLayer(rangeLineLayer)
- }
- })
-
- },
-
- methods: {
- handleCurrentChange: function (currentPage) {
- this.currentPage = currentPage
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
- },
-
- // getVideoList (current, size) {
- // getVideoList(current, size).then(res => {
- // this.monitoringList = res.data.data.list
- // this.initMonitoringIcon()
- // this.getMonitorOption()
- // })
- // },
-
- // getMonitorOption () {
- // this.monitorOption = []
- // this.monitoringList.forEach((item, index) => {
- // let flvUrl = ''
- // this.getDevices(item.deviceId).then(res => {
- // flvUrl = res
- // this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvUrl}` })
- // if (index == this.monitoringList.length - 1) {
- // if (this.monitoringList.length < 6) {
- // this.monitor.type1 = this.monitorOption[0].label
- // this.monitor.type2 = this.monitorOption[0].label
- // this.monitor.type3 = this.monitorOption[0].label
- // this.monitor.type4 = this.monitorOption[0].label
- // this.monitor.type5 = this.monitorOption[0].label
- // this.monitor.type6 = this.monitorOption[0].label
- // for (let i = 0; i < 6; i++) {
- // this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[0].flvUrl}`, `videoElement${i + 1}`)
- // }
-
- // } else {
- // this.monitor.type1 = this.monitorOption[0].label
- // this.monitor.type2 = this.monitorOption[1].label
- // this.monitor.type3 = this.monitorOption[2].label
- // this.monitor.type4 = this.monitorOption[3].label
- // this.monitor.type5 = this.monitorOption[4].label
- // this.monitor.type6 = this.monitorOption[5].label
- // for (let i = 0; i < 6; i++) {
- // this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[i].flvUrl}`, `videoElement${i + 1}`)
- // }
- // }
- // }
- // })
- // })
- // },
-
- playVideoList (flvItemPlayer, flvUrl, videoEleName) {
- if (this.flvListPlayer[flvItemPlayer] != null) {
- this.flvListPlayer[flvItemPlayer].pause()
- this.flvListPlayer[flvItemPlayer].unload()
- this.flvListPlayer[flvItemPlayer].detachMediaElement()
- this.flvListPlayer[flvItemPlayer].destroy()
- this.flvListPlayer[flvItemPlayer] = null
- }
-
- if (flvjs.isSupported() && flvUrl != 'nodata') {
- let videoElement = document.getElementById(videoEleName)
- this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
- type: 'flv',
- isLive: true,
- hasAudio: false,
- url: flvUrl
- })
- this.flvListPlayer[flvItemPlayer].attachMediaElement(videoElement)
- this.flvListPlayer[flvItemPlayer].load()
- this.flvListPlayer[flvItemPlayer].play()
- }
- },
-
- 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.isShowOutline[`video${args}`] = true
- }
- this.getDevices(this.monitorOption[val].item.channelId).then(res => {
-
- this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`)
- })
- },
-
- getRegionSaveList (current, size, deptId, name) {
- getRegionSaveList(current, size, deptId, name).then(res => {
- this.saveRangeList = res.data.data.records
- this.pagesCount = res.data.data.pages
- this.initRangeListLayer()
- })
- },
-
- deleteRegionSaveList (id) {
- deleteRegionSaveList(id).then(res => {
- if (res.data.success) {
- this.$message({
- message: '删除成功',
- type: 'warning'
- })
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
- } else {
- this.$message({
- message: '删除失败'
- })
- }
- })
- },
-
- flytoRange (data) {
- this.$EventBus.$emit('flytoLayer', {
- polygonName: 'polygon' + data.id,
- duration: 3
- })
-
- },
-
- initRangeListLayer () {
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'rangeSaveLayer',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- if (rangeLineLayer != null) {
- rangeLineLayer.clear()
- }
-
- this.saveRangeList.forEach(item => {
- console.log(item, 656565656)
- let positionStr = ''
- if (item.type == 1) {
- let linePositionStr = ''
- linePositionStr = item.positions.replace(/,/g, ';')
- linePositionStr = linePositionStr.replace(/ /g, ',')
- linePositionStr += ';'
- let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, 100)
- let polygon = new global.DC.Polygon(coords)
- let position = ''
- polygon._positions.forEach(item => {
- position += item._lng + ',' + item._lat + ';'
- })
- positionStr = position
- } else {
- positionStr = this.convertPositionDate(item.positions, 'polygon')
- }
- 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)
- }
- this.$EventBus.$emit('layerPolygonAdd', {
- layerName: 'rangeSaveLayer',
- positions: positionStr,
- material: color,
- polygonName: 'polygon' + item.id,
- params: item,
- incident: this.overlayTypeClick
- })
- })
-
- },
-
- // 点击线面
- overlayTypeClick (e) {
- if (this.isEndDrawPlot == false) {
- this.$message({
- message: '请先完成编辑',
- type: 'error'
- })
- } else {
- this.rangeOverlayData = e.overlay
- this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
- this.chooseRangeColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
- if (e.overlay.attrParams.type == 1) {
- this.isLineRange = true
- } else {
- this.isLineRange = false
- }
- this.editRangeVisible = true
- }
- },
-
- // 保存范围修改
- saveRangeInfo () {
- this.updataRegionSaveList({ id: this.rangeOverlayData.attrParams.id, color: this.chooseRangeColor, width: this.lineWidth })
- this.editRangeVisible = false
- },
-
- // 更新范围信息
- updataRegionSaveList (params) {
- this.isEndDrawPlot = true
- updataRegionSaveList(params).then(res => {
- if (res.data.success) {
- this.$message({
- message: '保存成功',
- type: 'warning'
- })
- } else {
- this.$message({
- message: '保存失败'
- })
- }
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
- this.editRangeVisible = false
- })
- },
-
- // 删除线面
- deleteRange () {
- deleteRegionSaveList(this.rangeOverlayData.attrParams.id).then(res => {
- if (res.data.success) {
- this.$message({
- message: '删除成功',
- type: 'warning'
- })
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
- } else {
- this.$message({
- message: '删除失败'
- })
- }
- this.editRangeVisible = false
- })
- },
-
- // 编辑线面
- editRange () {
- this.editRangeVisible = false
- this.isEndDrawPlot = false
- let overlayData = this.rangeOverlayData
- if (this.rangeOverlayData.attrParams.type == 1) {
- this.$EventBus.$emit('mapRemovePolygonLayer', {
- layerName: 'rangeSaveLayer',
- polygonName: 'polygon' + this.rangeOverlayData.attrParams.id,
- type: 'VectorLayer'
- })
- overlayData = this.rangeOverlayData.attrParams.lineObj
- }
- plot.edit(overlayData, (e) => {
- let position = ''
- overlayData._positions.forEach(item => {
- position += item._lng + ' ' + item._lat + ','
- })
- position = position.slice(0, position.length - 1)
- rangeLayer.addOverlay(overlayData)
- this.updataRegionSaveList({ id: this.rangeOverlayData.attrParams.id, color: this.chooseRangeColor, width: this.lineWidth, positions: position })
- })
- },
-
- convertPositionDate (data, type) {
- let positionStr = data
- if (type == 'polygon') {
- positionStr = positionStr.replace(/,/g, ";")
- positionStr = positionStr.replace(/ /g, ",")
- return positionStr
- } else {
- positionStr = data.slice(11, positionStr.length - 1)
- let positionArr = positionStr.split(",")
- let positionNewStr = ''
- positionArr.forEach(item => {
- let lng = item.split(' ')[0]
- let lat = item.split(' ')[1]
- positionNewStr += lng + ',' + lat + ';'
- })
- return positionNewStr
- }
- },
-
- async getDevices (channelId) {
- let flvAddress = ''
- await getDevices(channelId).then(res => {
- if ('data' in res.data) {
- flvAddress = res.data.data.flv
- } else {
- flvAddress = 'nodata'
- }
- })
- return flvAddress
- },
-
- initMonitoringIcon () {
- this.monitoringList.forEach((item, index) => {
- this.$EventBus.$emit('layerPointAdd', {
- layerName: 'monitoringLayers',
- type: "billboard",
- params: {
- name: item.name,
- lng: item.longitude,
- lat: item.latitude,
- alt: 1,
- url: '/img/icon/video.png',
- // deviceId: item.deviceId
- },
- // incident: this.siteClick
- })
-
- })
- },
-
- rowClick (row) {
- if (this.saveRangeID == row.id) {
- let noShowVideo = {
- video1: false,
- video2: false,
- video3: false,
- video4: false,
- video5: false,
- video6: false,
- video7: false,
- video8: false
- }
- if (JSON.stringify(noShowVideo) != JSON.stringify(this.isShowVideo)) {
- this.monitorOption.forEach((item, index) => {
- if (index < 8) {
- this.isShowVideo[`video${index + 1}`] = false
- }
- })
- } else {
- this.monitorOption.forEach((item, index) => {
- if (index < 8) {
- this.isShowVideo[`video${index + 1}`] = true
- }
- })
- }
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
- } else {
- this.isShowVideo = {
- video1: false,
- video2: false,
- video3: false,
- video4: false,
- video5: false,
- video6: false,
- video7: false,
- video8: false
- }
- this.monitor = {
- type1: '',
- type2: '',
- type3: '',
- type4: '',
- type5: '',
- type6: '',
- type7: '',
- type8: ''
- }
- if (row.type == 2) {
- getRegionList({
- page: 1,
- count: 20,
- id: row.id
- }).then(res => {
- let monitorData = res.data.data.list
-
- this.monitoringList = res.data.data.list
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- this.initMonitoringIcon()
-
- this.monitorOption = []
-
- monitorData.forEach((item, index) => {
- this.monitorOption.push({ value: index, label: item.name, item })
-
- if (index < 8) {
- const ind = index + 1
- this.isShowVideo[`video${ind}`] = true
- this.monitor[`type${ind}`] = item.name
- if (item.status == 0) {
- this.isShowOutline[`video${ind}`] = true
- }
-
- this.getDevices(item.channelId).then(res => {
- this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
- })
- }
- })
- })
- } else {
- let positionStr = row.positions.replace(/,/g, ';')
- positionStr = positionStr.replace(/ /g, ',')
- positionStr += ';'
- let coords = global.DC.GeoTools.polylineBuffer(positionStr, row.width)
- let polygon = new global.DC.Polygon(coords)
- let position = ''
- polygon._positions.forEach(item => {
- position += item._lng + ',' + item._lat + ';'
- })
- getRegionList({
- page: 1,
- count: 20,
- range: position
- }).then(res => {
- let monitorData = res.data.data.list
-
- this.monitoringList = res.data.data.list
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- this.initMonitoringIcon()
-
- this.monitorOption = []
-
- monitorData.forEach((item, index) => {
- this.monitorOption.push({ value: index, label: item.name, item })
-
- if (index < 8) {
- const ind = index + 1
- this.isShowVideo[`video${ind}`] = true
- this.monitor[`type${ind}`] = item.name
- if (item.status == 0) {
- this.isShowOutline[`video${ind}`] = true
- }
-
- this.getDevices(item.channelId).then(res => {
- this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
- })
- }
- })
- })
- }
-
- }
- this.saveRangeID = row.id
- },
-
- // async siteClick (e) {
- // if (this.flvPlayer != null) {
- // this.flvPlayer.pause()
- // this.flvPlayer.unload()
- // this.flvPlayer.detachMediaElement()
- // this.flvPlayer.destroy()
- // this.flvPlayer = null
- // }
-
- // this.dialogTitle = e.overlay.attrParams.name
- // this.dialogVisible = true
- // let flvUrl = ''
- // await this.getDevices(e.overlay.attrParams.deviceId).then(res => {
- // flvUrl = res
- // })
- // if (flvjs.isSupported() && flvUrl != 'nodata') {
- // var videoElement = document.getElementById('videoElement')
- // this.flvPlayer = flvjs.createPlayer({
- // type: 'flv',
- // isLive: true,
- // hasAudio: false,
- // url: flvUrl
- // })
- // this.flvPlayer.attachMediaElement(videoElement)
- // this.flvPlayer.load()
- // this.flvPlayer.play()
- // }
- // },
-
- dialogBeforeClose () {
- this.dialogVisible = false
- },
-
- searchChange () {
- if (this.searchValue == '') {
- this.searchValBoxShow = false
- this.searchArray = []
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
- this.$message({
- message: '请输入搜索内容',
- type: 'warning'
- })
- } else {
- this.searchArray = listQuery(this.saveRangeList, this.searchValue, 'name')
- this.searchValBoxShow = true
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
- }
- },
-
- searchClick () {
- if (this.searchValue != '') {
- this.searchValBoxShow = false
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
- } else {
- this.$message({
- message: '请输入搜索内容',
- type: 'warning'
- })
- }
- },
-
- searchVlaClick (item) {
- this.searchValBoxShow = false
- this.searchArray = []
- // this.monitoringList = [item]
- this.searchValue = item.name
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
- },
-
- // 大小重置
- boxResize (val) {
- this.boxShow = val
- if (!val) {
- let videoList = document.querySelectorAll('.item')
- videoList.forEach(item => {
- item.classList.add('new-item-width')
- })
- document.querySelector('.video1').classList.add('new-video146-left')
- document.querySelector('.video1 video').load()
- document.querySelector('.video2').classList.add('new-video235-left')
- document.querySelector('.video3').classList.add('new-video235-left')
- document.querySelector('.video4').classList.add('new-video146-left')
- document.querySelector('.video5').classList.add('new-video235-left')
- document.querySelector('.video6').classList.add('new-video146-left')
- document.querySelector('.video7').classList.add('new-video7-left')
- document.querySelector('.video8').classList.add('new-video8-left')
- } else {
- let videoList = document.querySelectorAll('.item')
- videoList.forEach(item => {
- item.classList.remove('new-item-width')
- })
- document.querySelector('.video1').classList.remove('new-video146-left')
- document.querySelector('.video2').classList.remove('new-video235-left')
- document.querySelector('.video3').classList.remove('new-video235-left')
- document.querySelector('.video4').classList.remove('new-video146-left')
- document.querySelector('.video5').classList.remove('new-video235-left')
- document.querySelector('.video6').classList.remove('new-video146-left')
- document.querySelector('.video7').classList.remove('new-video7-left')
- document.querySelector('.video8').classList.remove('new-video8-left')
- }
- },
-
- deleteVideo () {
- this.isShowVideo = {
- video1: false,
- video2: false,
- video3: false,
- video4: false,
- video5: false,
- video6: false,
- video7: false,
- video8: false
- }
- },
-
-
- //#region
- // enterVideoBox (num) {
- // for (let key in this.isShowSelect) {
- // this.isShowSelect[key] = false
- // }
- // if (num == 1) {
- // this.$refs.videoSelect1.blur()
- // } else if (num == 2) {
- // this.$refs.videoSelect2.blur()
- // } else if (num == 3) {
- // this.$refs.videoSelect3.blur()
- // } else if (num == 4) {
- // this.$refs.videoSelect4.blur()
- // } else if (num == 5) {
- // this.$refs.videoSelect5.blur()
- // } else if (num == 6) {
- // this.$refs.videoSelect6.blur()
- // } else if (num == 7) {
- // this.$refs.videoSelect7.blur()
- // } else if (num == 8) {
- // this.$refs.videoSelect8.blur()
- // }
- // this.isShowSelect[`video${num}`] = true
- // },
-
- // leaveVideoBox (num) {
- // if (num == 1) {
- // this.$refs.videoSelect1.blur()
- // } else if (num == 2) {
- // this.$refs.videoSelect2.blur()
- // } else if (num == 3) {
- // this.$refs.videoSelect3.blur()
- // } else if (num == 4) {
- // this.$refs.videoSelect4.blur()
- // } else if (num == 5) {
- // this.$refs.videoSelect5.blur()
- // } else if (num == 6) {
- // this.$refs.videoSelect6.blur()
- // } else if (num == 7) {
- // this.$refs.videoSelect7.blur()
- // } else if (num == 8) {
- // this.$refs.videoSelect8.blur()
- // }
- // this.isShowSelect[`video${num}`] = false
- // },
-
- // enterSelectBox (num) {
- // this.isShowSelect[`video${num}`] = true
- // },
- // #endregion
-
- },
-
- destroyed () {
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'monitoringLayers',
- type: 'VectorLayer'
- })
-
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'rangeSaveLayer',
- type: 'VectorLayer'
- })
-
- // graphicLayer.destroy()
-
- if (rangeLineLayer != null) {
- rangeLineLayer.clear()
- }
-
- this.$parent.$parent.$parent.resize('0px')
-
- if (this.flvPlayer != null) {
- this.flvPlayer.pause()
- this.flvPlayer.unload()
- this.flvPlayer.detachMediaElement()
- this.flvPlayer.destroy()
- this.flvPlayer = null
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-.container {
- position: relative;
- display: flex;
- width: 100%;
- height: 100%;
-
- .region-left-container {
- position: relative;
- width: 100%;
- height: 100%;
-
- .container-content {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- color: #fff;
- background: $bg-color;
-
- .search-box {
- padding: 6px;
- height: 46px;
- display: flex;
- align-items: center;
-
- input {
- flex: 1;
- height: 100%;
- font-size: 18px;
- text-indent: 1em;
- color: #ffffff;
- background-color: rgba(24, 79, 202, 0.6);
- // border: 1px solid rgb(0, 92, 169);
- border: 1px solid rgb(24, 79, 202);
- border-radius: 20px 0 0 20px;
- }
-
- input:focus {
- outline: none;
- }
-
- input::-webkit-input-placeholder {
- color: rgba(238, 238, 238, 0.7);
- }
-
- button {
- font-size: 24px;
- font-weight: 700;
- width: 80px;
- height: 100%;
- background-color: $table-body-tr-n-color;
- color: #fff;
- border: 1px solid rgb(0, 92, 169);
- cursor: pointer;
- border-radius: 0 20px 20px 0;
- }
-
- button:active {
- background-color: $table-body-tr-2n-color;
- border: 1px solid rgb(0, 92, 169);
- }
- }
-
- .search-val-box {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 48px;
- left: 6px;
- width: calc(100% - 12px);
- max-height: 160px;
- text-align: left;
- color: #fff;
- background: $el-dialog-bg-color;
- z-index: 1111;
- border-radius: 10px;
- overflow-y: auto;
-
- &>div {
- height: 100%;
- padding: 0 10px;
- line-height: 36px;
- cursor: pointer;
- }
- }
-
- .list-show {
- flex: 1;
-
- &>div {
- height: 100%;
- display: flex;
- flex-direction: column;
-
- // background-color: #fff;
- .list-box {
- flex: 1;
-
- .btn {
- width: 60px;
- height: 30px;
- background-color: #65b1ff;
- color: #fff;
- border-radius: 4px;
- cursor: pointer;
- margin-top: 10px;
- }
-
- .btn:active {
- background-color: rgb(0, 92, 169);
- border: 1px solid rgb(0, 92, 169);
- }
- }
- }
-
- .pages {
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- }
-
- .item {
- background-color: $bg-color;
- // position: absolute;
- position: fixed;
- z-index: 98;
- width: calc((1920 - 400) / 4 / 1920 * 100vw);
- height: calc((1080 - 60) / 3 / 1080 * 100vh);
-
- .close {
- position: absolute;
- top: 0;
- right: 0;
- width: 32px;
- text-align: center;
- height: 100%;
- z-index: 999;
- display: flex;
- color: #fff;
- font-size: 22px;
- cursor: pointer;
- align-items: center;
- }
-
- .close:hover {
- color: #65b1ff;
- }
-
- .select {
- position: absolute;
- top: 6%;
- width: 100%;
- z-index: 999;
- }
-
- .video {
- height: 100%;
- padding: 1%;
- }
-
- .outline {
- position: absolute;
- color: #eee;
- letter-spacing: 2px;
- font-size: 24px;
- width: 100%;
- text-align: center;
- top: 40%;
- }
- }
-
- .new-item-width {
- width: 25vw;
- }
-
- .new-video235-left {
- left: 0 !important;
- }
-
- .new-video146-left {
- left: 75vw !important;
- }
-
- .new-video7-left {
- left: 25vw !important;
- }
-
- .new-video8-left {
- left: 50vw !important;
- }
-
- .video1 {
- top: calc(60 / 1080 * 100vh);
- left: calc(1540 / 1920 * 100vw);
-
- .video {
- padding: 1% 1% 0 1%;
- }
- }
-
- .video2 {
- top: calc(60 / 1080 * 100vh);
- left: calc(400 / 1920 * 100vw);
-
- .video {
- padding: 1% 1% 0 1%;
- }
- }
-
- .video3 {
- left: calc(400 / 1920 * 100vw);
- // top: calc(340 / 1080 * 100vh);
- top: calc(400 / 1080 * 100vh);
-
- .video {
- padding: 1% 1% 0 1%;
- }
- }
-
- .video4 {
- left: calc(1540 / 1920 * 100vw);
- // top: calc(340 / 1080 * 100vh);
- top: calc(400 / 1080 * 100vh);
-
- .video {
- padding: 1% 1% 0 1%;
- }
- }
-
- .video5 {
- left: calc(400 / 1920 * 100vw);
- // top: calc(680 / 1080 * 100vh);
- top: calc(740 / 1080 * 100vh);
- }
-
- .video6 {
- left: calc(1540 / 1920 * 100vw);
- // top: calc(680 / 1080 * 100vh);
- top: calc(740 / 1080 * 100vh);
- }
-
- .video7 {
- left: calc(780 / 1920 * 100vw);
- // top: calc(680 / 1080 * 100vh);
- top: calc(740 / 1080 * 100vh);
-
- .video {
- padding: 1% 0 1% 0;
- }
- }
-
- .video8 {
- left: calc(1160 / 1920 * 100vw);
- // top: calc(680 / 1080 * 100vh);
- top: calc(740 / 1080 * 100vh);
-
- .video {
- padding: 1% 0 1% 1%;
- }
- }
-
- .deleteVideo {
- // position: absolute;
- position: fixed;
- width: 60px;
- height: 26px;
- line-height: 26px;
- color: #fff;
- background-color: $bg-color;
- left: calc(1480 / 1920 * 100vw);
- top: calc(70 / 1080 * 100vh);
- cursor: pointer;
- z-index: 99;
- }
-
- .deleteVideo-new-left {
- left: calc(1380 / 1920 * 100vw);
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/video/region.vue b/src/views/video/region.vue
index b95b671..5c4d472 100644
--- a/src/views/video/region.vue
+++ b/src/views/video/region.vue
@@ -35,9 +35,9 @@
<el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
<el-table-column prop="extent" label="长度km/面积㎡" min-width="50%">
<!-- <template slot-scope="scope">
- <span>{{ scope.row.extent }}</span>
- <span>千米</span>
- </template>-->
+ <span>{{ scope.row.extent }}</span>
+ <span>千米</span>
+ </template>-->
</el-table-column>
<el-table-column prop="id" label="操作" min-width="50%">
<template slot-scope="scope">
@@ -274,6 +274,8 @@
let rangeLineLayer = null
let plot = undefined
+import { initMapPosition } from '@/utils/mapPositionInit'
+
export default {
inject: ['userInfo'],
@@ -382,8 +384,11 @@
created () {
// this.getVideoList(1, 100)
- this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
+ this.$nextTick(() => {
+ initMapPosition()
+ })
+ this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
},
mounted () {
--
Gitblit v1.9.3