ISMS-Visualization-BJGD-TKT/src/views/basePage/panels/Overview.vue

<template>
  <div class="page_container">
    <base-title title="今日报警" />
    <div class="page_top">
      <div
        class="top-item"
        v-for="(item, index) in todayTotalData"
        :key="item.code"
      >
        <div class="top-item-img">
          <img class="rotate" :src="item.img" />
        </div>
        <div class="top_value_box" @click="gotoAlarmList(undefined, index)">
          <div class="top-item-value">{{ item.total }}</div>
          <div class="top-item-name">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="page_bottom">
      <div
        class="bottom-item"
        :class="['level' + categoryList[key].level]"
        v-for="key in Object.keys(categoryList)"
        :key="key"
        @click="gotoAlarmList(key)"
      >
        <div class="item-name">{{ categoryList[key].name }}</div>
        <div class="item-count">{{ categoryList[key].value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTitle from "./BaseTitle.vue";
import Dayjs from "dayjs";
import { getAlarmDataList } from "@/API/alarm";
import { mapGetters } from "vuex";
export default {
  name: "Overview",
  components: { BaseTitle },
  data() {
    return {
      todayTotalData: [
        {
          code: "1",
          title: "未处理",
          total: 0,
          img: require("@/assets/imgs/overview/img_BJ_bg_01.png"),
        },
        {
          code: "2",
          title: "报警总数",
          total: 0,
          img: require("@/assets/imgs/overview/img_BJ_bg_02.png"),
        },
        {
          code: "3",
          title: "未确认",
          total: 0,
          img: require("@/assets/imgs/overview/img_BJ_bg_03.png"),
        },
      ],
      categoryList: {
        100001: {
          code: "101",
          name: "人员报警",
          value: "",
          level: "024000",
        },
        100002: {
          code: "101",
          name: "周界报警",
          value: "",
          level: "024000",
        },
        100003: {
          code: "101",
          name: "火灾报警",
          value: "",
          level: "024000",
        },
        100004: {
          code: "101",
          name: "泄漏检测",
          value: "",
          level: "024000",
        },
        100005: {
          code: "101",
          name: "工业视频",
          value: "",
          level: "024000",
        },
        100006: {
          code: "101",
          name: "门禁报警",
          value: "",
          level: "024000",
        },
        100015: {
          code: "101",
          name: "110报警",
          value: "",
          level: "024000",
        },
        100888: {
          code: "101",
          name: "系统事件",
          value: "",
          level: "024000",
        },
        // 100001: {
        //   code: "101",
        //   name: "可燃气体浓度",
        //   value: 0,
        //   level: "024000",
        // },
      },
      dId: "",
    };
  },
  computed: {
    ...mapGetters(["departmentId"]),
  },
  mounted() {
    this.getAlarmDataList();
    // this.startMqtt();
  },
  watch: {
    departmentId(newVal) {
      // console.log("部门id信息", newVal);
      this.dId = newVal;
      setTimeout(() => {
        this.getAlarmDataList();
      }, 200);
    },
  },
  methods: {
    startMqtt() {
      const topics = [
        // 'Visualization/Number/TodayTotal',
        // 'Visualization/Number/TodayCategoryCount',
        "Visualization/Alarm/0/TodayTotal",
        "Visualization/Alarm/0/TodayCategoryCount",
      ];
      const _this = this;
      this.$store.dispatch("mqtt/subscribe", {
        topic: topics,
        onMessage: (topic, message, packet) => {
          const content = message.toString();
          const data = JSON.parse(content);
          if (topic === "Visualization/Alarm/0/TodayTotal") {
            // console.log("今日报警数据", data);
            // if (topic === 'Visualization/Number/TodayTotal') {
            data.forEach((item, index) => {
              data.length = 3;
              // console.log(item);
              if (item && item.name && item.value) {
                _this.todayTotalData[index].title = item.name;
                _this.todayTotalData[index].total = item.value;
              }
            });
          }
          if (topic === "Visualization/Alarm/0/TodayCategoryCount") {
            // if (topic === 'Visualization/Number/TodayCategoryCount') {
            //console.log(topic, data);
            // console.log("报警数据", data);
            _this.categoryList = {};
            data.length = 6;
            data.forEach((item) => {
              // _this.categoryList[item.category] = {
              //   code: item.category,
              //   name: item.categoryName,
              //   value: item.unDealed,
              //   level: item.unDealedLevel,
              // };
              _this.categoryList[item.code] = {
                code: item.code,
                name: item.name,
                value: item.undealedValue,
                level: item.undealedLevel,
              };
            });
          }
        },
      });
      this.$once("hook:beforeDestroy", () => {
        this.$store.dispatch("mqtt/unsubscribe", topics);
      });
    },

    gotoAlarmList(category, index) {
      console.log("params", category, index);

      if (category && category.startsWith("0")) return;
      let dealStatus = undefined;
      let confirmStatus = undefined;
      if (index === 0) {
        dealStatus = "0";
      } else if (index === 2) {
        confirmStatus = "0";
      }
      let p = {
        category,
        dateRange: "24H",
        dealStatus,
        confirmStatus,
        departmentId: this.dId,
      };
      const query = JSON.stringify(p)
        .replace("{", "")
        .replace("}", "")
        .replace(/\",\"/g, "&")
        .replace(/,\"/g, "&")
        .replace(/:/g, "=")
        .replace(/\":\"/g, "=")
        .replace(/\"/g, "");
      // console.log("报警列表参数", query);

      this.$router.push("/alarmlist?" + query);
    },

    async getAlarmDataList() {
      try {
        const params = {
          pageSize: 1000,
          pageIndex: 1,
          dealStatus: "", //0
          confirmStatus: "",
          recoveryStatus: "",
          category: "",
          level: "",
          type: "",
          startTime: Dayjs(
            Dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD HH:mm:ss")
          ).format(),
          endTime: Dayjs(
            Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
          ).format(),
          key: "",
          tag: "",
          departmentId: this.dId ? this.dId : "",
        };
        const res = await getAlarmDataList(params);
        let alarmData = res.data.content;
        this.todayTotalData[0].total = alarmData.filter(
          (e) => e.dealStatus === 0
        ).length; //未处理
        this.todayTotalData[1].total = alarmData ? alarmData.length : 0; //总数
        this.todayTotalData[2].total = alarmData.filter(
          (e) => e.confirmStatus === 0
        ).length; //未确认
        // console.log("统计报警数据", alarmData);
      } catch (err) {}
    },
  },
};
</script>

<style lang="less" scoped>
.page_container {
  width: 410px;
  z-index: 2;

  .page_top {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .top-item {
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      .top-item-img {
        width: 120px;
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .top_value_box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // padding-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .top-item-value {
          font-size: 26px;
          letter-spacing: 0;
          font-weight: 700;
        }
        .top-item-name {
          opacity: 0.8;
          font-size: 13px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
    }
    .top-item:nth-child(1) {
      .top-item-value {
        color: #44c3ff;
      }
    }
    .top-item:nth-child(2) {
      .top-item-value {
        color: #44ffa6;
      }
    }
    .top-item:nth-child(3) {
      .top-item-value {
        color: #44edff;
      }
    }
  }
  .page_bottom {
    height: 180px;
    border: 0px dotted red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .bottom-item {
      min-width: 186px;
      width: 186px;
      height: 40px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #ffffff;
      cursor: pointer;
      font-family: "Microsoft YaHei";
      .item-name {
        display: inline-block;
        margin: 12px 0 0 60px;
        width: 97px;
      }
      .item-count {
        display: inline-block;
      }
      &:hover {
        font-weight: 600;
      }
    }
    .level024000 {
      background-image: url("~@/assets/imgs/overview/img_dangerous_Class 0@2x.png");
    }
    .level024001 {
      background-image: url("~@/assets/imgs/overview/img_dangerous_Class A@2x.png");
      color: #ffd9d9 !important;
    }
    .level024002 {
      background-image: url("~@/assets/imgs/overview/img_dangerous_Class B@2x.png");
      color: #fff2cb !important;
    }
    .level024003 {
      background-image: url("~@/assets/imgs/overview/img_dangerous_Class D@2x.png");
      color: #d9f1ff !important;
    }
  }
  // 旋转动画
  .rotate {
    animation: rotate 3s linear infinite;
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>