schoolPanel/src/pages/gasCard/gasCard.vue

<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <!-- <div class="return-back">返回</div> -->
        <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>正常</td>
                </tr>
                <!-- <tr>
                <td>一氧化碳</td>
                <td>位置CCCCC</td>
                <td>0.00%LEL</td>
                <td>正常</td>
              </tr>
              <tr>
                <td>一氧化碳</td>
                <td>位置AAAAAAA</td>
                <td>0.00%LEL</td>
                <td>正常</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;

    console.log("DeviceID");
    console.log(this.DeviceID);
    this.global.sendWs({
      CMD: "getDeviceDetail",
      StationID: this.StationID,
      // StationID: "7c9c30af-6132-43d1-98fb-020395183094",
      DeviceID: this.DeviceID,
    });

  },
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);

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

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