From 6fc69bc42ab5f54658b1dee98d18b25014d030d0 Mon Sep 17 00:00:00 2001
From: chenlin <linchenm@isoftstone.com>
Date: Wed, 26 Nov 2025 14:13:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E5=9B=A2=E6=95=B0=E6=8D=AE=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E6=95=B0=E6=8D=AE=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                         |    6 +
 src/router/modules/remaining.ts          |   35 +-
 src/views/Home/Index10.vue               | 2654 ++++++++--------------
 src/views/Home/Index12.vue               | 1800 +++++++++++++++
 src/views/Home/Index13.vue               | 1800 +++++++++++++++
 src/views/Login/components/LoginForm.vue |  127 +-
 vite.config.ts                           |    2 +-
 7 files changed, 4657 insertions(+), 1767 deletions(-)
 create mode 100644 src/api/index.ts
 create mode 100644 src/views/Home/Index12.vue
 create mode 100644 src/views/Home/Index13.vue

diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..a5572c5
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+// 获取外协管理数据
+export const getOutsourcingManagementData = (data) => {
+  return request.post({ url: '/jeelowcode/report-data/list/kb_wx_jt', data })
+}
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 4036845..d602c13 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -57,12 +57,45 @@ const remainingRouter: AppRouteRecordRaw[] = [
     name: 'Home',
     meta: {},
     children: [
+      // {
+      //   path: 'index',
+      //   component: () => import('@/views/Home/Index10.vue'),
+      //   name: 'Index',
+      //   meta: {
+      //     title: t('router.home'),
+      //     icon: 'ep:home-filled',
+      //     noCache: false,
+      //     affix: true
+      //   }
+      // },
       {
         path: 'index',
         component: () => import('@/views/Home/Index10.vue'),
         name: 'Index',
         meta: {
-          title: t('router.home'),
+          title: '集团视角数据看板',
+          icon: 'ep:home-filled',
+          noCache: false,
+          affix: true
+        }
+      },
+      {
+        path: 'region', // 区域数据看板
+        component: () => import('@/views/Home/Index12.vue'),
+        name: 'RegionIndex',
+        meta: {
+          title: '区域视角数据看板',
+          icon: 'ep:home-filled',
+          noCache: false,
+          affix: true
+        }
+      },
+      {
+        path: 'park', // 园区数据看板
+        component: () => import('@/views/Home/Index13.vue'),
+        name: 'ParkIndex',
+        meta: {
+          title: '园区视角数据看板',
           icon: 'ep:home-filled',
           noCache: false,
           affix: true
diff --git a/src/views/Home/Index10.vue b/src/views/Home/Index10.vue
index 364b417..d38435b 100644
--- a/src/views/Home/Index10.vue
+++ b/src/views/Home/Index10.vue
@@ -1,995 +1,533 @@
 <template>
-  <!-- <div v-if="false" class="w-100% flex gap-x-20px">
-    <div :class="selectByCond(appStore.getMobile, 'w-100%', 'w-80%')">
-      <div
-        class="h-260px flex pl-10px pt-10px mb-20px bg-white big-radius .dark:bg-#1A2744"
-        style="width: calc(100% - 10px)"
-      >
-        <div
-          class="bg-#3370FF w-45% pb-10px mr-10px flex big-radius blue_box_shadow pointer"
-          style="height: calc(100% - 20px)"
-        >
-          <div
-            :class="selectByCond(isFullscreen, 'w-40%  mr-9%', 'w-50%')"
-            class="pt-10px pb-10px pl-20px pr-20px"
-          >
-            <div class="text-white text-32px font-bold mb-5px nowrap">转化率</div>
-            <div
-              class="text-white text-14px flex items-center nowrap"
-              style="font-family: Arial, Helvetica, sans-serif"
-            >
-              {{ conversion?.sj }}
-              <div
-                class="w-15px h-15px bg-white rounded-md flex items-center justify-center ml-10px"
-              >
-                <Icon icon="bytesize:chevron-bottom" :size="12" class="text-black"></Icon>
-              </div>
-            </div>
-            <div class="mt-30px flex nowrap">
-              <div class="w-50% text-white b-l-0 b-t-0 b-b-0 b-r-1px b-#709BFF b-solid">
-                <div class="text-12px">成功客户数</div>
-                <div class="text-16px font-bold mt-5px">{{ conversion?.cgkhs }}</div>
-              </div>
-              <div class="w-50% text-white ml-30px">
-                <div class="text-12px">新增会员数</div>
-                <div class="text-16px font-bold mt-5px">{{ conversion?.xzhys }}</div>
-              </div>
-            </div>
-            <div
-              class="mt-30px flex bg-white h-49px pt-5px rounded-md text-blue-600 w-183px pl-20px .dark:bg-#1A2744"
-              style="align-items: baseline"
-            >
-              <span class="text-14px">客单价：</span>
-              <span class="text-32px font-bold ml-10px">{{ conversion?.kdj }}</span>
-            </div>
-          </div>
-          <div :class="selectByCond(isFullscreen, 'w-45% pl-5%', 'w-50%')">
-            <template v-if="isFullscreen">
-              <Echart :options="oilGauge_app_option" width="100%" height="250px" />
-            </template>
-            <template v-else>
-              <Echart :options="oilGauge_option" width="100%" height="250px" />
-            </template>
-          </div>
+  <div class="dashboard-container">
+    <!-- 顶部标题栏 -->
+    <div class="header-container">
+      <div class="header-left">
+        <div class="back-button" @click="openRegionSelector">
+          {{ currentView }}
+          <span>···</span>
         </div>
-        <div class="oilGauge_line .dark:b-#525C73">
-          <div
-            :class="selectByCond(appStore.getMobile, 'gap-x-5px', 'gap-x-20px')"
-            class="grid grid-cols-4 ml-20px"
-          >
-            <div
-              class="truncate flex-shrink-0"
-              v-for="item in ConversionList"
-              :key="item.titleCode"
-            >
-              <div class="flex" style="align-items: baseline">
-                <span
-                  :class="selectByCond(isFullscreen, 'text-16px', 'text-28px')"
-                  class="font-bold"
-                  >{{ item.nowNum }}</span
-                >
-                <template v-if="item.nowNum >= item.beforeNum">
-                  <div class="arrow-top flex justify-center ml-10px">
-                    <Icon icon="mdi:arrow-top-bold" class="text-white .dark:text-black"></Icon>
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="arrow-bottom flex items-center justify-center ml-10px">
-                    <Icon icon="mdi:arrow-bottom-bold" class="text-white .dark:text-black"></Icon>
-                  </div>
-                </template>
-              </div>
-              <div class="text-14px mt-5px">
-                <span class="text-13px">/</span>
-                昨日：{{ item.beforeNum }}
-              </div>
-              <div class="mt-5px pb-5px">
-                <div
-                  :class="defaultConversion == item.titleCode ? 'active-conversion' : ''"
-                  class="text-14px c-#A2A7C2 cursor-pointer .dark:text-white"
-                  @click="clickSelectConversion(item.titleCode)"
-                  style="width: max-content"
-                >
-                  {{ item.title }}
-                </div>
-              </div>
-            </div>
-          </div>
+      </div>
+      <h1 class="header-title">数据看板</h1>
+      <div class="header-right">
+        <div class="date-range-wrapper">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateChange" />
+        </div>
+        <el-button type="primary" :icon="Refresh" @click="refreshData" class="refresh-btn">
+          刷新数据
+        </el-button>
+      </div>
+    </div>
 
-          <div class="oilGauge_line_echart">
-            <Echart :options="oilGauge_line_option" width="100%" height="150px" />
+    <!-- 主内容区 - 6个卡片 -->
+    <div class="content-container">
+      <!-- 第一行：外协管理、风险管理、隐患管理 -->
+      <div class="card-row">
+        <!-- 外协管理卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">
+              <span class="card-icon">👥</span>
+              外协管理
+            </div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="donut-chart-wrapper">
+              <Echart :options="outsourcingChartOption" width="100%" height="200px" />
+            </div>
+            <div class="region-distribution">
+              <div class="distribution-title">区域分布</div>
+              <div class="distribution-list">
+                <div class="distribution-item" v-for="item in outsourcingDistribution" :key="item.region">
+                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                  <span class="region-name">{{ item.region }}</span>
+                  <span class="region-count">{{ item.count }}人</span>
+                  <span class="region-percent">({{ item.percent }})</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 风险管理卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">风险管理</div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="donut-chart-wrapper">
+              <Echart :options="riskChartOption" width="100%" height="200px" />
+            </div>
+            <div class="risk-distribution">
+              <div class="distribution-title">风险等级分布</div>
+              <div class="distribution-list">
+                <div class="distribution-item" v-for="item in riskDistribution" :key="item.level">
+                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                  <span class="region-name">{{ item.level }}</span>
+                  <span class="region-count">{{ item.count }}项</span>
+                  <span class="region-percent">({{ item.percent }})</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 隐患管理卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">
+              <span class="card-icon warning">⚠️</span>
+              隐患管理
+            </div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="line-chart-wrapper">
+              <Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
+            </div>
+            <div class="rectification-status">
+              <div class="distribution-title">整改状态</div>
+              <div class="status-list">
+                <div class="status-item" v-for="item in rectificationStatus" :key="item.status">
+                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                  <span class="status-name">{{ item.status }}</span>
+                  <span class="status-count">{{ item.count }}项</span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="w-100% flex gap-x-20px">
-        <div
-          class="h-390px w-50% p-10px mb-20px bg-white big-radius flex items-center .dark:bg-#1A2744"
-        >
-          <div class="w-100%">
-            <div class="h-150px text-25px flex items-center justify-center mb-20px">
-              <template v-if="typeof advertising == 'string'">
-                {{ advertising }}
-              </template>
-              <template v-else-if="typeof advertising == 'object'">
-                <el-carousel height="150px" class="w-100% rounded-xl">
-                  <el-carousel-item
-                    class="text-center"
-                    v-for="(item, index) in advertising"
-                    :key="index"
-                  >
-                    <el-image :src="item.imgUrl" class="h-100% w-100%" fit="cover"></el-image>
-                  </el-carousel-item>
-                </el-carousel>
-              </template>
+
+      <!-- 第二行：高危作业、应急预案、安全培训 -->
+      <div class="card-row">
+        <!-- 高危作业卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">高危作业</div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="donut-chart-wrapper">
+              <Echart :options="highRiskChartOption" width="100%" height="200px" />
             </div>
-            <div class="pt-10px b-solid b-l-0 b-r-0 b-b-0 b-t-1px b-#5D677D">
-              <div class="flex">
-                <div>
-                  <span
-                    class="c-#FF0000 font-bold .dark:text-white"
-                    :class="
-                      refineSelectByCond(
-                        'text-9px',
-                        'text-12px',
-                        ''
-                      )
-                    "
-                  >
-                    某赞商家&thinsp;&thinsp;<span class="c-#ED6A0C font-bold .dark:text-white"
-                      >不打烊</span
-                    >
-                  </span>
-                </div>
-                <div
-                  class="flex items-center ml-20px pl-20px b-solid b-t-0 b-r-0 b-b-0 b-l-2px b-#EEF1FF"
-                >
-                  <el-avatar src="/img/avatar1.png" size="small" />
-                  <span class="c-#FF0000 font-bold text-13px ml-10px .dark:text-white">
-                    某赞护航
-                    <span class="ml-15px font-100">为你的生意保驾护航</span>
-                  </span>
+            <div class="operation-distribution">
+              <div class="distribution-title">区域作业分布</div>
+              <div class="distribution-list">
+                <div class="distribution-item" v-for="item in operationDistribution" :key="item.region">
+                  <span class="region-name">{{ item.region }}</span>
+                  <span class="region-count">{{ item.count }}项</span>
                 </div>
               </div>
-              <div class="h-155px flex mt-20px bg-#EEF1FF small-radius .dark:bg-black">
-                <div
-                  :class="selectByCond(appStore.getMobile, 'w-50%', 'w-65%')"
-                  class="h-100% flex items-center"
-                >
-                  <div
-                    class="text-12px h-90% flex justify-center p-l-25px"
-                    style="flex-direction: column"
-                  >
-                    <div
-                      v-for="(item, index) in merchantIntroduction"
-                      :key="item.title + index"
-                      class="flex-auto flex items-center div_to_ul"
-                    >
-                      <span class="mr-10px shrink-0 w-50px">{{ item.title }}</span>
-                      <span
-                        :class="
-                          refineSelectByCond(
-                            'w-75px',
-                            'w-100px',
-                            'w-170px'
-                          )
-                        "
-                        class="truncate b-solid b-t-0 b-r-0 b-b-0 b-l-1px b-#E0E6ED pl-10px"
-                      >
-                        {{ item.content }}
-                      </span>
-                    </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 应急预案卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">
+              <span class="card-icon">📄</span>
+              应急预案
+            </div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="progress-chart-wrapper">
+              <Echart :options="emergencyPlanChartOption" width="100%" height="200px" />
+            </div>
+            <div class="drill-info">
+              <div class="drill-item">
+                <span>应完成演练</span>
+                <span class="drill-number">76次</span>
+              </div>
+              <div class="drill-item">
+                <span>已完成演练</span>
+                <span class="drill-number">59次</span>
+              </div>
+            </div>
+            <div class="regional-progress">
+              <div class="distribution-title">区域演练完成率</div>
+              <div class="progress-list">
+                <div class="progress-item" v-for="item in regionalDrillProgress" :key="item.region">
+                  <span class="region-name">{{ item.region }}</span>
+                  <div class="progress-bar-wrapper">
+                    <div class="progress-bar" :style="{ width: item.percent, backgroundColor: '#10b981' }"></div>
                   </div>
+                  <span class="progress-percent">{{ item.percent }}</span>
                 </div>
-                <div
-                  class="w-35% bg-#3370FF m-10px p-20px small-radius cursor-pointer c-white blue_box_shadow"
-                >
-                  <div class="text-11px"> 查看全部经验建议 </div>
-                  <div class="text-32px h-60px" style="line-height: 60px"> {{ sjjysl }} </div>
-                  <div class="text-13px flex items-center">
-                    /家商家已学习
-                    <Icon icon="si:arrow-right-fill" :size="24" class="ml-auto"></Icon>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 安全培训卡片 -->
+        <div class="dashboard-card">
+          <div class="card-header">
+            <div class="card-title">
+              <span class="card-icon">📚</span>
+              安全培训
+            </div>
+            <el-button type="text" class="manage-btn">管理</el-button>
+          </div>
+          <div class="card-content">
+            <div class="bar-chart-wrapper">
+              <Echart :options="safetyTrainingChartOption" width="100%" height="180px" />
+            </div>
+            <div class="regional-progress">
+              <div class="distribution-title">区域培训完成率</div>
+              <div class="progress-list">
+                <div class="progress-item" v-for="item in regionalTrainingProgress" :key="item.region">
+                  <span class="region-name">{{ item.region }}</span>
+                  <div class="progress-bar-wrapper">
+                    <div class="progress-bar" :style="{ width: item.percent, backgroundColor: '#8b5cf6' }"></div>
                   </div>
+                  <span class="progress-percent">{{ item.percent }}</span>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="h-390px w-50% p-10px mb-20px bg-white big-radius .dark:bg-#1A2744">
-          <div class="p-10px flex" style="height: calc(100% - 20px)">
-            <div class="w-180px">
-              <div class="font-bold text-22px"> 智能助手 </div>
-              <div class="c-#A2A7C2 text-13px mt-5px .dark:text-white">
-                感受下某赞黑科技的力量
-              </div>
-              <div class="w-180px h-180px animation-box mt-30px">
-                <div
-                  class="znzs-one w-180px h-180px bg-#f8f8fd .dark:bg-#56607A"
-                  :class="znzsType == 'hover' ? 'hover' : ''"
-                >
-                </div>
-                <div
-                  class="znzs-two w-150px h-150px bg-#e8eafb .dark:bg-#9098B4"
-                  :class="znzsType == 'hover' ? 'hover' : ''"
-                >
-                </div>
-                <div class="znzs-three w-130px h-130px" :class="znzsType == 'hover' ? 'hover' : ''">
-                </div>
-                <div class="znzs-four w-110px h-110px"> </div>
-                <div class="znzs-xdcl text-13px text-white">项待处理 </div>
-                <div class="znzs-ck pointer w-60px h-60px c-white text-52px font-bold text-center">
-                  <div
-                    class="znzs-sz h-300px w-100%"
-                    :class="znzsType == 'nothover' ? 'nothover' : ''"
-                    @mouseover="znzsMouseover"
-                    @mouseout="znzsMouseout"
-                  >
-                    <div
-                      class="h-60px"
-                      style="line-height: 60px"
-                      v-for="item in animationList"
-                      :key="item"
-                    >
-                      {{ item }}
-                    </div>
-                    <div class="h-76px" style="line-height: 60px">
-                      <Icon icon="charm:chevrons-up" :size="36" class=""></Icon>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="flex justify-center mt-50px">
-                <div
-                  class="w-140px h-40px text-14px flex items-center justify-center cursor-pointer bg-#3370FF c-white small-radius"
-                >
-                  去解决掉TA
-                </div>
-              </div>
-            </div>
-            <div class="h-100% znzs-tabs ml-10px" style="width: calc(100% - 180px)">
-              <div class="w-80%">
-                <el-tabs v-model="activeName" class="" @tab-click="handleClick">
-                  <el-tab-pane label="全部" name="1"></el-tab-pane>
-                  <el-tab-pane label="店铺基础" name="2"></el-tab-pane>
-                  <el-tab-pane label="商品体验" name="3"></el-tab-pane>
-                  <el-tab-pane label="物流体验" name="4"></el-tab-pane>
-                </el-tabs>
-              </div>
-              <div class="tabs-position-icon">
-                <Icon icon="material-symbols:menu" :size="26"></Icon>
-              </div>
-              <div>
-                <Echart
-                  :options="znzs_option"
-                  :width="
-                    refineSelectByCond('150px', '250px', '300px')
-                  "
-                  height="190px"
-                />
-              </div>
-              <div class="grid grid-rows-3 text-11px gap-y-20px mt-20px">
-                <div
-                  v-for="(item, index) in znzsIntroduce"
-                  :key="item.xxnra + index"
-                  class="flex items-center"
-                >
-                  <template v-if="item.jjcd == 1">
-                    <el-image src="/img/hq1.png" fit="contain" class="h-15px"></el-image>
-                  </template>
-                  <template v-else-if="item.jjcd == 0">
-                    <el-image src="/img/lq1.png" fit="contain" class="h-15px"></el-image>
-                  </template>
-                  <div
-                    class="ml-15px flex truncate"
-                    :class="
-                      refineSelectByCond(
-                        'w-80px',
-                        'w-180px',
-                        'w-190px'
-                      )
-                    "
-                  >
-                    <div class="truncate" style="max-width: 100%; flex-shrink: 0">
-                      {{ item.xxnra }}
-                    </div>
-                    <div v-if="item.xxnrb" class="c-#C7CCD0 ml-5px truncate .dark:text-white">
-                      {{ item.xxnrb }}</div
-                    >
-                  </div>
-                  <span class="ml-auto c-#3370FF cursor-pointer .dark:text-white">
-                    {{ item.btname }}
-                  </span>
-                </div>
-              </div>
-              <div class="mt-20px text-11px c-#3370FF cursor-pointer .dark:text-white">
-                还有 {{ overviewPendingLen }} 条内容，查看全部内容
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="w-100% flex gap-x-30px">
-        <div
-          :class="
-            refineSelectByCond(
-              'w-90% h-85px gap-x-10px',
-              'w-93% h-85px gap-x-30px',
-              'w-95% h-115px gap-x-30px'
-            )
-          "
-          class="mb-20px big-radius flex"
-        >
-          <div
-            class="flex-shrink-0 bg-#1DC9B7 small-radius c-white"
-            style="box-shadow: 0 3px 20px rgb(29 201 183 / 29.8%)"
-          >
-            <div class="h-100% pl-20px pr-20px flex items-center">
-              <div class="w-75%">
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-12px',
-                      'text-20px',
-                      'text-24px'
-                    )
-                  "
-                  class="font-bold mb-10px"
-                  >微信小程序</div
-                >
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-6px',
-                      'text-12px',
-                      'text-13px'
-                    )
-                  "
-                  class="truncate"
-                  >抢占微信设计流量红利</div
-                >
-              </div>
-              <div class="w-25%">
-                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
-              </div>
-            </div>
-          </div>
-          <div class="flex-shrink-0 bg-#3370FF blue_box_shadow small-radius c-white">
-            <div class="h-100% pl-20px pr-20px flex items-center">
-              <div class="w-75%">
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-12px',
-                      'text-20px',
-                      'text-24px'
-                    )
-                  "
-                  class="font-bold mb-10px"
-                  >百度小程序</div
-                >
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-6px',
-                      'text-12px',
-                      'text-13px'
-                    )
-                  "
-                  class="truncate"
-                  >打造商家新官网</div
-                >
-              </div>
-              <div class="w-25%">
-                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
-              </div>
-            </div>
-          </div>
-          <div
-            class="flex-shrink-0 bg-#C227FC small-radius c-white"
-            style="box-shadow: 0 3px 20px rgb(194 39 252 / 29.8%)"
-          >
-            <div class="h-100% pl-20px pr-20px flex items-center">
-              <div class="w-75%">
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-12px',
-                      'text-20px',
-                      'text-24px'
-                    )
-                  "
-                  class="font-bold mb-10px"
-                  >分销市场</div
-                >
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-6px',
-                      'text-12px',
-                      'text-13px'
-                    )
-                  "
-                  class="truncate"
-                  >一键上架，快速补充货源</div
-                >
-              </div>
-              <div class="w-25%">
-                <el-image src="/img/fxsc.png" fit="contain" class="h-45px" />
-              </div>
-            </div>
-          </div>
-          <div
-            class="flex-shrink-0 bg-#F2637B small-radius c-white"
-            style="box-shadow: 0 3px 20px rgb(242 99 123 / 29.8%)"
-          >
-            <div class="h-100% pl-20px pr-20px flex items-center">
-              <div class="w-75%">
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-12px',
-                      'text-20px',
-                      'text-24px'
-                    )
-                  "
-                  class="font-bold mb-10px"
-                  >多人拼团</div
-                >
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-6px',
-                      'text-12px',
-                      'text-13px'
-                    )
-                  "
-                  class="truncate"
-                  >裂变式营销玩法</div
-                >
-              </div>
-              <div class="w-25%">
-                <el-image src="/img/pin.png" fit="contain" class="h-45px" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          :class="
-            refineSelectByCond(
-              'w-7% h-85px',
-              'w-6% h-85px',
-              'w-5% pr-10px pl-10px h-115px'
-            )
-          "
-          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
-        >
-          <div
-            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
-            class="w-50% h-100% mt-10px cursor-pointer text-center"
-          >
-            更多最新推荐
-            <Icon
-              icon="pepicons-pop:arrow-left"
-              :size="selectByCond(appStore.getMobile, '18', '24')"
-            ></Icon>
-          </div>
-        </div>
-      </div>
-      <div class="w-100% flex gap-x-30px">
-        <div
-          :class="
-            refineSelectByCond(
-              'w-7% h-85px',
-              'w-6% h-85px',
-              'w-5% pr-10px pl-10px h-115px'
-            )
-          "
-          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
-        >
-          <div
-            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
-            class="w-50% h-100% mt-10px cursor-pointer text-center"
-          >
-            全部经营建议
-            <Icon
-              icon="pepicons-pop:arrow-right"
-              :size="selectByCond(appStore.getMobile, '18', '24')"
-            ></Icon>
-          </div>
-        </div>
-        <div
-          :class="
-            refineSelectByCond(
-              'w-90% h-85px gap-x-10px',
-              'w-93% h-85px gap-x-30px',
-              'w-95% h-115px gap-x-30px'
-            )
-          "
-          class="mb-20px big-radius flex"
-        >
-          <div
-            v-for="(item, index) in jyjyList"
-            :key="item.title + index"
-            class="w-100% bg-white small-radius .dark:bg-#1A2744"
-          >
-            <div class="h-100% pl-20px pr-20px flex items-center">
-              <div class="w-25%">
-                <el-image :src="item.imgUrl" fit="contain" />
-              </div>
-              <div class="w-75% ml-5px">
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-12px',
-                      'text-20px',
-                      'text-24px'
-                    )
-                  "
-                  class="font-bold mb-10px"
-                  >{{ item.title }}</div
-                >
-                <div
-                  :class="
-                    refineSelectByCond(
-                      'text-6px',
-                      'text-10px',
-                      'text-12px'
-                    )
-                  "
-                  class="c-#A2A7C2 truncate .dark:text-white"
-                  >{{ item.introduction }}</div
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="w-100% mb-20px">
-        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
-          <div class="font-bold text-24px"> 学习交流 </div>
-          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white">
-            成长必经之路，好好看，好好学...
-          </div>
-          <div class="w-85% mt-20px flex">
-            <div class="w-100% grid gap-x-30px gap-y-20px grid-cols-3">
-              <div
-                class="pl-10px h-66px flex items-center bg-#EEF1FF small-radius .dark:bg-black"
-                v-for="(item, index) in learningExchangeList"
-                :key="index"
-              >
-                <div class="w-25%">
-                  <el-image :src="item.imgUrl" fit="contain" />
-                </div>
-                <div class="w-75%">
-                  <div class="font-bold mb-5px">{{ item.title }}</div>
-                  <div class="text-12px c-#A2A7C2 truncate .dark:text-white">{{
-                    item.introduce
-                  }}</div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="h-150px w-60px pr-10px pl-10px ml-30px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
-            >
-              <div class="w-50% h-100% mt-10px leading-8 cursor-pointer">
-                更多渠道学习
-                <Icon icon="pepicons-pop:arrow-left" :size="24"></Icon>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="w-100%">
-        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
-          <div class="font-bold text-24px"> 更多服务 </div>
-          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white"> 想要找找其他的服务 </div>
-          <div class="flex h-130px mt-30px">
-            <div class="grid grid-cols-5 grid-rows-1 h-100%">
-              <div
-                v-for="(item, index) in moreServicesList"
-                :key="item.title + index"
-                class="bg-#EEF1FF small-radius mr-20px h-130px flex items-center justify-center .dark:bg-black"
-                style="flex-direction: column; min-width: 90px"
-              >
-                <div class="">
-                  <el-image :src="item.imgUrl" fit="contain" />
-                </div>
-                <div class="font-bold mt-15px"> {{ item.title }} </div>
-              </div>
-            </div>
-            <div
-              class="w-70px h-100% pr-5px pl-5px bg-#3370FF blue_box_shadow small-radius text-white text-12px"
-            >
-              <div class="ml-10px mr-10px h-100% mt-10px leading-8 text-center cursor-pointer">
-                或者没你想要的？联系我
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
-    <template v-if="!appStore.getMobile">
-      <div class="w-20% flex-shrink-0">
-        <div class="w-100%">
-          <div
-            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
-          >
-            <div class="w-100%">
-              <div class="text-21px font-bold"> 如果你需要帮助 </div>
-              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white"> 随时呼叫我... </div>
-              <div class="w-100%">
-                <div
-                  class="h-60px mb-15px bg-#EEF1FF small-radius flex items-center pl-10px pr-10px .dark:bg-black"
-                  v-for="(item, index) in bzList"
-                  :key="item.title + index"
-                >
-                  <el-image :src="item.imgUrl" fit="contain" class="h-30px" />
-                  <div class="ml-15px">
-                    <div class="text-14px font-bold">{{ item.title }}</div>
-                    <div class="c-#A2A7C2 text-11px .dark:text-white">{{ item.introduction }}</div>
-                  </div>
-                  <Icon
-                    icon="pepicons-pop:arrow-right"
-                    :size="24"
-                    class="ml-auto cursor-pointer"
-                  ></Icon>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
-          >
-            <div class="w-100%">
-              <div class="text-21px font-bold"> 有你的服务通知 </div>
-              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white">
-                随时关注动态...
-              </div>
-              <div class="w-100% grid gap-y-15px">
-                <div
-                  class="bg-#EEF1FF small-radius p-10px pt-13px pb-13px .dark:bg-black"
-                  v-for="(item, index) in fwtzList"
-                  :key="index"
-                >
-                  <div class="font-bold"> {{ item.title }} </div>
-                  <div class="c-#A2A7C2 text-12px mt-5px .dark:text-white">
-                    {{ item.content }}
-                  </div>
-                  <div class="flex justify-center mt-10px">
-                    <div class="flex justify-between text-12px c-#3370FF w-60% .dark:text-white">
-                      <div class="cursor-pointer">查看详情</div>
-                      <div class="cursor-pointer">我知道了</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <template v-for="(item, index) in rightList" :key="item.title + index">
-            <div
-              :class="item.h == '210' ? 'h-210px' : 'h-240px'"
-              class="p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
-            >
-              <div class="w-100%">
-                <div class="text-23px font-bold"> {{ item.title }} </div>
-                <div class="text-14px c-#3370FF mt-5px mb-15px cursor-pointer .dark:text-white">
-                  查看全部
-                </div>
-                <div class="w-100%">
-                  <div
-                    class="bg-#EEF1FF small-radius p-10px h-130px .dark:bg-black"
-                    style="width: calc(100% - 20px)"
-                  >
-                    <div class="font-bold mb-15px">{{ item.totalTitle }}</div>
-                    <div class="c-#A2A7C2 w-100% text-11px grid grid-rows-4">
-                      <div
-                        v-for="(cItem, cIndex) in item.content"
-                        :key="cItem.title + cIndex"
-                        class="mb-5px cursor-pointer .dark:text-white"
-                        :class="cItem.type == 'success' ? 'c-#F2637B' : 'flex'"
-                      >
-                        {{ cItem.title }}
-                        <div v-if="cItem.type == 'info'" class="ml-auto">
-                          <Icon icon="mingcute:right-line" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </template>
-  </div> -->
-  <div class="shouye">
-    <img  src="@/assets/imgs/souye.png" />
+
+    <!-- 区域选择弹窗 -->
+    <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
+      @change="onRegionChange" />
   </div>
 </template>
 
