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

<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav nowMenu="1"></BoardTopNav>
    <Chart ref="chart1" class="chart1"></Chart>
    <div class="chart1Right">
      <p v-for="(i,k) in chart1Data.slice(0,4)" :key="k" :style="'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.subSum
        }}
      </div>
      <div class="centerInfo" style="left: 56%">监控单元数量</div>
      <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</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">处理</el-button>
              <span v-else>已处理</span>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import * as echarts from 'echarts';
import {
  monitorUnitPercentage,
  monitorPercentage,
  allNums,
  getAlarmInfos,
  getDeviceOperations
} from '@/api/board/index'

export default {
  components: {
    vueSeamlessScroll,
    Chart,
    BoardTopNav,

  },
  data() {
    return {
      centerNum: {},
      chart1Option: {
        tooltip: {},
        angleAxis: {
          max: 100,
          clockwise: true,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        polar: {
          center: ["40%", "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: {
          orient: "vertical",
          x: "right",
          y: "center",
          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: []
    }
  },
  mounted() {
    this.setChart1()
    this.setChart2()
    this.setAllNums()
    this.setTable3()
    this.setDeviceOperations()
  },
  methods: {
    async setChart1() {
      const {rows: data} = await monitorPercentage()
      let option1 = {
        ...this.chart1Option,
        series: [
          {
            type: "bar",
            data: data.slice(0, 4).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: i+1,
          type: '高温警告',
          location: e.monitorUnitName,
          status:e.handleStatus
        }
      })
    },
    async setDeviceOperations() {
      const {data: data} = await getDeviceOperations()
      console.log(data)
      let x = Object.keys(data)
      let y = Object.values(data)
      this.inTransitNum = y.reduce((a, b) => {
        return a + b
      }, 0)

      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() {
      this.$confirm('该问题已处理？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已处理!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
}
;
</script>
<style scoped>
.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-image: url("~@/assets/board/index/container.png");
  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: 18%;
}

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