警情排行调整

shuishen

2023-05-08 e24f70ababdee2b4fdce71c6b80a9bc928fa0331

 src/views/activity/components/polygonPlot.vue

@@ -10,16 +10,25 @@
                    </div>
                </div>

                <div class="line" v-show="customImageShow">
                    <div class="value-name-box">
                        选择图片：
                <div class="line" v-show="restSelectBox">
                    <div class="value-name-box">选择类型：</div>
                    <div class="select-type" style="flex: 1;">
                        <el-select size="small" v-model="restPlotType" placeholder="请选择类型">
                            <el-option v-for="item in restPlotSelectArray" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>

                <div class="line" v-show="customImageShow">
                    <div class="value-name-box">选择图片：</div>
                    <div class="select-image" style="position: relative; display: flex; align-items: center;">
                        <el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
                            @click="imagesListShow = !imagesListShow">
                            <img :src="curImgUrl" alt=""
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;">
                            <img :src="curImgUrl" alt
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>

                        <images-select v-show="imagesListShow" @curClick="curClick"></images-select>
                    </div>
                </div>
@@ -27,8 +36,8 @@
                <div class="line">
                    <div class="value-name-box">选择标绘颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                        <el-color-picker v-model="choosePlotColor" :predefine="predefineColors"
                            size="small"></el-color-picker>
                    </div>
                </div>

@@ -46,12 +55,10 @@
                    <el-button @click="editPlotVisible = false">取消</el-button>
                </div>
            </div>

        </el-dialog>

        <el-dialog title="新增标绘" :visible.sync="polygonAddVisible" :modal="true" :close-on-click-modal="false"
            :modal-append-to-body="true" :append-to-body="true" class="add-polygon-box" :before-close="cancelSavePolygon">

            <div>
                <div class="line">
                    <div class="value-name-box">描述：</div>
@@ -60,9 +67,19 @@
                    </div>
                </div>

                <div class="line" v-show="restSelectBox">
                    <div class="value-name-box">选择类型：</div>
                    <div class="select-type" style="flex: 1;">
                        <el-select size="small" v-model="restPlotType" placeholder="请选择类型">
                            <el-option v-for="item in restPlotSelectArray" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>

                <div class="line" v-show="isNeedPolygonType">
                    <div class="value-name-box">选择类型：</div>
                    <div class="select-type">
                    <div class="select-type" style="flex: 1;">
                        <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>
@@ -71,14 +88,12 @@
                </div>

                <div class="line" v-show="customImageShow">
                    <div class="value-name-box">
                        选择图片：
                    </div>
                    <div class="value-name-box">选择图片：</div>
                    <div class="select-image" style="position: relative; display: flex; align-items: center;">
                        <el-button style="margin-top: 0; position: relative; background: transparent; border-color: #fff;"
                            @click="imagesListShow = !imagesListShow">
                            <img :src="curImgUrl" alt=""
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;">
                            <img :src="curImgUrl" alt
                                style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; width: 20px; height: 20px;" />
                        </el-button>
                        <images-select v-show="imagesListShow" @curClick="curClick"></images-select>
                    </div>
@@ -87,8 +102,8 @@
                <div class="line">
                    <div class="value-name-box">选择标绘颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                        <el-color-picker v-model="choosePlotColor" :predefine="predefineColors"
                            size="small"></el-color-picker>
                    </div>
                </div>

@@ -99,12 +114,15 @@
                    </div>
                </div>

                <div v-show="customImageShow" style="font-size: 12px;">
                    <span>建议图像格式：png、尺寸：32x32、大小：10kb以内</span>
                </div>

                <div class="btn-box">
                    <el-button @click="savePolygonInfo">保存</el-button>
                    <el-button @click="cancelSavePolygon">取消</el-button>
                </div>
            </div>

        </el-dialog>
    </div>
