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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <div class="leftMenu">
      <div v-for="(i,k) in deviceList" class="item" @click="getRightData(i)" :key="k">
        <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="()=>{}">查询</el-button>
            <el-button @click="()=>{}">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div :style="{height:maxHeight+'px'}" class="table">
        <el-table
          v-loading="loading"
          v-if='tableShow'
          :cell-style="setStyle"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
          :max-height="maxHeight">
          style="width: 100%">
          <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
          </el-table-column>
<!--          <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 :current-page="offset" :total="total" background layout="prev, pager, next" style="display: inline-block;float:right;" :pageSize="10" @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
  },
  data() {
    return {
      loading:false,
      tableShow: false,
      form: {
        data1: '',
        data2: '',
        data3: null
      },
      maxHeight: 0,
      tableData: [],
      deviceList:[],
      sceneId: 0,
      offset:1,
      limit:10,
      total:0,
      deviceDataColumns:[],
    }
  },
  async mounted() {
    this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
    await this.getData()
  },
  methods: {
    async currentChange(){
      await this.getRightData()
    },
    async getRightData(e){
      this.loading = true
      await this.setSelectLatestDataByDeviceMode({
        "sceneId": this.$store.getters.sceneId,
        "deviceModeId": e.deviceModeId,
        "startTime": 0,
        "offset": this.offset-1,
        "limit": 10
      })
      this.loading = false
      this.tableShow = false
      this.tableShow = true
    },
    async getData() {
      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(e){
      const {data} = await selectLatestDataByDeviceMode(e)
      this.deviceDataColumns = data.deviceDataColumns
      this.tableData = data.latestData || []
      this.total=data.total
    },
    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>