shuiwu/src/system/IOT/equipmentMag/detail/modules/historyHandle/index.vue

<template>
  <normalTable
    :isSelect="false"
    v-if="refresh"
    rowKey="w_deviceid"
    ref="list"
    size="small"
    :param="tablename == 'loginHistory' ? param2 : param"
    :columns="utils.TBLayout(tablename)"
  >
    <template #tb_cell="{ data }">
      <div v-if="data.column.dataIndex == 'issend'">
        {{ data.record.issend == 0 ? "未发送" : "已发送" }}
      </div>
      <div v-else-if="data.column.dataIndex == 'content'">
        <div
          v-if="param.content.type == '1'"
          style="white-space: normal; width: 800px"
        >
          {{ data.record.content }}
        </div>
        <div style="width: 200px; display: flex; flex-wrap: wrap" v-else>
          <a-tag v-for="item in data.record.content"
            >{{ item.title }} : {{ item.value }}</a-tag
          >
        </div>
      </div>
      <div v-else-if="data.column.dataIndex == 'isreceive'">
        {{ data.record.isreceive ? "已接收" : "未接收" }}
      </div>
      <div v-else-if="data.column.dataIndex == 'action'">
        {{ data.record.action == "off" ? "离线" : "在线" }}
      </div>
      <div v-else-if="data.column.dataIndex == 'invalid'">
        {{ data.record.isreceive ? "已失效" : "未失效" }}
      </div>
    </template>
    <template #operation>
      <div style="display: flex; margin-bottom: 16px">
        <div style="margin-right: 16px" v-if="tablename != 'loginHistory'">
          <span>时间：</span>
          <a-range-picker
            style="width: 400px"
            v-model:value="timer"
            value-format="YYYY-MM-DD"
            @change="dateRangeChange"
            allowClear
          />
        </div>
        <div style="margin-right: 16px">
          <span>类型：</span>
          <a-select
            ref="select"
            v-model:value="param.content.type"
            style="width: 120px"
            @change="change"
          >
            <a-select-option value="2" v-if="detailData.isfeedback"
              >操作队列</a-select-option
            >
            <a-select-option value="0">操作记录</a-select-option>
            <a-select-option value="1">上传记录</a-select-option>
            <a-select-option value="3">上线记录</a-select-option>
          </a-select>
        </div>
      </div>
    </template>
  </normalTable>
</template>

<script setup>
import customBtn from "@/components/customHandleBtn/index.vue";
import normalTable from "@/template/normalTable/index.vue";
import { useBaseStore } from "@/stores/modules/base";
import {
  ref,
  defineProps,
  defineEmits,
  onMounted,
  provide,
  computed,
  inject,
} from "vue";
import { useRouter } from "vue-router";
import Api from "@/api/api";
import utils from "@/utils/utils";

let base = useBaseStore();
let router = useRouter();
let emit = defineEmits([]);
let props = defineProps(["data"]);

let detailData = inject("detailData");

let param = ref({
  id: 20230701132202,
  content: {
    w_deviceid: router.currentRoute.value.query.id,
    type: detailData.isfeedback ? "2" : "0",
    pageNumber: 1,
    pageSize: 10,
    where: {
      enddate: "",
      begindate: "",
    },
  },
});

let param2 = ref({
  id: 20231123163602,
  content: {
    w_deviceid: router.currentRoute.value.query.id,
    pageNumber: 1,
    pageSize: 10,
  },
});

let timer = ref([]);
let list = ref();
let tablename = ref("detailHistoryTable");
let refresh = ref(true);

let dateRangeChange = (time) => {
  console.log(timer.value);
  if (timer.value) {
    param.value.content.where.enddate = timer.value[1];
    param.value.content.where.begindate = timer.value[0];
  } else {
    param.value.content.where.enddate = "";
    param.value.content.where.begindate = "";
  }
  list.value.listData();
};

let change = () => {
  if (param.value.content.type == "2") {
    tablename.value = "handleQueue";
  } else if (param.value.content.type == "0") {
    tablename.value = "detailHistoryTable";
  } else if (param.value.content.type == "1") {
    tablename.value = "uploadHistory";
  } else if (param.value.content.type == "3") {
    tablename.value = "loginHistory";
  }
  refresh.value = false;
  setTimeout(() => {
    refresh.value = true;
  });
};
</script>

<style scoped>
</style>