diff --git a/.env.dev b/.env.dev
index 669fa835..4a93c9d3 100644
--- a/.env.dev
+++ b/.env.dev
@@ -6,7 +6,7 @@ VITE_DEV=true
 # 请求路径
 # VITE_BASE_URL='http://192.168.0.66:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.66:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/src/views/statisticalView/index.vue b/src/views/statisticalView/index.vue
index 76c1f2d1..35d22bb3 100644
--- a/src/views/statisticalView/index.vue
+++ b/src/views/statisticalView/index.vue
@@ -17,37 +17,419 @@
   <div class="">
     <el-row :gutter="16">
       <el-col :span="12">
-        <el-card style="width: 100%;">
-          <div class="charts-title">
-             任务总览
-          </div>
-      </el-card>
+        <el-card style="width: 100%">
+          <div class="charts-title"> 任务总览 </div>
+          <div ref="chartDom" style="width: 100%; height: 400px"></div>
+        </el-card>
       </el-col>
       <el-col :span="12">
         <el-card style="width: 100%">
-          <div class="charts-title">
-             任务总览
-          </div>
-      </el-card>
+          <div class="charts-title"> 任务完成率 </div>
+          <div ref="chartDomFinish" style="width: 100%; height: 400px"></div>
+        </el-card>
       </el-col>
     </el-row>
     <el-row :gutter="16" style="margin-top: 12px">
       <el-col :span="12">
-        <el-card style="width: 100%;">
-          111
-      </el-card>
+        <el-card style="width: 100%"> 
+          <div class="charts-title"> AGV工作利用率统计 </div>
+          <div ref="chartDomAgv" style="width: 100%; height: 400px"></div>
+        </el-card>
       </el-col>
       <el-col :span="12">
