<template>
|
<div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
|
<div class="left">
|
<h3>预案布置</h3>
|
<div>
|
<span>要素资源：</span>
|
<ul>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
|
<img src="/img/icon/police-people-btn.png" style="height:100%" />
|
</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
|
<img src="/img/icon/car-btn.png" style="height:100%" />
|
</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'icon', 'icon1')" title="普通群众">普通群众</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'icon', 'icon2')" title="保护对象">保护对象</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'icon', 'icon3')" title="危险人物">危险人物</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('billboard', 'icon', 'icon4')" title="自定义图片标注">自定义图片标注</button>
|
</li>
|
</ul>
|
</div>
|
<div>
|
<span>作战标绘：</span>
|
<ul>
|
<li>
|
<button @click="drawArrow('attack_arrow', 1)" title="进攻箭头">进攻箭头</button>
|
</li>
|
<li>
|
<button @click="drawArrow('double_arrow', 2)" title="双箭头">双箭头</button>
|
</li>
|
<li>
|
<button @click="drawArrow('fine_arrow', 3)" title="直箭头">直箭头</button>
|
</li>
|
<li>
|
<button @click="drawArrow('tailed_attack_arrow', 4)" title="燕尾箭头">燕尾箭头</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
|
</li>
|
<li>
|
<button @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')" title="折线">折线</button>
|
</li>
|
</ul>
|
</div>
|
<div>
|
<span>巡逻路线：</span>
|
<ul>
|
<li>
|
<!-- <el-button
|
></el-button>-->
|
<button @click="drawThreeArrow('polyline', 'policecar')" title="巡逻路线">
|
<img src="/img/icon/route1.png" style="height:100%" />
|
</button>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
updateActivityCar, updateActivityPolice,
|
updateSecurityPlot
|
} from '@/api/activity/index.js'
|
|
import Plot from "@/utils/plot/Plot.js"
|
|
let plotDrawEmit = null
|
|
let addPlotOverlayData = null
|
|
let currentEmitEl = null
|
let drawThreeTool = null
|
|
let drawFlag = false
|
let drawTwoFlag = false
|
|
let currentStatus = ''
|
|
const plotDrawType = 1
|
export default {
|
props: [
|
'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
|
'policeSwitch', 'polylineBtnSwitch',
|
'arrowBtnSwitch', 'policeIconId', 'lineWidth'],
|
data () {
|
return {
|
startDrawFlag: false,
|
startTwoDrawFlag: false
|
}
|
},
|
|
mounted () {
|
this.$nextTick(() => {
|
|
global.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
plotDrawEmit = new global.DC.Plot(global.viewer, {
|
clampToModel: true
|
})
|
|
drawThreeTool = new Plot(global.viewer, {
|
clampToModel: true
|
})
|
|
})
|
|
},
|
|
methods: {
|
drawArrow (type, plotType) {
|
let flag
|
this.$EventBus.$emit('tilesetLayerFlag', plotDrawType, (e) => { flag = e })
|
if (flag != true) return
|
|
drawTwoFlag = false
|
if (this.startDrawFlag == true) {
|
drawFlag = true
|
drawThreeTool && drawThreeTool.stop()
|
drawFlag = false
|
this.startDrawFlag = false
|
}
|
if (this.startTwoDrawFlag == true) {
|
drawTwoFlag = true
|
plotDrawEmit && plotDrawEmit.stop()
|
drawTwoFlag = false
|
this.startTwoDrawFlag = false
|
}
|
this.startTwoDrawFlag = true
|
|
currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
|
currentStatus == 'twoEmit' && plotDrawEmit.stop()
|
currentStatus = 'twoDraw'
|
|
const that = this
|
plotDrawEmit && plotDrawEmit.draw(type, overlay => {
|
if (drawTwoFlag) return
|
if (overlay) {
|
addPlotOverlayData = overlay
|
overlay.customType = 'polyArrows'
|
that.$parent.addArrowsListLayer(overlay)
|
let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = overlay.positions.map(item => item.alt).join()
|
|
setTimeout(() => {
|
that.$parent.addSaveNewDraw(polygonPosition, plotType, altitude)
|
}, 100)
|
|
currentStatus = ''
|
that.startTwoDrawFlag = true
|
}
|
}, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
|
},
|
|
drawThreeArrow (type, billboardType = '', typeValue = '') {
|
let flag
|
this.$EventBus.$emit('tilesetLayerFlag', plotDrawType, (e) => { flag = e })
|
if (flag != true) return
|
|
drawFlag = false
|
if (this.startDrawFlag == true) {
|
drawFlag = true
|
drawThreeTool && drawThreeTool.stop()
|
drawFlag = false
|
this.startDrawFlag = false
|
}
|
if (this.startTwoDrawFlag == true) {
|
drawTwoFlag = true
|
plotDrawEmit && plotDrawEmit.stop()
|
drawTwoFlag = false
|
this.startTwoDrawFlag = false
|
}
|
this.startDrawFlag = true
|
|
currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
|
currentStatus == 'twoEmit' && plotDrawEmit.stop()
|
currentStatus = 'draw'
|
|
const that = this
|
let imgUrl
|
let material
|
switch (typeValue) {
|
case 'policeman':
|
imgUrl = 'police-people'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(30, 50, 230, 255)
|
break
|
case 'policecar':
|
imgUrl = 'car'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(30, 50, 230, 255)
|
break
|
case 'icon1':
|
imgUrl = 'ptqz'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
|
break
|
case 'icon2':
|
imgUrl = 'bhdx'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
|
break
|
case 'icon3':
|
imgUrl = 'wxrw'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
|
break
|
case 'icon4':
|
imgUrl = 'custom'
|
material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
|
break
|
}
|
|
if (type == 'polygon') {
|
drawThreeTool && drawThreeTool.draw(type, overlay => {
|
if (drawFlag) return
|
if (overlay) {
|
addPlotOverlayData = overlay
|
overlay.customType = 'polygon'
|
that.$parent.addArrowsListLayer(overlay)
|
|
let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = overlay.positions.map(item => item.alt).join()
|
setTimeout(() => {
|
that.$parent.addSaveNewDraw(polygonPosition, 5, altitude)
|
}, 100)
|
currentStatus = ''
|
that.startDrawFlag = false
|
}
|
}, {
|
material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122),
|
outline: true,
|
outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 255),
|
outlineWidth: 1.0,
|
height: 0
|
})
|
} else if (type == 'brokenline') {
|
drawThreeTool && drawThreeTool.draw('polyline', overlay => {
|
if (drawFlag) return
|
if (overlay) {
|
addPlotOverlayData = overlay
|
overlay.customType = 'brokenline'
|
that.$parent.addArrowsListLayer(overlay)
|
let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = overlay.positions.map(item => item.alt).join()
|
setTimeout(() => {
|
that.$parent.addSaveNewDraw(polygonPosition, 10, altitude)
|
}, 100)
|
currentStatus = ''
|
that.startDrawFlag = false
|
}
|
}, {
|
material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122),
|
width: 4
|
})
|
} else if (type == 'billboard') {
|
drawThreeTool && drawThreeTool.draw(type, overlay => {
|
if (drawFlag) return
|
if (overlay) {
|
addPlotOverlayData = overlay
|
overlay.customType = 'billboard'
|
that.$parent.addPointCircleCarLayer(overlay)
|
if (billboardType == 'police') {
|
that.$parent.addSaveNewDrawPoint(typeValue, overlay)
|
} else {
|
that.$parent.addPointPopupShow(typeValue, overlay.position)
|
}
|
currentStatus = ''
|
that.startDrawFlag = false
|
}
|
}, {
|
size: [32, 32],
|
color: material,
|
billboardImage: `/img/icon/${imgUrl}.png`
|
})
|
} else if (type == 'polyline') {
|
drawThreeTool && drawThreeTool.draw(type, overlay => {
|
if (drawFlag) return
|
if (overlay) {
|
addPlotOverlayData = overlay
|
overlay.customType = 'polyline'
|
that.$parent.addLineLayer(overlay)
|
let polylinePosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = overlay.positions.map(item => item.alt).join()
|
setTimeout(() => {
|
that.$parent.addSaveNewDrawLine(polylinePosition, altitude)
|
}, 100)
|
currentStatus = ''
|
that.startDrawFlag = false
|
}
|
}, {
|
material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122),
|
})
|
}
|
},
|
|
removeDrawArrow () {
|
addPlotOverlayData != null && addPlotOverlayData.remove()
|
},
|
|
// 编辑标绘位置
|
plotEdit (overlayData, type) {
|
currentEmitEl = overlayData
|
if (overlayData.customType == 'polygon' || overlayData.customType == 'brokenline') {
|
currentStatus = 'emit'
|
drawThreeTool.edit(overlayData, (e) => {
|
let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = e.positions.map(item => item.alt).join()
|
this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, altitude })
|
currentStatus = ''
|
})
|
} else if (overlayData.customType == 'billboard') {
|
currentStatus = 'emit'
|
drawThreeTool.edit(overlayData, (e) => {
|
const position = `${e.position.lng} ${e.position.lat},${e.position.lng} ${e.position.lat}`
|
const altitude = `${e.position.alt},${e.position.alt}`
|
this.updateSecurityPlot({ id: overlayData.attrParams.id, position, altitude })
|
currentStatus = ''
|
})
|
} else if (overlayData.customType == 'polyArrows') {
|
currentStatus = 'twoEmit'
|
plotDrawEmit.edit(overlayData, (e) => {
|
let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = e.positions.map(item => item.alt).join()
|
this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, altitude })
|
currentStatus = ''
|
})
|
} else if (overlayData.attrParams.lineObj.customType == 'polyline') {
|
currentStatus = 'twoEmit'
|
currentEmitEl = overlayData.attrParams.lineObj
|
drawThreeTool.edit(overlayData.attrParams.lineObj, (e) => {
|
let linePosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
|
const altitude = e.positions.map(item => item.alt).join()
|
this.updateActivityCar({
|
id: overlayData.attrParams.id,
|
color: overlayData.attrParams.color,
|
width: overlayData.attrParams.width,
|
type: 1,
|
position: linePosition,
|
altitude
|
}, overlayData)
|
currentStatus = ''
|
})
|
}
|
},
|
|
// 保存新增标绘样式修改
|
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)
|
|
addPlotOverlayData.attrParams = { id: item.id, color: item.color, item }
|
|
addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
|
if (item.type == 6 || item.type == 7 || item.type == 8 || item.type == 11) {
|
const height = item.altitude.split(',')
|
let position = item.position.slice(12, item.position.length - 2).split(',')[0].split(' ')
|
|
if (item.iconUrl != '') addPlotOverlayData.icon = item.iconUrl
|
|
addPlotOverlayData.setStyle({
|
color: color
|
})
|
|
addPlotOverlayData.position = {
|
lng: Number(position[0]),
|
lat: Number(position[1]),
|
alt: Number(height[0]),
|
}
|
|
addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
|
addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
|
|
this.$parent.isHaveFactor = true
|
} else {
|
addPlotOverlayData.setStyle({
|
material: color
|
})
|
|
this.$parent.isHaveArrow = true
|
}
|
},
|
|
// 保存新增警力资源
|
addNewPolice (data, type, carType) {
|
// 巡逻路线添加
|
if (type == 'policecar' && carType == 1) {
|
// 线坐标字符串
|
let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data, 'add')
|
// 范围面坐标串
|
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)
|
}
|
addPlotOverlayData.setStyle({
|
material: lineColor,
|
width: 3
|
})
|
|
data.linePositionStr = positionNewArr
|
data.polygonPositionStr = polygonSavePositionStr
|
data.lineObj = addPlotOverlayData
|
|
addPlotOverlayData.attrParams = data
|
|
this.$EventBus.$emit('layerPolygonAdd', {
|
layerName: 'newCarDrawLineLayers',
|
positions: positionStr,
|
material: color,
|
params: data,
|
incident: this.$parent.lineOverlayTypeClick
|
})
|
|
this.$parent.isHaveLine = true
|
} 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 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)
|
}
|
|
addPlotOverlayData.attrParams = positionObj
|
addPlotOverlayData.position = {
|
lng: Number(positionArr[0]),
|
lat: Number(positionArr[1]),
|
alt: Number(positionObj.alt)
|
}
|
|
addPlotOverlayData.setStyle({
|
color: color
|
})
|
|
addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
|
addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
|
addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
|
|
this.$parent.isHaveFactor = true
|
}
|
},
|
|
// 修改标绘样式
|
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)
|
let outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
|
overlay.attrParams.color = params.color
|
|
if (overlay.customType == 'polygon') {
|
overlay.setStyle({
|
material: color,
|
outlineColor: outColor
|
})
|
} else if (overlay.customType == 'billboard') {
|
overlay.setStyle({
|
color: 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`
|
})
|
}
|
|
if ('icon' in params && params.icon != '') {
|
overlay.icon = params.icon
|
}
|
|
if ('remark' in params && params.remark != '') {
|
overlay.attrParams.item.remark = params.remark
|
}
|
},
|
|
// 修改警车样式
|
editPoliceStyle (params, overlay) {
|
if ('color' in params && overlay.customType == 'billboard') {
|
overlay.attrParams.data.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.setStyle({
|
color: color, //颜色
|
})
|
}
|
|
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()
|
}
|
}
|
|
if ('remark' in params) {
|
overlay.attrParams.data.remark = params.remark
|
}
|
},
|
|
// 修改警车
|
// 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'
|
})
|
}
|
})
|
},
|
|
stopDraw () {
|
drawFlag = true
|
drawTwoFlag = true
|
|
|
if (plotDrawEmit) {
|
plotDrawEmit.stop()
|
}
|
|
if (drawThreeTool) {
|
currentStatus == 'draw' && drawThreeTool.stop()
|
currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
|
}
|
}
|
},
|
|
destroyed () {
|
this.stopDraw()
|
plotDrawEmit.destroy()
|
plotDrawEmit = null
|
drawThreeTool.destroy()
|
drawThreeTool = null
|
},
|
}
|
</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>
|