</template>
@@ -154,22 +172,39 @@

            polygonAreaOption: [{
                value: 1,
                label: '核心区'
                label: '多边形'
            }, {
                value: 2,
                label: '缓冲区'
                label: '电子围栏'
            }],

            restPlotSelectArray: [
                {
                    value: 6,
                    label: '群众',
                },
                {
                    value: 7,
                    label: '关注对象',
                },
                {
                    value: 8,
                    label: '其他对象',
                },
            ],

            plotId: '',

            customImageShow: false,
            imagesListShow: false,

            restPlotType: 6,
            restSelectBox: false,
            curImgUrl: '/img/icon/custom.png'
        }
    },
    methods: {
        curClick (item) {
            this.curImgUrl = item.url
            this.curImgUrl = item

            this.imagesListShow = false
        },
@@ -178,6 +213,8 @@
            polygonAltArray = `${positions.alt},${positions.alt}`
            polygonPlotData = `${positions.lng} ${positions.lat}`
            this.customImageShow = false
            this.restSelectBox = false
            this.restPlotType = 6
            let color = ''

            if (type == 'icon1') {
@@ -192,6 +229,9 @@
            } else if (type == 'icon4') {
                this.customImageShow = true
                this.plotSaveType = 11
                color = '#ff0000'
            } else if (type == 'icon5') {
                this.restSelectBox = true
                color = '#ff0000'
            } else {
                color = '#1e32e6'
@@ -215,7 +255,7 @@

            if (type == 5) {
                this.polygonAreaType = 1
                this.isNeedPolygonType = false
                this.isNeedPolygonType = true
            } else {
                this.isNeedPolygonType = false
            }
@@ -225,11 +265,19 @@
        },

        setCurOver (e) {
            this.restSelectBox = false
            this.customImageShow = false

            plotOverlayData = e

            this.polygonRemark = e.overlay.attrParams.item.remark

            this.curImgUrl = e.overlay.icon

            if (e.overlay.attrParams.item.type == 6 || e.overlay.attrParams.item.type == 7 || e.overlay.attrParams.item.type == 8) {
                this.restPlotType = e.overlay.attrParams.item.type
                this.restSelectBox = true
            }

            if (e.overlay.attrParams.item.type == 11) this.customImageShow = true

@@ -300,11 +348,16 @@

        // 保存标绘修改
        savePlot () {
            let obj = {}
            if (this.restSelectBox == true) {
                obj.type = this.restPlotType
            }
            this.$parent.updateSecurityPlot({
                id: plotOverlayData.overlay.attrParams.id,
                color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
                remark: this.polygonRemark,
                icon: this.curImgUrl
                icon: this.curImgUrl,
                ...obj
            }, plotOverlayData.overlay)
            this.editPlotVisible = false
        },
@@ -324,23 +377,28 @@
        savePolygonInfo () {
            let positionStr = ''
            let iconUrl = {}
            if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
                positionStr = polygonPlotData
            } else if (this.plotSaveType == 5) {
                positionStr = polygonPlotData
            } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {

            if (this.restSelectBox) {
                positionStr = polygonPlotData + ',' + polygonPlotData
            } else if (this.plotSaveType == 10) {
                positionStr = polygonPlotData
            } else if (this.plotSaveType == 11) {
                positionStr = polygonPlotData + ',' + polygonPlotData
                iconUrl = { iconUrl: this.curImgUrl }
            } else {
                if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
                    positionStr = polygonPlotData
                } else if (this.plotSaveType == 5) {
                    positionStr = polygonPlotData
                } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
                    positionStr = polygonPlotData + ',' + polygonPlotData
                } else if (this.plotSaveType == 10) {
                    positionStr = polygonPlotData
                } else if (this.plotSaveType == 11) {
                    positionStr = polygonPlotData + ',' + polygonPlotData
                    iconUrl = { iconUrl: this.curImgUrl }
                }
            }

            this.addSecurityPlot({
                securityId: this.showingSecurityId,
                position: positionStr,
                type: this.plotSaveType,
                type: this.restSelectBox ? this.restPlotType : this.plotSaveType,
                color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
                remark: this.polygonRemark,
                areaType: this.polygonAreaType,