diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..81b960d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,8 @@
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
+  // const resize = new Event('resize')
+  // window.dispatchEvent(resize)
 })
 </script>
 

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..81b960d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,8 @@
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
+  // const resize = new Event('resize')
+  // window.dispatchEvent(resize)
 })
 </script>
 
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
index f99890a..1bc0346 100644
--- a/src/api/page/page.ts
+++ b/src/api/page/page.ts
@@ -48,3 +48,11 @@
     data: params,
   })
 }
+// 统计面板-巡检趋势
+export function getDashboardTrend(params: any) {
+  return request({
+    url: '/system/busOverView/taskTime',
+    method: 'post',
+    data: params,
+  })
+}

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..81b960d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,8 @@
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
+  // const resize = new Event('resize')
+  // window.dispatchEvent(resize)
 })
 </script>
 
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
index f99890a..1bc0346 100644
--- a/src/api/page/page.ts
+++ b/src/api/page/page.ts
@@ -48,3 +48,11 @@
     data: params,
   })
 }
+// 统计面板-巡检趋势
+export function getDashboardTrend(params: any) {
+  return request({
+    url: '/system/busOverView/taskTime',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 841e0cb..f276842 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : '0'
       },
     }, // 提示框
     xAxis: [
@@ -243,6 +243,10 @@
             color: props.axisLineColor, // 轴线的颜色
           },
         },
+        axisLabel: {
+          show: true,
+          color: props.fontColor,
+        },
         nameTextStyle: {
           color: props.fontColor,
           fontSize: 14,
@@ -251,7 +255,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#bfbfbf'],
+            color: props.axisLineColor,
             type: 'dashed',
           },
         },
@@ -302,21 +306,22 @@
         }
         // 如果开启渐变
         if (props.gradient) {
-          series.areaStyle = {
-            color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1, // 变化度 ,渐变方向
-              [
-                {
-                  offset: 0.1,
-                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
-                },
-                {
-                  offset: 1,
-                  color: '#fff',
-                },
-              ],
-            ),
-          }
+          series.areaStyle = {}
+          // series.areaStyle = {
+          //   color: new echarts.graphic.LinearGradient(
+          //     0, 0, 0, 1, // 变化度 ,渐变方向
+          //     [
+          //       {
+          //         offset: 0.1,
+          //         color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: '#fff',
+          //       },
+          //     ],
+          //   ),
+          // }
         }
       }
       newSeries.push(series)

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..81b960d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,8 @@
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
+  // const resize = new Event('resize')
+  // window.dispatchEvent(resize)
 })
 </script>
 
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
index f99890a..1bc0346 100644
--- a/src/api/page/page.ts
+++ b/src/api/page/page.ts
@@ -48,3 +48,11 @@
     data: params,
   })
 }
+// 统计面板-巡检趋势
+export function getDashboardTrend(params: any) {
+  return request({
+    url: '/system/busOverView/taskTime',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 841e0cb..f276842 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : '0'
       },
     }, // 提示框
     xAxis: [
@@ -243,6 +243,10 @@
             color: props.axisLineColor, // 轴线的颜色
           },
         },
+        axisLabel: {
+          show: true,
+          color: props.fontColor,
+        },
         nameTextStyle: {
           color: props.fontColor,
           fontSize: 14,
@@ -251,7 +255,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#bfbfbf'],
+            color: props.axisLineColor,
             type: 'dashed',
           },
         },
@@ -302,21 +306,22 @@
         }
         // 如果开启渐变
         if (props.gradient) {
-          series.areaStyle = {
-            color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1, // 变化度 ,渐变方向
-              [
-                {
-                  offset: 0.1,
-                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
-                },
-                {
-                  offset: 1,
-                  color: '#fff',
-                },
-              ],
-            ),
-          }
+          series.areaStyle = {}
+          // series.areaStyle = {
+          //   color: new echarts.graphic.LinearGradient(
+          //     0, 0, 0, 1, // 变化度 ,渐变方向
+          //     [
+          //       {
+          //         offset: 0.1,
+          //         color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: '#fff',
+          //       },
+          //     ],
+          //   ),
+          // }
         }
       }
       newSeries.push(series)
