活动文字标绘

guanqb

2023-03-08 1e809096ce199b6ad2845919a18d3a6272dcbfa5

活动文字标绘

 src/styles/base/index.scss

@@ -1104,4 +1104,64 @@
            }
        }
    }
}

.add-label-box {
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 140px;

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: rgba(8, 56, 185, 0.9);
                border: 1px solid rgba(8, 56, 185, 0.9);
                color: #fff;
                width: 60px;
                height: 30px;
                text-align: center;
            }

            .el-button:hover {
                background-color: #409EFF;
            }

            &>div {
                display: flex;
                margin-bottom: 10px;
            }

            .value-name-box {
                height: 32px;
                line-height: 32px;
                width: 120px;
                text-align: left;
            }

            .btn-box {
                display: flex;
                justify-content: center;
            }

            input {
                height: 30px;
                font-size: 16px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
            }

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

        }
    }
}

 src/styles/media/index.scss

@@ -2355,6 +2355,36 @@
                        }
                    }

                    .add-label-box {
                        .el-dialog {
                            width: countSizeVw(300, 1920);
                            height: countSizeVh(140);

                            .el-dialog__body {
                                .el-button {
                                    width: countSizeVw(60, 1920);
                                    height: countSizeVh(30);
                                }

                                &>div {
                                    margin-bottom: countSizeVh(10);
                                }

                                .value-name-box {
                                    height: countSizeVh(32);
                                    line-height: countSizeVh(32);
                                    width: countSizeVw(120, 1920);
                                }

                                input {
                                    height: countSizeVh(30);
                                    font-size: countSizeVh(16);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }
                            }
                        }
                    }

                }

                .flexible-btn {

 src/views/activity/components/drawBtnBox.vue

@@ -45,6 +45,9 @@
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrowLabel" title="文字标注">文字标注</button>
                    </li>
                </ul>
            </div>
            <div>
@@ -60,6 +63,22 @@
                </ul>
            </div>
        </div>

        <el-dialog title="添加文字标注" :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 class="btn-box">
                <el-button @click="lableBoxSave">添加</el-button>
                <el-button @click="cancelSaveLabel">取消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

@@ -74,12 +93,23 @@

let arrowPlot = null
let drawArrowLayers = null
let isAddLabel = false

let curLabelOverLayer = null

export default {
    props: [
        'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
        'policeSwitch', 'polylineBtnSwitch',
        'arrowBtnSwitch', 'policeIconId', 'lineWidth'],

    data() {
        return {
            addLabelVisible:false,// 文字标注的窗口（内容是名称）
            labelInput:'',
            addLabelPosition:null,
        }
    },

    mounted () {
        this.$nextTick(() => {
@@ -95,6 +125,8 @@
                global.viewer.addLayer(drawArrowLayers)
                arrowPlot = new global.DC.Plot(global.viewer)
            }

            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
        })
    },

@@ -348,6 +380,77 @@
                this.$parent.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch,'plot')
            })
        },

        drawArrowLabel(){
            isAddLabel = true
            this.$message({
                message: '请在地图上单击选择标注位置',
                type: 'warning'
            })
        },

        // 文字标注窗口的添加按钮
        lableBoxSave () {
            if (this.labelInput == '') {
                this.$message({
                    message: '请输入标注文字',
                    type: 'error'
                })
            } else {
              this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9,name: this.labelInput})
              this.cancelSaveLabel()
            }
            // ---------------------------
            // 调用接口进行保存

            // getlablelist().then(res => {
            // 保存成功后进行添加
            // let label = new global.DC.Label()

            // label.on(global.DC.MouseEventType.RIGHT_DOWN, this.labelDowm)

            // global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)

            // label.on(global.DC.MouseEventType.RIGHT_UP, this.labelUp)

            // 添加文字标注的时候，在加的时候要把事件也加入

            // })
        },

        labelDowm (e) {
            // 保存当前按下的文字标注
            curLabelOverLayer = e // e里面的东西（overlayer)
        },

        viewerLableMove (e) {
            // 根据e里面的坐标信息，设置当前鼠标按下的文字标注位置
            // curLabelOverLayer 的坐标 = e 的坐标
        },

        labelUp (e) {
            global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
            
            // 调接口，更新数据，   不要再去调接口全查了

            // upDateLable().then(res => {

            // })
        },

        viewerClick(e) {
            if(isAddLabel){
                this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat 
                this.addLabelVisible = true
                isAddLabel = false
            }
        },

        // 关闭添加标注弹窗
        cancelSaveLabel(){
            isAddLabel = false
            this.addLabelVisible = false
        }
    },

    destroyed () {
@@ -356,6 +459,8 @@

        drawArrowLayers.clear()
        drawArrowLayers = null

        global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
    },
}
</script>

 src/views/activity/index.vue

@@ -264,6 +264,7 @@
let policecarOption = []



export default {
    inject: ['userInfo'],

@@ -278,8 +279,6 @@
            pagesCount: 1,
            activityList: [],
            currentClickIndex: '',


            activityOptions: [
                {
                    dictKey: '',
@@ -403,21 +402,15 @@
            activityDetails: {},
            policeChooseVisible: false,
            policeChooseCarVisible: false,

            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},


            isHavePoliceCar: false,
            isHavePoliceMan: false,

            isHaveArrow: false,
            isHaveLine: false,
            //当前登录用户的数据
            userInfo: {},


            lineEditVisible: false,
            lineEditTitle: '修改巡逻路线',
            polygonAddTitle: '新增标绘',
@@ -445,8 +438,6 @@
            searchPoliceTreeName: '',
            searchPoliceTreeId: '',
            searchTreeShowFlag: false,


            isNeedName: false,
            plotSaveType: 1,
            arrowPositionSre: '',
@@ -468,7 +459,6 @@
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],

            polygonAreaType: 1,
            polygonAreaOption: [{
                value: 1,
@@ -534,6 +524,9 @@
                polylineAreaLayer = new global.DC.VectorLayer('polylineAreaLayer')
                global.viewer.addLayer(polylineAreaLayer)
            }

            
            

        })
    },
@@ -833,6 +826,13 @@
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                    } else if (item.type == 9 && showType == 'plot') {
                        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.on(global.DC.MouseEventType.RIGHT_UP, this.$refs.DRAWBTNBOX.labelUp)
                        label.on(global.DC.MouseEventType.RIGHT_DOWN, this.$refs.DRAWBTNBOX.labelDowm)
                        arrowsListLayer.addOverlay(label)
                    }
                    if(chooseArrow!=null){
                        chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
@@ -1628,7 +1628,7 @@
                positionStr = this.arrowPositionStr
            } else if (this.plotSaveType == 5) {
                positionStr = this.polygonPositionStr
            } else if (this.plotSaveType >= 6) {
            } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8 ) {
                positionStr = this.plotPointPositionStr + ',' + this.plotPointPositionStr
            }
            this.addSecurityPlot({ securityId: this.showingSecurityId, position: positionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, areaType: this.polygonAreaType })