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.status) === 1,
              fault: Number(item.status) === 2,
            }"
          >
            <div>
              <!-- <img src="@/assets/images/panel-icon.png" alt="" /> -->
              <p>
                状态：<span>{{ item.DeviceStatusNote }}</span>
              </p>
              <p class="light-color">{{ item.DeviceType }}</p>
              <p v-if="item.DeviceType=='电气火灾监测装置'" class="light-color">  {{item.KeyPoints[0].PointName}}:  {{item.KeyPoints[0].ValueList[0].Value==0?'正常':'告警'}}</p>
              <p v-else class="light-color">  {{item.KeyPoints[0].PointName}}:  {{item.KeyPoints[0].ValueList[0].Value}}</p>
            </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 class="column">
          <div class="panel" @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 class="column">
          <div class="panel fault" @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 class="column">
          <div class="panel normal" @click="goGasCard">
            <div>
              <img src="@/assets/images/gas-icon.png" alt="" />
              <p>状态：<span>正常</span></p>
              <p class="light-color">可燃气体</p>
              <p class="light-color">一氧化碳浓度：120ppm</p>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="panel" @click="goGasCard">
            <div>
              <img src="@/assets/images/gas-icon.png" alt="" />
              <p>状态：<span>正常</span></p>
              <p class="light-color">可燃气体</p>
              <p class="light-color">一氧化碳浓度：120ppm</p>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="panel" @click="goGasCard">
            <div>
              <img src="@/assets/images/gas-icon.png" alt="" />
              <p>状态：<span>正常</span></p>
              <p class="light-color">可燃气体</p>
              <p class="light-color">一氧化碳浓度：120ppm</p>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
export default {
  name: "index",
  components: {
    topHeader,
  },
  data() {
    return {
      homeData: [],
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  created() {},
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
   
        const redata = JSON.parse(e.data);
        // 初始化获取站点下拉数据
        if (redata.CMD == "getStationInfo" && redata.RESULT) {
          // 如果有站点选项，发送请求获取站点信息页数据
          this.global.sendWs({
            CMD: "getStationDetail",
            StationID: "7c9c30af-6132-43d1-98fb-020395183094",
          });
        }
        if (redata.CMD == "getStationDetail") {
          this.homeData = redata.RESULT.LIST;
          // console.log('redata')
          // console.log(redata)
          console.log(this.homeData);
        }
      }
    },
    goInnerCard(item) {
      if (item.DeviceType == "电气火灾监测装置") {
        this.$router.push("/eleFireCard?DeviceID="+item.DeviceID);
      } else {
         this.$router.push("/gasCard?DeviceID="+item.DeviceID);
      }
    },
    goGasCard() {
     
    },
  },
};
</script>

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