highwaysaas/ruoyi-ui/src/views/board/equipment/index.vue

<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav ref="boardTopNav" nowMenu="3" @sceneIdChange="sceneIdChange"></BoardTopNav>
    <div class="title">物联网平台</div>
    <div class="tree">

      <el-tree
        :data="treeData"
        accordion
        node-key="id"
        @node-click="treeClick">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
      </span>
      </el-tree>
    </div>
    <div v-if="show" class="equipmentInfo">
      <p>
        <span>设备名称：</span>
        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitName }}</span>
      </p>
      <p>
        <span>设备id：</span>
        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitId }}</span>
      </p>
      <p>
        <span>设备状态：</span>
        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitStatus === 1 ? '正常' : '异常' }}</span>
      </p>
      <p>
        <span>设备类型：</span>
        <span style="color: #d9dee3">{{ MonitorInfo.monitorUnitTypeId }}</span>
      </p>
    </div>
    <div v-if="show" class="img"></div>
    <div class="terminal">
      <el-form :model="form" class="demo-form-inline">
        <el-form-item label="传感器名称：">
          <el-input v-model="form.data1" placeholder="传感器名称" style="width:calc(100% - 100px)"></el-input>
        </el-form-item>
      </el-form>
      <div class="terminalList">
        <div v-for="(i,k) in controlList" class="item">
          <div class="icon"></div>
          <div class="title">{{ i.deviceName }}</div>
          <div class="switch">
            <el-switch
              v-model="i.deviceType==='1'"
              active-color="#1165a1"
              inactive-color="#1facf4"
              @change="switchChange(k)">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div v-for="i in acquisitionList" class="item">
        <div class="iconBg"></div>
        <div class="icon"></div>
        <div class="rightBg">
          <div class="title">{{ i.deviceName }}</div>
          <div style="position: absolute;left: 24%;top: 0px;width: 75%;height: 100%;">
            <div v-for="val in Object.keys(i.deviceDataMaps[0]).slice(0,3)" class="infoItem">
              <div class="span">{{ val }}:</div>
              <div class="spanBg"></div>
              <div class="num">{{ i.deviceDataMaps[0][val] }}</div>
            </div>
          </div>
          <div class="btn">
            <div class="btnC" style="top: 50%">
              <el-button type="primary" @click="toHistory">历史记录</el-button>
            </div>
          </div>

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

<script>
import {
  treeList,
  selectDevicesByMonitorUnitId,
  selectLatestDataByDeviceMode,
  getMonitorById
} from '@/api/board/equipment'

import BoardTopNav from '@/components/BoardTopNav'

let getDeviceInterval = null
export default {
  components: {
    BoardTopNav
  },
  data() {
    return {
      show: false,
      monitorUnitId: '',
      data1: true,
      form: {
        data1: ''
      },
      treeData: [],
      controlList: [],
      acquisitionList: [],
      MonitorInfo: {},
      sceneId: 0,
      deviceId: ''
    }
  },
  async mounted() {
    this.sceneId = this.$store.getters.sceneId

  },
  methods: {
    sceneIdChange(e) {
      this.sceneId = e
      this.getData()
    },
    async getData() {
      await this.getTree()
    },
    switchChange(e) {
      this.$confirm((this.controlList[e].deviceType === '1' ? '关闭' : '开启') + '该设备？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功!'
        });
        this.controlList[e].deviceType === '1' ? this.controlList[e].deviceType = '0' : this.controlList[e].deviceType = '1'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        });
      });
    },
    async getTree() {
      const {data} = await treeList(this.$store.getters.sceneId)
      this.treeData = data
    },
    treeClick(e) {
      if (!e.children?.length > 0) {
        this.monitorUnitId = e.id
        this.getDevice(e.id)
        this.getRightDevice(e.id)
        this.setMonitorById(e)
        this.show = true
        if (typeof getDeviceInterval === 'number') {
          clearInterval(getDeviceInterval)
        }
        getDeviceInterval = setInterval(() => {
          this.getDevice(this.deviceId)
        }, 30 * 1000)
      }
    },
    async getDevice(e) {
      const {data} = await selectDevicesByMonitorUnitId(this.$store.getters.sceneId, e)
      this.deviceId = e
      this.controlList = data.control
      this.acquisitionList = data.acquisition
    },
    async getRightDevice(e) {
      const data = await selectLatestDataByDeviceMode({
        "sceneId": this.$store.getters.sceneId,
        "deviceModeId": 1,
        "offset": 0,
        "limit": 1
      })
    },
    async setMonitorById(e) {
      const {data} = await getMonitorById(e.id)
      this.MonitorInfo = data
    },
    toHistory() {
      this.$router.push({path: "/board/senso"});
    }
  },
  beforeDestroy() {
    clearInterval(getDeviceInterval)
  }
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/equipment/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.title {
  position: absolute;
  top: 12.9%;
  left: 6%;
  font-size: 0.9vw;
  color: #d9dee3;
}

