guanqb
2023-05-07 9f3fd4c73cbf57853afdcd1089e3a68e968b51e4
src/views/activity/components/polygonPlot.vue
@@ -1,24 +1,12 @@
<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>
@@ -26,31 +14,19 @@
                    <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="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>
@@ -60,22 +36,15 @@
                <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>
@@ -88,26 +57,13 @@
            </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>
@@ -115,12 +71,8 @@
                    <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>
@@ -129,31 +81,19 @@
                    <div class="value-name-box">选择类型:</div>
                    <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="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>
@@ -162,22 +102,15 @@
                <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>