diff --git a/src/components/Charts/appearanceDailyAlertChart.vue b/src/components/Charts/appearanceDailyAlertChart.vue
index 86a35a5..cd8de85 100644
--- a/src/components/Charts/appearanceDailyAlertChart.vue
+++ b/src/components/Charts/appearanceDailyAlertChart.vue
@@ -2,23 +2,199 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-08-14 10:33:46
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-15 15:18:21
+ * @LastEditTime: 2025-08-18 17:03:28
  * @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
-<!--
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2025-08-14 10:33:46
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-15 15:17:39
- * @FilePath: \5G-Web\src\components\Charts\appearanceDailyAlertChart.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 外观日告警统计
 -->
+<script lang="ts" setup>
+import * as echarts from "echarts";
+
+function initChart() {
+  const chartDom = document.getElementById("appearanceDailyAlertChart");
+  const mainChart = echarts.init(chartDom);
+
+  const xAxisData = [
+    "1日",
+    "2日",
+    "3日",
+    "4日",
+    "5日",
+    "6日",
+    "7日",
+    "8日",
+    "9日",
+    "10日",
+    "11日",
+    "12日",
+    "13日",
+    "14日",
+    "15日",
+    "16日",
+  ];
+  const mockData = [
+    {
+      name: "搭扣未搭",
+      data: [
+        80, 30, 120, 80, 100, 60, 70, 50, 40, 60, 110, 30, 80, 100, 120, 150,
+      ],
+      color: "rgba(212, 145, 20, 1)",
+      color1: "rgba(212, 145, 20, 0.3)",
+    },
+    {
+      name: "小门搭扣丢失",
+      data: [
+        100, 20, 220, 180, 120, 180, 100, 120, 100, 140, 160, 20, 180, 140, 80,
+        170,
+      ],
+      color: "rgba(0, 157, 255, 1)",
+      color1: "rgba(0, 157, 255, 0.3)",
+    },
+    {
+      name: "门折页座脱落",
+      data: [
+        150, 180, 200, 190, 180, 50, 80, 100, 80, 140, 120, 190, 150, 60, 100,
+        120,
+      ],
+      color: "rgba(44, 188, 204, 1)",
+      color1: "rgba(44, 188, 204, 0.3)",
+    },
+    {
+      name: "下侧门板缺失",
+      data: [
+        120, 140, 180, 170, 80, 140, 130, 110, 140, 100, 100, 140, 120, 80, 140,
+        140,
+      ],
+      color: "rgba(13, 233, 138, 1)",
+      color1: "rgba(13, 233, 138, 0.3)",
+    },
+    {
+      name: "小门外胀",
+      data: [
+        100, 120, 80, 100, 50, 70, 150, 120, 100, 140, 60, 100, 60, 150, 120,
+        170,
+      ],
+      color: "rgba(198, 81, 14, 1)",
+      color1: "rgba(198, 81, 14, 0.3)",
+    },
+    {
+      name: "小窗裂纹",
+      data: [
+        150, 160, 180, 170, 150, 80, 100, 140, 120, 80, 140, 80, 120, 80, 100,
+        150,
+      ],
+      color: "rgba(255, 209, 92, 1)",
+      color1: "rgba(255, 209, 92, 0.3)",
+    },
+  ];
+
+  const seriesOptions = [];
+  const legendData = [];
+
+  mockData.forEach((item) => {
+    legendData.push(item.name);
+    seriesOptions.push({
+      name: item.name,
+      type: "line",
+      color: item.color1,
+      symbolSize: 9,
+      symbol: "none",
+      areaStyle: {
+        color: {
+          type: "line",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: item.color1,
+            },
+            {
+              offset: 1,
+              color: "rgba(255, 209, 92, 0)",
+            },
+          ],
+          global: false,
+        },
+      },
+      data: item.data,
+    });
+  });
+
+  let option = {
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      orient: "horizontal",
+      right: 0,
+      top: "5%",
+      icon: "rect",
+      // itemWidth: 16,
+      // itemHeight: 16,
+      // itemGap: 32,
+      textStyle: {
+        fontFamily: "PingFangSC-Semibold",
+        fontSize: 14,
+        color: "#FFFFFF",
+        padding: [0, 2],
+      },
+      data: legendData,
+    },
+    grid: {
+      top: "25%",
+      left: "2%",
+      right: "2%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+      axisTick: {
+        show: false,
+      },
+      data: xAxisData,
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255,255,255,0.1)",
+          width: 2,
+        },
+      },
+    },
+    series: seriesOptions,
+  };
+  mainChart.setOption(option);
+}
+onMounted(() => {
+  initChart();
+});
+</script>
 <template>
-  <div
-    class="main-chart"
-    ref="mainChartRef"
-    id="appearanceDailyAlertChart"
-    style="width: 100%; height: 100%"
-  ></div>
+  <div id="appearanceDailyAlertChart" style="width: 100%; height: 100%"></div>
 </template>
