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" style="min-height: 60px">
        <el-form :inline="true" :model="form" class="demo-form-inline" v-show="tableShow">
          <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"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="reset">重置</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(scope.row.deviceid,scope.row.devicemodeid)"
              >查看历史</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="limit" @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
      },
      deviceModeId:'',
      maxHeight: 0,
      tableData: [],
      deviceList:[],
      sceneId: 0,
      offset:1,
      limit:10,
      total:0,
      deviceDataColumns:[],
      tableDataRow:[]
    }
  },
  async mounted() {
    this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
    await this.getData()
  },
  methods: {
    query(){
      this.getRightData({deviceModeId:this.deviceModeId})
    },
    reset(){
      this.form = {
        data1: '',
        data2: '',
        data3: null
      }
      this.getRightData({deviceModeId:this.deviceModeId})
    },
    async currentChange(e){
      this.tableData =this.tableDataRow.slice(this.limit*(e-1),this.limit*e)
    },
    async getRightData(e){
      this.deviceModeId = e.deviceModeId
      this.loading = true
      await this.setSelectLatestDataByDeviceMode({
        "sceneId": this.$store.getters.sceneId,
        "deviceModeId": e.deviceModeId,
        deviceCode:this.form.data1,
        deviceName:this.form.data2,
        startTime:this.form?.data3?.length>1? new Date(this.form.data3[0]).getTime():'',
        endTime:this.form?.data3?.length>1? new Date(this.form.data3[1]).getTime():'',
        // "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.tableDataRow =data.latestData || []
      this.tableData =( data.latestData || []).slice(0,this.limit)
      this.total=data.latestData.length || 0
      this.offset = 1
    },
    async setDeviceModesBySceneId(){
      const {data} = await getDeviceModesBySceneId( {
        "sceneId": this.$store.getters.sceneId,
      })
      this.deviceList = data
    },
    toHistory(e,i){
      console.log(e)
      console.log(i)
      this.$router.push({path: "/board/senso",query:{id:e,deviceModeId:i}});
    }
  }
};
</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;
    }
    /deep/.el-range-input{
      background-color: #0000;
    }
  }

  .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>