MOM-UI/src/components/Configure/networkRequest/EquipmentRequest.vue

<template>
  <div>
    <el-form-item label="设备">
      <el-select v-model="form.deviceId" placeholder="请选择" @change="setDeviceId">
        <el-option
            v-for="item in deviceList"
            :key="item.deviceId"
            :label="item.deviceName"
            :value="item.deviceId">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="deviceModeId" v-show="false">
      <el-input
          v-model="form.deviceModeId">
      </el-input>
    </el-form-item>
    <el-form-item label="设备属性">
      <el-select v-model="form.functionIdentifier" placeholder="请选择">
        <el-option
            v-for="item in deviceFunList"
            :key="item.functionIdentifier"
            :label="item.functionName"
            :value="item.functionIdentifier">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="数据间隔">
      <el-select v-model="form.interval" placeholder="请选择" @change="changeInterval">
        <el-option
            v-for="item in intervalOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="时间周期">
      <el-date-picker
          @change="timeChange"
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
  </div>
</template>
<script>


import {getDeviceFunctions, getDeviceList} from "@/api/configure/configuration/equipment";

export default {
  props: ['form'],
  data() {
    return {
      time: [],
      deviceList: [],
      deviceFunList: [],
      intervalOption: [
        {
          label: '时',
          value: '1',
          default: 1
        },
        {
          label: '日',
          value: '2',
          default: 24
        },
        {
          label: '周',
          value: '3',
          default: 7
        },
        {
          label: '月',
          value: '4',
          default: 30
        },
        {
          label: '年',
          value: '5',
          default: 12
        },
      ],
    }
  },
  mounted() {
    getDeviceList().then(e => {
      this.deviceList = e.rows
    })
  },
  methods: {
    setDeviceId(e) {
      let modelId = this.deviceList.find(v => v.deviceId === e).deviceModeId
      this.$set(this.form, 'deviceModeId', modelId)
      console.log(modelId)
      getDeviceFunctions(modelId).then(v => {
        this.deviceFunList = v.data
      })
    },
    timeChange() {
      this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
      this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
    },
    changeInterval(e) {
      let data = this.intervalOption.find(v => v.value === e)
      this.$set(this.form, 'intervalType', data.default)
      if (e === '1') {
        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
      }
      if (e === '2') {
        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24)), this.$parseTime(new Date())]
      }
      if (e === '3') {
        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 7)), this.$parseTime(new Date())]
      }
      if (e === '4') {
        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 30)), this.$parseTime(new Date())]
      }
      if (e === '5') {
        this.time = [this.$parseTime(new Date().getTime() - (1000 * 60 * 60 * 24 * 365)), this.$parseTime(new Date())]
      }
      this.$set(this.form, 'startTime', new Date(this.time[0]).getTime())
      this.$set(this.form, 'endTime', new Date(this.time[1]).getTime())
    }
  }
}
</script>

<style>
</style>