1. 新增绘图模式的切换 2. 新增行政区划的切换展示

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

 src/components/search/OptionTime.vue

@@ -1,5 +1,5 @@
<template>
  <el-form-item label="时间">
  <el-form-item label="时间" prop="timeArray">
    <el-date-picker
      :model-value="modelValue"
      @update:model-value="handleChange"
@@ -7,20 +7,30 @@
      start-placeholder="选择开始时间"
      end-placeholder="选择结束时间"
      size="small"
      :disabled-date="diableData"
    />
  </el-form-item>
</template>

<script>
import moment from 'moment';
import { ElMessage } from 'element-plus';

export default {
  props: {
    // 日期值
    modelValue: {
      type: Array
    },
    // 控件类型
    type: {
      type: String,
      default: 'datetimerange'
    }
    },
    // 允许开始时间
    startDate: Date,
    // 允许结束时间
    endDate: Date
  },
  emits: ['update:modelValue'],
  data() {
@@ -28,7 +38,40 @@
  },
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
      // 时间不能超过设定的开始结束时间
      let outRange = false;
      if (this.startDate) {
        outRange =
          outRange ||
          moment(value[0]).isBefore(this.startDate) ||
          moment(value[1]).isBefore(this.startDate);
      }
      if (this.endDate) {
        outRange =
          outRange ||
          moment(value[0]).isAfter(this.endDate) ||
          moment(value[1]).isAfter(this.endDate);
      }
      if (outRange) {
        ElMessage({
          message: '所选时间不能超过走航任务时间范围',
          type: 'warning'
        });
      } else {
        this.$emit('update:modelValue', value);
      }
    },
    diableData(date) {
      const time = moment(date);
      let result1 = false;
      let result2 = false;
      if (this.startDate) {
        result1 = time.isBefore(this.startDate);
      }
      if (this.endDate) {
        result2 = time.isAfter(this.endDate);
      }
      return result1 || result2;
    }
  },
  mounted() {