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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <div class="collapse">
      <div style="margin-bottom: 24px">
        <el-collapse v-model="collapseNo" accordion>
          <el-collapse-item name="1">
            <template slot="title">
              <div class="itemBg">
                <div class="icon"></div>
                <div class="icon1"></div>
                <div :style="'background-image: url('+(topData&&topData.devicePic)+')'" class="icon2"></div>
                <div class="title"> {{ topData.monitorUnitName }}</div>
                <div class="info">
                  <div class="info1">设备编号:</div>
                  <div class="info2"> {{ topData.deviceCode }}</div>
                </div>
                <div class="info" style="left: 70vh;">
                  <div class="info1">设备名称:</div>
                  <div class="info2">{{ topData.deviceName }}</div>
                </div>
                <div class="info" style="left: 80vh;">
                  <div class="info1">设备位置:</div>
                  <div class="info2">{{ topData.deviceLocation }}</div>
                </div>
              </div>
            </template>
            <div>
              <div>
                <!--              <el-row :gutter="24">-->
                <!--                <el-col :span="12">-->
                <!--                                    <el-radio-group v-model="radio">-->
                <!--                                      <el-radio-button label="日统计报表"></el-radio-button>-->
                <!--                                      <el-radio-button label="月统计报表"></el-radio-button>-->
                <!--                                    </el-radio-group>-->
                <!--                </el-col>-->
                <!--                <el-col :span="12">-->
                <!--                  <div style="position: absolute; right: 30px;">-->
                <!--                    <span style="color: #fff;"> 开始时间：</span>-->
                <!--                    <div style="display: inline-block;width: 200px;margin-right: 12px;">-->
                <!--                      <el-date-picker placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>-->
                <!--                    </div>-->
                <!--                    <el-button type="primary">搜索</el-button>-->
                <!--                    <el-button>重置</el-button>-->
                <!--                    <el-button>导出</el-button>-->
                <!--                  </div>-->
                <!--                </el-col>-->
                <!--              </el-row>-->
                <el-table :cell-style="setStyle" :data="tableData"
                          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" v-if="show"
                          style="width: 100%;margin-top: 12px;">
                  <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
                  </el-table-column>
<!--                  <el-table-column label="传感器编号" prop="columnKey">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="alias" prop="alias">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="rssi" prop="rssi">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="ts" prop="ts">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="value1" prop="value1">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="voltage" prop="voltage">-->
<!--                  </el-table-column>-->
                </el-table>
                <el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background layout="prev, pager, next" @current-change="currentChange">
                </el-pagination>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

<!--      <el-collapse  accordion>-->
        <div v-for="i in bottomData" >
<!--          <template slot="title">-->
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div>
              <div class="title"> {{ i.deviceName }}</div>
              <div class="info">
                <div class="info1">设备编号:</div>
                <div class="info2"> {{ i.deviceCode }}</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">设备名称:</div>
                <div class="info2">{{ i.deviceName }}</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">设备位置:</div>
                <div class="info2">{{ i.deviceLocation }}</div>
              </div>
            </div>
<!--          </template>-->
        </div>
<!--      </el-collapse>-->
    </div>
  </div>
</template>

<script>
import {
  getDeviceInfo,
  getHistoryData,
  getLinkDevices
} from '@/api/board/senso'

export default {
  components: {
  },
  data() {
    return {
      topData: {},
      bottomData: [],
      collapseNo:'1',
      radio: '日统计报表',
      tableData: [],
      sceneId:0,
      deviceId:0,
      deviceModeId:0,
      total:0,
      currentPage:1,
      deviceDataColumns:[],
      show:false
    }
  },
  async mounted() {
    if(this.$route.query.id){
      this.deviceId = this.$route.query.id
      this.deviceModeId = this.$route.query.deviceModeId
    }
    await this.getData()
  },
  methods: {
    async currentChange(e){
      this.currentPage = e
     await this.setHistoryData()
    },
    async getData() {
      await this.setDeviceInfo()
      await this.setLinkDevices()
      await this.setHistoryData()
    },
    setStyle(e) {
      if (e.rowIndex % 2 === 0) {
        return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
      } else {
        return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
      }
    },
    async setDeviceInfo() {
      const {data} = await getDeviceInfo(this.deviceId)
      this.topData = data || {}
    },
    async setHistoryData() {
      this.show = false
      const {data} = await getHistoryData({
        "sceneId":this.$store.getters.sceneId,
        "deviceId": this.deviceId,
        deviceModeId:this.deviceModeId,
        "offset": this.currentPage -1,
        "limit": 1,
        "startTime": 0
      })
      this.tableData = data.historyData.dataList
      this.total = data.historyData.count
      this.currentPage = 1
      this.deviceDataColumns = data.deviceDataColumns
      this.$nextTick(()=>{
        this.show = true
      })
    },
    async setLinkDevices() {
      const {data} = await getLinkDevices(this.deviceId)
      this.bottomData = data
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/senso/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.collapse {
  position: absolute;
  top: 9%;
  left: 2%;
  width: 96%;
  height: 87%;
  overflow: auto;

  /deep/ .el-collapse-item__wrap {
    background-color: #0000;
    border-color: #0000;
  }

  /deep/ .el-table {
    background-color: #FFF0 !important;
    color: #fff;
  }

  /deep/ .el-table tr {
    background-color: #FFF0 !important;
  }

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

  /deep/ .el-table::before, .el-table--group::after, .el-table--border::after {
    background-color: #0000;
  }

  /deep/ .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: #0000;
  }

  /deep/ .el-collapse-item__header {
    background-color: #0000;
    border-color: #0000;
    height: auto;
  }

  /deep/ .el-collapse {
    border-color: #0000;
  }

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

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


.itemBg {
  background-image: url("~@/assets/board/senso/itemBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 17vh;
  position: relative;

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

  .icon1 {
    background-image: url("~@/assets/board/senso/iconBottom.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 2vh;
    left: 5vh;
    width: 13vh;
    height: 13vh;
  }

  .icon2 {
    background-image: url("~@/assets/board/senso/icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 6.2vh;
    width: 10.6vh;
    height: 10.3vh;
    transform: translateY(-50%);
  }

  .title {
    position: absolute;
    left: 25vh;
    color: #1fabf3;
    line-height: 17vh;
    font-size: 2.5vh;
  }

  .info {
    position: absolute;
    left: 60vh;
    color: #1fabf3;
    font-size: 1.5vh;
    height: 100%;
    white-space: nowrap;

    .info1 {
      position: absolute;
      bottom: 55%;
      color: #fffc
    }

    .info2 {
      position: absolute;
      top: 55%;
      color: #fff
    }
  }
}
</style>