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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav nowMenu="2"></BoardTopNav>
    <Chart ref="chart1" class="chart1"></Chart>
    <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="table1Data"
        :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">
              <el-button size="mini" type="primary">处理</el-button>
            </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">20</div>
      <div class="num2">20</div>
      <div class="num3">20</div>
    </div>
    <div class="map" id="map"></div>
  </div>
</template>

<script>
import Chart from "@/components/Charts/Chart";
import BoardTopNav from '@/components/BoardTopNav'
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';

let map = null
import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png'
export default {
  components: {
    Chart,
    vueSeamlessScroll,
    BoardTopNav
  },
  data() {
    return {
      chart1Data: [
        {
          value: 12,
          name: '监控单元1',
        },
        {
          value: 23,
          name: '监控单元2',
        },
        {
          value: 34,
          name: '监控单元3',
        },
        {
          value: 45,
          name: '监控单元4',
        },
        {
          value: 55,
          name: '监控单元5',
        }
      ],
      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: [
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
        {
          value1: '001',
          value2: '高温预警',
          value3: '车间',
        },
      ]
    }
  },
  mounted() {
    let option1 = {
      ...this.chart1Option,
      yAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fffa",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#fff4",
            type: 'dashed'
          },
        },
        type: "category",
        data: this.chart1Data.map(e => e.name),
      },
      series: [
        {
          name: "数量",
          type: "bar",
          yAxisIndex: 0,
          data: this.chart1Data.map(e => e.value),
          barWidth: '60%',
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: "#00faff",
                },
                {
                  offset: 1,
                  color: "#1eadf1",
                },
              ]),
            },
          },
        },
      ],
    }
    this.$refs.chart1.setData(option1)
    this.createMap()
    this.setMarker()
  },
  methods: {
    createMap(){
      map = new AMap.Map('map', {
        zoom: 11,
        zooms: [8, 20],
        center: [113.4, 23.35],
      });
    },
    setMarker(){
      var marker = new AMap.Marker({
        position: [113.2, 23.35],
        icon: red,
      });
      var marker1 = new AMap.Marker({
        position: [113.6, 23.35],
        icon: green,
      });
      map.add(marker)
      map.add(marker1)
    }
  }
};
</script>
<style scoped>
.container {
  background-image: url("~@/assets/board/GPS/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.chart1 {
  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%;
}
</style>