large_screen/src/views/drain/configImg/index.vue

<template>
  <div class="main">
    <!-- 背景图片 -->
    <div>
      <img
        src="@/assets/img/drain/back.png"
        id="imgSwitch"
      />
    </div>
    <!-- 12个按钮 -->
    <div :class="['botton0', valve[0] ? 'green' : 'red']"></div>
    <div :class="['botton1', valve[1] ? 'green' : 'red']"></div>
    <div :class="['botton2', valve[2] ? 'green' : 'red']"></div>
    <div :class="['botton3', valve[3] ? 'green' : 'red']"></div>
    <div :class="['botton4', valve[4] ? 'green' : 'red']"></div>
    <div :class="['botton5', valve[5] ? 'green' : 'red']"></div>
    <div :class="['botton6', valve[6] ? 'green' : 'red']"></div>
    <div :class="['botton7', valve[7] ? 'green' : 'red']"></div>
    <div :class="['botton8', valve[8] ? 'green' : 'red']"></div>
    <div :class="['botton9', valve[9] ? 'green' : 'red']"></div>
    <div :class="['botton10', valve[10] ? 'green' : 'red']"></div>
    <div :class="['botton11', valve[11] ? 'green' : 'red']"></div>
    <!-- 3个数据表格 -->
    <div class="table1">
      <tableData
        :tableData="tableData[0]"
        id="1"
      ></tableData>
    </div>
    <div class="table2">
      <tableData
        :tableData="tableData[1]"
        id="2"
      ></tableData>
    </div>
    <div class="table3">
      <tableData
        :tableData="tableData[2]"
        id="3"
      ></tableData>
    </div>
  </div>
</template>
<script>
import tableData from "@/views/drain/configImg/tableData";
export default {
  data() {
    return {
      valve: [1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
      tableData:[{
        pipelineFlow: 15,
        pipelineFlowTotal: 17,
        runningTime: 5,
        UnattendedRuntime: 5,
        positivePressure: 3,
        negativePressure: 0,
        frontAxleTemp: 19,
        rearAxleTemp: 21,
        liquidLevel: 18,
      },{
        pipelineFlow: 12,
        pipelineFlowTotal: 14,
        runningTime: 5,
        UnattendedRuntime: 5,
        positivePressure: 0,
        negativePressure: 0,
        frontAxleTemp: 15,
        rearAxleTemp: 17,
        liquidLevel: 18,
      },{
        pipelineFlow: 3,
        pipelineFlowTotal: 0.0,
        runningTime: 5,
        UnattendedRuntime: 5,
        positivePressure: 0,
        negativePressure: 0,
        frontAxleTemp: 17,
        rearAxleTemp: 16,
        liquidLevel: 19,
      }],
    };
  },
  components: {
    tableData,
  },
  mounted() {
    // this.valve = this.valve.map((item) => {
    //   return (item = !item);
    // });
    // 伪造数据
    this.getRandomData();
    setInterval(() => {
      console.log(this.valve);
      this.valve.shift();
      this.valve.push(parseInt(Math.random() * 2, 10));
    }, 3000);
  },
  methods: {
    getRandomData(){
      console.log("--------------");
      let interval = setInterval(() => {
      for(var i = 0;i < 3;i++){
        this.tableData[i]['pipelineFlow']=this.getRandomNum(15,20)
        this.tableData[i]['pipelineFlowTotal']=this.getRandomNum(17,23)
        this.tableData[i]['positivePressure']=this.getRandomNumWithDecimals(0,2.00)
        this.tableData[i]['negativePressure']=this.getRandomNumWithDecimals(0,3.00)
        this.tableData[i]['frontAxleTemp']=this.getRandomNum(15,20)
        this.tableData[i]['rearAxleTemp']=this.getRandomNum(15,23)
        this.tableData[i]['liquidLevel']=this.getRandomNum(15,20)
      }
    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(interval);
    });
    }
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 850px;
  position: relative;
  background-image: linear-gradient(
    to right,
    #06133c 0%,
    #011669 5045 #06133c 100%
  );
}
.table1 {
  top: 0px;
  left: -10px;
  position: absolute;
}
.table2 {
  top: 0px;
  left: 450px;
  position: absolute;
}
.table3 {
  top: 0px;
  left: 910px;
  position: absolute;
}
#imgSwitch {
  width: 100%;
  height: 800px;
  margin-top: 20px;
  /* padding-bottom: 100px; */
  /* left: 50px; */
  /* margin-left: 30px; */
}
.botton0 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 64px;
  left: 62px;
}
.botton1 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 371px;
  left: 144px;
}
.botton2 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 378px;
  left: 368px;
}
.botton3 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 305px;
  left: 417px;
}
.botton4 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 140px;
  left: 527px;
}
.botton5 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 375px;
  left: 605px;
}
.botton6 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 378px;
  left: 830px;
}
.botton7 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 305px;
  left: 880px;
}
.botton8 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 140px;
  left: 990px;
}
.botton9 {
  width: 10px;
  height: 30px;
  position: absolute;
  top: 375px;
  left: 1070px;
}
.botton10 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 378px;
  right: 240px;
}
.botton11 {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 305px;
  right: 190px;
}
.red {
  background-color: #f90005;
}
.green {
  background-color: #009966;
}
</style>