U 测试修改

he wei

2024-11-06 32250f9a1db456b706e52ffb2664d738a2650678

 src/layout/components/Navbar.vue

@@ -1,14 +1,130 @@
<script setup>
import { ref } from "vue";
import { ref, watchEffect, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/user.js";
import config from "@/assets/js/config.js";

import logoUrl from "@/assets/images/fuguang_logo.jpg";
import useWebSocket from "@/hooks/useWebSocket";
import useElement from "@/hooks/useElement.js";
const { message } = useWebSocket("loginCheck");
const { message: almMessage } = useWebSocket("almPop");

const { $alert, $loading, $message, $confirm } = useElement();

const userStore = useUserStore();
const { uid, uname } = storeToRefs(userStore);

const date = ref(getDate());

const headers = [
  {
    prop: "almStarttime",
    label: "告警开始时间",
    width: "",
  },
  {
    prop: "devIdcode",
    label: "设备编号",
    width: "",
  },
  // {
  //   prop: "devTypeStr",
  //   label: "设备类型",
  //   width: "",
  // },
  {
    prop: "almName",
    label: "告警名称",
    width: "",
  },
];

function getDate() {
  let days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  let time = new Date();
  let week = days[time.getDay()];

  let day = time.getDate();
  let month = time.getMonth() + 1;
  let year = time.getFullYear();

  let hh = time.getHours();
  let mm = time.getMinutes();

  hh = hh < 10 ? `0${hh}` : hh;
  mm = mm < 10 ? `0${mm}` : mm;

  return `${year}-${month}-${day} ${week} ${hh}:${mm}`;
}
setInterval(() => {
  date.value = getDate();
}, 3000);

const alarmList = ref([]);

watchEffect((a, b, c) => {
  if (message.value) {
    const {
      code,
      data: { checkLogin },
    } = JSON.parse(message.value);
    if (!checkLogin.data) {
      $message(checkLogin.msg);
      localStorage.removeItem("uname");
      localStorage.removeItem("uid");
      setTimeout(() => {
        $router.push("/login");
        location.reload();
      }, 2000);
    }
  }

  if (almMessage.value) {
    const { code, data2 } = JSON.parse(almMessage.value);
  }
});

const alarmUpdated = ref(false);

watch(almMessage, (n, o) => {
  let nList = [],
    oList = [];
  if (n) {
    const { code, data2 } = JSON.parse(n);
    nList = data2.map((v) => ({
      ...v,
      devIdcode: v.devInf.devIdcode,
      devTypeStr: ["", "充放电测试仪", "均衡测试仪"][v.devInf.devType],
    }));
  }
  if (o) {
    const { code, data2 } = JSON.parse(o);
    oList = data2;
  }
  alarmList.value = nList;
  // 弹窗没关闭 不计算
  if (alarmUpdated.value) {
    return false;
  }
  if (!nList.length) {
    return (alarmUpdated.value = false);
  }
  // if (nList.length == oList.length) {
    for (let i = 0, nLen = nList.length; i < nLen; i++) {
      let item1 = nList[i];
      if (!oList.some((v) => v == item1)) {
        alarmUpdated.value = true;
        break;
      }
    }
  // } else {
  //   alarmUpdated.value = true;
  // }
});

const $router = useRouter();
const platformName = ref("锂电系统");
function commandClick(name) {
  switch (name) {
    case "outSystem":
@@ -20,12 +136,22 @@
  }
}
function outSystem() {
  sessionStorage.removeItem("uname");
  sessionStorage.removeItem("uid");
  localStorage.removeItem("uname");
  localStorage.removeItem("uid");
  $router.push("/login");
}
function passwordChange(params) {
  pwdVisible.value = true;
}
function goRtAlarm(params) {
  alarmUpdated.value = false;
  $router.push({
    path: "/alarm-rt",
    query: {
      almId: params.almId,
      devId: params.devId,
    },
  });
}
</script>

@@ -33,13 +159,15 @@
  <div class="page-header">
    <div class="page-header-container">
      <div class="page-header-left">
        <!-- <img class="header-first-logo" :src="logoUrl" v-if="logoConfig.value" /> -->
        <img class="header-first-logo" :src="logoUrl" />
        <!-- <span class="header-carve-up" v-if="logoConfig.value"></span> -->
        <span>{{ platformName }}</span>
        <span>{{ config.title }}</span>
        <!-- <span class="sys-version">{{ version }}</span> -->
      </div>
      <div class="page-header-content"></div>
      <div class="page-header-right">
        <!-- 日期 -->
        <div class="date">{{ date }}</div>
        <el-dropdown trigger="click" @command="commandClick">
          <div class="user-wraper">
            <el-icon class="icon" :size="24" color="#0ff">
@@ -59,22 +187,49 @@
      </div>
    </div>

    <!-- 密码修改 -->
    <!-- <el-dialog
      title="密码修改"
      width="400px"
      :v-model="pwd.show"
    <!-- 告警 -->
    <el-dialog
      title="告警"
      width="760px"
      v-model="alarmUpdated"
      :close-on-click-modal="false"
      top="0"
      class="dialog-center"
      :modal-append-to-body="false"
    >
      <pwd-change
        v-if="pwd.show"
        :v-model="pwd.show"
        :name="username"
      ></pwd-change>
    </el-dialog> -->
      <div class="table-wrap">
        <el-table
          class="yc-table"
          stripe
          height="100%"
          size="small"
          :data="alarmList"
          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="90" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="goRtAlarm(scope.row)"
                >实时告警</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

@@ -128,6 +283,12 @@
  margin-left: 4px;
  font-weight: normal;
  padding-top: 8px;
}

.page-header-right {
  display: flex;
  justify-content: space-around;
  width: 460px;
}

.data-totals {
@@ -211,6 +372,7 @@

.header-first-logo {
  margin-left: 20px;
  margin-right: 6px;
}

.header-carve-up {
@@ -283,4 +445,7 @@
.dialog-mac :deep(.el-dialog__body) {
  background: #02195c;
}
.table-wrap {
  max-height: 300px;
}
</style>