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="infoDiv">
                  <div class="info">
                    <div class="info1">设备编号:</div>
                    <div class="info2"> {{ topData.deviceCode }}</div>
                  </div>
                  <div class="info" >
                    <div class="info1">设备名称:</div>
                    <div class="info2">{{ topData.deviceName }}</div>
                  </div>
                  <div class="info" >
                    <div class="info1">设备位置:</div>
                    <div class="info2">{{ topData.deviceLocation }}</div>
                  </div>
                </div>
              </div>
            </template>
            <div>
              <div>
                <el-row :gutter="24" style="height: 30px;">
                  <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: 220px;margin-right: 12px;">
                        <el-date-picker
                          v-model="date"
                          format="yyyy-MM-dd"
                          placeholder="选择日期"
                          type="date"
                          value-format="timestamp">
                        </el-date-picker>
                      </div>
                      <el-button type="primary" @click="search">搜索</el-button>
                      <el-button @click="reset">重置</el-button>
                      <!--                                    <el-button>导出</el-button>-->
                    </div>
                  </el-col>
                </el-row>
                <el-table v-if="show" :cell-style="setStyle"
                          :data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
                          style="width: 100%;margin-top: 12px;">
                  <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
                    <template slot-scope="scope">
                      <el-image
                        v-if="scope.row[i.columnKey].toString().includes('http')"
                        style="width: 100px; height: 100px"
                        :src="scope.row[i.columnKey]"
                        :preview-src-list="[scope.row[i.columnKey]]">
                      </el-image>
                      <span v-else>{{scope.row[i.columnKey]}}</span>

                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination v-show="!isMap" :currentPage="currentPage" :pageSize="10" :total="total" background
                               layout="prev, pager, next" @current-change="currentChange">
                </el-pagination>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div v-show="isMap" id="map" class="map"></div>
      <div v-for="i in bottomData">
        <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>
      </div>
    </div>
  </div>
</template>

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

let map = null
export default {
  components: {},
  data() {
    return {
      topData: {},
      bottomData: [],
      collapseNo: '1',
      radio: '日统计报表',
      tableData: [],
      sceneId: 0,
      deviceId: 0,
      deviceModeId: 0,
      total: 0,
      currentPage: 1,
      deviceDataColumns: [],
      show: false,
      isMap: false,
      date: new Date(new Date().toLocaleDateString()).getTime()
    }
  },
  async mounted() {
    map = new AMap.Map('map', {
      zoom: 11,
      center: [113.4, 23.35],
    });
    if (this.$route.query.id) {
      this.deviceId = this.$route.query.id
      this.deviceModeId = this.$route.query.deviceModeId
    }
    await this.getData()
  },
  methods: {
    async search() {
      this.currentPage = 1
      await this.setHistoryData()
    },
    async reset() {
      this.currentPage = 1
      this.date = new Date(new Date().toLocaleDateString()).getTime()
      await this.setHistoryData()
    },
    setPolyline(e) {
      let polyline = new AMap.Polyline({
        path: e,
        borderWeight: 2, // 线条宽度，默认为 1
      });
      map.add(polyline);
      map.setFitView()
    },
    setMarker(e, i) {
      let marker = new AMap.Marker({
        position: e,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: `经度：${e[0]}\n纬度:${e[1]}\n时间：${i}`,
        offset:new AMap.Pixel(-2.5,-2.5),
        content:`<div style="width: 5px;height: 5px; border-radius: 50%;background-color: #1890ff"> </div>`
      });
      map.add(marker);
      map.setFitView()
    },
    async currentChange(e) {
      console.log(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 || {}
      if(this.topData.gpsFlag !== '1'){
        this.date = null
      }
    },
    async setHistoryData() {
      this.isMap = false
      map.clearMap()
      this.show = false
      const {data} = await getHistoryData({
        "sceneId": this.$store.getters.sceneId,
        "deviceId": this.deviceId,
        deviceModeId: this.deviceModeId,
        "offset":this.topData.gpsFlag !== '1'? (this.currentPage - 1) : null,
        "limit": this.topData.gpsFlag !== '1'?10:null,
        startTime: this.date,
        endTime: this.date ? this.date + (1000 * 60 * 60 * 24) : null
      })
      let dataList = data.historyData?.dataList || []
      if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
        this.isMap = true
        dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => {
          this.setMarker([e.longitude, e.latitude], e.ts)
        })
        this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
          return [e.longitude, e.latitude]
        }))
        // this.tableData = data.historyData?.dataList
        // this.total = data.historyData?.count
        // this.currentPage = 1
        // this.deviceDataColumns = data.deviceDataColumns
        // this.$nextTick(() => {
        //   this.show = true
        // })
      } else {
        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: relative;
    color: #1fabf3;
    font-size: 1.5vh;
    height: 100%;
    white-space: nowrap;
    display: inline-block;
    height: 100%;
    margin-right: 12px;
    vertical-align: top;

    .info1 {
      position: relative;
      line-height: 8.5vh;
      color: #fffc;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 2px;
    }

    .info2 {
      position: relative;
      line-height: 8.5vh;
      color: #fff
    }
  }
}

.map {
  width: 100%;
  height: 50vh;
}
.infoDiv{
  position: absolute;
  left: 60vh;
  height: 100%;
}
</style>