iot-front-ui/src/components/work/overview/workOverview.vue

<template>
  <div>
    <a-select :default-value="1" style="width: 120px" @change="handleChange">
      <a-select-option
        v-for="(item, index) in options"
        :key="index"
        :value="item.value"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
    <a-select :default-value="7" style="width: 120px" @change="handleChange">
      <a-select-option
        v-for="(item, index) in floors"
        :key="index"
        :value="item.value"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
    <a-range-picker
      :disabled-date="disabledDate"
      :disabled-time="disabledRangeTime"
      :show-time="{
        hideDisabledOptions: true,
        defaultValue: [
          $moment('00:00:00', 'HH:mm:ss'),
          $moment('23:59:59', 'HH:mm:ss'),
        ],
      }"
      format="YYYY-MM-DD HH:mm:ss"
    />
  </div>
</template>
<script>

export default {
  data() {
    return {
      options: [
        {
          value: 1,
          name: "中讯1",
        },
        {
          value: 2,
          name: "中讯2",
        },
      ],
      floors: [
        {
          value: 7,
          name: "7层",
        },
        {
          value: 8,
          name: "8层",
        },
      ],
    };
  },
  mounted() {
     },
  methods: {
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < this.$moment().endOf("day");
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },
    disabledRangeTime(_, type) {
      if (type === "start") {
        return {
          disabledHours: () => this.range(0, 60).splice(24, 4),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(24, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56],
      };
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>
  

<style lang="less" scoped>
</style>