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

<template>
  <div class="riskHint-container">
    <base-title title="风险提示" />
    <div class="hint-box" v-if="hintData1.length">
      <vue-seamless
        :data="hintData1"
        class="seamless-warp"
        :class-option="scrollOption"
        ref="seamlessScroll"
      >
        <div class="hint-content">
          <div
            class="hint-item"
            v-for="item of hintData1"
            :key="item.id"
            @click="openRiskDialog(item)"
          >
            <div
              class="title"
              :style="{
                'background-image': `linear-gradient(90deg, ${
                  riskColors[item.level].color
                } 2%, rgba(249, 40, 40, 0) 100%)`,
              }"
            >
              <img :src="require('@/assets/imgs/maps/img_dian.png')" alt="" />
              <span class="type">{{ riskColors[item.level].name }}</span>
              <span class="split"></span>
              <span class="time">{{
                Dayjs(item.eventTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
      </vue-seamless>
    </div>

    <div class="hint-box no-data" v-else>暂无数据</div>
  </div>
</template>

<script>
import BaseTitle from "./BaseTitle.vue";
import VueSeamless from "vue-seamless-scroll";
import Dayjs from "dayjs";
import { getAlarmDataList } from "@/API/alarm";
export default {
  name: "",
  components: { BaseTitle, VueSeamless },
  props: {
    hintData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      scrollOption: {
        limitMoveNum: 3,
        singleHeight: 78,
        waitTime: 2000,
      },

      riskColors: {
        ["306001"]: { name: "重大级别", color: "#FF3636" },
        ["306002"]: { name: "较大级别", color: "#FF9F00" },
        ["306003"]: { name: "一般级别", color: "#F8E71C" },
        ["306004"]: { name: "低级别", color: "#53A3FF" },
        ["024001"]: { name: "较大级别", color: "#FF9F00" },
        ["024002"]: { name: "一般级别", color: "#F8E71C" },
        ["024003"]: { name: "低级别", color: "#53A3FF" },
      },
      hintData1: [
        {
          id: "1",
          level: "306004",
          riskTime: "2022-11-16 15:51:46",
          content: "周界入侵触发，事件等级低",
        },
        {
          id: "2",
          level: "306004",
          riskTime: "2022-11-16 15:51:46",
          content: "周界入侵触发，事件等级低",
        },
        {
          id: "3",
          level: "306004",
          riskTime: "2022-11-16 15:51:46",
          content: "周界入侵触发，事件等级较低",
        },
        {
          id: "4",
          level: "306003",
          riskTime: "2022-11-16 15:51:46",
          content: "激光云台触发气体泄漏，事件等级中",
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.getAlarmDataList();
    this.startMqtt();
  },
  methods: {
    Dayjs,
    async getAlarmDataList() {
      try {
        const params = {
          pageSize: 10,
          pageIndex: 1,
          dealStatus: "", //0
          confirmStatus: "",
          recoveryStatus: "",
          category: "",
          level: "",
          type: "",
          startTime: Dayjs(
            Dayjs(new Date()).subtract(1, "month").format("YYYY-MM-DD HH:mm:ss")
          ).format(),
          endTime: Dayjs(
            Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
          ).format(),
          key: "",
          tag: "",
          departmentId: "",
        };
        const res = await getAlarmDataList(params);
        let alarmData = res.data.content;
        this.hintData1 = alarmData.map((e) => {
          return {
            id: e.id,
            level: e.level ? e.level : "024003",
            riskTime: e.eventTime,
            content:
              (e.departmentName ? e.departmentName : "") +
              (e.categoryStr ? e.categoryStr : "") +
              e.content,
          };
        });
        // console.log("风险报警数据", alarmData, this.hintData1);
      } catch (err) {}
    },
    openRiskDialog(data) {
      console.log(data);
      let dialogConfig = {
        dialogId: "risk_" + data.id,
        show: true, //是否显示
        title: "事件详情",
        width: 500, //px宽度
        height: 320, //px高度
        center: true, //是否居中定位
        zIndex: 10,
        data,
      };
      this.$store.dispatch("dialog/addRiskDialog", dialogConfig);
    },
    startMqtt() {
      const topics = [
        "DataCommunication/TagData/xxx",
        "DataCommunication/TagData/xxx",
        "DataCommunication/TagData/xxx",
        "DataCommunication/TagData/xxx",
        "DataCommunication/TagData/xxx",
        "DataCommunication/TagData/xxx",
      ];
      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/Number/StationLevelCount") {
            const topicIndex = topics.indexOf(topic);
            if (topicIndex > -1) {
              _this.weatherList[topicIndex] = data.Value;
              _this.weatherList[topicIndex] = data.Unit;
            }
          }
        },
      });
      this.$once("hook:beforeDestroy", () => {
        this.$store.dispatch("mqtt/unsubscribe", topics);
      });
    },
  },
};
</script>

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

  .hint-box {
    width: 100%;
    height: 156px;
    overflow: hidden;
    padding: 15px;
    // display: flex;
    position: relative;
    .hint-content {
      padding-left: 20px;
      .hint-item:last-child {
        margin-bottom: 0;
      }
    }
    .hint-item {
      width: 100%;
      height: 68px;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .title {
      height: 27px;
      background-image: linear-gradient(
        90deg,
        #f92828 2%,
        rgba(249, 40, 40, 0) 100%
      );
      display: flex;
      align-items: center;
      color: #fff;
      position: relative;
      img {
        width: 14px;
        height: 14px;
        position: absolute;
        left: -20px;
      }
      .type {
        margin-left: 5px;
      }
      .split {
        width: 2px;
        height: 10px;
        border-left: 2px solid #fff;
        margin: 0 8px;
      }
    }
    .content {
      padding: 10px 0;
      font-size: 13px;
      color: #ffffff;
      letter-spacing: 1px;
      font-weight: 400;
    }
  }
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 5px;
  }
}
</style>