From bdb4e3982996d8bc158b28bb6e033ed06ce12208 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 04 Mar 2023 10:09:08 +0800
Subject: [PATCH] 透明度换成单独拖拽式
---
src/views/activity/index.vue | 120 +++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 70 insertions(+), 50 deletions(-)
diff --git a/src/views/activity/index.vue b/src/views/activity/index.vue
index 6abd0f6..49b7367 100644
--- a/src/views/activity/index.vue
+++ b/src/views/activity/index.vue
@@ -134,6 +134,9 @@
<li>
<button @click="drawArrow('polygon')" title="多边形">多边形</button>
</li>
+ <li>
+ <button @click="drawArrow('billboard','icon1')" title="头像1">头像1</button>
+ </li>
</ul>
</div>
<div>
@@ -141,9 +144,6 @@
<ul>
<li>
<!-- <el-button
- title="路线绘制"
- @click="draw('billboard', 'policeman')"
- icon="el-icon-my-route"
></el-button>-->
<button @click="draw('polyline', 'policecar')" title="巡逻路线">
<img src="../../../public/img/icon/route1.png" style="height:100%" />
@@ -433,16 +433,22 @@
<el-dialog :title="polygonAddTitle" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
class="add-polygon-box" :before-close="cancelSavePolygon">
- <div class="line" v-show="isNeedName">
+ <!-- <div class="line" v-show="isNeedName">
<div class="value-name-box">设置名称：</div>
<div>
<input type="text" v-model="polygonName" />
+ </div>
+ </div> -->
+ <div class="line">
+ <div class="value-name-box">设置透明度：</div>
+ <div class="alpha">
+ <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
</div>
</div>
<div class="line">
<div class="value-name-box">选择颜色：</div>
<div class="pick-color-box">
- <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small" show-alpha>
+ <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
</el-color-picker>
</div>
</div>
@@ -454,17 +460,23 @@
<el-dialog title="修改标绘" :modal="false" :visible.sync="editPlotVisible" :close-on-click-modal="true"
class="edit-plot-box">
- <div v-show="polygonName">
+ <!-- <div v-show="polygonName">
<div class="value-name-box">设置名称：</div>
<div>
<input type="text" v-model="polygonName" />
+ </div>
+ </div> -->
+ <div>
+ <div class="value-name-box">设置透明度：</div>
+ <div class="alpha">
+ <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
</div>
</div>
<div v-show="!polygonName" class="placeholder"></div>
<div>
<div class="value-name-box">选择标绘颜色：</div>
<div class="pick-color-box">
- <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small" show-alpha>
+ <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
</el-color-picker>
</div>
</div>
@@ -701,7 +713,8 @@
polygonName: '',
polygonPositionStr: '',
chooseColor: '#1CA085',
- choosePlotColor: 'rgba(255, 69, 0, 0.68)',
+ choosePlotColor: '#409EFF',
+ choosePlotColorAlpha:48,
chooseCarColor: '#1CA085',
choosePoliceColor: '#1CA085',
chooseLineData: {},
@@ -1578,7 +1591,7 @@
drawLayers.clear()
},
- drawArrow (type) {
+ drawArrow (type,iconType) {
if (type == 'polygon') {
const that = this
let flag = false
@@ -1596,7 +1609,8 @@
// overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
document.oncontextmenu = function () {
if (flag) {
- that.choosePlotColor = 'rgba(255, 69, 0, 0.68)'
+ that.choosePlotColor = '#409EFF'
+ that.choosePlotColorAlpha = 48
that.isNeedName = true
that.polygonName = ''
that.polygonAddVisible = true
@@ -1606,7 +1620,23 @@
})
}
}, { material: global.DC.Color.RED })
- } else {
+ } else if (type == 'billboard'){
+ console.log(11);
+ const that = this
+ let flag = false
+
+ plot && plot.draw(type, overlay => {
+ if (iconType == 'icon1') {
+ overlay.icon = '/img/icon/icon1.png'
+ }
+ if (overlay) {
+ drawArrowLayers.addOverlay(overlay)
+ plot.edit(overlay, (e) => {
+ console.log(overlay,3333);
+ })
+ }
+ })
+ }else {
const that = this
let flag = false
arrowPlot && arrowPlot.draw(type, overlay => {
@@ -1633,7 +1663,7 @@
drawArrowLayers.addOverlay(overlay)
document.oncontextmenu = function () {
if (flag) {
- that.choosePlotColor = 'rgba(255, 69, 0, 0.68)'
+ that.choosePlotColor = '#409EFF'
that.isNeedName = false
that.polygonAddVisible = true
flag = false
@@ -1879,6 +1909,7 @@
this.isHaveArrow = res.data.data.some(item => {
return item
})
+ console.log(res.data.data,1111);
res.data.data.forEach(item => {
let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
let chooseArrow = null
@@ -1893,10 +1924,10 @@
chooseArrow = new global.DC.TailedAttackArrow(position)
} else if (item.type == 5) {
chooseArrow = new global.DC.Polygon(position)
- 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)
+ // 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",
// })
@@ -1905,19 +1936,14 @@
if (item.color == '') {
color = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
} else {
- // if(item.type == 5){
- let colorNumber =item.color.slice(5,item.color.length-1)
- let colorArr = colorNumber.split(',')
- color = global.DC.Namespace.Cesium.Color.fromBytes(Number(colorArr[0]), Number(colorArr[1]), Number(colorArr[2]),Math.floor(Number(colorArr[3])*255))
- // }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)
- // }
- console.log('color',item.color,color);
+ 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)
+ color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
}
- chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'name': item.name }
+ // chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'name': item.name }
+ chooseArrow.attrParams = { 'id': item.id, 'color': item.color }
arrowsListLayer.addOverlay(chooseArrow)
chooseArrow.setStyle({
"material": color,
@@ -1945,8 +1971,10 @@
// 单击。标绘箭头
reeditArrowClick (e) {
this.plotOverlayData = e
- this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : 'rgba(255, 69, 0, 0.68)'
- this.polygonName = e.overlay.attrParams.name
+ this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0,7) : '#409EFF'
+ this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 48
+ console.log(e.overlay.attrParams.color,this.choosePlotColorAlpha,666);
+ // this.polygonName = e.overlay.attrParams.name
if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
this.plotId = e.overlay.attrParams.id
this.editPlotVisible = true
@@ -1961,15 +1989,9 @@
// 保存标绘修改
savePlot () {
- if (this.polygonName == '') {
- this.$message({
- message: '请设置名称',
- type: 'warning'
- })
- } else {
- this.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor, name: this.polygonName })
- this.editPlotVisible = false
- }
+ // this.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, name: this.polygonName })
+ this.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
+ this.editPlotVisible = false
},
updateSecurityPlot (params) {
@@ -2390,17 +2412,10 @@
// 保存绘制区域
savePolygonInfo () {
if (this.isNeedName) {
- if (this.polygonName == '') {
- this.$message({
- message: '请输入名称',
- type: 'warning'
- })
- } else {
- this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.polygonPositionStr, type: 5, name: this.polygonName, color: this.choosePlotColor })
- this.polygonAddVisible = false
- }
+ this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.polygonPositionStr, type: 5, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
+ this.polygonAddVisible = false
} else {
- this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.arrowPositionStr, type: this.plotSaveType, color: this.choosePlotColor })
+ this.addSecurityPlot({ securityId: this.showingSecurityId, position: this.arrowPositionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
this.polygonAddVisible = false
}
},
@@ -2563,7 +2578,12 @@
}
}
return arr
- }
+ },
+
+ // 计算透明度值
+ formatTooltip(val) {
+ return val / 100;
+ },
},
--
Gitblit v1.9.3