diff --git a/src/views/home/components/statistics.vue b/src/views/home/components/statistics.vue
index b6cc0ba..3763b85 100644
--- a/src/views/home/components/statistics.vue
+++ b/src/views/home/components/statistics.vue
@@ -1,7 +1,8 @@
 <!-- 首页统计数据 -->
 <script name="HomeCount" setup lang="ts">
 import dayjs from 'dayjs'
-import { getDashboardCar, getDashboardInspection } from '@/api/page/page'
+import { getDashboardCar, getDashboardInspection, getDashboardTrend } from '@/api/page/page'
+const show = ref(true)
 const showList = ref([
   {
     name: '巡检测总量',
@@ -52,15 +53,55 @@
     showList.value[5].value = `${res.data.km}km`
   })
 }
-
+// 获取巡检任务趋势
+const trendRadio = ref('week')
+// xAxisData data
+const trendXdata = ref<string[]>([])
+const trendData = ref<any[]>([])
+const fetchTrend = () => {
+  getDashboardTrend({ timeType: trendRadio.value }).then((res) => {
+    console.log(res.data, '巡检任务趋势')
+    const name = [] as string[]
+    const value = [] as any[]
+    res.data.forEach((item: any, index: number) => {
+      for (const i in item) {
+        name.push(i.split(' ')[0])
+        value.push(item[i])
+      }
+    })
+    trendXdata.value = name
+    trendData.value = [
+      {
+        name: '任务数量',
+        data: value,
+      },
+    ]
+  })
+}
+watch(() => trendRadio.value, (newVal) => {
+  if (newVal) {
+    fetchTrend()
+  }
+}, { deep: true })
+// 隐藏面板
+const close = () => {
+  show.value = !show.value
+}
+const MianHeight = ref((document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3) / 3)
+window.addEventListener('resize', () => {
+  const height = document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3
+  MianHeight.value = height / 3
+  console.log(height, 'height')
+})
 onMounted(() => {
   fetchInspection()
   fetchCarInfo()
+  fetchTrend()
 })
 </script>
 
 <template>
-  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;">
+  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;" :class="`${show ? '' : 'hidden'}`">
     <div style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;">
       <div v-for="item in showList" :key="item.name" class="item-count">
         <div class="left">
@@ -76,17 +117,167 @@
         </div>
       </div>
     </div>
+    <div class="count-echart" style="height: calc(100vh - 275px); width: 100%; padding: 0;margin: 0;">
+      <!-- 巡检任务趋势 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            巡检任务趋势
+          </div>
+          <div>
+            <el-radio-group v-model="trendRadio" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart
+            style="width: 100%;" :style="`height:${MianHeight}px`" :x-axis-data="trendXdata" :data="trendData" :smooth="false" font-color="#fff" axis-line-color="#ccc"
+          />
+        </div>
+      </div>
+      <!-- 第三方施工智能识别分析 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            第三方施工智能识别分析
+          </div>
+          <div>
+            <el-radio-group v-model="radio2" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" />
+        </div>
+      </div>
+      <!-- 风险耦合分析 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            风险耦合分析
+          </div>
+          <div>
+            <el-radio-group v-model="radio2" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" />
+        </div>
+      </div>
+    </div>
+    <div
+      class="close-dashboard"
+      @click="close"
+    >
+      x
+    </div>
+  </div>
+  <div class="menu-child-btn" :class="`${show ? 'hidden' : ''}`" style="background-color: #666;" @click="close">
+    数据看板
   </div>
 </template>
 
 <style lang="scss" scope>
