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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <div class="table2">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 20%">
          设备名称
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 20%">
          经度
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 20%">
          纬度
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 40%">
          操作
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="{...chart1TableOption,limitMoveNum:10}"
        :data="table2Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in table2Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable" style="width: 20%">
              {{ item.deviceName }}
            </div>
            <div
              class="scrollTable" style="width: 20%">
              {{ item.longitude }}
            </div>
            <div
              class="scrollTable" style="width: 20%">
              {{ item.latitude }}
            </div>
            <div class="scrollTable" style="width: 40%">
              <el-button size="mini" type="primary" @click=" mapOrientation(item)">地图定点</el-button>
              <el-button size="mini" type="primary" @click="toEquipmentInfo(item)">设备信息</el-button>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="table1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;">
          告警编号
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          告警类型
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          告警单元
        </div>
        <div class="scrollTable" style="font-weight: bold;">
          操作
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="{...chart1TableOption,limitMoveNum:10}"
        :data="table1Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTable">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTable">
              {{ item.value3 }}
            </div>
            <div class="scrollTable" style="width: 25%">
              <el-button v-if="item.status === '0'" size="mini" type="primary" @click="dispose(item)">处理</el-button>
              <span v-else>已处理</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div>
      <div class="title1">信标设备列表</div>
      <div class="title2">告警信息</div>
      <div class="info1">监控单元数量</div>
      <div class="info2">设备数量</div>
      <div class="info3">在线设备数量</div>
      <div class="num1">{{ num2 }}</div>
      <div class="num2">{{ num1 }}</div>
      <div class="num3">{{ num3 }}</div>
    </div>
    <div id="map" class="map"></div>
    <div class="isRail">
      <el-switch
        v-model="isRail"
        @change="RailChange"
        active-text="显示电子围栏"
        inactive-text="隐藏电子围栏">
      </el-switch>
    </div>
    <el-dialog title="历史记录" :visible.sync="historyDialog">

      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            设备编号
          </template>
          {{ equipmentInfo.deviceId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            设备名称
          </template>
          {{ equipmentInfo.deviceName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            监控单元
          </template>
          {{ equipmentInfo.monitorUnitName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            城市名称
          </template>
          {{ equipmentInfo.deviceLocation }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            经度
          </template>
          {{ equipmentInfo.longitude }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            纬度
          </template>
          {{ equipmentInfo.latitude }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            备注
          </template>
          {{ equipmentInfo.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-top: 12px">
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="form.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getHistoryData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="historyData"
        style="width: 100%">
        <el-table-column
          prop="deviceId"
          label="设备编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="longitude"
          label="经度"
          width="180">
        </el-table-column>
        <el-table-column
          prop="latitude"
          label="纬度"
          width="180">
        </el-table-column>
        <el-table-column
          prop="speed"
          label="速度">
        </el-table-column>
        <el-table-column
          prop="ts"
          label="采集时间">
          <template slot-scope="scope">
            {{ parseTime(scope.row.ts) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="form.pageNum"
        :limit.sync="form.pageSize"
        @pagination="getHistoryData"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="isDispose"
      width="30%">

      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            设备id
          </template>
          {{ warInfo.deviceId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            监控单元名称
          </template>
          {{ warInfo.monitorUnitName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            监控单元类型
          </template>
          {{ warInfo.monitorUnitTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警编号
          </template>
          {{ warInfo.alarmInfoId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警类型
          </template>
          {{ warInfo.alarmTypeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警位置
          </template>
          {{ warInfo.location }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警信息
          </template>
          {{ warInfo.alarmLevelName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警时间
          </template>
          {{ warInfo.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            告警区域
          </template>
          {{ warInfo.areaName }}
        </el-descriptions-item>
      </el-descriptions>

      <span>备注</span>
      <el-input
        style="margin-top: 12px;margin-bottom:12px"
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDispose = false">取 消</el-button>
        <el-button type="primary" @click="disposeThis">处理当前</el-button>
        <el-button type="primary" @click="disposeAll">处理所有</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
import {
  alarmStats,
  subDevice,
  getAlarmInfos,
  ElectronicNumVo,
  selectDeviceLatitudeAndLongitude
} from '@/api/board/GPS'
import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png'
import {handleAlarmInfo} from "@/api/board/index";
import {selectBeaconDevicesHistory} from "../../../api/board/GPS";
import {selectMonitorElectronic} from "../../../api/board";

let map = null
let polyEditor = null
let texts = []
let polygons = []
let circles = []
export default {
  components: {
    Chart,
    vueSeamlessScroll,
  },
  watch: {
    async $route(to, from) {
      await this.getData()
    }
  },
  data() {
    return {
      warInfo: {},
      textarea: '',
      isDispose: false,
      disposeNo: '',
      loading: false,
      equipmentInfo: {},
      num1: 0,
      num2: 0,
      num3: 0,
      chart1TableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      chart1Option: {
        grid: {
          left: "0%",
          right: "5%",
          top: "0%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fffa",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff4",
              type: 'dashed'
            },
          },
          boundaryGap: [0, 0.01],
        },
      },
      table1Data: [],
      table2Data: [],
      sceneId: 0,
      isRail: false,
      form: {},
      total: 100,
      historyDialog: false,
      historyData: []
    }
  },
  async mounted() {
    await this.getData()
  },
  methods: {
    async getData() {
      if (this.$store.getters.sceneId === null) return
      await this.createMap()
      await this.getAlarmStats()
      await this.getAubDevice()
      await this.setAlarmInfos()
      await this.setElectronicNumVo()
      await this.getTable2Data()
    },
    dispose(e) {

      this.warInfo = e
      this.textarea = ''
      this.isDispose = true
      this.disposeNo = e.no
    },
    createMap() {
      map = new AMap.Map('map', {
        // mapStyle: 'amap://styles/blue',
        zoom: 11,
        center: [113.4, 23.35],
      });
    },
    setText(e) {
      let position = e.areaPoints?.length > 0 ? e.areaPoints : e.centerPoint
      if (position.length > 0) {
        let length = position.length
        let longitudes = e.areaPoints.map(e => e.longitude).reduce((a, b) => a + b)
        let latitudes = e.areaPoints.map(e => e.latitude).reduce((a, b) => a + b)
        position = [longitudes / length, latitudes / length]
      } else {
        position = [e.centerPoint.longitude, e.centerPoint.latitude]
      }
      let text = new AMap.Text({
        text: '<div style="color:#fff;width: 100%;height: 100%;">' + '总数：' + e.deviceCount + (e.abnormalCount ? ('/异常数量：' + e.abnormalCount) : '') + '</div>',
        anchor: 'center',
        draggable: true,
        cursor: 'pointer',
        position: position
      });
      text.setStyle({
        'background-color': e.abnormalCount ? '#fe0000' : '#0055fe',
        padding: '4px 12px',
        'font-size': '1vw'
      })
      map.add(text)
      texts.push(text)
    },
    setPolygon(position, val) {
      let e = position.map(val => {
        return [val.longitude, val.latitude]
      })
      let thisPolygon = new AMap.Polygon({
        path: e,
        fillColor: val > 0 ? '#ff0000' : '#1791fc',
      });
      map.add(thisPolygon)
      map.setFitView()
      polygons.push(thisPolygon)
    },
    setCircle(center, radius, e) {
      let circle = new AMap.Circle({
        center,
        radius,
        borderWeight: 3,
        strokeColor: e ? '#ff0000' : "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeDasharray: [10, 10],
        fillColor: e > 0 ? '#ff0000' : '#1791fc',
      })
      map.add(circle);
      map.setFitView()
      circles.push(circle)
    },
    async getAlarmStats() {
      if (this.$store.getters.sceneId === null) return
      const {data} = await alarmStats(this.$store.getters.sceneId)
    },
    async getAubDevice() {
      let data = await subDevice(this.$store.getters.sceneId)
      this.num1 = data.deviceNum
      this.num2 = data.subSum
      this.num3 = data.onlineDeviceNum
    },
    async setAlarmInfos() {
      const {rows: data} = await getAlarmInfos({"sceneId": this.$store.getters.sceneId})
      this.table1Data = data.map((e, i) => {
        return {
          value1: e.alarmInfoId,
          value2: e.alarmTypeName,
          value3: e.monitorUnitName,
          status: e.handleStatus
        }
      })
    },
    async setElectronicNumVo() {
      if (!this.isRail) {
        return
      }
      const {data} = await ElectronicNumVo(this.$store.getters.sceneId)
      data.forEach(e => {
        if (e.areaPoints?.length > 0) {
          this.setPolygon(e.areaPoints, e.abnormalCount)
        }
        if (e.centerPoint) {
          this.setCircle([e.centerPoint.longitude, e.centerPoint.latitude], e.radius, e.abnormalCount)
        }
        this.setText(e)
      })
    },
    RailChange(e) {
      if (e) {
        this.setElectronicNumVo()
      } else {
        map.remove(texts)
        map.remove(polygons)
        map.remove(circles)
      }
    },
    async getTable2Data() {
      const {data} = await selectDeviceLatitudeAndLongitude(this.$store.getters.sceneId)
      this.table2Data = data
      data.forEach(e => {
        this.setMarker(e)
      })
    },

    setMarker(e) {
      let marker = new AMap.Marker({
        position: [e.longitude, e.latitude],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceLocation}\n备注：${e.remark}`,
        offset: new AMap.Pixel(-15, -30),
        content: `<div >
 <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
 <path d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" p-id="4306">

</path>
</svg>
</div>`
      });
      marker.on('click', async () => {
        if (polygons.length > 0 || circles.length > 0) {
          map.remove(polygons)
          map.remove(circles)
          polygons = []
          circles = []
          return
        }
        const {data} = await selectMonitorElectronic(e.deviceId)
        data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
          if (e.areaShapeFlag === '1') {
            this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
          }
          if (e.areaShapeFlag === '2') {
            let arr = e.areaRange.split(',')
            this.setCircle([arr[0], arr[1]], arr[2])
          }
        })
      })
      map.add(marker);
    },
    mapOrientation(e) {
      map.setZoomAndCenter(16, [e.longitude, e.latitude])
    },
    toEquipmentInfo(e) {
      this.equipmentInfo = e
      console.log(e)

      this.historyDialog = true
      this.form = {
        pageNum: 1,
        pageSize: 10,
        deviceId: e.deviceId,
        time: [],
      }
      this.getHistoryData()
      // this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`)
    },
    async getHistoryData() {
      this.loading = true
      let query = this.form
      query.startTime = this.form.time?.[0]?.getTime()
      query.endTime = this.form.time?.[1]?.getTime()
      delete query.time
      const data = await selectBeaconDevicesHistory(query)
      this.loading = false
      this.historyData = data.rows
      this.total = data.total
    }
  }
};
</script>
<style scoped lang="less">
.container {
  background-image: url("~@/assets/board/GPS/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.table2 {
  position: absolute;
  width: 25%;
  height: 21%;
  top: 16%;
  left: 3%;
}

.table1 {
  position: absolute;
  top: 48%;
  left: 2.5%;
  width: 26%;
  height: 48%;
  overflow: hidden;
}

.scrollTable {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 25%;
}

.title1 {
  position: absolute;
  top: 13%;
  left: 15.5%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.title2 {
  position: absolute;
  top: 45.4%;
  left: 15.6%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #fff;
}

.info1 {
  position: absolute;
  top: 18%;
  left: 39%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #179ce1;
}

.info2 {
  position: absolute;
  top: 18%;
  left: 62%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #179ce1;
}

.info3 {
  position: absolute;
  top: 18%;
  left: 83%;
  transform: translate(-50%, -50%);
  font-size: 1vw;
  color: #179ce1;
}

.num1 {
  position: absolute;
  top: 18%;
  left: 47%;
  transform: translate(-50%, -50%);
  font-size: 1.4vw;
  color: #fff;
}

.num2 {
  position: absolute;
  top: 18%;
  left: 69%;
  transform: translate(-50%, -50%);
  font-size: 1.4vw;
  color: #fff;
}

.num3 {
  position: absolute;
  top: 18%;
  left: 91%;
  transform: translate(-50%, -50%);
  font-size: 1.4vw;
  color: #fff;
}

.map {
  position: absolute;
  top: 28%;
  left: 31%;
  width: 67%;
  height: 69%;
}

.isRail {
  position: absolute;
  top: 25%;
  left: 31%;
  /*transform: translate(-50%,-50%);*/

  /deep/ .el-switch__label {
    color: #fff;
  }

  /deep/ .el-switch__label.is-active {
    color: #1890ff;
  }
}

</style>