From 6082400308dfbb0da5cad8f76636345b03ae880e Mon Sep 17 00:00:00 2001
From: zhangqi <727393967@qq.com>
Date: Tue, 14 Oct 2025 14:17:44 +0800
Subject: [PATCH] =?UTF-8?q?1.=E9=A6=96=E9=A1=B5=E8=B0=83=E6=95=B4=E4=B8=BA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=9C=80=E8=BF=91=E7=9A=8410=E4=B8=AA?=
 =?UTF-8?q?=E8=88=AA=E6=AC=A1=EF=BC=9B=202.=E5=9C=B0=E5=9B=BE=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92=E5=A2=9E=E5=8A=A0=E5=B0=8F=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=EF=BC=88=E8=88=B9=EF=BC=89=EF=BC=8C=E9=BC=A0=E6=A0=87=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E5=9B=BE=E6=A0=87=E4=B8=8A=E5=90=8E=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=BF=9910=E4=B8=AA=E8=88=AA=E6=AC=A1=E7=9A=84?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=EF=BC=9B=203.=E7=82=B9=E5=87=BB=EF=BC=9A?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E9=AB=98=E4=BA=AE=E3=80=81=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E9=AB=98=E4=BA=AE=E5=9B=BE=E5=B1=82=E3=80=81?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=AF=B9=E5=BA=94=E7=9A=84=E8=88=AA=E6=AC=A1?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E5=9B=BE=E5=B1=82=E3=80=81=EF=BC=8C=E5=86=8D?=
 =?UTF-8?q?=E6=AC=A1=E7=82=B9=E5=87=BB=EF=BC=8C=E5=8F=96=E6=B6=88=E8=88=AA?=
 =?UTF-8?q?=E6=AC=A1=E8=AE=B0=E5=BD=95=E9=AB=98=E4=BA=AE=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E8=AF=A5=E8=88=AA=E6=AC=A1=E9=AB=98=E4=BA=AE=E7=AA=81?=
 =?UTF-8?q?=E5=87=BA;=204.Checkbox=E6=A1=86=EF=BC=9A=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E4=BB=A3=E8=A1=A8=E8=AF=A5=E8=88=AA=E6=AC=A1=E5=9B=BE=E5=B1=82?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=9C=A8=E5=9C=B0=E5=9B=BE=E4=B8=8A=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=88=99=E9=9A=90=E8=97=8F=E8=AF=A5=E8=88=AA?=
 =?UTF-8?q?=E6=AC=A1=E5=9B=BE=E5=B1=82=E3=80=82=E9=BB=98=E8=AE=A410?=
 =?UTF-8?q?=E4=B8=AA=E8=88=AA=E6=AC=A1=E5=85=A8=E9=83=A8=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?;=205.=E5=A2=9E=E5=8A=A04500=E7=B1=B3=E3=80=816000=E7=B1=B3?=
 =?UTF-8?q?=E7=AD=89=E6=B7=B1=E7=BA=BF=E6=8C=89=E9=92=AE=EF=BC=8C=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E8=A7=A6=E5=8F=91=EF=BC=9A=E5=8A=A0=E8=BD=BD/?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88=E5=AF=B9=E5=BA=94=E7=9A=84=E7=AD=89=E6=B7=B1?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/public/Header.vue        |   2 +-
 src/router/index.js                     |  26 +-
 src/views/statistics/ShipStatistics.vue | 681 ++++++++++++++++++++++++
 src/views/statistics/index.vue          | 287 ++++++++++
 4 files changed, 992 insertions(+), 4 deletions(-)
 create mode 100644 src/views/statistics/ShipStatistics.vue
 create mode 100644 src/views/statistics/index.vue

