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

<template>
  <div class="container">
    <div class="centerImg" v-if="!isMap"
         :style="`background-image: url(${picUrl ? picUrl : containerPic})`"></div>
    <div class="title">监控单元统计</div>
    <Chart ref="chart1" class="chart1"></Chart>
    <div class="chart1Right">
      <p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'margin:0.6vw;color:'+ chart1Color[k]">{{ i.name }}</p>
    </div>
    <div class="chart1Table">
      <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>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="chart1Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in chart1Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable">
              {{ item.name }}
            </div>
            <div
              class="scrollTable">
              {{ item.value }}
            </div>
            <div
              class="scrollTable">
              {{ item.value2 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <Chart ref="chart2" class="chart2"></Chart>
    <div class="chart2Table">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 50%">
          名称
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 50%">
          数量
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="chart2Data"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in chart2Data"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div class="scrollTable" style="width: 50%">
              {{ item.name }}
            </div>
            <div class="scrollTable" style="width: 50%">
              {{ item.value }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div>
      <div class="centerInfo">传感器数量</div>
      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">{{
          centerNum.sum
        }}
      </div>
      <div class="centerInfo" style="left: 56%">监控单元数量</div>
      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.subSum }}</div>
    </div>
    <div class="inTransit">在运： <span style="color: #00f6ff">{{ inTransitNum }}</span></div>
    <Chart ref="chart3" class="chart3"></Chart>
    <div class="table1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警编号
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警类型
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          告警位置
        </div>
        <div class="scrollTable" style="font-weight: bold;width: 25%">
          操作
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="{...chart1TableOption,limitMoveNum:10}"
        :data="table1Data"
        class="case-item"
        style="height: calc(100% - 33px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in table1Data"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div class="scrollTable" style="width: 25%">
              {{ item.no }}
            </div>
            <div class="scrollTable" style="width: 25%">
              {{ item.type }}
            </div>
            <div class="scrollTable" style="width: 25%">
              {{ item.location }}
            </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>

    <el-button type="primary" class="exTable"
                @click="exTable">导出告警信息
    </el-button>
    <div v-if="isMap">
      <Chart ref="mapChart" class="mapChart"></Chart>
      <el-button type="primary" style="position:absolute;bottom: 4%;left: 50%;transform: translateX(-50%)"
                 @click="toRealMap">打开地图
      </el-button>
    </div>

    <el-dialog :visible.sync="realMap" width="80%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input v-model="formInline.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchMap">查询</el-button>
        </el-form-item>
      </el-form>
      <div id="map" class="map"></div>
    </el-dialog>

    <el-dialog
      :visible.sync="isDispose"
      width="30%">
      <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 containerPic from "@/assets/board/index/container.png";
import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
import {
  monitorUnitPercentage,
  monitorPercentage,
  allNums,
  getAlarmInfos,
  getDeviceOperations,
  handleAlarmInfo,
  getDeviceByAreaId,
  getTenantData,
  selectMonitorElectronic,
  selectDeviceByName,
  exTableData
} from '@/api/board/index'
import ChinaMapData from '@/utils/ChinaMapData.json'
import gsByMap from '@/utils/map/gs_by.json'
import axios from "axios";

