警员警车增加范围字段

guanqb

2023-03-17 fb4f0c1286ba6d7f89d4d15d6211cb3fe91b8e84

警员警车增加范围字段

 src/styles/base/index.scss

@@ -764,8 +764,12 @@

        .police-btn-box {
            position: absolute;
            top: 84px;
            top: 124px;
            width: 100%;
        }

        .area {
            top: 92px;
        }

        .line {
@@ -779,6 +783,11 @@
            height: 32px;
            line-height: 32px;
            width: 100px;
        }

        .width-box {
            display: flex;
            align-items: center;
        }

        .input-width-box {
@@ -840,6 +849,29 @@
            width: 130px;
        }

        .width-box {
            display: flex;
            align-items: center;
        }

        .input-width-box {
            input {
                outline: none;
                width: 80px;
                height: 28px;
                background-color: rgba(8, 56, 185, 0.5);
                border: none;
                color: #fff;
                border-radius: 4px;
                padding-left: 15px;
            }

            input:focus {
                border-color: #409EFF;
                border: 1px solid #409EFF;
            }
        }

    }
}


 src/styles/media/index.scss

@@ -2154,7 +2154,7 @@
                        }

                        .police-btn-box {
                            top: countSizeVh(88);
                            top: countSizeVh(124);
                        }

                        .value-name-box {
@@ -2165,6 +2165,19 @@

                        .line {
                            top: countSizeVh(52);
                        }

                        .area {
                            top: countSizeVh(92);
                        }

                        .input-width-box {
                            input {
                                width: countSizeVw(80, 1920);
                                height: countSizeVh(28);
                                border-radius: countSizeVh(4);
                                padding-left: countSizeVw(15, 1920);
                            }
                        }
                    }

@@ -2184,7 +2197,7 @@

                        .el-dialog {
                            width: countSizeVw(320, 1920);
                            height: countSizeVh(180);
                            height: countSizeVh(220);
                        }

                        .el-dialog .el-dialog__body .el-button {
@@ -2203,6 +2216,15 @@
                            line-height: countSizeVh(32);
                            width: countSizeVw(130, 1920);
                        }

                        .input-width-box {
                            input {
                                width: countSizeVw(80, 1920);
                                height: countSizeVh(28);
                                border-radius: countSizeVh(4);
                                padding-left: countSizeVw(15, 1920);
                            }
                        }
                    }

                    .edit-line-box {

 src/views/activity/components/drawBtnBox.vue

@@ -600,7 +600,7 @@
        // 修改警车样式
        editPoliceStyle(params,overlay) {
            if('color' in params && 'pointOverlayData' in overlay.attrParams){
                overlay.attrParams.color = params.color
                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)
@@ -623,10 +623,11 @@
            }

            if('width' in params){
                if(overlay.attrParams&&overlay.attrParams.data&&overlay.attrParams.data.type&&overlay.attrParams.data.type == 3) return
                let linePosition = ''
                if('position' in params){
                    linePosition = params.position.replace(/,/g, ";").replace(/ /g, ",")
                }else{
                } else {
                    linePosition = overlay.attrParams.linePositionStr
                }
                let coords = global.DC.GeoTools.polylineBuffer(linePosition, params.width)

 src/views/activity/index.vue

@@ -125,6 +125,15 @@
                        </el-color-picker>
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
                </div>
                <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                <el-button @click="deletePoliceElement"
                    v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
@@ -149,10 +158,10 @@
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">选择预警范围：</div>
                    <div>
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                            <input type="text"  v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
@@ -985,7 +994,6 @@
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                console.log('item',item);
                point.attrParams = positionObj
                curLayer.addOverlay(point)
                point.setStyle({
@@ -1450,14 +1458,20 @@
                            message: '请选择警车',
                            type: 'warning'
                        })
                    } else {
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    }else {
                        this.policeChooseCarVisible = false
                        this.addCarAndRange({
                            carId: this.policeType,
                            position: position,
                            securityId: this.showingSecurityId,
                            type: type,
                            color: this.chooseCarColor
                            color: this.chooseCarColor,
                            width:this.pointAreaWidth
                        })
                        this.policeIconIsCreated = false
                    }
@@ -1468,19 +1482,48 @@
                            message: '请选择警员',
                            type: 'warning'
                        })
                    }else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.policeChooseVisible = false
                        this.addActivityPolice({ policemanId: this.searchPoliceTreeId, position: position, securityId: this.showingSecurityId, type: type, color: this.choosePoliceColor })
                        this.addActivityPolice({ policemanId: this.searchPoliceTreeId, position: position, securityId: this.showingSecurityId, type: type, color: this.choosePoliceColor ,width:this.pointAreaWidth})
                        this.policeIconIsCreated = false
                    }
                }
            } else {
                if (this.policeChooseVisible == true) {
                    this.$refs.DRAWBTNBOX.updateActivityPolice({ id: this.policeIconId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor },policeOverlayData.overlay)
                    this.policeChooseVisible = false
                    if (this.searchPoliceTreeId == ''|| this.searchPoliceTreeName == '') {
                        this.$message({
                            message: '请在列表中选择警员',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                         this.$refs.DRAWBTNBOX.updateActivityPolice({ id: this.policeIconId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor,width:this.pointAreaWidth },policeOverlayData.overlay)
                         this.policeChooseVisible = false
                    }
                } else if (this.policeChooseCarVisible == true) {
                    this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor },policeOverlayData.overlay)
                    this.policeChooseCarVisible = false
                    if (this.policeType == '') {
                        this.$message({
                            message: '请选择警车',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor,width:this.pointAreaWidth },policeOverlayData.overlay)
                        this.policeChooseCarVisible = false
                    }
                }
                this.policeIconIsCreated = false
            }
@@ -1503,8 +1546,10 @@
            if ('policemanId' in e.overlay.attrParams.data) {
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.policemanId
                this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width :100
                this.choosePoliceColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.data.policemanId).name
                this.searchPoliceTreeId = e.overlay.attrParams.data.policemanId
                this.searchPoliceTreeName = choosePoliceName
                this.policeIconIsCreated = true
                this.policeChooseVisible = true
@@ -1512,6 +1557,7 @@
                this.policeOption = policecarOption
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.carId
                this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width :100
                this.chooseCarColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                this.policeIconIsCreated = true
                this.policeChooseCarVisible = true