sea-warning-web/src/components/easyMap/component/form-draw/index.vue

<template>
  <ToolsDialog
    v-if="show"
    @onClose="onClose(), $emit('formDrawClose', {source: 'formDraw', value: false})"
    title="标绘"
    v-model:layout="toolsLayout"
    close
    expend
  >
    <div class="base-draw-com" v-loading="loading">
      <template v-if="config.isView">
        <div class="content">
          <div class="content-info">
            <Component
              :is="transfer.form.com"
              :transfer="transfer.form.detail"
              v-model:loading="loading"
              :isView="config.isView"
              :map="map"
              ref="ref_formCom"
              @pass="(e) => {     onClose(); $emit('formDrawClose', {source: 'formDraw', ...e, value: true})}"
              @drawDefault="onDrawDefault"
              @drawHcq="onDrawHcq"
              @drawSmall="onDrawSmall"
              @wkt="val => config.wkt = val"
              @hcqWkt="val => config.hcqWkt = val"
              @smallWkt="val => config.smallWkt = val"
            />
          </div>
        </div>
        <div class="bottom-buttons" v-if="config.viewToEdit">
          <div class="submit __hover" @click="onEdit">编辑</div>
          <div class="cancel __hover" @click="onClose(), $emit('formDrawClose', {source: 'formDraw', value: false})">取消</div>
        </div>
      </template>
      <template v-else>
        <div class="base-draw-com-tabs">
          <div class="__hover" :class="{active: tab === '1'}" @click="tab = '1'">标绘信息</div>
          <div class="__hover" :class="{active: tab === '2'}" @click="tab = '2'">基本信息</div>
        </div>
        <div class="content">
          <div v-show="tab === '1'" class="content-draw">
            <div class="__title">形状样式</div>
            <CusForm labelWidth="74px" ref="ref_drawForm">
              <CusFormColumn
                label="形状:"
                v-model:param="config.featureType"
              >
                <template #cus="{handleValidate}">
                  <div class="feature-type">
                    <template v-if="config.featureType === 'Point'">
                      <div><SvgIcon name="point_1" size="28" color="#ffffff"/></div>
                    </template>
                    <template v-else-if="config.featureType === 'LineString'">
                      <div><SvgIcon name="line_1" size="28" color="#ffffff"/></div>
                    </template>
                    <template v-else-if="config.featureType === 'Polygon'">
                      <div class="__hover" :class="{active: polygonType === 'Polygon'}" @click="reDrawPolygonType('Polygon')"><SvgIcon name="poly_1" size="28" color="#ffffff"/></div>
                      <div class="__hover" :class="{active: polygonType === 'Rectangle'}" @click="reDrawPolygonType('Rectangle')"><SvgIcon name="rectangle_1" size="28" color="#ffffff"/></div>
                      <div class="__hover" :class="{active: polygonType === 'Circle'}" @click="reDrawPolygonType('Circle')"><SvgIcon name="circle_1" size="28" color="#ffffff"/></div>
                    </template>
                  </div>
                </template>
              </CusFormColumn>
              <template v-if="config.featureType === 'LineString'">
                <CusFormColumn
                  required
                  :span="24"
                  label="边线颜色:"
                  v-model:param="config.lineColor"
                  :clearable="false"
                  :readonly="true"
                >
                  <template #suffix>
                    <el-color-picker v-model="config.lineColor" show-alpha size="small" @change="onConfigChange"/>
                  </template>
                </CusFormColumn>
                <CusFormColumn
                  required
                  :span="12"
                  label="边线宽度:"
                  link="input-number"
                  v-model:param="config.lineWidth"
                  unit="像素"
                  @change="onConfigChange"
                  :min="1"
                />
                <CusFormColumn
                  required
                  label-width="94px"
                  :span="12"
                  label="边线类型:"
                  link="select"
                  v-model:param="config.lineType"
                  static
                  @change="onConfigChange"
                >
                  <el-option label="—————" :value="0"/>
                  <el-option label="— — — —" :value="1"/>
                  <el-option label="- - - - - - - -" :value="2"/>
                </CusFormColumn>
              </template>
              <template v-else-if="config.featureType === 'Polygon'">
                <CusFormColumn
                  required
                  :span="24"
                  label="边线颜色:"
                  v-model:param="config.polyBorderColor"
                  :clearable="false"
                  :readonly="true"
                >
                  <template #suffix>
                    <el-color-picker v-model="config.polyBorderColor" show-alpha size="small" @change="onConfigChange"/>
                  </template>
                </CusFormColumn>
                <CusFormColumn
                  required
                  :span="12"
                  label="边线宽度:"
                  link="input-number"
                  v-model:param="config.polyBorderWidth"
                  unit="像素"
                  @change="onConfigChange"
                  :min="1"
                />
                <CusFormColumn
                  required
                  :span="12"
                  label="填充颜色:"
                  v-model:param="config.polyColor"
                  :clearable="false"
                  :readonly="true"
                >
                  <template #suffix>
                    <el-color-picker v-model="config.polyColor" show-alpha size="small" @change="onConfigChange"/>
                  </template>
                </CusFormColumn>
              </template>
            </CusForm>
            <div class="position-handle">
              <div class="ph-tabs" v-if="config.featureType === 'Polygon'">
                <div class="__hover" :class="{active: typeTab === 'default'}" @click="operationTab = 'draw', typeTab = 'default'">要素标绘</div>
                <template v-if="config.wkt">
                  <div v-if="config.isHcq" class="__hover" :class="{active: typeTab === 'hcq'}" @click="operationTab = 'draw', typeTab = 'hcq'">缓冲区标绘</div>
                  <div v-if="config.isSmall" class="__hover" :class="{active: typeTab === 'small'}" @click="operationTab = 'draw', typeTab = 'small'">缩略点标绘</div>
                </template>
              </div>
              <template v-if="typeTab === 'hcq'">
                <div class="hcq-type">
                  <div class="__hover" @click="hcqType = 'auto'"><div class="__check" :class="{active: hcqType === 'auto'}"/>生成</div>
                  <div class="__hover" @click="operationTab = 'draw', hcqType = 'cus'"><div class="__check" :class="{active: hcqType === 'cus'}"/>手动标绘</div>
                </div>
              </template>
              <div class="ph-operation-tabs" v-if="!(typeTab === 'hcq' && hcqType === 'auto')">
                <div class="__hover" :class="{active: operationTab === 'draw'}" @click="operationTab = 'draw'">拖动</div>
                <div v-if="isFeatureValid" class="__hover" :class="{active: operationTab === 'position'}" @click="operationTab = 'position'">坐标</div>
                <div class="__hover" :class="{active: operationTab === 'text'}" @click="operationTab = 'text'">文本</div>
              </div>
              <template v-if="typeTab === 'default'">
                <template v-if="operationTab === 'draw'">
                  <template v-if="polygonType === 'Rectangle'">
                    <div class="redraw">
                      <div class="__hover" @click="reDrawRectangle">重绘</div>
                    </div>
                  </template>
                  <template v-if="polygonType === 'Circle'">
                    <div class="redraw">
                      <div class="__hover" @click="reDrawCircle">重绘</div>
                      <div class="__hover" @click="circleToPolygon" v-if="circleReady">生成圆</div>
                    </div>
                  </template>
                  <div class="draw-tips">
                    * 可在地图上，通过以下操作调整图形：<br/>
                    <template v-if="config.featureType === 'Point'">
                      1、拖动坐标点位置可调整点的位置；<br/>
                    </template>
                    <template v-else-if="config.featureType === 'LineString'">
                      1、拖动调整坐标点位置；<br/>
                      2、删除坐标点请切换到坐标页签操作；<br/>
                      3、点击边线即可增加坐标点；<br/>
                    </template>
                    <template v-else-if="config.featureType === 'Polygon'">
                      <template v-if="polygonType === 'Polygon'">
                        1、拖动调整坐标点位置；<br/>
                        2、删除坐标点请切换到坐标页签操作；<br/>
                        3、点击边线即可增加坐标点；<br/>
                      </template>
                      <template v-else-if="polygonType === 'Rectangle'">
                        1、点击地图，拖动鼠标可重新标绘；<br/>
                      </template>
                      <template v-else-if="polygonType === 'Circle'">
                        1、拖动边线坐标点位置或者修改坐标中的半径值可调整圆形的半径大小；<br/>
                        2、拖动圆心或者修改坐标中的圆心坐标点的值可调整圆形的位置；<br/>
                      </template>
                    </template>
                  </div>
                </template>
                <template v-else-if="operationTab === 'position'">
                  <PositionList v-model:wkt="config.wkt" :isView="config.featureType === 'Point' || (config.featureType === 'Polygon' && ['Rectangle', 'Circle'].includes(polygonType))" @toPosition="onToPosition"/>
                </template>
                <template v-else-if="operationTab === 'text'">
                  <div class="textarea-block">
                    <template v-if="config.featureType === 'Point'">
                      <div class="tips">
                        输入经纬度，样例：<br/>
                        POINT(109.1 20.5)
                      </div>
                      <CusFormColumn
                        ref="ref_wktTextarea"
                        class="wkt-textarea"
                        :span="24"
                        required
                        type="textarea"
                        v-model:param="config.wkt"
                        default-error-msg="请输入点位坐标"
                        :rules="[
                        {
                          handle: (val) => $easyMap.validWkt.Point(val),
                          message: '点位WKT坐标格式错误'
                        }
                      ]"
                      />
                    </template>
                    <template v-if="config.featureType === 'LineString'">
                      <div class="tips">
                        输入经纬度，样例：<br/>
                        LINESTRING(109.2 19.5,109.6 19.1,110.2 19.4)
                      </div>
                      <CusFormColumn
                        ref="ref_wktTextarea"
                        class="wkt-textarea"
                        :span="24"
                        required
                        type="textarea"
                        v-model:param="config.wkt"
                        default-error-msg="请输入线坐标"
                        :rules="[
                        {
                          handle: (val) => $easyMap.validWkt.LineString(val),
                          message: '线段WKT坐标格式错误'
                        },
                      ]"
                      />
                    </template>
                    <template v-else-if="config.featureType === 'Polygon'">
                      <div class="tips">
                        输入经纬度(首尾坐标需要一致)，样例：<br/>
                        POLYGON((109.7 19.3,109.5 19.1,109.8 19.1,109.7 19.3))
                      </div>
                      <CusFormColumn
                        ref="ref_wktTextarea"
                        class="wkt-textarea"
                        :span="24"
                        required
                        type="textarea"
                        v-model:param="config.wkt"
                        :disabled="['Rectangle', 'Circle'].includes(polygonType)"
                        default-error-msg="请输入区域坐标"
                        :rules="[
                        {
                          handle: (val) => $easyMap.validWkt.Polygon(val),
                          message: '区域WKT坐标格式错误'
                        },
                        {
                          handle: (val) => $easyMap.validWkt.PolygonKinks(val),
                          message: '区域坐标不可自相交'
                        },
                      ]"
                      />
                    </template>
                  </div>
                </template>
              </template>
              <template v-else-if="typeTab === 'hcq'">
                <template v-if="hcqType === 'auto'">
                  <div class="hcq-radius">
                    <el-slider v-model="config.hcqAutoRadius" :step="0.001" :max="1" :min="0.001" @input="initDrawHcq" show-input/>km
                  </div>
                </template>
                <template v-else>
                  <template v-if="operationTab === 'draw'">
                    <div class="draw-tips">
                      * 可在地图上，通过以下操作调整图形：<br/>
                      1、拖动调整坐标点位置；<br/>
                      2、删除坐标点请切换到坐标页签操作；<br/>
                      3、点击边线即可增加坐标点；<br/>
                    </div>
                  </template>
                  <template v-else-if="operationTab === 'position'">
                    <PositionList v-model:wkt="config.hcqWkt" @toPosition="onToPosition"/>
                  </template>
                  <template v-else-if="operationTab === 'text'">
                    <div class="textarea-block">
                      <div class="tips">
                        输入经纬度(首尾坐标需要一致)，样例：<br/>
                        POLYGON((109.7 19.3,109.5 19.1,109.8 19.1,109.7 19.3))
                      </div>
                      <CusFormColumn
                        ref="ref_wktTextarea"
                        class="wkt-textarea"
                        :span="24"
                        required
                        type="textarea"
                        v-model:param="config.hcqWkt"
                        default-error-msg="请输入区域坐标"
                        :rules="[
                        {
                          handle: (val) => $easyMap.validWkt.Polygon(val),
                          message: '区域WKT坐标格式错误'
                        },
                        {
                          handle: (val) => $easyMap.validWkt.PolygonKinks(val),
                          message: '区域坐标不可自相交'
                        },
                        {
                          handle: (val) => $easyMap.validWkt.PolygonBooleanContains(val, config.wkt),
                          message: '缓冲区需全包含区域'
                        },
                      ]"
                      />
                    </div>
                  </template>
                </template>
              </template>
              <template v-else-if="typeTab === 'small'">
                <template v-if="operationTab === 'draw'">
                  <div class="draw-tips">
                    * 可在地图上，通过以下操作调整图形：<br/>
                    1、拖动坐标点位置可调整点的位置；<br/>
                  </div>
                </template>
                <template v-else-if="operationTab === 'position'">
                  <PositionList v-model:wkt="config.smallWkt" :isView="true" @toPosition="onToPosition"/>
                </template>
                <template v-else-if="operationTab === 'text'">
                  <div class="textarea-block">
                    <div class="tips">
                      输入经纬度，样例：<br/>
                      POINT(109.1 20.5)
                    </div>
                    <CusFormColumn
                      ref="ref_wktTextarea"
                      class="wkt-textarea"
                      :span="24"
                      required
                      type="textarea"
                      v-model:param="config.smallWkt"
                      default-error-msg="请输入点位坐标"
                      :rules="[
                      {
                        handle: (val) => $easyMap.validWkt.Point(val),
                        message: '点位WKT坐标格式错误'
                      },
                      {
                        handle: (val) => $easyMap.validWkt.PointInPolygon(val, config.wkt),
                        message: '缩略点需在区域内'
                      },
                    ]"
                    />
                  </div>
                </template>
              </template>
            </div>
          </div>
          <div v-show="tab === '2'" class="content-info">
            <Component
              :is="transfer.form.com"
              :transfer="transfer.form.detail"
              v-model:loading="loading"
              :isView="config.isView"
              :map="map"
              ref="ref_formCom"
              @pass="(e) => {     onClose(); $emit('formDrawClose', {source: 'formDraw', ...e, value: true})}"
              @drawDefault="onDrawDefault"
              @drawHcq="onDrawHcq"
              @drawSmall="onDrawSmall"
              @wkt="val => config.wkt = val"
              @hcqWkt="val => config.hcqWkt = val"
              @smallWkt="val => config.smallWkt = val"
            />
          </div>
        </div>
        <div class="bottom-buttons">
          <div class="submit __hover" @click="onSubmit">保存</div>
          <div class="cancel __hover" @click="onClose(), $emit('formDrawClose', {source: 'formDraw', value: false})">取消</div>
        </div>
      </template>
    </div>
  </ToolsDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  ref,
  toRefs,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  computed, nextTick
} from "vue";
import ToolsDialog from '../tools-dialog.vue'
import * as Handle from './handle'
import PositionList from "./position-list.vue";
import * as layer from "ol/layer";
import * as source from "ol/source";
import * as format from "ol/format";
import * as style from "ol/style";
import * as turf from "@turf/turf";
import {ElMessage, ElMessageBox} from "element-plus";