-        <el-card style="width: 100%;">
-          111
-      </el-card>
+        <el-card style="width: 100%"> 
+          <div class="charts-title"> 任务异常数 </div>
+          <div ref="chartDomError" style="width: 100%; height: 400px"></div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
+import * as echarts from 'echarts'
+import { lte } from 'lodash-es'
+
+// 创建一个响应式引用来保存DOM元素
+const chartDom = ref(null)
+const chartDomFinish = ref(null)
+const chartDomError = ref(null)
+const chartDomAgv = ref(null)
+
+// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
+onMounted(async () => {
+  await nextTick() // 确保DOM已经渲染完成
+  initEcharts()
+})
+
+const initEcharts = () => {
+  initOne()
+  initTwo()
+  initFour()
+}
+
+const chartInstance = ref(null)
+const initOne = () => {
+  chartInstance.value = echarts.init(chartDom.value)
+  let ydata = [
+    {
+      name: '执行中',
+      value: 18
+    },
+    {
+      name: '已完成',
+      value: 16
+    },
+    {
+      name: '已取消',
+      value: 15
+    },
+    {
+      name: '未开始',
+      value: 14
+    },
+    {
+      name: '异常',
+      value: 10
+    }
+  ]
+  let color = ['#0147EB', '#01BCEB', '#C800FF', '#F1CD0B', '#EB0000']
+  let xdata = ['执行中', '已完成', '已取消', '未开始', '异常']
+  const option = {
+    backgroundColor: 'rgba(255,255,255,1)',
+    color: color,
+    // tooltip: {
+    //     trigger: 'item',
+    //     // formatter: '{a} <br/>{b} : {c} ({d}%)'
+    // },
+    legend: {
+      orient: 'vartical',
+      x: 'left',
+      top: 'center',
+      left: '60%',
+      bottom: '0%',
+      data: xdata,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 16,
+      formatter: function (name) {
+        let str = ''
+        ydata.forEach((item) => {
+          if (item.name == name) {
+            str = `{c|${item.name}} {a|${item.value}}`
+          }
+        })
+        return str
+      },
+      textStyle: {
+        rich: {
+          a: {
+            color: '#0D162A',
+            fontSize: 18
+          },
+          c: {
+            color: '#536387',
+            fontSize: 12
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        clockwise: false, //饼图的扇区是否是顺时针排布
+        minAngle: 2, //最小的扇区角度（0 ~ 360）
+        radius: ['50%', '65%'],
+        center: ['30%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          //图形样式
+          normal: {
+            borderColor: '#ffffff',
+            borderWidth: 6
+          }
+        },
+        label: {
+          // '{text|{b}}\n{c} ({d}%)'
+          normal: {
+            show: true,
+            position: 'center',
+            formatter: '{c|234,12} \n {a|任务总数}',
+            rich: {
+              c: {
+                color: '#0D162A',
+                fontSize: 15,
+                fontWeight: 'bold',
+                height: 30
+              },
+
+              a: {
+                align: 'center',
+                color: '#727272',
+                fontSize: 12
+              }
+            }
+          }
+        },
+        labelLine: {
+          length: 15,
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        data: ydata
+      }
+    ]
+  }
+  chartInstance.value.setOption(option)
+}
+
+const chartInstanceTwo = ref(null)
+const initTwo = () => {
+  chartInstanceTwo.value = echarts.init(chartDomFinish.value)
+  let option = {
+    backgroundColor: '#fff',
+    grid: {
+      top: '9%',
+      bottom: '19%',
+      left: '6%',
+      right: '4%'
+    },
+    tooltip: {
+      trigger: 'axis',
+      label: {
+        show: true
+      }
+    },
+    xAxis: {
+      boundaryGap: true, //默认，坐标轴留白策略
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false,
+        alignWithLabel: true
+      },
+      data: [
+        '武汉',
+        '襄阳',
+        '黄冈',
+        '荆门',
+        '十堰',
+        '随州',
+        '鄂州',
+        '恩施',
+        '宜昌',
+        '孝感',
+        '咸宁',
+        '仙桃',
+        '潜江',
+        '天门',
+        '黄石',
+        '荆州',
+        '神农架'
+      ]
+    },
+    yAxis: {
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: '#E2E7F5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: 'rgb(245,250,254)'
+        }
+      }
+    },
+    series: [
+      {
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: 1,
+        lineStyle: {
+          color: '#0147EB'
+        },
+
+        label: {
+          show: false,
+          distance: 1,
+          emphasis: {
+            show: true,
+            offset: [25, -2],
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            color: '#FFF',
+            padding: [8, 20, 8, 6],
+            //width:60,
+            height: 36,
+            formatter: function (params) {
+              var name = params.name
+              var value = params.data
+              var str = name + '\n数据量：' + value
+              return str
+            },
+            rich: {
+              bg: {
+                width: 78,
+                //height:42,
+                color: '#FFF',
+                padding: [20, 0, 20, 10]
+              },
+              br: {
+                width: '100%',
+                height: '100%'
+              }
+            }
+          }
+        },
+        data: [
+          2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
+          3200, 3800
+        ]
+      }
+    ]
+  }
+  chartInstanceTwo.value.setOption(option)
+}
+
+const chartInstanceFour = ref(null)
+const initFour = () => {
+  chartInstanceFour.value = echarts.init(chartDomError.value)
+  let option = {
+    backgroundColor: '#fff',
+    grid: {
+      top: '9%',
+      bottom: '19%',
+      left: '6%',
+      right: '4%'
+    },
+    tooltip: {
+      trigger: 'axis',
+      label: {
+        show: true
+      }
+    },
+    xAxis: {
+      boundaryGap: true, //默认，坐标轴留白策略
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false,
+        alignWithLabel: true
+      },
+      data: [
+        '武汉',
+        '襄阳',
+        '黄冈',
+        '荆门',
+        '十堰',
+        '随州',
+        '鄂州',
+        '恩施',
+        '宜昌',
+        '孝感',
+        '咸宁',
+        '仙桃',
+        '潜江',
+        '天门',
+        '黄石',
+        '荆州',
+        '神农架'
+      ]
+    },
+    yAxis: {
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'solid',
+          color: '#E2E7F5'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitArea: {
+        show: true,
+        areaStyle: {
+          color: 'rgb(245,250,254)'
+        }
+      }
+    },
+    series: [
+      {
+        type: 'line',
+        symbol: 'circle',
+        symbolSize: 1,
+        lineStyle: {
+          color: '#0147EB'
+        },
+
+        label: {
+          show: false,
+          distance: 1,
+          emphasis: {
+            show: true,
+            offset: [25, -2],
+            backgroundColor: 'rgba(0,0,0,0.7)',
+            color: '#FFF',
+            padding: [8, 20, 8, 6],
+            //width:60,
+            height: 36,
+            formatter: function (params) {
+              var name = params.name
+              var value = params.data
+              var str = name + '\n数据量：' + value
+              return str
+            },
+            rich: {
+              bg: {
+                width: 78,
+                //height:42,
+                color: '#FFF',
+                padding: [20, 0, 20, 10]
+              },
+              br: {
+                width: '100%',
+                height: '100%'
+              }
+            }
+          }
+        },
+        data: [
+          2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
+          3200, 3800
+        ]
+      }
+    ]
+  }
+  chartInstanceFour.value.setOption(option)
+}
+// 销毁ECharts实例
+onUnmounted(() => {
+  if (chartInstance.value != null && chartInstance.value.dispose) {
+    chartInstance.value.dispose()
+  }
+})
+
 const type = ref(1)
 </script>