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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav  @sceneIdChange="sceneIdChange" nowMenu="4"></BoardTopNav>
    <div class="leftMenu">
      <div v-for="i in deviceList" class="item">
        <span>{{ i.deviceModeName }}</span>
      </div>
    </div>
    <div ref="right" class="right">
      <div ref="search" class="search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="传感器编号">
            <el-input v-model="form.data1" placeholder="传感器编号"></el-input>
          </el-form-item>
          <el-form-item label="传感器名称">
            <el-input v-model="form.data2" placeholder="传感器名称"></el-input>
          </el-form-item>
          <el-form-item label="采集时间">
            <el-date-picker
              v-model="form.data3"
              placeholder="选择日期时间"
              type="datetime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div :style="{height:maxHeight+'px'}" class="table">
        <el-table
          v-if='tableShow'
          :cell-style="setStyle"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
          :max-height="maxHeight">
          style="width: 100%">
          <el-table-column
            label="rssi"
            prop="rssi">
          </el-table-column>
          <el-table-column
            label="value1"
            prop="value1">
          </el-table-column>
          <el-table-column
            label="编号"
            prop="devicecode">
          </el-table-column>
          <el-table-column
            label="alias"
            prop="alias">
          </el-table-column>
          <el-table-column
            label="设备名称"
            prop="devicename">
          </el-table-column>
          <el-table-column
            label="ts"
            prop="ts">
          </el-table-column>
          <el-table-column
            label="voltage"
            prop="voltage">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="toHistory"
              >查看历史</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div ref="pagination" style="margin-top: 12px;height: 36px;">
        <el-pagination :total="1000" background layout="prev, pager, next" style="display: inline-block;float:right;">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectLatestDataByDeviceMode,
  getDeviceModesBySceneId,
} from '@/api/board/equipmentMonitoring'
import BoardTopNav from '@/components/BoardTopNav'

export default {
  components: {
    BoardTopNav
  },
  data() {
    return {
      tableShow: false,
      form: {
        data1: '',
        data2: '',
        data3: null
      },
      maxHeight: 0,
      tableData: [],
      deviceList:[],
      sceneId: 0,
    }
  },
  mounted() {
    this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
    this.tableShow = true
    t
  },
  methods: {
    sceneIdChange(e){
      this.sceneId = e
      this.getData()
    },
    async getData() {
      await this.setSelectLatestDataByDeviceMode()
      await this.setDeviceModesBySceneId()
    },
    setStyle(e) {
      if (e.rowIndex % 2 === 0) {
        return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
      } else {
        return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
      }
    },
    async setSelectLatestDataByDeviceMode(){
      const {data} = await selectLatestDataByDeviceMode({
        "sceneId": this.$store.getters.sceneId,
        "deviceModeId": 1,
        "startTime": 1222222222222,
        "offset": 0,
        "limit": 10
      })
      this.tableData = data.latestData || []
      console.log(this.tableData)
    },
    async setDeviceModesBySceneId(){
      const {data} = await getDeviceModesBySceneId( {
        "sceneId": this.$store.getters.sceneId,
      })
      this.deviceList = data
    },
    toHistory(){
      this.$router.push({path: "/board/senso"});
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/equipmentMonitoring/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}


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

.leftMenu {
  position: absolute;
  width: 14%;
  height: 84%;
  top: 12%;
  left: 2%;
  padding: 1vw;
  overflow: auto;

  .item {
    background-image: url("~@/assets/board/equipmentMonitoring/item.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12vw;
    height: 5.1vw;
    margin-bottom: 1vw;
  }

  span {
    position: absolute;
    left: 44%;
    line-height: 5.1vw;
    font-size: 1vw;
    color: #f1f3f5;
    white-space: nowrap;
  }

}


.right {
  position: absolute;
  width: 78.5%;
  height: 84%;
  top: 12%;
  left: 19%;

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

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

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

  .table {


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

    /deep/ .el-table th.el-table__cell.is-leaf {
      border-color: #0000;
    }

    /deep/ .el-table tr {
      background-color: #0000;
    }

    /deep/ .el-table td.el-table__cell {
      border-color: #0000;
    }

    /deep/ .el-table::before {
      background-color: #0000;
    }

    /deep/ .el-table .el-table__header-wrapper th {
      color: #05ecf3;
    }
  }
}
</style>