tall4-pc/src/components/history/search-bar-data.vue

<template>
  <el-form ref="searchDeviceForm" :inline="true" :model="searchDevice">
    <el-form-item label="选择站点：">
      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
        <!-- <el-option label="全部" value></el-option> -->
        <el-option
          v-for="item in devices"
          :key="item.deviceId"
          :label="`${item.address}-${item.deviceId}`"
          :value="item.deviceId"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="起始时间：">
      <el-date-picker v-model="searchDevice.date[0]" format="YYYY-MM-DD HH:mm" placeholder="起始时间" type="datetime"></el-date-picker>
    </el-form-item>

    <el-form-item label="截止时间：">
      <el-date-picker v-model="searchDevice.date[1]" format="YYYY-MM-DD HH:mm" placeholder="截止时间" type="datetime"></el-date-picker>
    </el-form-item>
    <!--TODO:-->
    <el-form-item>
      <template v-if="showCommand">
        <el-button type="primary" @click="onSend('DATA')">查询历史数据</el-button>
        <el-button type="warning" @click="onSend('EVENT')">查询历史事件</el-button>
      </template>
      <el-button v-else :loading="loadingSearch" type="primary" @click="onSubmit">
        <i class="el-icon-search mr-2"></i>
        查询
      </el-button>
    </el-form-item>

    <el-form-item v-if="showExport">
      <el-button :loading="loadingExport" type="success" @click="onExport">
        <i class="el-icon-download mr-2"></i>
        导出
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { exportHistory } from 'apis';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['search']);
const searchDevice = reactive({
  deviceId: '',
  date: [dayjs().subtract(7, 'day').startOf('day'), new Date()],
});
const searchDeviceForm = ref(null); // form
const store = useStore();
const devices = computed(() => store.state.device.devices);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
const loadingExport = ref(false);

defineProps({
  showExport: Boolean,
  loadingSearch: Boolean,
  showCommand: Boolean,
});

// 监听currentDeviceId
watch(
  () => currentDeviceId.value,
  newValue => {
    if (newValue) {
      searchDevice.deviceId !== newValue && (searchDevice.deviceId = newValue);
    }
  },
  { immediate: true },
);

const change = e => {
  store.commit('device/setCurrentDeviceId', e);
};

// 生成查询参数
function generateParams() {
  const { deviceId, date } = searchDevice;
  let params = {
    deviceId,
    date,
  };

  if (date) {
    const start = +dayjs(date[0]).format('x');
    const end = +dayjs(date[1]).format('x');
    params = {
      deviceId,
      date: [start, end],
    };
  }

  return params;
}

// 提交
const onSubmit = () => {
  searchDeviceForm.value.validate(valid => {
    if (valid) {
      const params = generateParams();
      emit('search', params);
    }
  });
};

// 导出
async function onExport() {
  try {
    loadingExport.value = true;
    const params = generateParams();
    const resData = await exportHistory(params);
    loadingExport.value = false;
    resData && (window.location.href = resData);
  } catch (error) {
    loadingExport.value = false;
    throw new Error(error);
  }
}

/**
 * 发送查询指令
 * @param {string} dataType ('data', 'event')
 */
async function onSend(dataType) {
  try {
    console.log(dataType);
    // const { date, deviceId } = props.search.value;
    // const params = {
    //   deviceId,
    //   type: dataType,
    // };
    // // eslint-disable-next-line prefer-destructuring
    // date && date[0] && (params.startTime = date[0]);
    // // eslint-disable-next-line prefer-destructuring
    // date && date[1] && (params.endTime = date[1]);
    // await sendCommand(params);
    // ElMessage.success('指令发送成功');
  } catch (e) {
    ElMessage.error('指令发送失败');
  }
}
</script>