-<script lang="ts" setup>
-import Icon from '@/components/Icon/src/Icon.vue'
-import 'echarts/lib/component/markLine'
-import 'echarts/lib/component/markPoint'
-import type { TabsPaneContext } from 'element-plus'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { useAppStore } from '@/store/modules/app'
-import { getTableList, batchGetTableList } from '@/api/design/report'
-import { cloneDeep } from 'lodash-es'
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Refresh } from '@element-plus/icons-vue'
+import Echart from '@/components/Echart/src/Echart.vue'
+import RegionSelector from '@/views/screen/components/RegionSelector.vue'
+import { getTableList } from '@/api/design/report'
+import type { EChartsOption } from 'echarts'
+import dayjs from 'dayjs'
+import { getOutsourcingManagementData } from '@/api'
 
 defineOptions({ name: 'Home10' })
 
-interface Advertising {
-  imgUrl: string
-}
-interface ZnzsIntroduce {
-  jjcd: number
-  xxnra: string
-  xxnrb?: string
-  btname?: string
-}
-interface FwtzList {
-  content: string
-  title: string
-}
-interface RightListContent {
-  type: string
-  title: string
-}
-interface RightList {
-  title: string
-  h: string
-  totalTitle?: string
-  content?: RightListContent[]
-}
-interface MerchantIntroduction {
-  title: string
-  content: string
+// 类型定义
+interface RegionItem {
+  name: string
+  code: string
 }
 
-const appStore = useAppStore()
-// 是否全屏
-const isFullscreen = computed(() =>appStore.getFullscreen);
+interface DistributionItem {
+  region?: string
+  level?: string
+  status?: string
+  count: number
+  percent?: string
+  color: string
+}
 
-// type为true返回classOne，反之返回classTwo
-const selectByCond = (type, classOne, classTwo) => {
-  if (typeof type === 'boolean' && type) {
-    return classOne
-  } else {
-    return classTwo
+const router = useRouter()
+
+// 区域选择相关
+const currentView = ref('总部')
+const regionSelectorVisible = ref(false)
+const selectedRegion = ref('')
+const regionOption = ref<RegionItem[]>([])
+
+// 时间选择相关 - 默认当前月起止
+const getCurrentMonthRange = () => {
+  const start = dayjs().startOf('month').format('YYYY-MM-DD')
+  const end = dayjs().endOf('month').format('YYYY-MM-DD')
+  return [start, end]
+}
+const dateRange = ref(getCurrentMonthRange())
+
+// 外协管理数据
+const outsourcingTotal = ref<number>(0) // 外协人员总数
+const outsourcingDistribution = ref<DistributionItem[]>([])
+
+// 区域颜色配置
+const regionColors = ['#3b82f6', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#ec4899']
+
+// 初始化外协管理数据
+const initOutsourcingData = async () => {
+  try {
+    const response = await getOutsourcingManagementData({
+      sDate: dateRange.value[0],
+      eDate: dateRange.value[1],
+      pageNo: 1,
+      pageSize: 10000
+    })
+    
+    console.log('外协管理接口返回:', response)
+    
+    // axios封装后，response就是 { code: 0, data: {...}, msg: "" }
+    // 所以records在 response.data.records
+    const records = response?.records || []
+    
+    if (records && records.length > 0) {
+      // 计算总人数（从records中累加total）
+      const total = records.reduce((sum: number, item: any) => {
+        return sum + Number(item.total || 0)
+      }, 0)
+      
+      outsourcingTotal.value = total
+      
+      // 处理区域分布数据
+      outsourcingDistribution.value = records.map((item: any, index: number) => {
+        const count = Number(item.total || 0)
+        const percent = total > 0 ? ((count / total) * 100).toFixed(1) + '%' : '0%'
+        const color = regionColors[index % regionColors.length]
+        
+        return {
+          region: item.name,
+          count,
+          percent,
+          color
+        }
+      })
+      
+      console.log('处理后的外协管理数据:', {
+        total: outsourcingTotal.value,
+        distribution: outsourcingDistribution.value
+      })
+    } else {
+      // 如果没有数据，重置为空
+      outsourcingTotal.value = 0
+      outsourcingDistribution.value = []
+      console.log('外协管理无数据')
+    }
+  } catch (error) {
+    console.error('获取外协管理数据失败:', error)
+    // 如果接口失败，重置为空
+    outsourcingTotal.value = 0
+    outsourcingDistribution.value = []
   }
 }
 
-const refineSelectByCond = (isFullscreenClsss, mobileClass, otherClass) => {
-  if (isFullscreen.value) {
-    return isFullscreenClsss
-  } else if (appStore.getMobile) {// 判断是否手机端
-    return mobileClass
-  } else {
-    return otherClass
-  }
-}
+// 风险管理数据
+const riskDistribution = ref<DistributionItem[]>([
+  { level: '低风险', count: 268, percent: '58.8%', color: '#10b981' },
+  { level: '一般风险', count: 134, percent: '29.4%', color: '#f59e0b' },
+  { level: '较大风险', count: 36, percent: '7.9%', color: '#ef4444' },
+  { level: '重大风险', count: 18, percent: '3.9%', color: '#dc2626' }
+])
 
-const conversion = ref({
-  cgkhs: 0,
-  sj: '',
-  kdj: 0,
-  xzhys: 0
+// 隐患管理数据
+const rectificationStatus = ref<DistributionItem[]>([
+  { status: '已逾期', count: 24, color: '#ef4444' },
+  { status: '处理中', count: 156, color: '#f59e0b' },
+  { status: '已处理', count: 276, color: '#10b981' }
+])
+
+// 高危作业数据
+const operationDistribution = ref([
+  { region: '华北区域', count: 78 },
+  { region: '华东区域', count: 65 },
+  { region: '华南区域', count: 44 }
+])
+
+// 应急预案数据
+const regionalDrillProgress = ref([
+  { region: '华北区域', percent: '85%' },
+  { region: '华东区域', percent: '75%' },
+  { region: '华南区域', percent: '70%' }
+])
+
+// 安全培训数据
+const regionalTrainingProgress = ref([
+  { region: '华北区域', percent: '92%' },
+  { region: '华东区域', percent: '88%' },
+  { region: '华南区域', percent: '85%' }
+])
+
+// 外协管理环形图配置
+const outsourcingChartOption = computed<EChartsOption>(() => {
+  // 准备图表数据
+  const chartData = outsourcingDistribution.value.map(item => ({
+    value: item.count,
+    name: item.region,
+    itemStyle: { color: item.color }
+  }))
+  
+  // 如果没有数据，显示空状态
+  if (chartData.length === 0 || outsourcingTotal.value === 0) {
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+      },
+      series: [
+        {
+          name: '外协人员',
+          type: 'pie',
+          radius: ['55%', '75%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: 'transparent',
+            borderWidth: 0
+          },
+          label: {
+            show: true,
+            position: 'center',
+            formatter: () => {
+              return `${outsourcingTotal.value}\n外协人员总数`
+            },
+            fontSize: 16,
+            fontWeight: 'bold',
+            color: '#333'
+          },
+          data: [
+            { value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }
+          ]
+        }
+      ]
+    }
+  }
+  
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    series: [
+      {
+        name: '外协人员',
+        type: 'pie',
+        radius: ['55%', '75%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 0,
+          borderColor: 'transparent',
+          borderWidth: 0
+        },
+        label: {
+          show: true,
+          position: 'center',
+          formatter: () => {
+            return `${outsourcingTotal.value}\n外协人员总数`
+          },
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: '#333'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 18,
+            fontWeight: 'bold'
+          }
+        },
+        data: chartData
+      }
+    ]
+  }
 })
 
-const oilGaugeValue = ref(45)
-const oilGaugeCode = ref('%')
-const oilGaugeSubtext = ref('访问-支付转化率')
-const oilGaugemax = ref(100)
-
-// 访问-支付转化率
-const oilGauge_app_option = ref<any>()
-const oilGauge_option = ref({
-  title: [
-    {
-      text: `{primary|${oilGaugeValue.value}}\t{point|${oilGaugeCode.value}}`,
-      left: 'center',
-      top: 'center',
-      textStyle: {
-        rich: {
-          primary: {
-            color: 'white',
-            fontWeight: 'bold',
-            fontSize: 32,
-            lineHeight: 67.2
-          },
-          point: {
-            fontSize: 12,
-            lineHeight: 22,
-            color: 'white',
-            padding: [10, -10, 0, -5]
-          }
-        }
-      }
-    },
-    {
-      left: 'center',
-      top: '70%',
-      subtext: `${oilGaugeSubtext.value}`,
-      subtextStyle: {
-        color: 'white',
-        fontSize: 12
-      }
-    }
-  ],
-  angleAxis: {
-    axisLine: {
-      show: false
-    },
-    axisLabel: {
-      show: false
-    },
-    splitLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-    },
-    min: 0,
-    max: 6.666,
-    startAngle: 225
-  },
-  radiusAxis: {
-    type: 'category',
-    axisLine: {
-      show: false
-    },
-    axisTick: {
-      show: false
-    },
-    axisLabel: {
-      show: false
-    },
-    data: ['a', 'b', 'c'],
-    z: 10
-  },
-  polar: {
-    radius: '105%'
+// 风险管理环形图配置
+const riskChartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
   },
   series: [
     {
-      type: 'gauge',
-      splitNumber: 20,
-      max: oilGaugemax.value,
-      radius: '75%',
-      detail: {
-        show: false
+      name: '风险',
+      type: 'pie',
+      radius: ['55%', '75%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 0,
+        borderColor: 'transparent',
+        borderWidth: 0
       },
-      axisLine: {
-        // 坐标轴线
-        show: false,
-        lineStyle: {
-          color: [
-            [0, '#ADC6FF'],
-            [1, '#ADC6FF']
-          ],
-          width: 0,
-          opacity: 0
+      label: {
+        show: true,
+        position: 'center',
+        formatter: () => {
+          return '456\n风险总数'
+        },
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 18,
+          fontWeight: 'bold'
         }
       },
       data: [
-        {
-          name: '',
-          value: oilGaugeValue.value
-        }
-      ],
-      splitLine: {
-        length: 20, //长刻度节点线长度
-        lineStyle: {
-          width: 4,
-          color: '#ADC6FF'
-        } //刻度节点线
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        show: false,
-        color: '#333',
-        fontSize: 18
-      },
-      pointer: {
-        show: true,
-        icon: 'roundRect',
-        length: '60%',
-        offsetCenter: [0, -25],
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: 'white'
-              },
-              {
-                offset: 1,
-                color: 'rgba(255, 255, 255, 0)'
-              }
-            ]
-          },
-          opacity: 0.9
-        }
+        { value: 268, name: '低风险', itemStyle: { color: '#10b981' } },
+        { value: 134, name: '一般风险', itemStyle: { color: '#f59e0b' } },
+        { value: 36, name: '较大风险', itemStyle: { color: '#ef4444' } },
+        { value: 18, name: '重大风险', itemStyle: { color: '#dc2626' } }
+      ]
+    }
+  ]
+}))
+
+// 隐患管理折线图配置
+const hiddenDangerChartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    }
+  },
+  legend: {
+    data: ['一般隐患', '重大隐患'],
+    top: 10,
+    textStyle: {
+      fontSize: 12
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['16日', '18日', '20日', '22日', '24日'],
+    axisLine: {
+      lineStyle: {
+        color: '#e5e7eb'
       }
     }
-  ],
-  tooltip: {
-    show: false
-  }
-})
-
-// 折线图
-const goTo = ref<number[]>([])
-const goOut = ref<number[]>([])
-const oilGaugeLineXAxis = ref<string[]>([])
-const showoilGaugeLineLable = ref('')
-const ConversionList = ref([
-  { nowNum: 0, beforeNum: 0, title: '支付金额', titleCode: 'zfje' },
-  { nowNum: 0, beforeNum: 0, title: '支付订单', titleCode: 'zfdd' },
-  { nowNum: 0, beforeNum: 0, title: '浏览量', titleCode: 'lll' },
-  { nowNum: 0, beforeNum: 0, title: '访客数', titleCode: 'fks' }
-])
-const defaultConversion = ref('')
-let oilGaugeMarkPoint = computed(() => {
-  let str = {
-    goTo: ['1', goTo.value[0] || 0],
-    goOut: ['1', goOut.value[0] || 0]
-  }
-  return str
-})
-const oilGauge_line_option = ref<any>({
-  color: ['#F2F4F5', '#3571FE'],
-  grid: {
-    top: '15%',
-    bottom: '0',
-    left: '0',
-    right: '0'
   },
-  xAxis: [
-    {
-      show: false,
-      boundaryGap: false,
-      data: oilGaugeLineXAxis.value
+  yAxis: {
+    type: 'value',
+    max: 45,
+    axisLine: {
+      lineStyle: {
+        color: '#e5e7eb'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#f3f4f6'
+      }
     }
-  ],
-  yAxis: [
-    {
-      show: false
-    }
-  ],
+  },
   series: [
     {
-      name: '昨天',
+      name: '一般隐患',
       type: 'line',
-      symbolSize: 0,
       smooth: true,
-      lineStyle: {
-        normal: {
-          width: 2
-        }
-      },
-      data: goTo.value,
-      silent: true
-    },
-    {
-      name: '今天',
-      type: 'line',
-      symbol: 'circle',
-      symbolSize: 0,
-      smooth: true,
-      lineStyle: {
-        normal: {
-          width: 3
-        }
-      },
+      data: [16, 24, 31, 20, 28],
+      itemStyle: { color: '#f59e0b' },
+      lineStyle: { color: '#f59e0b', width: 2 },
       areaStyle: {
         color: {
           type: 'linear',
@@ -998,803 +536,553 @@ const oilGauge_line_option = ref<any>({
           x2: 0,
           y2: 1,
           colorStops: [
-            {
-              offset: 0,
-              color: '#326ffd5f' // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: '#326ffd13' // 100% 处的颜色
-            }
-          ],
-          global: false // 缺省为 false
+            { offset: 0, color: 'rgba(245, 158, 11, 0.3)' },
+            { offset: 1, color: 'rgba(245, 158, 11, 0.05)' }
+          ]
         }
-      },
-      data: goOut.value,
-      silent: true
+      }
     },
     {
+      name: '重大隐患',
       type: 'line',
-      data: [],
-      markLine: {
-        symbol: 'none',
-        lineStyle: {
-          type: 'dashed'
-        },
-        data: [
-          [
-            {
-              xAxis: 0,
-              yAxis: 0
-            },
-            {
-              xAxis: 0,
-              yAxis: 0,
-              label: {
-                formatter: `{aa|${showoilGaugeLineLable.value}}`,
-                rich: {
-                  aa: {
-                    color: 'rgba(100, 108, 154, 0.6)',
-                    fontSize: 12
-                  }
-                }
-              }
-            }
-          ],
-          [
-            {
-              xAxis: 0,
-              yAxis: 0
-            },
-            {
-              xAxis: 0,
-              yAxis: 0,
-              label: {
-                formatter: `{aaa|}`,
-                rich: {
-                  aaa: {
-                    color: 'rgba(100, 108, 154, 0.6)',
-                    fontSize: 12
-                  }
-                }
-              }
-            }
+      smooth: true,
+      data: [8, 13, 26, 14, 20],
+      itemStyle: { color: '#ef4444' },
+      lineStyle: { color: '#ef4444', width: 2 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(239, 68, 68, 0.3)' },
+            { offset: 1, color: 'rgba(239, 68, 68, 0.05)' }
           ]
-        ]
-      },
-      markPoint: {
-        data: [
-          {
-            coord: oilGaugeMarkPoint.value['goTo'],
-            symbol: 'circle',
-            symbolSize: 16,
-            label: {
-              formatter: '昨日',
-              color: 'rgba(100, 108, 154, 0.6)',
-              offset: [20, -10]
-            },
-            itemStyle: {
-              color: 'rgba(255, 255, 255, 0)'
-            }
-          },
-          {
-            coord: oilGaugeMarkPoint.value['goOut'],
-            symbol: 'circle',
-            symbolSize: 16,
-            label: {
-              formatter: '今日',
-              color: '#3571FE',
-              offset: [20, -10]
-            },
-            itemStyle: {
-              color: 'rgba(255, 255, 255, 0)',
-              silent: true
-            }
-          }
-        ]
-      },
-      silent: true
+        }
+      }
     }
   ]
-})
-const initConversion = (realtimeData) => {
-  if (!realtimeData) return
-  ConversionList.value.forEach((ele) => {
-    ele.nowNum = realtimeData[ele.titleCode].jr
-    ele.beforeNum = realtimeData[ele.titleCode].zr
-    realtimeData[ele.titleCode].flag == 1
-      ? (defaultConversion.value = ele.titleCode)
-      : (defaultConversion.value = 'zfje')
-  })
+}))
 
