警车警员调色盘

guanqb

2023-03-01 22695471afb288256501bad32ec7cd29af8b9926

警车警员调色盘

 src/api/activity/index.js

@@ -83,18 +83,11 @@
 * @param {*} id 数据唯一标识
 * @returns
 */
export const updateActivityCar = (id, carId, color, width, type, position) => {
export const updateActivityCar = (params) => {
    return request({
        url: `/api/securityManageCar/securityManageCar/update`,
        method: 'post',
        params: {
            id,
            carId,
            color,
            width,
            type,
            position
        }
        params: params
    })
}

@@ -121,16 +114,11 @@
 * @param {*} type  范围类型
 * @returns
 */
export const addActivityPolice = (policemanId, position, securityId, type) => {
export const addActivityPolice = (params) => {
    return request({
        url: `/api/securityManage/securityManage/save`,
        method: 'post',
        params: {
            policemanId,
            position,
            securityId,
            type
        }
        params: params
    })
}

@@ -155,14 +143,11 @@
 * @param {*} id 数据唯一标识
 * @returns
 */
export const updateActivityPolice = (id, policemanId) => {
export const updateActivityPolice = (params) => {
    return request({
        url: `/api/securityManage/securityManage/update`,
        method: 'post',
        params: {
            id,
            policemanId,
        }
        params: params
    })
}


 src/components/map/index.vue

@@ -730,7 +730,6 @@
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIcident)
                
            } else if (type == "label") {
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({

 src/styles/base/index.scss

@@ -703,7 +703,7 @@
        display: flex;
        flex-direction: column;
        width: 320px;
        height: 180px;
        height: 220px;

        .el-dialog__body {
            &>div {
@@ -752,8 +752,21 @@

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

        .line {
            display: flex;
            justify-content: left;
            position: absolute;
            top: 48px;
        }

        .value-name-box {
            height: 32px;
            line-height: 32px;
            width: 100px;
        }
    }
}
@@ -763,7 +776,7 @@
        display: flex;
        flex-direction: column;
        width: 320px;
        height: 200px;
        height: 180px;

        .el-dialog__body {
            .el-button {
@@ -786,6 +799,16 @@
            background-color: rgba(8, 56, 185, 0.9);
        }

        .line {
            display: flex;
            justify-content: left;
        }

        .value-name-box {
            height: 32px;
            line-height: 32px;
            width: 130px;
        }

    }
}

 src/styles/media/index.scss

@@ -2119,7 +2119,7 @@

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

                        .el-dialog .el-dialog__body .el-button {
@@ -2144,7 +2144,17 @@
                        }

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

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

                        .line {
                            top: countSizeVh(52);
                        }
                    }

@@ -2164,13 +2174,13 @@

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

                        .el-dialog .el-dialog__body .el-button {
                            width: countSizeVw(60, 1920);
                            height: countSizeVh(30);
                            margin-top: countSizeVh(40);
                            margin-top: countSizeVh(20);
                            border: countSizeVh(1) solid rgba(8, 56, 185, 0.9);
                        }

@@ -2178,7 +2188,11 @@
                            background-color: #409EFF;
                        }


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

                    .edit-line-box {

 src/views/activity/index.vue

@@ -349,6 +349,15 @@
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <div class="line">
                <div class="value-name-box">选择颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker
                     v-model="chooseCarColor"
                     :predefine="predefineColors" size="small">
                   </el-color-picker>
                </div>
            </div>
                <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                <el-button @click="deletePoliceElement" v-show="!isChoosePoliceElementDisabled">删除</el-button>
                <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
@@ -364,6 +373,15 @@
                <el-tree :data="policeTreeData" :props="policeDefaultProps" @node-click="handlePoliceNodeClick"
                    @mousedown.native="preventFocusLost" ref="policeTree" :filter-node-method="filterPoliceNode"
                    v-show="searchTreeShowFlag"></el-tree>
                    <div class="line">
                <div class="value-name-box">选择颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker
                     v-model="choosePoliceColor"
                     :predefine="predefineColors" size="small">
                   </el-color-picker>
                </div>
            </div>
                <div class="police-btn-box">
                    <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                    <el-button @click="deletePoliceElement" v-show="!isChoosePoliceElementDisabled">删除</el-button>
@@ -457,7 +475,8 @@
let drawArrowLayers = null
let polylineAreaLayer = null
let arrowsListLayer = null
let pointCircleLayer = null
let pointCircleManLayer = null
let pointCircleCarLayer = null
let plot = undefined
let arrowPlot = undefined
let lineLayer = undefined
@@ -658,6 +677,8 @@
            polygonPositionStr: '',
            chooseColor: '#1CA085',
            choosePlotColor: '#1CA085',
            chooseCarColor:'#1CA085',
            choosePoliceColor:'#1CA085',
            chooseLineData: {},
            lineWidth: 100,
            linePosition: '',
@@ -683,22 +704,22 @@
            isLineEdit: true,
            addLinePosition: '',
            color: 'rgba(255, 69, 0)',
          predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, )',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%)',
          '#c7158577'
        ]
            predefineColors: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
            'rgba(255, 69, 0, )',
            'rgb(255, 120, 0)',
            'hsv(51, 100, 98)',
            'hsva(120, 40, 94)',
            'hsl(181, 100%, 37%)',
            'hsla(209, 100%, 56%)',
            '#c7158577'
            ],
        }
    },

