schoolPanel/src/pages/index/index.vue

<template>
  <div>
    <!-- 头部区域 -->
    <top-header></top-header>

    <!-- 首页主体start -->
    <div class="mainbox">
      <div style="margin: 0rem auto; width: 15rem">
        <div class="column" v-for="item in homeData" :key="item.StationID">

          <div
            class="panel"
            @click="goInnerCard(item)"
            :class="{
              alarm: Number(item.DeviceStatus) === 1,
              fault: Number(item.DeviceStatus) === 2,
            }"
          >
            <div>
              <p>
                状态：
                <span v-if="item.DeviceStatus==0">正常</span>
                <span v-if="item.DeviceStatus==1">告警</span>
                <span v-if="item.DeviceStatus==2">故障</span>
              </p>
              <p class="light-color">{{ item.DeviceType }}</p>


              <!-- 电气火灾渲染start -->
              <p
                v-if="item.DeviceType == '电气火灾监测装置'"
                class="light-color"
              >
                {{ item.KeyPoints[0].PointName }}:
                <span v-if="item.KeyPoints[0].ValueList.length>0">
                   {{item.KeyPoints[0].ValueList[0].Value == 0 ? "正常" : "告警"}}
                </span>
                <span v-else>
                 默认值
                </span>
              </p>
               <!-- 电气火灾渲染end -->


               <!-- 可燃气体渲染start -->
              <p v-else class="light-color">
                {{ item.KeyPoints[0].PointName }}:

                <span v-if="item.KeyPoints[0].ValueList.length>0">
                  {{ item.KeyPoints[0].ValueList[0].Value }}
                </span>
                <span v-else>默认值</span>
              </p>
               <!-- 可燃气体渲染end -->



            </div>
          </div>
        </div>

        <!-- <div class="column">
          <div class="panel alarm" @click="goInnerCard">
            <div>
              <img src="@/assets/images/panel-icon.png" alt="" />
              <p>状态：<span>告警</span></p>
              <p class="light-color">电气火灾</p>
              <p class="light-color">电缆温度：51℃</p>
            </div>
          </div>
        </div>
       -->
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
export default {
  name: "index",
  components: {
    topHeader,
  },
  data() {
    return {
      StationID: "",
      homeData: [],
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  created() {
    // 如果有站点选项，发送请求获取站点信息页数据
    this.StationID = this.$store.state.StationID;
    // console.log(1212121212);
    // console.log(this.StationID);
  },
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);
        
        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
          var json = {};
          json.CMD = "getStationDetail";
          json.StationID = this.StationID;

          this.global.sendWs(json);

          // setInterval(() => {
          //   console.log("每隔30秒请求一次getStationDetail");
          //   this.global.sendWs(json);
          // }, 30000);
        }

        if (redata.CMD == "getStationDetail") {

         
          this.homeData = redata.RESULT.LIST;
        //    console.log('首页数据') 
        // console.log(redata)
        //   console.log(this.homeData);
        }
      }
    },

    goInnerCard(item) {
      if (item.DeviceType == "电气火灾监测装置") {
        this.$router.push({
          path: "/eleFireCard",
          query: { DeviceID: item.DeviceID },
        });
      } else {
        this.$router.push({
          path: "/gasCard?",
          query: { DeviceID: item.DeviceID },
        });
      }
    },
    
    goGasCard() {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>