<template>
  <div>
    <div class="content">
      <div class="title">赛轮智慧热电无人巡检系统</div>
      <!--      <div class="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>-->
      <div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>

      <div class="center">
        <div class="list" v-for="(i,k) in list" :style="`left:${7.7+12.1*k}%`">
          <div class="itemTitle">{{ i.label }}</div>
          <div class="items">
            <div class="item" v-for="(ii,kk) in i.children" @click="getInfo(ii)">
              <div class="name">{{ ii.label }}</div>
              <div class="tem">{{ ii.tempreture ? `温度：${ii.tempreture}℃` : '' }}</div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="50%">
        <div class="dialogItem" v-for="i in list1">
          <div class="name">{{ i.label }}</div>
          <div class="tem">温度：{{ i.tempreture }}℃</div>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
      </el-dialog>


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

<script>

import {monitorInfoTree} from "@/api/board/index1";

export default {
  data() {
    return {
      list: [],
      list1: [],
      title: '',
      dialogVisible: false,
    }
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, 1000 * 60 * 5)
  },
  methods: {
    getData() {
      monitorInfoTree({monitorType: 1}).then(e => {
        this.list = e.data
      })
    },
    getInfo(e) {
      this.title = e.label
      this.dialogVisible = true
      console.log(e)
      this.list1 = e.children || []
    }
  }
}
</script>
<style scoped>
.content {
  background-image: url("~@/assets/board/bg1.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.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%);
}

.safe {
  position: absolute;
  top: 2.4%;
  right: 2%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.7vw;
}

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

.center {
  position: absolute;
  width: 100%;
  height: 85%;
  top: 9.3%;
  left: 0;
  overflow: auto;
}

.list {
  position: absolute;
  width: 11%;
  height: 100%;
  top: 0%;
  transform: translateX(-50%);
  background-image: url("~@/assets/board/item.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


.itemTitle {
  position: absolute;
  top: 4.3%;
  left: 15%;
  font-size: 0.8vw;
  color: #fefefe;
  transform: translateY(-50%);
}

.items {
  position: absolute;
  top: 8.4%;
  left: 0;
  width: 100%;
  height: 91.4%;
  overflow: auto;
}

.items::-webkit-scrollbar {
  display: none;
}

.item {
  position: relative;
  width: 100%;
  height: 16.7%;
  background-image: url("~@/assets/board/icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.name {
  position: absolute;
  top: 37.6%;
  left: 49%;
  width: 48%;
  transform: translateY(-50%);
  font-size: 0.95vw;
  color: #fefefe;
  letter-spacing: 2px;
}

.tem {
  position: absolute;
  top: 62.7%;
  left: 49%;
  transform: translateY(-50%);
  font-size: 0.7vw;
  color: #598fce;
  letter-spacing: 1px;
  white-space: nowrap;
}

.dialogItem {
  width: 210px;
  height: 140px;
  display: inline-block;
  margin-right: 12px;
  background-image: url("~@/assets/board/icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.dialogItem .name {
  color: #000;
}
</style>
