SaiLun.Thermoelectricity/ruoyi-ui/src/views/board/index3.vue

<template>
  <div>
    <div class="content">
      <div class="title">赛轮智慧热电无人巡检系统</div>
      <div class="subTitle" v-for="i in subTitleList" :style="`top:${i.top}%;left:${i.left}%`">{{ i.name }}</div>
      <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
      <div class="span" style="color: #3597df;top: 19.5%;left: 38.7%;">A项温度</div>
      <div class="span" style="color: #3597df;top: 19.5%;left: 54.7%;">B项温度</div>
      <div class="span" style="color: #3597df;top: 31.2%;left: 38.7%;">C项温度</div>
      <div class="span" style="color: #3597df;top: 31.2%;left: 54.7%;">D项温度</div>
      <div class="span" style="color: #3597df;top: 48.6%;left: 38.7%;">A项温度</div>
      <div class="span" style="color: #3597df;top: 48.6%;left: 54.7%;">B项温度</div>
      <div class="span" style="color: #3597df;top: 60.5%;left: 38.7%;">C项温度</div>
      <div class="span" style="color: #3597df;top: 60.5%;left: 54.7%;">D项温度</div>
      <div class="span" style="color: #3597df;top: 78.1%;left: 38.7%;">1#烟感</div>
      <div class="span" style="color: #3597df;top: 78.1%;left: 54.7%;">2#烟感</div>
      <div class="span" style="color: #3597df;top: 89.8%;left: 38.7%;">3#烟感</div>
      <div class="span" style="color: #3597df;top: 89.8%;left: 54.7%;">4#烟感</div>

      <div class="span1" style="color: #3597df;top: 19.5%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 19.5%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 31.2%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 31.2%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 48.6%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 48.6%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 60.5%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 60.5%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>℃
      </div>
      <div class="span1" style="color: #3597df;top: 78.1%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 78.1%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 89.8%;left: 45.5%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>
      <div class="span1" style="color: #3597df;top: 89.8%;left: 61.7%"><span
        style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
      </div>


    </div>
  </div>
</template>

<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
  baseMonitorInfoList,
  countCabinet,
  boardTempList,
  selectLastTWTempertureData, recordBusbarAlarmCount
} from "@/api/board/index2";

export default {
  data() {
    return {
      subTitleList: [
        {
          name: '湿度曲线',
          top: 11.2,
          left: 3
        },
        {
          name: '照度',
          top: 40.5,
          left: 3
        },
        {
          name: '颗粒物柱状图',
          top: 69.6,
          left: 30.8
        },
        {
          name: '1#变压器测温',
          top: 11.2,
          left: 35.4
        },
        {
          name: '2#变压器测温',
          top: 40.5,
          left: 35.4
        },
        {
          name: '烟感',
          top: 69.6,
          left: 35.4
        },
        {
          name: '告警统计',
          top: 11.2,
          left: 68
        },
        {
          name: '未处理报警',
          top: 55.1,
          left: 68
        },
      ],
    }
  },
  components: {
    vueSeamlessScroll,
    Chart
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
    }
  }
}
</script>
<style scoped>
.content {
  background-image: url("~@/assets/board/bg3.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.subTitle {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.9vw;
  color: #fff;
  letter-spacing: 2px;
}

.title {
  position: absolute;
  top: 2.8%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  color: #fff;
  font-weight: 700;
  letter-spacing: 10px;
  transform: translateY(-50%);
}

.time {
  position: absolute;
  top: 2.4%;
  left: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
  letter-spacing: 1px;
}

.span {
  position: absolute;
  transform: translateY(-50%);
  font-size: 0.9vw;
  letter-spacing: 1px;
}

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.9vw;
  letter-spacing: 1px;
}
</style>