guanqb
2023-04-07 fba0b4cdc5d070394fc64b34d9e50ca65c23e0a6
src/views/activity/components/polygonPlot.vue
@@ -1,7 +1,14 @@
<template>
    <div>
        <el-dialog title="修改标绘" :visible.sync="editPlotVisible" :modal="true" :close-on-click-modal="false"
            :append-to-body="true" class="edit-plot-box">
            :modal-append-to-body="false" class="edit-plot-box">
            <div>
                <div class="value-name-box">描述:</div>
                <div class="input-width-box" style="flex: 1;">
                    <input style="width: 100%;" type="text" v-model="polygonRemark" placeholder="请输入..." />
                </div>
            </div>
            <div>
                <div class="value-name-box">选择标绘颜色:</div>
                <div class="pick-color-box">
@@ -9,14 +16,14 @@
                    </el-color-picker>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div>
                <div class="value-name-box">设置透明度:</div>
                <div class="alpha">
                    <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div class="edit-plot-btn-box">
                <el-button @click="savePlot">保存</el-button>
                <el-button @click="editPlot">编辑</el-button>
@@ -26,7 +33,14 @@
        </el-dialog>
        <el-dialog title="新增标绘" :visible.sync="polygonAddVisible" :modal="true" :close-on-click-modal="false"
            :append-to-body="true" class="add-polygon-box" :before-close="cancelSavePolygon">
            :modal-append-to-body="false" class="add-polygon-box" :before-close="cancelSavePolygon">
            <div class="line">
                <div class="value-name-box">描述:</div>
                <div class="input-width-box" style="flex: 1;">
                    <input style="width: 100%;" type="text" v-model="polygonRemark" placeholder="请输入..." />
                </div>
            </div>
            <div class="line" v-show="isNeedPolygonType">
                <div class="value-name-box">选择类型:</div>
                <div class="select-type">
@@ -36,6 +50,7 @@
                    </el-select>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">选择标绘颜色:</div>
                <div class="pick-color-box">
@@ -49,7 +64,7 @@
                    <el-slider :min="1" 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>
@@ -94,6 +109,7 @@
                '#c7158577'
            ],
            choosePlotColor: '#409EFF',
            polygonRemark: '',
            choosePlotColorAlpha: 48,
            polygonAreaType: 1,
            isNeedPolygonType: false,
@@ -133,6 +149,7 @@
            this.isNeedPolygonType = false
            this.choosePlotColor = color
            this.polygonRemark = ''
            this.choosePlotColorAlpha = 100
            this.polygonAddVisible = true
        },
@@ -142,6 +159,7 @@
            polygonPlotData = positions
            this.plotSaveType = type
            this.choosePlotColor = '#409EFF'
            this.polygonRemark = ''
            this.choosePlotColorAlpha = 48
            if (type == 5) {
@@ -158,6 +176,7 @@
        setCurOver (e) {
            plotOverlayData = e
            this.polygonRemark = e.overlay.attrParams.remark
            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]) : 100
@@ -202,6 +221,7 @@
                    if (plotOverlayData != null && plotOverlayData.overlay != null && 'pointOverlayData' in plotOverlayData.overlay.attrParams) {
                        plotOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$EventBus.$emit('activeDeletePolygon')
                    this.$message({
                        message: '删除成功',
                        type: 'success'
@@ -224,7 +244,11 @@
        // 保存标绘修改
        savePlot () {
            this.$parent.updateSecurityPlot({ id: plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha }, plotOverlayData.overlay)
            this.$parent.updateSecurityPlot({
                id: plotOverlayData.overlay.attrParams.id,
                color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
                remark: this.polygonRemark
            }, plotOverlayData.overlay)
            this.editPlotVisible = false
        },
@@ -257,6 +281,7 @@
                position: positionStr,
                type: this.plotSaveType,
                color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
                remark: this.polygonRemark,
                areaType: this.polygonAreaType,
                altitude: polygonAltArray
            })
@@ -269,6 +294,7 @@
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$parent.addNewPlot(res.data.data)
                    this.$EventBus.$emit('activeDeletePolygon')
                    polygonAltArray = []