industry-database/src/views/IOTDataAnalysis/components/IOTRight.vue

<template>
  <div class="iot-data-left">
    <div class="left-box">
      <titleBgBox class="left-title-bg-box" title="在线趋势">
        <div class="device-info" ref="onLineRef"></div>
      </titleBgBox>

      <titleBgBox class="left-title-bg-box" title="设备消息趋势">
        <div class="device-info" ref="deviceInfoRef"></div>
      </titleBgBox>

      <titleBgBox class="left-title-bg-box" title="高频感知事件">
        <div class="pie-position-box">
          <IOTPie class="pie-item" />
          <div class="pie-info-data">
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">设备离线</span>
              <span class="num">20%</span>
            </div>
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">雨水液位异常</span>
              <span class="num">20%</span>
            </div>
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">污水液位异常</span>
              <span class="num">20%</span>
            </div>
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">设备离线</span>
              <span class="num">20%</span>
            </div>
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">水务供应压力异常</span>
              <span class="num">20%</span>
            </div>
            <div class="pie-info-item">
              <div class="icon-label" style="border-color: #bcbf5c"></div>
              <span class="name">其他</span>
              <span class="num">20%</span>
            </div>
          </div>
        </div>
      </titleBgBox>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import IOTPie from "./IOTPie.vue";
import titleBgBox from "./titleBgBox.vue";
import * as echarts from "echarts";
import { QueryTrendsmsg, QueryTrendsOnline } from "../../../service/iotService";
const deviceInfoRef = ref(null);
const onLineRef = ref(null);

//设备消息趋势折线图options
const deviceInfoOption = (xData, yData) => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#BFC8D7",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true, //是否显示轴线
          lineStyle: {
            color: "#fff", //刻度线的颜色
            opacity: 0.12,
          },
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#fff", //刻度线的颜色
            opacity: 0.12,
          },
        },

        axisLabel: {
          show: true,
          textStyle: {
            color: "#BFC8D7",
          },
        },
      },
    ],
    series: [
      {
        name: "Email",
        type: "line",
        stack: "Total",
        //   emphasis: {
        //     focus: "series",
        //   },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(45, 144, 255, 0.86)",
            },
            {
              offset: 0.2,
              color: "rgba(45, 144, 255, 0.4)",
            },
            {
              offset: 1,
              color: "rgba(45, 144, 255, 0)",
            },
          ]),
        },
        data: yData,
      },
    ],
  };
};

const barWidth = 20;
const onLineOptions = (xData, yData) => {
  return {
    xAxis: {
      data: xData,
      axisTick: {
        show: false,
      },
      axisLine: { lineStyle: { color: "#ffffff", opacity: 0.52, width: 1 } },
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#ffffff",
          opacity: 0.18,
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#BFC8D7",
        },
      },
    },
    dataGroupId: "",
    grid: {
      left: "5%",
      right: "5%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    series: [
      {
        type: "pictorialBar", // 象型柱状
        symbol: "diamond",
        symbolSize: [barWidth, 5], // 调整大小
        // symbolOffset: [-13, -3], // 图形相对于原本位置的偏移
        symbolOffset: ["0%", -3], // 图形相对于原本位置的偏移
        symbolPosition: "end",
        z: 12,
        color: "#E1EEFF",
        data: yData, //Y轴上的高度
      },
      {
        name: "",
        type: "bar",
        barWidth: barWidth,
        barGap: "10%",
        // zlevel: 2,
        stack: "1",

        itemStyle: {
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            {
              offset: 0.5,
              color: "rgba(199,217,243,0.99)",
            },
            {
              offset: 0.5,
              color: "rgba(199,217,243,0.5)",
            },
            {
              offset: 0.5,
              color: "#6C86C4",
            },
            {
              offset: 1,
              color: "#6C86C4",
            },
          ]),
          // barBorderRadius: 0,
          borderRadius: 0,
        },
        // 是否在每个柱子显示 相应的值
        label: {
          show: false,
          position: ["0", "-25"],
          color: "#005dd9",
          fontSize: 14,
          fontWeight: "bold",
        },
        data: yData,
      }
    ],
  };
};

const initCharts = (domRefValue, options) => {
  const myChart = echarts.init(domRefValue);
  options && myChart.setOption(options);
};

//获取消息趋势
const getDeviceInfo = () => {
  QueryTrendsmsg().then(res => {
    if(res.data.code == '200'){
      const xData = res.data.data.map(item => item.date.slice(5))
      const yData = res.data.data.map(item => item.reportCount)
      initCharts(deviceInfoRef.value, deviceInfoOption(xData, yData));
    }
  })
};

//获取在线趋势数据
const getOnlineInfo = () => {
  QueryTrendsOnline().then(res => {
    if(res.data.code == '200'){
      const xData = res.data.data.map(item => item.date.slice(5))
      const yData = res.data.data.map(item => item.onlineCount)
      initCharts(onLineRef.value, onLineOptions(xData, yData));
    }
  })
}

onMounted(() => {
  getDeviceInfo()
  getOnlineInfo()
});
</script>

<style scoped lang="scss">
.iot-data-left {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100vh;
  font-size: 18px;
  z-index: 99;
  padding: 58px 25px 44px 0;
  background: linear-gradient(
    90deg,
    rgba(0, 17, 51, 0),
    rgba(0, 17, 50, 0.5),
    rgba(0, 17, 50, 0.75)
  );
  .left-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 15px 25px 15px 25px;
    background-image: url("@/assets/imgs/IOTImage/right-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .online-info {
      width: 100%;
      height: 220px;
      margin: 10px 0;
      margin-bottom: 20px;
    }

    .device-info {
      width: 100%;
      height: 220px;
      margin: 10px 0;
      margin-bottom: 20px;
    }

    .pie-position-box {
      position: relative;
      .pie-item {
        margin-top: 20px;
      }
      .pie-info-data {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: absolute;
        top: 200px;
        left: 0px;
        z-index: 101;
        .pie-info-item {
          display: flex;
          width: calc(30% - 18px);
          flex-direction: column;
          text-align: left;
          position: relative;
          color: #ffffff;
          padding-top: 5px;
          padding-left: 18px;

          .icon-label {
            position: absolute;
            width: 9px;
            height: 9px;
            border: 1px solid;
            border-radius: 50%;
            top: 25%;
            left: 2px;
            &::before {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              content: "";
              border: 3px solid;
              border-color: inherit;
              border-radius: 5px;
            }
          }
          .name {
            font-size: 14px;
            color: #9bb9dd;

            white-space: nowrap;
          }
          .num {
            color: #dfecfb;
            font-size: 14px;
            font-family: "heitao";
          }
        }
      }
    }
  }
}
</style>