schoolPanel/src/pages/eleFireData/eleFireData.vue

<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>
        <h3>电气火灾监控实时信息</h3>
        <p>更新时间：{{time}}</p>

        <div>
          <ul class="cardTabs">
            <li @click="goEleFireCard">数据列表</li>
            <li class="active">数据可视化</li>
          </ul>

          <div class="tabBox eleFire-data">
            <div class="column2">
              <div class="panel sec1">
                <div class="inner-box">
                  <div>
                    <p>
                      供电过压告警：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[0].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                      >
                        {{
                          getData[0].AlarmStatus == 0
                            ? "正常"
                            : getData[0].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal">默认正常</span>
                    </p>
                    <p>
                      供电低压告警：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[1].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                      >
                        {{
                          getData[1].AlarmStatus == 0
                            ? "正常"
                            : getData[1].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal">默认正常</span>
                    </p>
                  </div>
                  <div>
                    <p>
                      供电过流告警：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[2].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                      >
                        {{
                          getData[2].AlarmStatus == 0
                            ? "正常"
                            : getData[2].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal">默认正常</span>
                    </p>
                    <p>
                      漏电告警：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[3].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                      >
                        {{
                          getData[3].AlarmStatus == 0
                            ? "正常"
                            : getData[3].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal">默认正常</span>
                    </p>
                  </div>
                  <div>
                    <p style="width: 100%">
                      A相线缆温度超高：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[4].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                        style="margin-right: 0.3rem"
                      >
                        {{
                          getData[4].AlarmStatus == 0
                            ? "正常"
                            : getData[4].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal" style="margin-right: 0.3rem"
                        >正常</span
                      >
                      B相线缆温度超高：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[5].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                        style="margin-right: 0.3rem"
                      >
                        {{
                          getData[5].AlarmStatus == 0
                            ? "正常"
                            : getData[5].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal" style="margin-right: 0.3rem"
                        >正常</span
                      >
                      C相线缆温度超高：
                      <span
                        v-if="getData.length > 0"
                        class="normal"
                        :class="[
                          getData[6].AlarmStatus == 0 ? 'normal' : 'error',
                        ]"
                        style="margin-right: 0.3rem"
                      >
                        {{
                          getData[6].AlarmStatus == 0
                            ? "正常"
                            : getData[6].AlarmStatus == 1
                            ? "告警"
                            : "故障"
                        }}
                      </span>
                      <span v-else class="normal" style="margin-right: 0.3rem"
                        >正常</span
                      >
                    </p>
                  </div>
                </div>
              </div>
              <div class="panel eleCurrentChart">
                <voltage-chart :getData="getData" v-if="getData.length>0"></voltage-chart>
              </div>
            </div>
            <div class="column2">
              <div class="panel">
                <ele-current-chart :getData="getData" v-if="getData.length>0"></ele-current-chart>
              </div>
              <div class="panel">
                <cable-tem-chart :getData="getData" v-if="getData.length>0"></cable-tem-chart>
              </div>
            </div>
          </div>
          <div style="height: 0.325rem"></div>
        </div>
      </div>
    </div>
  </div>
</template>  

<script>
import topHeader from "@/components/topHeader";
import returnBack from "@/components/returnBack";
import eleCurrentChart from "./components/eleCurrentChart";
import voltageChart from "./components/voltageChart";
import cableTemChart from "./components/cableTemChart";

export default {
  name: "eleFireData",
  components: {
    topHeader,
    returnBack,
    eleCurrentChart,
    voltageChart,
    cableTemChart,
  },
  data() {
    return {
      StationID: "",
      DeviceID: "",
      getData: [],
      eleCurrent: [],
      time:''
   
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  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].Points);
          this.getData = redata.RESULT.Device[0].Points;
          this.time=redata.time
        }
      }
    },

    goEleFireCard() {
      this.$router.push({
        path: "/eleFireCard",
        query: { DeviceID: this.DeviceID },
      });
    },
  },
};
</script>

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