diff --git a/src/api/faultManage/actAlarm.ts b/src/api/faultManage/actAlarm.ts
index becfee72..ed60a580 100644
--- a/src/api/faultManage/actAlarm.ts
+++ b/src/api/faultManage/actAlarm.ts
@@ -287,3 +287,34 @@ export async function exportAll(query: Record<string, any>) {
   }
   return result;
 }
+
+
+/**
+ * 首页活动告警
+ * @param query 查询参数
+ * @returns bolb
+ */
+export async function mainGet() {
+  let totalSQL = `select count(*) as value,alarm_type as name   from alarm where alarm_status=1 group by alarm_type`;
+
+  // 发起请求
+  const result = await request({
+    url: `/api/rest/databaseManagement/v1/select/omc_db/alarm`,
+    method: 'get',
+    params: {
+      SQL: totalSQL,
+    },
+  });
+
+  // 解析数据
+  if (result.code === RESULT_CODE_SUCCESS) {
+    const itemData = result.data.data;
+    if (Array.isArray(itemData)) {
+      const v = itemData[0]['alarm'];
+      if (Array.isArray(v)) {
+        result.data = v;
+      }
+    }
+  }
+  return result;
+}
\ No newline at end of file
diff --git a/src/views/dashboard/overview/components/AlarnDayLine/index.vue b/src/views/dashboard/overview/components/AlarnDayLine/index.vue
index 1257c5b7..7c786b35 100644
--- a/src/views/dashboard/overview/components/AlarnDayLine/index.vue
+++ b/src/views/dashboard/overview/components/AlarnDayLine/index.vue
@@ -1,381 +1,239 @@
 <template>
-  <div id="trend" class="chart-container"></div>
+  <div ref="alarmDayLine" class="chart-container"></div>
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { markRaw, onMounted, ref } from 'vue';
 import { mainGet } from '@/api/faultManage/actAlarm';
 import * as echarts from 'echarts/core';
 import {
-  GridComponent,
   TitleComponent,
+  TitleComponentOption,
   TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
   LegendComponent,
+  LegendComponentOption,
 } from 'echarts/components';
-import { BarChart, PieChart } from 'echarts/charts';
+import { LineChart, LineSeriesOption } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
-import { LabelLayout } from 'echarts/features';
-import useI18n from '@/hooks/useI18n';
-const { t, currentLocale } = useI18n();
+
 echarts.use([
-  GridComponent,
-  BarChart,
-  CanvasRenderer,
   TitleComponent,
   TooltipComponent,
   GridComponent,
   LegendComponent,
-  BarChart,
+  LineChart,
   CanvasRenderer,
-  TooltipComponent,
-  LegendComponent,
-  PieChart,
-  CanvasRenderer,
-  LabelLayout,
+  UniversalTransition,
 ]);
-// 将现有数据补全为期望的格式
-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;
-    }
+
+type EChartsOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | LineSeriesOption
+>;
+/**图DOM节点实例对象 */
+const alarmDayLine = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+const alarmDayLineChart = ref<any>(null);
+
+var xData = (function () {
+  var data = [];
+  for (var i = 2011; i < 2017; i++) {
+    data.push(i + '年');
+  }
+  return data;
+})();
+
+var color = ['#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d'];
+var name = ['通信告警', '设备告警', '处理错误', '环境告警', '服务质量'];
+var data = [
+  [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
+  [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
+  [13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
+  [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
+  [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
+];
+
+var series: any = [];
+for (var i = 0; i < 5; i++) {
+  series.push({
+    name: name[i],
+    type: 'line',
+    symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+    symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+    smooth: true, //是否平滑曲线显示
+    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+    areaStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: color[i],
+            },
+            {
+              offset: 0.8,
+              color: 'rgba(255,255,255,0)',
+            },
+          ],
+          false
+        ),
+        // shadowColor: 'rgba(255,255,255, 0.1)',
+        shadowBlur: 10,
+        opacity: 0.3,
+      },
+    },
+    itemStyle: {
+      normal: {
+        color: color[i],
+        lineStyle: {
+          width: 1,
+          type: 'solid', //'dotted'虚线 'solid'实线
+        },
+        borderColor: color[i], //图形的描边颜色。支持的格式同 color
+        borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
+        barBorderRadius: 0,
+        label: {
+          show: false,
+        },
+        opacity: 0.5,
+      },
+    },
+    data: data[i],
   });
-  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',
-        },
-      },
+const optionData: EChartsOption = {
+  legend: {
+    itemGap: 10,
+    itemWidth: 20,
+    textStyle: {
+      color: '#fff',
+      fontSize: '15',
+    },
+    data: name,
+  },
 
-      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季度',
-          ],
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      // 坐标轴指示器，坐标轴触发有效
+      // lineStyle: {
+      //   color: '#57617B',
+      // },
+    },
+    formatter:
+      '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%<br />',
+    // backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+  },
+  xAxis: [
+    {
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          color: '#32346c',
         },
-        {
-          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季度',
-          ],
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#32346c ',
         },