let map = null
let markers = []
let markerIds = []
let polygons = []
let circles = []
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    vueSeamlessScroll,
    Chart,
  },
  data() {
    return {
      containerPic,
      formInline:{},
      textarea: '',
      disposeNo: null,
      isDispose: false,
      realMap: false,
      centerGeo: [],
      picUrl: null,
      code: 620000,
      cityJson: null,
      isMap: true,
      centerNum: {},
      chart1Option: {
        tooltip: {
          valueFormatter: (e) => {
            return e + '%'
          },
        },
        angleAxis: {
          max: 100,
          clockwise: true,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        polar: {
          center: ["30%", "50%"],
          radius: "100%", //图形大小
        },
      },
      chart1Color: ['#2ff', '#f22', '#f2f', '#1f1'],
      chart1Data: [],
      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,
      },
      chart2Data: [],
      chart2Option: {
        color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
        legend: {
          type: 'scroll',
          orient: "vertical",
          x: "right",
          y: "center",
          width: '100px',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} :  ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "76%"],
            center: ["35%", "50%"],
            encode: {
              itemName: "group",
              value: "占比",
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
            itemStyle: {
              opacity: '0.8'
            }
          },
          {
            type: "pie",
            radius: ["75%", "90%"],
            center: ["35%", "50%"],
            encode: {
              itemName: "group",
              value: "占比",
            },
            labelLine: {
              show: false,
            },
            label: {
              show: false,
            },
          },
        ],
      },
      inTransitNum: 0,
      chart3Option: {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "middle",
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: "80%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#ccc3",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ccc",
            },
          },
          nameTextStyle: {
            color: "#999",
          },
          splitArea: {
            show: false,
          },
        },
      },
      table1Data: []
    }
  },
  async mounted() {
    getTenantData(this.$store.getters.tenantId).then(e => {
      // this.isMap = e.data.tenantField === '2';
      this.picUrl = e.data.tenantBoardPic
      this.code = e.data.tenantMapCode || 620000
    })
    this.setChart1()
    this.setChart2()
    this.setAllNums()
    this.setTable3()
    this.setDeviceOperations()

    let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
    let mapData = this.code === 100000 ? ChinaMapData : data.data
    await this.getMap(mapData)
    this.chartClick()
  },
  methods: {
    async setChart1() {
      const {rows: data} = await monitorPercentage()
      let data1 = data.slice(0, 4)
      data1.reverse()
      let option1 = {
        ...this.chart1Option,
        series: [
          {
            type: "bar",
            data: data1.map((e, i) => {
              return {
                value: parseFloat(e.percentage),
                name: e.sceneName,
                itemStyle: {
                  color: this.chart1Color[i]
                }
              }
            }),
            showBackground: true,
            coordinateSystem: "polar",
            roundCap: true,
            barWidth: 8,
          },
        ]
      }
      this.$refs.chart1.setData(option1)
      this.chart1Data = data.map(e => {
        return {
          value: e.sum || 0,
          value2: e.err || 0,
          name: e.sceneName || '',

        }
      })
    },
    async setChart2() {
      const {rows: data} = await monitorUnitPercentage()
      let chart2Num = eval(data.map(e => e.sum).join("+"));
      let option2 = {
        ...this.chart2Option,
        dataset: {
          source: [
            ["group", "占比"],
            ...data.slice(0, 7).map(e => [e.deviceModeName, parseFloat(e.percentage)])
          ],
        }
      }
      this.$refs.chart2.setData(option2)
      this.chart2Data = data.map(e => {
        return {
          value: e.sum,
          name: e.deviceModeName,

        }
      })
    },
    async setAllNums() {
      const data = await allNums()
      this.centerNum = data
    },
    async setTable3() {
      const {rows: data} = await getAlarmInfos()
      this.table1Data = data.map((e, i) => {
        return {
          no: e.alarmInfoId,
          type: e.alarmTypeName,
          location: e.monitorUnitName,
          status: e.handleStatus
        }
      })
    },
    async setDeviceOperations() {
      let {data: data} = await getDeviceOperations()
      let onlineDevicesTrend = data["onlineDevicesTrend"];
      let sortArr = Object.keys(onlineDevicesTrend)
      sortArr = sortArr.sort((a, b) => {
        return new Date(a).getTime() - new Date(b).getTime()
      })
      console.log(sortArr)
      let x = sortArr
      let y = sortArr.map(e => {
        return onlineDevicesTrend[e]
      })
      // this.inTransitNum = y.reduce((a, b) => {
      //   return a + b
      // }, 0)
      this.inTransitNum = data["onlineDevicesCount"];

      let option3 = {
        ...this.chart3Option,
        xAxis: {
          boundaryGap: false,
          type: "category",
          data: x,

          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ccc3",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
        },
        series: [
          {
            name: "",
            type: "line",
            data: y,
            color: "#00dae0",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00dae033",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,202,149,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20,
              },
            },
          },
        ],
      }
      this.$refs.chart3.setData(option3)
    },
    dispose(e) {
      this.textarea = ''
      this.isDispose = true
      this.disposeNo = e.no
    },
    disposeThis() {
      handleAlarmInfo({
        alarmInfoId: this.disposeNo,
        alarmInfoField: this.textarea,
        ifDisposalAll: 0,
      }).then(e => {
        if (e.code === 200) {
          this.$message({
            type: 'success',
            message: '已处理!'
          });
          this.setTable3()
        } else {
          this.$message({
            type: 'info',
            message: '网络错误'
          });
        }
        this.isDispose = false
      })
    },
    disposeAll() {
      handleAlarmInfo({
        alarmInfoId: this.disposeNo,
        alarmInfoField: this.textarea,
        ifDisposalAll: 1,
      }).then(e => {
        if (e.code === 200) {
          this.$message({
            type: 'success',
            message: '已处理!'
          });
          this.setTable3()
        } else {
          this.$message({
            type: 'info',
            message: '网络错误'
          });
        }
        this.isDispose = false
      })
    },

    async getMap(geoJson) {
      this.cityJson = geoJson.features
      echarts.registerMap('map', geoJson);
      this.centerGeo = geoJson.features[0].properties.center || geoJson.features[0].properties.geo_wkt.split('(')[1].split(')')[0].split(' ').map(e => parseFloat(e))
      const random = (val = 1) => {
        return Math.ceil(Math.random() * val)
      }
      let Point = [
        {value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
        {value: [104.065735, 30.659462], index: random(5), type: random(5), state: random(5)},
        {value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
        {value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)},
        {value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)},
        {value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)},
        {value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)},
        {value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
        {value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
      ]
      Point = []
      let option = {
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
        },
        geo: {
          map: "map",
          show: false,
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          label: {
            show: true
          },
          roam: true,
          layoutCenter: ["50%", "50%"], // position位置
          layoutSize: 25 * vw,
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#013B8F", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#013B8F", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "#013B8F",
              shadowOffsetX: 0,
              shadowOffsetY: 8,
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "green",
              label: {
                show: false,
              },
            },
          },
        },
        series: [
          {
            type: "map",
            roam: 'scale',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#1DE9B6",
                },
              },
            },

            itemStyle: {
              normal: {
                borderColor: "rgb(147, 235, 248,0.5)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#013B8F", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#013B8F", // 100% 处的颜色
                    },
                  ],
                  globalCoord: true, // 缺省为 false
                },
              },
            },
            zoom: 1.1,
            map: 'map', //使用
            aspectScale: 0.75, //长宽比
          },

          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: 'emphasis',
            zlevel: 1,
            rippleEffect: {
              period: 15,
              scale: 1,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#1DE9B6",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            symbolSize: [0.5 * vw, 0.5 * vw],
            data: Point,
            label: {
              padding: [-16, 0, 0, 5],
              show: true,
              position: 'bottom',
              formatter: function (val) {
                return [`{a|}{b|'点位${val.data.index}}`]
              },
              rich: {
                a: {
                  width: 0.34 * vw,
                  height: 0.34 * vw,
                  borderColor: '#0FF32E',
                  borderWidth: 0.34 * vw,
                  borderRadius: 0.17 * vw,
                  shadowBlur: 20,
                  shadowColor: "#0FF32E",
                },
                b: {
                  padding: [0, 0, 0, 5],
                  color: '#0FF32E',
                  height: 40,
                  fontSize: 0.75 * vw,
                },
              }
            }
          },
        ],
      };
      this.$refs.mapChart.setData(option);
    },
    chartClick() {
      this.$refs.mapChart.chart.on('click', async (params) => {
        this.code = this.cityJson[params.dataIndex].properties.adcode || this.code || gsByMap.features[params.dataIndex].properties.unique_id
        let mapData
        if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
          mapData = {features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())}
        } else {
          let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
          mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : data.data
        }
        this.getMap(mapData)
      })
      this.$refs.mapChart.$el.addEventListener('dblclick', () => {
        this.chartDblClick(this.code)
      });
    },
    async chartDblClick(val) {
      let a = val.toString().substr(0, 2)
      let b = val.toString().substr(2, 2)
      let c = val.toString().substr(4, 2)
      let d = val.toString().substr(6, 9)
      d = null
      if (d && d !== '000') {
        this.code = Number(a + b + c)
      } else if (c !== '00') {
        this.code = Number(a + b + '00')
      } else if (b !== '00') {
        this.code = Number(a + '0000')
      } else if (a !== '10') {
        this.code = 100000
      }
      let mapData
      if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
        mapData = gsByMap
      } else {
        let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
        mapData = this.code === 100000 ? ChinaMapData : data.data
      }
      this.getMap(mapData)
    },
    async toRealMap() {
      this.realMap = true
      markerIds = []
      this.$nextTick(async () => {
        this.createMap()
        const data = await getDeviceByAreaId(this.$store.getters.tenantId)
        data.data.map(e => e.devicesList).flat(1).forEach(e => {
          this.setMarker(e)
        })
      })
    },
    setMarker(e) {
      let marker = new AMap.Marker({
        position: [e.longitude, e.latitude],
        title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
        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="#3D93FD" p-id="4306">
</path>
</svg>
</div>`
      });
      marker.on('click', async () => {
        if (markerIds.includes(e.deviceId)) {
          return
        } else {
          markerIds.push(e.deviceId)
        }
        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])
          }
        })
      })
      marker.on('dblclick', () => {
        this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
      });
      map.add(marker);
      markers.push(marker)
    },
    setPolygon(e, val) {
      // let e = position.map(val => {
      //   return [val.longitude, val.latitude]
      // })
      let thisPolygon = new AMap.Polygon({
        path: e,
        fillColor: '#1791fc',
        // fillColor: val > 0 ? '#ff0000' : '#1791fc',
      });
      console.log(thisPolygon)
      map.add(thisPolygon)
      map.setFitView(thisPolygon)
      polygons.push(thisPolygon)
    },
    setCircle(center, radius, e) {
      let circle = new AMap.Circle({
        center,
        radius,
        borderWeight: 3,
        strokeColor: "#FF33FF",
        // strokeColor: e ? '#ff0000' : "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeDasharray: [10, 10],
        fillColor: '#1791fc',
        // fillColor: e > 0 ? '#ff0000' : '#1791fc',
      })
      map.add(circle);
      map.setFitView(circle)
      circles.push(circle)
    },
    createMap() {
      map = new AMap.Map('map', {
        zoom: 11,
        center: this.centerGeo,
      });
    },
    async searchMap(){
      const {data} = await selectDeviceByName(this.formInline)
      map.remove(markers)
      map.remove(polygons)
      map.remove(circles)
      console.log(data)
      data.forEach(e=>{
        this.setMarker(e)
      })
    },
    exTable(){
      exTableData({}, '告警信息')
    }
  }
}
;
</script>
<style scoped>
.title {
  position: absolute;
  top: 12%;
  left: 13.6%;
  font-size: 1vw;
  color: #00f8ff;
  transform: translateX(-50%);
}

.container {
  background-image: url("~@/assets/board/index/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.centerImg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 45vw;
  height: 20vw;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.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: 33%;

}

.chart1 {
  position: absolute;
  width: 20%;
  height: 21%;
  top: 16%;
  left: 3%;
}

.chart1Right {
  background-image: url("~@/assets/board/common/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 12px;
  position: absolute;
  top: 17%;
  left: 15%;
}

.chart1Table {
  position: absolute;
  top: 38%;
  left: 2.8%;
  width: 21%;
  height: 14%;
  overflow: hidden;
}

.chart2 {
  position: absolute;
  width: 20%;
  height: 21%;
  top: 58.5%;
  left: 3%;
}

.chart2Table {
  position: absolute;
  top: 81%;
  left: 2.8%;
  width: 21%;
  height: 15%;
  overflow: hidden;
}

.centerInfo {
  position: absolute;
  width: 7%;
  top: 17.5%;
  left: 32.7%;
  font-size: 1.4vw;
  text-align: center;
  transform: translateX(-50%);
  color: #01c7fd;
  letter-spacing: 4px;
}

.inTransit {
  position: absolute;
  top: 16%;
  left: 87%;
  transform: translateX(-50%);
  font-size: 1.2vw;
  color: rgb(30, 158, 223);
}

.chart3 {
  position: absolute;
  width: 21%;
  height: 22%;
  top: 21.5%;
  left: 76.1%;
}

.table1 {
  position: absolute;
  width: 21%;
  height: 50%;
  top: 45.5%;
  left: 76.3%;
}

.mapChart {
  position: absolute;
  width: 50%;
  height: 60%;
  top: 30%;
  left: 25%;
}

.map {
  width: 100%;
  height: 80vh;
}
.exTable{
  position: absolute;
  bottom: 0%;
  left: 87%;
  transform: translateX(-50%);
}
</style>