+.chart-container {
+  width: 100%;
+  padding: 10px 20px;
+
+  .chart-top {
+    display: flex;
+    justify-content: space-between;
+    // flex-direction: column;
+    // align-items: center;
+    align-items: flex-end;
+
+    .chart-name {
+      color: #fff;
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+}
+
+.menu-child-btn {
+  width: 100px;
+  margin: 10px;
+  padding: 10px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  border-radius: 8px;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  right: 20px;
+  transition: all 0.5s;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.hidden {
+  opacity: 0 !important;
+  display: none !important;
+}
+
+.close-dashboard {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .container-count {
+  opacity: 1;
   background-color: rgba($color: #606e86, $alpha: 80%);
   position: absolute;
   top: 0;
   right: 0;
   z-index: 999;
   border-radius: 10px;
+  transition: all 0.5s;
+
+  &:hover {
+    .close-dashboard {
+      display: block;
+    }
+  }
 
   .item-count {
     display: flex;

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..81b960d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,8 @@
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
+  // const resize = new Event('resize')
+  // window.dispatchEvent(resize)
 })
 </script>
 
diff --git a/src/api/page/page.ts b/src/api/page/page.ts
index f99890a..1bc0346 100644
--- a/src/api/page/page.ts
+++ b/src/api/page/page.ts
@@ -48,3 +48,11 @@
     data: params,
   })
 }
+// 统计面板-巡检趋势
+export function getDashboardTrend(params: any) {
+  return request({
+    url: '/system/busOverView/taskTime',
+    method: 'post',
+    data: params,
+  })
+}
diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue
index 841e0cb..f276842 100644
--- a/src/components/Echart/LineChart.vue
+++ b/src/components/Echart/LineChart.vue
@@ -207,7 +207,7 @@
         },
       },
       valueFormatter: (value: string | number) => {
-        return value ? value + props.unit : ''
+        return value ? value + props.unit : '0'
       },
     }, // 提示框
     xAxis: [
@@ -243,6 +243,10 @@
             color: props.axisLineColor, // 轴线的颜色
           },
         },
+        axisLabel: {
+          show: true,
+          color: props.fontColor,
+        },
         nameTextStyle: {
           color: props.fontColor,
           fontSize: 14,
@@ -251,7 +255,7 @@
         splitLine: {
           show: true,
           lineStyle: {
-            color: ['#bfbfbf'],
+            color: props.axisLineColor,
             type: 'dashed',
           },
         },
@@ -302,21 +306,22 @@
         }
         // 如果开启渐变
         if (props.gradient) {
-          series.areaStyle = {
-            color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1, // 变化度 ,渐变方向
-              [
-                {
-                  offset: 0.1,
-                  color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
-                },
-                {
-                  offset: 1,
-                  color: '#fff',
-                },
-              ],
-            ),
-          }
+          series.areaStyle = {}
+          // series.areaStyle = {
+          //   color: new echarts.graphic.LinearGradient(
+          //     0, 0, 0, 1, // 变化度 ,渐变方向
+          //     [
+          //       {
+          //         offset: 0.1,
+          //         color: item.color ? getAlphaColor(item.color, 0.6) : getAlphaColor(props.colors[itemIndex] as string, 0.6),
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: '#fff',
+          //       },
+          //     ],
+          //   ),
+          // }
         }
       }
       newSeries.push(series)
diff --git a/src/views/home/components/statistics.vue b/src/views/home/components/statistics.vue
index b6cc0ba..3763b85 100644
--- a/src/views/home/components/statistics.vue
+++ b/src/views/home/components/statistics.vue
@@ -1,7 +1,8 @@
 <!-- 首页统计数据 -->
 <script name="HomeCount" setup lang="ts">
 import dayjs from 'dayjs'
-import { getDashboardCar, getDashboardInspection } from '@/api/page/page'
+import { getDashboardCar, getDashboardInspection, getDashboardTrend } from '@/api/page/page'
+const show = ref(true)
 const showList = ref([
   {
     name: '巡检测总量',
@@ -52,15 +53,55 @@
     showList.value[5].value = `${res.data.km}km`
   })
 }