-  realtimeData.data.forEach((ele) => {
-    goTo.value.push(ele.zr)
-    oilGaugeLineXAxis.value.push(ele.sj)
-    if (ele.jr) goOut.value.push(ele.jr)
-  })
+// 高危作业环形图配置
+const highRiskChartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c} ({d}%)'
+  },
+  series: [
+    {
+      name: '高危作业',
+      type: 'pie',
+      radius: ['55%', '75%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 0,
+        borderColor: 'transparent',
+        borderWidth: 0
+      },
+      label: {
+        show: true,
+        position: 'center',
+        formatter: () => {
+          return '187\n本月作业'
+        },
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 18,
+          fontWeight: 'bold'
+        }
+      },
+      data: [
+        { value: 50, name: '动火作业', itemStyle: { color: '#f59e0b' } },
+        { value: 45, name: '高处作业', itemStyle: { color: '#8b5cf6' } },
+        { value: 52, name: '临时用电', itemStyle: { color: '#3b82f6' } },
+        { value: 40, name: '有限空间', itemStyle: { color: '#ec4899' } }
+      ]
+    }
+  ]
+}))
 
-  let goOutLength = goOut.value.length - 1
-  let nowGoOut = goOut.value[goOutLength]
-  let nowGoTo = goTo.value[goOutLength]
+// 应急预案环形进度图配置
+const emergencyPlanChartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}% ({d}%)'
+  },
+  series: [
+    {
+      name: '演练完成率',
+      type: 'pie',
+      radius: ['55%', '75%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 0,
+        borderColor: 'transparent',
+        borderWidth: 0
+      },
+      label: {
+        show: true,
+        position: 'center',
+        formatter: () => {
+          return '78%\n演练完成率'
+        },
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 18,
+          fontWeight: 'bold'
+        }
+      },
+      data: [
+        { value: 78, name: '已完成', itemStyle: { color: '#10b981' } },
+        { value: 22, name: '未完成', itemStyle: { color: '#e5e7eb' } }
+      ]
+    }
+  ]
+}))
 