.tree {
  position: absolute;
  top: 18.9%;
  left: 2%;
  width: 13%;
  height: 78%;

  /deep/ .el-tree {
    background-color: #0000;
    color: #d9dee3;
  }

  /deep/ .el-tree-node__content:hover {
    background-color: #0d5e93;
  }

  /deep/ .el-tree-node__content {
    height: 40px;
    border-bottom: 1px solid #fff2;
  }

  /deep/ .is-current {
    background-color: #0d5e93;
  }

  /deep/ .custom-tree-node {
    padding-left: 8px;
  }
}

.equipmentInfo {
  position: absolute;
  top: 11.6%;
  left: 17.2%;
  width: 16%;
  height: 20%;
  color: #1684c2;
  padding: 2vh 0 0 1vw;

  p {
    margin: 0;
    line-height: 4vh;
    font-size: 0.9vw;
  }
}

.img {
  background-image: url("~@/assets/board/equipment/icon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 11.5%;
  left: 33.7%;
  width: 12%;
  height: 20.4%;
}

.terminal {
  position: absolute;
  top: 35.6%;
  left: 17.2%;
  width: 28%;
  height: 61%;
  padding-top: 14px;

  /deep/ .el-form-item__label {
    color: #25bffc !important;
    font-weight: normal;
  }

  /deep/ .el-input__inner {
    background-color: #0000;
    border-color: #25bffc;
  }

  .terminalList::-webkit-scrollbar {
    width: 0;
  }

  .terminalList {
    position: absolute;
    top: 12%;
    left: 0%;
    width: 100%;
    height: 85%;
    overflow: auto;

    ::-webkit-scrollbar {
      width: 0;
    }

    .item {
      background-image: url("~@/assets/board/equipment/item.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      width: 100%;
      height: 7vw;
      margin-top: 12px;

      .icon {
        background-image: url("~@/assets/board/equipment/icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 13%;
        left: 3.3%;
        width: 19.5%;
        height: 73%;
      }

      .title {
        position: absolute;
        top: 50%;
        left: 30%;
        transform: translateY(-50%);
        font-size: 1vw;
        color: #1facf4;
      }

      .switch {
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
      }
    }
  }
}

.right::-webkit-scrollbar {
  width: 0;
}

.right {
  position: absolute;
  top: 16%;
  left: 48%;
  width: 50%;
  height: 80%;
  overflow: auto;

  .item {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
    height: 18vh;
    padding: 1vh 0;

    .iconBg {
      background-image: url("~@/assets/board/equipment/iconBg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 16%;
      left: 5%;
      width: 16vh;
      height: 16vh;
    }

    .rightBg {
      background-image: url("~@/assets/board/equipment/right.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 16%;
      left: calc(10% + 16vh);
      width: calc(90% - 16vh);;
      height: 16vh;

      .title {
        position: absolute;
        top: 50%;
        left: 12%;
        color: #1facf4;
        transform: translate(-50%, -50%);
        font-size: 1vw;
      }

      .infoItem {
        display: inline-block;
        position: relative;
        width: 6vw;
        height: 100%;

        .spanBg {
          //background-image: url("~@/assets/board/equipment/icon.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: absolute;
          bottom: 55%;
          left: 12%;
          width: 2vw;
          height: 0.8vw;

        }

        .span {
          position: absolute;
          bottom: 55%;
          left: 12%;
          color: #f4f4f4;
          font-size: 0.5vw;
        }

        .num {
          position: absolute;
          top: 55%;
          left: 12%;
          color: #f4f4f4;
          font-size: 0.5vw;
        }
      }

      .btn {
        position: absolute;
        top: 0%;
        right: 5%;
        width: 6vw;
        height: 100%;
      }

      .btnC {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 50%);
      }
    }
  }
}
</style>