U 测试修改

he wei

2024-11-06 32250f9a1db456b706e52ffb2664d738a2650678

 src/views/alarm/alarmHis.vue

@@ -1,13 +1,292 @@
<script setup>
import { ref } from "vue";
<script setup name="alarmHis">
import { ref, reactive, onMounted } from "vue";
import { getHisAlarms, getAllAlmName } from "./api";
import { getAllDevs } from "@/views/user/api.js";

const headers = [
  {
    prop: "devId",
    label: "设备ID",
    width: "",
  },
  {
    prop: "devIdcode",
    label: "设备编号",
    width: "",
  },
  {
    prop: "devTypeStr",
    label: "设备类型",
    width: "",
  },
  {
    prop: "almName",
    label: "告警名称",
    width: "",
  },
  {
    prop: "almStarttime",
    label: "告警开始时间",
    width: "",
  },
  {
    prop: "confirmedTime",
    label: "告警确认时间",
    width: "",
  },
  {
    prop: "confirmedUname",
    label: "确认人",
    width: "",
  },
];
const pageCurr = ref(1);
const pageSize = ref(10);
const devId = ref(0);
const devType = ref(0);
const startTime = ref();
const endTime = ref();
const total = ref(0);
const datas = reactive({
  tableData: [],
  userInfo: {},
});

const devList = ref([]);
const testType = ref();
const almId = ref(0);
const alarmList = ref([]);

// 展示数据数量
function handleSizeChange(val) {
  pageSize.value = val;
  getList();
}
// 翻页
function handleCurrentChange(val) {
  pageCurr.value = val;
  getList();
}

function getList() {
  getHisAlarms({
    almId: almId.value ? almId.value : undefined,
    devId: devId.value ? devId.value : undefined,
    devType: devType.value ? devType.value : undefined,
    endTime: endTime.value ? endTime.value + " 23:59:59" : undefined,
    pageNum: pageCurr.value,
    pageSize: pageSize.value,
    startTime: startTime.value ? startTime.value + " 00:00:00" : undefined,
  })
    .then((res) => {
      let { code, data, data2 } = res.data;
      let _total = 0;
      let _list = [];
      if (code && data) {
        console.log(data);
        const { total: total0, list } = data2;
        _total = total0;
        _list = list.map((v) => {
          v.devIdcode = v.devInf.devIdcode;
          v.devTypeStr = ["", "充放电测试仪", "均衡测试仪"][v.devInf.devType];
          return v;
        });
      }
      datas.tableData = _list;
      total.value = _total;
    })
    .catch((err) => {
      console.log(err);
    });
}
function getAlarmNames() {
  getAllAlmName()
    .then((res) => {
      let { code, data, data2 } = res.data;
      let _list = [];
      if (code && data) {
        Object.keys(data2).forEach((v) => {
          _list.push({
            id: v,
            name: data2[v],
          });
        });
      }

      alarmList.value = _list;
    })
    .catch((err) => {
      console.log(err);
    });
}

function getDevs(params) {
  getAllDevs()
    .then((res) => {
      let { code, data, data2 } = res.data;
      let _list = [];
      if (code && data) {
        _list = data2.map((v) => ({
          label: `${v.devIdcode} (${v.devIp})`,
          key: v.devId,
        }));
      }
      devList.value = _list;
    })
    .catch((err) => {
      console.log(err);
    });
}
onMounted(() => {
  getAlarmNames();
  getDevs();
  getList();
});
</script>

<template>
历史告警
  <div class="page">
    <div class="filter">
      <div class="label">设备类型</div>
      <div class="content select-wrap">
        <el-select v-model="devType" class="yc-select" placeholder="Select">
          <el-option label="全部" :value="0" />
          <el-option label="充放电测试仪" :value="1" />
          <el-option label="均衡测试仪" :value="2" />
        </el-select>
      </div>
      <div class="label">设备名称</div>
      <div class="content select-wrap">
        <el-select v-model="devId" class="yc-select" placeholder="Select">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="dev in devList"
            :key="dev.key"
            :label="dev.label"
            :value="dev.key"
          />
        </el-select>
      </div>
      <div class="label">告警名称</div>
      <div class="content select-wrap">
        <el-select v-model="almId" class="yc-select" placeholder="Select">
          <el-option label="全部" :value="0" />
          <el-option
            v-for="item in alarmList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="label">告警开始时间</div>
      <div class="content">
        <el-date-picker
          class="yc-datepicker"
          v-model="startTime"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择"
        />
        至
        <el-date-picker
          class="yc-datepicker"
          value-format="YYYY-MM-DD"
          v-model="endTime"
          type="date"
          placeholder="请选择"
        />
      </div>
      <div class="btn-search" @click="getList">查询</div>
    </div>
    <div class="p-content">
      <!-- 用户列表 -->
      <div class="table-wrap">
        <el-table
          class="yc-table"
          stripe
          height="100%"
          size="small"
          :data="datas.tableData"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            v-for="header in headers"
            :key="header.prop"
            :prop="header.prop"
            :label="header.label"
            :min-width="header.width"
            align="center"
          ></el-table-column>
        </el-table>
      </div>
      <!-- 底部 -->
      <!-- 底部分页 -->
      <el-pagination
        class="yc-pagination"
        :current-page="pageCurr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
.page {
  height: 100%;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  .filter {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 7em 1fr 7em 1fr 7em 1fr 7em 2fr 5em;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    // place-items: end;
    .label {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      &::after {
        content: ":";
      }
    }
    .content {
      display: flex;
      align-items: center;
    }
    .btn-search {
      background: #0ff;
      border-radius: 6px;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }
}
</style>