@@ -745,9 +766,14 @@
                arrowPlot = new global.DC.Plot(global.viewer)
            }

            if (pointCircleLayer == null) {
                pointCircleLayer = new global.DC.VectorLayer('pointCircleLayer')
                global.viewer.addLayer(pointCircleLayer)
            if (pointCircleManLayer == null) {
                pointCircleManLayer = new global.DC.VectorLayer('pointCircleManLayer')
                global.viewer.addLayer(pointCircleManLayer)
            }

            if (pointCircleCarLayer == null) {
                pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
                global.viewer.addLayer(pointCircleCarLayer)
            }

            if (arrowsListLayer == null) {
@@ -875,6 +901,9 @@
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            if(pointCircleCarLayer!=null){
                pointCircleCarLayer.clear()
            }
            getSecurityPoliceList(securityId).then(res => {
                this.isHavePoliceMan = res.data.data.some(item => {
                    return item.type == 3
@@ -907,7 +936,25 @@
                        })

                    } else if (item.type == 3 && pointShow) {
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId, item.deptId)
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId, item.deptId,item.color)
                        let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                        let point = new global.DC.Point(position)
                        let color = ''
                        if (item.color == '') {
                            color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                        } 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)
                        }
                        pointCircleCarLayer.addOverlay(point)
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newDrawLayers',
                            type: 'billboard',
@@ -947,6 +994,9 @@
            }
            if (lineLayer != null) {
                lineLayer.clear()
            }
            if(pointCircleManLayer!=null){
                pointCircleManLayer.clear()
            }

            getSecurityCarList(securityId).then(res => {
@@ -1020,7 +1070,26 @@
                            },
                        })
                    } else if (item.type == 3 && pointShow) {
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId, item.deptId)
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId, item.deptId,item.color)
                        let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                        let point = new global.DC.Point(position)
                        let color = ''
                        if (item.color == '') {
                            color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                        } 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)
                        }
                        pointCircleManLayer.addOverlay(point)
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })

                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newCarDrawLayers',
                            type: 'billboard',
@@ -1028,13 +1097,7 @@
                            incident: this.overlayTypeClick,
                            mouseOverIcident:this.pointMouseOver
                        })
                        // let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                        // let circle = new global.DC.Circle(position, 20)
                        // circle.size = [32,32]
                        // pointCircleLayer.addOverlay(circle)
                        // circle.setStyle({
                        //     "material": global.DC.Color.YELLOW,
                        // })

                    }
                })
            })
