U 测试修改

he wei

2024-11-06 32250f9a1db456b706e52ffb2664d738a2650678

 src/views/alarm/alarmRt.vue

@@ -1,13 +1,341 @@
<script setup>
import { ref } from "vue";
<script setup name="alarmRt">
import useWebSocket from "@/hooks/useWebSocket";
import {
  ref,
  reactive,
  onMounted,
  watchEffect,
  computed,
  onActivated,
} from "vue";
import { getAllDevs } from "@/views/user/api.js";
import { getAllAlmName, confiirmAlm } from "./api.js";

const { sendData, message } = useWebSocket("dalmSocket");

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

const devId = ref(0);
const devList = ref([]);

function confirmAlarm(params) {
  confiirmAlm(params.num)
    .then((res) => {
      let { code, data } = res.data;
      if (code && data) {
        console.log(data);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

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

watchEffect(() => {
  let _total = 0;
  let _list = [];
  if (message.value) {
    const {
      code,
      data2: { total: total0, list },
    } = JSON.parse(message.value);

    _total = total0;
    _list = list.map((v) => {
      v.devIdcode = v.devInf.devIdcode;
      v.isConfirm = !v.almIsConfirmed ? "未确认" : "已确认";
      v.devTypeStr = ["", "充放电测试仪", "均衡测试仪"][v.devInf.devType];
      return v;
    });
  }
  total.value = _total;
  datas.tableData = _list;
});

function sendMessage() {
  sendData(
    JSON.stringify({
      almId: almId.value ? almId.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,
    })
  );
}

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);
    });
}

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);
    });
}

onActivated(() => {
  console.log("a", "=============");
});

onMounted(() => {
  getAlarmNames();
  sendMessage();
  getDevs();
});
</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"
          @change="sendMessage"
          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"
          @change="sendMessage"
          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"
          @change="sendMessage"
          type="date"
          placeholder="请选择"
        />
        至
        <el-date-picker
          class="yc-datepicker"
          v-model="endTime"
          value-format="YYYY-MM-DD"
          @change="sendMessage"
          type="date"
          placeholder="请选择"
        />
      </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-column label="操作" width="360" align="center">
            <template #default="scope">
              <el-button
                v-if="!scope.row.almIsConfirmed"
                type="primary"
                size="small"
                @click="confirmAlarm(scope.row)"
                >确认</el-button
              >
            </template>
          </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;
    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;
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }
}
</style>