From 39d50d12e9a2a4c09cd887fa17315d79d9adfa6b Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Fri, 19 Jan 2024 17:11:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AlarnDayLine/index.vue         | 598 +++++++++++-------
 .../components/AlarnTypeBar/index.vue         | 488 +++++++++-----
 .../overview/components/UPFFlow/index.vue     | 491 +++++++-------
 src/views/dashboard/overview/css/index.css    |  30 +-
 src/views/dashboard/overview/index.vue        |  20 +-
 5 files changed, 993 insertions(+), 634 deletions(-)

diff --git a/src/views/dashboard/overview/components/AlarnDayLine/index.vue b/src/views/dashboard/overview/components/AlarnDayLine/index.vue
index 71a75ee5..1257c5b7 100644
--- a/src/views/dashboard/overview/components/AlarnDayLine/index.vue
+++ b/src/views/dashboard/overview/components/AlarnDayLine/index.vue
@@ -1,241 +1,387 @@
+<template>
+  <div id="trend" class="chart-container"></div>
+</template>
 <script setup lang="ts">
-import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { listNe, stateNe } from '@/api/ne/ne';
-import { message } from 'ant-design-vue/lib';
-import { getGraphData } from '@/api/monitor/topology';
-import { parseDateToStr } from '@/utils/date-utils';
-import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
-import {
-  edgeCubicAnimateCircleMove,
-  edgeCubicAnimateLineDash,
-  edgeLineAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerEdge';
-import {
-  nodeCircleAnimateShapeR,
-  nodeCircleAnimateShapeStroke,
-  nodeImageAnimateState,
-  nodeRectAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerNode';
+import { onMounted } from 'vue';
+import { mainGet } from '@/api/faultManage/actAlarm';
 import * as echarts from 'echarts/core';
-import { TooltipComponent } from 'echarts/components';
-import { GaugeChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-
+import { LabelLayout } from 'echarts/features';
 import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
-
-echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
-
-type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
-
-/**图DOM节点实例对象 */
-const neResourcesDom = ref<HTMLElement | undefined>(undefined);
-
-/**图实例对象 */
-const neResourcesChart = ref<any>(null);
-
-const optionData: EChartsOption = {
-  tooltip: {
-    formatter: '{a} <br> {b} : {c}%',
-  },
-  series: [
-    {
-      name: '系统内存',
-      type: 'gauge',
-      center: ['30%', '25%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-    {
-      name: '系统CPU',
-      type: 'gauge',
-      center: ['70%', '25%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-  ],
-};
-
-/**图数据渲染 */
-function handleRanderChart(
-  container: HTMLElement | undefined,
-  option: EChartsOption
-) {
-  if (!container) return;
-  const { clientHeight, clientWidth } = container;
-
-  neResourcesChart.value = echarts.init(container, 'light', {
-    width: clientWidth,
-    height: clientHeight - 36,
+const { t, currentLocale } = useI18n();
+echarts.use([
+  GridComponent,
+  BarChart,
+  CanvasRenderer,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
+// 将现有数据补全为期望的格式
+function completeData(existingData: any, expectedData: any) {
+  let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
+  const result = expectedData.map((item: any) => {
+    const found = existingData.find(
+      (existingItem: any) => existingItem.name === item.name
+    );
+    if (found) return found;
+    else {
+      return item;
+    }
+  });
+  var lang = currentLocale.value.split('_')[0];
+  console.log(lang);
+  result.forEach((item: any) => {
+    item.name = t('views.index.' + item.name);
+  });
+  return result;
+}
+
+function fnDesign() {
+  mainGet().then((res: any) => {
+    const expectedData = [
+      {
+        name: 'CommunicationAlarm',
+        value: 0,
+      },
+      {
+        name: 'EquipmentAlarm',
+        value: 0,
+      },
+      {
+        name: 'ProcessingFailure',
+        value: 0,
+      },
+      {
+        name: 'EnvironmentalAlarm',
+        value: 0,
+      },
+      {
+        name: 'QualityOfServiceAlarm',
+        value: 0,
+      },
+    ];
+    var chartDom = document.getElementById('trend');
+    var myChart = echarts.init(chartDom);
+    var option: any;
+    var colorList = [
+      '#afa3f5',
+      '#00d488',
+      '#3feed4',
+      '#3bafff',
+      '#f1bb4c',
+      '#aff',
+      'rgba(250,250,250,0.5)',
+    ];
+    option = {
+      legend: {
+        bottom: 5,
+        left: 'center',
+        data: ['香料香精', '粘度调节类', '防腐类', '防晒类', '防晒剂'],
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+        },
+      },
+
+      xAxis: [
+        {
+          gridIndex: 0,
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2017年2季度',
+            '2017年3季度',
+            '2017年4季度',
+            '2018年1季度',
+            '2018年2季度',
+            '2018年3季度',
+            '2018年4季度',
+            '2019年1季度',
+            '2019年2季度',
+            '2019年3季度',
+            '2019年4季度',
+            '2020年1季度',
+          ],
+        },
+        {
+          gridIndex: 1,
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2017年2季度',
+            '2017年3季度',
+            '2017年4季度',
+            '2018年1季度',
+            '2018年2季度',
+            '2018年3季度',
+            '2018年4季度',
+            '2019年1季度',
+            '2019年2季度',
+            '2019年3季度',
+            '2019年4季度',
+            '2020年1季度',
+          ],
+        },
+        {
+          gridIndex: 2,
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2017年2季度',
+            '2017年3季度',
+            '2017年4季度',
+            '2018年1季度',
+            '2018年2季度',
+            '2018年3季度',
+            '2018年4季度',
+            '2019年1季度',
+            '2019年2季度',
+            '2019年3季度',
+            '2019年4季度',
+            '2020年1季度',
+          ],
+        },
+        {
+          gridIndex: 3,
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2017年2季度',
+            '2017年3季度',
+            '2017年4季度',
+            '2018年1季度',
+            '2018年2季度',
+            '2018年3季度',
+            '2018年4季度',
+            '2019年1季度',
+            '2019年2季度',
+            '2019年3季度',
+            '2019年4季度',
+            '2020年1季度',
+          ],
+        },
+        {
+          gridIndex: 4,
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '2017年2季度',
+            '2017年3季度',
+            '2017年4季度',
+            '2018年1季度',
+            '2018年2季度',
+            '2018年3季度',
+            '2018年4季度',
+            '2019年1季度',
+            '2019年2季度',
+            '2019年3季度',
+            '2019年4季度',
+            '2020年1季度',
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          gridIndex: 0,
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitNumber: 1,
+          name: '香料香精',
+          nameLocation: 'center',
+          nameRotate: 360,
+        },
+        {
+          gridIndex: 1,
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitNumber: 1,
+          name: '粘度调节类',
+          nameLocation: 'center',
+          nameRotate: 360,
+        },
+        {
+          gridIndex: 2,
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitNumber: 1,
+          name: '防腐类',
+          nameLocation: 'center',
+          nameRotate: 360,
+        },
+        {
+          gridIndex: 3,
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitNumber: 1,
+          name: '防晒类',
+          nameLocation: 'center',
+          nameRotate: 360,
+        },
+        {
+          gridIndex: 4,
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          splitNumber: 1,
+          name: '防晒剂',
+          nameLocation: 'center',
+          nameRotate: 360,
+        },
+      ],
+      grid: [
+        {
+          top: '17%',
+          height: '15%',
+        },
+        {
+          top: '32%',
+          height: '15%',
+        },
+        {
+          top: '47%',
+          height: '15%',
+        },
+        {
+          top: '62%',
+          height: '15%',
+        },
+        {
+          bottom: '8%',
+          height: '15%',
+        },
+      ],
+      series: [
+        {
+          type: 'line',
+          data: [
+            0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 0,
+          ],
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          smooth: true,
+          areaStyle: {},
+        },
+        {
+          type: 'line',
+          data: [
+            0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
+          ],
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          smooth: true,
+          areaStyle: {},
+        },
+        {
+          type: 'line',
+          data: [
+            0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0,
+          ],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          smooth: true,
+          areaStyle: {},
+        },
+        {
+          type: 'line',
+          data: [
+            0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
+          ],
+          xAxisIndex: 3,
+          yAxisIndex: 3,
+          smooth: true,
+          areaStyle: {},
+        },
+        {
+          type: 'line',
+          data: [
+            0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
+          ],
+          xAxisIndex: 4,
+          yAxisIndex: 4,
+          smooth: true,
+          areaStyle: {},
+        },
+      ],
+    };
+    option && myChart.setOption(option);
+    window.onresize = function () {
+      // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+      myChart.resize();
+    };
+    // 点击圆形饼状图
+    myChart.on('click', (params: any) => {
+      // 根据点击的数据params更新柱状图的数据
+      console.log(params);
+      // const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
+      // updateBarChart(newData); // 更新柱状图
+    });
   });
-  option && neResourcesChart.value.setOption(option);
 }
 
 onMounted(() => {
-  setInterval(function () {
-    const random = +(Math.random() * 90).toFixed(2);
-    const random2 = +(Math.random() * 90).toFixed(2);
-    const random3 = +(Math.random() * 90).toFixed(2);
-    const random4 = +(Math.random() * 90).toFixed(2);
-    let color = '#1890ff';
-    if (random < 30) {
-      color = '#73d13d';
-    }
-    if (random > 60) {
-      color = '#ff4d4f';
-    }
-    neResourcesChart.value.setOption({
-      series: [
-        {
-          data: [
-            {
-              name: '系统内存',
-              value: random,
-              itemStyle: {
-                color: color,
-                shadowColor: color,
-              },
-            },
-          ],
-        },
-        {
-          data: [
-            {
-              name: '系统CPU',
-              value: random2,
-            },
-          ],
-        },
-      ],
-    });
-  }, 2000);
-
-  handleRanderChart(neResourcesDom.value, optionData);
+  fnDesign();
 });
-
-onBeforeUnmount(() => {});
 </script>
 
-<template>
-  <div ref="neResourcesDom" class="chart"></div>
-</template>
-
 <style lang="less" scoped>
-.chart {
+.chart-container {
+  /* 设置图表容器大小和位置 */
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
index 0b2e1ab7..bfe5fc9e 100644
--- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
+++ b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
@@ -1,170 +1,372 @@
+<template>
+  <div id="main" class="chart-container"></div>
+</template>
 <script setup lang="ts">
-import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { listNe, stateNe } from '@/api/ne/ne';
-import { message } from 'ant-design-vue/lib';
-import { getGraphData } from '@/api/monitor/topology';
-import { parseDateToStr } from '@/utils/date-utils';
-import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
-import {
-  edgeCubicAnimateCircleMove,
-  edgeCubicAnimateLineDash,
-  edgeLineAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerEdge';
-import {
-  nodeCircleAnimateShapeR,
-  nodeCircleAnimateShapeStroke,
-  nodeImageAnimateState,
-  nodeRectAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerNode';
+import { onMounted } from 'vue';
+import { mainGet } from '@/api/faultManage/actAlarm';
 import * as echarts from 'echarts/core';
-import { TooltipComponent } from 'echarts/components';
-import { GaugeChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
-
+import { LabelLayout } from 'echarts/features';
 import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
+const { t, currentLocale } = useI18n();
+echarts.use([
+  GridComponent,
+  BarChart,
+  CanvasRenderer,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  LabelLayout,
+]);
+// 将现有数据补全为期望的格式
+// function completeData(existingData: any, expectedData: any) {
+//   let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
+//   const result = expectedData.map((item: any) => {
+//     const found = existingData.find(
+//       (existingItem: any) => existingItem.name === item.name
+//     );
+//     if (found) return found;
+//     else {
+//       return item;
+//     }
+//   });
+//   var lang = currentLocale.value.split('_')[0];
+//   console.log(lang);
+//   result.forEach((item: any) => {
+//     item.name = t('views.index.' + item.name);
+//   });
+//   return result;
+// }
 
-echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
-
-type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
-
-/**图DOM节点实例对象 */
-const neResourcesDom = ref<HTMLElement | undefined>(undefined);
-
-/**图实例对象 */
-const neResourcesChart = ref<any>(null);
-
-const optionData: EChartsOption = {
-  tooltip: {
-    formatter: '{a} <br> {b} : {c}%',
-  },
-  series: [
-    {
-      name: '系统内存',
-      type: 'gauge',
-      center: ['30%', '25%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
+function fnDesign() {
+  mainGet().then((res: any) => {
+    const expectedData = [
+      {
+        name: 'CommunicationAlarm',
+        value: 0,
       },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
+      {
+        name: 'EquipmentAlarm',
+        value: 0,
       },
-      pointer: {
+      {
+        name: 'ProcessingFailure',
+        value: 0,
+      },
+      {
+        name: 'EnvironmentalAlarm',
+        value: 0,
+      },
+      {
+        name: 'QualityOfServiceAlarm',
+        value: 0,
+      },
+    ];
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    var option: any;
+    var colorList = [
+      '#afa3f5',
+      '#00d488',
+      '#3feed4',
+      '#3bafff',
+      '#f1bb4c',
+      '#aff',
+      'rgba(250,250,250,0.5)',
+    ];
+    // option = {
+    // //   title: {
+    // //     subtext: '告警占比',
+    // //     x: 'center',
+    // //     y: '42%',
+    // //     textStyle: {
+    // //       fontSize: 12,
+    // //       fontWeight: 'normal',
+    // //       color: ['#333'],
+    // //     },
+    // //     subtextStyle: {
+    // //       color: '#f1bb4c',
+    // //       fontSize: 16,
+    // //     },
+    // //   },
+    //   grid: {
+    //     left: '10%',
+    //     right: '5%',
+    //     bottom: '10%',
+    //   },
+    //   legend: {
+    //     show: false,
+    //     orient: 'vertical',
+    //     top: 'middle',
+    //     right: '5%',
+    //     textStyle: {
+    //       color: '#3db8ff',
+    //       fontSize: 12,
+    //     },
+    //     icon: 'roundRect',
+    //   },
+    //   series: [
+    //     // 主要展示层的
+    //     {
+    //       radius: ['29%', '59%'],
+    //       center: ['50%', '50%'],
+    //       type: 'pie',
+    //       itemStyle: {
+    //         normal: {
+    //           color: function (params: any) {
+    //             return colorList[params.dataIndex];
+    //           },
+    //         },
+    //       },
+    //       labelLine: {
+    //         normal: {
+    //           show: true,
+    //           length: 20,
+    //           length2: 100,
+    //           lineStyle: {
+    //             color: '#d3d3d3',
+    //           },
+    //           align: 'right',
+    //         },
+    //         color: '#000',
+    //         emphasis: {
+    //           show: true,
+    //         },
+    //       },
+    //       label: {
+    //         normal: {
+    //           formatter: '{b}: {d}%',
+    //           padding: [0, -90],
+    //           height: 35,
+    //           rich: {
+    //             a: {
+    //               width: 38,
+    //               height: 38,
+    //               lineHeight: 50,
+
+    //               align: 'left',
+    //             },
+    //             b: {
+    //               width: 29,
+    //               height: 45,
+    //               lineHeight: 50,
+    //               align: 'left',
+    //             },
+    //             c: {
+    //               width: 34,
+    //               height: 33,
+    //               lineHeight: 50,
+
+    //               align: 'left',
+    //             },
+    //             d: {
+    //               width: 34,
+    //               height: 44,
+    //               lineHeight: 50,
+    //               align: 'left',
+    //             },
+    //             e: {
+    //               width: 38,
+    //               height: 30,
+    //               lineHeight: 50,
+    //               align: 'left',
+    //             },
+    //             nameStyle: {
+    //               fontSize: 16,
+    //               color: '#555',
+    //               align: 'left',
+    //             },
+    //             rate: {
+    //               fontSize: 20,
+    //               color: '#1ab4b8',
+    //               align: 'left',
+    //             },
+    //           },
+    //         },
+    //       },
+    //       data: [
+    //         { value: 10, name: '通信告警' },
+    //         { value: 20, name: '设备告警' },
+    //         { value: 30, name: '服务质量' },
+    //         { value: 30, name: '环境告警' },
+    //         { value: 20, name: '处理错误' },
+    //       ],
+    //     },
+    //     // 边框的设置
+    //     {
+    //       radius: ['54%', '59%'],
+    //       center: ['50%', '50%'],
+    //       type: 'pie',
+    //       label: {
+    //         normal: {
+    //           show: false,
+    //         },
+    //         emphasis: {
+    //           show: false,
+    //         },
+    //       },
+    //       labelLine: {
+    //         normal: {
+    //           show: false,
+    //         },
+    //         emphasis: {
+    //           show: false,
+    //         },
+    //       },
+    //       animation: false,
+    //       tooltip: {
+    //         show: false,
+    //       },
+    //       itemStyle: {
+    //         normal: {
+    //           color: 'rgba(250,250,250,0.5)',
+    //         },
+    //       },
+    //       data: [
+    //         {
+    //           value: 1,
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // };
+    option = {
+      grid: {
+        bottom: 150,
+        left: 0,
+        right: '10%',
+      },
+      legend: {
         show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
+        orient: 'vertical',
+        top: 'middle',
+        right: '5%',
+        textStyle: {
+          color: '#f2f2f2',
+          fontSize: 25,
         },
+        icon: 'roundRect',
       },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-  ],
-};
-
-/**图数据渲染 */
-function handleRanderChart(
-  container: HTMLElement | undefined,
-  option: EChartsOption
-) {
-  if (!container) return;
-  const { clientHeight, clientWidth } = container;
-
-  neResourcesChart.value = echarts.init(container, 'light', {
-    width: clientWidth,
-    height: clientHeight - 36,
-  });
-  option && neResourcesChart.value.setOption(option);
-}
-
-onMounted(() => {
-  setInterval(function () {
-    const random = +(Math.random() * 90).toFixed(2);
-    const random2 = +(Math.random() * 90).toFixed(2);
-    const random3 = +(Math.random() * 90).toFixed(2);
-    const random4 = +(Math.random() * 90).toFixed(2);
-    let color = '#1890ff';
-    if (random < 30) {
-      color = '#73d13d';
-    }
-    if (random > 60) {
-      color = '#ff4d4f';
-    }
-    neResourcesChart.value.setOption({
       series: [
+        // 主要展示层的
         {
+          radius: ['29%', '59%'],
+          center: ['50%', '50%'],
+          type: 'pie',
+          itemStyle: {
+            normal: {
+              color: function (params: any) {
+                return colorList[params.dataIndex];
+              },
+            },
+          },
+          labelLine: {
+            show: true,
+            length: 20,
+            length2: 120,
+            align: 'right',
+            color: '#000',
+          },
+          label: {
+            formatter: '{b}: {d}%',
+            padding: [0, -110],
+            height: 35,
+            alignTo: 'labelLine',
+            bleedMargin: 5,
+            color: 'auto',
+            borderColor: '#777',
+            borderWidth: 1,
+            borderRadius: 4,
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            rich: {
+              name: {
+                color: '#ff0000', // 修改名称颜色
+              },
+            },
+          },
+          data: [
+            { value: 1, name: '通信告警' },
+            { value: 2, name: '设备告警' },
+            { value: 3, name: '服务质量' },
+            { value: 3, name: '环境告警' },
+            { value: 2, name: '处理错误' },
+          ],
+        },
+        // 边框的设置
+        {
+          radius: ['54%', '59%'],
+          center: ['50%', '50%'],
+          type: 'pie',
+          label: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+          labelLine: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+          animation: false,
+          tooltip: {
+            show: false,
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgba(250,250,250,0.5)',
+            },
+          },
           data: [
             {
-              name: '系统内存',
-              value: random,
-              itemStyle: {
-                color: color,
-                shadowColor: color,
-              },
+              value: 1,
             },
           ],
         },
       ],
+    };
+    option && myChart.setOption(option);
+    window.onresize = function () {
+      // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
+      myChart.resize();
+    };
+    // 点击圆形饼状图
+    myChart.on('click', (params: any) => {
+      // 根据点击的数据params更新柱状图的数据
+      console.log(params);
+      // const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
+      // updateBarChart(newData); // 更新柱状图
     });
-  }, 2000);
+  });
+}
 
-  handleRanderChart(neResourcesDom.value, optionData);
+onMounted(() => {
+  fnDesign();
 });
-
-onBeforeUnmount(() => {});
 </script>
 
-<template>
-  <div ref="neResourcesDom" class="chart"></div>
-</template>
-
 <style lang="less" scoped>
-.chart {
+.chart-container {
+  /* 设置图表容器大小和位置 */
   width: 100%;
   height: 100%;
 }
diff --git a/src/views/dashboard/overview/components/UPFFlow/index.vue b/src/views/dashboard/overview/components/UPFFlow/index.vue
index 71a75ee5..48fffbbb 100644
--- a/src/views/dashboard/overview/components/UPFFlow/index.vue
+++ b/src/views/dashboard/overview/components/UPFFlow/index.vue
@@ -1,242 +1,295 @@
-<script setup lang="ts">
-import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
+<!-- <script setup lang="ts">
+import { reactive, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
+import ChartLine from '@/components/ChartLine/index.vue';
+import { getLoad } from '@/api/monitor/monitor';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { listNe, stateNe } from '@/api/ne/ne';
-import { message } from 'ant-design-vue/lib';
-import { getGraphData } from '@/api/monitor/topology';
-import { parseDateToStr } from '@/utils/date-utils';
-import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
-import {
-  edgeCubicAnimateCircleMove,
-  edgeCubicAnimateLineDash,
-  edgeLineAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerEdge';
-import {
-  nodeCircleAnimateShapeR,
-  nodeCircleAnimateShapeStroke,
-  nodeImageAnimateState,
-  nodeRectAnimateState,
-} from '@/views/monitor/topologyBuild/hooks/registerNode';
-import * as echarts from 'echarts/core';
-import { TooltipComponent } from 'echarts/components';
-import { GaugeChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
-
 import useI18n from '@/hooks/useI18n';
+import {
+  YYYY_MM_DD_HH_MM_SS,
+  parseDateToStr,
+  parseDateWithoutYear,
+  parseStrToDate,
+} from '@/utils/date-utils';
+import { parseSizeFromKBs } from '@/utils/parse-utils';
+import dayjs, { Dayjs } from 'dayjs';
 const { t } = useI18n();
 
-echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
-
-type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
-
-/**图DOM节点实例对象 */
-const neResourcesDom = ref<HTMLElement | undefined>(undefined);
-
-/**图实例对象 */
-const neResourcesChart = ref<any>(null);
-
-const optionData: EChartsOption = {
-  tooltip: {
-    formatter: '{a} <br> {b} : {c}%',
-  },
-  series: [
-    {
-      name: '系统内存',
-      type: 'gauge',
-      center: ['30%', '25%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-    {
-      name: '系统CPU',
-      type: 'gauge',
-      center: ['70%', '25%'],
-      radius: '40%',
-      startAngle: 90,
-      endAngle: -270,
-      min: 1,
-      max: 100,
-      itemStyle: {
-        color: '#1890ff',
-      },
-      progress: {
-        show: true,
-        width: 10,
-        overlap: true,
-        roundCap: true,
-        clip: false,
-      },
-      pointer: {
-        show: false,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 10,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      anchor: {
-        show: false,
-      },
-      title: {
-        show: true,
-        offsetCenter: [0, -5],
-        fontSize: 10,
-        color: '#fafafa',
-      },
-      detail: {
-        valueAnimation: true,
-        width: '60%',
-        lineHeight: 40,
-        borderRadius: 8,
-        offsetCenter: [0, 10],
-        fontSize: 10,
-        fontWeight: 'bolder',
-        formatter: '{value}%',
-        color: 'inherit',
-      },
-      data: [
-        {
-          name: '系统内存',
-          value: 20,
-        },
-      ],
-    },
-  ],
+/**开始结束时间类型 */
+type RangePickerType = {
+  placeholder: [string, string];
+  ranges: Record<string, [Dayjs, Dayjs]>;
+  /**全局时间 */
+  all: [string, string];
+  /**网络 */
+  network: [string, string];
 };
 
-/**图数据渲染 */
-function handleRanderChart(
-  container: HTMLElement | undefined,
-  option: EChartsOption
-) {
-  if (!container) return;
-  const { clientHeight, clientWidth } = container;
+/**开始结束时间 */
+let rangePicker = reactive<RangePickerType>({
+  placeholder: [
+    t('views.monitor.monitor.startTime'),
+    t('views.monitor.monitor.endTime'),
+  ],
+  ranges: {
+    [t('views.monitor.monitor.today')]: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+    [t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
+    [t('views.monitor.monitor.week')]: [
+      dayjs().startOf('week'),
+      dayjs().endOf('week'),
+    ],
+    [t('views.monitor.monitor.month')]: [
+      dayjs().startOf('month'),
+      dayjs().endOf('month'),
+    ],
+  },
+  all: ['', ''],
+  network: ['', ''],
+});
 
-  neResourcesChart.value = echarts.init(container, 'light', {
-    width: clientWidth,
-    height: clientHeight - 36,
+/**查询全部资源数据列表 */
+function fnGetList() {
+  let startTime = null;
+  let endTime = null;
+  const dateString = rangePicker.all;
+  if (dateString[0]) {
+    startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS);
+    endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS);
+  } else {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    startTime = now;
+    endTime = new Date();
+  }
+
+  getLoad({
+    type: 'network',
+    startTime: startTime.getTime(),
+    endTime: endTime.getTime(),
+    neType: '#',
+    neId: '#',
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      fnNetworkChart(res.data.network);
+    }
   });
-  option && neResourcesChart.value.setOption(option);
+
+  // 设置初始时间段
+  const initRangePicker: [string, string] = [
+    parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
+    parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
+  ];
+  rangePicker.all = initRangePicker;
+  rangePicker.network = initRangePicker;
+}
+
+/**图表显示数据 */
+const chartsOption = reactive({
+  /**网络 */
+  networkChart: {},
+});
+
+/**初始图表数据-Network */
+function fnNetworkChart(data: Record<string, any>[]) {
+  let networkDate: string[] = [];
+  let networkUp: string[] = [];
+  let networkDown: string[] = [];
+
+  for (const item of data) {
+    networkDate.push(parseDateWithoutYear(item.createTime));
+    networkUp.push(Number(item.up).toFixed(2));
+    networkDown.push(Number(item.down).toFixed(2));
+  }
+
+  // 图标参数
+  const option = {
+    xDatas: networkDate,
+    yDatas: [
+      {
+        name: t('views.monitor.monitor.up'),
+        data: networkUp,
+      },
+      {
+        name: t('views.monitor.monitor.down'),
+        data: networkDown,
+      },
+    ],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '20%',
+    },
+    formatStr: 'KB/s',
+  };
+  chartsOption.networkChart = option;
 }
 
 onMounted(() => {
-  setInterval(function () {
-    const random = +(Math.random() * 90).toFixed(2);
-    const random2 = +(Math.random() * 90).toFixed(2);
-    const random3 = +(Math.random() * 90).toFixed(2);
-    const random4 = +(Math.random() * 90).toFixed(2);
-    let color = '#1890ff';
-    if (random < 30) {
-      color = '#73d13d';
-    }
-    if (random > 60) {
-      color = '#ff4d4f';
-    }
-    neResourcesChart.value.setOption({
-      series: [
-        {
-          data: [
-            {
-              name: '系统内存',
-              value: random,
-              itemStyle: {
-                color: color,
-                shadowColor: color,
-              },
-            },
-          ],
-        },
-        {
-          data: [
-            {
-              name: '系统CPU',
-              value: random2,
-            },
-          ],
-        },
-      ],
-    });
-  }, 2000);
-
-  handleRanderChart(neResourcesDom.value, optionData);
+  fnGetList();
 });
-
-onBeforeUnmount(() => {});
 </script>
 
 <template>
-  <div ref="neResourcesDom" class="chart"></div>
+  <div class="chart">
+    <ChartLine
+      :option="chartsOption.networkChart"
+    ></ChartLine>
+  </div>
 </template>
 
 <style lang="less" scoped>
 .chart {
   width: 100%;
-  height: 100%;
+  height: 400px;
+}
+</style> -->
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import ChartLine from '@/components/ChartLine/index.vue';
+import { getLoad } from '@/api/monitor/monitor';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import {
+  YYYY_MM_DD_HH_MM_SS,
+  parseDateToStr,
+  parseDateWithoutYear,
+  parseStrToDate,
+} from '@/utils/date-utils';
+import { parseSizeFromKBs } from '@/utils/parse-utils';
+import dayjs, { Dayjs } from 'dayjs';
+const { t } = useI18n();
+
+/**开始结束时间类型 */
+type RangePickerType = {
+  placeholder: [string, string];
+  ranges: Record<string, [Dayjs, Dayjs]>;
+  /**全局时间 */
+  all: [string, string];
+  /**网络 */
+  network: [string, string];
+};
+
+/**开始结束时间 */
+let rangePicker = reactive<RangePickerType>({
+  placeholder: [
+    t('views.monitor.monitor.startTime'),
+    t('views.monitor.monitor.endTime'),
+  ],
+  ranges: {
+    [t('views.monitor.monitor.today')]: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+    [t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
+    [t('views.monitor.monitor.week')]: [
+      dayjs().startOf('week'),
+      dayjs().endOf('week'),
+    ],
+    [t('views.monitor.monitor.month')]: [
+      dayjs().startOf('month'),
+      dayjs().endOf('month'),
+    ],
+  },
+  all: ['', ''],
+  network: ['', ''],
+});
+
+/**查询全部资源数据列表 */
+function fnGetList() {
+  let startTime = null;
+  let endTime = null;
+  const dateString = rangePicker.all;
+  if (dateString[0]) {
+    startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS);
+    endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS);
+  } else {
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    startTime = now;
+    endTime = new Date();
+  }
+
+  getLoad({
+    type: 'network',
+    startTime: startTime.getTime(),
+    endTime: endTime.getTime(),
+    neType: '#',
+    neId: '#',
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && res.data) {
+      fnNetworkChart(res.data.network);
+    }
+  });
+
+  // 设置初始时间段
+  const initRangePicker: [string, string] = [
+    parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
+    parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
+  ];
+  rangePicker.all = initRangePicker;
+  rangePicker.network = initRangePicker;
+}
+
+/**图表显示数据 */
+const chartsOption = reactive({
+  /**网络 */
+  networkChart: {},
+});
+
+/**初始图表数据-Network */
+function fnNetworkChart(data: Record<string, any>[]) {
+  let networkDate: string[] = [];
+  let networkUp: string[] = [];
+  let networkDown: string[] = [];
+
+  for (const item of data) {
+    networkDate.push(parseDateWithoutYear(item.createTime));
+    networkUp.push(Number(item.up).toFixed(2));
+    networkDown.push(Number(item.down).toFixed(2));
+  }
+
+  // 图标参数
+  const option = {
+    xDatas: networkDate,
+    yDatas: [
+      {
+        name: t('views.monitor.monitor.up'),
+        data: networkUp,
+      },
+      {
+        name: t('views.monitor.monitor.down'),
+        data: networkDown,
+      },
+    ],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '20%',
+    },
+    formatStr: 'KB/s',
+  };
+  chartsOption.networkChart = option;
+}
+
+onMounted(() => {
+  fnGetList();
+});
+</script>
+
+<template>
+  <div class="chart">
+    <ChartLine :option="chartsOption.networkChart"></ChartLine>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 400px;
 }
 </style>
diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css
index 0486138e..db660a64 100644
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -115,36 +115,12 @@
   height: 14.167rem;
 }
 .alarmType .chart {
-  display: flex;
+  width: 100%;
+  height: 100%;
   margin-top: 1rem;
-  justify-content: space-between;
-}
-.alarmType .bar {
-  width: 13rem;
-  height: 10rem;
-  margin-left: -0.4rem;
-}
-.alarmType .data {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 7rem;
-  padding: 1.5rem 1.25rem;
-  box-sizing: border-box;
-  background-image: url(../images/rect.png);
-  background-size: cover;
-}
-.alarmType .data h4 {
-  margin-bottom: 0.5rem;
-  font-size: 1.167rem;
-  color: #fff;
-}
-.alarmType .data span {
-  display: block;
-  color: #4c9bfd;
-  font-size: 0.667rem;
 }
 
+
 /* 告警趋势 */
 .alarmDay {
   height: 16rem;
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index 3d2c95cf..105339f3 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -71,25 +71,7 @@ onMounted(() => {});
         <div class="inner">
           <h3>本月告警统计</h3>
           <div class="chart">
-            <div class="bar">
-              <AlarnTypeBar />
-            </div>
-            <div class="data">
-              <div class="item">
-                <h4>320,11</h4>
-                <span>
-                  <i class="icon-dot" style="color: #ed3f35"></i>
-                  告警总数
-                </span>
-              </div>
-              <div class="item">
-                <h4>418</h4>
-                <span>
-                  <i class="icon-dot" style="color: #eacf19"></i>
-                  本月新增
-                </span>
-              </div>
-            </div>
+            <AlarnTypeBar />
           </div>
         </div>
       </div>