@@ -1092,15 +1155,17 @@
        },

        // 修改活动警员
        updateActivityPolice (id, policemanId) {
            updateActivityPolice(id, policemanId).then(res => {
        // id活动id, policemanId警察id ,color颜色
        updateActivityPolice (params) {
            updateActivityPolice(params).then(res => {
                this.getSecurityPoliceList(this.showingSecurityId, this.policeSwitch)
            })
        },

        // 修改活动警车
        updateActivityCar (id, carId, color, width, type, position) {
            updateActivityCar(id, carId, color, width, type, position).then(res => {
        // id活动id, carId警车id, color颜色, width巡逻路线范围宽度, type线面类型, position坐标
        updateActivityCar (params) {
            updateActivityCar(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
@@ -1147,8 +1212,9 @@
        },

        // 活动添加警员
        addActivityPolice (policemanId, position, securityId, type) {
            addActivityPolice(policemanId, position, securityId, type).then(res => {
        // policemanId警车id, position坐标, securityId活动id, type线面类型
        addActivityPolice (params) {
            addActivityPolice(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '添加成功',
@@ -1159,12 +1225,12 @@
                        message: '添加失败'
                    })
                }
                this.getSecurityPoliceList(securityId, this.policeSwitch)
                this.getSecurityPoliceList(params.securityId, this.policeSwitch)
            })
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName, plotId, policeId, deptId) {
        convertBillboardPositionDate (data, iconName, plotId, policeId, deptId,color) {
            let positionStr = data
            positionStr = data.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
@@ -1172,9 +1238,9 @@
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId,color:color }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId,color:color }
            }
            return positionObj
        },
@@ -1400,6 +1466,12 @@
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            if(pointCircleManLayer!=null){
               pointCircleManLayer.clear()
            }
            if(pointCircleCarLayer!=null){
                pointCircleCarLayer.clear()
            }
        },

        // 地图元素绘制
@@ -1429,9 +1501,11 @@
                                if (policeType == 'policeman') {
                                    that.searchPoliceTreeId = ''
                                    that.searchPoliceTreeName = ''
                                    that.choosePoliceColor = '#FF0000'
                                    that.policeChooseVisible = true
                                } else if (policeType == 'policecar') {
                                    that.policeOption = that.policecarOption
                                    that.chooseCarColor = '#FF0000'
                                    that.policeChooseCarVisible = true
                                }
                                flag = false
@@ -1642,19 +1716,19 @@
                }
                if (this.policeChooseCarVisible == true) {
                    this.policeChooseCarVisible = false
                    this.addCarAndRange({ carId: this.policeType, position: position, securityId: this.showingSecurityId, type: type })
                    this.addCarAndRange({ carId: this.policeType, position: position, securityId: this.showingSecurityId, type: type ,color:this.chooseCarColor})
                } else if (this.policeChooseVisible == true) {
                    this.policeChooseVisible = false

                    this.addActivityPolice(this.searchPoliceTreeId, position, this.showingSecurityId, type)
                    this.addActivityPolice({policemanId:this.searchPoliceTreeId, position:position, securityId:this.showingSecurityId, type:type,color:this.choosePoliceColor})
                }
                this.policeIconIsCreated = false
            } else {
                if (this.policeChooseVisible == true) {
                    this.updateActivityPolice(this.policeIconId, this.searchPoliceTreeId)
                    this.updateActivityPolice({id:this.policeIconId, policemanId:this.searchPoliceTreeId,color:this.choosePoliceColor})
                    this.policeChooseVisible = false
                } else if (this.policeChooseCarVisible == true) {
                    this.updateActivityCar(this.policeIconId, this.policeType)
                    this.updateActivityCar({id:this.policeIconId, carId:this.policeType,color:this.chooseCarColor})
                    this.policeChooseCarVisible = false
                }
                this.policeIconIsCreated = false
@@ -1671,6 +1745,7 @@
            if ('policemanId' in e.overlay.attrParams) {
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.policemanId
                this.choosePoliceColor = e.overlay.attrParams.color!=''?e.overlay.attrParams.color:'#FF0000'
                let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.policemanId).name
                this.searchPoliceTreeName = choosePoliceName
                this.policeIconIsCreated = true
@@ -1679,6 +1754,7 @@
                this.policeOption = this.policecarOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.carId
                this.chooseCarColor = e.overlay.attrParams.color!=''?e.overlay.attrParams.color:'#FF0000'
                this.policeIconIsCreated = true
                this.policeChooseCarVisible = true
            }
@@ -2096,7 +2172,7 @@

        // 保存巡逻路线信息
        saveLineInfo () {
            this.updateActivityCar(this.policeIconId, '', this.chooseColor, this.lineWidth)
            this.updateActivityCar({id:this.policeIconId,color: this.chooseColor, width:this.lineWidth})
            this.lineEditVisible = false
        },

@@ -2138,7 +2214,7 @@
                })
                position = position.slice(0, position.length - 1)
                lineLayer.addOverlay(overlayData)
                this.updateActivityCar(this.policeIconId, '', this.chooseColor, this.lineWidth, 1, position)
                this.updateActivityCar({id:this.policeIconId, color:this.chooseColor, width:this.lineWidth, type:1, position:position})
            })
        },

@@ -2294,25 +2370,6 @@
        searchPoliceTreeName (val) {
            this.$refs.policeTree.filter(val)
        },
        choosePlotColor(val){
            console.log(val);
            // #1FBC9C
            // #1CA085
            // #2ECC70
            // #27AF60
            // #3398DB
            // #2980B9
            // #A463BF
            // #8E43AD
            // #3D556E
            // #222F3D
            // #F2C511
            // #F39C19
            // #E84B3C
            // #C0382B
            // #DDE6E8
            // #BDC3C8
        },
    },

    destroyed () {
@@ -2373,7 +2430,13 @@
        analyseLayer.clear()
        arrowsListLayer.clear()
        lineLayer.clear()
        if(pointCircleManLayer!=null){
           pointCircleManLayer.clear()
        }

        if(pointCircleCarLayer!=null){
                pointCircleCarLayer.clear()
            }
        this.removeAll()
        this.removeAllArrow()
        if (tc) {