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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav @sceneIdChange="sceneIdChange" nowMenu="4"></BoardTopNav>
    <div class="collapse">
      <div style="margin-bottom: 24px">
        <el-collapse  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.deviceName }}</div>
                </div>
                <div class="info" style="left: 70vh;">
                  <div class="info1">位置:</div>
                  <div class="info2">深圳</div>
                </div>
                <div class="info" style="left: 80vh;">
                  <div class="info1">日期:</div>
                  <div class="info2">2023-01-01 00:00:00</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' }"
                          style="width: 100%;margin-top: 12px;">
                  <el-table-column label="设备ID" prop="columnName">
                  </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 :total="1000" background layout="prev, pager, next">
                </el-pagination>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <el-collapse  accordion>
        <el-collapse-item v-for="i in bottomData">
          <template slot="title">
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="title"> {{ i.deviceName }}</div>
              <div class="info">
                <div class="info1">所属区域</div>
                <div class="info2">大厅</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">位置:</div>
                <div class="info2">深圳</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">日期:</div>
                <div class="info2">2023-01-01 00:00:00</div>
              </div>
            </div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

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

export default {
  components: {
    BoardTopNav
  },
  data() {
    return {
      topData: {},
      bottomData: [],
      radio: '日统计报表',
      tableData: [],
      sceneId:0
    }
  },
  mounted() {
  },
  methods: {
    sceneIdChange(e){
      this.sceneId = e
      this.getData()
    },
    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.$store.getters.sceneId)
      this.topData = data || {}
    },
    async setHistoryData() {
      const {data} = await getHistoryData({
        "sceneId": this.sceneId,
        "deviceId": 2,
        "offset": 0,
        "limit": 5,
        "startTime": 1266666666666
      })
      this.tableData = (data?.historyData?.rows || []).map((e, i) => {
        return {
          ...e,
          ...data.deviceDataColumns[i]
        }
      })
    },
    async setLinkDevices() {
      const {data} = await getLinkDevices(this.$store.getters.sceneId)
      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: 10vh;
    width: 2.6vh;
    height: 3.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>