Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-aff...

shuishen

2023-03-06 b8c7b615887bb5499e48c6fe3ec17bdda935c4e5

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs

 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,14 @@
                margin-bottom: 10px;
            }

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

            .value-name-box {
                width: 90px;
                width: 110px;
                display: flex;
                align-items: center;
            }

            .add-polygon-btn-box {
@@ -933,7 +939,6 @@
            input {
                height: 30px;
                font-size: 16px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
@@ -945,6 +950,14 @@

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

            .el-input--suffix .el-input__inner {
                padding-right: 10px;
            }

            .placeholder {
                height: 26px;
            }
        }
    }
@@ -959,7 +972,7 @@
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 240px;
        width: 300px;
        height: 140px;

        .el-dialog__body {
@@ -987,10 +1000,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(340, 1920);
                            height: countSizeVh(220);

                            .el-dialog__body {
                                .el-button {
@@ -2260,13 +2260,21 @@
                                }

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

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

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

                                .placeholder {
                                    height: countSizeVh(26);
                                }

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

                            .el-dialog__body {
                                .el-button {
@@ -2295,6 +2303,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

@@ -107,6 +107,9 @@
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard','icon1')" title="头像1">头像1</button>
                    </li>
                    </ul>
                </div>
                <div>
@@ -114,10 +117,7 @@
                    <ul>
                        <li>
                            <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                    title="路线绘制"
                                                                                                                                                                                                                                                                                                                                                                                                                    @click="draw('billboard', 'policeman')"
                                                                                                                                                                                                                                                                                                                                                                                                                    icon="el-icon-my-route"
                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                            <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                                <img src="../../../public/img/icon/route1.png" style="height:100%" />
                            </button>
@@ -406,19 +406,35 @@

        <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" v-show="isNeedPolygonType">
                <div class="value-name-box">选择类型：</div>
                <div class="select-type">
                    <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                       <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
                    </el-select>
                </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>
            <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="placeholder" v-show="!isNeedPolygonType"></div>
            <div class="add-polygon-btn-box">
                <el-button @click="savePolygonInfo">保存</el-button>
                <el-button @click="cancelSavePolygon">取消</el-button>
@@ -427,17 +443,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>
@@ -669,12 +691,13 @@
            videoShow: false,
            lineEditVisible: false,
            lineEditTitle: '修改巡逻路线',
            polygonAddTitle: '新增活动区域',
            polygonAddTitle: '新增标绘',
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
            chooseColor: '#1CA085',
            choosePlotColor:  'rgba(255, 69, 0, 0.68)',
            choosePlotColor:  '#409EFF',
            choosePlotColorAlpha:48,
            chooseCarColor: '#1CA085',
            choosePoliceColor: '#1CA085',
            chooseLineData: {},
@@ -723,6 +746,16 @@
                video3: false,
                video4: false,
            },
            polygonAreaType:1,
            polygonAreaOption:[{
              value: 1,
              label: '核心区'
            }, {
              value: 2,
              label: '缓冲区'
            }],
            isNeedPolygonType:false,
            plotPointPositionStr:'',
        }
    },

@@ -1551,7 +1584,7 @@
            drawLayers.clear()
        },

        drawArrow (type) {
        drawArrow (type,iconType) {
            if (type == 'polygon') {
                const that = this
                let flag = false
@@ -1569,8 +1602,11 @@
                            // 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.polygonAreaType = 1
                                    that.isNeedName = true
                                    that.isNeedPolygonType = true
                                    that.polygonName = ''
                                    that.polygonAddVisible = true
                                    flag = false
@@ -1579,7 +1615,32 @@
                        })
                    }
                }, { 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) => {
                        flag = true
                        this.plotPointPositionStr = overlay._positions._lng + ' ' + overlay._positions._lat
                        document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor =  '#409EFF'
                                    that.choosePlotColorAlpha = 48
                                    that.polygonAddVisible = true
                                    flag = false
                                }
                            }
                    })
                }
                })
            }else {
                const that = this
                let flag = false
                arrowPlot && arrowPlot.draw(type, overlay => {
@@ -1606,8 +1667,9 @@
                            drawArrowLayers.addOverlay(overlay)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor =  'rgba(255, 69, 0, 0.68)'
                                    that.choosePlotColor =  '#409EFF'
                                    that.isNeedName = false
                                    that.isNeedPolygonType = false
                                    that.polygonAddVisible = true
                                    flag = false
                                }
@@ -1825,7 +1887,7 @@
        },

        // 保存活动标绘箭头
        // securityId活动id, position坐标, type标绘类型, name多边形名称,color标绘颜色
        // securityId活动id, position坐标, type标绘类型, name多边形名称,color标绘颜色,aera_type多边形类型
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
@@ -1852,10 +1914,11 @@
                this.isHaveArrow = res.data.data.some(item => {
                    return item
                })
                let plotList = res.data.data
                res.data.data.forEach(item => {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let chooseArrow = null
                    let nameLabel = null
                    // let nameLabel = null
                    if (item.type == 1) {
                        chooseArrow = new global.DC.AttackArrow(position)
                    } else if (item.type == 2) {
@@ -1866,10 +1929,36 @@
                        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)
                        // 缓存区的话需要扣去包含的核心区
                        if(item.areaType == 2){
                            let itemPositionArr = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                            itemPositionArr.push(itemPositionArr[0])
                            itemPositionArr = itemPositionArr.map(item=>{
                                return item.split(',').map(Number)
                            })
                            let cachePolygon = this.$turf.polygon([itemPositionArr])
                            plotList.forEach(inItem => {
                                // 查询被包含的核心区
                                if(inItem.areaType == 1 && inItem.type == 5){
                                    let inItemPositionArr = inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                                    inItemPositionArr.push(inItemPositionArr[0])
                                    inItemPositionArr = inItemPositionArr.map(item=>{
                                        return item.split(',').map(Number)
                                    })
                                    let carePolygon = this.$turf.polygon([inItemPositionArr])
                                    let isContains = this.$turf.booleanContains(cachePolygon, carePolygon);
                                    // 如果完全包含就作为洞面扣去
                                    if(isContains){
                                        chooseArrow.holes = [inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')]
                                    }

                                }
                            })
                        }
                        // 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",
                        // })
@@ -1878,19 +1967,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,item }
                    arrowsListLayer.addOverlay(chooseArrow)
                    chooseArrow.setStyle({
                        "material": color,
@@ -1918,8 +2002,15 @@
        // 单击。标绘箭头
        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
            if(e.overlay.attrParams.item.type == 5){
                this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
                this.isNeedPolygonType = true
            }else{
                this.isNeedPolygonType = false
            }
            // 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
@@ -1934,15 +2025,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) {
@@ -2363,17 +2448,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,areaType:this.polygonAreaType })
                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
            }
        },
@@ -2528,15 +2606,20 @@

        // 树形数据传数组
        filterTree (tree, arr = []) {
            if (!tree.length) return []
            arr.push(...tree)
            for (let item of tree) {
                if (item.children && item.children.length) {
                    this.filterTree(item.children, arr)
                }
          if (!tree.length) return []
          arr.push(...tree)
          for(let item of tree){
            if(item.children && item.children.length){
               this.filterTree(item.children,arr)
            }
            return arr
        }
          }
          return arr
        },

        // 计算透明度值
        formatTooltip(val) {
            return val / 100;
        },

    },