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

<template>
  <div class="page_container">
    <base-title title="防爆扩音" />
    <div class="page_content">
      <div class="person_num_box">
        <div class="item" v-for="item of fbkyList" :key="item.id">
          <div class="left">
            <img src="~@/assets/imgs/maps/img_wqr.png" @click="openInfo(item)" />
            <span class="totle">{{ item.count }}</span>
            <span class="text">数量</span>
          </div>
          <div class="divider"></div>
          <div class="right">
            <div class="position">{{ item.name }}</div>
            <div class="rymain">
              <div class="tag">
                <el-tag
                  class="select-tag"
                  v-for="it in item.list"
                  size="small"
                  :key="it.id"
                  :type="it.id"
                  effect="dark"
                >
                  {{ it.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTitle from "./BaseTitle.vue";
export default {
  name: "Weather",
  components: { BaseTitle },
  data() {
    return {
      fbkyList: [
        {
          id: "1",
          name: "都匀末站",
          count: 9,
          list: [
            { id: "1", name: "大门口" },
            { id: "2", name: "工艺区" },
          ],
        },
        {
          id: "2",
          name: "凯口清管站",
          count: 6,
          list: [
            { id: "1", name: "大门口" },
            { id: "2", name: "工艺区" },
          ],
        },
        {
          id: "3",
          name: "独山首站",
          count: 6,
          list: [
            { id: "1", name: "大门口" },
            { id: "2", name: "工艺区" },
          ],
        },
      ],
    };
  },
  mounted() {
    this.init();
    this.startMqtt();
  },
  methods: {
    init() {
      this.fbkyList[0].count = FBKYLIST.filter(
        (e) => e.buildId == "002001" && e.type == "扩音喇叭"
      ).length;
      this.fbkyList[1].count = FBKYLIST.filter(
        (e) => e.buildId == "002002" && e.type == "扩音喇叭"
      ).length;
      this.fbkyList[2].count = FBKYLIST.filter(
        (e) => e.buildId == "002003" && e.type == "扩音喇叭"
      ).length;
      this.fbkyList[0].list = FBKYLIST.filter(
        (e) => e.buildId == "002001" && e.type == "扩音喇叭"
      );
      this.fbkyList[1].list = FBKYLIST.filter(
        (e) => e.buildId == "002002" && e.type == "扩音喇叭"
      );
      this.fbkyList[2].list = FBKYLIST.filter(
        (e) => e.buildId == "002003" && e.type == "扩音喇叭"
      );
      console.log("防爆扩音系统设备统计", this.fbkyList);
    },
    openInfo(item) {},
    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.startsWith("DataCommunication/TagData/")) {
            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>
.page_container {
  width: 410px;
  z-index: 2;
  .page_content {
    width: 100%;
    height: 210px;
    .person_num_box {
      width: 100%;
      height: auto;
      overflow: hidden;
      .item {
        margin-top: 6px;
        margin-left: 6px;
        height: 48%;
        display: flex;
        position: relative;
        .left {
          width: 18%;
          height: 100%;
          text-align: center;
          margin-right: 8px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 80px;
            height: 80px;
          }
          .totle {
            margin-top: -72px;
            font-size: 20px;
            color: #ffffff;
            letter-spacing: 1.26px;
            text-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
            font-weight: 700;
          }
          .text {
            margin-top: -4px;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: 400;
          }
        }
        .divider {
          width: 1%;
        }
        .right {
          width: 80%;
          height: 70px;
          position: relative;
          .position {
            font-family: 优设标题黑;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 1.29px;
            position: absolute;
            z-index: 99;
            background-image: linear-gradient(180deg, #eeeeee, #5cd5ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 400;
            padding-left: 10px;
            margin-top: -7px;
          }
          .rymain {
            max-height: 110px;
            width: 100%;
            height: calc(100% - 14px);
            position: absolute;
            bottom: 0;
            opacity: 0.9;
            background-image: linear-gradient(
              270deg,
              rgba(0, 24, 46, 0.1) 0%,
              #00487b 98%
            );
            font-size: 12px;
            overflow: auto;
            color: #b3c0d4;
            .tag {
              .select-tag {
                margin: 2px;
              }
            }
          }
        }
      }
    }
  }
}
</style>