标绘新增修改使用调色盘

guanqb

2023-02-28 0a842b3e617aa3d691b741d46971d1b7037c9ba8

标绘新增修改使用调色盘

 package-lock.json

Diff too large

 package.json

@@ -35,6 +35,7 @@
        "vue-axios": "^3.3.7",
        "vue-router": "^3.2.0",
        "vue-seamless-scroll": "^1.1.23",
        "vue-swatches": "^2.1.1",
        "vuex": "^3.4.0"
    },
    "devDependencies": {

 public/static/config copy.js

@@ -30,7 +30,7 @@

    // 设备通道号
    VUE_APP_OUTER_NET_EQUIPMENT: '36110000002009999000',
    VUE_APP_INTRANET_EQUIPMENT: '36110000002009999000',
    VUE_APP_INTRANET_EQUIPMENT: '34020000002000000003',

    // 模型地址
    VUE_APP_OUTER_NET_TILEURL: 'http://192.168.0.112:18080',

 public/static/config.js

@@ -29,7 +29,7 @@
    VUE_APP_INTRANET_VIDEO: 'http://10.141.11.11:18185/api',

    // 设备通道号
    VUE_APP_OUTER_NET_EQUIPMENT: '36110000002009999000',
    VUE_APP_OUTER_NET_EQUIPMENT: '34020000002000000003',
    VUE_APP_INTRANET_EQUIPMENT: '36110000002009999000',

    // 模型地址

 src/api/activity/index.js

@@ -228,19 +228,16 @@
 * 保存活动标绘箭头
 * @param {*} securityId  活动ID
 * @param {*} position  坐标
 * @param {*} name  名字
 * @param {*} color  颜色
 * @param {*} type  箭头类型
 * @returns
 */
export const addSecurityPlot = (securityId, position, type, name) => {
export const addSecurityPlot = (params) => {
    return request({
        url: `/api/securityPlot/securityPlot/save`,
        method: 'post',
        data: {
            securityId,
            position,
            type,
            name
        }
        data: params
    })
}

@@ -253,7 +250,7 @@
    return request({
        url: `/api/securityPlot/securityPlot/all`,
        method: 'get',
        data: {
        params: {
            securityId,
        }
    })

 src/styles/base/index.scss

@@ -815,7 +815,7 @@

            &>div {
                display: flex;
                justify-content: center;
                // justify-content: center;
                margin-bottom: 10px;
            }

@@ -894,23 +894,53 @@
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 140px;
        height: 174px;

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: #409eff;
                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;
                margin-top: 10px;
            }

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

            .line {
                display: flex;
                justify-content: left;
                margin-bottom: 10px;
            }

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

            .add-polygon-btn-box {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            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);
            }
        }
    }
@@ -926,12 +956,13 @@
        display: flex;
        flex-direction: column;
        width: 240px;
        height: 130px;
        height: 140px;

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: #409eff;
                background-color: rgba(8, 56, 185, 0.9);
                border: 1px solid rgba(8, 56, 185, 0.9);
                color: #fff;
                width: 60px;
                height: 30px;
@@ -939,9 +970,13 @@
                margin-top: 10px;
            }

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

            &>div {
                display: flex;
                justify-content: center;
                // justify-content: center;
                margin-bottom: 10px;
            }

@@ -951,40 +986,12 @@
                width: 120px;
            }

            .color-box {
                display: flex;
                width: 140px;
                height: 32px;
                background-color: rgba(8, 56, 185, 0.5);
                padding: 6px;


                &>div {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border: 1px solid #409EFF;
                    margin-right: 10px;
                    cursor: pointer;
                    user-select: none;
                }

                &>div:hover {
                    border: 1px solid #eee;
                }

                .red-color {
                    background-color: red;
                }

                .green-color {
                    background-color: green;
                }

                .blue-color {
                    background-color: blue;
                }
            .vue-swatches__trigger {
                height: 30px !important;
                width: 30px !important;
                border-radius: 6px !important;
            }

        }
    }
}

 src/styles/media/index.scss

