large_screen/src/components/power_supply/configImg/Table.vue

<template>
  <div id="table">
    <h1 align="center" style="color: #4adefe">供电系统组态图</h1>

    <div class="header">
      <img
        src="@/assets/img/供电系统组态图.svg"
        style="
          filter: invert(75%) sepia(10%) saturate(2634%) hue-rotate(153deg)
            brightness(101%) contrast(102%);
        "
        id="imgSwitch"
      />
    </div>

    <el-main>
      <div class="table1">
        <el-row :gutter="40">
          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
            >负荷:</el-col
          >
          <el-col :span="1">{{ load[0] }}</el-col>
          <el-col :span="1">{{ load[1] }}</el-col>
          <el-col :offset="1" :span="1">{{ load[2] }}</el-col>
          <el-col :span="1">{{ load[3] }}</el-col>
          <el-col :offset="1" :span="1">{{ load[4] }}</el-col>
          <el-col :span="1">{{ load[5] }}</el-col>
          <el-col :span="1">{{ load[6] }}</el-col>
          <el-col style="margin-left: 230px" :span="1">{{ load[7] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ load[8] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ load[9] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ load[10] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ load[11] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ load[12] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ load[13] }}</el-col>
        </el-row>
        <el-row :gutter="40" style="margin-top: 20px">
          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
            >电压:</el-col
          >
          <el-col :span="1">{{ voltage[0] }}</el-col>
          <el-col :span="1">{{ voltage[1] }}</el-col>
          <el-col :offset="1" :span="1">{{ voltage[2] }}</el-col>
          <el-col :span="1">{{ voltage[3] }}</el-col>
          <el-col :offset="1" :span="1">{{ voltage[4] }}</el-col>
          <el-col :span="1">{{ voltage[5] }}</el-col>
          <el-col :span="1">{{ voltage[6] }}</el-col>
          <el-col style="margin-left: 230px" :span="1">{{ voltage[7] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ voltage[8] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ voltage[9] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ voltage[10] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ voltage[11] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ voltage[12] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ voltage[13] }}</el-col>
        </el-row>
        <el-row :gutter="40" style="margin-top: 20px">
          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
            >电流:</el-col
          >
          <el-col :span="1">{{ current[0] }}</el-col>
          <el-col :span="1">{{ current[1] }}</el-col>
          <el-col :offset="1" :span="1">{{ current[2] }}</el-col>
          <el-col :span="1">{{ current[3] }}</el-col>
          <el-col :offset="1" :span="1">{{ current[4] }}</el-col>
          <el-col :span="1">{{ current[5] }}</el-col>
          <el-col :span="1">{{ current[6] }}</el-col>
          <el-col style="margin-left: 230px" :span="1">{{ current[7] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ current[8] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ current[9] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ current[10] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ current[11] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ current[12] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ current[13] }}</el-col>
        </el-row>
        <el-row :gutter="40" style="margin-top: 20px">
          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
            >Cos:</el-col
          >
          <el-col :span="1">{{ cos[0] }}</el-col>
          <el-col :span="1">{{ cos[1] }}</el-col>
          <el-col :offset="1" :span="1">{{ cos[2] }}</el-col>
          <el-col :span="1">{{ cos[3] }}</el-col>
          <el-col :offset="1" :span="1">{{ cos[4] }}</el-col>
          <el-col :span="1">{{ cos[5] }}</el-col>
          <el-col :span="1">{{ cos[6] }}</el-col>
          <el-col style="margin-left: 230px" :span="1">{{ cos[7] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ cos[8] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ cos[9] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ cos[10] }}</el-col>
          <el-col style="margin-left: 20px" :span="1">{{ cos[11] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ cos[12] }}</el-col>
          <el-col style="margin-left: 30px" :span="1">{{ cos[13] }}</el-col>
        </el-row>
      </div>
    </el-main>
    <el-row style="margin-top: -40px">
      <el-col :offset="6" :span="7"
        ><div class="grid-content bg-purple">
          <table class="table2">
            <tr align="left">
              <td>Ua(KV):<span>{{bottom.Ua1}}KV</span></td>
              <td>Uab(KV):<span>{{bottom.Uab1}}KV</span></td>
            </tr>
            <tr align="left">
              <td>Ub(KV):<span>{{bottom.Ub1}}KV</span></td>
              <td>Ubc(KV):<span>{{bottom.Ubc1}}KV</span></td>
            </tr>
            <tr align="left">
              <td>Uc(KV):<span>{{bottom.Uc1}}KV</span></td>
              <td>Uca(KV):<span>{{bottom.Uca1}}KV</span></td>
            </tr>
          </table>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <table class="table2">
            <tr align="left">
              <td>Ua(KV):<span>{{bottom.Ua2}}KV</span></td>
              <td>Uab(KV):<span>{{bottom.Uab2}}KV</span></td>
            </tr>
            <tr align="left">
              <td>Ub(KV):<span>{{bottom.Ub2}}KV</span></td>
              <td>Ubc(KV):<span>{{bottom.Ubc2}}KV</span></td>
            </tr>
            <tr align="left">
              <td>Uc(KV):<span>{{bottom.Uc2}}KV</span></td>
              <td>Uca(KV):<span>{{bottom.Uca2}}KV</span></td>
            </tr>
          </table>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Table",
  data() {
    return {
      bottom:{
        Ua1:22,
        Uab1:34,
        Ub1:36,
        Ubc1:23,
        Uc1:43,
        Uca1:39,
        Ua2:22,
        Uab2:36,
        Ub2:35,
        Ubc2:37,
        Uc2:33,
        Uca2:29,
      },
      load: new Array(14).fill("0"),
      voltage: new Array(14).fill("0"),
      current: new Array(14).fill("0"),
      cos: new Array(14).fill("0"),
    };
  },
  methods: {
    getBottomData(){
      let interval = setInterval(() => {
      this.bottom.Ua1= this.getRandomNum(20,30)
      this.bottom.Uab1= this.getRandomNum(25,35)
      this.bottom.Ub1= this.getRandomNum(27,33)
      this.bottom.Ubc1= this.getRandomNum(25,37)
      this.bottom.Uc1= this.getRandomNum(25,30)
      this.bottom.Uca1= this.getRandomNum(26,34)
      this.bottom.Ua2= this.getRandomNum(20,30)
      this.bottom.Uab2= this.getRandomNum(25,35)
      this.bottom.Ub2= this.getRandomNum(27,33)
      this.bottom.Ubc2= this.getRandomNum(25,37)
      this.bottom.Uc2= this.getRandomNum(25,30)
      this.bottom.Uca2= this.getRandomNum(26,34)
      
    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(interval);
    });

    },
    getData(data, type) {
      console.log(data[0]);
      this.load.splice(0, 1, data[0]["fuhe_after"]);
      this.cos.splice(0, 1, data[0]["gonglvyinshu_after"]);
      this.current.splice(0, 1, data[0]["dianliu_after"]);
      this.voltage.splice(0, 1, data[0]["dianya_after"]);
      let data1 = [];
      let data2 = [];
      let data3 = [];
      let data4 = [];
      for (let i = 0; i < 13; i++) {
        data1.push(this.getRandomNum(5000, 5200));
        data2.push(this.getRandomNum(10, 15));
        data3.push(this.getRandomNum(300, 400));
        data4.push(Math.random().toFixed(1));
      }
      // 伪造数据
      this.load.splice(1, 13, ...data1);

      this.voltage.splice(1, 13, ...data2);

      this.current.splice(1, 13, ...data3);

      this.cos.splice(1, 13, ...data4);
    },
    initWebSocket(websocket, type) {
      // 连接错误
      websocket.onerror = () => {
        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
      };
      // 连接成功
      websocket.onopen = () => {
        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
      };
      // 收到消息的回调
      websocket.onmessage = (event) => {
        // console.log("onmessage", event);
        if (JSON.parse(event.data).length) {
          this.getData(JSON.parse(event.data), type);
        }
      };
      // 连接关闭的回调
      websocket.onclose = () => {
        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
      };
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        websocket.close();
      });
    },
  },
  computed: {
    ...mapState(["websocketIP"]),
  },
  mounted() {
    // websocket
    // 采泵1
    let pump1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
    this.initWebSocket(pump1, "pump1");
    // 伪造底部数据
    this.getBottomData();
  },
};
</script>

<style scoped>
.table1 {
  width: 100%;
  height: 250px;
  color: #f3db5c;
  margin: 0px auto;
}

.table2 {
  /* margin: 60px; */
  border-collapse: separate;
  border-spacing: 20px 5px; /* 水平间距 垂直间距 */
  /* width: 550px; */
  bottom: 20px;
  font-size: 20px;
  line-height: 20px;
  color: #4adefe;
  /* position: absolute; */
}

.table2 span {
  color: #f3db5c;
  padding-left: 40px;
}

.table4 {
  width: 300px;
  bottom: 0px;
  right: 0px;
  line-height: 10px;
  color: white;
  position: absolute;
}
.header {
  width: 100%;
  height: 400px;
  transform: translateY(-70%);
  margin-left: 20px;
}
#imgSwitch {
  width: 95%;
  height: 100;
  /* padding-bottom: 100px; */
  /* left: 50px; */
  /* margin-left: 30px; */
}
</style>