diff --git a/src/components/Charts/appearanceDailyDetectionChart.vue b/src/components/Charts/appearanceDailyDetectionChart.vue
index e30fe85..ca13eb2 100644
--- a/src/components/Charts/appearanceDailyDetectionChart.vue
+++ b/src/components/Charts/appearanceDailyDetectionChart.vue
@@ -1,3 +1,11 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-08-14 10:33:22
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-18 17:00:57
+ * @FilePath: \5G-Web\src\components\Charts\appearanceDailyDetectionChart.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <script setup lang="ts">
 import * as echarts from "echarts";
 
@@ -10,107 +18,190 @@ const props = defineProps({
 function initChart() {
   const chartDom = document.getElementById("appearanceDailyDetectionChart");
   const mainChart = echarts.init(chartDom);
-  const currDatas = [];
-
-  const option = {
-    color: ["red", "#B4C0CC"],
-    tooltip: {
-      trigger: "axis",
-      formatter: "{b} {a}: {c}",
+   const data1 = [
+    {
+      name: "1日",
+      value: 175,
     },
-    legend: {
-      data: ["蒸发量"],
+    {
+      name: "2日",
+      value: 148,
     },
-    toolbox: {
-      show: true,
+    {
+      name: "3日",
+      value: 195,
     },
-    xAxis: [
-      {
-        type: "category",
-        data: [
-          "1日",
-          "2日",
-          "3日",
-          "4日",
-          "5日",
-          "6日",
-          "7日",
-          "8日",
-          "9日",
-          "10日",
-          "11日",
-          "12日",
-          "13日",
-          "14日",
-          "15日",
-          "16日",
-        ],
-        splitLine: {
-          lineStyle: {
-            color: "#B4C0CC",
-            opacity: 0.1,
-          },
+    {
+      name: "4日",
+      value: 115,
+    },
+    {
+      name: "5日",
+      value: 148,
+    },
+    {
+      name: "6日",
+      value: 95,
+    },
+    {
+      name: "7日",
+      value: 56,
+    },
+    {
+      name: "8日",
+      value: 45,
+    },
+    {
+      name: "9日",
+      value: 15,
+    },
+    {
+      name: "10日",
+      value: 48,
+    },
+    {
+      name: "11日",
+      value: 95,
+    },
+    {
+      name: "12日",
+      value: 128,
+    },
+    {
+      name: "13日",
+      value: 34,
+    },
+    {
+      name: "14日",
+      value: 123,
+    },
+    {
+      name: "15日",
+      value: 175,
+    },
+    {
+      name: "16日",
+      value: 148,
+    },
+  ];
+  const createSvg = (shadowColor, shadowBlur) => `
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
+        x="0px" y="0px" 
+        viewBox="0 0 32 128"
+        xml:space="preserve"
+    >
+        <style>
+            .st2 {
+                fill: transparent;
+                stroke: ${shadowColor};
+                stroke-width: ${shadowBlur}px;
+                filter: url(#chart-inset-shadow);
+            }
+        </style>
+        <defs>
+            <filter id="chart-inset-shadow" width="200%" height="200%" x="-50%" y="-50%">
+        		<feGaussianBlur in="SourceGraphic" result="gass" stdDeviation="${
+              shadowBlur * 0.75
+            }" />
+        		<feMerge>
+        			<feMergeNode in="gass" />
+        		</feMerge>
+        	</filter>
+        </defs>
+        <path class="st2" d="M0 0 L32 0 L32 128 L0 128 Z" />
+    </svg>
+`;
+
+  const svgString = createSvg("rgba(7, 131, 250, 1)", 8);
+  const svg = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const barWidth = 16;
+  const DOMURL = window.URL || window.webkitURL || window;
+  const insetShadowUrl = DOMURL.createObjectURL(svg);
+    let xAxisData = [];
+  let seriesData1 = [];
+  data1.forEach((item) => {
+    xAxisData.push(item.name);
+    seriesData1.push(item.value);
+  });
+
+
+  const option = {
+    backgroundColor: "",
+     grid: {
+    left: "1%",
+    right: "1%",
+    bottom: "2%",
+    top: "15%",
+    containLabel: true,
+  },
+    xAxis: {
+      type: "category",
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+      splitLine: {
+        show: false,
+      },
+      data: xAxisData,
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255,255,255,0.1)",
+          width: 2,
         },
       },
-    ],
-    yAxis: [
+    },
+    series: [
       {
-        type: "value",
-        z: 200,
+        data: seriesData1,
+        type: "pictorialBar",
+        symbol: "image://" + insetShadowUrl,
+        barWidth: barWidth,
       },
-    ],
-    series: [
       {
-        name: "",
+        data: seriesData1,
         type: "bar",
-        barWidth: "25%",
-        // barGap: '80%',
-        data: [
-          220, 240, 135, 16, 157, 200, 88, 14, 190, 220, 240, 135, 197, 21, 91,
-          100, 220,
-        ],
+        barWidth: barWidth,
         itemStyle: {
-          // normal: {
-          //   //渲染环形渐变色
-          //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-          //     {
-          //       offset: 0,
-          //       color: "#0055FF", // 0% 处的颜色
-          //     },
-          //     {
-          //       offset: 1,
-          //       color: "#0783FA", // 100% 处的颜色
-          //     },
-          //   ]),
-          // },
-           normal: {
-          color: {
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            type: 'linear',
-            global: false,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#0055FF',
-              },
-              {
-                offset: 1,
-                color: '#0783FA', //底部渐变颜色
-              },
-            ],
-          },
-        },
-          emphasis: {
-            color: "#dbf0fc",
-          },
+          color: "transparent",
+          borderWidth: 3,
+          borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(45, 230, 255, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(7, 131, 250, 1)",
+            },
+          ]),
+          shadowColor: "blue",
+          shadowBlur: 12,
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
         },
       },
     ],
   };
-
   mainChart.setOption(option);
 }
 
diff --git a/src/components/Charts/diggerDailyDistanceChart.vue b/src/components/Charts/diggerDailyDistanceChart.vue
index e69de29..c435f54 100644
--- a/src/components/Charts/diggerDailyDistanceChart.vue
+++ b/src/components/Charts/diggerDailyDistanceChart.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import * as echarts from "echarts";
+function initChart() {
+  const chartDom = document.getElementById("diggerDailyDistanceChart");
+  const mainChart = echarts.init(chartDom);
+
+  let data1 = [
+    {
+      name: "1日",
+      value: 175,
+    },
+    {
+      name: "2日",
+      value: 148,
+    },
+    {
+      name: "3日",
+      value: 195,
+    },
+    {
+      name: "4日",
+      value: 115,
+    },
+    {
+      name: "5日",
+      value: 148,
+    },
+    {
+      name: "6日",
+      value: 95,
+    },
+    {
+      name: "7日",
+      value: 56,
+    },
+    {
+      name: "8日",
+      value: 45,
+    },
+    {
+      name: "9日",
+      value: 15,
+    },
+    {
+      name: "10日",
+      value: 48,
+    },
+    {
+      name: "11日",
+      value: 95,
+    },
+    {
+      name: "12日",
+      value: 128,
+    },
+    {
+      name: "13日",
+      value: 34,
+    },
+    {
+      name: "14日",
+      value: 123,
+    },
+    {
+      name: "15日",
+      value: 175,
+    },
+    {
+      name: "16日",
+      value: 148,
+    },
+  ];
+  let xAxisData = [];
+  let seriesData2 = [];
+
+  data1.forEach((item) => {
+    xAxisData.push(item.name);
+    seriesData2.push(item.value);
+  });
+  let option = {
+    tooltip: {
+      textStyle: {
+        color: "#000",
+      },
+      padding: [10, 10],
+      trigger: "axis",
+      backgroundColor: "#fff",
+      borderColor: "rgba(112, 119, 242, 0.8)",
+      borderWidth: 1,
+    },
+    grid: {
+      left: "2%",
+      right: "0%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    toolbox: {
+      show: false,
+    },
+
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+    },
+    yAxis: [
+      {
+        type: "value",
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#35414D",
+            type: "dashed",
+          },
+        },
+        axisLabel: {
+          color: "#B4C0CC",
+        },
+      },
+    ],
+    series: [
+      {
+        type: "line",
+        data: seriesData2,
+        symbolSize: 10,
+        symbol: "circle",
+        smooth: false,
+        yAxisIndex: 0,
+        label: {
+          show: false,
+          //   textStyle: {
+          //     color: "#FFD15C",
+          //     fontSize: 20,
+          //     fontFamily: "DIN",
+          //     fontWeight: "bold",
+          //   },
+          position: "top",
+          formatter: function (p) {
+            return p.value > 0 ? p.value : "";
+          },
+        },
+        lineStyle: {
+          width: 2,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "rgba(255, 209, 92, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(255, 209, 92, 1)",
+            },
+          ]),
+          shadowColor: "rgba(255, 209, 92, 0.4)",
+          shadowBlur: 10,
+          shadowOffsetY: 10,
+        },
+        itemStyle: {
+          normal: {
+            color: "rgba(255, 209, 92, 1)",
+            borderColor: "",
+            borderWidth: 3,
+            shadowColor: "rgba(255, 209, 92, 01)",
+            shadowBlur: 5,
+          },
+        },
+        // areaStyle: {
+        //   //区域填充样式
+        //   normal: {
+        //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+        //     color: new echarts.graphic.LinearGradient(
+        //       0,
+        //       0,
+        //       0,
+        //       1,
+        //       [
+        //         {
+        //           offset: 0,
+        //           color: "rgba(165, 170, 247, 1)",
+        //         },
+        //         {
+        //           offset: 0.5,
+        //           color: "rgba(165, 170, 247, 0.2)",
+        //         },
+        //         {
+        //           offset: 1,
+        //           color: "rgba(165, 170, 247, 0)",
+        //         },
+        //       ],
+        //       false
+        //     ),
+        //     shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        //   },
+        // },
+      },
+    ],
+  };
+
+  mainChart.setOption(option);
+}
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<template>
+  <div id="diggerDailyDistanceChart" style="width: 100%; height: 100%"></div>
+</template>
diff --git a/src/components/Charts/diggerHourlyDistanceChart.vue b/src/components/Charts/diggerHourlyDistanceChart.vue
index e69de29..9e89538 100644
--- a/src/components/Charts/diggerHourlyDistanceChart.vue
+++ b/src/components/Charts/diggerHourlyDistanceChart.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import * as echarts from "echarts";
+function generateData(totalNum, bigvalue, smallvalue, color) {
+  let dataArr = [];
+  for (var i = 0; i < totalNum; i++) {
+    if (i % 2 === 0) {
+      dataArr.push({
+        name: (i + 1).toString(),
+        value: bigvalue,
+        itemStyle: {
+          normal: {
+            color: color,
+            borderWidth: 0,
+          },
+        },
+      });
+    } else {
+      dataArr.push({
+        name: (i + 1).toString(),
+        value: smallvalue,
+        itemStyle: {
+          normal: {
+            color: "rgba(0,0,0,0)",
+            borderWidth: 0,
+          },
+        },
+      });
+    }
+  }
+  return dataArr;
+}
+function initChart() {
+  const chartDom = document.getElementById("diggerHourlyDistanceChart");
+  const mainChart = echarts.init(chartDom);
+
+  let data1 = [
+    {
+      name: "05:00",
+      value: 175,
+    },
+    {
+      name: "06:00",
+      value: 148,
+    },
+    {
+      name: "07:00",
+      value: 95,
+    },
+    {
+      name: "08:00",
+      value: 175,
+    },
+    {
+      name: "09:00",
+      value: 148,
+    },
+    {
+      name: "10:00",
+      value: 95,
+    },
+    {
+      name: "11:00",
+      value: 56,
+    },
+    {
+      name: "12:00",
+      value: 45,
+    },
+    {
+      name: "13:00",
+      value: 34,
+    },
+    {
+      name: "14:00",
+      value: 123,
+    },
+    {
+      name: "15:00",
+      value: 175,
+    },
+    {
+      name: "16:00",
+      value: 148,
+    },
+    {
+      name: "17:00",
+      value: 95,
+    },
+    {
+      name: "18:00",
+      value: 123,
+    },
+    {
+      name: "19:00",
+      value: 175,
+    },
+    {
+      name: "20:00",
+      value: 148,
+    },
+    {
+      name: "21:00",
+      value: 95,
+    },
+    {
+      name: "22:00",
+      value: 148,
+    },
+    {
+      name: "23:00",
+      value: 95,
+    },
+  ];
+  let xAxisData = [];
+  let seriesData1 = [];
+
+  data1.forEach((item) => {
+    xAxisData.push(item.name);
+    seriesData1.push(item.value);
+  });
+  const yList = [80, 100, 100, 100];
+  const xList = ["寿命≤100", "100<寿命≤200", "200<寿命≤300", "寿命>300"];
+  const color = ["#00FEEE", "#2fd28d", "#c4742d", "#c42d2d"];
+  const xData = xList.map((item, index) => {
+    return {
+      value: item,
+      textStyle: {
+        color: color[index],
+      },
+    };
+  });
+  const dom = 200;
+  const barWidth = dom / 10;
+  const colors = [
+    {
+      type: "linear",
+      x: 1,
+      x2: 1,
+      y: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 1,
+          color: "rgba(216,216,216,0)",
+        },
+        {
+          offset: 0.5,
+          color: "rgba(103,236,228,0.53)",
+        },
+        {
+          offset: 0,
+          color: "#00FEEE",
+        },
+      ],
+    },
+  ];
+  const colors1 = [
+    {
+      type: "linear",
+      x: 0,
+      x2: 0,
+      y: 1,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0.3,
+          color: "#4bcde4",
+        },
+        {
+          offset: 1,
+          color: "#4b88e4",
+        },
+      ],
+    },
+  ];
+  const option = {
+    backgroundColor: "transparent",
+    //X轴
+    xAxis: {
+      name: "X",
+      nameTextStyle: {
+        color: "#FFFFFF",
+        padding: [0, 0, 0, 50],
+      },
+
+      data: xAxisData,
+      show: true,
+      type: "category",
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#35414D",
+          type: "dashed",
+        },
+      },
+      axisLabel: {
+        color: "#B4C0CC",
+      },
+    },
+    /**区域位置*/
+    grid: {
+      // Adjust grid for spacing
+      left: "5%",
+      right: "0%",
+      bottom: "5%",
+      top: "15%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+
+    series: [
+      {
+        type: "bar",
+        barWidth: barWidth,
+        symbolOffset: ["10%", "50%"],
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return colors[0];
+            },
+          },
+        },
+        data: seriesData1,
+      },
+
+      {
+        // 实体柱状图底部
+        z: 4,
+        type: "pictorialBar",
+        data: seriesData1,
+
+        symbolOffset: ["0%", "0%"],
+        symbolSize: [barWidth, barWidth * 0.3],
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return "rgba(0,255,252,0.1)";
+            },
+          },
+        },
+      },
+      {
+        // 实体柱状图顶部
+        z: 3,
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: seriesData1,
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [barWidth, barWidth * 0.3],
+        itemStyle: {
+          normal: {
+            borderWidth: 0,
+            color: function (params) {
+              return colors1[0];
+            },
+          },
+        },
+      },
+    ],
+  };
+
+  mainChart.setOption(option);
+}
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<template>
+  <div id="diggerHourlyDistanceChart" style="width: 100%; height: 100%"></div>
+</template>
diff --git a/src/components/Charts/poleDailyAlertChart.vue b/src/components/Charts/poleDailyAlertChart.vue
index bae802d..e8497b6 100644
--- a/src/components/Charts/poleDailyAlertChart.vue
+++ b/src/components/Charts/poleDailyAlertChart.vue
@@ -28,15 +28,15 @@ const propsData = {
   ],
   legendData: ["撑杆断裂", "撑杆锈蚀", "撑杆穿孔"],
   seriesData: {
-    "撑杆断裂": [
+    撑杆断裂: [
       60, 80, 120, 100, 90, 120, 110, 140, 130, 120, 120, 125, 130, 160, 150,
       100,
     ],
-    "撑杆锈蚀": [
+    撑杆锈蚀: [
       70, 110, 140, 120, 140, 70, 80, 170, 160, 140, 140, 130, 140, 120, 90,
       110,
     ],
-    "撑杆穿孔": [
+    撑杆穿孔: [
       80, 150, 180, 160, 80, 60, 70, 180, 190, 170, 160, 140, 130, 80, 100, 150,
     ],
   },
@@ -82,16 +82,14 @@ const option = {
   xAxis: [
     {
       type: "category",
+      axisLine: {
+        show: false,
+      },
       axisTick: {
         show: false,
       },
-      interval: 1,
       axisLabel: {
-        color: "rgba(36, 173, 254, 1)",
-        fontSize: "1rem",
-      },
-      axisLine: {
-        show: false,
+        color: "#B4C0CC",
       },
       data: xData,
     },
@@ -99,19 +97,18 @@ const option = {
   yAxis: [
     {
       type: "value",
-      name: "",
-      min: 0,
-      max: 300,
-      interval: 50,
+      // interval: 50,
       axisLabel: {
         formatter: "{value} ",
       },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
       axisLabel: {
-        textStyle: {
-          //坐标轴颜色
-          color: "rgba(36, 173, 254, 1)",
-          fontSize: "1rem",
-        },
+        color: "#B4C0CC",
       },
       //坐标轴线样式
       splitLine: {
@@ -121,7 +118,7 @@ const option = {
           color: "rgba(36, 173, 254, 0.2)",
         },
       },
-    }
+    },
   ],
   series: [
     {
@@ -129,6 +126,7 @@ const option = {
       data: propsData.seriesData["撑杆断裂"],
       type: "line",
       smooth: true, //true曲线; false折线
+      symbol: "none",
       itemStyle: {
         normal: {
           color: "#ffc600", //改变折线点的颜色
@@ -165,6 +163,8 @@ const option = {
       data: propsData.seriesData["撑杆锈蚀"],
       type: "line",
       smooth: true, //true曲线; false折线
+      symbol: "none",
+
       itemStyle: {
         normal: {
           color: "#24adfe", //改变折线点的颜色
@@ -196,11 +196,13 @@ const option = {
         },
       },
     },
-        {
+    {
       name: "撑杆穿孔",
       data: propsData.seriesData["撑杆穿孔"],
       type: "line",
       smooth: true, //true曲线; false折线
+      symbol: "none",
+
       itemStyle: {
         normal: {
           color: "#0DE98A", //改变折线点的颜色
diff --git a/src/components/Charts/poleDailyDetectionChart.vue b/src/components/Charts/poleDailyDetectionChart.vue
index c0f37cf..163f000 100644
--- a/src/components/Charts/poleDailyDetectionChart.vue
+++ b/src/components/Charts/poleDailyDetectionChart.vue
@@ -6,89 +6,191 @@ const props = defineProps({
     required: true,
   },
 });
+const data1 = [
+  {
+    name: "1日",
+    value: 175,
+  },
+  {
+    name: "2日",
+    value: 148,
+  },
+  {
+    name: "3日",
+    value: 195,
+  },
+  {
+    name: "4日",
+    value: 115,
+  },
+  {
+    name: "5日",
+    value: 148,
+  },
+  {
+    name: "6日",
+    value: 95,
+  },
+  {
+    name: "7日",
+    value: 56,
+  },
+  {
+    name: "8日",
+    value: 45,
+  },
+  {
+    name: "9日",
+    value: 15,
+  },
+  {
+    name: "10日",
+    value: 48,
+  },
+  {
+    name: "11日",
+    value: 95,
+  },
+  {
+    name: "12日",
+    value: 128,
+  },
+  {
+    name: "13日",
+    value: 34,
+  },
+  {
+    name: "14日",
+    value: 123,
+  },
+  {
+    name: "15日",
+    value: 175,
+  },
+  {
+    name: "16日",
+    value: 148,
+  },
+];
+let xAxisData = [];
+let seriesData1 = [];
+data1.forEach((item) => {
+  xAxisData.push(item.name);
+  seriesData1.push(item.value);
+});
+var barWidth = 32;
+var barWidthBg = 45;
+const color = [
+  {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [
+      {
+        offset: 1,
+        color: "rgba(16, 53, 41, 0.10)",
+      },
+      {
+        offset: 0,
+        color: "rgba(57, 161, 59, 1)",
+      },
+    ],
+  },
+];
+const seriesData = xAxisData.map((item, index) => {
+  return {
+    value: seriesData1[index],
+    itemStyle: {
+      borderRadius: [2, 2, 0, 0],
+      color: color[0],
+    },
+  };
+});
+
 const option = {
-    title: {
-        text: '',
-        textStyle: {
-            color: '#fff',
-        },
+  grid: {
+    left: "1%",
+    right: "1%",
+    bottom: "2%",
+    top: "15%",
+    containLabel: true,
+  },
+  xAxis: {
+    data: xAxisData,
+    axisLine: {
+      show: false,
     },
-    // backgroundColor: '#141845',
-    tooltip: {
-        trigger: 'axis'
+    axisTick: {
+      show: false,
     },
-    grid: {
-        top: '8%',
-        left: '3%',
-        right: '6%',
-        bottom: '6%',
-        containLabel: true
+    axisLabel: {
+      show: true,
+      color: "#B4C0CC",
+      fontSize: 12,
     },
-    xAxis: {
-        type: 'category',
-        boundaryGap: true,
-        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-        axisLine: {
-            lineStyle: {
-                color: "#fff"
-            }
-        }
+  },
+  yAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#B4C0CC",
+      },
     },
-    yAxis: {
-        type: 'value',
-        axisLine: {
-            lineStyle: {
-                color: "#fff"
-            }
-        }
+    axisLabel: {
+      show: true,
+      color: "#B4C0CC",
+      fontSize: 12,
     },
-    series: [{
-            name: '成都',
-            type: 'bar',
-            stack: '总量',
-            data: [2800, 1800, 1700, 1600, 1500, 1400, 1300, 1200, 1100, 1000, 900, 800],
-            itemStyle: {
-                normal: {
-                    show: true,
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                        offset: 0,
-                        color: '#f7734e'
-                    }, {
-                        offset: 1,
-                        color: '#e12945'
-                    }]),
-                    barBorderRadius: 50, 
-                    borderWidth: 6,
-                    borderColor:"#fff"
-                }
-            },
-        },
-        {
-            name: '广元',
-            type: 'bar',
-            stack: '总量',
-            data: [4000, 3800, 3600, 3500, 3200, 3100, 2800, 2700, 2600, 2500, 2400, 2300]
-        },
-        {
-            name: '德阳',
-            type: 'bar',
-            stack: '总量',
-            data: [4000, 3800, 3600, 3500, 3200, 3100, 2800, 2700, 2600, 2500, 2400, 2300]
-        },
-        {
-            name: '阿坝',
-            type: 'bar',
-            stack: '总量',
-            data: [4000, 3800, 3600, 3500, 3200, 3100, 2800, 2700, 2600, 2500, 2400, 2300]
-        },
-        {
-            name: '绵阳',
-            type: 'bar',
-            stack: '总量',
-            data: [4000, 3800, 3600, 3500, 3200, 3100, 2800, 2700, 2600, 2500, 2400, 2300]
-        }
-    ]
+    splitLine: {
+      lineStyle: {
+        color: "#B4C0CC",
+        opacity: 0.2,
+      },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: seriesData,
+      barWidth: barWidth,
+    },
+    {
+      type: "bar",
+      data: seriesData,
+      barWidth: barWidthBg,
+      barGap: "-120%",
+      itemStyle: {
+        opacity: 0.2,
+      },
+    },
+    {
+      type: "pictorialBar",
+      data: seriesData,
+      symbolPosition: "end",
+      symbolSize: [barWidth, 7],
+      z: 12,
+      symbolOffset: [-3, -3],
+      label: {
+        show: true,
+        position: "top",
+      },
+    },
+    {
+      type: "pictorialBar",
+      data: seriesData,
+      symbolPosition: "end",
+      symbolSize: [barWidthBg, 6],
+      itemStyle: {
+        opacity: 0.2,
+      },
+      z: 11,
+      symbolOffset: [-3, -3],
+    },
+  ],
 };
+
 const initChart = () => {
   const chartDom = document.getElementById("poleDailyDetectionChart");
   const mainChart = echarts.init(chartDom);
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 6aeea7b..265661b 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -67,7 +67,7 @@
   background-position: center;
   background-repeat: no-repeat;
 }
-// 按钮
+/* 按钮 */
 .fg-button {
   cursor: pointer;
   display: flex;
@@ -77,6 +77,51 @@
   height: 28px;
   border-radius: 2px 2px 2px 2px;
 }
+
+.fg-basic-btn {
+  height: 32px;
+  width: 76px;
+  margin: 0;
+  &.el-button {
+    margin-left: 0;
+  }
+}
+
+.fg-info-button {
+  background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
+  border: 1px solid #42a5f5;
+  border-radius: 2px;
+  color: white;
+  margin-left: 0;
+  height: 32px;
+  & .icon {
+    width: 14px;
+    height: 14px;
+    background-image: url("@/assets/common/search_icon.png");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+  }
+}
+
+.fg-reset-btn {
+  background: transparent;
+  border-radius: 2px;
+  border: 1px solid #088bd6;
+  color: white;
+  box-shadow: none;
+  & .icon {
+    width: 14px;
+    height: 14px;
+    background-image: url("@/assets/common/reset_icon.png");
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 5px;
+  }
+}
+
 .fg-button-primary {
   @apply fg-button;
   background: #009dff;
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 0fc9036..8ce4df6 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -208,46 +208,3 @@
   }
 }
 
-/* 按钮 */
-.basic-btn {
-  height: 32px;
-  width: 76px;
-  margin: 0;
-  &.el-button {
-    margin-left: 0;
-  }
-}
-
-.query-btn {
-  background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
-  border: 1px solid #42a5f5;
-  border-radius: 2px;
-  color: white;
-  margin-left: 0;
-  & .icon {
-    width: 14px;
-    height: 14px;
-    background-image: url("@/assets/common/search_icon.png");
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-right: 5px;
-  }
-}
-
-.reset-btn {
-  background: transparent;
-  border-radius: 2px;
-  border: 1px solid #088bd6;
-  color: white;
-  box-shadow: none;
-  & .icon {
-    width: 14px;
-    height: 14px;
-    background-image: url("@/assets/common/reset_icon.png");
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-right: 5px;
-  }
-}
diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue
index 1e6d420..1cdde96 100644
--- a/src/views/dashboard/AppearanceMonitor.vue
+++ b/src/views/dashboard/AppearanceMonitor.vue
@@ -3,9 +3,10 @@ import { onBeforeRouteLeave } from "vue-router";
 import { BaseTable } from "@/components/CustomTable";
 import SwiperMonitor from "./components/SwiperMonitor.vue";
 import AppearanceDailyDetectionChart from "@/components/Charts/appearanceDailyDetectionChart.vue";
-import PoleDailyAlertChart from "@/components/Charts/poleDailyAlertChart.vue";
+import AppearanceDailyAlertChart from "@/components/Charts/appearanceDailyAlertChart.vue";
 import AppearanceAlarmModal from "./components/AppearanceAlarmModal.vue";
 import DeleteModal from "./components/DeleteModal.vue";
+import VideoExport from "./components/VideoExport.vue";
 import {
   getAppearanceMonitorApi,
   getAppearanceMonitorDetailApi,
@@ -242,50 +243,55 @@ onMounted(() => {
       </div>
       <div class="appearance-monitor-body">
         <!-- 搜索区域 -->
-        <div class="appearance-monitor-search-box">
-          <el-select
-            v-model="searchForm.station"
-            placeholder="站点"
-            class="custom-select"
-          >
-            <el-option label="小觉站" value="小觉站"></el-option>
-            <el-option label="东西站" value="东西站"></el-option>
-            <el-option label="立杆区" value="立杆区"></el-option>
-          </el-select>
-          <el-input
-            v-model="searchForm.train_number"
-            placeholder="请输入列车号"
-            class="custom-input"
-            clearable
-          />
-          <el-input
-            v-model="searchForm.train_carriage_number"
-            placeholder="请输入车厢号"
-            class="custom-input"
-            clearable
-          />
-          <el-select
-            v-model="searchForm.fault_type"
-            placeholder="故障类型"
-            class="custom-select"
-          >
-            <el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
-            <el-option label="门折页座脱落" value="门折页座脱落"></el-option>
-            <el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
-            <el-option label="小窗裂纹" value="小窗裂纹"></el-option>
-            <el-option label="搭扣未搭" value="搭扣未搭"></el-option>
-            <el-option label="小门外胀" value="小门外胀"></el-option>
-          </el-select>
-          <el-button
-            type="primary"
-            @click="handleQuery"
-            class="basic-btn query-btn"
-          >
-            <span class="icon"></span> 查询
-          </el-button>
-          <el-button @click="handleReset" class="basic-btn reset-btn">
-            <span class="icon"></span> 重置
-          </el-button>
+        <div class="flex items-center justify-between">
+          <div class="appearance-monitor-search-box">
+            <el-select
+              v-model="searchForm.station"
+              placeholder="站点"
+              class="custom-select"
+            >
+              <el-option label="小觉站" value="小觉站"></el-option>
+              <el-option label="东西站" value="东西站"></el-option>
+              <el-option label="立杆区" value="立杆区"></el-option>
+            </el-select>
+            <el-input
+              v-model="searchForm.train_number"
+              placeholder="请输入列车号"
+              class="custom-input"
+              clearable
+            />
+            <el-input
+              v-model="searchForm.train_carriage_number"
+              placeholder="请输入车厢号"
+              class="custom-input"
+              clearable
+            />
+            <el-select
+              v-model="searchForm.fault_type"
+              placeholder="故障类型"
+              class="custom-select"
+            >
+              <el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
+              <el-option label="门折页座脱落" value="门折页座脱落"></el-option>
+              <el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
+              <el-option label="小窗裂纹" value="小窗裂纹"></el-option>
+              <el-option label="搭扣未搭" value="搭扣未搭"></el-option>
+              <el-option label="小门外胀" value="小门外胀"></el-option>
+            </el-select>
+            <el-button
+              type="primary"
+              @click="handleQuery"
+              class="fg-basic-btn fg-info-button"
+            >
+              <span class="icon"></span> 查询
+            </el-button>
+            <el-button @click="handleReset" class="fg-basic-btn fg-reset-btn">
+              <span class="icon"></span> 重置
+            </el-button>
+          </div>
+          <div>
+            <!-- <VideoExport /> -->
+          </div>
         </div>
         <div class="flex justify-between appearance-monitor-banner">
           <!-- 左侧视频与缩略图区域 -->
@@ -335,17 +341,16 @@ onMounted(() => {
       <li>
         <div class="fg-footer-charts-title">日检出量</div>
         <div class="fg-footer-charts-content">
-          <AppearanceDailyDetectionChart :datas="dailyDetectionData" />
+          <AppearanceDailyDetectionChart :datas="[]" />
         </div>
       </li>
       <li>
         <div class="fg-footer-charts-title">日告警分类</div>
         <div class="fg-footer-charts-content">
-          <!-- <PoleDailyAlertChart :data="dailyDetectionData" /> -->
+          <AppearanceDailyAlertChart :data="[]" />
         </div>
       </li>
     </ul>
-    <!-- <PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" /> -->
     <AppearanceAlarmModal
       v-model:value="isAlarmOpen"
       :info="currentRow"
diff --git a/src/views/dashboard/DiggerMonitor.vue b/src/views/dashboard/DiggerMonitor.vue
index 42ef73a..187caff 100644
--- a/src/views/dashboard/DiggerMonitor.vue
+++ b/src/views/dashboard/DiggerMonitor.vue
@@ -2,6 +2,8 @@
 import { onBeforeRouteLeave } from "vue-router";
 import { BaseDelete, BaseTable } from "@/components/CustomTable";
 import DiggerAlarmModal from "./components/DiggerAlarmModal.vue";
+import DiggerHourlyDistanceChart from "@/components/Charts/diggerHourlyDistanceChart.vue";
+import DiggerDailyDistanceChart from "@/components/Charts/diggerDailyDistanceChart.vue";
 import {
   getAppearanceMonitorApi,
   getAppearanceMonitorDetailApi,
@@ -262,11 +264,11 @@ onMounted(() => {
           <el-button
             type="primary"
             @click="handleQuery"
-            class="basic-btn query-btn"
+            class="fg-basic-btn fg-info-button"
           >
             <span class="icon"></span> 查询
           </el-button>
-          <el-button @click="handleReset" class="basic-btn reset-btn">
+          <el-button @click="handleReset" class="fg-basic-btn fg-reset-btn">
             <span class="icon"></span> 重置
           </el-button>
         </div>
@@ -331,6 +333,20 @@ onMounted(() => {
         </div>
       </div>
     </div>
+      <ul class="fg-footer-charts">
+      <li>
+        <div class="fg-footer-charts-title">分时距离报警</div>
+        <div class="fg-footer-charts-content">
+          <DiggerHourlyDistanceChart :data="[]" />
+        </div>
+      </li>
+      <li>
+        <div class="fg-footer-charts-title">日距离告警</div>
+        <div class="fg-footer-charts-content">
+          <DiggerDailyDistanceChart :data="[]" />
+        </div>
+      </li>
+    </ul>
     <DiggerAlarmModal
       v-model:value="isAlarmOpen"
       :info="currentRow"
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index 72b634c..442545f 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/src/views/dashboard/PoleMonitor.vue
@@ -259,11 +259,11 @@ onMounted(() => {
           <el-button
             type="primary"
             @click="handleQuery"
-            class="basic-btn query-btn"
+            class="fg-basic-btn fg-info-button"
           >
             <span class="icon"></span> 查询
           </el-button>
-          <el-button @click="handleReset" class="basic-btn reset-btn">
+          <el-button @click="handleReset" class="fg-basic-btn fg-reset-btn">
             <span class="icon"></span> 重置
           </el-button>
         </div>