-  nowGoOut < nowGoTo
-    ? (showoilGaugeLineLable.value = '加把劲，就上去了...')
-    : (showoilGaugeLineLable.value = '')
-  const series2 = oilGauge_line_option.value.series[2]
-
-  series2.markLine.data[0][0].xAxis = goOutLength
-  series2.markLine.data[0][1].xAxis = goOutLength
-  series2.markLine.data[0][1].yAxis = nowGoOut
-  series2.markLine.data[0][1].label.formatter = `{aa|${showoilGaugeLineLable.value}}`
-  series2.markLine.data[1][1].label.formatter = `{aaa|更新时间：${realtimeData.gxsj}}`
-  series2.markLine.data[1][0].xAxis = goOutLength
-  series2.markLine.data[1][1].xAxis = goOutLength
-  series2.markLine.data[1][1].yAxis = nowGoOut + nowGoTo + 20
-  series2.markPoint.data[0].coord = oilGaugeMarkPoint.value.goTo
-  series2.markPoint.data[1].coord = oilGaugeMarkPoint.value.goOut
-}
-const clickSelectConversion = async (val) => {
-  let res = await getTableList('example_overview_realtime_data', { type: 3 })
-  goTo.value = []
-  goOut.value = []
-  oilGaugeLineXAxis.value = []
-  initConversion(res.records[0])
-  defaultConversion.value = val
-}
-
-const moreServicesList = ref([
-  {
-    imgUrl: '/img/gdfw.png',
-    title: '零售'
+// 安全培训柱状图配置
+const safetyTrainingChartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
   },
-  {
-    imgUrl: '/img/gdfw.png',
-    title: '教育'
+  legend: {
+    data: ['培训次数', '参与人次'],
+    top: 10,
+    textStyle: {
+      fontSize: 12
+    }
   },
-  {
-    imgUrl: '/img/gdfw.png',
-    title: '美业'
-  },
-  {
-    imgUrl: '/img/gdfw.png',
-    title: '某赞精选'
-  },
-  {
-    imgUrl: '/img/gdfw.png',
-    title: '我要推广'
-  }
-])
-
-const learningExchangeList = ref([
-  {
-    title: '商家论坛',
-    introduce: '百万商家互通互助',
-    imgUrl: '/img/xxjl.png'
-  },
-  {
-    title: '线下培训',
-    introduce: '点击查看全国活动',
-    imgUrl: '/img/xxjl.png'
-  },
-  {
-    title: '服务市场',
-    introduce: '服务商帮你经营',
-    imgUrl: '/img/xxjl.png'
-  },
-  {
-    title: '在线课堂',
-    introduce: '资深专家视频授课',
-    imgUrl: '/img/xxjl.png'
-  },
-  {
-    title: '本地商盟',
-    introduce: '加入本地商家联盟',
-    imgUrl: '/img/xxjl.png'
-  },
-  {
-    title: '定制服务',
-    introduce: '定制开发专享功能',
-    imgUrl: '/img/xxjl.png'
-  }
-])
-
-const rightList = ref<RightList[]>([
-  {
-    title: '规则中心',
-    h: '210'
-  },
-  {
-    title: '产品动态',
-    h: '240'
-  },
-  {
-    title: '学习中心',
-    h: '240'
-  }
-])
-
-// 广告区域
-// const advertising = ref<string | Advertising[]>('广告banner')
-const advertising = ref<string | Advertising[]>([{ imgUrl: '/img/sygl1.png' }])
-const sjjysl = ref('')
-
-const merchantIntroduction = ref<MerchantIntroduction[]>()
-
-const jyjyList = ref([
-  {
-    imgUrl: '',
-    whiteImgUrl: '/img/whitelltz.png',
-    blackImgUrl: '/img/blacklltz.png',
-    title: '流量拓展',
-    introduction: '小程序分享至朋友圈'
-  },
-  {
-    imgUrl: '',
-    whiteImgUrl: '/img/whitehyzm.png',
-    blackImgUrl: '/img/blackhyzm.png',
-    title: '会员招募',
-    introduction: 'App端支持办理会员卡'
-  },
-  {
-    imgUrl: '',
-    whiteImgUrl: '/img/whitefyzd.png',
-    blackImgUrl: '/img/blackfyzd.png',
-    title: '费用账单',
-    introduction: '便捷管理店铺账目收支'
-  },
-  {
-    imgUrl: '',
-    whiteImgUrl: '/img/whitesptg.png',
-    blackImgUrl: '/img/blacksptg.png',
-    title: '商品推广',
-    introduction: '多平台推广商品类目信息'
-  }
-])
-
-const bzList = ref([
-  {
-    imgUrl: '/img/zxkf.png',
-    title: '在线客服',
-    introduction: '电话：057 - 8888 8888'
-  },
-  {
-    imgUrl: '/img/zmkf.png',
-    title: '桌面在线客服',
-    introduction: '即时应答客户在线咨询'
-  },
-  {
-    imgUrl: '/img/sjkf.png',
-    title: '移动客户端',
-    introduction: '使用手机、Pad管理店铺'
-  }
-])
-
-const znzsType = ref('hover')
-const znzsMouseover = () => {
-  znzsType.value = 'hover'
-}
-const znzsMouseout = () => {
-  znzsType.value = 'nothover'
-}
-const activeName = ref('1')
-const initZnzs = (data) => {
-  if (!data) return
-  znzsSeries.value = [data.dfhdd, data.dhfkf, data.yzxsp, data.dtkdd, data.pdzkh]
-  znzs_option.value.series.data = znzsSeries.value
-}
-// 点击智能助手tabs事件
-const handleClick = async (tab: TabsPaneContext, event: Event) => {
-  let res = await getTableList('example_overview_intelligent_assistants', {
-    type: tab.props.name
-  })
-  initZnzs(res.records[0])
-}
-const znzsSeries = ref<number[]>([])
-const znzs_option = ref({
   grid: {
-    left: '0',
-    right: '0',
-    bottom: '20%',
-    top: '12%'
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
   },
   xAxis: {
     type: 'category',
-    data: ['待发货订单', '待回复客服', '已滞销商品', '待退款订单', '排队中客户'],
+    data: ['华北', '华东', '华南'],
     axisLine: {
       lineStyle: {
-        color: 'white'
+        color: '#e5e7eb'
       }
-    },
-    axisLabel: {
-      color: '#C7CCD0', // x轴颜色
-      fontWeight: 'lighter',
-      fontSize: '9',
-      width: 30,
-      lineHeight: 13,
-      overflow: 'break'
-    },
-    axisTick: {
-      show: false
     }
   },
-  yAxis: [
+  yAxis: {
+    type: 'value',
+    max: 40,
+    axisLine: {
+      lineStyle: {
+        color: '#e5e7eb'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#f3f4f6'
+      }
+    }
+  },
+  series: [
     {
-      show: false,
-      splitLine: {
-        show: false
+      name: '培训次数',
+      type: 'bar',
+      data: [35, 32, 25],
+      itemStyle: {
+        color: '#8b5cf6',
+        borderRadius: [4, 4, 0, 0]
       },
-      axisTick: {
-        show: false
-      }
-    }
-  ],
-  series: {
-    name: '系列一',
-    type: 'bar',
-    barWidth: '16',
-    itemStyle: {
-      color: {
-        type: 'linear',
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          { offset: 0, color: '#7523FD' },
-          { offset: 1, color: '#356DFF' }
-        ]
+      barWidth: '40%'
+    },
+    {
+      name: '参与人次',
+      type: 'bar',
+      data: [25, 20, 18],
+      itemStyle: {
+        color: '#a78bfa',
+        borderRadius: [4, 4, 0, 0]
       },
-      borderRadius: 2
-    },
-    label: {
-      show: true,
-      position: 'top',
-      color: 'black',
-      fontSize: 12
-    },
-    data: znzsSeries.value
-  }
-})
-
-const animationList = ref<number[]>([])
-const overviewPendingLen = ref(0)
-const znzsIntroduce = ref<ZnzsIntroduce[]>([])
-const numTop = ref('')
-
-const fwtzList = ref<FwtzList[]>([])
-
-const markData = oilGauge_line_option.value.series[2].markLine
-const markPoint = oilGauge_line_option.value.series[2].markPoint
-
-const switchMode = () => {
-  // 判断是否为暗色模式
-  const { wsCache } = useCache()
-  if (wsCache.get(CACHE_KEY.IS_DARK)) {
-    document.documentElement.style.setProperty('--tabs-item-color', 'white')
-    znzs_option.value.series.label.show = false
-    znzs_option.value.xAxis.axisLabel.color = 'white'
-    znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
-
-    jyjyList.value.forEach((ele) => {
-      ele.imgUrl = ele.blackImgUrl
-    })
-
-    oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
-    if (markData) {
-      markData.data[0][1].label.rich.aa.color = 'white'
-      markData.data[1][1].label.rich.aaa.color = 'white'
+      barWidth: '40%'
     }
-    if (markPoint) {
-      markPoint.data[0].label.color = 'white'
-      markPoint.data[1].label.color = 'white'
-    }
-  } else {
-    jyjyList.value.forEach((ele) => {
-      ele.imgUrl = ele.whiteImgUrl
-    })
+  ]
+}))
+
+// 方法定义
+const openRegionSelector = (): void => {
+  regionSelectorVisible.value = true
+}
+
+const onRegionChange = (item: RegionItem): void => {
+  selectedRegion.value = item.name
+  router.push({
+    path: '/region',
+    query: { region: item.name, regionCode: item.code }
+  })
+}
+
+const handleDateChange = async (value: string[] | null) => {
+  if (value) {
+    console.log('日期范围变化:', value)
+    await refreshData()
   }
 }
 
-watch(
-  () => appStore.isDark,
-  (val) => {
-    if (val) {
-      document.documentElement.style.setProperty('--tabs-item-color', 'white')
-      znzs_option.value.series.label.show = false
-      znzs_option.value.xAxis.axisLabel.color = 'white'
-      znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
-      jyjyList.value.forEach((ele) => {
-        ele.imgUrl = ele.blackImgUrl
-      })
-      oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
-      if (markData) {
-        markData.data[0][1].label.rich.aa.color = 'white'
-        markData.data[1][1].label.rich.aaa.color = 'white'
-      }
-      if (markPoint) {
-        markPoint.data[0].label.color = 'white'
-        markPoint.data[1].label.color = 'white'
-      }
-      // 暗色
-    } else {
-      document.documentElement.style.setProperty('--tabs-item-color', 'rgb(100 108 154 / 60%)')
-      znzs_option.value.series.label.show = true
-      znzs_option.value.xAxis.axisLabel.color = '#C7CCD0'
-      znzs_option.value.xAxis.axisLine.lineStyle.color = 'white'
-      jyjyList.value.forEach((ele) => {
-        ele.imgUrl = ele.whiteImgUrl
-      })
-      oilGauge_line_option.value.color = ['#F2F4F5', '#3571FE']
-      if (markData) {
-        markData.data[0][1].label.rich.aa.color = 'rgba(100, 108, 154, 0.6)'
-        markData.data[1][1].label.rich.aaa.color = 'rgba(100, 108, 154, 0.6)'
-      }
-      if (markPoint) {
-        markPoint.data[0].label.color = 'rgba(100, 108, 154, 0.6)'
-        markPoint.data[1].label.color = 'rgba(100, 108, 154, 0.6)'
-      }
-    }
-  }
-)
-
-// 侦听是否为全屏，如果是就准备全屏需要echarts的变量
-watch(
-  () => isFullscreen.value,
-  (val) => {
-    if (val) {
-      if (!oilGauge_app_option.value) {
-        oilGauge_app_option.value = cloneDeep(oilGauge_option.value)
-        oilGauge_app_option.value.title[0].textStyle.rich.primary.fontSize = 24
-        oilGauge_app_option.value.title[0].textStyle.rich.point.padding = [5, -2, 0, -3]
-        oilGauge_app_option.value.series[0].radius = '100%'
-        oilGauge_app_option.value.series[0].splitLine.length = 15
-        oilGauge_app_option.value.series[0].splitLine.lineStyle.width = 2
-        oilGauge_app_option.value.series[0].pointer.length = '52%'
-        oilGauge_app_option.value.series[0].pointer.offsetCenter = [0, -15]
-        oilGauge_app_option.value.series[0].pointer.width = 3
-      }
-    }
-  },
-  { immediate: true }
-)
-
-const init = async () => {
-  let oneres = await batchGetTableList(
-    'example_overview_conversion,example_overview_merchant,example_overview_merchant_cou,example_overview_realtime_data,example_overview_intelligent_assistants,example_overview_pending,example_overview_service_notices'
-  )
-
-  conversion.value = oneres.example_overview_conversion.records[0]
-  oilGaugeValue.value = oneres.example_overview_conversion.records[0]?.fwzfzhl
-  merchantIntroduction.value = oneres.example_overview_merchant.records
-  sjjysl.value = oneres.example_overview_merchant_cou.records[0]?.cou
-  let realtimeData = oneres.example_overview_realtime_data.records[0]
-  let intelligentAssistants = oneres.example_overview_intelligent_assistants.records[0]
-  let overviewPending = oneres.example_overview_pending.records
-  initConversion(realtimeData)
-  initZnzs(intelligentAssistants)
-  numTop.value = '-' + overviewPending.length * 60 + 'px'
-  for (let i = 1; i <= overviewPending.length; i++) {
-    animationList.value.push(i)
-  }
-  animationList.value.reverse()
-  if (overviewPending.length > 3) {
-    overviewPendingLen.value = overviewPending.length - 3
-  }
-  znzsIntroduce.value = overviewPending.slice(0, 3)
-  fwtzList.value = oneres.example_overview_service_notices.records
-
-  let endres = await batchGetTableList(
-    'example_overview_rulescenter,example_overview_productnews,example_overview_learningcenter'
-  )
-  let rulescenter = endres.example_overview_rulescenter.records
-  let productnews = endres.example_overview_productnews.records
-  let learningcenter = endres.example_overview_learningcenter.records
-  rightList.value[0].content = rulescenter
-  rightList.value[0].totalTitle = '共计' + rulescenter.length + '条信息'
-  rightList.value[1].content = productnews
-  rightList.value[1].totalTitle = '共计' + productnews.length + '条信息'
-  rightList.value[2].content = learningcenter
-  rightList.value[2].totalTitle = '共计' + learningcenter.length + '条信息'
+const refreshData = async () => {
+  console.log('刷新数据')
+  await initOutsourcingData()
+  // TODO: 刷新其他数据
 }
 
-onMounted(() => {
-  switchMode()
-  init()
+// 初始化区域数据
+const initRegionData = async () => {
+  try {
+    const { records } = await getTableList('park_info_list')
+    if (records && records.length > 0) {
+      // 去重region字段，使用Map来确保唯一性
+      const regionMap = new Map<string, RegionItem>()
+      records.forEach((el: any) => {
+        if (!regionMap.has(el.region)) {
+          regionMap.set(el.region, {
+            name: el.region,
+            code: el.region_id
+          })
+        }
+      })
+      // 转换为数组
+      regionOption.value = Array.from(regionMap.values())
+    }
+  } catch (error) {
+    console.error('初始化区域数据失败:', error)
+  }
+}
+
+onMounted(async () => {
+  await initRegionData()
+  await initOutsourcingData()
+  // TODO: 初始化其他数据
 })
 </script>
 
 <style lang="scss" scoped>
-.shouye {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center;     /* 垂直居中 */
-  height: 300px; /* 父容器必须有高度（否则无法垂直居中） */
-}
-.shouye img {
+.dashboard-container {
+  width: 100%;
+  min-height: 100vh;
+  background: #f5f7fa;
+  padding: 20px;
+  box-sizing: border-box;
+
+  // 确保内容不会贴边
   max-width: 100%;
-  max-height: 100%;
-  margin-top: 20%;
+  overflow-x: hidden;
 }
 
-@keyframes slideBorder {
-  from {
-    width: 0;
-    transform: translateX(-100%);
-  }
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: white;
+  padding: 16px 24px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-  to {
-    width: 15px;
-    transform: translateX(-50%);
-  }
-}
+  .header-left {
+    flex: 1;
+    display: flex;
+    align-items: center;
 
-@keyframes znzsHoverAnimation {
-  from {
-    top: 0;
-  }
+    .back-button {
+      display: inline-flex;
+      align-items: center;
+      padding: 8px 16px;
+      background: #f3f4f6;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 14px;
+      color: #333;
+      user-select: none;
 
-  to {
-    top: v-bind('numTop');
-  }
-}
-
-@keyframes znzsNotHoverAnimation {
-  from {
-    top: -700px;
-  }
-
-  to {
-    top: 0;
-  }
-}
-
-@keyframes znzsBgHoverAnimation {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.big-radius {
-  border-radius: 15px;
-}
-
-.small-radius {
-  border-radius: 7px;
-}
-
-.nowrap {
-  white-space: nowrap;
-}
-
-.demonstration {
-  color: var(--el-text-color-secondary);
-}
-
-.el-carousel__item h3 {
-  margin: 0;
-  line-height: 150px;
-  color: #475669;
-  text-align: center;
-  opacity: 0.75;
-}
-
-.el-carousel__item:nth-child(2n) {
-  background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-  background-color: #d3dce6;
-}
-
-.text-white {
-  color: white;
-}
-
-.arrow-top {
-  width: 14px;
-  height: 14px;
-  background-color: #f2637b;
-  border-radius: 5px;
-  align-items: self-end;
-
-  .el-icon {
-    transform: scale(0.8);
-  }
-}
-
-.arrow-bottom {
-  width: 14px;
-  height: 14px;
-  background-color: #1dc9b7;
-  border-radius: 5px;
-
-  .el-icon {
-    transform: scale(0.8);
-  }
-}
-
-.active-conversion {
-  position: relative;
-  font-weight: bold;
-  color: rgb(51 112 255);
-
-  &::before {
-    position: absolute;
-    bottom: -5px;
-    left: 50%;
-    height: 2px;
-    background-color: #3370ff;
-    content: '';
-    animation: slideBorder 0.3s forwards;
-  }
-}
-
-.oilGauge_line {
-  position: relative;
-  width: calc(55% - 11px);
-  border-left: 1px solid #e6ebf2;
-
-  .oilGauge_line_echart {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-  }
-}
-
-.div_to_ul {
-  position: relative;
-
-  span:hover {
-    color: rgb(88 103 221);
-  }
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: -12px;
-    width: 5px;
-    height: 5px;
-    background-color: black;
-    border-radius: 50%;
-    content: '';
-    transform: translate(0, -50%);
-  }
-}
-
-.blue_box_shadow {
-  box-shadow: 0 3px 20px rgb(51 112 255 / 29.8%);
-}
-
-.animation-box {
-  position: relative;
-
-  .znzs-one {
-    border-radius: 50%;
-
-    &.hover {
-      animation: znzsBgHoverAnimation 3s forwards;
-    }
-  }
-
-  .znzs-two {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-
-    &.hover {
-      animation: znzsBgHoverAnimation 2s forwards;
-    }
-  }
-
-  .znzs-three {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19654.png');
-    background-size: 100%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-
-    &.hover {
-      animation: znzsBgHoverAnimation 1s forwards;
-    }
-  }
-
-  .znzs-four {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19655_2.png');
-    background-size: 100%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .znzs-xdcl {
-    position: absolute;
-    top: 70%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .znzs-ck {
-    position: absolute;
-    top: 47%;
-    left: 50%;
-    overflow: hidden;
-    transform: translate(-50%, -50%);
-
-    .znzs-sz {
-      position: absolute;
-      top: 0;
-      left: 0;
+      span {
+        margin-left: 8px;
+        font-size: 18px;
+        color: #6b7280;
+      }
 
       &:hover {
-        animation: znzsHoverAnimation 0.5s forwards;
+        background: #e5e7eb;
+        border-color: #d1d5db;
+      }
+
+      &:active {
+        transform: scale(0.98);
+      }
+    }
+  }
+
+  .header-title {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #1f2937;
+    margin: 0;
+  }
+
+  .header-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    min-width: 0; // 防止flex子元素溢出
+
+    .date-range-wrapper {
+      :deep(.el-date-editor) {
+        width: 280px;
+        max-width: 100%;
       }
     }
 
-    .znzs-sz.nothover {
-      animation: znzsNotHoverAnimation 0.5s forwards;
+    .refresh-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0; // 防止按钮被压缩
     }
   }
 }
 
-.znzs-tabs {
-  position: relative;
+.content-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-  .tabs-position-icon {
-    position: absolute;
-    top: 22px;
-    right: 0;
-    transform: translate(-50%, -50%);
+.card-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: 1400px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 16px;
   }
 }
 
-::v-deep(.el-tabs) {
-  .el-tabs__header {
-    margin-bottom: 0;
+.dashboard-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.3s;
 
-    .el-tabs__nav-wrap {
-      .el-tabs__nav-scroll {
-        .el-tabs__active-bar {
-          background-color: #3370ff;
-          transform: translateX(5px);
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e5e7eb;
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #1f2937;
+
+      .card-icon {
+        font-size: 18px;
+
+        &.warning {
+          color: #ef4444;
         }
-
-        .el-tabs__item {
-          $tabsItemColor: var(--tabs-item-color, rgb(100 108 154 / 60%));
-
-          padding: 0 5px;
-          font-size: 13px;
-          color: $tabsItemColor;
-
-          &:hover {
-            color: rgb(51 112 255);
-          }
-
-          &.is-active {
-            font-weight: bold;
-            color: #3370ff;
-          }
-        }
-      }
-
-      &::after {
-        height: 0;
-        // color:#326ffd13
       }
     }
+
+    .manage-btn {
+      color: #3b82f6;
+      padding: 4px 8px;
+      font-size: 14px;
+      transition: color 0.3s;
+
+      &:hover {
+        color: #2563eb;
+      }
+    }
+  }
+
+  .card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.donut-chart-wrapper,
+.line-chart-wrapper,
+.bar-chart-wrapper,
+.progress-chart-wrapper {
+  flex: 1;
+  min-height: 200px;
+}
+
+.region-distribution,
+.risk-distribution,
+.rectification-status,
+.operation-distribution,
+.regional-progress {
+  margin-top: 16px;
+
+  .distribution-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 12px;
+  }
+
+  .distribution-list,
+  .status-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .distribution-item,
+  .status-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #6b7280;
+    padding: 4px 0;
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .region-name,
+    .status-name {
+      flex: 1;
+      color: #374151;
+    }
+
+    .region-count,
+    .status-count {
+      color: #1f2937;
+      font-weight: 500;
+      margin-left: auto;
+    }
+
+    .region-percent {
+      color: #9ca3af;
+      margin-left: 4px;
+    }
+  }
+}
+
+.drill-info {
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+  padding: 12px;
+  background: #f0fdf4;
+  border-radius: 6px;
+
+  .drill-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    span:first-child {
+      font-size: 12px;
+      color: #6b7280;
+    }
+
+    .drill-number {
+      font-size: 18px;
+      font-weight: bold;
+      color: #059669;
+    }
+  }
+}
+
+.progress-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.progress-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+
+  .region-name {
+    width: 80px;
+    color: #374151;
+    flex-shrink: 0;
+  }
+
+  .progress-bar-wrapper {
+    flex: 1;
+    height: 8px;
+    background: #e5e7eb;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .progress-bar {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  .progress-percent {
+    width: 50px;
+    text-align: right;
+    color: #1f2937;
+    font-weight: 500;
+    flex-shrink: 0;
   }
 }
 </style>
diff --git a/src/views/Home/Index12.vue b/src/views/Home/Index12.vue
new file mode 100644
index 0000000..364b417
--- /dev/null
+++ b/src/views/Home/Index12.vue
@@ -0,0 +1,1800 @@
+<template>
+  <!-- <div v-if="false" class="w-100% flex gap-x-20px">
+    <div :class="selectByCond(appStore.getMobile, 'w-100%', 'w-80%')">
+      <div
+        class="h-260px flex pl-10px pt-10px mb-20px bg-white big-radius .dark:bg-#1A2744"
+        style="width: calc(100% - 10px)"
+      >
+        <div
+          class="bg-#3370FF w-45% pb-10px mr-10px flex big-radius blue_box_shadow pointer"
+          style="height: calc(100% - 20px)"
+        >
+          <div
+            :class="selectByCond(isFullscreen, 'w-40%  mr-9%', 'w-50%')"
+            class="pt-10px pb-10px pl-20px pr-20px"
+          >
+            <div class="text-white text-32px font-bold mb-5px nowrap">转化率</div>
+            <div
+              class="text-white text-14px flex items-center nowrap"
+              style="font-family: Arial, Helvetica, sans-serif"
+            >
+              {{ conversion?.sj }}
+              <div
+                class="w-15px h-15px bg-white rounded-md flex items-center justify-center ml-10px"
+              >
+                <Icon icon="bytesize:chevron-bottom" :size="12" class="text-black"></Icon>
+              </div>
+            </div>
+            <div class="mt-30px flex nowrap">
+              <div class="w-50% text-white b-l-0 b-t-0 b-b-0 b-r-1px b-#709BFF b-solid">
+                <div class="text-12px">成功客户数</div>
+                <div class="text-16px font-bold mt-5px">{{ conversion?.cgkhs }}</div>
+              </div>
+              <div class="w-50% text-white ml-30px">
+                <div class="text-12px">新增会员数</div>
+                <div class="text-16px font-bold mt-5px">{{ conversion?.xzhys }}</div>
+              </div>
+            </div>
+            <div
+              class="mt-30px flex bg-white h-49px pt-5px rounded-md text-blue-600 w-183px pl-20px .dark:bg-#1A2744"
+              style="align-items: baseline"
+            >
+              <span class="text-14px">客单价：</span>
+              <span class="text-32px font-bold ml-10px">{{ conversion?.kdj }}</span>
+            </div>
+          </div>
+          <div :class="selectByCond(isFullscreen, 'w-45% pl-5%', 'w-50%')">
+            <template v-if="isFullscreen">
+              <Echart :options="oilGauge_app_option" width="100%" height="250px" />
+            </template>
+            <template v-else>
+              <Echart :options="oilGauge_option" width="100%" height="250px" />
+            </template>
+          </div>
+        </div>
+        <div class="oilGauge_line .dark:b-#525C73">
+          <div
+            :class="selectByCond(appStore.getMobile, 'gap-x-5px', 'gap-x-20px')"
+            class="grid grid-cols-4 ml-20px"
+          >
+            <div
+              class="truncate flex-shrink-0"
+              v-for="item in ConversionList"
+              :key="item.titleCode"
+            >
+              <div class="flex" style="align-items: baseline">
+                <span
+                  :class="selectByCond(isFullscreen, 'text-16px', 'text-28px')"
+                  class="font-bold"
+                  >{{ item.nowNum }}</span
+                >
+                <template v-if="item.nowNum >= item.beforeNum">
+                  <div class="arrow-top flex justify-center ml-10px">
+                    <Icon icon="mdi:arrow-top-bold" class="text-white .dark:text-black"></Icon>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="arrow-bottom flex items-center justify-center ml-10px">
+                    <Icon icon="mdi:arrow-bottom-bold" class="text-white .dark:text-black"></Icon>
+                  </div>
+                </template>
+              </div>
+              <div class="text-14px mt-5px">
+                <span class="text-13px">/</span>
+                昨日：{{ item.beforeNum }}
+              </div>
+              <div class="mt-5px pb-5px">
+                <div
+                  :class="defaultConversion == item.titleCode ? 'active-conversion' : ''"
+                  class="text-14px c-#A2A7C2 cursor-pointer .dark:text-white"
+                  @click="clickSelectConversion(item.titleCode)"
+                  style="width: max-content"
+                >
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="oilGauge_line_echart">
+            <Echart :options="oilGauge_line_option" width="100%" height="150px" />
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-20px">
+        <div
+          class="h-390px w-50% p-10px mb-20px bg-white big-radius flex items-center .dark:bg-#1A2744"
+        >
+          <div class="w-100%">
+            <div class="h-150px text-25px flex items-center justify-center mb-20px">
+              <template v-if="typeof advertising == 'string'">
+                {{ advertising }}
+              </template>
+              <template v-else-if="typeof advertising == 'object'">
+                <el-carousel height="150px" class="w-100% rounded-xl">
+                  <el-carousel-item
+                    class="text-center"
+                    v-for="(item, index) in advertising"
+                    :key="index"
+                  >
+                    <el-image :src="item.imgUrl" class="h-100% w-100%" fit="cover"></el-image>
+                  </el-carousel-item>
+                </el-carousel>
+              </template>
+            </div>
+            <div class="pt-10px b-solid b-l-0 b-r-0 b-b-0 b-t-1px b-#5D677D">
+              <div class="flex">
+                <div>
+                  <span
+                    class="c-#FF0000 font-bold .dark:text-white"
+                    :class="
+                      refineSelectByCond(
+                        'text-9px',
+                        'text-12px',
+                        ''
+                      )
+                    "
+                  >
+                    某赞商家&thinsp;&thinsp;<span class="c-#ED6A0C font-bold .dark:text-white"
+                      >不打烊</span
+                    >
+                  </span>
+                </div>
+                <div
+                  class="flex items-center ml-20px pl-20px b-solid b-t-0 b-r-0 b-b-0 b-l-2px b-#EEF1FF"
+                >
+                  <el-avatar src="/img/avatar1.png" size="small" />
+                  <span class="c-#FF0000 font-bold text-13px ml-10px .dark:text-white">
+                    某赞护航
+                    <span class="ml-15px font-100">为你的生意保驾护航</span>
+                  </span>
+                </div>
+              </div>
+              <div class="h-155px flex mt-20px bg-#EEF1FF small-radius .dark:bg-black">
+                <div
+                  :class="selectByCond(appStore.getMobile, 'w-50%', 'w-65%')"
+                  class="h-100% flex items-center"
+                >
+                  <div
+                    class="text-12px h-90% flex justify-center p-l-25px"
+                    style="flex-direction: column"
+                  >
+                    <div
+                      v-for="(item, index) in merchantIntroduction"
+                      :key="item.title + index"
+                      class="flex-auto flex items-center div_to_ul"
+                    >
+                      <span class="mr-10px shrink-0 w-50px">{{ item.title }}</span>
+                      <span
+                        :class="
+                          refineSelectByCond(
+                            'w-75px',
+                            'w-100px',
+                            'w-170px'
+                          )
+                        "
+                        class="truncate b-solid b-t-0 b-r-0 b-b-0 b-l-1px b-#E0E6ED pl-10px"
+                      >
+                        {{ item.content }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="w-35% bg-#3370FF m-10px p-20px small-radius cursor-pointer c-white blue_box_shadow"
+                >
+                  <div class="text-11px"> 查看全部经验建议 </div>
+                  <div class="text-32px h-60px" style="line-height: 60px"> {{ sjjysl }} </div>
+                  <div class="text-13px flex items-center">
+                    /家商家已学习
+                    <Icon icon="si:arrow-right-fill" :size="24" class="ml-auto"></Icon>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="h-390px w-50% p-10px mb-20px bg-white big-radius .dark:bg-#1A2744">
+          <div class="p-10px flex" style="height: calc(100% - 20px)">
+            <div class="w-180px">
+              <div class="font-bold text-22px"> 智能助手 </div>
+              <div class="c-#A2A7C2 text-13px mt-5px .dark:text-white">
+                感受下某赞黑科技的力量
+              </div>
+              <div class="w-180px h-180px animation-box mt-30px">
+                <div
+                  class="znzs-one w-180px h-180px bg-#f8f8fd .dark:bg-#56607A"
+                  :class="znzsType == 'hover' ? 'hover' : ''"
+                >
+                </div>
+                <div
+                  class="znzs-two w-150px h-150px bg-#e8eafb .dark:bg-#9098B4"
+                  :class="znzsType == 'hover' ? 'hover' : ''"
+                >
+                </div>
+                <div class="znzs-three w-130px h-130px" :class="znzsType == 'hover' ? 'hover' : ''">
+                </div>
+                <div class="znzs-four w-110px h-110px"> </div>
+                <div class="znzs-xdcl text-13px text-white">项待处理 </div>
+                <div class="znzs-ck pointer w-60px h-60px c-white text-52px font-bold text-center">
+                  <div
+                    class="znzs-sz h-300px w-100%"
+                    :class="znzsType == 'nothover' ? 'nothover' : ''"
+                    @mouseover="znzsMouseover"
+                    @mouseout="znzsMouseout"
+                  >
+                    <div
+                      class="h-60px"
+                      style="line-height: 60px"
+                      v-for="item in animationList"
+                      :key="item"
+                    >
+                      {{ item }}
+                    </div>
+                    <div class="h-76px" style="line-height: 60px">
+                      <Icon icon="charm:chevrons-up" :size="36" class=""></Icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="flex justify-center mt-50px">
+                <div
+                  class="w-140px h-40px text-14px flex items-center justify-center cursor-pointer bg-#3370FF c-white small-radius"
+                >
+                  去解决掉TA
+                </div>
+              </div>
+            </div>
+            <div class="h-100% znzs-tabs ml-10px" style="width: calc(100% - 180px)">
+              <div class="w-80%">
+                <el-tabs v-model="activeName" class="" @tab-click="handleClick">
+                  <el-tab-pane label="全部" name="1"></el-tab-pane>
+                  <el-tab-pane label="店铺基础" name="2"></el-tab-pane>
+                  <el-tab-pane label="商品体验" name="3"></el-tab-pane>
+                  <el-tab-pane label="物流体验" name="4"></el-tab-pane>
+                </el-tabs>
+              </div>
+              <div class="tabs-position-icon">
+                <Icon icon="material-symbols:menu" :size="26"></Icon>
+              </div>
+              <div>
+                <Echart
+                  :options="znzs_option"
+                  :width="
+                    refineSelectByCond('150px', '250px', '300px')
+                  "
+                  height="190px"
+                />
+              </div>
+              <div class="grid grid-rows-3 text-11px gap-y-20px mt-20px">
+                <div
+                  v-for="(item, index) in znzsIntroduce"
+                  :key="item.xxnra + index"
+                  class="flex items-center"
+                >
+                  <template v-if="item.jjcd == 1">
+                    <el-image src="/img/hq1.png" fit="contain" class="h-15px"></el-image>
+                  </template>
+                  <template v-else-if="item.jjcd == 0">
+                    <el-image src="/img/lq1.png" fit="contain" class="h-15px"></el-image>
+                  </template>
+                  <div
+                    class="ml-15px flex truncate"
+                    :class="
+                      refineSelectByCond(
+                        'w-80px',
+                        'w-180px',
+                        'w-190px'
+                      )
+                    "
+                  >
+                    <div class="truncate" style="max-width: 100%; flex-shrink: 0">
+                      {{ item.xxnra }}
+                    </div>
+                    <div v-if="item.xxnrb" class="c-#C7CCD0 ml-5px truncate .dark:text-white">
+                      {{ item.xxnrb }}</div
+                    >
+                  </div>
+                  <span class="ml-auto c-#3370FF cursor-pointer .dark:text-white">
+                    {{ item.btname }}
+                  </span>
+                </div>
+              </div>
+              <div class="mt-20px text-11px c-#3370FF cursor-pointer .dark:text-white">
+                还有 {{ overviewPendingLen }} 条内容，查看全部内容
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-30px">
+        <div
+          :class="
+            refineSelectByCond(
+              'w-90% h-85px gap-x-10px',
+              'w-93% h-85px gap-x-30px',
+              'w-95% h-115px gap-x-30px'
+            )
+          "
+          class="mb-20px big-radius flex"
+        >
+          <div
+            class="flex-shrink-0 bg-#1DC9B7 small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(29 201 183 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >微信小程序</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >抢占微信设计流量红利</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div class="flex-shrink-0 bg-#3370FF blue_box_shadow small-radius c-white">
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >百度小程序</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >打造商家新官网</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex-shrink-0 bg-#C227FC small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(194 39 252 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >分销市场</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >一键上架，快速补充货源</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/fxsc.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex-shrink-0 bg-#F2637B small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(242 99 123 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >多人拼团</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >裂变式营销玩法</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/pin.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          :class="
+            refineSelectByCond(
+              'w-7% h-85px',
+              'w-6% h-85px',
+              'w-5% pr-10px pl-10px h-115px'
+            )
+          "
+          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+        >
+          <div
+            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
+            class="w-50% h-100% mt-10px cursor-pointer text-center"
+          >
+            更多最新推荐
+            <Icon
+              icon="pepicons-pop:arrow-left"
+              :size="selectByCond(appStore.getMobile, '18', '24')"
+            ></Icon>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-30px">
+        <div
+          :class="
+            refineSelectByCond(
+              'w-7% h-85px',
+              'w-6% h-85px',
+              'w-5% pr-10px pl-10px h-115px'
+            )
+          "
+          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+        >
+          <div
+            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
+            class="w-50% h-100% mt-10px cursor-pointer text-center"
+          >
+            全部经营建议
+            <Icon
+              icon="pepicons-pop:arrow-right"
+              :size="selectByCond(appStore.getMobile, '18', '24')"
+            ></Icon>
+          </div>
+        </div>
+        <div
+          :class="
+            refineSelectByCond(
+              'w-90% h-85px gap-x-10px',
+              'w-93% h-85px gap-x-30px',
+              'w-95% h-115px gap-x-30px'
+            )
+          "
+          class="mb-20px big-radius flex"
+        >
+          <div
+            v-for="(item, index) in jyjyList"
+            :key="item.title + index"
+            class="w-100% bg-white small-radius .dark:bg-#1A2744"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-25%">
+                <el-image :src="item.imgUrl" fit="contain" />
+              </div>
+              <div class="w-75% ml-5px">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >{{ item.title }}</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-10px',
+                      'text-12px'
+                    )
+                  "
+                  class="c-#A2A7C2 truncate .dark:text-white"
+                  >{{ item.introduction }}</div
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% mb-20px">
+        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
+          <div class="font-bold text-24px"> 学习交流 </div>
+          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white">
+            成长必经之路，好好看，好好学...
+          </div>
+          <div class="w-85% mt-20px flex">
+            <div class="w-100% grid gap-x-30px gap-y-20px grid-cols-3">
+              <div
+                class="pl-10px h-66px flex items-center bg-#EEF1FF small-radius .dark:bg-black"
+                v-for="(item, index) in learningExchangeList"
+                :key="index"
+              >
+                <div class="w-25%">
+                  <el-image :src="item.imgUrl" fit="contain" />
+                </div>
+                <div class="w-75%">
+                  <div class="font-bold mb-5px">{{ item.title }}</div>
+                  <div class="text-12px c-#A2A7C2 truncate .dark:text-white">{{
+                    item.introduce
+                  }}</div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="h-150px w-60px pr-10px pl-10px ml-30px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+            >
+              <div class="w-50% h-100% mt-10px leading-8 cursor-pointer">
+                更多渠道学习
+                <Icon icon="pepicons-pop:arrow-left" :size="24"></Icon>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100%">
+        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
+          <div class="font-bold text-24px"> 更多服务 </div>
+          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white"> 想要找找其他的服务 </div>
+          <div class="flex h-130px mt-30px">
+            <div class="grid grid-cols-5 grid-rows-1 h-100%">
+              <div
+                v-for="(item, index) in moreServicesList"
+                :key="item.title + index"
+                class="bg-#EEF1FF small-radius mr-20px h-130px flex items-center justify-center .dark:bg-black"
+                style="flex-direction: column; min-width: 90px"
+              >
+                <div class="">
+                  <el-image :src="item.imgUrl" fit="contain" />
+                </div>
+                <div class="font-bold mt-15px"> {{ item.title }} </div>
+              </div>
+            </div>
+            <div
+              class="w-70px h-100% pr-5px pl-5px bg-#3370FF blue_box_shadow small-radius text-white text-12px"
+            >
+              <div class="ml-10px mr-10px h-100% mt-10px leading-8 text-center cursor-pointer">
+                或者没你想要的？联系我
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-if="!appStore.getMobile">
+      <div class="w-20% flex-shrink-0">
+        <div class="w-100%">
+          <div
+            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+          >
+            <div class="w-100%">
+              <div class="text-21px font-bold"> 如果你需要帮助 </div>
+              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white"> 随时呼叫我... </div>
+              <div class="w-100%">
+                <div
+                  class="h-60px mb-15px bg-#EEF1FF small-radius flex items-center pl-10px pr-10px .dark:bg-black"
+                  v-for="(item, index) in bzList"
+                  :key="item.title + index"
+                >
+                  <el-image :src="item.imgUrl" fit="contain" class="h-30px" />
+                  <div class="ml-15px">
+                    <div class="text-14px font-bold">{{ item.title }}</div>
+                    <div class="c-#A2A7C2 text-11px .dark:text-white">{{ item.introduction }}</div>
+                  </div>
+                  <Icon
+                    icon="pepicons-pop:arrow-right"
+                    :size="24"
+                    class="ml-auto cursor-pointer"
+                  ></Icon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+          >
+            <div class="w-100%">
+              <div class="text-21px font-bold"> 有你的服务通知 </div>
+              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white">
+                随时关注动态...
+              </div>
+              <div class="w-100% grid gap-y-15px">
+                <div
+                  class="bg-#EEF1FF small-radius p-10px pt-13px pb-13px .dark:bg-black"
+                  v-for="(item, index) in fwtzList"
+                  :key="index"
+                >
+                  <div class="font-bold"> {{ item.title }} </div>
+                  <div class="c-#A2A7C2 text-12px mt-5px .dark:text-white">
+                    {{ item.content }}
+                  </div>
+                  <div class="flex justify-center mt-10px">
+                    <div class="flex justify-between text-12px c-#3370FF w-60% .dark:text-white">
+                      <div class="cursor-pointer">查看详情</div>
+                      <div class="cursor-pointer">我知道了</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <template v-for="(item, index) in rightList" :key="item.title + index">
+            <div
+              :class="item.h == '210' ? 'h-210px' : 'h-240px'"
+              class="p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+            >
+              <div class="w-100%">
+                <div class="text-23px font-bold"> {{ item.title }} </div>
+                <div class="text-14px c-#3370FF mt-5px mb-15px cursor-pointer .dark:text-white">
+                  查看全部
+                </div>
+                <div class="w-100%">
+                  <div
+                    class="bg-#EEF1FF small-radius p-10px h-130px .dark:bg-black"
+                    style="width: calc(100% - 20px)"
+                  >
+                    <div class="font-bold mb-15px">{{ item.totalTitle }}</div>
+                    <div class="c-#A2A7C2 w-100% text-11px grid grid-rows-4">
+                      <div
+                        v-for="(cItem, cIndex) in item.content"
+                        :key="cItem.title + cIndex"
+                        class="mb-5px cursor-pointer .dark:text-white"
+                        :class="cItem.type == 'success' ? 'c-#F2637B' : 'flex'"
+                      >
+                        {{ cItem.title }}
+                        <div v-if="cItem.type == 'info'" class="ml-auto">
+                          <Icon icon="mingcute:right-line" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div> -->
+  <div class="shouye">
+    <img  src="@/assets/imgs/souye.png" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '@/components/Icon/src/Icon.vue'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markPoint'
+import type { TabsPaneContext } from 'element-plus'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useAppStore } from '@/store/modules/app'
+import { getTableList, batchGetTableList } from '@/api/design/report'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'Home10' })
+
+interface Advertising {
+  imgUrl: string
+}
+interface ZnzsIntroduce {
+  jjcd: number
+  xxnra: string
+  xxnrb?: string
+  btname?: string
+}
+interface FwtzList {
+  content: string
+  title: string
+}
+interface RightListContent {
+  type: string
+  title: string
+}
+interface RightList {
+  title: string
+  h: string
+  totalTitle?: string
+  content?: RightListContent[]
+}
+interface MerchantIntroduction {
+  title: string
+  content: string
+}
+
+const appStore = useAppStore()
+// 是否全屏
+const isFullscreen = computed(() =>appStore.getFullscreen);
+
+// type为true返回classOne，反之返回classTwo
+const selectByCond = (type, classOne, classTwo) => {
+  if (typeof type === 'boolean' && type) {
+    return classOne
+  } else {
+    return classTwo
+  }
+}
+
+const refineSelectByCond = (isFullscreenClsss, mobileClass, otherClass) => {
+  if (isFullscreen.value) {
+    return isFullscreenClsss
+  } else if (appStore.getMobile) {// 判断是否手机端
+    return mobileClass
+  } else {
+    return otherClass
+  }
+}
+
+const conversion = ref({
+  cgkhs: 0,
+  sj: '',
+  kdj: 0,
+  xzhys: 0
+})
+
+const oilGaugeValue = ref(45)
+const oilGaugeCode = ref('%')
+const oilGaugeSubtext = ref('访问-支付转化率')
+const oilGaugemax = ref(100)
+
+// 访问-支付转化率
+const oilGauge_app_option = ref<any>()
+const oilGauge_option = ref({
+  title: [
+    {
+      text: `{primary|${oilGaugeValue.value}}\t{point|${oilGaugeCode.value}}`,
+      left: 'center',
+      top: 'center',
+      textStyle: {
+        rich: {
+          primary: {
+            color: 'white',
+            fontWeight: 'bold',
+            fontSize: 32,
+            lineHeight: 67.2
+          },
+          point: {
+            fontSize: 12,
+            lineHeight: 22,
+            color: 'white',
+            padding: [10, -10, 0, -5]
+          }
+        }
+      }
+    },
+    {
+      left: 'center',
+      top: '70%',
+      subtext: `${oilGaugeSubtext.value}`,
+      subtextStyle: {
+        color: 'white',
+        fontSize: 12
+      }
+    }
+  ],
+  angleAxis: {
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 6.666,
+    startAngle: 225
+  },
+  radiusAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    data: ['a', 'b', 'c'],
+    z: 10
+  },
+  polar: {
+    radius: '105%'
+  },
+  series: [
+    {
+      type: 'gauge',
+      splitNumber: 20,
+      max: oilGaugemax.value,
+      radius: '75%',
+      detail: {
+        show: false
+      },
+      axisLine: {
+        // 坐标轴线
+        show: false,
+        lineStyle: {
+          color: [
+            [0, '#ADC6FF'],
+            [1, '#ADC6FF']
+          ],
+          width: 0,
+          opacity: 0
+        }
+      },
+      data: [
+        {
+          name: '',
+          value: oilGaugeValue.value
+        }
+      ],
+      splitLine: {
+        length: 20, //长刻度节点线长度
+        lineStyle: {
+          width: 4,
+          color: '#ADC6FF'
+        } //刻度节点线
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false,
+        color: '#333',
+        fontSize: 18
+      },
+      pointer: {
+        show: true,
+        icon: 'roundRect',
+        length: '60%',
+        offsetCenter: [0, -25],
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'white'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 255, 255, 0)'
+              }
+            ]
+          },
+          opacity: 0.9
+        }
+      }
+    }
+  ],
+  tooltip: {
+    show: false
+  }
+})
+
+// 折线图
+const goTo = ref<number[]>([])
+const goOut = ref<number[]>([])
+const oilGaugeLineXAxis = ref<string[]>([])
+const showoilGaugeLineLable = ref('')
+const ConversionList = ref([
+  { nowNum: 0, beforeNum: 0, title: '支付金额', titleCode: 'zfje' },
+  { nowNum: 0, beforeNum: 0, title: '支付订单', titleCode: 'zfdd' },
+  { nowNum: 0, beforeNum: 0, title: '浏览量', titleCode: 'lll' },
+  { nowNum: 0, beforeNum: 0, title: '访客数', titleCode: 'fks' }
+])
+const defaultConversion = ref('')
+let oilGaugeMarkPoint = computed(() => {
+  let str = {
+    goTo: ['1', goTo.value[0] || 0],
+    goOut: ['1', goOut.value[0] || 0]
+  }
+  return str
+})
+const oilGauge_line_option = ref<any>({
+  color: ['#F2F4F5', '#3571FE'],
+  grid: {
+    top: '15%',
+    bottom: '0',
+    left: '0',
+    right: '0'
+  },
+  xAxis: [
+    {
+      show: false,
+      boundaryGap: false,
+      data: oilGaugeLineXAxis.value
+    }
+  ],
+  yAxis: [
+    {
+      show: false
+    }
+  ],
+  series: [
+    {
+      name: '昨天',
+      type: 'line',
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2
+        }
+      },
+      data: goTo.value,
+      silent: true
+    },
+    {
+      name: '今天',
+      type: 'line',
+      symbol: 'circle',
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 3
+        }
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#326ffd5f' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#326ffd13' // 100% 处的颜色
+            }
+          ],
+          global: false // 缺省为 false
+        }
+      },
+      data: goOut.value,
+      silent: true
+    },
+    {
+      type: 'line',
+      data: [],
+      markLine: {
+        symbol: 'none',
+        lineStyle: {
+          type: 'dashed'
+        },
+        data: [
+          [
+            {
+              xAxis: 0,
+              yAxis: 0
+            },
+            {
+              xAxis: 0,
+              yAxis: 0,
+              label: {
+                formatter: `{aa|${showoilGaugeLineLable.value}}`,
+                rich: {
+                  aa: {
+                    color: 'rgba(100, 108, 154, 0.6)',
+                    fontSize: 12
+                  }
+                }
+              }
+            }
+          ],
+          [
+            {
+              xAxis: 0,
+              yAxis: 0
+            },
+            {
+              xAxis: 0,
+              yAxis: 0,
+              label: {
+                formatter: `{aaa|}`,
+                rich: {
+                  aaa: {
+                    color: 'rgba(100, 108, 154, 0.6)',
+                    fontSize: 12
+                  }
+                }
+              }
+            }
+          ]
+        ]
+      },
+      markPoint: {
+        data: [
+          {
+            coord: oilGaugeMarkPoint.value['goTo'],
+            symbol: 'circle',
+            symbolSize: 16,
+            label: {
+              formatter: '昨日',
+              color: 'rgba(100, 108, 154, 0.6)',
+              offset: [20, -10]
+            },
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0)'
+            }
+          },
+          {
+            coord: oilGaugeMarkPoint.value['goOut'],
+            symbol: 'circle',
+            symbolSize: 16,
+            label: {
+              formatter: '今日',
+              color: '#3571FE',
+              offset: [20, -10]
+            },
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0)',
+              silent: true
+            }
+          }
+        ]
+      },
+      silent: true
+    }
+  ]
+})
+const initConversion = (realtimeData) => {
+  if (!realtimeData) return
+  ConversionList.value.forEach((ele) => {
+    ele.nowNum = realtimeData[ele.titleCode].jr
+    ele.beforeNum = realtimeData[ele.titleCode].zr
+    realtimeData[ele.titleCode].flag == 1
+      ? (defaultConversion.value = ele.titleCode)
+      : (defaultConversion.value = 'zfje')
+  })
+
+  realtimeData.data.forEach((ele) => {
+    goTo.value.push(ele.zr)
+    oilGaugeLineXAxis.value.push(ele.sj)
+    if (ele.jr) goOut.value.push(ele.jr)
+  })
+
+  let goOutLength = goOut.value.length - 1
+  let nowGoOut = goOut.value[goOutLength]
+  let nowGoTo = goTo.value[goOutLength]
+
+  nowGoOut < nowGoTo
+    ? (showoilGaugeLineLable.value = '加把劲，就上去了...')
+    : (showoilGaugeLineLable.value = '')
+  const series2 = oilGauge_line_option.value.series[2]
+
+  series2.markLine.data[0][0].xAxis = goOutLength
+  series2.markLine.data[0][1].xAxis = goOutLength
+  series2.markLine.data[0][1].yAxis = nowGoOut
+  series2.markLine.data[0][1].label.formatter = `{aa|${showoilGaugeLineLable.value}}`
+  series2.markLine.data[1][1].label.formatter = `{aaa|更新时间：${realtimeData.gxsj}}`
+  series2.markLine.data[1][0].xAxis = goOutLength
+  series2.markLine.data[1][1].xAxis = goOutLength
+  series2.markLine.data[1][1].yAxis = nowGoOut + nowGoTo + 20
+  series2.markPoint.data[0].coord = oilGaugeMarkPoint.value.goTo
+  series2.markPoint.data[1].coord = oilGaugeMarkPoint.value.goOut
+}
+const clickSelectConversion = async (val) => {
+  let res = await getTableList('example_overview_realtime_data', { type: 3 })
+  goTo.value = []
+  goOut.value = []
+  oilGaugeLineXAxis.value = []
+  initConversion(res.records[0])
+  defaultConversion.value = val
+}
+
+const moreServicesList = ref([
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '零售'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '教育'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '美业'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '某赞精选'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '我要推广'
+  }
+])
+
+const learningExchangeList = ref([
+  {
+    title: '商家论坛',
+    introduce: '百万商家互通互助',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '线下培训',
+    introduce: '点击查看全国活动',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '服务市场',
+    introduce: '服务商帮你经营',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '在线课堂',
+    introduce: '资深专家视频授课',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '本地商盟',
+    introduce: '加入本地商家联盟',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '定制服务',
+    introduce: '定制开发专享功能',
+    imgUrl: '/img/xxjl.png'
+  }
+])
+
+const rightList = ref<RightList[]>([
+  {
+    title: '规则中心',
+    h: '210'
+  },
+  {
+    title: '产品动态',
+    h: '240'
+  },
+  {
+    title: '学习中心',
+    h: '240'
+  }
+])
+
+// 广告区域
+// const advertising = ref<string | Advertising[]>('广告banner')
+const advertising = ref<string | Advertising[]>([{ imgUrl: '/img/sygl1.png' }])
+const sjjysl = ref('')
+
+const merchantIntroduction = ref<MerchantIntroduction[]>()
+
+const jyjyList = ref([
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitelltz.png',
+    blackImgUrl: '/img/blacklltz.png',
+    title: '流量拓展',
+    introduction: '小程序分享至朋友圈'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitehyzm.png',
+    blackImgUrl: '/img/blackhyzm.png',
+    title: '会员招募',
+    introduction: 'App端支持办理会员卡'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitefyzd.png',
+    blackImgUrl: '/img/blackfyzd.png',
+    title: '费用账单',
+    introduction: '便捷管理店铺账目收支'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitesptg.png',
+    blackImgUrl: '/img/blacksptg.png',
+    title: '商品推广',
+    introduction: '多平台推广商品类目信息'
+  }
+])
+
+const bzList = ref([
+  {
+    imgUrl: '/img/zxkf.png',
+    title: '在线客服',
+    introduction: '电话：057 - 8888 8888'
+  },
+  {
+    imgUrl: '/img/zmkf.png',
+    title: '桌面在线客服',
+    introduction: '即时应答客户在线咨询'
+  },
+  {
+    imgUrl: '/img/sjkf.png',
+    title: '移动客户端',
+    introduction: '使用手机、Pad管理店铺'
+  }
+])
+
+const znzsType = ref('hover')
+const znzsMouseover = () => {
+  znzsType.value = 'hover'
+}
+const znzsMouseout = () => {
+  znzsType.value = 'nothover'
+}
+const activeName = ref('1')
+const initZnzs = (data) => {
+  if (!data) return
+  znzsSeries.value = [data.dfhdd, data.dhfkf, data.yzxsp, data.dtkdd, data.pdzkh]
+  znzs_option.value.series.data = znzsSeries.value
+}
+// 点击智能助手tabs事件
+const handleClick = async (tab: TabsPaneContext, event: Event) => {
+  let res = await getTableList('example_overview_intelligent_assistants', {
+    type: tab.props.name
+  })
+  initZnzs(res.records[0])
+}
+const znzsSeries = ref<number[]>([])
+const znzs_option = ref({
+  grid: {
+    left: '0',
+    right: '0',
+    bottom: '20%',
+    top: '12%'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['待发货订单', '待回复客服', '已滞销商品', '待退款订单', '排队中客户'],
+    axisLine: {
+      lineStyle: {
+        color: 'white'
+      }
+    },
+    axisLabel: {
+      color: '#C7CCD0', // x轴颜色
+      fontWeight: 'lighter',
+      fontSize: '9',
+      width: 30,
+      lineHeight: 13,
+      overflow: 'break'
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: [
+    {
+      show: false,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      }
+    }
+  ],
+  series: {
+    name: '系列一',
+    type: 'bar',
+    barWidth: '16',
+    itemStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: '#7523FD' },
+          { offset: 1, color: '#356DFF' }
+        ]
+      },
+      borderRadius: 2
+    },
+    label: {
+      show: true,
+      position: 'top',
+      color: 'black',
+      fontSize: 12
+    },
+    data: znzsSeries.value
+  }
+})
+
+const animationList = ref<number[]>([])
+const overviewPendingLen = ref(0)
+const znzsIntroduce = ref<ZnzsIntroduce[]>([])
+const numTop = ref('')
+
+const fwtzList = ref<FwtzList[]>([])
+
+const markData = oilGauge_line_option.value.series[2].markLine
+const markPoint = oilGauge_line_option.value.series[2].markPoint
+
+const switchMode = () => {
+  // 判断是否为暗色模式
+  const { wsCache } = useCache()
+  if (wsCache.get(CACHE_KEY.IS_DARK)) {
+    document.documentElement.style.setProperty('--tabs-item-color', 'white')
+    znzs_option.value.series.label.show = false
+    znzs_option.value.xAxis.axisLabel.color = 'white'
+    znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
+
+    jyjyList.value.forEach((ele) => {
+      ele.imgUrl = ele.blackImgUrl
+    })
+
+    oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
+    if (markData) {
+      markData.data[0][1].label.rich.aa.color = 'white'
+      markData.data[1][1].label.rich.aaa.color = 'white'
+    }
+    if (markPoint) {
+      markPoint.data[0].label.color = 'white'
+      markPoint.data[1].label.color = 'white'
+    }
+  } else {
+    jyjyList.value.forEach((ele) => {
+      ele.imgUrl = ele.whiteImgUrl
+    })
+  }
+}
+
+watch(
+  () => appStore.isDark,
+  (val) => {
+    if (val) {
+      document.documentElement.style.setProperty('--tabs-item-color', 'white')
+      znzs_option.value.series.label.show = false
+      znzs_option.value.xAxis.axisLabel.color = 'white'
+      znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
+      jyjyList.value.forEach((ele) => {
+        ele.imgUrl = ele.blackImgUrl
+      })
+      oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
+      if (markData) {
+        markData.data[0][1].label.rich.aa.color = 'white'
+        markData.data[1][1].label.rich.aaa.color = 'white'
+      }
+      if (markPoint) {
+        markPoint.data[0].label.color = 'white'
+        markPoint.data[1].label.color = 'white'
+      }
+      // 暗色
+    } else {
+      document.documentElement.style.setProperty('--tabs-item-color', 'rgb(100 108 154 / 60%)')
+      znzs_option.value.series.label.show = true
+      znzs_option.value.xAxis.axisLabel.color = '#C7CCD0'
+      znzs_option.value.xAxis.axisLine.lineStyle.color = 'white'
+      jyjyList.value.forEach((ele) => {
+        ele.imgUrl = ele.whiteImgUrl
+      })
+      oilGauge_line_option.value.color = ['#F2F4F5', '#3571FE']
+      if (markData) {
+        markData.data[0][1].label.rich.aa.color = 'rgba(100, 108, 154, 0.6)'
+        markData.data[1][1].label.rich.aaa.color = 'rgba(100, 108, 154, 0.6)'
+      }
+      if (markPoint) {
+        markPoint.data[0].label.color = 'rgba(100, 108, 154, 0.6)'
+        markPoint.data[1].label.color = 'rgba(100, 108, 154, 0.6)'
+      }
+    }
+  }
+)
+
+// 侦听是否为全屏，如果是就准备全屏需要echarts的变量
+watch(
+  () => isFullscreen.value,
+  (val) => {
+    if (val) {
+      if (!oilGauge_app_option.value) {
+        oilGauge_app_option.value = cloneDeep(oilGauge_option.value)
+        oilGauge_app_option.value.title[0].textStyle.rich.primary.fontSize = 24
+        oilGauge_app_option.value.title[0].textStyle.rich.point.padding = [5, -2, 0, -3]
+        oilGauge_app_option.value.series[0].radius = '100%'
+        oilGauge_app_option.value.series[0].splitLine.length = 15
+        oilGauge_app_option.value.series[0].splitLine.lineStyle.width = 2
+        oilGauge_app_option.value.series[0].pointer.length = '52%'
+        oilGauge_app_option.value.series[0].pointer.offsetCenter = [0, -15]
+        oilGauge_app_option.value.series[0].pointer.width = 3
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const init = async () => {
+  let oneres = await batchGetTableList(
+    'example_overview_conversion,example_overview_merchant,example_overview_merchant_cou,example_overview_realtime_data,example_overview_intelligent_assistants,example_overview_pending,example_overview_service_notices'
+  )
+
+  conversion.value = oneres.example_overview_conversion.records[0]
+  oilGaugeValue.value = oneres.example_overview_conversion.records[0]?.fwzfzhl
+  merchantIntroduction.value = oneres.example_overview_merchant.records
+  sjjysl.value = oneres.example_overview_merchant_cou.records[0]?.cou
+  let realtimeData = oneres.example_overview_realtime_data.records[0]
+  let intelligentAssistants = oneres.example_overview_intelligent_assistants.records[0]
+  let overviewPending = oneres.example_overview_pending.records
+  initConversion(realtimeData)
+  initZnzs(intelligentAssistants)
+  numTop.value = '-' + overviewPending.length * 60 + 'px'
+  for (let i = 1; i <= overviewPending.length; i++) {
+    animationList.value.push(i)
+  }
+  animationList.value.reverse()
+  if (overviewPending.length > 3) {
+    overviewPendingLen.value = overviewPending.length - 3
+  }
+  znzsIntroduce.value = overviewPending.slice(0, 3)
+  fwtzList.value = oneres.example_overview_service_notices.records
+
+  let endres = await batchGetTableList(
+    'example_overview_rulescenter,example_overview_productnews,example_overview_learningcenter'
+  )
+  let rulescenter = endres.example_overview_rulescenter.records
+  let productnews = endres.example_overview_productnews.records
+  let learningcenter = endres.example_overview_learningcenter.records
+  rightList.value[0].content = rulescenter
+  rightList.value[0].totalTitle = '共计' + rulescenter.length + '条信息'
+  rightList.value[1].content = productnews
+  rightList.value[1].totalTitle = '共计' + productnews.length + '条信息'
+  rightList.value[2].content = learningcenter
+  rightList.value[2].totalTitle = '共计' + learningcenter.length + '条信息'
+}
+
+onMounted(() => {
+  switchMode()
+  init()
+})
+</script>
+
+<style lang="scss" scoped>
+.shouye {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+  height: 300px; /* 父容器必须有高度（否则无法垂直居中） */
+}
+.shouye img {
+  max-width: 100%;
+  max-height: 100%;
+  margin-top: 20%;
+}
+
+@keyframes slideBorder {
+  from {
+    width: 0;
+    transform: translateX(-100%);
+  }
+
+  to {
+    width: 15px;
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes znzsHoverAnimation {
+  from {
+    top: 0;
+  }
+
+  to {
+    top: v-bind('numTop');
+  }
+}
+
+@keyframes znzsNotHoverAnimation {
+  from {
+    top: -700px;
+  }
+
+  to {
+    top: 0;
+  }
+}
+
+@keyframes znzsBgHoverAnimation {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.big-radius {
+  border-radius: 15px;
+}
+
+.small-radius {
+  border-radius: 7px;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  margin: 0;
+  line-height: 150px;
+  color: #475669;
+  text-align: center;
+  opacity: 0.75;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+
+.text-white {
+  color: white;
+}
+
+.arrow-top {
+  width: 14px;
+  height: 14px;
+  background-color: #f2637b;
+  border-radius: 5px;
+  align-items: self-end;
+
+  .el-icon {
+    transform: scale(0.8);
+  }
+}
+
+.arrow-bottom {
+  width: 14px;
+  height: 14px;
+  background-color: #1dc9b7;
+  border-radius: 5px;
+
+  .el-icon {
+    transform: scale(0.8);
+  }
+}
+
+.active-conversion {
+  position: relative;
+  font-weight: bold;
+  color: rgb(51 112 255);
+
+  &::before {
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    height: 2px;
+    background-color: #3370ff;
+    content: '';
+    animation: slideBorder 0.3s forwards;
+  }
+}
+
+.oilGauge_line {
+  position: relative;
+  width: calc(55% - 11px);
+  border-left: 1px solid #e6ebf2;
+
+  .oilGauge_line_echart {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.div_to_ul {
+  position: relative;
+
+  span:hover {
+    color: rgb(88 103 221);
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: -12px;
+    width: 5px;
+    height: 5px;
+    background-color: black;
+    border-radius: 50%;
+    content: '';
+    transform: translate(0, -50%);
+  }
+}
+
+.blue_box_shadow {
+  box-shadow: 0 3px 20px rgb(51 112 255 / 29.8%);
+}
+
+.animation-box {
+  position: relative;
+
+  .znzs-one {
+    border-radius: 50%;
+
+    &.hover {
+      animation: znzsBgHoverAnimation 3s forwards;
+    }
+  }
+
+  .znzs-two {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &.hover {
+      animation: znzsBgHoverAnimation 2s forwards;
+    }
+  }
+
+  .znzs-three {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19654.png');
+    background-size: 100%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &.hover {
+      animation: znzsBgHoverAnimation 1s forwards;
+    }
+  }
+
+  .znzs-four {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19655_2.png');
+    background-size: 100%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .znzs-xdcl {
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .znzs-ck {
+    position: absolute;
+    top: 47%;
+    left: 50%;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+
+    .znzs-sz {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      &:hover {
+        animation: znzsHoverAnimation 0.5s forwards;
+      }
+    }
+
+    .znzs-sz.nothover {
+      animation: znzsNotHoverAnimation 0.5s forwards;
+    }
+  }
+}
+
+.znzs-tabs {
+  position: relative;
+
+  .tabs-position-icon {
+    position: absolute;
+    top: 22px;
+    right: 0;
+    transform: translate(-50%, -50%);
+  }
+}
+
+::v-deep(.el-tabs) {
+  .el-tabs__header {
+    margin-bottom: 0;
+
+    .el-tabs__nav-wrap {
+      .el-tabs__nav-scroll {
+        .el-tabs__active-bar {
+          background-color: #3370ff;
+          transform: translateX(5px);
+        }
+
+        .el-tabs__item {
+          $tabsItemColor: var(--tabs-item-color, rgb(100 108 154 / 60%));
+
+          padding: 0 5px;
+          font-size: 13px;
+          color: $tabsItemColor;
+
+          &:hover {
+            color: rgb(51 112 255);
+          }
+
+          &.is-active {
+            font-weight: bold;
+            color: #3370ff;
+          }
+        }
+      }
+
+      &::after {
+        height: 0;
+        // color:#326ffd13
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Home/Index13.vue b/src/views/Home/Index13.vue
new file mode 100644
index 0000000..364b417
--- /dev/null
+++ b/src/views/Home/Index13.vue
@@ -0,0 +1,1800 @@
+<template>
+  <!-- <div v-if="false" class="w-100% flex gap-x-20px">
+    <div :class="selectByCond(appStore.getMobile, 'w-100%', 'w-80%')">
+      <div
+        class="h-260px flex pl-10px pt-10px mb-20px bg-white big-radius .dark:bg-#1A2744"
+        style="width: calc(100% - 10px)"
+      >
+        <div
+          class="bg-#3370FF w-45% pb-10px mr-10px flex big-radius blue_box_shadow pointer"
+          style="height: calc(100% - 20px)"
+        >
+          <div
+            :class="selectByCond(isFullscreen, 'w-40%  mr-9%', 'w-50%')"
+            class="pt-10px pb-10px pl-20px pr-20px"
+          >
+            <div class="text-white text-32px font-bold mb-5px nowrap">转化率</div>
+            <div
+              class="text-white text-14px flex items-center nowrap"
+              style="font-family: Arial, Helvetica, sans-serif"
+            >
+              {{ conversion?.sj }}
+              <div
+                class="w-15px h-15px bg-white rounded-md flex items-center justify-center ml-10px"
+              >
+                <Icon icon="bytesize:chevron-bottom" :size="12" class="text-black"></Icon>
+              </div>
+            </div>
+            <div class="mt-30px flex nowrap">
+              <div class="w-50% text-white b-l-0 b-t-0 b-b-0 b-r-1px b-#709BFF b-solid">
+                <div class="text-12px">成功客户数</div>
+                <div class="text-16px font-bold mt-5px">{{ conversion?.cgkhs }}</div>
+              </div>
+              <div class="w-50% text-white ml-30px">
+                <div class="text-12px">新增会员数</div>
+                <div class="text-16px font-bold mt-5px">{{ conversion?.xzhys }}</div>
+              </div>
+            </div>
+            <div
+              class="mt-30px flex bg-white h-49px pt-5px rounded-md text-blue-600 w-183px pl-20px .dark:bg-#1A2744"
+              style="align-items: baseline"
+            >
+              <span class="text-14px">客单价：</span>
+              <span class="text-32px font-bold ml-10px">{{ conversion?.kdj }}</span>
+            </div>
+          </div>
+          <div :class="selectByCond(isFullscreen, 'w-45% pl-5%', 'w-50%')">
+            <template v-if="isFullscreen">
+              <Echart :options="oilGauge_app_option" width="100%" height="250px" />
+            </template>
+            <template v-else>
+              <Echart :options="oilGauge_option" width="100%" height="250px" />
+            </template>
+          </div>
+        </div>
+        <div class="oilGauge_line .dark:b-#525C73">
+          <div
+            :class="selectByCond(appStore.getMobile, 'gap-x-5px', 'gap-x-20px')"
+            class="grid grid-cols-4 ml-20px"
+          >
+            <div
+              class="truncate flex-shrink-0"
+              v-for="item in ConversionList"
+              :key="item.titleCode"
+            >
+              <div class="flex" style="align-items: baseline">
+                <span
+                  :class="selectByCond(isFullscreen, 'text-16px', 'text-28px')"
+                  class="font-bold"
+                  >{{ item.nowNum }}</span
+                >
+                <template v-if="item.nowNum >= item.beforeNum">
+                  <div class="arrow-top flex justify-center ml-10px">
+                    <Icon icon="mdi:arrow-top-bold" class="text-white .dark:text-black"></Icon>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="arrow-bottom flex items-center justify-center ml-10px">
+                    <Icon icon="mdi:arrow-bottom-bold" class="text-white .dark:text-black"></Icon>
+                  </div>
+                </template>
+              </div>
+              <div class="text-14px mt-5px">
+                <span class="text-13px">/</span>
+                昨日：{{ item.beforeNum }}
+              </div>
+              <div class="mt-5px pb-5px">
+                <div
+                  :class="defaultConversion == item.titleCode ? 'active-conversion' : ''"
+                  class="text-14px c-#A2A7C2 cursor-pointer .dark:text-white"
+                  @click="clickSelectConversion(item.titleCode)"
+                  style="width: max-content"
+                >
+                  {{ item.title }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="oilGauge_line_echart">
+            <Echart :options="oilGauge_line_option" width="100%" height="150px" />
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-20px">
+        <div
+          class="h-390px w-50% p-10px mb-20px bg-white big-radius flex items-center .dark:bg-#1A2744"
+        >
+          <div class="w-100%">
+            <div class="h-150px text-25px flex items-center justify-center mb-20px">
+              <template v-if="typeof advertising == 'string'">
+                {{ advertising }}
+              </template>
+              <template v-else-if="typeof advertising == 'object'">
+                <el-carousel height="150px" class="w-100% rounded-xl">
+                  <el-carousel-item
+                    class="text-center"
+                    v-for="(item, index) in advertising"
+                    :key="index"
+                  >
+                    <el-image :src="item.imgUrl" class="h-100% w-100%" fit="cover"></el-image>
+                  </el-carousel-item>
+                </el-carousel>
+              </template>
+            </div>
+            <div class="pt-10px b-solid b-l-0 b-r-0 b-b-0 b-t-1px b-#5D677D">
+              <div class="flex">
+                <div>
+                  <span
+                    class="c-#FF0000 font-bold .dark:text-white"
+                    :class="
+                      refineSelectByCond(
+                        'text-9px',
+                        'text-12px',
+                        ''
+                      )
+                    "
+                  >
+                    某赞商家&thinsp;&thinsp;<span class="c-#ED6A0C font-bold .dark:text-white"
+                      >不打烊</span
+                    >
+                  </span>
+                </div>
+                <div
+                  class="flex items-center ml-20px pl-20px b-solid b-t-0 b-r-0 b-b-0 b-l-2px b-#EEF1FF"
+                >
+                  <el-avatar src="/img/avatar1.png" size="small" />
+                  <span class="c-#FF0000 font-bold text-13px ml-10px .dark:text-white">
+                    某赞护航
+                    <span class="ml-15px font-100">为你的生意保驾护航</span>
+                  </span>
+                </div>
+              </div>
+              <div class="h-155px flex mt-20px bg-#EEF1FF small-radius .dark:bg-black">
+                <div
+                  :class="selectByCond(appStore.getMobile, 'w-50%', 'w-65%')"
+                  class="h-100% flex items-center"
+                >
+                  <div
+                    class="text-12px h-90% flex justify-center p-l-25px"
+                    style="flex-direction: column"
+                  >
+                    <div
+                      v-for="(item, index) in merchantIntroduction"
+                      :key="item.title + index"
+                      class="flex-auto flex items-center div_to_ul"
+                    >
+                      <span class="mr-10px shrink-0 w-50px">{{ item.title }}</span>
+                      <span
+                        :class="
+                          refineSelectByCond(
+                            'w-75px',
+                            'w-100px',
+                            'w-170px'
+                          )
+                        "
+                        class="truncate b-solid b-t-0 b-r-0 b-b-0 b-l-1px b-#E0E6ED pl-10px"
+                      >
+                        {{ item.content }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="w-35% bg-#3370FF m-10px p-20px small-radius cursor-pointer c-white blue_box_shadow"
+                >
+                  <div class="text-11px"> 查看全部经验建议 </div>
+                  <div class="text-32px h-60px" style="line-height: 60px"> {{ sjjysl }} </div>
+                  <div class="text-13px flex items-center">
+                    /家商家已学习
+                    <Icon icon="si:arrow-right-fill" :size="24" class="ml-auto"></Icon>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="h-390px w-50% p-10px mb-20px bg-white big-radius .dark:bg-#1A2744">
+          <div class="p-10px flex" style="height: calc(100% - 20px)">
+            <div class="w-180px">
+              <div class="font-bold text-22px"> 智能助手 </div>
+              <div class="c-#A2A7C2 text-13px mt-5px .dark:text-white">
+                感受下某赞黑科技的力量
+              </div>
+              <div class="w-180px h-180px animation-box mt-30px">
+                <div
+                  class="znzs-one w-180px h-180px bg-#f8f8fd .dark:bg-#56607A"
+                  :class="znzsType == 'hover' ? 'hover' : ''"
+                >
+                </div>
+                <div
+                  class="znzs-two w-150px h-150px bg-#e8eafb .dark:bg-#9098B4"
+                  :class="znzsType == 'hover' ? 'hover' : ''"
+                >
+                </div>
+                <div class="znzs-three w-130px h-130px" :class="znzsType == 'hover' ? 'hover' : ''">
+                </div>
+                <div class="znzs-four w-110px h-110px"> </div>
+                <div class="znzs-xdcl text-13px text-white">项待处理 </div>
+                <div class="znzs-ck pointer w-60px h-60px c-white text-52px font-bold text-center">
+                  <div
+                    class="znzs-sz h-300px w-100%"
+                    :class="znzsType == 'nothover' ? 'nothover' : ''"
+                    @mouseover="znzsMouseover"
+                    @mouseout="znzsMouseout"
+                  >
+                    <div
+                      class="h-60px"
+                      style="line-height: 60px"
+                      v-for="item in animationList"
+                      :key="item"
+                    >
+                      {{ item }}
+                    </div>
+                    <div class="h-76px" style="line-height: 60px">
+                      <Icon icon="charm:chevrons-up" :size="36" class=""></Icon>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="flex justify-center mt-50px">
+                <div
+                  class="w-140px h-40px text-14px flex items-center justify-center cursor-pointer bg-#3370FF c-white small-radius"
+                >
+                  去解决掉TA
+                </div>
+              </div>
+            </div>
+            <div class="h-100% znzs-tabs ml-10px" style="width: calc(100% - 180px)">
+              <div class="w-80%">
+                <el-tabs v-model="activeName" class="" @tab-click="handleClick">
+                  <el-tab-pane label="全部" name="1"></el-tab-pane>
+                  <el-tab-pane label="店铺基础" name="2"></el-tab-pane>
+                  <el-tab-pane label="商品体验" name="3"></el-tab-pane>
+                  <el-tab-pane label="物流体验" name="4"></el-tab-pane>
+                </el-tabs>
+              </div>
+              <div class="tabs-position-icon">
+                <Icon icon="material-symbols:menu" :size="26"></Icon>
+              </div>
+              <div>
+                <Echart
+                  :options="znzs_option"
+                  :width="
+                    refineSelectByCond('150px', '250px', '300px')
+                  "
+                  height="190px"
+                />
+              </div>
+              <div class="grid grid-rows-3 text-11px gap-y-20px mt-20px">
+                <div
+                  v-for="(item, index) in znzsIntroduce"
+                  :key="item.xxnra + index"
+                  class="flex items-center"
+                >
+                  <template v-if="item.jjcd == 1">
+                    <el-image src="/img/hq1.png" fit="contain" class="h-15px"></el-image>
+                  </template>
+                  <template v-else-if="item.jjcd == 0">
+                    <el-image src="/img/lq1.png" fit="contain" class="h-15px"></el-image>
+                  </template>
+                  <div
+                    class="ml-15px flex truncate"
+                    :class="
+                      refineSelectByCond(
+                        'w-80px',
+                        'w-180px',
+                        'w-190px'
+                      )
+                    "
+                  >
+                    <div class="truncate" style="max-width: 100%; flex-shrink: 0">
+                      {{ item.xxnra }}
+                    </div>
+                    <div v-if="item.xxnrb" class="c-#C7CCD0 ml-5px truncate .dark:text-white">
+                      {{ item.xxnrb }}</div
+                    >
+                  </div>
+                  <span class="ml-auto c-#3370FF cursor-pointer .dark:text-white">
+                    {{ item.btname }}
+                  </span>
+                </div>
+              </div>
+              <div class="mt-20px text-11px c-#3370FF cursor-pointer .dark:text-white">
+                还有 {{ overviewPendingLen }} 条内容，查看全部内容
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-30px">
+        <div
+          :class="
+            refineSelectByCond(
+              'w-90% h-85px gap-x-10px',
+              'w-93% h-85px gap-x-30px',
+              'w-95% h-115px gap-x-30px'
+            )
+          "
+          class="mb-20px big-radius flex"
+        >
+          <div
+            class="flex-shrink-0 bg-#1DC9B7 small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(29 201 183 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >微信小程序</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >抢占微信设计流量红利</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div class="flex-shrink-0 bg-#3370FF blue_box_shadow small-radius c-white">
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >百度小程序</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >打造商家新官网</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex-shrink-0 bg-#C227FC small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(194 39 252 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >分销市场</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >一键上架，快速补充货源</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/fxsc.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex-shrink-0 bg-#F2637B small-radius c-white"
+            style="box-shadow: 0 3px 20px rgb(242 99 123 / 29.8%)"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-75%">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >多人拼团</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-12px',
+                      'text-13px'
+                    )
+                  "
+                  class="truncate"
+                  >裂变式营销玩法</div
+                >
+              </div>
+              <div class="w-25%">
+                <el-image src="/img/pin.png" fit="contain" class="h-45px" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          :class="
+            refineSelectByCond(
+              'w-7% h-85px',
+              'w-6% h-85px',
+              'w-5% pr-10px pl-10px h-115px'
+            )
+          "
+          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+        >
+          <div
+            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
+            class="w-50% h-100% mt-10px cursor-pointer text-center"
+          >
+            更多最新推荐
+            <Icon
+              icon="pepicons-pop:arrow-left"
+              :size="selectByCond(appStore.getMobile, '18', '24')"
+            ></Icon>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% flex gap-x-30px">
+        <div
+          :class="
+            refineSelectByCond(
+              'w-7% h-85px',
+              'w-6% h-85px',
+              'w-5% pr-10px pl-10px h-115px'
+            )
+          "
+          class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+        >
+          <div
+            :class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
+            class="w-50% h-100% mt-10px cursor-pointer text-center"
+          >
+            全部经营建议
+            <Icon
+              icon="pepicons-pop:arrow-right"
+              :size="selectByCond(appStore.getMobile, '18', '24')"
+            ></Icon>
+          </div>
+        </div>
+        <div
+          :class="
+            refineSelectByCond(
+              'w-90% h-85px gap-x-10px',
+              'w-93% h-85px gap-x-30px',
+              'w-95% h-115px gap-x-30px'
+            )
+          "
+          class="mb-20px big-radius flex"
+        >
+          <div
+            v-for="(item, index) in jyjyList"
+            :key="item.title + index"
+            class="w-100% bg-white small-radius .dark:bg-#1A2744"
+          >
+            <div class="h-100% pl-20px pr-20px flex items-center">
+              <div class="w-25%">
+                <el-image :src="item.imgUrl" fit="contain" />
+              </div>
+              <div class="w-75% ml-5px">
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-12px',
+                      'text-20px',
+                      'text-24px'
+                    )
+                  "
+                  class="font-bold mb-10px"
+                  >{{ item.title }}</div
+                >
+                <div
+                  :class="
+                    refineSelectByCond(
+                      'text-6px',
+                      'text-10px',
+                      'text-12px'
+                    )
+                  "
+                  class="c-#A2A7C2 truncate .dark:text-white"
+                  >{{ item.introduction }}</div
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100% mb-20px">
+        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
+          <div class="font-bold text-24px"> 学习交流 </div>
+          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white">
+            成长必经之路，好好看，好好学...
+          </div>
+          <div class="w-85% mt-20px flex">
+            <div class="w-100% grid gap-x-30px gap-y-20px grid-cols-3">
+              <div
+                class="pl-10px h-66px flex items-center bg-#EEF1FF small-radius .dark:bg-black"
+                v-for="(item, index) in learningExchangeList"
+                :key="index"
+              >
+                <div class="w-25%">
+                  <el-image :src="item.imgUrl" fit="contain" />
+                </div>
+                <div class="w-75%">
+                  <div class="font-bold mb-5px">{{ item.title }}</div>
+                  <div class="text-12px c-#A2A7C2 truncate .dark:text-white">{{
+                    item.introduce
+                  }}</div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="h-150px w-60px pr-10px pl-10px ml-30px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
+            >
+              <div class="w-50% h-100% mt-10px leading-8 cursor-pointer">
+                更多渠道学习
+                <Icon icon="pepicons-pop:arrow-left" :size="24"></Icon>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-100%">
+        <div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
+          <div class="font-bold text-24px"> 更多服务 </div>
+          <div class="text-14px mt-5px c-#A2A7C2 .dark:text-white"> 想要找找其他的服务 </div>
+          <div class="flex h-130px mt-30px">
+            <div class="grid grid-cols-5 grid-rows-1 h-100%">
+              <div
+                v-for="(item, index) in moreServicesList"
+                :key="item.title + index"
+                class="bg-#EEF1FF small-radius mr-20px h-130px flex items-center justify-center .dark:bg-black"
+                style="flex-direction: column; min-width: 90px"
+              >
+                <div class="">
+                  <el-image :src="item.imgUrl" fit="contain" />
+                </div>
+                <div class="font-bold mt-15px"> {{ item.title }} </div>
+              </div>
+            </div>
+            <div
+              class="w-70px h-100% pr-5px pl-5px bg-#3370FF blue_box_shadow small-radius text-white text-12px"
+            >
+              <div class="ml-10px mr-10px h-100% mt-10px leading-8 text-center cursor-pointer">
+                或者没你想要的？联系我
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-if="!appStore.getMobile">
+      <div class="w-20% flex-shrink-0">
+        <div class="w-100%">
+          <div
+            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+          >
+            <div class="w-100%">
+              <div class="text-21px font-bold"> 如果你需要帮助 </div>
+              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white"> 随时呼叫我... </div>
+              <div class="w-100%">
+                <div
+                  class="h-60px mb-15px bg-#EEF1FF small-radius flex items-center pl-10px pr-10px .dark:bg-black"
+                  v-for="(item, index) in bzList"
+                  :key="item.title + index"
+                >
+                  <el-image :src="item.imgUrl" fit="contain" class="h-30px" />
+                  <div class="ml-15px">
+                    <div class="text-14px font-bold">{{ item.title }}</div>
+                    <div class="c-#A2A7C2 text-11px .dark:text-white">{{ item.introduction }}</div>
+                  </div>
+                  <Icon
+                    icon="pepicons-pop:arrow-right"
+                    :size="24"
+                    class="ml-auto cursor-pointer"
+                  ></Icon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+          >
+            <div class="w-100%">
+              <div class="text-21px font-bold"> 有你的服务通知 </div>
+              <div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white">
+                随时关注动态...
+              </div>
+              <div class="w-100% grid gap-y-15px">
+                <div
+                  class="bg-#EEF1FF small-radius p-10px pt-13px pb-13px .dark:bg-black"
+                  v-for="(item, index) in fwtzList"
+                  :key="index"
+                >
+                  <div class="font-bold"> {{ item.title }} </div>
+                  <div class="c-#A2A7C2 text-12px mt-5px .dark:text-white">
+                    {{ item.content }}
+                  </div>
+                  <div class="flex justify-center mt-10px">
+                    <div class="flex justify-between text-12px c-#3370FF w-60% .dark:text-white">
+                      <div class="cursor-pointer">查看详情</div>
+                      <div class="cursor-pointer">我知道了</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <template v-for="(item, index) in rightList" :key="item.title + index">
+            <div
+              :class="item.h == '210' ? 'h-210px' : 'h-240px'"
+              class="p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
+            >
+              <div class="w-100%">
+                <div class="text-23px font-bold"> {{ item.title }} </div>
+                <div class="text-14px c-#3370FF mt-5px mb-15px cursor-pointer .dark:text-white">
+                  查看全部
+                </div>
+                <div class="w-100%">
+                  <div
+                    class="bg-#EEF1FF small-radius p-10px h-130px .dark:bg-black"
+                    style="width: calc(100% - 20px)"
+                  >
+                    <div class="font-bold mb-15px">{{ item.totalTitle }}</div>
+                    <div class="c-#A2A7C2 w-100% text-11px grid grid-rows-4">
+                      <div
+                        v-for="(cItem, cIndex) in item.content"
+                        :key="cItem.title + cIndex"
+                        class="mb-5px cursor-pointer .dark:text-white"
+                        :class="cItem.type == 'success' ? 'c-#F2637B' : 'flex'"
+                      >
+                        {{ cItem.title }}
+                        <div v-if="cItem.type == 'info'" class="ml-auto">
+                          <Icon icon="mingcute:right-line" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div> -->
+  <div class="shouye">
+    <img  src="@/assets/imgs/souye.png" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '@/components/Icon/src/Icon.vue'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markPoint'
+import type { TabsPaneContext } from 'element-plus'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { useAppStore } from '@/store/modules/app'
+import { getTableList, batchGetTableList } from '@/api/design/report'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'Home10' })
+
+interface Advertising {
+  imgUrl: string
+}
+interface ZnzsIntroduce {
+  jjcd: number
+  xxnra: string
+  xxnrb?: string
+  btname?: string
+}
+interface FwtzList {
+  content: string
+  title: string
+}
+interface RightListContent {
+  type: string
+  title: string
+}
+interface RightList {
+  title: string
+  h: string
+  totalTitle?: string
+  content?: RightListContent[]
+}
+interface MerchantIntroduction {
+  title: string
+  content: string
+}
+
+const appStore = useAppStore()
+// 是否全屏
+const isFullscreen = computed(() =>appStore.getFullscreen);
+
+// type为true返回classOne，反之返回classTwo
+const selectByCond = (type, classOne, classTwo) => {
+  if (typeof type === 'boolean' && type) {
+    return classOne
+  } else {
+    return classTwo
+  }
+}
+
+const refineSelectByCond = (isFullscreenClsss, mobileClass, otherClass) => {
+  if (isFullscreen.value) {
+    return isFullscreenClsss
+  } else if (appStore.getMobile) {// 判断是否手机端
+    return mobileClass
+  } else {
+    return otherClass
+  }
+}
+
+const conversion = ref({
+  cgkhs: 0,
+  sj: '',
+  kdj: 0,
+  xzhys: 0
+})
+
+const oilGaugeValue = ref(45)
+const oilGaugeCode = ref('%')
+const oilGaugeSubtext = ref('访问-支付转化率')
+const oilGaugemax = ref(100)
+
+// 访问-支付转化率
+const oilGauge_app_option = ref<any>()
+const oilGauge_option = ref({
+  title: [
+    {
+      text: `{primary|${oilGaugeValue.value}}\t{point|${oilGaugeCode.value}}`,
+      left: 'center',
+      top: 'center',
+      textStyle: {
+        rich: {
+          primary: {
+            color: 'white',
+            fontWeight: 'bold',
+            fontSize: 32,
+            lineHeight: 67.2
+          },
+          point: {
+            fontSize: 12,
+            lineHeight: 22,
+            color: 'white',
+            padding: [10, -10, 0, -5]
+          }
+        }
+      }
+    },
+    {
+      left: 'center',
+      top: '70%',
+      subtext: `${oilGaugeSubtext.value}`,
+      subtextStyle: {
+        color: 'white',
+        fontSize: 12
+      }
+    }
+  ],
+  angleAxis: {
+    axisLine: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    splitLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    min: 0,
+    max: 6.666,
+    startAngle: 225
+  },
+  radiusAxis: {
+    type: 'category',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      show: false
+    },
+    data: ['a', 'b', 'c'],
+    z: 10
+  },
+  polar: {
+    radius: '105%'
+  },
+  series: [
+    {
+      type: 'gauge',
+      splitNumber: 20,
+      max: oilGaugemax.value,
+      radius: '75%',
+      detail: {
+        show: false
+      },
+      axisLine: {
+        // 坐标轴线
+        show: false,
+        lineStyle: {
+          color: [
+            [0, '#ADC6FF'],
+            [1, '#ADC6FF']
+          ],
+          width: 0,
+          opacity: 0
+        }
+      },
+      data: [
+        {
+          name: '',
+          value: oilGaugeValue.value
+        }
+      ],
+      splitLine: {
+        length: 20, //长刻度节点线长度
+        lineStyle: {
+          width: 4,
+          color: '#ADC6FF'
+        } //刻度节点线
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false,
+        color: '#333',
+        fontSize: 18
+      },
+      pointer: {
+        show: true,
+        icon: 'roundRect',
+        length: '60%',
+        offsetCenter: [0, -25],
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'white'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 255, 255, 0)'
+              }
+            ]
+          },
+          opacity: 0.9
+        }
+      }
+    }
+  ],
+  tooltip: {
+    show: false
+  }
+})
+
+// 折线图
+const goTo = ref<number[]>([])
+const goOut = ref<number[]>([])
+const oilGaugeLineXAxis = ref<string[]>([])
+const showoilGaugeLineLable = ref('')
+const ConversionList = ref([
+  { nowNum: 0, beforeNum: 0, title: '支付金额', titleCode: 'zfje' },
+  { nowNum: 0, beforeNum: 0, title: '支付订单', titleCode: 'zfdd' },
+  { nowNum: 0, beforeNum: 0, title: '浏览量', titleCode: 'lll' },
+  { nowNum: 0, beforeNum: 0, title: '访客数', titleCode: 'fks' }
+])
+const defaultConversion = ref('')
+let oilGaugeMarkPoint = computed(() => {
+  let str = {
+    goTo: ['1', goTo.value[0] || 0],
+    goOut: ['1', goOut.value[0] || 0]
+  }
+  return str
+})
+const oilGauge_line_option = ref<any>({
+  color: ['#F2F4F5', '#3571FE'],
+  grid: {
+    top: '15%',
+    bottom: '0',
+    left: '0',
+    right: '0'
+  },
+  xAxis: [
+    {
+      show: false,
+      boundaryGap: false,
+      data: oilGaugeLineXAxis.value
+    }
+  ],
+  yAxis: [
+    {
+      show: false
+    }
+  ],
+  series: [
+    {
+      name: '昨天',
+      type: 'line',
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 2
+        }
+      },
+      data: goTo.value,
+      silent: true
+    },
+    {
+      name: '今天',
+      type: 'line',
+      symbol: 'circle',
+      symbolSize: 0,
+      smooth: true,
+      lineStyle: {
+        normal: {
+          width: 3
+        }
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#326ffd5f' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#326ffd13' // 100% 处的颜色
+            }
+          ],
+          global: false // 缺省为 false
+        }
+      },
+      data: goOut.value,
+      silent: true
+    },
+    {
+      type: 'line',
+      data: [],
+      markLine: {
+        symbol: 'none',
+        lineStyle: {
+          type: 'dashed'
+        },
+        data: [
+          [
+            {
+              xAxis: 0,
+              yAxis: 0
+            },
+            {
+              xAxis: 0,
+              yAxis: 0,
+              label: {
+                formatter: `{aa|${showoilGaugeLineLable.value}}`,
+                rich: {
+                  aa: {
+                    color: 'rgba(100, 108, 154, 0.6)',
+                    fontSize: 12
+                  }
+                }
+              }
+            }
+          ],
+          [
+            {
+              xAxis: 0,
+              yAxis: 0
+            },
+            {
+              xAxis: 0,
+              yAxis: 0,
+              label: {
+                formatter: `{aaa|}`,
+                rich: {
+                  aaa: {
+                    color: 'rgba(100, 108, 154, 0.6)',
+                    fontSize: 12
+                  }
+                }
+              }
+            }
+          ]
+        ]
+      },
+      markPoint: {
+        data: [
+          {
+            coord: oilGaugeMarkPoint.value['goTo'],
+            symbol: 'circle',
+            symbolSize: 16,
+            label: {
+              formatter: '昨日',
+              color: 'rgba(100, 108, 154, 0.6)',
+              offset: [20, -10]
+            },
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0)'
+            }
+          },
+          {
+            coord: oilGaugeMarkPoint.value['goOut'],
+            symbol: 'circle',
+            symbolSize: 16,
+            label: {
+              formatter: '今日',
+              color: '#3571FE',
+              offset: [20, -10]
+            },
+            itemStyle: {
+              color: 'rgba(255, 255, 255, 0)',
+              silent: true
+            }
+          }
+        ]
+      },
+      silent: true
+    }
+  ]
+})
+const initConversion = (realtimeData) => {
+  if (!realtimeData) return
+  ConversionList.value.forEach((ele) => {
+    ele.nowNum = realtimeData[ele.titleCode].jr
+    ele.beforeNum = realtimeData[ele.titleCode].zr
+    realtimeData[ele.titleCode].flag == 1
+      ? (defaultConversion.value = ele.titleCode)
+      : (defaultConversion.value = 'zfje')
+  })
+
+  realtimeData.data.forEach((ele) => {
+    goTo.value.push(ele.zr)
+    oilGaugeLineXAxis.value.push(ele.sj)
+    if (ele.jr) goOut.value.push(ele.jr)
+  })
+
+  let goOutLength = goOut.value.length - 1
+  let nowGoOut = goOut.value[goOutLength]
+  let nowGoTo = goTo.value[goOutLength]
+
+  nowGoOut < nowGoTo
+    ? (showoilGaugeLineLable.value = '加把劲，就上去了...')
+    : (showoilGaugeLineLable.value = '')
+  const series2 = oilGauge_line_option.value.series[2]
+
+  series2.markLine.data[0][0].xAxis = goOutLength
+  series2.markLine.data[0][1].xAxis = goOutLength
+  series2.markLine.data[0][1].yAxis = nowGoOut
+  series2.markLine.data[0][1].label.formatter = `{aa|${showoilGaugeLineLable.value}}`
+  series2.markLine.data[1][1].label.formatter = `{aaa|更新时间：${realtimeData.gxsj}}`
+  series2.markLine.data[1][0].xAxis = goOutLength
+  series2.markLine.data[1][1].xAxis = goOutLength
+  series2.markLine.data[1][1].yAxis = nowGoOut + nowGoTo + 20
+  series2.markPoint.data[0].coord = oilGaugeMarkPoint.value.goTo
+  series2.markPoint.data[1].coord = oilGaugeMarkPoint.value.goOut
+}
+const clickSelectConversion = async (val) => {
+  let res = await getTableList('example_overview_realtime_data', { type: 3 })
+  goTo.value = []
+  goOut.value = []
+  oilGaugeLineXAxis.value = []
+  initConversion(res.records[0])
+  defaultConversion.value = val
+}
+
+const moreServicesList = ref([
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '零售'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '教育'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '美业'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '某赞精选'
+  },
+  {
+    imgUrl: '/img/gdfw.png',
+    title: '我要推广'
+  }
+])
+
+const learningExchangeList = ref([
+  {
+    title: '商家论坛',
+    introduce: '百万商家互通互助',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '线下培训',
+    introduce: '点击查看全国活动',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '服务市场',
+    introduce: '服务商帮你经营',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '在线课堂',
+    introduce: '资深专家视频授课',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '本地商盟',
+    introduce: '加入本地商家联盟',
+    imgUrl: '/img/xxjl.png'
+  },
+  {
+    title: '定制服务',
+    introduce: '定制开发专享功能',
+    imgUrl: '/img/xxjl.png'
+  }
+])
+
+const rightList = ref<RightList[]>([
+  {
+    title: '规则中心',
+    h: '210'
+  },
+  {
+    title: '产品动态',
+    h: '240'
+  },
+  {
+    title: '学习中心',
+    h: '240'
+  }
+])
+
+// 广告区域
+// const advertising = ref<string | Advertising[]>('广告banner')
+const advertising = ref<string | Advertising[]>([{ imgUrl: '/img/sygl1.png' }])
+const sjjysl = ref('')
+
+const merchantIntroduction = ref<MerchantIntroduction[]>()
+
+const jyjyList = ref([
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitelltz.png',
+    blackImgUrl: '/img/blacklltz.png',
+    title: '流量拓展',
+    introduction: '小程序分享至朋友圈'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitehyzm.png',
+    blackImgUrl: '/img/blackhyzm.png',
+    title: '会员招募',
+    introduction: 'App端支持办理会员卡'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitefyzd.png',
+    blackImgUrl: '/img/blackfyzd.png',
+    title: '费用账单',
+    introduction: '便捷管理店铺账目收支'
+  },
+  {
+    imgUrl: '',
+    whiteImgUrl: '/img/whitesptg.png',
+    blackImgUrl: '/img/blacksptg.png',
+    title: '商品推广',
+    introduction: '多平台推广商品类目信息'
+  }
+])
+
+const bzList = ref([
+  {
+    imgUrl: '/img/zxkf.png',
+    title: '在线客服',
+    introduction: '电话：057 - 8888 8888'
+  },
+  {
+    imgUrl: '/img/zmkf.png',
+    title: '桌面在线客服',
+    introduction: '即时应答客户在线咨询'
+  },
+  {
+    imgUrl: '/img/sjkf.png',
+    title: '移动客户端',
+    introduction: '使用手机、Pad管理店铺'
+  }
+])
+
+const znzsType = ref('hover')
+const znzsMouseover = () => {
+  znzsType.value = 'hover'
+}
+const znzsMouseout = () => {
+  znzsType.value = 'nothover'
+}
+const activeName = ref('1')
+const initZnzs = (data) => {
+  if (!data) return
+  znzsSeries.value = [data.dfhdd, data.dhfkf, data.yzxsp, data.dtkdd, data.pdzkh]
+  znzs_option.value.series.data = znzsSeries.value
+}
+// 点击智能助手tabs事件
+const handleClick = async (tab: TabsPaneContext, event: Event) => {
+  let res = await getTableList('example_overview_intelligent_assistants', {
+    type: tab.props.name
+  })
+  initZnzs(res.records[0])
+}
+const znzsSeries = ref<number[]>([])
+const znzs_option = ref({
+  grid: {
+    left: '0',
+    right: '0',
+    bottom: '20%',
+    top: '12%'
+  },
+  xAxis: {
+    type: 'category',
+    data: ['待发货订单', '待回复客服', '已滞销商品', '待退款订单', '排队中客户'],
+    axisLine: {
+      lineStyle: {
+        color: 'white'
+      }
+    },
+    axisLabel: {
+      color: '#C7CCD0', // x轴颜色
+      fontWeight: 'lighter',
+      fontSize: '9',
+      width: 30,
+      lineHeight: 13,
+      overflow: 'break'
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: [
+    {
+      show: false,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      }
+    }
+  ],
+  series: {
+    name: '系列一',
+    type: 'bar',
+    barWidth: '16',
+    itemStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: '#7523FD' },
+          { offset: 1, color: '#356DFF' }
+        ]
+      },
+      borderRadius: 2
+    },
+    label: {
+      show: true,
+      position: 'top',
+      color: 'black',
+      fontSize: 12
+    },
+    data: znzsSeries.value
+  }
+})
+
+const animationList = ref<number[]>([])
+const overviewPendingLen = ref(0)
+const znzsIntroduce = ref<ZnzsIntroduce[]>([])
+const numTop = ref('')
+
+const fwtzList = ref<FwtzList[]>([])
+
+const markData = oilGauge_line_option.value.series[2].markLine
+const markPoint = oilGauge_line_option.value.series[2].markPoint
+
+const switchMode = () => {
+  // 判断是否为暗色模式
+  const { wsCache } = useCache()
+  if (wsCache.get(CACHE_KEY.IS_DARK)) {
+    document.documentElement.style.setProperty('--tabs-item-color', 'white')
+    znzs_option.value.series.label.show = false
+    znzs_option.value.xAxis.axisLabel.color = 'white'
+    znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
+
+    jyjyList.value.forEach((ele) => {
+      ele.imgUrl = ele.blackImgUrl
+    })
+
+    oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
+    if (markData) {
+      markData.data[0][1].label.rich.aa.color = 'white'
+      markData.data[1][1].label.rich.aaa.color = 'white'
+    }
+    if (markPoint) {
+      markPoint.data[0].label.color = 'white'
+      markPoint.data[1].label.color = 'white'
+    }
+  } else {
+    jyjyList.value.forEach((ele) => {
+      ele.imgUrl = ele.whiteImgUrl
+    })
+  }
+}
+
+watch(
+  () => appStore.isDark,
+  (val) => {
+    if (val) {
+      document.documentElement.style.setProperty('--tabs-item-color', 'white')
+      znzs_option.value.series.label.show = false
+      znzs_option.value.xAxis.axisLabel.color = 'white'
+      znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
+      jyjyList.value.forEach((ele) => {
+        ele.imgUrl = ele.blackImgUrl
+      })
+      oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
+      if (markData) {
+        markData.data[0][1].label.rich.aa.color = 'white'
+        markData.data[1][1].label.rich.aaa.color = 'white'
+      }
+      if (markPoint) {
+        markPoint.data[0].label.color = 'white'
+        markPoint.data[1].label.color = 'white'
+      }
+      // 暗色
+    } else {
+      document.documentElement.style.setProperty('--tabs-item-color', 'rgb(100 108 154 / 60%)')
+      znzs_option.value.series.label.show = true
+      znzs_option.value.xAxis.axisLabel.color = '#C7CCD0'
+      znzs_option.value.xAxis.axisLine.lineStyle.color = 'white'
+      jyjyList.value.forEach((ele) => {
+        ele.imgUrl = ele.whiteImgUrl
+      })
+      oilGauge_line_option.value.color = ['#F2F4F5', '#3571FE']
+      if (markData) {
+        markData.data[0][1].label.rich.aa.color = 'rgba(100, 108, 154, 0.6)'
+        markData.data[1][1].label.rich.aaa.color = 'rgba(100, 108, 154, 0.6)'
+      }
+      if (markPoint) {
+        markPoint.data[0].label.color = 'rgba(100, 108, 154, 0.6)'
+        markPoint.data[1].label.color = 'rgba(100, 108, 154, 0.6)'
+      }
+    }
+  }
+)
+
+// 侦听是否为全屏，如果是就准备全屏需要echarts的变量
+watch(
+  () => isFullscreen.value,
+  (val) => {
+    if (val) {
+      if (!oilGauge_app_option.value) {
+        oilGauge_app_option.value = cloneDeep(oilGauge_option.value)
+        oilGauge_app_option.value.title[0].textStyle.rich.primary.fontSize = 24
+        oilGauge_app_option.value.title[0].textStyle.rich.point.padding = [5, -2, 0, -3]
+        oilGauge_app_option.value.series[0].radius = '100%'
+        oilGauge_app_option.value.series[0].splitLine.length = 15
+        oilGauge_app_option.value.series[0].splitLine.lineStyle.width = 2
+        oilGauge_app_option.value.series[0].pointer.length = '52%'
+        oilGauge_app_option.value.series[0].pointer.offsetCenter = [0, -15]
+        oilGauge_app_option.value.series[0].pointer.width = 3
+      }
+    }
+  },
+  { immediate: true }
+)
+
+const init = async () => {
+  let oneres = await batchGetTableList(
+    'example_overview_conversion,example_overview_merchant,example_overview_merchant_cou,example_overview_realtime_data,example_overview_intelligent_assistants,example_overview_pending,example_overview_service_notices'
+  )
+
+  conversion.value = oneres.example_overview_conversion.records[0]
+  oilGaugeValue.value = oneres.example_overview_conversion.records[0]?.fwzfzhl
+  merchantIntroduction.value = oneres.example_overview_merchant.records
+  sjjysl.value = oneres.example_overview_merchant_cou.records[0]?.cou
+  let realtimeData = oneres.example_overview_realtime_data.records[0]
+  let intelligentAssistants = oneres.example_overview_intelligent_assistants.records[0]
+  let overviewPending = oneres.example_overview_pending.records
+  initConversion(realtimeData)
+  initZnzs(intelligentAssistants)
+  numTop.value = '-' + overviewPending.length * 60 + 'px'
+  for (let i = 1; i <= overviewPending.length; i++) {
+    animationList.value.push(i)
+  }
+  animationList.value.reverse()
+  if (overviewPending.length > 3) {
+    overviewPendingLen.value = overviewPending.length - 3
+  }
+  znzsIntroduce.value = overviewPending.slice(0, 3)
+  fwtzList.value = oneres.example_overview_service_notices.records
+
+  let endres = await batchGetTableList(
+    'example_overview_rulescenter,example_overview_productnews,example_overview_learningcenter'
+  )
+  let rulescenter = endres.example_overview_rulescenter.records
+  let productnews = endres.example_overview_productnews.records
+  let learningcenter = endres.example_overview_learningcenter.records
+  rightList.value[0].content = rulescenter
+  rightList.value[0].totalTitle = '共计' + rulescenter.length + '条信息'
+  rightList.value[1].content = productnews
+  rightList.value[1].totalTitle = '共计' + productnews.length + '条信息'
+  rightList.value[2].content = learningcenter
+  rightList.value[2].totalTitle = '共计' + learningcenter.length + '条信息'
+}
+
+onMounted(() => {
+  switchMode()
+  init()
+})
+</script>
+
+<style lang="scss" scoped>
+.shouye {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+  height: 300px; /* 父容器必须有高度（否则无法垂直居中） */
+}
+.shouye img {
+  max-width: 100%;
+  max-height: 100%;
+  margin-top: 20%;
+}
+
+@keyframes slideBorder {
+  from {
+    width: 0;
+    transform: translateX(-100%);
+  }
+
+  to {
+    width: 15px;
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes znzsHoverAnimation {
+  from {
+    top: 0;
+  }
+
+  to {
+    top: v-bind('numTop');
+  }
+}
+
+@keyframes znzsNotHoverAnimation {
+  from {
+    top: -700px;
+  }
+
+  to {
+    top: 0;
+  }
+}
+
+@keyframes znzsBgHoverAnimation {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.big-radius {
+  border-radius: 15px;
+}
+
+.small-radius {
+  border-radius: 7px;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  margin: 0;
+  line-height: 150px;
+  color: #475669;
+  text-align: center;
+  opacity: 0.75;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+
+.text-white {
+  color: white;
+}
+
+.arrow-top {
+  width: 14px;
+  height: 14px;
+  background-color: #f2637b;
+  border-radius: 5px;
+  align-items: self-end;
+
+  .el-icon {
+    transform: scale(0.8);
+  }
+}
+
+.arrow-bottom {
+  width: 14px;
+  height: 14px;
+  background-color: #1dc9b7;
+  border-radius: 5px;
+
+  .el-icon {
+    transform: scale(0.8);
+  }
+}
+
+.active-conversion {
+  position: relative;
+  font-weight: bold;
+  color: rgb(51 112 255);
+
+  &::before {
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    height: 2px;
+    background-color: #3370ff;
+    content: '';
+    animation: slideBorder 0.3s forwards;
+  }
+}
+
+.oilGauge_line {
+  position: relative;
+  width: calc(55% - 11px);
+  border-left: 1px solid #e6ebf2;
+
+  .oilGauge_line_echart {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.div_to_ul {
+  position: relative;
+
+  span:hover {
+    color: rgb(88 103 221);
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: -12px;
+    width: 5px;
+    height: 5px;
+    background-color: black;
+    border-radius: 50%;
+    content: '';
+    transform: translate(0, -50%);
+  }
+}
+
+.blue_box_shadow {
+  box-shadow: 0 3px 20px rgb(51 112 255 / 29.8%);
+}
+
+.animation-box {
+  position: relative;
+
+  .znzs-one {
+    border-radius: 50%;
+
+    &.hover {
+      animation: znzsBgHoverAnimation 3s forwards;
+    }
+  }
+
+  .znzs-two {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &.hover {
+      animation: znzsBgHoverAnimation 2s forwards;
+    }
+  }
+
+  .znzs-three {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19654.png');
+    background-size: 100%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+
+    &.hover {
+      animation: znzsBgHoverAnimation 1s forwards;
+    }
+  }
+
+  .znzs-four {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19655_2.png');
+    background-size: 100%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .znzs-xdcl {
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .znzs-ck {
+    position: absolute;
+    top: 47%;
+    left: 50%;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+
+    .znzs-sz {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      &:hover {
+        animation: znzsHoverAnimation 0.5s forwards;
+      }
+    }
+
+    .znzs-sz.nothover {
+      animation: znzsNotHoverAnimation 0.5s forwards;
+    }
+  }
+}
+
+.znzs-tabs {
+  position: relative;
+
+  .tabs-position-icon {
+    position: absolute;
+    top: 22px;
+    right: 0;
+    transform: translate(-50%, -50%);
+  }
+}
+
+::v-deep(.el-tabs) {
+  .el-tabs__header {
+    margin-bottom: 0;
+
+    .el-tabs__nav-wrap {
+      .el-tabs__nav-scroll {
+        .el-tabs__active-bar {
+          background-color: #3370ff;
+          transform: translateX(5px);
+        }
+
+        .el-tabs__item {
+          $tabsItemColor: var(--tabs-item-color, rgb(100 108 154 / 60%));
+
+          padding: 0 5px;
+          font-size: 13px;
+          color: $tabsItemColor;
+
+          &:hover {
+            color: rgb(51 112 255);
+          }
+
+          &.is-active {
+            font-weight: bold;
+            color: #3370ff;
+          }
+        }
+      }
+
+      &::after {
+        height: 0;
+        // color:#326ffd13
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 08adbb4..fcd4215 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -1,56 +1,31 @@
 <template>
-  <el-form
-    v-show="getShow"
-    ref="formLogin"
-    :model="loginData.loginForm"
-    :rules="LoginRules"
-    class="login-form login-form-default"
-    label-position="top"
-    label-width="120px"
-    size="large"
-  >
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules"
+    class="login-form login-form-default" label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <LoginFormTitle style="width: 100%"/>
+          <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-          <el-input
-            v-model="loginData.loginForm.tenantName"
-            :placeholder="t('login.tenantNamePlaceholder')"
-            :prefix-icon="iconHouse"
-            link
-            type="primary"
-          />
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input
-            v-model="loginData.loginForm.username"
-            :placeholder="t('login.usernamePlaceholder')"
-            :prefix-icon="iconAvatar"
-          />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input
-            v-model="loginData.loginForm.password"
-            :placeholder="t('login.passwordPlaceholder')"
-            :prefix-icon="iconLock"
-            show-password
-            type="password"
-            @keyup.enter="getCode()"
-          />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
         </el-form-item>
       </el-col>
-      <el-col
-        :span="24"
-        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
-      >
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%">
             <el-col :span="6">
@@ -66,26 +41,21 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px" class="login-btn-col">
         <el-form-item>
-          <XButton
-            :loading="loginLoading"
-            :title="t('login.login')"
-            class="w-[100%]"
-            type="primary"
-            @click="getCode()"
-          />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="getCode()" />
           <div v-if="loginType == 'easy'" class="w-100% mt-6px flex justify-end">
             <el-dropdown @command="easyCommand">
               <div class="mt--2px cursor-pointer">
                 <el-text type="primary">
                   <span class="text-14px">{{ t('login.otherLogin') }}</span>
-                  <Icon :size="16" icon="iconamoon:arrow-down-2-light"/>
+                  <Icon :size="16" icon="iconamoon:arrow-down-2-light" />
                 </el-text>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
                   <template v-for="item in easyDropdownList" :key="item.label">
                     <el-dropdown-item :command="item">
-                      <Icon :size="16" :icon="item.icon"/>
+                      <Icon :size="16" :icon="item.icon" />
                       <span>{{ item.label }}</span>
                     </el-dropdown-item>
                   </template>
@@ -95,13 +65,8 @@
           </div>
         </el-form-item>
       </el-col>
-      <Verify
-        ref="verify"
-        :captchaType="captchaType"
-        :imgSize="{ width: '400px', height: '200px' }"
-        mode="pop"
-        @success="handleLogin"
-      />
+      <Verify ref="verify" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" mode="pop"
+        @success="handleLogin" />
       <template v-if="!loginType">
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <!-- <el-form-item>
@@ -123,19 +88,12 @@
             </el-row>
           </el-form-item> -->
         </el-col>
-       <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+        <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <el-form-item>
             <div class="w-[100%] flex justify-center">
-              <Icon
-                v-for="(item, key) in socialList"
-                :key="key"
-                :icon="item.icon"
-                :size="50"
-                class="anticon cursor-pointer"
-                color="#999"
-                @click="doSocialLogin(item.type)"
-              />
+              <Icon v-for="(item, key) in socialList" :key="key" :icon="item.icon" :size="50"
+                class="anticon cursor-pointer" color="#999" @click="doSocialLogin(item.type)" />
             </div>
           </el-form-item>
         </el-col>
@@ -144,18 +102,18 @@
   </el-form>
 </template>
 <script lang="ts" setup>
-import {ElLoading} from 'element-plus'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
-import type {RouteLocationNormalizedLoaded} from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
-import {useIcon} from '@/hooks/web/useIcon'
+import { useIcon } from '@/hooks/web/useIcon'
 
 import * as authUtil from '@/utils/auth'
-import {usePermissionStore} from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
-import {LoginStateEnum, useFormValid, useLoginState} from './useLogin'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
-defineOptions({name: 'LoginForm'})
+defineOptions({ name: 'LoginForm' })
 
 interface Props {
   loginType?: 'easy'
@@ -163,15 +121,15 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const {t} = useI18n()
+const { t } = useI18n()
 const message = useMessage()
-const iconHouse = useIcon({icon: 'ep:house'})
-const iconAvatar = useIcon({icon: 'ep:avatar'})
-const iconLock = useIcon({icon: 'ep:lock'})
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
 const formLogin = ref()
-const {validForm} = useFormValid(formLogin)
-const {setLoginState, getLoginState} = useLoginState()
-const {currentRoute, push} = useRouter()
+const { validForm } = useFormValid(formLogin)
+const { setLoginState, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
@@ -203,7 +161,7 @@ const socialList = [
   // { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
   // { icon: 'ant-design:github-filled', type: 0 },
   // { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  {icon: 'bx:planet', type: 100},
+  { icon: 'bx:planet', type: 100 },
 ]
 
 const easyDropdownList = [
@@ -219,15 +177,15 @@ const easyDropdownList = [
     type: LoginStateEnum.QR_CODE,
     code: 'page'
   },
-  {label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url'},
+  { label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url' },
   {
     label: t('login.btnDingtalk'),
     icon: 'ant-design:dingtalk-circle-filled',
     type: 20,
     code: 'url'
   },
-  {label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url'},
-  {label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url'}
+  { label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url' },
+  { label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url' }
 ]
 
 const easyCommand = (row) => {
@@ -308,9 +266,14 @@ const handleLogin = async (params) => {
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-      push({path: redirect.value || permissionStore.addRouters[0].path})
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
-  } finally {
+  }
+  catch (e) {
+    loginLoading.value = false
+    loading.value?.close()
+  }
+  finally {
     loginLoading.value = false
     loading.value?.close()
   }
@@ -327,7 +290,7 @@ const doSocialLogin = async (type: number) => {
       await getTenantId()
       // 如果获取不到，则需要弹出提示，进行处理
       if (!authUtil.getTenantId()) {
-        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({value}) => {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
           const res = await LoginApi.getTenantIdByName(value)
           authUtil.setTenantId(res)
         })
@@ -356,7 +319,7 @@ watch(
   }
 )
 onMounted(() => {
-  if(redirect.value && import.meta.env.VITE_DEFAULT_SSO =='true'){
+  if (redirect.value && import.meta.env.VITE_DEFAULT_SSO == 'true') {
     //默认
     doSocialLogin(100)
   }
diff --git a/vite.config.ts b/vite.config.ts
index 3e23f63..77bfc4c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
       proxy: {
         ['/admin-api']: {
-          target: env.VITE_BASE_URL,
+          target: 'http://10.28.117.100:48080',
           ws: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),