SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

<template>
  <div class="box">
    <div class="box-top">
      <div v-for="index in 3" :key="index" class="box-top-item">
        <div class="item-box">
          <div class="item-box-left">
            <div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
            <div class="iem-box-left-number">
              10 / 13
              <span
                style="
                  color: #04d919;
                  font-size: 14px;
                  margin-left: 5px;
                  font-weight: 700;
                  font-style: normal;
                "
                >+10%</span
              >
            </div>
          </div>
          <div class="item-box-right">
            <img width="54px" height="54px" src="../../../../src/icon/gaojingguanli.svg" />
          </div>
        </div>
      </div>
    </div>
    <div style="flex: 4; width: 100%; display: flex; gap: 5px">
      <div
        style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
        <div ref="echartPieOne" style="width: 100%; height: 100%"></div>
      </div>
      <div style="flex: 1; height: 100%; background-color: white; border-radius: 4px"> xxxx </div>
    </div>
    <!-- 告警矩形 echarts -->
    <div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
      <div ref="graphChart" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
  import * as echarts from 'echarts';

  defineOptions({
    name: 'alarmOverview', // 与页面路由name一致缓存才可生效
  });

  const info = ref({});
  let chartInstance: echarts.ECharts | null = null;
  let chartInstanceOne: echarts.ECharts | null = null;
  const graphChart = ref(null);
  const echartPieOne = ref(null);
  const getGraphChart = () => {
    let dayData = [];
    let energyAlarm = [];
    let wgAlarm = [];
    let equipmentAlarm = [];
    let total = [];

    // Extend data for 30 days
    for (let i = 1; i < 30; i++) {
      dayData.push(`3/${i}`);
      energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
      wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
      equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
      total.push(0); // Assuming the same value for simplicity
    }
    if (chartInstance) {
      chartInstance.dispose();
    }
    chartInstance = echarts.init(graphChart.value);
    const option = {
      title: {
        text: '告警趋势/ 近30天',
        textStyle: {
          fontSize: 16,
          fontWeight: 'normal',
          color: '#aaaaaa',
        },
        left: '1%',
        top: '2%',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params) {
          let res =
            params[0].axisValue +
            '<br/>' +
            params[0].marker +
            '    ' +
            params[0].seriesName +
            '  :  ' +
            params[0].data +
            '<br/>' +
            params[1].marker +
            '    ' +
            params[1].seriesName +
            ' :  ' +
            params[1].data +
            '<br/>' +
            params[2].marker +
            '    ' +
            params[2].seriesName +
            '  :  ' +
            params[2].data +
            '<br/>';
          return res;
        },
      },
      grid: {
        left: '2%', // 设置图表距离左边的距离
        right: '2%', // 设置图表距离右边的距离
        borderWidth: 0,
        y2: 60, // 距离底边
      },
      legend: [
        {
          top: 5,
          left: 'center', // 将图例居中显示
          textStyle: {
            color: 'rgb(89, 89, 89)',
            fontSize: '14',
            fontWeight: 'normal',
          }, // 注意这里的颜色值要用引号括起来
          data: ['设备告警', '网关告警', '能源告警'],
          itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
        },
      ],
      toolbox: {
        show: true,
        feature: {
          restore: {},
          saveAsImage: {},
        },
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          data: dayData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          shwo: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: false, // 不显示刻度值
          },
        },
      ],
      dataZoom: [
        {
          height: 12,
          start: 0,
          end: 100,
          handleSize: '300%', // 设置滑块的大小
          bottom: 15,
        },
      ],
      series: [
        {
          name: '能源告警',
          type: 'bar',
          stack: '能源告警',
          barMaxWidth: 40,
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: 'rgb(246, 189, 22)',
            },
          },
          data: energyAlarm,
        },
        {
          name: '网关告警',
          type: 'bar',
          stack: '能源告警',
          barMaxWidth: 40,
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: 'rgb(91, 143, 249)',
            },
          },
          data: wgAlarm,
        },
        {
          name: '设备告警',
          type: 'bar',
          stack: '能源告警',
          barMaxWidth: 40,
          barGap: '10%',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: 'rgb(48, 191, 120)',
            },
          },
          data: equipmentAlarm,
        },
        {
          name: '总数',
          type: 'bar',
          stack: '能源告警',
          barMaxWidth: 40,
          barHight: 0,
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: 'rgba(0,0,0,0)',
            },
          },
          label: {
            show: true,
            color: '#000000',
            position: 'top',
            top: '10',
            formatter: function (value) {
              return (
                Number(energyAlarm[value.dataIndex]) +
                Number(wgAlarm[value.dataIndex]) +
                Number(equipmentAlarm[value.dataIndex])
              );
            },
          },
          data: total,
        },
      ],
    };
    chartInstance = echarts.init(graphChart.value);
    chartInstance.setOption(option);
  };
  const getEchartPieOne = () => {
    if (chartInstanceOne) {
      chartInstanceOne.dispose();
    }
    chartInstanceOne = echarts.init(echartPieOne.value);
    var m2R2Data = [
      { value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
      { value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
      { value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
    ];
    const option = {
      title: [
        {
          text: '优先级 / 近30天',
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#aaaaaa',
          },
          left: '2%',
          top: '2%',
        },
        {
          text: '优先级',
          subtext: 12312 + '个',
          textStyle: {
            fontSize: 24,
            color: 'black',
          },
          subtextStyle: {
            fontSize: 24,
            fontWeight: '700',
            color: 'black',
          },
          textAlign: 'center',
          x: '44.3%',
          y: '46%',
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: function (parms) {
          var str = parms.marker + ' :' + parms.data.value;
          return str;
        },
      },
      legend: {
        // 设置图例靠右，上下居中，垂直排列
        right: 50,
        top: 'center',
        orient: 'vertical',
        // 图例图标设置为圆形
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 16,
        textStyle: {
          fontSize: 14,
        },
      },
      series: [
        {
          name: '优先级',
          type: 'pie',
          center: ['45%', '50%'],
          radius: ['50%', '70%'],
          clockwise: false, //饼图的扇区是否是顺时针排布
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: true,
              position: 'outter',
              textStyle: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              formatter: function (parms) {
                return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
              },
            },
          },
          labelLine: {
            show: true, // 控制标签线是否显示
            length: 10, // 标签线长度
            length2: 20, // 标签线引出部分长度
            // 其他样式属性，如 lineStyle 等
          },
          data: m2R2Data,
        },
      ],
    };
    chartInstanceOne = echarts.init(echartPieOne.value);
    chartInstanceOne.setOption(option);
  };
  onMounted(() => {
    //渲染第三个图表
    getGraphChart();
    //优先级
    getEchartPieOne();
  });
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #f0f1f4;
    box-sizing: border-box;
    .box-top {
      flex: 1;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      gap: 5px;
      .box-top-item {
        height: 100%;
        flex: 1;
        gap: 5px;
        background-color: white;
        border-radius: 4px;
        padding: 20px;
        .item-box {
          width: 100%;
          height: 100%;
          display: flex;
          .item-box-left {
            flex: 9;
            height: 100%;
            padding: 0px !important;
            .item-box-left-title {
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #aaaaaa;
              font-kerning: normal;
              font-family: '微软雅黑', sans-serif;
            }
            .iem-box-left-number {
              color: #000000;
              font-weight: 700;
              font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
              font-style: normal;
              font-size: 30px;
            }
          }
          .item-box-right {
            flex: 1;
            height: 100%;
            display: grid;
            place-items: center;
          }
        }
      }
    }
  }
</style>