@@ -1555,7 +1555,7 @@
                        }

                        .second-container {
                            top: countSizeVh(0);
                            top: countSizeVh(10);
                            width: countSizeVw(240, 1920);
                            z-index: 99;

@@ -2213,23 +2213,10 @@
                                    line-height: countSizeVh(32);
                                }

                                .color-box {
                                    width: countSizeVw(140, 1920);
                                    height: countSizeVh(32);
                                    padding: countSizeVh(6);


                                    &>div {
                                        width: countSizeVw(20, 1920);
                                        height: countSizeVh(20);
                                        line-height: countSizeVh(20);
                                        border: countSizeVh(1) solid #409EFF;
                                        margin-right: countSizeVw(10, 1920);
                                    }

                                    &>div:hover {
                                        border: countSizeVh(1) solid #eee;
                                    }
                                .vue-swatches__trigger {
                                    height: countSizeVh(30) !important;
                                    width: countSizeVh(30) !important;
                                    border-radius: countSizeVh(6) !important;
                                }

                                .units {
@@ -2245,17 +2232,32 @@
                    .add-polygon-box {
                        .el-dialog {
                            width: countSizeVw(300, 1920);
                            height: countSizeVh(140);
                            height: countSizeVh(166);

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

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

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

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

                                .vue-swatches__trigger {
                                    height: countSizeVh(30) !important;
                                    width: countSizeVh(30) !important;
                                    border-radius: countSizeVh(6) !important;
                                }
                            }
                        }
@@ -2264,7 +2266,7 @@
                    .edit-plot-box {
                        .el-dialog {
                            width: countSizeVw(240, 1920);
                            height: countSizeVh(130);
                            height: countSizeVh(140);

                            .el-dialog__body {
                                .el-button {
@@ -2283,20 +2285,12 @@
                                    width: countSizeVw(120, 1920);
                                }

                                .color-box {
                                    width: countSizeVw(140, 1920);
                                    height: countSizeVh(32);
                                    padding: countSizeVh(6);


                                    &>div {
                                        width: countSizeVw(20, 1920);
                                        height: countSizeVh(20);
                                        line-height: countSizeVh(20);
                                        border: countSizeVh(1) solid #409EFF;
                                        margin-right: countSizeVw(10, 1920);
                                    }
                                .vue-swatches__trigger {
                                    height: countSizeVh(30) !important;
                                    width: countSizeVh(30) !important;
                                    border-radius: countSizeVh(6) !important;
                                }

                            }
                        }
                    }

 src/views/activity/index.vue

@@ -167,23 +167,18 @@
        <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree>
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
            <div class="title">
                活动详情
                <div class="close" @click="closeActivityDetails"></div>
            </div>
            <div class="row-box">
                <div class="category">人数：</div>
                <div class="category-value">{{ activityDetails.number }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动名称：</div>
                <div class="category-value">{{ activityDetails.name }}</div>
            </div>
            <div class="row-box">
                <div class="category">负责单位：</div>
                <div class="category-value">{{ activityDetails.company }}</div>
                <div class="category">活动时间：</div>
                <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
            </div>
            <div class="row-box">
                <div class="category">负责人：</div>
@@ -194,16 +189,20 @@
                <div class="category-value">{{ activityDetails.contact }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动地点：</div>
                <div class="category-value">{{ activityDetails.place }}</div>
                <div class="category">负责单位：</div>
                <div class="category-value">{{ activityDetails.company }}</div>
            </div>
            <div class="row-box">
                <div class="category">所属辖区：</div>
                <div class="category-value">{{ activityDetails.content }}</div>
                <div class="category-value">{{ activityDetails.deptName }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动时间：</div>
                <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
                <div class="category">人数：</div>
                <div class="category-value">{{ activityDetails.number }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动地点：</div>
                <div class="category-value">{{ activityDetails.place }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动内容：</div>
@@ -367,8 +366,8 @@
                    v-show="searchTreeShowFlag"></el-tree>
                <div class="police-btn-box">
                    <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                    <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
                    <el-button @click="deletePoliceElement" v-show="!isChoosePoliceElementDisabled">删除</el-button>
                    <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
                </div>
            </div>
        </el-dialog>
@@ -384,13 +383,8 @@
            </div>
            <div>
                <div class="value-name-box">选择范围颜色：</div>
                <div class="color-box">
                    <div class="red-color" @click="changeLineColor('#FF0000')">{{ chooseColor == '#FF0000' ? '√' : '' }}
                    </div>
                    <div class="green-color" @click="changeLineColor('#00FF00')">{{ chooseColor == '#00FF00' ? '√' : '' }}
                    </div>
                    <div class="blue-color" @click="changeLineColor('#0000FF')">{{ chooseColor == '#0000FF' ? '√' : '' }}
                    </div>
                <div class="pick-color-box">
                   <v-swatches v-model="chooseColor"></v-swatches>
                </div>
            </div>
            <div>
@@ -403,15 +397,22 @@
        </el-dialog>

        <el-dialog :title="polygonAddTitle" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
            class="add-polygon-box">
            <div>
                <div>设置名称:</div>
            class="add-polygon-box" :before-close="cancelSavePolygon">
            <div class="line" v-show="isNeedName">
                <div class="value-name-box">设置名称：</div>
                <div>
                    <input type="text" placeholder="请输入区域名称" v-model="polygonName" />
                    <input type="text"  v-model="polygonName" />
                </div>
            </div>
            <div>
            <div class="line">
                <div class="value-name-box">选择颜色：</div>
                <div class="pick-color-box">
                   <v-swatches v-model="choosePlotColor"></v-swatches>
                </div>
            </div>
            <div class="add-polygon-btn-box">
                <el-button @click="savePolygonInfo">保存</el-button>
                <el-button @click="cancelSavePolygon">取消</el-button>
            </div>
        </el-dialog>

@@ -419,15 +420,8 @@
            class="edit-plot-box">
            <div>
                <div class="value-name-box">选择标绘颜色：</div>
                <div class="color-box">
                    <div class="red-color" @click="changePlotColor('#FF0000')">{{ choosePlotColor == '#FF0000' ? '√' : '' }}
                    </div>
                    <div class="green-color" @click="changePlotColor('#00FF00')">{{ choosePlotColor == '#00FF00' ? '√' : ''
                    }}
                    </div>
                    <div class="blue-color" @click="changePlotColor('#0000FF')">{{ choosePlotColor == '#0000FF' ? '√' : ''
                    }}
                    </div>
                <div class="pick-color-box">
                   <v-swatches v-model="choosePlotColor"></v-swatches>
                </div>
            </div>
            <div>
@@ -446,6 +440,8 @@
import { getRegionList, getDevices } from '@/api/video/index.js'
import { getEquipmentAll } from '@/api/home/index.js'
import flvjs from 'flv.js'
import VSwatches from 'vue-swatches'
import 'vue-swatches/dist/vue-swatches.css'

let analyseLayer = null
let analysePolygon = null
@@ -462,6 +458,8 @@

export default {
    inject: ['userInfo'],

    components: { VSwatches },

    data () {
        return {
@@ -648,8 +646,8 @@
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
            chooseColor: '#FF0000',
            choosePlotColor: '#FF0000',
            chooseColor: '#1CA085',
            choosePlotColor: '#1CA085',
            chooseLineData: {},
            lineWidth: 100,
            linePosition: '',
@@ -669,6 +667,9 @@
            searchTreeShowFlag: false,
            plotOverlayData: null,
            lineObjdata: null,
            isNeedName:false,
            plotSaveType:1,
            arrowPositionSre:'',
        }
    },

@@ -1305,7 +1306,7 @@

        // 切换作战标绘
        switchArrowBtnChange (e) {
            this.getSecurityPlotList(this.securityId, this.arrowBtnSwitch)
            this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch)
        },

        // 切换轨迹播放控件
@@ -1337,6 +1338,7 @@
            this.dialogVisible = false
            this.polylineBtnSwitch = false
            this.isTrackBtnShow = false
            this.closeVideo ()
            this.currentClickIndex = ''
            analyseLayer.clear()
            arrowsListLayer.clear()
@@ -1378,8 +1380,8 @@
                        document.oncontextmenu = function () {
                            if (flag == true && poltType == 'billboard') {
                                if (policeType == 'policeman') {
                                    this.searchPoliceTreeId = ''
                                    this.searchPoliceTreeName = ''
                                    that.searchPoliceTreeId = ''
                                    that.searchPoliceTreeName = ''
                                    that.policeChooseVisible = true
                                } else if (policeType == 'policecar') {
                                    that.policeOption = that.policecarOption
@@ -1425,6 +1427,8 @@
                            // overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor = '#1CA085'
                                    that.isNeedName = true
                                    that.polygonAddVisible = true
                                    flag = false
                                }
@@ -1433,6 +1437,8 @@
                    }
                },{material: global.DC.Color.RED})
            } else {
                const that = this
                let flag = false
                arrowPlot && arrowPlot.draw(type, overlay => {
                    if (overlay) {
                        let plotType = ''
@@ -1445,14 +1451,24 @@
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        }
                        this.plotSaveType = plotType
                        plot.edit(overlay, (e) => {
                            let position = ''
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                position += item._lng + ' ' + item._lat + ','
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            position = position.slice(0, position.length - 1)
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            this.arrowPositionStr = positionStr
                            drawArrowLayers.addOverlay(overlay)
                            this.addSecurityPlot(this.showingSecurityId, position, plotType)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor = '#1CA085'
                                    that.isNeedName = false
                                    that.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                },{material: global.DC.Color.RED})
@@ -1460,7 +1476,9 @@
        },

        removeAllArrow () {
            drawArrowLayers.clear()
            if(drawArrowLayers!=null){
                drawArrowLayers.clear()
            }
        },

        // 播放轨迹
@@ -1520,6 +1538,14 @@
            this.policeChooseCarVisible = false
            this.overlayObj2 = {}
            this.removeAll()
        },

        // 取消保存多边形
        cancelSavePolygon(){
            this.polygonAddVisible = false
            if(drawArrowLayers!=null){
                drawArrowLayers.clear()
            }
        },

        // 选择警员关闭
@@ -1606,7 +1632,7 @@
        lineOverlayTypeClick (e) {
            this.videoShow = false
            this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
            this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
            this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#1CA085'
            this.policeIconId = e.overlay.attrParams.id
            this.linePosition = e.overlay.attrParams.linePositionStr
            this.lineObjdata = e.overlay.attrParams.lineObj
@@ -1623,8 +1649,9 @@
        },

        // 保存活动标绘箭头
        addSecurityPlot (securityId, position, type, name) {
            addSecurityPlot(securityId, position, type, name).then(res => {
        // securityId活动id, position坐标, type标绘类型, name多边形名称,color标绘颜色
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
@@ -1635,7 +1662,7 @@
                        message: '保存失败'
                    })
                }
                this.getSecurityPlotList(securityId, this.arrowBtnSwitch)
                this.getSecurityPlotList(params.securityId, this.arrowBtnSwitch)
            })
        },

@@ -1707,8 +1734,7 @@
        // 单击。标绘箭头
        reeditArrowClick (e) {
            this.plotOverlayData = e
            this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
            console.log('this.choosePlotColor', this.choosePlotColor, e.overlay.attrParams)
            this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#1CA085'
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.plotId = e.overlay.attrParams.id
                this.editPlotVisible = true
@@ -1880,9 +1906,10 @@
                        }
                        this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}`, status: `${item.status}` })
                        if (index == monitorData.length - 1) {
                            console.log('this.monitorOption',this.monitorOption);
                            this.monitorOption.forEach((itemm, indexx) => {
                                if (indexx < 4) {
                                    this.isHaveMonitor[`type${indexx + 5}`] = true
                                    this.isHaveMonitor[`video${indexx + 5}`] = itemm.status == '0' ? false:true
                                    this.monitor[`type${indexx + 5}`] = itemm.label
                                    this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
                                }
@@ -1901,9 +1928,13 @@
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
            if (tc) {
            tc.clear()
        }
        },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            console.log('flvUrl',flvUrl);
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
@@ -1991,8 +2022,20 @@

        // 保存绘制区域
        savePolygonInfo () {
            this.addSecurityPlot(this.showingSecurityId, this.polygonPositionStr, 5, this.polygonName)
            this.polygonAddVisible = false
            if(this.isNeedName){
                if (this.polygonName == '') {
                this.$message({
                    message: '请输入名称',
                    type: 'error'
                })
            } else {
                this.addSecurityPlot({securityId:this.showingSecurityId, position:this.polygonPositionStr, type:5, name:this.polygonName,color:this.choosePlotColor})
                this.polygonAddVisible = false
            }
            }else{
                this.addSecurityPlot({securityId:this.showingSecurityId, position:this.arrowPositionStr, type:this.plotSaveType, color:this.choosePlotColor})
                this.polygonAddVisible = false
            }
        },

        // 获取面的中心点
@@ -2012,11 +2055,6 @@
        // 改变巡逻路线颜色
        changeLineColor (color) {
            this.chooseColor = color
        },

        // 改变标绘颜色
        changePlotColor (color) {
            this.choosePlotColor = color
        },

        // 删除警车
@@ -2449,7 +2487,7 @@

    .second-container {
        position: absolute;
        top: 0px;
        top: 10px;
        display: flex;
        flex-direction: column;
        width: 240px;