schoolPanel/src/pages/gasCard/gasCard.vue

<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>

        <h3>可燃气体监控实时信息</h3>
        <p>更新时间：2021-06-15 13:25:00</p>

        <div>
          <ul class="cardTabs">
            <li @click="Inv = 0" :class="{ active: Inv === 0 }">数据列表</li>
            <li @click="Inv = 1" :class="{ active: Inv === 1 }">数据可视化</li>
          </ul>

          <div class="tabBox">
            <div>
              <div v-if="Inv == 1" class="lineChart gas-data">
                <line-chart></line-chart>
              </div>

              <table v-if="Inv == 0">
                <tr>
                  <th>名称</th>
                  <th>设备位置</th>
                  <th>浓度</th>
                  <th>告警状态</th>
                </tr>
                <tr>
                  <td>{{ getData.DeviceType }}</td>
                  <td>位置BBBBBB</td>
                  <td>0.00%LEL</td>
                  <td class="normal">正常</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import lineChart from "./components/lineChart";
import returnBack from "@/components/returnBack";
export default {
  name: "index",
  components: {
    topHeader,
    returnBack,
    lineChart,
  },
  data() {
    return {
      Inv: 0,
      DeviceID: "",
      getData: {},
      StationID: "",
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  computed: {

  },

  created() {
    this.DeviceID = this.$route.query.DeviceID;
    this.StationID = this.$store.state.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 = "getDeviceDetail";
          json.StationID = this.StationID;
          json.DeviceID = this.DeviceID;

          this.global.sendWs(json);

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

        }

        if (redata.CMD == "getDeviceDetail") {
  
          // console.log("redata.RESULT");
          // console.log(redata.RESULT.Device[0].point);
          // this.getData = redata.RESULT.Device;
        }
      }
    },
  },
};
</script>

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