export default defineComponent({
  name: "",
  components: {
    ToolsDialog,
    PositionList
  },
  props: {
    transfer: {},
    show: {required: true},
    map: {required: true},
    mapFuncToLocation: {required: true},
    mapHeight: {},
    mapWidth: {},
    layout: {},
  },
  setup(props, { emit }) {
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
    const state = reactive({
      toolsLayout: {
        width: 478,
        left: 10,
        top: 10
      },
      tab: '1',
      typeTab: 'default',
      operationTab: 'draw',
      hcqType: 'auto',
      config: {},
      loading: false,
      staticLayer: <any>null,
      refreshStyleFunc: <any>null,
      isFeatureValid: false,
      staticSmallLayer: <any>null,
      staticHcqLayer: <any>null,
      circleReady: false,
      circleWkt: '',
      isInit: false,
      isWaitWkt: false,
      polygonType: ''
    });
    const ref_formCom = ref()
    const ref_drawForm = ref()
    const ref_wktTextarea = ref()
    watch(() => props.show, (n: any) => {
      if (n) {
        if (!state.config.isView) {
          state.isWaitWkt = !props.transfer.config.wkt
        }
        state.config = props.transfer?.config
        console.log(JSON.parse(JSON.stringify(state.config)))
        state.polygonType = state.config.featureType === 'Polygon' ? 'Polygon' : ''
        initHandle()
      }
    })
    const initHandle = () => {
      state.tab = '1'
      state.typeTab = 'default'
      if (that.$util.isValue(state.config.hcqAuto)) {
        state.hcqType = state.config.hcqAuto ? 'auto' : 'cus'
      } else {
        state.hcqType = 'auto'
      }
      state.operationTab = 'draw'
      if (!state.config.hcqAutoRadius) {
        state.config.hcqAutoRadius = 0.05
      }
      if (!state.config.isView) {
        initDrawDefault()
      } else {
        initStaticLayer(true)
        if (state.config.isHcq) {
          initStaticHcqLayer(false)
        }
        if (state.config.isSmall) {
          initStaticSmallLayer(false)
        }
      }
      setTimeout(() => {
        state.isInit = true
      }, 100)
    }
    const onDrawDefault = () => {
      state.tab = '1'
      state.typeTab = 'default'
      state.operationTab = 'draw'
    }
    const onDrawHcq = () => {
      state.tab = '1'
      state.typeTab = 'hcq'
      state.operationTab = 'draw'
    }
    const onDrawSmall = () => {
      state.tab = '1'
      state.typeTab = 'small'
      state.operationTab = 'draw'
    }
    const drawDefaultSuccess = () => {
      const obj = {
        featureType: state.config.featureType,
        polygonType: state.polygonType,
        wkt: state.config.wkt,
      }
      switch (obj.featureType) {
        case 'Point': {} break
        case 'LineString': {
          obj.lineColor = state.config.lineColor
          obj.lineWidth = state.config.lineWidth
          obj.lineType = state.config.lineType
        } break
        default: {
          obj.polyColor = state.config.polyColor
          obj.polyBorderColor = state.config.polyBorderColor
          obj.polyBorderWidth = state.config.polyBorderWidth
          obj.polyBorderType = state.config.polyBorderType
        }
      }
      ref_formCom.value?.setDefault(obj)
    }
    const drawSmallSuccess = () => {
      if (state.config.isSmall) {
        const obj = {
          smallWkt: state.config.smallWkt
        }
        ref_formCom.value?.setSmall(obj)
      }
    }
    const drawHcqSuccess = () => {
      if (state.config.isHcq) {
        const obj = {
          hcqWkt: state.config.hcqWkt,
          hcqAuto: state.config.hcqAuto,
          hcqAutoRadius: state.config.hcqAutoRadius,
          hcqPolyColor: state.config.hcqPolyColor,
          hcqPolyBorderColor: state.config.hcqPolyBorderColor
        }
        ref_formCom.value?.setHcq(obj)
      }
    }
    const initDrawDefault = () => {
      state.staticLayer?.getSource()?.clear()
      Handle.formDrawExit(props.map)
      if (!(state.config.featureType === 'Polygon' && ['Rectangle', 'Circle'].includes(state.polygonType))) {
        Handle.formDrawHandle({
          map: props.map,
          config: state.config,
          emitWkt: (wkt) => {
            state.isWaitWkt = false
            state.config.wkt = wkt
            let position = []
            switch (state.config.featureType) {
              case 'Point': {
                position = [that.$easyMap.formatPosition.wptTcpt(state.config.wkt)]
              } break
              case 'LineString': {
                position = that.$easyMap.formatPosition.wlTcl(state.config.wkt)
              } break
              case 'Polygon': {
                position = that.$easyMap.formatPosition.wpnTcpn(state.config.wkt)[0]
              } break
            }
            that.$easyMap.getShapeView(props.map, position)
          }
        }).then((func: any) => {
          state.refreshStyleFunc = () => {
            func()
            drawDefaultSuccess()
            if (state.config.featureType === 'Polygon') {
              let _s: any = [
                new style.Style({
                  stroke: new style.Stroke({
                    color: state.config.hcqPolyBorderColor,
                    width: 1,
                  }),
                  fill: new style.Fill({
                    color: state.config.hcqPolyColor,
                  }),
                })
              ]
              state.staticHcqLayer?.setStyle(_s)
            }
          }
          drawDefaultSuccess()
        })
      } else {
        if (state.config.wkt) {
          initStaticLayer(true)
        } else {
          if (state.config.featureType === 'Polygon' && state.polygonType === 'Rectangle') {
            reDrawRectangle()
          } else if (state.config.featureType === 'Polygon' && state.polygonType === 'Circle') {
            reDrawCircle()
          }
        }
      }
      if (state.config.featureType === 'Polygon') {
        initStaticHcqLayer(false)
        initStaticSmallLayer(false)
      }
    }
    const reDrawRectangle = () => {
      state.config.wkt = ''
      const conf = {
        ...state.config,
        featureType: 'Rectangle'
      }
      Handle.formDrawHandle({
        map: props.map,
        config: conf,
        emitWkt: (wkt) => {
          state.isWaitWkt = false
          state.config.wkt = wkt
          Handle.formDrawExit(props.map)
          drawDefaultSuccess()
          initStaticLayer(true)
        }
      }).then((func: any) => {
        state.refreshStyleFunc = () => {
          func()
          drawDefaultSuccess()
          let _s: any = [
            new style.Style({
              stroke: new style.Stroke({
                color: state.config.hcqPolyBorderColor,
                width: 1,
              }),
              fill: new style.Fill({
                color: state.config.hcqPolyColor,
              }),
            })
          ]
          state.staticHcqLayer?.setStyle(_s)
        }
        drawDefaultSuccess()
      })
    }
    const reDrawCircle = () => {
      state.circleReady = false
      state.config.wkt = ''
      const conf = {
        ...state.config,
        circleToPolygon: false,
        featureType: 'Circle'
      }
      Handle.formDrawHandle({
        map: props.map,
        config: conf,
        emitWkt: (wkt) => {
          state.circleReady = true
          state.circleWkt = wkt
        }
      }).then((func: any) => {
        state.refreshStyleFunc = () => {
          func()
          drawDefaultSuccess()
          let _s: any = [
            new style.Style({
              stroke: new style.Stroke({
                color: state.config.hcqPolyBorderColor,
                width: 1,
              }),
              fill: new style.Fill({
                color: state.config.hcqPolyColor,
              }),
            })
          ]
          state.staticHcqLayer?.setStyle(_s)
        }
        drawDefaultSuccess()
      })
    }
    const circleToPolygon = () => {
      state.config.wkt = state.circleWkt
      Handle.formDrawExit(props.map)
      drawDefaultSuccess()
      initStaticLayer(true)
      state.circleReady = false
    }
    const initDrawSmall = () => {
      if (state.config.isSmall) {
        state.staticSmallLayer?.getSource()?.clear()
        Handle.formDrawExit(props.map)
        Handle.formDrawHandle({
          map: props.map,
          config: {
            featureType: 'Point',
            wkt: state.config.smallWkt,
            pointIcon: state.config.smallIcon,
            pointScale: state.config.smallScale,
          },
          emitWkt: (wkt) => {
            state.config.smallWkt = wkt
          }
        }).then((func: any) => {
          drawSmallSuccess()
        })
        initStaticLayer(false)
        initStaticHcqLayer(false)
      }
    }
    const initDrawHcq = async () => {
      if (state.config.isHcq) {
        state.staticHcqLayer?.getSource().clear()
        if (state.hcqType === 'cus') {
          setTimeout(() => {
            state.staticHcqLayer?.getSource().clear()
          }, 1000)
          Handle.formDrawExit(props.map)
          Handle.formDrawHandle({
            map: props.map,
            config: {
              featureType: 'Polygon',
              wkt: state.config.hcqWkt,
              polyColor: state.config.hcqPolyColor,
              polyBorderColor: state.config.hcqPolyBorderColor,
            },
            emitWkt: (wkt) => {
              state.config.hcqWkt = wkt
            }
          }).then((func: any) => {
            state.refreshStyleFunc = () => {
              func()
              drawHcqSuccess()
            }
            drawHcqSuccess()
          })
        } else {
          drawHcqSuccess()
          Handle.formDrawExit(props.map)
          await setHcq()
          initStaticHcqLayer(true)
        }
        initStaticLayer(false)
        initStaticSmallLayer(false)
      }
    }
    const setHcq = () => {
      if (state.config.featureType === 'Polygon' && state.hcqType === 'auto' && state.config.isHcq) {
        const porCoordinates = that.$easyMap.formatPosition.wpnTcpn(state.config.wkt)
        let hcq = turf.buffer(turf.polygon(porCoordinates), state.config.hcqAutoRadius, {units: 'kilometers'})
        if (!hcq) {
          ElMessageBox.confirm('当前距离无法生成缓冲区，是否设置为极限值？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let _val = state.config.hcqAutoRadius
            do {
              hcq = turf.buffer(turf.polygon(porCoordinates), _val += 0.01, {units: 'kilometers'})
            } while (!hcq)
            state.config.hcqAutoRadius = Number(_val.toFixed(2))
            setHcq()
          }).catch(() => {
            return
          })
        }
        state.config.hcqWkt = that.$easyMap.formatPosition.cpnTwpn(hcq.geometry.coordinates)
      }
    }
    const setSmall = () => {
      if (state.config.featureType === 'Polygon' && state.config.isSmall && state.isInit) {
        try {
          const feat: any = new format.WKT().readFeature(state.config.wkt)
          state.config.smallWkt = that.$easyMap.formatPosition.cptTwpt(feat.getGeometry().getInteriorPoint().getCoordinates())
        } catch (e) {
          state.config.smallWkt = ''
        }
      }
    }
    const onToPosition = (coor) => {
      props.mapFuncToLocation({position: coor})
    }
    const onClose = () => {
      Handle.formDrawExit(props.map)
      if (state.staticLayer) {
        props.map.removeLayer(state.staticLayer)
        state.staticLayer = null
      }
      if (state.staticHcqLayer) {
        props.map.removeLayer(state.staticHcqLayer)
        state.staticHcqLayer = null
      }
      if (state.staticSmallLayer) {
        props.map.removeLayer(state.staticSmallLayer)
        state.staticSmallLayer = null
      }
      emit('update:show', false)
      state.isInit = false
    }
    const initStaticLayer = (auto = true) => {
      if (
        state.config.featureType === 'Point' && that.$easyMap.validWkt.Point(state.config.wkt) ||
        state.config.featureType === 'LineString' && that.$easyMap.validWkt.LineString(state.config.wkt) ||
        state.config.featureType === 'Polygon' && that.$easyMap.validWkt.Polygon(state.config.wkt)
      ) {
        let _s: any = []
        switch (state.config.featureType) {
          case 'Point': {
            _s.push(new style.Style({
              image: new style.Icon({
                src: state.config.pointIcon,
                scale: state.config.pointScale
              })
            }))
          } break
          case 'LineString': {
            _s.push(new style.Style({
              stroke: new style.Stroke({
                color: state.config.lineColor,
                width: state.config.lineWidth,
                lineDash: Handle.globalLineDash[Number(state.config.lineType)]
              }),
            }))
          } break
          default: {
            _s.push(new style.Style({
              stroke: new style.Stroke({
                color: state.config.polyBorderColor,
                width: state.config.polyBorderWidth,
                lineDash: Handle.globalLineDash[Number(state.config.polyBorderType)]
              }),
              fill: new style.Fill({
                color: state.config.polyColor,
              }),
            }))
          }
        }
        if (!state.staticLayer) {
          state.staticLayer = new layer.Vector({
            zIndex: 9997,
          })
          props.map.addLayer(state.staticLayer)
        }
        try {
          state.staticLayer?.setStyle(_s)
          const f: any = new format.WKT().readFeature(state.config.wkt)
          state.staticLayer?.setSource(new source.Vector({
            features: [f]
          }))
          if (auto) {
            switch (f.getGeometry().getType()) {
              case 'Point': {
                Handle.getShapeView(props.map, [f.getGeometry().getCoordinates()])
              } break
              case 'LineString': {
                Handle.getShapeView(props.map, f.getGeometry().getCoordinates())
              } break
              case 'Polygon': {
                Handle.getShapeView(props.map, f.getGeometry().getCoordinates()[0])
              } break
            }
          }
        } catch (e) {
          state.staticLayer?.getSource()?.clear()
        }
        if (state.config.featureType === 'Polygon' && state.hcqType === 'auto') {
          initStaticHcqLayer(false)
        }
      }
    }
    const initStaticSmallLayer = (auto = true) => {
      if (state.config.isSmall) {
        if (that.$easyMap.validWkt.Point(state.config.smallWkt)) {
          let _s: any = [
            new style.Style({
              image: new style.Icon({
                src: state.config.smallIcon,
                scale: state.config.smallScale
              })
            })
          ]
          if (!state.staticSmallLayer) {
            state.staticSmallLayer = new layer.Vector({
              zIndex: 10000,
            })
            props.map.addLayer(state.staticSmallLayer)
          }
          try {
            state.staticSmallLayer?.setStyle(_s)
            const f: any = new format.WKT().readFeature(state.config.smallWkt)
            state.staticSmallLayer?.setSource(new source.Vector({
              features: [f]
            }))
            if (auto) {
              Handle.getShapeView(props.map, [f.getGeometry().getCoordinates()])
            }
          } catch (e) {
            state.staticSmallLayer?.getSource()?.clear()
          }
        }
      }
    }
    const initStaticHcqLayer = (auto = true) => {
      if (state.config.isHcq) {
        if (that.$easyMap.validWkt.Polygon(state.config.hcqWkt)) {
          let _s: any = [
            new style.Style({
              stroke: new style.Stroke({
                color: state.config.hcqPolyBorderColor,
                width: 1,
              }),
              fill: new style.Fill({
                color: state.config.hcqPolyColor,
              }),
            })
          ]
          if (!state.staticHcqLayer) {
            state.staticHcqLayer = new layer.Vector({
              zIndex: 9996,
            })
            props.map.addLayer(state.staticHcqLayer)
          }
          try {
            state.staticHcqLayer?.setStyle(_s)
            const f: any = new format.WKT().readFeature(state.config.hcqWkt)
            state.staticHcqLayer?.setSource(new source.Vector({
              features: [f]
            }))
            if (auto) {
              Handle.getShapeView(props.map, f.getGeometry().getCoordinates()[0])
            }
          } catch (e) {
            state.staticHcqLayer?.getSource()?.clear()
          }
        }
      }
    }
    const onConfigChange = () => {
      nextTick(() => {
        if (state.operationTab !== 'draw') {
          initStaticLayer(false)
        } else {
          state.refreshStyleFunc?.()
          if (state.typeTab === 'default') {
            initStaticHcqLayer(false)
            if (state.config.featureType === 'Polygon' && ['Rectangle', 'Circle'].includes(state.polygonType)) {
              initStaticLayer(false)
            }
          } else if (state.typeTab === 'hcq') {
            initStaticLayer(false)
          } else if (state.typeTab === 'small') {
            initStaticLayer(false)
            initStaticHcqLayer(false)
          }
        }
      })
    }
    watch(() => state.operationTab,  (n, o) => {
      if (n === 'draw') {
        if (state.typeTab === 'default') {
          initDrawDefault()
        } else if (state.typeTab === 'hcq') {
          initDrawHcq()
        } else if (state.typeTab === 'small') {
          initDrawSmall()
        }
      }
      if (o === 'draw') {
        Handle.formDrawExit(props.map)
        initStaticLayer(false)
        if (state.config.featureType === 'Polygon') {
          initStaticHcqLayer(false)
          initStaticSmallLayer(false)
        }
      }
      if (n === 'text') {
        nextTick(() => {
          ref_wktTextarea.value?.handleValidate()
        })
      }
    })
    watch(() => state.tab, (n) => {
      if (n === '1') {
        if (!state.config.wkt && state.typeTab !== 'default') {
          state.typeTab = 'default'
          state.operationTab = 'draw'
        }
        if (state.operationTab === 'draw') {
          if (state.typeTab === 'default') {
            initDrawDefault()
          } else if (state.typeTab === 'hcq') {
            initDrawHcq()
          } else if (state.typeTab === 'small') {
            initDrawSmall()
          }
        }
      } else {
        Handle.formDrawExit(props.map)
        // if (state.isFeatureValid) {
        initStaticLayer()
        if (state.config.featureType === 'Polygon') {
          initStaticHcqLayer(false)
          initStaticSmallLayer(false)
        }
        // }
      }
    })
    watch(() => state.config.wkt,  async (n, o) => {
      if (n && state.isWaitWkt) {
        initDrawDefault()
      } else {
        try {
          const f: any = new format.WKT().readFeature(n)
          if (f.getGeometry().getType() === 'Polygon' && that.$easyMap.validWkt.Polygon(n)) {
            state.isFeatureValid = true
          } else if (f.getGeometry().getType() === 'LineString' && that.$easyMap.validWkt.LineString(n)) {
            state.isFeatureValid = true
          } else if (f.getGeometry().getType() === 'Point' && that.$easyMap.validWkt.Point(n)) {
            state.isFeatureValid = true
          } else {
            state.isFeatureValid = false
          }
          await setHcq()
          initStaticHcqLayer(false)
          await setSmall()
          initStaticSmallLayer(false)
        } catch (e) {
          state.staticLayer?.getSource()?.clear()
          state.staticHcqLayer?.getSource()?.clear()
          state.staticSmallLayer?.getSource()?.clear()
          state.isFeatureValid = false
          if (state.operationTab === 'position') {
            state.operationTab = 'draw'
          }
        }
        if (state.operationTab !== 'draw' || state.tab === '2') {
          initStaticLayer(false)
        }
        drawDefaultSuccess()
      }
    })
    watch(() => state.config.smallWkt,  (n, o) => {
      try {
        const f = new format.WKT().readFeature(n)
        if (that.$easyMap.validWkt.Point(n)) {
          state.isFeatureValid = true
        } else {
          state.isFeatureValid = false
        }
      } catch (e) {
        state.staticSmallLayer?.getSource()?.clear()
        state.isFeatureValid = false
        if (state.operationTab === 'position') {
          state.operationTab = 'draw'
        }
      }
      if (state.operationTab !== 'draw' || state.tab === '2' || !o) {
        initStaticSmallLayer(false)
      }
      drawSmallSuccess()
    })
    watch(() => state.config.hcqWkt,  (n, o) => {
      try {
        const f = new format.WKT().readFeature(n)
        if (that.$easyMap.validWkt.Polygon(n)) {
          state.isFeatureValid = true
        } else {
          state.isFeatureValid = false
        }
      } catch (e) {
        state.staticHcqLayer?.getSource()?.clear()
        state.isFeatureValid = false
        if (state.operationTab === 'position') {
          state.operationTab = 'draw'
        }
      }
      if (state.operationTab !== 'draw' || state.tab === '2' || !o) {
        initStaticHcqLayer(false)
      }
      drawHcqSuccess()
    })
    watch(() => state.typeTab, (n) => {
      switch (n) {
        case 'default': {
          initDrawDefault()
        } break
        case 'hcq': {
          initDrawHcq()
        } break
        case 'small': {
          initDrawSmall()
        } break
      }
    })
    watch(() => state.config.polyColor, (n) => {
      if (n && state.isInit) {
        state.config.hcqPolyColor = that.$util.resetRgbaOpacity(state.config.polyColor, 0.3)
      }
    })
    watch(() => state.config.polyBorderColor, (n) => {
      if (n && state.isInit) {
        state.config.hcqPolyBorderColor = that.$util.resetRgbaOpacity(state.config.polyBorderColor, 0.3)
      }
    })
    watch(() => state.hcqType, (n) => {
      state.config.hcqAuto = n === 'auto'
      if (state.isInit) {
        initDrawHcq()
      }
    })
    const onSubmit = () => {
      ref_drawForm.value.submit().then(() => {
        const wktMsg = ref_wktTextarea.value?.handleValidate()
        if (wktMsg) {
          ElMessage({
            message: wktMsg,
            grouping: true,
            type: 'warning',
          })
          state.tab = '1'
        } else {
          ref_formCom.value?.onSubmit()
          state.tab = '2'
        }
      }).catch((e: any) => {
        ElMessage({
          message: e[0].message,
          grouping: true,
          type: 'warning',
        })
        state.tab = '1'
      })
    }
    watch(() => props.layout, (n: any) => {
      state.toolsLayout = {
        width: state.toolsLayout.width,
        top: n.top,
        left: n.left,
      }
    })
    const onEdit = () => {
      state.config.isView = false
      initHandle()
    }
    const reDrawPolygonType = (type) => {
      if (state.polygonType !== type) {
        ElMessageBox.confirm('切换形状后将清空坐标并重新标绘，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          state.isInit = false
          state.polygonType = type
          state.config.wkt = ''
          state.config.hcqWkt = ''
          state.config.smallWkt = ''
          state.config.hcqAuto = true
          state.config.hcqAutoRadius = 0
          initHandle()
        }).catch(() => {
          return
        })
      }
    }
    return {
      ...toRefs(state),
      ref_formCom,
      ref_drawForm,
      ref_wktTextarea,
      onDrawDefault,
      onDrawHcq,
      onDrawSmall,
      drawDefaultSuccess,
      drawSmallSuccess,
      drawHcqSuccess,
      onToPosition,
      onClose,
      initStaticLayer,
      onConfigChange,
      initDrawHcq,
      reDrawRectangle,
      reDrawCircle,
      circleToPolygon,
      onSubmit,
      onEdit,
      reDrawPolygonType,
    }
  },
});
</script>
<style scoped lang="scss">
$mapHeight: var(--easy-map-height);
.base-draw-com {
  height: calc($mapHeight - 40px - 20px);
  border-bottom: 1px solid #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  .base-draw-com-tabs {
    display: flex;
    height: 30px;
    margin: 10px;
    >div {
      flex: 1;
      background-color: rgba(0,98,233,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      &.active {
        background-color: #0062E9;
      }
      &:first-child {
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
      }
      &:last-child {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
      }
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    :deep(.__title) {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #68C3FF;
      display: flex;
      align-items: center;
      &:before {
        content: '';
        width: 2px;
        height: 16px;
        background-color: #68C3FF;
        margin-right: 7px;
      }
    }
    :deep(.__draw-handle) {
      display: flex;
      gap: 4px;
      margin-left: 100px;
      margin-bottom: 8px;
      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 18px;
        background-color: rgba(0,98,233,0.2);
        border-radius: 2px;
        border: 1px solid #0062E9;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #FFFFFF;
        &.__draw {
          background-color: #0062E9;
        }
      }
    }
    :deep(.cus-form-column) {
      &.__textarea-content {
        .el-form-item {
          margin-bottom: 4px !important;
        }
      }
      .el-form-item {
        margin-bottom: 8px !important;
        &.is-error {
          margin-bottom: 18px !important;
        }
        .el-checkbox{
          color: white;
        }
        .el-checkbox__inner{
          background-color: transparent;
        }
        .el-tag.el-tag--info {
          background: transparent;
          color: white;
          border-color: #1A56D4;
        }
        .el-select__input{
          color: white;
        }
        &.link_input, &.link_select, &.link_date, &.link_date_daterange, &.link_datetime, &.link_datetimerange, &.link_input-number {
          height: 28px;
          .el-form-item__label {
            height: 28px;
            &:before {
              margin-right: 0;
            }
          }
          .el-form-item__content {
            .el-select__wrapper, .el-input__wrapper {
              height: 28px;
              min-height: 28px;
            }
          }
        }
        &.link_input {
          .__draw-handle {
            margin: 0 0 0 4px !important;
          }
        }
        .el-form-item__label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          padding: 0;
          margin-right: 10px;
        }
        .el-form-item__content {
          .feature-type {
            display: flex;
            align-items: center;
            gap: 16px;
            >div {
              width: 28px;
              height: 28px;
              display: flex;
              align-items: center;
              justify-content: center;
              &.active {
                background-color: #0062E9;
              }
            }
          }
          .unit {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          .el-textarea__inner, .el-input__wrapper {
            box-shadow: unset;
            border: 1px solid #1A56D4;
            background-color: transparent;
            color: #FFFFFF;
            word-break: break-all;
            .el-input__inner {
              color: #FFFFFF;
              line-height: 1;
              height: 28px;
            }
          }
          .el-select__wrapper {
            box-shadow: unset;
            border: 1px solid #1A56D4;
            background-color: transparent;
            color: #FFFFFF;
            .el-select__selected-item {
              &:not(&.is-transparent) {
                color: #FFFFFF;
              }
            }
            .el-select__placeholder{
              &:not(.is-transparent) {
                color: white;
              }
            }
          }
          .el-date-editor {
            .el-range-input {
              color: #FFFFFF;
              flex: 1;
            }
            .el-range-separator {
              width: 20px;
              flex: unset;
            }
          }
          .el-color-picker {
            display: flex;
            align-items: center;
            justify-content: center;
            .el-color-picker__trigger {
              width: 14px;
              height: 14px;
              padding: 0;
              border: none;
              .el-color-picker__color {
                border-color: #EAEBEF;
                .el-icon {
                  display: none;
                }
              }
            }
          }
          .el-input-number {
            .el-input-number__increase, .el-input-number__decrease {
              background-color: rgba(255, 255, 255, 0.1);
              border: none;
              .el-icon {
                color: rgba(255, 255, 255, 0.6);
              }
            }
            .el-input__inner {
              height: 24px;
            }
          }
          .el-radio-group {
            gap: 10px;
            .el-radio {
              height: 28px;
              margin-right: 0;
              .el-radio__label {
                color: #FFFFFF;
                padding-left: 2px;
              }
              &.is-checked {
                .el-radio__inner {
                  background-color: #409eff;
                  border-color: #409eff;
                  &:after {
                    background-color: #f5f7fa;
                  }
                }
              }
            }
          }
          .is-disabled {
            .el-select__selected-item:not(.is-transparent),
            .el-input__inner,
            .el-radio__label,
            .el-checkbox__label,
            .el-range-input, .el-range-separator,
            .el-textarea__inner
            {
              color: #FFFFFF;
              -webkit-text-fill-color: #FFFFFF;
            }
          }
        }
        .el-textarea .el-input__count{
          color: #FFFFFF;
          background-color: #102b94;
        }
      }
    }
    .content-draw {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .position-handle {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .ph-tabs {
          display: flex;
          border-radius: 4px;
          >div {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px 8px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
            border-top: 1px solid #0062E9;
            border-bottom: 1px solid #0062E9;
            &:first-child {
              border-left: 1px solid #0062E9;
              border-radius: 4px 0 0 4px;
            }
            &:last-child {
              border-right: 1px solid #0062E9;
              border-radius: 0 4px 4px 0;
            }
            &.active {
              background-color: #0062E9;
            }
          }
        }
        .hcq-type {
          margin-top: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
          >div {
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            :deep(.__check) {
              width: 14px;
              height: 14px;
              &:after {
                margin-left: 0;
              }
            }
          }
        }
        .ph-operation-tabs {
          margin-top: 10px;
          display: flex;
          gap: 16px;
          >div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
            &:after {
              margin-top: 6px;
              content: '';
              width: 28px;
              height: 3px;
              border-radius: 2px;
            }
            &.active {
              color: #1CFEFF;
              &:after {
                background-color: #1CFEFF;
              }
            }
          }
        }
        .textarea-block {
          flex: 1;
          display: flex;
          flex-direction: column;
          .tips {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: rgba(255,255,255,0.6);
            padding-left: 34px;
            position: relative;
            &:before {
              content: '';
              background-image: url("../../images/tips.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 16px;
              height: 16px;
              position: absolute;
              top: 2px;
              left: 10px;
            }
          }
          :deep(.wkt-textarea) {
            flex: 1;
            .el-form-item {
              height: 100%;
              .el-form-item__content {
                height: calc(100% - 18px);
                .el-textarea {
                  height: 100%;
                  .el-textarea__inner {
                    height: 100%;
                  }
                }
              }
              &.is-error {
                .el-textarea__inner::placeholder {
                  color: #f56c6c;
                }
              }
            }
          }
        }
        .hcq-radius {
          margin-top: 28px;
          display: flex;
          align-items: center;
          color: #FFFFFF;
          font-size: 14px;
          :deep(.el-slider) {
            padding-left: 4px;
            height: 16px;
            .el-slider__runway {
              margin-right: 16px;
              height: 2px;
              .el-slider__bar {
                height: 100%;
                background-color: #2BFAFF;
              }
              .el-slider__button-wrapper {
                top: -2px;
                width: 6px;
                height: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                .el-slider__button {
                  width: 100%;
                  height: 100%;
                  border: none;
                  background-color: #2BFAFF;
                  box-shadow: 0px 0px 4px 2px #2BFAFF;
                }
              }
            }
            .el-input-number {
              width: 80px;
              height: 100%;
              display: flex;
              .el-input-number__increase, .el-input-number__decrease {
                width: 16px;
                background-color: transparent;
                border: none;
                &:hover {
                  .el-icon {
                    color: #1CFEFF;
                  }
                }
                .el-icon {
                  color: rgba(255, 255, 255, 0.6);
                  font-size: 12px;
                }
              }
              .el-input {
                position: unset;
                width: calc(100% - 16px * 2);
                margin-left: 16px;
                .el-input__wrapper {
                  padding: 0;
                  box-shadow: unset;
                  border: 1px solid rgba(255,255,255,0.6);
                  border-radius: 2px;
                  background-color: transparent;
                  word-break: break-all;
                  .el-input__inner {
                    height: 100%;
                    color: #FFFFFF;
                    font-size: 12px;
                  }
                }
              }
            }
          }
        }
        .draw-tips {
          margin-top: 10px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 20px;
        }
        .redraw {
          margin-top: 16px;
          display: flex;
          gap: 10px;
          >div {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            background-color: #0062E9;
            border-radius: 4px;
            padding: 0 10px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
          }
        }
      }
    }
    :deep(.cus-tab){
      border-bottom: unset;
      &.cus-tab-type1{
        .cus-tab-item.active{
          color: #1CFEFF;
          &::after{
            background-color: #1CFEFF;
          }
        }
      }
    }

  }
  .bottom-buttons {
    width: 100%;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    >div {
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    .submit {
      padding: 0 26px;
      height: 32px;
      background: linear-gradient(0deg, #1152C6, #4B8CFF);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
    .cancel {
      padding: 0 26px;
      height: 32px;
      background-color: transparent;
      border: 1px solid #1a56d4;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

}
</style>