-        {
-          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季度',
-          ],
+      },
+      boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+      axisTick: {
+        show: false,
+      },
+      splitArea: {
+        show: false,
+      },
+      axisLabel: {
+        inside: false,
+        textStyle: {
+          color: '#bac0c0',
+          fontWeight: 'normal',
+          fontSize: '12',
         },
-        {
-          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); // 更新柱状图
-    });
-  });
+      },
+      data: xData,
+    },
+  ],
+  yAxis: {
+    type: 'value',
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#32346c',
+      },
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#32346c ',
+      },
+    },
+    axisLabel: {
+      textStyle: {
+        color: '#bac0c0',
+        fontWeight: 'normal',
+        fontSize: '12',
+      },
+      formatter: '{value}%',
+    },
+  },
+  series: series,
+};
+
+function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
+  if (!container) return;
+  const { clientHeight, clientWidth } = container;
+
+  // alarmDayLineChart.value = echarts.init(container, 'light', {
+  //   width: clientWidth,
+  //   height: clientHeight - 36,
+  // });
+
+  alarmDayLineChart.value = markRaw(
+    echarts.init(container, 'light', {
+      width: clientWidth,
+      height: clientHeight - 36,
+    })
+  );
+  option && alarmDayLineChart.value.setOption(option);
 }
 
 onMounted(() => {
-  fnDesign();
+  fnDesign(alarmDayLine.value, optionData);
+  //   setInterval(() => {
+  //     neResourcesChart.value.setOption({
+  //         legend: {
+  //             selected: {
+  //                 '上行': false,
+  //                 '下行': false
+  //             }
+  //         }
+  //     })
+  //     neResourcesChart.value.setOption({
+  //         legend: {
+  //             selected: {
+  //                 '上行': true,
+  //                 '下行': true
+  //             }
+  //         }
+  //     })
+  // }, 10000)
 });
 </script>
 
diff --git a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
index bfe5fc9e..6cab9857 100644
--- a/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
+++ b/src/views/dashboard/overview/components/AlarnTypeBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="main" class="chart-container"></div>
+  <div id="alarmType" class="chart-container"></div>
 </template>
 <script setup lang="ts">
 import { onMounted } from 'vue';