diff --git a/src/components/public/Header.vue b/src/components/public/Header.vue
index 4cdfa6d..034c657 100644
--- a/src/components/public/Header.vue
+++ b/src/components/public/Header.vue
@@ -106,7 +106,7 @@ export default {
 			  // },
 			  {
 				  name:"统计分析",
-				  path:"analyse",
+				  path:"statistics",
 				  children:[]
 			  },
 			  // {
diff --git a/src/router/index.js b/src/router/index.js
index aa5e709..cc44b4a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -328,16 +328,36 @@ export const constantRoutes = [
           loginAuthority: true
         }
       },
+      // {
+      //   path: 'analyse',
+      //   name: 'analyse',
+      //   component: () => import('@/views/analyse.vue'),
+      //   meta: {
+      //     title: '统计分析',
+      //     icon: 'peoples',
+      //     loginAuthority: true
+      //   }
+      // },
       {
-        path: 'analyse',
-        name: 'analyse',
-        component: () => import('@/views/analyse.vue'),
+        path: 'statistics',
+        name: 'statistics',
+        component: () => import('@/views/statistics/index.vue'),
         meta: {
           title: '统计分析',
           icon: 'peoples',
           loginAuthority: true
         }
       },
+      {
+        path: 'ships',
+        name: 'ships',
+        component: () => import('@/views/statistics/ShipStatistics.vue'),
+        meta: {
+          title: '科考船汇总统计',
+          icon: 'peoples',
+          loginAuthority: true
+        }
+      },
       {
         path: 'AboutUs',
         name: 'AboutUs',
diff --git a/src/views/statistics/ShipStatistics.vue b/src/views/statistics/ShipStatistics.vue
new file mode 100644
index 0000000..34ea8fc
--- /dev/null
+++ b/src/views/statistics/ShipStatistics.vue
@@ -0,0 +1,681 @@
+<template>
+  <div class="fenxi">
+    <div class="banner">
+      <img src="../../../static/images/bannerny1.jpg" alt="">
+      <div class="banner_con">
+        <div class="con">
+          <h1>探索一号</h1>
+          <ul>
+            <li>
+              <div class="t">
+                <p>26</p>
+                <span>次</span>
+              </div>
+              <div class="b">
+                <p>航次次数</p>
+              </div>
+            </li>
+            <li>
+              <div class="t">
+                <p>286</p>
+                <span>天</span>
+              </div>
+              <div class="b">
+                <p>航次天数</p>
+              </div>
+            </li>
+            <li>
+              <div class="t">
+                <p>23</p>
+                <span>家</span>
+              </div>
+              <div class="b">
+                <p>参航单位</p>
+              </div>
+            </li>
+            <li>
+              <div class="t">
+                <p>279</p>
+                <span>个</span>
+              </div>
+              <div class="b">
+                <p>作业站位个数</p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="fenxi_con">
+      <div class="fenxi1">
+        <div id="xinxi" class="ccc" />
+      </div>
+      <div class="fenxi1">
+        <h2 class="white">参航单位</h2>
+        <div id="danwei" class="ccc">
+          <baidu-map
+            :center="center1"
+            :zoom="zoom1"
+            :scroll-wheel-zoom="true"
+            map-type="BMAP_SATELLITE_MAP"
+            style="width: 100%; height: 100%"
+            @ready="handler1"
+          >
+            <bm-marker
+              v-for="(item, index) in listxia"
+              :key="index"
+              :position="item.dingwei"
+              :dragging="true"
+              :icon="item.pic"
+              @click="totap1(item)"
+            >
+              <bm-label
+                :content="item.content"
+                :offset="{ width: -35, height: 30 }"
+              />
+            </bm-marker>
+          </baidu-map>
+        </div>
+      </div>
+      <div class="fenxi1">
+        <div id="renyuan" class="ccc" />
+      </div>
+      <div class="fenxi1">
+        <h2 class="white">作业站位</h2>
+        <div id="zhanwei" class="ccc">
+          <GMRT />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import GMRT from '../GMRT.vue'
+
+export default {
+  name: 'Fenxi',
+  components: {
+    GMRT
+  },
+  data() {
+    return {
+      center: { lng: 118.962643, lat: 35.618913 },
+      zoom: 3,
+      center1: { lng: 56.761382, lat: 10.897877 },
+      zoom1: 2,
+      list: [
+        {
+          dingwei: {
+            lng: 119.054629,
+            lat: 36.373917
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 119.919302,
+            lat: 34.226755
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 119.560555,
+            lat: 34.421374
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 116.442213,
+            lat: 35.556921
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei.png',
+            size: { width: 16, height: 21 }
+          }
+        }
+      ],
+      listxia: [
+        {
+          dingwei: {
+            lng: 56.761382,
+            lat: 10.897877
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei1.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 59.116236,
+            lat: -0.00034
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei1.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 47.783501,
+            lat: -2.370556
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei1.png',
+            size: { width: 16, height: 21 }
+          }
+        },
+        {
+          dingwei: {
+            lng: 41.160475,
+            lat: -5.474589
+          },
+          content: '',
+          pic: {
+            url: 'http://shipin.hey17.com/dingwei1.png',
+            size: { width: 16, height: 21 }
+          }
+        }
+      ],
+      dataShuju: {
+        value: [800, 1200, 900, 1700, 1410, 1600, 1000, 1100],
+        color: '#ffe866',
+        name: 'Observed'
+      },
+      dataQushi: {
+        value: [1000, 1150, 850, 1600, 1510, 1700, 1100, 1300],
+        color: '#02c464',
+        name: 'Predicted',
+        pic: {
+          url: 'http://shipin.hey17.com/dingwei1.png',
+          size: { width: 16, height: 21 }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getecharts()
+    this.gettubiao2()
+    const originShadow = Element.prototype.attachShadow;
+    Element.prototype.attachShadow = (...args) => {
+      const shadowRoot = originShadow.call(this, ...args)
+      const style = document.createElement("style")
+      style.innerHTML = "div { display: none !important; }"
+      shadowRoot.appendChild(style)
+      return shadowRoot
+    };
+  },
+  methods: {
+    getecharts() {
+      var myChart = this.$echarts.init(document.getElementById('xinxi'))
+      var option = {
+        title: {
+          top: '20',
+          left: '20',
+          text: '航次信息统计',
+          textStyle: {
+            color: '#212121',
+            fontSize: '22px'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '10%',
+          top: '20%',
+          containLabel: true
+          // borderColor:'#dce8fe',
+          // borderWidth: 5 ,
+          // show:true,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: { color: 'rgba(0,0,0,0.1)' },
+            z: 1
+          },
+          padding: [15, 22],
+          backgroundColor: 'rgba(0,0,0,0.9)',
+          borderColor: '#01a3ce',
+          borderWidth: 1,
+          textStyle: { fontSize: 15, lineHeight: 32, color: '#ffffff' }
+        },
+        xAxis: {
+          data: [
+            'TS03',
+            'TS04',
+            'TS05',
+            'TS06',
+            'TS07',
+            'TS08',
+            'TS09',
+            'TS010',
+            'TS011',
+            'TS012',
+            'TS013'
+          ],
+          axisLine: { show: true },
+          axisTick: {
+            show: false,
+            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
+          },
+          axisLabel: {
+            textStyle: { fontSize: 15, color: '#212121' },
+            margin: 25,
+            interval: 0
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: '天数',
+          nameTextStyle: {
+            fontSize: '14px',
+            padding: [3, 14, 5, -30]
+          },
+          axisLine: { show: false },
+          axisTick: {
+            show: false,
+            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
+          },
+          axisLabel: {
+            textStyle: { fontSize: 14, color: '#212121' },
+            opacity: 0.7,
+            margin: 15
+          },
+          splitLine: {
+            show: true,
+            lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
+          }
+        },
+        dataZoom: [
+          {
+            id: 'dataZoomX',
+            type: 'slider',
+            xAxisIndex: [0],
+            filterMode: 'filter'
+          }
+        ],
+        series: [
+          //   {
+          //     type: "pictorialBar",
+          //     z: 13,
+          //     symbolSize: [30, 12],
+          //     symbolOffset: [0, -7],
+          //     symbolPosition: "end",
+          //     tooltip: { show: false },
+          //     itemStyle: { color: "#00a8e6" },
+          //     data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
+          //   },
+          {
+            type: 'bar',
+            z: 12,
+            itemStyle: {
+              color: '#13a1f0',
+              borderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
+              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //     { offset: 0, color: "#00e7ff" },
+              //     { offset: 1, color: "rgba(0,146,255,0.05)" },
+              //   ]),
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 5,
+              fontSize: 16,
+              color: '#212121',
+              lineHeight: 30,
+              fontFamily: 'DIN-Bold'
+            },
+            // emphasis: {
+            //   label: { color: "#f1e06e" },
+            // },
+            barWidth: 20,
+
+            data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 110, 130]
+          }
+        ]
+      }
+      myChart.setOption(option)
+    },
+
+    gettubiao2() {
+      var myChart = this.$echarts.init(document.getElementById('renyuan'))
+      var option = {
+        title: {
+          top: '20',
+          left: '20',
+          text: '航次参航人员工作量统计',
+          textStyle: {
+            color: '#212121',
+            fontSize: '22px'
+          }
+        },
+        legend: {
+          data: ['天数', '次数'],
+          right: '5%',
+          top: '5%',
+          textStyle: {
+            color: '#212121',
+            fontSize: '15'
+          },
+          icon: 'roundRect'
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '10%',
+          top: '20%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: { color: 'rgba(0,0,0,0.1)' },
+            z: 1
+          },
+          padding: [15, 22],
+          backgroundColor: 'rgba(255,255,255,0.9)',
+          borderColor: '#01a3ce',
+          borderWidth: 1,
+          textStyle: { fontSize: 16, lineHeight: 32, color: '#212121' }
+        },
+        dataZoom: [
+          {
+            id: 'dataZoomX',
+            type: 'slider',
+            xAxisIndex: [0],
+            filterMode: 'filter'
+          }
+        ],
+        xAxis: {
+          data: [
+            '高文清',
+            '秋雪玲',
+            '陈传旭',
+            '何恩怨',
+            '金文明',
+            '罗腾也',
+            '唐元贵',
+            '王飒',
+            '李珊珊'
+          ],
+          axisLine: { show: false },
+          axisTick: {
+            show: false,
+            lineStyle: { color: '#0187c4', width: 1, opacity: 1 }
+          },
+          axisLabel: {
+            textStyle: { fontSize: 16, color: '#212121' },
+            margin: 15,
+            interval: 0
+          },
+          splitLine: { show: false }
+        },
+        yAxis: {
+          type: 'value',
+          name: '天数/次数',
+          nameTextStyle: {
+            fontSize: '14px',
+            padding: [3, 14, 5, -10]
+          },
+          axisLine: { show: false },
+          axisTick: {
+            show: false,
+            lineStyle: { color: '#212121', width: 1, opacity: 1 }
+          },
+          axisLabel: {
+            textStyle: { fontSize: 15, color: '#212121' },
+            opacity: 0.7,
+            margin: 15
+          },
+          splitLine: {
+            show: true,
+            lineStyle: { color: '#212121', width: 1, opacity: 0.2 }
+          }
+        },
+        animationDelay: 900,
+        animationDuration: 2000,
+        animationDurationUpdate: 800,
+        series: [
+          //   {
+          //     type: "pictorialBar",
+          //     z: 13,
+          //     symbolSize: [26, 10],
+          //     symbolOffset: [0, -6],
+          //     symbolPosition: "end",
+          //     tooltip: { show: false },
+          //     itemStyle: { color: "#ffe866" },
+          //     data: [120, 200, 150, 80, 70, 110, 130, 150, 80],
+          //   },
+          {
+            type: 'bar',
+            name: '天数',
+            z: 8,
+            barGap: '30%',
+            itemStyle: {
+              color: '#13a1f0',
+              borderRadius: [5, 5, 0, 0]
+              //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              //     { offset: 0, color: "#cdc060" },
+              //     { offset: 1, color: "rgba(205,192,96,0.05)" },
+              //   ]),
+            },
+            barWidth: 20,
+            data: [120, 200, 150, 80, 70, 110, 130, 150, 80]
+          },
+          {
+            name: '次数',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 10,
+            showSymbol: true,
+            z: 10,
+            data: [100, 150, 200, 100, 80, 90, 100, 110, 100],
+            itemStyle: {
+              color: '#fff',
+              borderColor: '#ffab34',
+              borderWidth: 2,
+              borderType: 'solid'
+            },
+            lineStyle: {
+              color: '#ffab34',
+              width: 4
+            }
+            // areaStyle: {
+            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            //     { offset: 0, color: "#3cefc8" },
+            //     { offset: 1, color: "transparent" },
+            //   ]),
+            //   opacity: 0.15,
+            // },
+          }
+        ]
+      }
+      myChart.setOption(option)
+    },
+
+    handler({ BMap, map }) {
+      console.log(BMap, map)
+      this.center.lng = 116.404
+      this.center.lat = 39.915
+      this.zoom = 6
+    },
+    handler1({ BMap, map }) {
+      console.log(BMap, map)
+      this.center1.lng = 56.761382
+      this.center1.lat = 10.897877
+      this.zoom1 = 1
+    },
+    totap(e) {
+      console.log(e)
+      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
+      e.pic.size.width = 22
+      e.pic.size.height = 28
+      for (var i = 0; i < this.list.length; i++) {
+        if (this.list[i] != e) {
+          this.list[i].pic.url = 'http://shipin.hey17.com/dingwei.png'
+          this.list[i].pic.size.width = 16
+          this.list[i].pic.size.height = 21
+        }
+      }
+    },
+    totap1(e) {
+      console.log(e)
+      e.pic.url = 'http://shipin.hey17.com/dingwei_a.png'
+      e.pic.size.width = 22
+      e.pic.size.height = 28
+      for (var i = 0; i < this.listxia.length; i++) {
+        if (this.listxia[i] != e) {
+          this.listxia[i].pic.url = 'http://shipin.hey17.com/dingwei1.png'
+          this.listxia[i].pic.size.width = 16
+          this.listxia[i].pic.size.height = 21
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.fenxi {
+  width: 100%;
+  height: 100%;
+  .banner {
+    width: 100%;
+    height: 20%;
+    position: relative;
+    img {
+      width: 100%;
+      // height: 100%;
+      object-fit: contain;
+    }
+    .banner_con {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 888;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .con {
+        margin: auto;
+        margin-top: 40px;
+        width: 85%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        h1 {
+          display: block;
+          margin-bottom: 40px;
+          font-size: 56px;
+          color: #fff;
+          font-weight: bold;
+        }
+        ul {
+          width: 100%;
+          height: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          li {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin: 0 80px;
+            .t {
+              display: flex;
+              align-items: baseline;
+              p {
+                font-size: 56px;
+                color: #fff;
+                font-family: DIN-Bold;
+                font-weight: bold;
+              }
+              span {
+                font-size: 26px;
+                color: #fff;
+              }
+            }
+            .b {
+              width: auto;
+              text-align: center;
+              p {
+                font-size: 18px;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .fenxi_con {
+    margin: auto;
+    margin-top: 40px;
+    margin-bottom: 90px;
+    width: 85%;
+    height: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .fenxi1 {
+      position: relative;
+      margin-bottom: 40px;
+      width: 48%;
+      height: 520px;
+      border-radius: 10px;
+      border: 1px solid #ccc;
+      overflow: hidden;
+      h2{
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        z-index: 8888;
+        font-size: 22px;
+        color: #212121;
+        &.white{
+          color: #fff;
+        }
+      }
+      .ccc {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
+<style>
+.anchorBL{
+  display: none;
+}
+</style>
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
new file mode 100644
index 0000000..d32523e
--- /dev/null
+++ b/src/views/statistics/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="main-dashboard">
+    <div class="header">
+      <h1>海洋科考数据统计分析</h1>
+      <p>全面展示各类科考设备与平台的运行数据统计</p>
+    </div>
+
+    <el-row :gutter="20" class="stats-grid">
+      <!-- 科考船汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('ships')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-ship"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">科考船汇总统计</h3>
+              <p class="card-count">4艘</p>
+              <p class="card-desc">探索一号、探索二号、探索三号、海警101船</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 载人潜水器汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('hov')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-watermelon"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">载人潜水器汇总统计</h3>
+              <p class="card-count">2型</p>
+              <p class="card-desc">深海勇士、奋斗者等</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 遥控潜水器汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('rov')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-cpu"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">遥控潜水器汇总统计</h3>
+              <p class="card-count loading">数据加载中</p>
+              <p class="card-desc"></p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 无人航行潜水器汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('uuv')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-help"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">无人航行潜水器汇总统计</h3>
+              <p class="card-count loading">数据加载中</p>
+              <p class="card-desc"></p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 基站汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('stations')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-office-building"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">基站汇总统计</h3>
+              <p class="card-count no-data">暂无数据</p>
+              <p class="card-desc">深海站、深渊站、国际站</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 着陆器汇总统计 -->
+      <el-col :xs="24" :sm="12" :md="8">
+        <el-card
+          class="stat-card"
+          shadow="hover"
+          @click.native="goToDetail('landers')"
+        >
+          <div class="card-content">
+            <div class="card-icon">
+              <i class="el-icon-place"></i>
+            </div>
+            <div class="card-info">
+              <h3 class="card-title">着陆器汇总统计</h3>
+              <p class="card-count no-data">暂无数据</p>
+              <p class="card-desc"></p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainDashboard',
+  data() {
+    return {
+      // 可以在这里添加数据
+    }
+  },
+  methods: {
+    goToDetail(type) {
+      this.$router.push(`/container/${type}`);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.main-dashboard {
+  padding: 20px;
+  background-color: #f0f7ff;
+  min-height: calc(100vh - 130px);
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  color: #1a365d;
+  font-size: 28px;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.header p {
+  color: #4a5568;
+  font-size: 16px;
+}
+
+.stats-grid {
+  margin: 0 auto;
+}
+
+.stat-card {
+  margin-bottom: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 8px;
+  border: none;
+  height: 140px;
+  display: flex;
+  align-items: center;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  width: 100%;
+}
+
+.card-icon {
+  width: 70px;
+  height: 70px;
+  border-radius: 12px;
+  background-color: #ebf8ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  flex-shrink: 0;
+}
+
+.card-icon i {
+  font-size: 36px;
+  color: #3182ce;
+}
+
+.card-info {
+  flex: 1;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 8px;
+}
+
+.card-count {
+  font-size: 28px;
+  font-weight: 700;
+  color: #3182ce;
+  margin-bottom: 5px;
+}
+
+.card-desc {
+  font-size: 14px;
+  color: #718096;
+  line-height: 1.4;
+}
+
+.loading {
+  color: #a0aec0;
+}
+
+.no-data {
+  color: #e53e3e;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .stat-card {
+    height: auto;
+  }
+
+  .card-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .card-icon {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.stat-card {
+  animation: fadeInUp 0.5s ease forwards;
+}
+
+.el-col:nth-child(1) .stat-card { animation-delay: 0.1s; }
+.el-col:nth-child(2) .stat-card { animation-delay: 0.2s; }
+.el-col:nth-child(3) .stat-card { animation-delay: 0.3s; }
+.el-col:nth-child(4) .stat-card { animation-delay: 0.4s; }
+.el-col:nth-child(5) .stat-card { animation-delay: 0.5s; }
+.el-col:nth-child(6) .stat-card { animation-delay: 0.6s; }
+</style>