From 6b36d7a84b91fd093ed76742412e580d03823b62 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 06 May 2023 17:40:54 +0800
Subject: [PATCH] 电子沙盘调整
---
src/views/activity/components/polygonPlot.vue | 143 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 102 insertions(+), 41 deletions(-)
diff --git a/src/views/activity/components/polygonPlot.vue b/src/views/activity/components/polygonPlot.vue
index f7602ca..2991c67 100644
--- a/src/views/activity/components/polygonPlot.vue
+++ b/src/views/activity/components/polygonPlot.vue
@@ -1,12 +1,24 @@
<template>
<div>
- <el-dialog title="修改标绘" :visible.sync="editPlotVisible" :modal="true" :close-on-click-modal="false"
- :modal-append-to-body="true" :append-to-body="true" class="edit-plot-box">
+ <el-dialog
+ title="修改标绘"
+ :visible.sync="editPlotVisible"
+ :modal="true"
+ :close-on-click-modal="false"
+ :modal-append-to-body="true"
+ :append-to-body="true"
+ class="edit-plot-box"
+ >
<div>
<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="请输入..." />
+ <input
+ style="width: 100%;"
+ type="text"
+ v-model="polygonRemark"
+ placeholder="请输入..."
+ />
</div>
</div>
@@ -14,21 +26,31 @@
<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-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;">
+ <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;"
+ />
</el-button>
<images-select v-show="imagesListShow" @curClick="curClick"></images-select>
@@ -38,15 +60,22 @@
<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>
<div class="line">
<div class="value-name-box">设置透明度：</div>
<div class="alpha">
- <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
+ <el-slider
+ :min="1"
+ v-model="choosePlotColorAlpha"
+ :format-tooltip="formatTooltip"
+ ></el-slider>
</div>
</div>
@@ -57,17 +86,28 @@
<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">
-
+ <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>
<div class="input-width-box" style="flex: 1;">
- <input style="width: 100%;" type="text" v-model="polygonRemark" placeholder="请输入..." />
+ <input
+ style="width: 100%;"
+ type="text"
+ v-model="polygonRemark"
+ placeholder="请输入..."
+ />
</div>
</div>
@@ -75,31 +115,45 @@
<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-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>
+ <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" 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;">
+ <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;"
+ />
</el-button>
<images-select v-show="imagesListShow" @curClick="curClick"></images-select>
</div>
@@ -108,15 +162,22 @@
<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>
<div class="line">
<div class="value-name-box">设置透明度：</div>
<div class="alpha">
- <el-slider :min="1" v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
+ <el-slider
+ :min="1"
+ v-model="choosePlotColorAlpha"
+ :format-tooltip="formatTooltip"
+ ></el-slider>
</div>
</div>
@@ -129,7 +190,6 @@
<el-button @click="cancelSavePolygon">取消</el-button>
</div>
</div>
-
</el-dialog>
</div>
</template>
@@ -179,10 +239,10 @@
polygonAreaOption: [{
value: 1,
- label: '核心区'
+ label: '多边形'
}, {
value: 2,
- label: '缓冲区'
+ label: '电子围栏'
}],
restPlotSelectArray: [
@@ -262,7 +322,7 @@
if (type == 5) {
this.polygonAreaType = 1
- this.isNeedPolygonType = false
+ this.isNeedPolygonType = true
} else {
this.isNeedPolygonType = false
}
@@ -273,6 +333,7 @@
setCurOver (e) {
this.restSelectBox = false
+ this.customImageShow = false
plotOverlayData = e
--
Gitblit v1.9.3