diff --git a/src/api/wsScreen/index.js b/src/api/wsScreen/index.js
index 31a596a9..86c796e5 100644
--- a/src/api/wsScreen/index.js
+++ b/src/api/wsScreen/index.js
@@ -42,10 +42,11 @@ export const getProjectEquipmentApi = () => {
 }
 
 // 各单位装备在用率情况
-export const getDeptEquipmentApi = () => {
+export const getDeptEquipmentApi = (data) => {
   return request({
     url: '/material-mall/provinceScreen/getDeptEquipment',
     method: 'get',
+    params: data,
   })
 }
 
diff --git a/src/assets/images/hgnb-1.png b/src/assets/images/hgnb-1.png
new file mode 100644
index 00000000..aaf6ea62
Binary files /dev/null and b/src/assets/images/hgnb-1.png differ
diff --git a/src/assets/images/hgnb-2.png b/src/assets/images/hgnb-2.png
new file mode 100644
index 00000000..c14f03c5
Binary files /dev/null and b/src/assets/images/hgnb-2.png differ
diff --git a/src/assets/images/hgnb-3.png b/src/assets/images/hgnb-3.png
new file mode 100644
index 00000000..14b56d64
Binary files /dev/null and b/src/assets/images/hgnb-3.png differ
diff --git a/src/assets/images/hgnb-4.png b/src/assets/images/hgnb-4.png
new file mode 100644
index 00000000..738ae0e6
Binary files /dev/null and b/src/assets/images/hgnb-4.png differ
diff --git a/src/assets/images/hgnb-5.png b/src/assets/images/hgnb-5.png
new file mode 100644
index 00000000..50c58255
Binary files /dev/null and b/src/assets/images/hgnb-5.png differ
diff --git a/src/assets/images/more.png b/src/assets/images/more.png
index 72865b6b..ec3282f3 100644
Binary files a/src/assets/images/more.png and b/src/assets/images/more.png differ
diff --git a/src/assets/images/nb-img-1.png b/src/assets/images/nb-img-1.png
index ee1d70e5..19502693 100644
Binary files a/src/assets/images/nb-img-1.png and b/src/assets/images/nb-img-1.png differ
diff --git a/src/assets/images/nb-img-2.png b/src/assets/images/nb-img-2.png
index 52728b64..6a10f5ac 100644
Binary files a/src/assets/images/nb-img-2.png and b/src/assets/images/nb-img-2.png differ
diff --git a/src/assets/images/nb-img-3.png b/src/assets/images/nb-img-3.png
index 6ae8dfa1..ac013a66 100644
Binary files a/src/assets/images/nb-img-3.png and b/src/assets/images/nb-img-3.png differ
diff --git a/src/assets/images/nb-img-4.png b/src/assets/images/nb-img-4.png
index 8fb037c2..13032576 100644
Binary files a/src/assets/images/nb-img-4.png and b/src/assets/images/nb-img-4.png differ
diff --git a/src/assets/images/nb-img-5.png b/src/assets/images/nb-img-5.png
new file mode 100644
index 00000000..91e1fc1f
Binary files /dev/null and b/src/assets/images/nb-img-5.png differ
diff --git a/src/assets/images/top2-icon.png b/src/assets/images/top2-icon.png
new file mode 100644
index 00000000..e144be62
Binary files /dev/null and b/src/assets/images/top2-icon.png differ
diff --git a/src/views/EquipmentLedger/components/EquAnalysis.vue b/src/views/EquipmentLedger/components/EquAnalysis.vue
index 62650a44..3982beb5 100644
--- a/src/views/EquipmentLedger/components/EquAnalysis.vue
+++ b/src/views/EquipmentLedger/components/EquAnalysis.vue
@@ -218,7 +218,7 @@ export default {
         },
         legend: {
           orient: 'vertical',
-          right: '3%',
+          left: '41%',
           top: 'center',
           itemWidth: 10,
           itemHeight: 10,
diff --git a/src/views/home/components/ProvincialChart.vue b/src/views/home/components/ProvincialChart.vue
index 7e8aa5c1..a18c890f 100644
--- a/src/views/home/components/ProvincialChart.vue
+++ b/src/views/home/components/ProvincialChart.vue
@@ -157,7 +157,7 @@ export default {
   .center-1,
   .center-2 {
     width: 928px;
-    height: 390px;
+    height: 405px;
     padding: 24px;
     background: rgba(255, 255, 255, 0.91);
     border-radius: 5px;
diff --git a/src/views/home/components/TitleBox.vue b/src/views/home/components/TitleBox.vue
index 7b41cd43..6b64d3b7 100644
--- a/src/views/home/components/TitleBox.vue
+++ b/src/views/home/components/TitleBox.vue
@@ -2,12 +2,16 @@
   <div>
     <div class="title-box">
       <div class="title-text">
-        {{ titleText }}
+        <span>{{ titleText }}</span>
+        <div v-if="showTab" class="tabs">
+          <span class="tab" :class="{ active: active == 1 }" @click="handleActive(1)">在用率</span>
+          <span class="tab" :class="{ active: active == 2 }" @click="handleActive(2)">周转率</span>
+        </div>
       </div>
-      
+
       <div class="title-more" @click="handleMore">
         <span class="more-text">更多</span>
-        <img src="@/assets/images/more.png" style="width: 14px; height: 14px" alt="" />
+        <img src="@/assets/images/more.png" style="width: 16px; height: 16px" alt="" />
       </div>
     </div>
   </div>
@@ -20,14 +24,24 @@ export default {
       type: String,
       default: '',
     },
+    showTab: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
-    return {}
+    return {
+      active: 1,
+    }
   },
   methods: {
     handleMore() {
       this.$emit('handleMore')
     },
+    handleActive(index) {
+      this.active = index
+      this.$emit('handleTab', index)
+    },
   },
 }
 </script>
@@ -43,9 +57,10 @@ export default {
     font-weight: bold;
     font-size: 16px;
     color: #333;
-    text-align: left;
+    display: flex;
+    // align-items: flex-start;
   }
-  
+
   .title-more {
     display: flex;
     align-items: center;
@@ -67,4 +82,22 @@ export default {
     }
   }
 }
+.tabs {
+  margin-left: 20px;
+  display: flex;
+  align-items: flex-start;
+}
+.tab {
+  cursor: pointer;
+  margin-right: 15px;
+  height: 18px;
+  font-weight: 400;
+  font-size: 12px;
+  color: #3f3f3f;
+
+  &.active {
+    color: #2cbab2;
+    border-bottom: 2px solid #2cbab2;
+  }
+}
 </style>
diff --git a/src/views/home/components/provincial/Bottom1-2.vue b/src/views/home/components/provincial/Bottom1-2.vue
index da8c5bdf..43557da6 100644
--- a/src/views/home/components/provincial/Bottom1-2.vue
+++ b/src/views/home/components/provincial/Bottom1-2.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TitleBox titleText="各单位在用率情况" @handleMore="handleMore" />
+    <TitleBox titleText="各单位在用率情况" @handleMore="handleMore" :showTab="true" @handleTab="handleTab" />
     <div>
       <table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
         <!-- 双层表头 -->
@@ -9,8 +9,8 @@
           <tr>
             <th>排名</th>
             <th>单位名称</th>
-            <th>在用率</th>
-            <th>周转率</th>
+            <th v-if="showTab == 1" @click="handleSort(1)">在用率<i class="el-icon-sort" style="color: #2cbab2" /></th>
+            <th v-if="showTab == 2" @click="handleSort(2)">周转率<i class="el-icon-sort" style="color: #2cbab2" /></th>
           </tr>
         </thead>
 
@@ -32,8 +32,8 @@
               </el-tooltip>
             </td>
 
-            <td class="num">{{ row.proportion }}%</td>
-            <td>
+            <td v-if="showTab == 1" class="num">{{ row.proportion }}%</td>
+            <td v-if="showTab == 2">
               <span class="num">{{ row.turnoverRate }}</span> <span style="font-size: 14px">次/年</span></td
             >
           </tr>
@@ -60,15 +60,26 @@ export default {
   data() {
     return {
       tableData: [],
+      showTab: 1,
+      sort1: 'proportion_asc',
+      sort2: 'turnoverRate_asc',
     }
   },
   mounted() {
     this.getList()
   },
   methods: {
+    handleSort(tab) {
+      if (tab === 1) {
+        this.sort1 = this.sort1 === 'proportion_asc' ? 'proportion_desc' : 'proportion_asc'
+      } else {
+        this.sort2 = this.sort2 === 'turnoverRate_asc' ? 'turnoverRate_desc' : 'turnoverRate_asc'
+      }
+      this.getList()
+    },
     async getList() {
       try {
-        const res = await getDeptEquipmentApi()
+        const res = await getDeptEquipmentApi({ sort: this.showTab === 1 ? this.sort1 : this.sort2 })
         console.log('🚀 ~ 各单位装备在用率情况 ~ res:', res)
         this.tableData = res.data || []
         if (this.tableData.length > 5) {
@@ -115,6 +126,9 @@ export default {
     handleMore() {
       this.$refs.usageRateMore.openDialog()
     },
+    handleTab(tab) {
+      this.showTab = tab
+    },
   },
 }
 </script>
diff --git a/src/views/home/components/provincial/Bottom2.vue b/src/views/home/components/provincial/Bottom2.vue
index 022dbd15..6c804b87 100644
--- a/src/views/home/components/provincial/Bottom2.vue
+++ b/src/views/home/components/provincial/Bottom2.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <TitleBox titleText="装备在用率统计" @handleMore="handleMore" />
+    <TitleBox titleText="装备在用率统计" @handleMore="handleMore" :showTab="true" @handleTab="handleTab" />
 
     <div class="topView">
-      <div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
+      <div class="tabs">
         <div class="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">总体</div>
         <div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">线路</div>
         <div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
@@ -15,10 +15,11 @@
     <div class="bottom-box">
       <div class="bottom-item" v-for="(item, index) in tableList" :key="index">
         <div class="item-top-title">
-          <img v-if="index == 0" src="@/assets/images/nb-1.png" style="width: 27px; height: 31px" alt="" />
-          <img v-if="index == 1" src="@/assets/images/nb-2.png" style="width: 27px; height: 31px" alt="" />
-          <img v-if="index == 2" src="@/assets/images/nb-3.png" style="width: 27px; height: 31px" alt="" />
-          <img v-if="index == 3" src="@/assets/images/nb-4.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 0" src="@/assets/images/hgnb-1.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 1" src="@/assets/images/hgnb-2.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 2" src="@/assets/images/hgnb-3.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 3" src="@/assets/images/hgnb-4.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 4" src="@/assets/images/hgnb-5.png" style="width: 27px; height: 31px" alt="" />
           <span>{{ item.name || '-' }}</span>
         </div>
         <div class="img-box">
@@ -26,14 +27,15 @@
           <img v-if="index == 1" src="@/assets/images/nb-img-2.png" flt="contain" alt="" />
           <img v-if="index == 2" src="@/assets/images/nb-img-3.png" flt="contain" alt="" />
           <img v-if="index == 3" src="@/assets/images/nb-img-4.png" flt="contain" alt="" />
+          <img v-if="index == 4" src="@/assets/images/nb-img-5.png" flt="contain" alt="" />
         </div>
         <div class="bt-content">
-          <div class="bt-content-item">
+          <div class="bt-content-item" v-if="showTab == 1">
             <span class="dot"></span>
             <span style="margin-right: 10px">在用率</span>
             <span class="num">{{ item.proportion || 0 }}%</span>
           </div>
-          <div class="bt-content-item">
+          <div class="bt-content-item" v-if="showTab == 2">
             <span class="dot"></span>
             <span style="margin-right: 10px">周转率</span>
             <span class="num"
@@ -58,12 +60,13 @@ export default {
   name: 'Bottom2',
   components: {
     TitleBox,
-    EquipUsageRateMore
+    EquipUsageRateMore,
   },
   data() {
     return {
       tabIndex: 0,
       tableList: [],
+      showTab: 1,
     }
   },
   created() {
@@ -89,8 +92,8 @@ export default {
         }
         const res = await getUsageStatisticsApi({ type })
         if (!res.data) return
-        if (res.data.length > 4) {
-          this.tableList = res.data.slice(0, 4)
+        if (res.data.length > 5) {
+          this.tableList = res.data.slice(0, 5)
         } else {
           this.tableList = res.data
         }
@@ -102,6 +105,9 @@ export default {
     handleMore() {
       this.$refs.equipUsageRateMore.openDialog()
     },
+    handleTab(tab) {
+      this.showTab = tab
+    },
   },
 }
 </script>
@@ -123,18 +129,27 @@ export default {
   justify-content: space-between;
   margin-bottom: 15px;
 
+  .tabs {
+    padding: 6px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #dcfafa;
+    border-radius: 4px;
+  }
+
   .topTab {
     margin-right: 10px;
     width: 60px;
-    height: 24px;
     border-radius: 3px;
-    border: 1px solid #cccccc;
     text-align: center;
     cursor: pointer;
+    font-size: 14px;
   }
   .active {
-    background: #2cbab2;
-    color: #fff;
+    background: #fff;
+    color: #2cbab2;
   }
 }
 
@@ -160,6 +175,8 @@ export default {
     }
 
     .item-top-title {
+      height: 36px;
+      margin-bottom: 15px;
       padding-right: 5px;
       font-size: 13px;
       display: flex;
@@ -175,7 +192,7 @@ export default {
     }
 
     .bt-content {
-      margin-top: 20px;
+      margin-top: 30px;
       padding: 0 20px;
       .dot {
         width: 6px;
diff --git a/src/views/home/components/provincial/Center1.vue b/src/views/home/components/provincial/Center1.vue
index d78c028d..3c11bb00 100644
--- a/src/views/home/components/provincial/Center1.vue
+++ b/src/views/home/components/provincial/Center1.vue
@@ -19,7 +19,13 @@
         <el-table-column prop="deptName" label="单位名称" min-width="110" />
   
         <!-- 装备价值 -->
-        <el-table-column prop="totalValue" label="装备价值（万元）" width="90">
+        <el-table-column prop="totalValue" label="装备价值（万元）" width="90" sortable>
+          <template #header>
+            <span>
+              装备价值（万元）
+              <i class="el-icon-sort" style="color: #2cbab2"/>
+            </span>
+          </template>
           <template slot-scope="scope">
             <span class="num num-color">
               {{ scope.row.totalValue || 0 }}
@@ -29,7 +35,13 @@
   
         <!-- 装备数量（台） -->
         <el-table-column label="装备数量（台）">
-          <el-table-column prop="totalEquipmentQuantity" label="总数" width="70">
+          <el-table-column prop="totalEquipmentQuantity" label="总数" width="70" sortable>
+            <template #header>
+              <span>
+                总数
+                <i class="el-icon-sort" style="color: #2cbab2"/>
+              </span>
+            </template>
             <template slot-scope="scope">
               <span class="num num-color">
                 {{ scope.row.totalEquipmentQuantity }}
@@ -58,7 +70,13 @@
   
         <!-- 配置率 -->
         <el-table-column label="配置率">
-          <el-table-column prop="configRate" label="总数" width="70">
+          <el-table-column prop="configRate" label="总数" width="70" sortable>
+            <template #header>
+              <span>
+                总数
+                <i class="el-icon-sort" style="color: #2cbab2"/>
+              </span>
+            </template>
             <template slot-scope="scope">
               <span class="num num-color">
                 {{ scope.row.configRate }}
@@ -147,4 +165,8 @@ export default {
 .table-sty ::v-deep .el-table__cell {
   padding: 7px 0;
 }
+/* 干掉原来的三角形 */
+::v-deep .caret-wrapper {
+  display: none;
+}
 </style>
diff --git a/src/views/home/components/provincial/Center2.vue b/src/views/home/components/provincial/Center2.vue
index 829a1c34..cadfaa0e 100644
--- a/src/views/home/components/provincial/Center2.vue
+++ b/src/views/home/components/provincial/Center2.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="center-box">
-    <TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 10px"/>
+    <TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 25px" />
 
     <el-select
       class="select-box"
@@ -12,13 +12,13 @@
       filterable
       size="mini"
       @change="changeProCode"
-      style="width: 316px"
+      style="width: 240px"
     >
-      <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"/>
+      <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
     </el-select>
 
     <div class="topView">
-      <div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
+      <div class="tabs">
         <div class="topTab" :class="{ active: tabIndex == '线路' }" @click="changTab('线路')">线路</div>
         <div class="topTab" :class="{ active: tabIndex == '变电' }" @click="changTab('变电')">变电</div>
         <div class="topTab" :class="{ active: tabIndex == '电缆' }" @click="changTab('电缆')">电缆</div>
@@ -41,35 +41,48 @@
       <table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center; font-size: 14px">
         <!-- 双层表头 -->
         <thead>
-        <!-- 第一行：跨列合并 -->
-        <tr>
-          <th>排名</th>
-          <th style="width: 260px">工程名称</th>
-          <th>在用装备数（台）</th>
-          <th>规模（拆单公里）</th>
-          <th>百公里线路装备使用情况</th>
-        </tr>
+          <!-- 第一行：跨列合并 -->
+          <tr>
+            <th>排名</th>
+            <th>工程名称</th>
+            <th @click="handleSort">在用装备数（台）<i class="el-icon-sort" style="color: #2cbab2"/></th>
+            <th>电压等级(kV)</th>
+            <th>规模（拆单公里）</th>
+            <th>百公里线路装备使用情况</th>
+          </tr>
         </thead>
 
         <!-- 表体：使用 v-for 渲染数据 -->
         <tbody>
-        <tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
-          <td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
-          <td style="width: 260px; text-align: left">
+          <tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
+            <td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
+            <!-- <td style="width: 230px; text-align: left">
               <span class="pro-name" :title="row.projectName">
                 {{ row.projectName }}
               </span>
-          </td>
-          <td class="num" style="width: 140px">{{ row.inUser }}</td>
-          <td class="num" style="width: 140px">{{ row.scale }}</td>
-          <td class="num" style="width: 190px">{{ row.usage }}</td>
-        </tr>
+            </td> -->
+            <td style="width: 200px">
+              <el-tooltip
+                effect="dark"
+                :content="row.projectName"
+                placement="top"
+              >
+                <div class="name-cell">
+                  <span class="ellipsis">{{ row.projectName }}</span>
+                </div>
+              </el-tooltip>
+            </td>
+            <td class="num" style="width: 140px">{{ row.inUser }}</td>
+            <td class="num" style="width: 140px">{{ row.voltage }}</td>
+            <td class="num" style="width: 140px">{{ row.scale }}</td>
+            <td class="num" style="width: 190px">{{ row.usage }}</td>
+          </tr>
         </tbody>
       </table>
       <el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
     </div>
 
-    <ProEquipMore ref="proEquipMore"/>
+    <ProEquipMore ref="proEquipMore" />
   </div>
 </template>
 
@@ -82,7 +95,7 @@ export default {
   name: 'Center2',
   components: {
     TitleBox,
-    ProEquipMore
+    ProEquipMore,
   },
   data() {
     return {
@@ -92,7 +105,8 @@ export default {
       proNum: 0,
       equipNum: 0,
       tabIndex: '线路',
-      tableData: []
+      tableData: [],
+      sort: 'asc',
     }
   },
   mounted() {
@@ -100,6 +114,10 @@ export default {
     this.getProList()
   },
   methods: {
+    handleSort() {
+      this.sort = this.sort === 'asc' ? 'desc' : 'asc'
+      this.getList()
+    },
     changTab(type) {
       if (this.tabIndex === type) {
         return
@@ -113,7 +131,8 @@ export default {
       try {
         const params = {
           type: this.tabIndex,
-          proCode: this.proCode
+          proCode: this.proCode,
+          sort: this.sort
         }
         const res = await getEquipmentUseApi(params)
         this.tableData = res.data.equipmentUse || []
@@ -156,7 +175,7 @@ export default {
       return {
         background,
         height: '40px', // 👈 统一行高
-        borderRadius: '5px'
+        borderRadius: '5px',
       }
     },
     indexStyle(index) {
@@ -172,10 +191,10 @@ export default {
       }
 
       return {
-        color
+        color,
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -185,8 +204,8 @@ export default {
 
   .select-box {
     position: absolute;
-    top: 3px;
-    right: 98px;
+    top: 29px;
+    left: 0px;
   }
 }
 
@@ -249,19 +268,27 @@ td:last-child {
   align-items: center;
   justify-content: space-between;
 
+  .tabs {
+    padding: 6px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #dcfafa;
+    border-radius: 4px;
+  }
+
   .topTab {
     margin-right: 10px;
     width: 60px;
-    height: 24px;
     border-radius: 3px;
-    border: 1px solid #cccccc;
     text-align: center;
     cursor: pointer;
+    font-size: 14px;
   }
-
   .active {
-    background: #2cbab2;
-    color: #fff;
+    background: #fff;
+    color: #2cbab2;
   }
 }
 
@@ -282,4 +309,17 @@ td:last-child {
     border-radius: 5px;
   }
 }
+.name-cell {
+  height: 100%;
+  display: flex;
+  align-items: center; // ✅ 垂直居中
+  justify-content: center; // 如果你想左对齐就删掉
+  .ellipsis {
+    max-width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
+}
 </style>
diff --git a/src/views/home/components/provincial/Map/assets/img/dialog-2.png b/src/views/home/components/provincial/Map/assets/img/dialog-2.png
new file mode 100644
index 00000000..883b8b28
Binary files /dev/null and b/src/views/home/components/provincial/Map/assets/img/dialog-2.png differ
diff --git a/src/views/home/components/provincial/Top2.vue b/src/views/home/components/provincial/Top2.vue
index 88619c14..d42bad40 100644
--- a/src/views/home/components/provincial/Top2.vue
+++ b/src/views/home/components/provincial/Top2.vue
@@ -1,9 +1,20 @@
 <template>
-  <div>
+  <div style="position: relative">
     <div class="top-btns">
-      <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
+      <!-- <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
       <div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
-      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
+      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div> -->
+      <div
+        class="btn"
+        :class="{ active: btnIndex == item.id }"
+        v-for="(item, index) in btnList"
+        :key="item.id"
+        @click="handleBtn(item.id)"
+      >
+        <div class="num">{{ equipData[item.key] || 0 }}<span v-if="item.id == 4">%</span></div>
+        <div class="name">{{ item.name }}</div>
+        <img v-show="btnIndex == item.id" src="@/assets/images/top2-icon.png" class="icon" alt="" />
+      </div>
     </div>
     <div class="map-box">
       <div class="echarts" id="mapChart"></div>
@@ -12,7 +23,12 @@
 </template>
 
 <script>
-import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
+import {
+  getUnitEquipmentConfigurationApi,
+  getEquipmentNumberApi,
+  getMechanizationRateApi,
+  getTotalEquipmentApi,
+} from '@/api/wsScreen'
 import * as echarts from 'echarts'
 import 'echarts-gl'
 
@@ -25,6 +41,18 @@ export default {
     return {
       btnIndex: 1,
       cityData: [],
+      btnList: [
+        { id: 1, name: '总价值(万元)', key: 'totalPrice' },
+        { id: 2, name: '装备总量(台)', key: 'total' },
+        { id: 3, name: '配置率(分)', key: 'configuration' },
+        { id: 4, name: '机械化率', key: 'mechanization' },
+      ],
+      equipData: {
+        totalPrice: 0, // 总价值
+        total: 0, // 装备总数
+        configuration: 0, // 配置率
+        mechanization: 0, // 机械化率
+      },
     }
   },
   created() {
@@ -39,6 +67,11 @@ export default {
     },
     async getInfo() {
       try {
+        const { data } = await getTotalEquipmentApi()
+        this.equipData.total = data.totalEquipmentQuantity || 0
+        this.equipData.totalPrice = data.totalValue || 0
+        this.equipData.configuration = data.configuration || 0
+        this.equipData.mechanization = data.mechanization || 0
         let res = null
         if (this.btnIndex == 1) {
           res = await getUnitEquipmentConfigurationApi()
@@ -53,8 +86,9 @@ export default {
               value,
             }
           })
-        } else if (this.btnIndex == 2) {
-          res = await getEquipmentNumberApi()
+        } else {
+          // res = await getEquipmentNumberApi()
+          res = await getUnitEquipmentConfigurationApi()
           if (!res.data) return
           res.data = res.data.filter((item) => item.location)
           this.cityData = res.data.map((item) => {
@@ -64,11 +98,9 @@ export default {
             return {
               ...item,
               value,
-              deptName: item.name,
+              // deptName: item.name,
             }
           })
-        } else if (this.btnIndex == 3) {
-          res = await getMechanizationRateApi()
         }
         this.$nextTick(() => {
           console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
@@ -100,75 +132,40 @@ export default {
           borderWidth: 0,
           padding: 0, // 👈 关键 1：干掉外壳内边距
           extraCssText: 'box-shadow:none;border-radius:0;', // 👈 关键 2：干掉阴影 & 圆角
+          position: function (point, params, dom, rect, size) {
+            const tooltipWidth = size.contentSize[0]
+            const tooltipHeight = size.contentSize[1]
+            const viewHeight = size.viewSize[1]
 
-          formatter: function (e) {
+            let x = point[0] - tooltipWidth / 2
+            let y = 0
+
+            if (point[1] < viewHeight / 2) {
+              // 👆 地图上半部分 → tooltip 显示在鼠标下方（靠顶部）
+              y = point[1] + 10
+            } else {
+              // 👇 地图下半部分 → tooltip 显示在鼠标上方（靠底部）
+              y = point[1] - tooltipHeight - 10
+            }
+
+            return [x, y]
+          },
+          formatter: (e) => {
             let n = e.name
             let res = ''
             arr.forEach((data) => {
-              // console.log('🚀 ~ 提示数据 ~ data:', data)
               if (data.cityName === n) {
-                res =
-                  "<div style='width: 260px;height: 285px; background: url(" +
-                  require('./Map/assets/img/dialog.png') +
-                  ") no-repeat;background-size:100% 100%;'>" +
-                  "<div style='width: 260px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
-                  data.deptAbbreviation +
-                  '</div>' +
-                  "<div style='margin-top:10px;margin-bottom:5px;width: 260px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>装备价值：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666; font-size: 18px'>" +
-                  data.totalValue +
-                  " <span style='color:#666;font-size:14px'> 万元</span>" +
-                  '</div>' +
-                  '</div>' +
-                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>装备数量：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
-                  data.totalEquipmentQuantity +
-                  "<span style='color:#666;font-size:14px'> 台</span>" +
-                  '</div>' +
-                  '</div>' +
-                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>配置率：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
-                  data.configRate +
-                  "<span style='color:#666;font-size:14px'> %</span>" +
-                  '</div>' +
-                  '</div>' +
-                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>线路数量：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
-                  data.lineNum +
-                  "<span style='color:#666;font-size:14px'> 台</span>" +
-                  '</div>' +
-                  '</div>' +
-                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>变电数量：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
-                  data.substationNum +
-                  "<span style='color:#666;font-size:14px'> 台</span>" +
-                  '</div>' +
-                  '</div>' +
-                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
-                  ") no-repeat;background-size:100%;margin-left:20px'>" +
-                  '<div>电缆数量：' +
-                  '</div>' +
-                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
-                  data.cableNum +
-                  "<span style='color:#666;font-size:14px'> 台</span>" +
-                  '</div>' +
-                  '</div>' +
-                  '</div>'
+                // console.log('🚀 ~ 提示数据 ~ data:', data)
+                if (data.cityName === '合肥市') {
+                  const hefeiList = arr.filter((item) => item.cityName === '合肥市')
+                  res =
+                    "<div style='display:flex;'>" +
+                    this.renderOneCompany(hefeiList[0], this.btnIndex) +
+                    this.renderOneCompany(hefeiList[1], this.btnIndex) +
+                    '</div>'
+                } else {
+                  res = this.renderOneCompany(data, this.btnIndex)
+                }
               }
             })
             return res
@@ -335,10 +332,11 @@ export default {
               //   },
               // },
             },
-            itemStyle: {
-              color: 'rgba(217, 94, 0, 1)',
-            },
-            zlevel: 1,
+            // 红点样式
+            // itemStyle: {
+            //   color: 'rgba(217, 94, 0, 1)',
+            // },
+            // zlevel: 1,
           },
         ],
         graphic: {
@@ -394,27 +392,126 @@ export default {
       })
       return myChart
     },
+    renderOneCompany(data, btnIndex) {
+      if (btnIndex == 1) {
+        return (
+          "<div style='width:260px;background:url(" +
+          require('./Map/assets/img/dialog-2.png') +
+          ") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
+          "<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
+          data.deptName +
+          '</div>' +
+          this.renderItem('装备价值', data.totalValue, '万元') +
+          '</div>'
+        )
+      }
+
+      if (btnIndex == 2) {
+        return (
+          "<div style='width:260px;background:url(" +
+          require('./Map/assets/img/dialog.png') +
+          ") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
+          "<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
+          data.deptName +
+          '</div>' +
+          this.renderItem('装备总量', data.totalEquipmentQuantity, '台') +
+          this.renderItem('线路数量', data.lineNum, '台') +
+          this.renderItem('变电数量', data.substationNum, '台') +
+          this.renderItem('电缆数量', data.cableNum, '台') +
+          '</div>'
+        )
+      }
+
+      if (btnIndex == 3) {
+        return (
+          "<div style='width:260px;background:url(" +
+          require('./Map/assets/img/dialog.png') +
+          ") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
+          "<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
+          data.deptName +
+          '</div>' +
+          this.renderItem('总配置率', data.configRate, '分') +
+          this.renderItem('线路设备配置率', data.valueA, '分') +
+          this.renderItem('变电设备配置率', data.valueB, '分') +
+          this.renderItem('电缆设备配置率', data.valueC, '分') +
+          '</div>'
+        )
+      }
+
+      if (btnIndex == 4) {
+        return (
+          "<div style='width:260px;background:url(" +
+          require('./Map/assets/img/dialog-2.png') +
+          ") no-repeat;background-size:100% 100%;margin-right:-10px;padding-bottom:30px'>" +
+          "<div style='height:34px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:17px'>" +
+          data.deptName +
+          '</div>' +
+          this.renderItem('机械化率', data.mechanization, '%') +
+          '</div>'
+        )
+      }
+    },
+    renderItem(label, value, unit) {
+      return (
+        "<div style='width:260px;margin-top:10px;height:25px;display:flex;align-items:center;font-size:12px;color:#666;margin-left:20px'>" +
+        '<div>' +
+        label +
+        '：</div>' +
+        "<div style='margin-left:10px;font-size:16px'>" +
+        (value || 0) +
+        "<span style='font-size:12px'> " +
+        unit +
+        '</span>' +
+        '</div></div>'
+      )
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
+.num {
+  font-family: OPPOSans;
+  font-size: 24px;
+  line-height: 22px;
+}
+.name {
+  margin-top: 6px;
+  font-weight: 400;
+  font-size: 14px;
+}
+.icon {
+  width: 56px;
+  height: 54px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 .top-btns {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  position: absolute;
+  z-index: 9;
 
   .btn {
-    margin-right: 24px;
-    height: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: bold;
-    font-size: 16px;
     cursor: pointer;
+    width: 168px;
+    height: 80px;
+    background: #fff;
+    border-radius: 10px 10px 10px 10px;
+    margin-bottom: 16px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #3f3f3f;
+    position: relative;
   }
 
   .active {
-    color: #2cbab2;
-    border-bottom: 2px solid #2cbab2;
+    color: #fff;
+    background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
   }
 }
 
@@ -429,4 +526,42 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+// 多选框
+.circle-checkbox {
+  position: absolute;
+  right: -30px;
+  bottom: -10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>
+
+<style>
+/* 圆圈外框 */
+.circle-checkbox .el-checkbox__inner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+/* 选中状态背景 */
+.circle-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #3bc6c1;
+  border-color: #3bc6c1;
+}
+
+/* 中间的“点” */
+.circle-checkbox .el-checkbox__inner::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  position: absolute;
+  left: 3.6px;
+  top: 3.6px;
+  transform: none;
+}
 </style>