透明度换成单独拖拽式

guanqb

2023-03-04 bdb4e3982996d8bc158b28bb6e033ed06ce12208

透明度换成单独拖拽式

 public/img/icon/icon1.png

 src/styles/base/index.scss

@@ -897,8 +897,8 @@
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 174px;
        width: 320px;
        height: 186px;

        .el-dialog__body {
            .el-button {
@@ -921,8 +921,12 @@
                margin-bottom: 10px;
            }

            .alpha {
                width: calc(100% - 110px);
            }

            .value-name-box {
                width: 90px;
                width: 110px;
            }

            .add-polygon-btn-box {
@@ -959,7 +963,7 @@
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 240px;
        width: 300px;
        height: 140px;

        .el-dialog__body {
@@ -987,10 +991,14 @@
            .value-name-box {
                height: 32px;
                line-height: 32px;
                width: 100px;
                width: 120px;
                text-align: left;
            }

            .alpha {
                width: calc(100% - 120px);
            }

            input {
                height: 30px;
                font-size: 16px;

 src/styles/media/index.scss

@@ -2246,8 +2246,8 @@

                    .add-polygon-box {
                        .el-dialog {
                            width: countSizeVw(300, 1920);
                            height: countSizeVh(166);
                            width: countSizeVw(320, 1920);
                            height: countSizeVh(186);

                            .el-dialog__body {
                                .el-button {
@@ -2260,7 +2260,11 @@
                                }

                                .value-name-box {
                                    width: countSizeVh(90);
                                    width: countSizeVh(110);
                                }

                                .alpha {
                                    width: calc(100% - countSizeVw(110, 1920));
                                }

                                input {
@@ -2276,7 +2280,7 @@
                    .edit-plot-box {
                        .el-dialog {
                            width: countSizeVw(300, 1920);
                            height: countSizeVh(180);
                            height: countSizeVh(220);

                            .el-dialog__body {
                                .el-button {
@@ -2295,6 +2299,10 @@
                                    width: countSizeVw(120, 1920);
                                }

                                .alpha {
                                    width: calc(100% - countSizeVw(130, 1920));
                                }

                                input {
                                    height: countSizeVh(30);
                                    font-size: countSizeVh(16);

 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;
        },

    },