@@ -9,7 +9,7 @@ import {
   GridComponent,
   TitleComponent,
   TooltipComponent,
-  LegendComponent,
+  LegendComponent, //
 } from 'echarts/components';
 import { BarChart, PieChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -33,24 +33,23 @@ echarts.use([
   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 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];
+  result.forEach((item: any) => {
+    item.name = t('views.index.' + item.name);
+  });
+  return result;
+}
 
 function fnDesign() {
   mainGet().then((res: any) => {
@@ -76,7 +75,7 @@ function fnDesign() {
         value: 0,
       },
     ];
-    var chartDom = document.getElementById('main');
+    var chartDom = document.getElementById('alarmType');
     var myChart = echarts.init(chartDom);
     var option: any;
     var colorList = [
@@ -88,165 +87,9 @@ function fnDesign() {
       '#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,
+        bottom: 120,
         left: 0,
         right: '10%',
       },
@@ -276,22 +119,19 @@ function fnDesign() {
           },
           labelLine: {
             show: true,
-            length: 20,
+            length: 10,
             length2: 120,
             align: 'right',
             color: '#000',
           },
           label: {
-            formatter: '{b}: {d}%',
-            padding: [0, -110],
+            show: true,
+            formatter: '({d}%){b}:{c}',
+            padding: [0, -120],
+            fontSize:15,
             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', // 修改名称颜色
@@ -300,10 +140,10 @@ function fnDesign() {
           },
           data: [
             { value: 1, name: '通信告警' },
-            { value: 2, name: '设备告警' },
-            { value: 3, name: '服务质量' },
-            { value: 3, name: '环境告警' },
-            { value: 2, name: '处理错误' },
+            { value: 1, name: '设备告警' },
+            { value: 1, name: '服务质量' },
+            { value: 1, name: '环境告警' },
+            { value: 1, name: '处理错误' },
           ],
         },
         // 边框的设置
@@ -346,13 +186,11 @@ function fnDesign() {
     };
     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); // 更新柱状图
     });
diff --git a/src/views/dashboard/overview/components/UPFFlow/index.vue b/src/views/dashboard/overview/components/UPFFlow/index.vue
index 48fffbbb..57b4a587 100644
--- a/src/views/dashboard/overview/components/UPFFlow/index.vue
+++ b/src/views/dashboard/overview/components/UPFFlow/index.vue
@@ -1,295 +1,244 @@
-<!-- <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>
+  <div ref="upfFlow" class="chart-container"></div>
 </template>
-
-<style lang="less" scoped>
-.chart {
-  width: 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 { onMounted, ref } from 'vue';
+import { mainGet } from '@/api/faultManage/actAlarm';
+import * as echarts from 'echarts/core';
 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();
+  TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
+  LegendComponent,
+  LegendComponentOption,
+} from 'echarts/components';
+import { LineChart, LineSeriesOption } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { GaugeSeriesOption } from 'echarts';
+import { markRaw } from 'vue';
 
-/**开始结束时间类型 */
-type RangePickerType = {
-  placeholder: [string, string];
-  ranges: Record<string, [Dayjs, Dayjs]>;
-  /**全局时间 */
-  all: [string, string];
-  /**网络 */
-  network: [string, string];
-};
+echarts.use([
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+]);
 
-/**开始结束时间 */
-let rangePicker = reactive<RangePickerType>({
-  placeholder: [
-    t('views.monitor.monitor.startTime'),
-    t('views.monitor.monitor.endTime'),
+type EChartsOption = echarts.ComposeOption<
+  | TooltipComponentOption
+  | GridComponentOption
+  | LegendComponentOption
+  | LineSeriesOption
+>;
+/**图DOM节点实例对象 */
+const upfFlow = ref<HTMLElement | undefined>(undefined);
+
+/**图实例对象 */
+const upfFlowChart = ref<any>(null);
+
+// // 将现有数据补全为期望的格式
+// 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;
+// }
+var charts = {
+  unit: 'Kbps',
+  names: ['上行', '下行'],
+  lineX: [
+    '2018-11-11 17:01',
+    '2018-11-11 17:02',
+    '2018-11-11 17:03',
+    '2018-11-11 17:04',
+    '2018-11-11 17:05',
+    '2018-11-11 17:06',
+    '2018-11-11 17:07',
+    '2018-11-11 17:08',
+    '2018-11-11 17:09',
+    '2018-11-11 17:10',
+    '2018-11-11 17:11',
+    '2018-11-11 17:12',
+    '2018-11-11 17:13',
+    '2018-11-11 17:14',
+    '2018-11-11 17:15',
+    '2018-11-11 17:16',
+    '2018-11-11 17:17',
+    '2018-11-11 17:18',
+    '2018-11-11 17:19',
+    '2018-11-11 17:20',
   ],
-  ranges: {
-    [t('views.monitor.monitor.today')]: [
-      dayjs().subtract(1, 'day').startOf('day'),
-      dayjs().subtract(1, 'day').endOf('day'),
+  value: [
+    [
+      451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165,
+      236, 527, 328, 129, 530,
     ],
-    [t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
-    [t('views.monitor.monitor.week')]: [
-      dayjs().startOf('week'),
-      dayjs().endOf('week'),
+    [
+      360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
+      325, 468, 108, 253, 98,
     ],
-    [t('views.monitor.monitor.month')]: [
-      dayjs().startOf('month'),
-      dayjs().endOf('month'),
-    ],
-  },
-  all: ['', ''],
-  network: ['', ''],
-});
+  ],
+};
+var color = ['rgba(23, 255, 243', 'rgba(255,100,97'];
+var lineY: any = [];
 
-/**查询全部资源数据列表 */
-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();
+for (var i = 0; i < charts.names.length; i++) {
+  var x = i;
+  if (x > color.length - 1) {
+    x = color.length - 1;
   }
-
-  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;
+  var data = {
+    name: charts.names[i],
+    type: 'line',
+    color: color[x] + ')',
+    smooth: true,
+    areaStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: color[x] + ', 0.3)',
+            },
+            {
+              offset: 0.8,
+              color: color[x] + ', 0)',
+            },
+          ],
+          false
+        ),
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+    },
+    symbol: 'circle',
+    symbolSize: 5,
+    data: charts.value[i],
+  };
+  lineY.push(data);
 }
 
-/**图表显示数据 */
-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%',
+const optionData: EChartsOption = {
+  tooltip: {
+    show: true, //是否显示提示框组件
+    trigger: 'axis',
+  },
+  legend: {
+    data: charts.names,
+    textStyle: {
+      fontSize: 12,
+      color: 'rgb(0,253,255,0.6)',
     },
-    formatStr: 'KB/s',
-  };
-  chartsOption.networkChart = option;
+    right: '4%',
+  },
+  grid: {
+    top: '14%',
+    left: '4%',
+    right: '4%',
+    bottom: '12%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: charts.lineX,
+    axisLabel: {
+      textStyle: {
+        color: 'rgb(0,253,255,0.6)',
+      },
+      formatter: function (params: any) {
+        return params.split(' ')[0] + '\n' + params.split(' ')[1];
+      },
+    },
+  },
+  yAxis: {
+    name: charts.unit,
+    type: 'value',
+    axisLabel: {
+      formatter: '{value}',
+      textStyle: {
+        color: 'rgb(0,253,255,0.6)',
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgb(23,255,243,0.3)',
+      },
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgb(0,253,255,0.6)',
+      },
+    },
+    label: {
+      normal: {
+        show: true, //折点显示数值,
+      },
+    },
+  },
+  series: lineY,
+};
+
+function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
+  if (!container) return;
+  const { clientHeight, clientWidth } = container;
+
+  upfFlowChart.value = markRaw(
+    echarts.init(container, 'light', {
+      width: clientWidth,
+      height: clientHeight - 36,
+    })
+  );
+  option && upfFlowChart.value.setOption(option);
 }
 
 onMounted(() => {
-  fnGetList();
+  fnDesign(upfFlow.value, optionData);
+  setInterval(() => {
+    upfFlowChart.value.setOption({
+      legend: {
+        selected: {
+          上行: false,
+          下行: false,
+        },
+      },
+    });
+    upfFlowChart.value.setOption({
+      legend: {
+        selected: {
+          上行: true,
+          下行: true,
+        },
+      },
+    });
+  }, 10000);
 });
 </script>
 
-<template>
-  <div class="chart">
-    <ChartLine :option="chartsOption.networkChart"></ChartLine>
-  </div>
-</template>
-
 <style lang="less" scoped>
-.chart {
+.chart-container {
+  /* 设置图表容器大小和位置 */
   width: 100%;
-  height: 400px;
+  height: 100%;
 }
 </style>
diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css
index 83374f29..d3f9a801 100644
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -98,6 +98,7 @@
 .overview .inner {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .overview .inner h4 {
   font-size: 1.167rem;