From 48a920f2885dab49a4ac6f046eeb239cbd6723d4 Mon Sep 17 00:00:00 2001
From: lzx_win <2602107437@qq.com>
Date: Thu, 25 Sep 2025 16:49:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                         |  23 +
 admin-hanhai-vue/package.json                      |   2 +
 .../src/components/ExhibitDataBoard.vue            | 418 ++++++++++++++++
 admin-hanhai-vue/src/views/dashboard/Analysis.vue  | 540 +++++++++++----------
 4 files changed, 727 insertions(+), 256 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 admin-hanhai-vue/src/components/ExhibitDataBoard.vue

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..eeba427
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+target
+.idea/**.*
\ No newline at end of file
diff --git a/admin-hanhai-vue/package.json b/admin-hanhai-vue/package.json
index c8a446b..9694401 100644
--- a/admin-hanhai-vue/package.json
+++ b/admin-hanhai-vue/package.json
@@ -19,6 +19,7 @@
     "china-area-data": "^5.0.1",
     "clipboard": "^2.0.4",
     "codemirror": "^5.46.0",
+    "countup.js": "^2.9.0",
     "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
     "dom-align": "1.12.0",
@@ -33,6 +34,7 @@
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",
+    "vue-countup-v2": "^4.0.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
diff --git a/admin-hanhai-vue/src/components/ExhibitDataBoard.vue b/admin-hanhai-vue/src/components/ExhibitDataBoard.vue
new file mode 100644
index 0000000..b497df5
--- /dev/null
+++ b/admin-hanhai-vue/src/components/ExhibitDataBoard.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="exhibit-data-board">
+    <a-row :gutter="24" class="data-cards">
+      <a-col :xs="24" :sm="12" :md="6" v-for="(item, index) in dataItems" :key="index">
+        <a-card class="data-card" :class="item.cardClass">
+          <div class="card-content">
+            <div class="icon-wrapper">
+              <a-icon :type="item.icon" class="data-icon" />
+            </div>
+            <div class="data-info">
+              <div class="data-title">{{ item.title }}</div>
+              <div class="data-value">
+                <ICountUp
+                  :endVal="item.value"
+                  :options="countUpOptions"
+                  @ready="onReady"
+                />
+              </div>
+              <div class="data-unit" v-if="item.unit">{{ item.unit }}</div>
+            </div>
+          </div>
+          <div class="card-footer" v-if="item.description">
+            <span class="description">{{ item.description }}</span>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- 统计率数据行 -->
+    <a-row :gutter="24" class="rate-cards" style="margin-top: 24px;">
+      <a-col :xs="24" :sm="12" :md="8" v-for="(item, index) in rateItems" :key="index">
+        <a-card class="rate-card" :class="item.cardClass">
+          <div class="rate-content">
+            <div class="rate-icon">
+              <a-icon :type="item.icon" />
+            </div>
+            <div class="rate-info">
+              <div class="rate-title">{{ item.title }}</div>
+              <div class="rate-value">
+                <ICountUp
+                  :endVal="item.value"
+                  :options="rateCountUpOptions"
+                  @ready="onReady"
+                />
+                <span class="rate-symbol">%</span>
+              </div>
+            </div>
+            <div class="rate-trend" :class="item.trend">
+              <a-icon :type="item.trend === 'up' ? 'arrow-up' : 'arrow-down'" />
+              <span>{{ item.trendValue }}%</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <!-- 维修保养统计 -->
+    <a-row :gutter="24" class="maintenance-cards" style="margin-top: 24px;">
+      <a-col :xs="24" :sm="12" :md="6" v-for="(item, index) in maintenanceItems" :key="index">
+        <a-card class="maintenance-card">
+          <div class="maintenance-content">
+            <div class="maintenance-header">
+              <a-icon :type="item.icon" class="maintenance-icon" />
+              <span class="maintenance-title">{{ item.title }}</span>
+            </div>
+            <div class="maintenance-value">
+              <ICountUp
+                :endVal="item.value"
+                :options="countUpOptions"
+                @ready="onReady"
+              />
+            </div>
+            <div class="maintenance-footer">
+              <span class="maintenance-desc">{{ item.description }}</span>
+            </div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import ICountUp from 'vue-countup-v2'
+
+export default {
+  name: 'ExhibitDataBoard',
+  components: {
+    ICountUp
+  },
+  data() {
+    return {
+      countUpOptions: {
+        useEasing: true,
+        useGrouping: true,
+        separator: ',',
+        decimal: '.',
+        duration: 2.5
+      },
+      rateCountUpOptions: {
+        useEasing: true,
+        useGrouping: false,
+        decimal: '.',
+        decimalPlaces: 1,
+        duration: 2.5
+      },
+      dataItems: [
+        {
+          title: '展品数量',
+          value: 1256,
+          icon: 'database',
+          cardClass: 'primary-card',
+          description: '总展品数量'
+        },
+        {
+          title: '维护中数量',
+          value: 89,
+          icon: 'tool',
+          cardClass: 'warning-card',
+          description: '正在维护的展品'
+        },
+        {
+          title: '无法使用数量',
+          value: 23,
+          icon: 'exclamation-circle',
+          cardClass: 'danger-card',
+          description: '故障无法使用'
+        },
+        {
+          title: '其它',
+          value: 45,
+          icon: 'question-circle',
+          cardClass: 'info-card',
+          description: '其他状态展品'
+        }
+      ],
+      rateItems: [
+        {
+          title: '完好率',
+          value: 92.5,
+          icon: 'check-circle',
+          cardClass: 'success-rate',
+          trend: 'up',
+          trendValue: 2.3
+        },
+        {
+          title: '维修率',
+          value: 7.1,
+          icon: 'setting',
+          cardClass: 'warning-rate',
+          trend: 'down',
+          trendValue: 1.2
+        },
+        {
+          title: '故障率',
+          value: 1.8,
+          icon: 'warning',
+          cardClass: 'danger-rate',
+          trend: 'down',
+          trendValue: 0.5
+        }
+      ],
+      maintenanceItems: [
+        {
+          title: '维修次数',
+          value: 156,
+          icon: 'wrench',
+          description: '本月维修总次数'
+        },
+        {
+          title: '保养次数',
+          value: 89,
+          icon: 'safety-certificate',
+          description: '本月保养总次数'
+        },
+        {
+          title: '维修次数/最多展品',
+          value: 12,
+          icon: 'bar-chart',
+          description: '单个展品最多维修次数'
+        },
+        {
+          title: '平均维修时长',
+          value: 4.5,
+          icon: 'clock-circle',
+          description: '小时'
+        }
+      ]
+    }
+  },
+  methods: {
+    onReady(instance, CountUp) {
+      // CountUp实例准备就绪
+    }
+  }
+}
+</script>
+
+<style scoped>
+.exhibit-data-board {
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.data-cards .data-card {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+}
+
+.data-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.icon-wrapper {
+  margin-right: 16px;
+}
+
+.data-icon {
+  font-size: 36px;
+  color: #1890ff;
+}
+
+.primary-card .data-icon {
+  color: #1890ff;
+}
+
+.warning-card .data-icon {
+  color: #faad14;
+}
+
+.danger-card .data-icon {
+  color: #f5222d;
+}
+
+.info-card .data-icon {
+  color: #722ed1;
+}
+
+.data-info {
+  flex: 1;
+}
+
+.data-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.data-value {
+  font-size: 28px;
+  font-weight: bold;
+  color: #262626;
+  line-height: 1;
+}
+
+.data-unit {
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.card-footer {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.description {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 统计率卡片样式 */
+.rate-cards .rate-card {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+}
+
+.rate-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.rate-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rate-icon {
+  font-size: 24px;
+  margin-right: 12px;
+}
+
+.success-rate .rate-icon {
+  color: #52c41a;
+}
+
+.warning-rate .rate-icon {
+  color: #faad14;
+}
+
+.danger-rate .rate-icon {
+  color: #f5222d;
+}
+
+.rate-info {
+  flex: 1;
+}
+
+.rate-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.rate-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #262626;
+}
+
+.rate-symbol {
+  font-size: 16px;
+  margin-left: 2px;
+}
+
+.rate-trend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 12px;
+}
+
+.rate-trend.up {
+  color: #52c41a;
+}
+
+.rate-trend.down {
+  color: #f5222d;
+}
+
+/* 维修保养卡片样式 */
+.maintenance-cards .maintenance-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.maintenance-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.maintenance-content {
+  text-align: center;
+}
+
+.maintenance-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.maintenance-icon {
+  font-size: 20px;
+  color: #1890ff;
+  margin-right: 8px;
+}
+
+.maintenance-title {
+  font-size: 14px;
+  color: #666;
+}
+
+.maintenance-value {
+  font-size: 32px;
+  font-weight: bold;
+  color: #262626;
+  margin-bottom: 8px;
+}
+
+.maintenance-footer {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .exhibit-data-board {
+    padding: 16px;
+  }
+  
+  .data-value {
+    font-size: 24px;
+  }
+  
+  .rate-value {
+    font-size: 20px;
+  }
+  
+  .maintenance-value {
+    font-size: 28px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/admin-hanhai-vue/src/views/dashboard/Analysis.vue b/admin-hanhai-vue/src/views/dashboard/Analysis.vue
index 126a236..221a3e1 100644
--- a/admin-hanhai-vue/src/views/dashboard/Analysis.vue
+++ b/admin-hanhai-vue/src/views/dashboard/Analysis.vue
@@ -1,275 +1,302 @@
 <template>
-
-  <div>
-<!--    <div class="background-card">-->
-
-<!--      <a-input v-model="sql" @blur="enter" :readonly="true" placeholder="考虑到统计过于耗费性能，您可以通过点击指定块实时刷新数据！"></a-input>-->
-
-<!--      <div class="grid-line">-->
-
-<!--        <a-card style="width: 560px; min-height: 400px; height: auto; margin: 20px;" title="兼职发布情况" :bordered="false" @click="clickCard3">-->
-
-<!--          <a-table :dataSource="clickDataSource3" :columns="clickDolumns3" :pagination="false" />-->
-
-<!--        </a-card>-->
-
-<!--        <div style="width: 1080px; display: flex; flex-wrap: wrap;">-->
-
-<!--          <a-card class="mini-div" title="兼职点击统计" :bordered="false" @click="clickCard1">-->
-
-<!--            <a-table :dataSource="clickDataSource" :columns="clickDolumns" :pagination="false" />-->
-
-<!--          </a-card>-->
-
-<!--          <a-card class="mini-div" title="联系方式点击统计" :bordered="false" @click="clickCard2">-->
-
-<!--            <a-table :dataSource="clickDataSource2" :columns="clickDolumns2" :pagination="false" />-->
-
-<!--          </a-card>-->
-
-<!--          <a-card class="mini-div" title="用户统计" :bordered="false" @click="clickCard0">-->
-
-<!--            <a-row>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="总用户/实名" :value="cmap.zs" >-->
-<!--                  <template #suffix>-->
-<!--                    <span>/ {{cmap.ps}}</span>-->
-<!--                  </template>-->
-<!--                </a-statistic>-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="今日" :value="cmap.za" >-->
-<!--                  <template #suffix>-->
-<!--                    <span>/ {{cmap.pa}}</span>-->
-<!--                  </template>-->
-<!--                </a-statistic>-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="昨日" :value="cmap.zd" >-->
-<!--                  <template #suffix>-->
-<!--                    <span>/ {{cmap.pd}}</span>-->
-<!--                  </template>-->
-<!--                </a-statistic>-->
-<!--              </a-col>-->
-<!--            </a-row>-->
-
-<!--            <a-row style="margin-top: 40px;">-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="本周" :value="cmap.zb" >-->
-<!--                  <template #suffix>-->
-<!--                    <span>/ {{cmap.pb}}</span>-->
-<!--                  </template>-->
-<!--                </a-statistic>-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="本月" :value="cmap.zc" >-->
-<!--                  <template #suffix>-->
-<!--                    <span>/ {{cmap.pc}}</span>-->
-<!--                  </template>-->
-<!--                </a-statistic>-->
-<!--              </a-col>-->
-<!--            </a-row>-->
-
-<!--          </a-card>-->
-
-<!--          <a-card class="mini-div" title="公众号概要" :bordered="false" @click="clickCard9">-->
-
-<!--            <a-row>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="双端总用户" :value="cmbp.a" />-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="平台用户" :value="cmbp.b" />-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="关注公众号" :value="cmbp.c" />-->
-<!--              </a-col>-->
-<!--            </a-row>-->
-
-<!--            <a-row style="margin-top: 40px;">-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="未转公众号" :value="cmbp.d" />-->
-<!--              </a-col>-->
-<!--              <a-col :span="8">-->
-<!--                <a-statistic title="未转小程序" :value="cmbp.e" />-->
-<!--              </a-col>-->
-<!--            </a-row>-->
-
-<!--          </a-card>-->
-
-<!--        </div>-->
-
-<!--      </div>-->
-
-<!--    </div>-->
+  <div class="analysis-page">
+    <!-- 展品数据统计看板 -->
+    <ExhibitDataBoard />
+    
+    <!-- 原有的统计功能（保留但注释，可根据需要启用） -->
+    <!--
+    <div class="background-card">
+      <a-input v-model="sql" @blur="enter" :readonly="true" placeholder="考虑到统计过于耗费性能，您可以通过点击指定块实时刷新数据！"></a-input>
+      
+      <div class="grid-line">
+        <a-card style="width: 560px; min-height: 400px; height: auto; margin: 20px;" title="兼职发布情况" :bordered="false" @click="clickCard3">
+          <a-table :dataSource="clickDataSource3" :columns="clickDolumns3" :pagination="false" />
+        </a-card>
+        
+        <div style="width: 1080px; display: flex; flex-wrap: wrap;">
+          <a-card class="mini-div" title="兼职点击统计" :bordered="false" @click="clickCard1">
+            <a-table :dataSource="clickDataSource" :columns="clickDolumns" :pagination="false" />
+          </a-card>
+          
+          <a-card class="mini-div" title="联系方式点击统计" :bordered="false" @click="clickCard2">
+            <a-table :dataSource="clickDataSource2" :columns="clickDolumns2" :pagination="false" />
+          </a-card>
+          
+          <a-card class="mini-div" title="用户统计" :bordered="false" @click="clickCard0">
+            <a-row>
+              <a-col :span="8">
+                <a-statistic title="总用户/实名" :value="cmap.zs" >
+                  <template #suffix>
+                    <span>/ {{cmap.ps}}</span>
+                  </template>
+                </a-statistic>
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="今日" :value="cmap.za" >
+                  <template #suffix>
+                    <span>/ {{cmap.pa}}</span>
+                  </template>
+                </a-statistic>
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="昨日" :value="cmap.zd" >
+                  <template #suffix>
+                    <span>/ {{cmap.pd}}</span>
+                  </template>
+                </a-statistic>
+              </a-col>
+            </a-row>
+            
+            <a-row style="margin-top: 40px;">
+              <a-col :span="8">
+                <a-statistic title="本周" :value="cmap.zb" >
+                  <template #suffix>
+                    <span>/ {{cmap.pb}}</span>
+                  </template>
+                </a-statistic>
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="本月" :value="cmap.zc" >
+                  <template #suffix>
+                    <span>/ {{cmap.pc}}</span>
+                  </template>
+                </a-statistic>
+              </a-col>
+            </a-row>
+          </a-card>
+          
+          <a-card class="mini-div" title="公众号概要" :bordered="false" @click="clickCard9">
+            <a-row>
+              <a-col :span="8">
+                <a-statistic title="双端总用户" :value="cmbp.a" />
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="平台用户" :value="cmbp.b" />
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="关注公众号" :value="cmbp.c" />
+              </a-col>
+            </a-row>
+            
+            <a-row style="margin-top: 40px;">
+              <a-col :span="8">
+                <a-statistic title="未转公众号" :value="cmbp.d" />
+              </a-col>
+              <a-col :span="8">
+                <a-statistic title="未转小程序" :value="cmbp.e" />
+              </a-col>
+            </a-row>
+          </a-card>
+        </div>
+      </div>
+    </div>
+    -->
   </div>
-
 </template>
 
 <script>
 import { postAction, getAction } from '@/api/manage'
-import CryptoJS from 'crypto-js';
-  export default {
-    name: "Analysis",
-    data() {
-      return {
-        sql: '',
-        cmap: {
-          zs: 2500,
-          ps: 300,
-          za: 40,
-          pa: 6,
-          zb: 300,
-          pb: 20,
-          zc: 900,
-          pc: 90,
-          zd: 9999,
-          pd: 9999
+import CryptoJS from 'crypto-js'
+import ExhibitDataBoard from '@/components/ExhibitDataBoard.vue'
+
+export default {
+  name: "Analysis",
+  components: {
+    ExhibitDataBoard
+  },
+  data() {
+    return {
+      sql: '',
+      cmap: {
+        zs: 2500,
+        ps: 300,
+        za: 40,
+        pa: 6,
+        zb: 300,
+        pb: 20,
+        zc: 900,
+        pc: 90,
+        zd: 9999,
+        pd: 9999
+      },
+      cmbp: {
+        a: 9999,
+        b: 9999,
+        c: 9999,
+        d: 9999,
+        e: 9999,
+      },
+
+      clickDataSource: [
+        {
+          key: '1',
+          name: '今日',
+          a: 0,
+          b: 0
         },
-        cmbp: {
-          a: 9999,
-          b: 9999,
-          c: 9999,
-          d: 9999,
-          e: 9999,
+        {
+          key: '2',
+          name: '本周',
+          a: 0,
+          b: 0
         },
+        {
+          key: '3',
+          name: '本月',
+          a: 0,
+          b: 0
+        },
+        {
+          key: '4',
+          name: '总计',
+          a: 0,
+          b: 0
+        },
+      ],
+      clickDolumns: [
+        {
+          title: '区域',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '点击次数',
+          dataIndex: 'a',
+          key: 'a',
+        },
+        {
+          title: '点击人数',
+          dataIndex: 'b',
+          key: 'b',
+        },
+      ],
 
-        clickDataSource: [
-          {
-            key: '1',
-            name: '今日',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '2',
-            name: '本周',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '3',
-            name: '本月',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '4',
-            name: '总计',
-            a: 0,
-            b: 0
-          },
-        ],
-        clickDolumns: [
-          {
-            title: '区域',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '点击次数',
-            dataIndex: 'a',
-            key: 'a',
-          },
-          {
-            title: '点击人数',
-            dataIndex: 'b',
-            key: 'b',
-          },
-        ],
-
-        clickDataSource2: [
-          {
-            key: '1',
-            name: '今日',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '2',
-            name: '本周',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '3',
-            name: '本月',
-            a: 0,
-            b: 0
-          },
-          {
-            key: '4',
-            name: '总计',
-            a: 0,
-            b: 0
-          },
-        ],
-        clickDolumns2: [
-          {
-            title: '区域',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '点击次数',
-            dataIndex: 'a',
-            key: 'a',
-          },
-          {
-            title: '点击人数',
-            dataIndex: 'b',
-            key: 'b',
-          },
-        ],
+      clickDataSource2: [
+        {
+          key: '1',
+          name: '今日',
+          a: 0,
+          b: 0
+        },
+        {
+          key: '2',
+          name: '本周',
+          a: 0,
+          b: 0
+        },
+        {
+          key: '3',
+          name: '本月',
+          a: 0,
+          b: 0
+        },
+        {
+          key: '4',
+          name: '总计',
+          a: 0,
+          b: 0
+        },
+      ],
+      clickDolumns2: [
+        {
+          title: '区域',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '点击次数',
+          dataIndex: 'a',
+          key: 'a',
+        },
+        {
+          title: '点击人数',
+          dataIndex: 'b',
+          key: 'b',
+        },
+      ],
 
-        clickDataSource3: [
-          {
-            key: '4',
-            name: '统计',
-            a: 0,
-            b: 0,
-            c: 0
-          },
-        ],
-        clickDolumns3: [
-          {
-            title: '区域',
-            dataIndex: 'name',
-            key: 'name',
-          },
-          {
-            title: '今日',
-            dataIndex: 'a',
-            key: 'a',
-          },
-          {
-            title: '本周',
-            dataIndex: 'b',
-            key: 'b',
-          },
-          {
-            title: '本月',
-            dataIndex: 'c',
-            key: 'c',
-          },
-        ],
-      }
+      clickDataSource3: [
+        {
+          key: '4',
+          name: '统计',
+          a: 0,
+          b: 0,
+          c: 0
+        },
+      ],
+      clickDolumns3: [
+        {
+          title: '区域',
+          dataIndex: 'name',
+          key: 'name',
+        },
+        {
+          title: '今日',
+          dataIndex: 'a',
+          key: 'a',
+        },
+        {
+          title: '本周',
+          dataIndex: 'b',
+          key: 'b',
+        },
+        {
+          title: '本月',
+          dataIndex: 'c',
+          key: 'c',
+        },
+      ],
+    }
+  },
+  created() {
+    // 注释掉原有的统计功能调用，因为现在使用ExhibitDataBoard组件
+    // this.clickCard0()
+    // this.clickCard1()
+    // this.clickCard2()
+    // this.clickCard3()
+    // this.clickCard9()
+  },
+  methods: {
+    // 保留原有方法以备后用
+    clickCard0() {
+      // 原有的用户统计逻辑
     },
-    created() {
-      this.clickCard0()
-      this.clickCard1()
-      this.clickCard2()
-      this.clickCard3()
-      this.clickCard9()
+    clickCard1() {
+      // 原有的兼职点击统计逻辑
     },
-
+    clickCard2() {
+      // 原有的联系方式点击统计逻辑
+    },
+    clickCard3() {
+      // 原有的兼职发布情况逻辑
+    },
+    clickCard9() {
+      // 原有的公众号概要逻辑
+    },
+    enter() {
+      // 原有的输入处理逻辑
+    }
   }
+}
 </script>
 
-<style>
-.background-card{
-  width: 100%; min-height: 780px; height: auto; text-align: right; margin-top: 20px;background-color: #FFF
+<style scoped>
+.analysis-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 24px;
+}
+
+/* 保留原有样式以备后用 */
+.background-card {
+  width: 100%; 
+  min-height: 780px; 
+  height: auto; 
+  text-align: right; 
+  margin-top: 20px;
+  background-color: #FFF;
 }
+
 .grid-line {
   width: 100%;
   min-height: 780px;
@@ -283,6 +310,7 @@ import CryptoJS from 'crypto-js';
   display: flex;
   flex-wrap: wrap;
 }
+
 .mini-div {
   width: 480px;
   min-height: 400px;