-
+// 获取巡检任务趋势
+const trendRadio = ref('week')
+// xAxisData data
+const trendXdata = ref<string[]>([])
+const trendData = ref<any[]>([])
+const fetchTrend = () => {
+  getDashboardTrend({ timeType: trendRadio.value }).then((res) => {
+    console.log(res.data, '巡检任务趋势')
+    const name = [] as string[]
+    const value = [] as any[]
+    res.data.forEach((item: any, index: number) => {
+      for (const i in item) {
+        name.push(i.split(' ')[0])
+        value.push(item[i])
+      }
+    })
+    trendXdata.value = name
+    trendData.value = [
+      {
+        name: '任务数量',
+        data: value,
+      },
+    ]
+  })
+}
+watch(() => trendRadio.value, (newVal) => {
+  if (newVal) {
+    fetchTrend()
+  }
+}, { deep: true })
+// 隐藏面板
+const close = () => {
+  show.value = !show.value
+}
+const MianHeight = ref((document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3) / 3)
+window.addEventListener('resize', () => {
+  const height = document.documentElement.clientHeight - 50 - 225 - 60 - 30 * 3
+  MianHeight.value = height / 3
+  console.log(height, 'height')
+})
 onMounted(() => {
   fetchInspection()
   fetchCarInfo()
+  fetchTrend()
 })
 </script>
 
 <template>
-  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;">
+  <div class="container-count" style="height: calc(100vh - 50px); width: 24%; padding: 0;margin: 0;" :class="`${show ? '' : 'hidden'}`">
     <div style="display: flex;width: 100%;flex-wrap: wrap;justify-content: space-around;">
       <div v-for="item in showList" :key="item.name" class="item-count">
         <div class="left">
@@ -76,17 +117,167 @@
         </div>
       </div>
     </div>
+    <div class="count-echart" style="height: calc(100vh - 275px); width: 100%; padding: 0;margin: 0;">
+      <!-- 巡检任务趋势 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            巡检任务趋势
+          </div>
+          <div>
+            <el-radio-group v-model="trendRadio" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart
+            style="width: 100%;" :style="`height:${MianHeight}px`" :x-axis-data="trendXdata" :data="trendData" :smooth="false" font-color="#fff" axis-line-color="#ccc"
+          />
+        </div>
+      </div>
+      <!-- 第三方施工智能识别分析 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            第三方施工智能识别分析
+          </div>
+          <div>
+            <el-radio-group v-model="radio2" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" />
+        </div>
+      </div>
+      <!-- 风险耦合分析 -->
+      <div class="chart-container">
+        <div class="chart-top">
+          <div class="chart-name">
+            风险耦合分析
+          </div>
+          <div>
+            <el-radio-group v-model="radio2" size="small">
+              <el-radio-button label="week">
+                周
+              </el-radio-button>
+              <el-radio-button label="month">
+                月
+              </el-radio-button>
+              <el-radio-button label="year">
+                年
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <div class="chart-body">
+          <line-chart style="width: 100%;" :style="`height:${MianHeight}px`" />
+        </div>
+      </div>
+    </div>
+    <div
+      class="close-dashboard"
+      @click="close"
+    >
+      x
+    </div>
+  </div>
+  <div class="menu-child-btn" :class="`${show ? 'hidden' : ''}`" style="background-color: #666;" @click="close">
+    数据看板
   </div>
 </template>
 
 <style lang="scss" scope>
+.chart-container {
+  width: 100%;
+  padding: 10px 20px;
+
+  .chart-top {
+    display: flex;
+    justify-content: space-between;
+    // flex-direction: column;
+    // align-items: center;
+    align-items: flex-end;
+
+    .chart-name {
+      color: #fff;
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+}
+
+.menu-child-btn {
+  width: 100px;
+  margin: 10px;
+  padding: 10px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 700;
+  border-radius: 8px;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  right: 20px;
+  transition: all 0.5s;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.hidden {
+  opacity: 0 !important;
+  display: none !important;
+}
+
+.close-dashboard {
+  display: none;
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .container-count {
+  opacity: 1;
   background-color: rgba($color: #606e86, $alpha: 80%);
   position: absolute;
   top: 0;
   right: 0;
   z-index: 999;
   border-radius: 10px;
+  transition: all 0.5s;
+
+  &:hover {
+    .close-dashboard {
+      display: block;
+    }
+  }
 
   .item-count {
     display: flex;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 4f30eef..ab99ced 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -449,6 +449,11 @@
   height: 100%;
   padding: 0;
   margin: 0;
+  overflow: hidden;
+
+  .container {
+    overflow: hidden;
+  }
 }
 </style>