diff --git a/src/views/Home/Index10.vue b/src/views/Home/Index10.vue
index d38435b..0404ffc 100644
--- a/src/views/Home/Index10.vue
+++ b/src/views/Home/Index10.vue
@@ -8,7 +8,7 @@
           <span>···</span>
         </div>
       </div>
-      <h1 class="header-title">数据看板</h1>
+      <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="开始日期"
diff --git a/src/views/Home/Index12.vue b/src/views/Home/Index12.vue
index 364b417..23d6175 100644
--- a/src/views/Home/Index12.vue
+++ b/src/views/Home/Index12.vue
@@ -1,1800 +1,1110 @@
 <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">
+          {{ selectedPark || selectedRegion }}
+          <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-table">
+              <div class="distribution-title">园区风险分布</div>
+              <div class="table-wrapper">
+                <table class="risk-table">
+                  <thead>
+                    <tr>
+                      <th>园区</th>
+                      <th>低</th>
+                      <th>一般</th>
+                      <th>较大</th>
+                      <th>重大</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="item in parkRiskDistribution" :key="item.park">
+                      <td>{{ item.park }}</td>
+                      <td>{{ item.low || '' }}</td>
+                      <td>{{ item.general }}</td>
+                      <td>{{ item.moderate }}</td>
+                      <td>{{ item.major }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </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-table">
+              <div class="distribution-title">园区整改状态</div>
+              <div class="table-wrapper">
+                <table class="status-table">
+                  <thead>
+                    <tr>
+                      <th>园区</th>
+                      <th>已逾期</th>
+                      <th>处理中</th>
+                      <th>已处理</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="item in parkRectificationStatus" :key="item.park">
+                      <td>{{ item.park }}</td>
+                      <td class="overdue">{{ item.overdue }}</td>
+                      <td class="processing">{{ item.processing }}</td>
+                      <td class="processed">{{ item.processed }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </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>
-            <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 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="high-risk-content">
+              <div class="donut-chart-wrapper-small">
+                <Echart :options="highRiskChartOption" width="100%" height="180px" />
               </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 class="operation-type-list">
+                <div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type">
+                  <span class="dot" :style="{ backgroundColor: item.color }"></span>
+                  <span class="operation-name">{{ item.type }}</span>
+                  <div class="operation-bar-wrapper">
+                    <div class="operation-bar" :style="{ width: item.percent, backgroundColor: item.color }"></div>
                   </div>
                 </div>
               </div>
             </div>
+            <div class="park-operation-distribution">
+              <div class="distribution-title">园区作业分布</div>
+              <div class="distribution-list">
+                <div class="distribution-item" v-for="item in parkOperationDistribution" :key="item.park">
+                  <span class="region-name">{{ item.park }}</span>
+                  <span class="region-count">{{ item.count }}项</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 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="emergency-plan-content">
+              <div class="progress-chart-wrapper">
+                <Echart :options="emergencyPlanChartOption" width="100%" height="180px" />
               </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 class="drill-info">
+                <div class="drill-item">
+                  <span>应完成演练</span>
+                  <span class="drill-number">{{ emergencyPlanTotal }}次</span>
                 </div>
-                <div
-                  class="znzs-two w-150px h-150px bg-#e8eafb .dark:bg-#9098B4"
-                  :class="znzsType == 'hover' ? 'hover' : ''"
-                >
+                <div class="drill-item">
+                  <span>已完成演练</span>
+                  <span class="drill-number">{{ emergencyPlanCompleted }}次</span>
                 </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 class="regional-progress">
+              <div class="distribution-title">园区演练完成率</div>
+              <div class="progress-list">
+                <div class="progress-item" v-for="item in parkDrillProgress" :key="item.park">
+                  <span class="region-name">{{ item.park }}</span>
+                  <div class="progress-bar-wrapper">
+                    <div class="progress-bar" :style="{ width: item.percent, backgroundColor: '#10b981' }"></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
+                  <span class="progress-percent">{{ item.percent }}</span>
                 </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>
+        </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 parkTrainingProgress" :key="item.park">
+                  <span class="region-name">{{ item.park }}</span>
+                  <div class="progress-bar-wrapper">
+                    <div class="progress-bar" :style="{ width: item.percent, backgroundColor: '#8b5cf6' }"></div>
                   </div>
-                  <span class="ml-auto c-#3370FF cursor-pointer .dark:text-white">
-                    {{ item.btname }}
-                  </span>
+                  <span class="progress-percent">{{ item.percent }}</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="selectedPark" :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, useRoute } 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' })
+defineOptions({ name: 'Home12' })
 
-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);
-
-// type为true返回classOne，反之返回classTwo
-const selectByCond = (type, classOne, classTwo) => {
-  if (typeof type === 'boolean' && type) {
-    return classOne
-  } else {
-    return classTwo
-  }
+interface DistributionItem {
+  region?: string
+  park?: string
+  count: number
+  percent?: string
+  color: string
 }
 
-const refineSelectByCond = (isFullscreenClsss, mobileClass, otherClass) => {
-  if (isFullscreen.value) {
-    return isFullscreenClsss
-  } else if (appStore.getMobile) {// 判断是否手机端
-    return mobileClass
-  } else {
-    return otherClass
-  }
+interface ParkRiskItem {
+  park: string
+  low: number | string
+  general: number
+  moderate: number
+  major: number
 }
 
-const conversion = ref({
-  cgkhs: 0,
-  sj: '',
-  kdj: 0,
-  xzhys: 0
-})
+interface ParkRectificationItem {
+  park: string
+  overdue: number
+  processing: number
+  processed: number
+}
 
-const oilGaugeValue = ref(45)
-const oilGaugeCode = ref('%')
-const oilGaugeSubtext = ref('访问-支付转化率')
-const oilGaugemax = ref(100)
+const router = useRouter()
+const route = useRoute()
 
-// 访问-支付转化率
-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]
+// 区域选择相关 - 照抄regionScreen.vue的逻辑
+const selectedRegion = ref<string>('')
+const selectedPark = ref<string>('')
+const regionSelectorVisible = ref<boolean>(false)
+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 riskTotal = ref<number>(0)
+const riskDistribution = ref<DistributionItem[]>([])
+const parkRiskDistribution = ref<ParkRiskItem[]>([])
+
+// 隐患管理数据
+const hiddenDangerTrend = ref<any[]>([])
+const parkRectificationStatus = ref<ParkRectificationItem[]>([])
+
+// 高危作业数据
+const highRiskTotal = ref<number>(0)
+const operationTypeDistribution = ref<DistributionItem[]>([])
+const parkOperationDistribution = ref<DistributionItem[]>([])
+
+// 应急预案数据
+const emergencyPlanTotal = ref<number>(0)
+const emergencyPlanCompleted = ref<number>(0)
+const parkDrillProgress = ref<DistributionItem[]>([])
+
+// 安全培训数据
+const trainingChartData = ref<any>({})
+const parkTrainingProgress = ref<DistributionItem[]>([])
+
+// 区域颜色配置
+const regionColors = ['#3b82f6', '#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#ec4899']
+
+// 初始化区域数据 - 照抄regionScreen.vue
+const initRegionData = async () => {
+  try {
+    if (typeof route.query.region === 'string') {
+      selectedRegion.value = route.query.region
+    }
+
+    const { records } = await getTableList('park_info_list')
+    
+    if (records && records.length > 0) {
+      // 根据regionCode过滤园区
+      const regionCode = route.query.regionCode as string
+      const regionMap = new Map()
+      
+      records
+        .filter((el: any) => el.region_id == regionCode)
+        .forEach((el: any) => {
+          if (!regionMap.has(el.park_name)) {
+            regionMap.set(el.park_name, {
+              name: el.park_name,
+              code: el.park_code
+            })
           }
-        }
-      }
-    },
-    {
-      left: 'center',
-      top: '70%',
-      subtext: `${oilGaugeSubtext.value}`,
-      subtextStyle: {
-        color: 'white',
-        fontSize: 12
+        })
+      
+      regionOption.value = Array.from(regionMap.values())
+      
+      // 默认选择第一个园区
+      if (regionOption.value.length > 0 && !selectedPark.value) {
+        selectedPark.value = regionOption.value[0].name
       }
     }
-  ],
-  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
+  } catch (error) {
+    console.error('初始化区域数据失败:', error)
+  }
+}
+
+// 打开区域选择器
+const openRegionSelector = (): void => {
+  regionSelectorVisible.value = true
+}
+
+// 区域选择变化 - 跳转到园区页面
+const onRegionChange = (item: RegionItem): void => {
+  selectedPark.value = item.name
+  router.push({
+    path: '/home/park',
+    query: { region: selectedRegion.value, regionCode: route.query.regionCode, park: item.name, parkCode: item.code }
+  })
+}
+
+// 日期变化
+const handleDateChange = () => {
+  refreshData()
+}
+
+// 刷新数据
+const refreshData = () => {
+  initOutsourcingData()
+  initRiskData()
+  initHiddenDangerData()
+  initHighRiskData()
+  initEmergencyPlanData()
+  initSafetyTrainingData()
+}
+
+// 初始化外协管理数据
+const initOutsourcingData = async () => {
+  try {
+    const response = await getOutsourcingManagementData({
+      sDate: dateRange.value[0],
+      eDate: dateRange.value[1],
+      pageNo: 1,
+      pageSize: 10000
+    })
+    
+    const records = response?.records || []
+    
+    if (records && records.length > 0) {
+      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
         }
+      })
+    } else {
+      outsourcingTotal.value = 0
+      outsourcingDistribution.value = []
+    }
+  } catch (error) {
+    console.error('获取外协管理数据失败:', error)
+    outsourcingTotal.value = 0
+    outsourcingDistribution.value = []
+  }
+}
+
+// 初始化风险管理数据
+const initRiskData = async () => {
+  // TODO: 调用风险管理API
+  riskTotal.value = 215
+  riskDistribution.value = [
+    { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
+    { level: '一般风险', count: 115, percent: '53.5%', color: '#f59e0b' },
+    { level: '较大风险', count: 51, percent: '23.7%', color: '#ef4444' },
+    { level: '重大风险', count: 49, percent: '22.8%', color: '#dc2626' }
+  ]
+  
+  parkRiskDistribution.value = [
+    { park: '雄安园区', low: '', general: 45, moderate: 28, major: 8 },
+    { park: '重庆园区', low: '', general: 38, moderate: 22, major: 6 },
+    { park: '北京园区', low: '', general: 32, moderate: 18, major: 5 }
+  ]
+}
+
+// 初始化隐患管理数据
+const initHiddenDangerData = async () => {
+  // TODO: 调用隐患管理API
+  hiddenDangerTrend.value = [
+    { date: '16日', general: 16, major: 8 },
+    { date: '18日', general: 25, major: 13 },
+    { date: '20日', general: 31, major: 23 },
+    { date: '22日', general: 18, major: 12 },
+    { date: '24日', general: 28, major: 19 }
+  ]
+  
+  parkRectificationStatus.value = [
+    { park: '雄安园区', overdue: 5, processing: 28, processed: 42 },
+    { park: '重庆园区', overdue: 3, processing: 22, processed: 35 },
+    { park: '北京园区', overdue: 2, processing: 15, processed: 28 }
+  ]
+}
+
+// 初始化高危作业数据
+const initHighRiskData = async () => {
+  // TODO: 调用高危作业API
+  highRiskTotal.value = 94
+  operationTypeDistribution.value = [
+    { type: '动火作业', count: 35, percent: '37.2%', color: '#f59e0b' },
+    { type: '高处作业', count: 22, percent: '23.4%', color: '#8b5cf6' },
+    { type: '临时用电', count: 18, percent: '19.1%', color: '#3b82f6' },
+    { type: '有限空间', count: 10, percent: '10.6%', color: '#ec4899' },
+    { type: '动土作业', count: 6, percent: '6.4%', color: '#10b981' },
+    { type: '吊装作业', count: 3, percent: '3.2%', color: '#ef4444' }
+  ]
+  
+  parkOperationDistribution.value = [
+    { park: '雄安园区', count: 42 },
+    { park: '重庆园区', count: 31 },
+    { park: '北京园区', count: 21 }
+  ]
+}
+
+// 初始化应急预案数据
+const initEmergencyPlanData = async () => {
+  // TODO: 调用应急预案API
+  emergencyPlanTotal.value = 36
+  emergencyPlanCompleted.value = 28
+  parkDrillProgress.value = [
+    { park: '雄安园区', percent: '85%', color: '#10b981' },
+    { park: '重庆园区', percent: '78%', color: '#10b981' },
+    { park: '北京园区', percent: '70%', color: '#10b981' }
+  ]
+}
+
+// 初始化安全培训数据
+const initSafetyTrainingData = async () => {
+  // TODO: 调用安全培训API
+  trainingChartData.value = {
+    parks: ['雄安', '重庆', '北京'],
+    trainingCount: [12, 10, 8],
+    participants: [25, 15, 12]
+  }
+  
+  parkTrainingProgress.value = [
+    { park: '雄安园区', percent: '92%', color: '#8b5cf6' },
+    { park: '重庆园区', percent: '88%', color: '#8b5cf6' },
+    { park: '北京园区', percent: '85%', color: '#8b5cf6' }
+  ]
+}
+
+// 外协管理环形图配置
+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: () => `${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: () => `${outsourcingTotal.value}\n外协人员总数`,
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      data: chartData
+    }]
+  }
+})
+
+// 风险管理环形图配置
+const riskChartOption = computed<EChartsOption>(() => {
+  const chartData = riskDistribution.value.map(item => ({
+    value: item.count,
+    name: item.level,
+    itemStyle: { color: item.color }
+  }))
+  
+  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: () => `${riskTotal.value}\n风险总数`,
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      data: chartData
+    }]
+  }
+})
+
+// 隐患管理折线图配置
+const hiddenDangerChartOption = computed<EChartsOption>(() => {
+  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const generalData = hiddenDangerTrend.value.map(item => item.general)
+  const majorData = hiddenDangerTrend.value.map(item => item.major)
+  
+  return {
+    tooltip: { trigger: 'axis' },
+    legend: {
+      data: ['一般隐患', '重大隐患'],
+      top: 10
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '一般隐患',
+        type: 'line',
+        data: generalData,
+        itemStyle: { color: '#f59e0b' },
+        smooth: true
+      },
+      {
+        name: '重大隐患',
+        type: 'line',
+        data: majorData,
+        itemStyle: { color: '#ef4444' },
+        smooth: true
+      }
+    ]
+  }
+})
+
+// 高危作业环形图配置
+const highRiskChartOption = computed<EChartsOption>(() => {
+  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: () => `${highRiskTotal.value}\n本月作业`,
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
+      },
+      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      data: operationTypeDistribution.value.map(item => ({
+        value: item.count,
+        name: item.type,
+        itemStyle: { color: item.color }
+      }))
+    }]
+  }
+})
+
+// 应急预案环形图配置
+const emergencyPlanChartOption = computed<EChartsOption>(() => {
+  const percent = emergencyPlanTotal.value > 0 
+    ? ((emergencyPlanCompleted.value / emergencyPlanTotal.value) * 100).toFixed(0)
+    : 0
+  
+  return {
+    tooltip: { trigger: 'item' },
+    series: [{
+      name: '演练完成率',
+      type: 'pie',
+      radius: ['55%', '75%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
+      label: {
+        show: true,
+        position: 'center',
+        formatter: () => `${percent}%\n演练完成率`,
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: '#333'
       },
       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
+        { value: emergencyPlanCompleted.value, name: '已完成', itemStyle: { color: '#10b981' } },
+        { value: emergencyPlanTotal.value - emergencyPlanCompleted.value, name: '未完成', itemStyle: { color: '#e5e7eb' } }
+      ]
+    }]
   }
 })
 
-// 折线图
-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
+// 安全培训柱状图配置
+const safetyTrainingChartOption = computed<EChartsOption>(() => {
+  return {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+    legend: {
+      data: ['培训次数', '参与人次'],
+      top: 10
     },
-    {
-      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
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: trainingChartData.value.parks || []
     },
-    {
-      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
-                  }
-                }
-              }
-            }
-          ]
-        ]
+    yAxis: { type: 'value' },
+    series: [
+      {
+        name: '培训次数',
+        type: 'bar',
+        data: trainingChartData.value.trainingCount || [],
+        itemStyle: { color: '#8b5cf6' }
       },
-      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'
+      {
+        name: '参与人次',
+        type: 'bar',
+        data: trainingChartData.value.participants || [],
+        itemStyle: { color: '#3b82f6' }
       }
-    },
-    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 + '条信息'
+// 初始化数据
+const initData = async () => {
+  await initRegionData()
+  await initOutsourcingData()
+  await initRiskData()
+  await initHiddenDangerData()
+  await initHighRiskData()
+  await initEmergencyPlanData()
+  await initSafetyTrainingData()
 }
 
 onMounted(() => {
-  switchMode()
-  init()
+  initData()
 })
 </script>
 
 <style lang="scss" scoped>
-.shouye {
+.dashboard-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+.header-container {
   display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center;     /* 垂直居中 */
-  height: 300px; /* 父容器必须有高度（否则无法垂直居中） */
-}
-.shouye img {
-  max-width: 100%;
-  max-height: 100%;
-  margin-top: 20%;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding: 15px 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-@keyframes slideBorder {
-  from {
-    width: 0;
-    transform: translateX(-100%);
-  }
-
-  to {
-    width: 15px;
-    transform: translateX(-50%);
-  }
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
-@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 {
+.back-button {
+  padding: 8px 16px;
+  background: #3b82f6;
   color: white;
-}
-
-.arrow-top {
-  width: 14px;
-  height: 14px;
-  background-color: #f2637b;
-  border-radius: 5px;
-  align-items: self-end;
-
-  .el-icon {
-    transform: scale(0.8);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  
+  span {
+    font-size: 18px;
+    line-height: 1;
   }
 }
 
-.arrow-bottom {
-  width: 14px;
-  height: 14px;
-  background-color: #1dc9b7;
-  border-radius: 5px;
-
-  .el-icon {
-    transform: scale(0.8);
-  }
-}
-
-.active-conversion {
-  position: relative;
+.header-title {
+  font-size: 20px;
   font-weight: bold;
-  color: rgb(51 112 255);
+  color: #333;
+  margin: 0;
+  flex: 1;
+  text-align: center;
+}
 
-  &::before {
-    position: absolute;
-    bottom: -5px;
-    left: 50%;
-    height: 2px;
-    background-color: #3370ff;
-    content: '';
-    animation: slideBorder 0.3s forwards;
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 0;
+}
+
+.date-range-wrapper {
+  :deep(.el-date-editor) {
+    max-width: 100%;
   }
 }
 
-.oilGauge_line {
-  position: relative;
-  width: calc(55% - 11px);
-  border-left: 1px solid #e6ebf2;
+.refresh-btn {
+  flex-shrink: 0;
+}
 
-  .oilGauge_line_echart {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
+.content-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-bottom: 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dashboard-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-icon {
+  font-size: 18px;
+}
+
+.manage-btn {
+  color: #3b82f6;
+  padding: 0;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.donut-chart-wrapper,
+.donut-chart-wrapper-small {
+  height: 200px;
+}
+
+.line-chart-wrapper,
+.bar-chart-wrapper {
+  height: 180px;
+}
+
+.progress-chart-wrapper {
+  height: 180px;
+}
+
+.region-distribution,
+.risk-distribution-table,
+.rectification-status-table,
+.park-operation-distribution,
+.regional-progress {
+  margin-top: 10px;
+}
+
+.distribution-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.distribution-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.distribution-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.region-name {
+  flex: 1;
+  color: #666;
+}
+
+.region-count {
+  color: #333;
+  font-weight: 500;
+}
+
+.region-percent {
+  color: #999;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.risk-table,
+.status-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  
+  thead {
+    background-color: #f9fafb;
+  }
+  
+  th, td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  
+  th {
+    font-weight: bold;
+    color: #333;
+  }
+  
+  td {
+    color: #666;
   }
 }
 
-.div_to_ul {
-  position: relative;
-
-  span:hover {
-    color: rgb(88 103 221);
+.status-table {
+  .overdue {
+    color: #ef4444;
   }
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: -12px;
-    width: 5px;
-    height: 5px;
-    background-color: black;
-    border-radius: 50%;
-    content: '';
-    transform: translate(0, -50%);
+  
+  .processing {
+    color: #f59e0b;
+  }
+  
+  .processed {
+    color: #10b981;
   }
 }
 
-.blue_box_shadow {
-  box-shadow: 0 3px 20px rgb(51 112 255 / 29.8%);
+.high-risk-content {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
 }
 
-.animation-box {
-  position: relative;
+.operation-type-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 
-  .znzs-one {
-    border-radius: 50%;
+.operation-type-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-    &.hover {
-      animation: znzsBgHoverAnimation 3s forwards;
-    }
-  }
+.operation-name {
+  width: 80px;
+  font-size: 13px;
+  color: #666;
+  flex-shrink: 0;
+}
 
-  .znzs-two {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
+.operation-bar-wrapper {
+  flex: 1;
+  height: 8px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+}
 
-    &.hover {
-      animation: znzsBgHoverAnimation 2s forwards;
-    }
-  }
+.operation-bar {
+  height: 100%;
+  border-radius: 4px;
+}
 
-  .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%);
+.emergency-plan-content {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
+}
 
-    &.hover {
-      animation: znzsBgHoverAnimation 1s forwards;
-    }
-  }
+.drill-info {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
 
-  .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%);
-  }
+.drill-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #f0fdf4;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #666;
+}
 
-  .znzs-xdcl {
-    position: absolute;
-    top: 70%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+.drill-number {
+  font-size: 16px;
+  font-weight: bold;
+  color: #10b981;
+}
 
-  .znzs-ck {
-    position: absolute;
-    top: 47%;
-    left: 50%;
-    overflow: hidden;
-    transform: translate(-50%, -50%);
+.progress-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 
-    .znzs-sz {
-      position: absolute;
-      top: 0;
-      left: 0;
+.progress-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 
-      &:hover {
-        animation: znzsHoverAnimation 0.5s forwards;
-      }
-    }
+.progress-bar-wrapper {
+  flex: 1;
+  height: 8px;
+  background-color: #e5e7eb;
+  border-radius: 4px;
+  overflow: hidden;
+}
 
-    .znzs-sz.nothover {
-      animation: znzsNotHoverAnimation 0.5s forwards;
-    }
+.progress-bar {
+  height: 100%;
+  border-radius: 4px;
+}
+
+.progress-percent {
+  font-size: 13px;
+  color: #666;
+  min-width: 40px;
+  text-align: right;
+}
+
+@media (max-width: 1400px) {
+  .card-row {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-.znzs-tabs {
-  position: relative;
-
-  .tabs-position-icon {
-    position: absolute;
-    top: 22px;
-    right: 0;
-    transform: translate(-50%, -50%);
+@media (max-width: 768px) {
+  .card-row {
+    grid-template-columns: 1fr;
   }
-}
-
-::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
-      }
-    }
+  
+  .header-container {
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .header-title {
+    text-align: center;
+  }
+  
+  .high-risk-content,
+  .emergency-plan-content {
+    flex-direction: column;
   }
 }
 </style>