首页优化

src/views/home/components/ProvincialChart.vue

@@ -190,6 +190,7 @@ export default {
       height: 350px;
       background: rgba(255, 255, 255, 0.91);
       border-radius: 5px;
+      overflow: hidden;
     }
 
     .bottom-1-1 {

src/views/home/components/provincial/Bottom1-2.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <TitleBox titleText="各单位在用率情况" @handleMore="handleMore" :showTab="true" @handleTab="handleTab" />
-    <div>
+    <div class="t-table">
       <table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center">
-        <!-- 双层表头 -->
         <thead>
-          <!-- 第一行：跨列合并 -->
           <tr>
             <th>排名</th>
             <th>单位名称</th>
@@ -14,11 +12,9 @@
           </tr>
         </thead>
 
-        <!-- 表体：使用 v-for 渲染数据 -->
+        <tbody class="t-body">
-        <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: 180px; font-size: 14px">{{ row.name }}</td> -->
             <td style="width: 180px">
               <el-tooltip
                 effect="dark"
@@ -82,9 +78,9 @@ export default {
         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) {
+        // if (this.tableData.length > 5) {
-          this.tableData = this.tableData.slice(0, 5)
+        //   this.tableData = this.tableData.slice(0, 5)
-        }
+        // }
       } catch (error) {
         console.log('🚀 ~ 各单位装备在用率情况 ~ error:', error)
       }
@@ -98,7 +94,7 @@ export default {
         background = 'linear-gradient( 90deg, rgba(78,172,255,0.2) 0%, rgba(78,172,255,0) 100%)'
       } else if (index === 2) {
         background = 'linear-gradient( 90deg, rgba(254,175,106,0.2) 0%, rgba(254,175,106,0) 100%)'
-      } else if (index === 3 || index === 4) {
+      } else {
         background = 'linear-gradient( 90deg, rgba(219,196,95,0.2) 0%, rgba(219,196,95,0) 100%)'
       }
       return {
@@ -115,7 +111,7 @@ export default {
         color = '#4EACFF' // 👈 第二名：蓝色
       } else if (index === 2) {
         color = '#FEAF6A' // 👈 第三名：橙色
-      } else if (index === 3 || index === 4) {
+      } else {
         color = '#DBC45F' // 👈 第四/五名：金色
       }
 
@@ -179,4 +175,21 @@ td:last-child {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
+thead th {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #fff;
+}
+
+.t-table {
+  height: 288px;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
 </style>

src/views/home/components/provincial/Center1.vue

@@ -141,7 +141,7 @@ export default {
         console.log('🚀 ~ getList ~ res:', res)
         if (!res.data) return
         this.tableData = res.data || []
-        if (this.tableData.length > 5) this.tableData = this.tableData.slice(0, 5)
+        // if (this.tableData.length > 5) this.tableData = this.tableData.slice(0, 5)
       } catch (error) {
         console.log('🚀 ~ getList ~ error:', error)
       }

src/views/home/components/provincial/Center2.vue

@@ -56,11 +56,6 @@
         <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: 230px; text-align: left">
-              <span class="pro-name" :title="row.projectName">
-                {{ row.projectName }}
-              </span>
-            </td> -->
             <td style="width: 200px">
               <el-tooltip
                 effect="dark"

src/views/home/components/provincial/Top2.vue

@@ -11,11 +11,23 @@
         :key="item.id"
         @click="handleBtn(item.id)"
       >
-        <div class="num">{{ equipData[item.key] || 0 }}<span v-if="item.id == 4">%</span></div>
+        <div class="num">
+          <span v-if="item.id == 4"
+            >{{ mechanizationTotal > 0 ? mechanizationTotal : equipData[item.key] || 0 }}%</span
+          >
+          <span v-else>{{ equipData[item.key] || 0 }}</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>
+
+    <el-radio-group v-model="radio" class="radio-box" v-if="btnIndex == 4" @input="handleRadio">
+      <el-radio :label="1">线路工程</el-radio>
+      <el-radio :label="2">变电工程</el-radio>
+      <el-radio :label="3">电缆工程</el-radio>
+    </el-radio-group>
+
     <div class="map-box">
       <div class="echarts" id="mapChart"></div>
     </div>
@@ -53,6 +65,9 @@ export default {
         configuration: 0, // 配置率
         mechanization: 0, // 机械化率
       },
+      radio: 1,
+      // 机械化率总数
+      mechanizationTotal: 0,
     }
   },
   created() {
@@ -65,6 +80,9 @@ export default {
       this.cityData = []
       this.getInfo()
     },
+    handleRadio(val) {
+      this.getInfo()
+    },
     async getInfo() {
       try {
         const { data } = await getTotalEquipmentApi()
@@ -86,7 +104,34 @@ export default {
               value,
             }
           })
-        } else {
+        }
+        if (this.btnIndex == 4) {
+          let type = ''
+          switch (this.radio) {
+            case 1:
+              type = '线路'
+              break
+            case 2:
+              type = '变电'
+              break
+            case 3:
+              type = '电缆'
+              break
+          }
+          res = await getMechanizationRateApi({ type })
+          if (!res.data) return
+          this.mechanizationTotal = res.data.find((item) => item.dataType == 'total')?.mechanizationRate
+          res.data = res.data.filter((item) => item.cityName)
+          this.cityData = res.data.map((item) => {
+            return {
+              cityName: item.cityName,
+              mechanizationRate: item.mechanizationRate,
+              dataType: item.dataType,
+              companyName: item.companyName,
+              value: [0, 0, item.mechanizationRate],
+            }
+          })
+        } else if (this.btnIndex == 2 || this.btnIndex == 3) {
           // res = await getEquipmentNumberApi()
           res = await getUnitEquipmentConfigurationApi()
           if (!res.data) return
@@ -98,7 +143,6 @@ export default {
             return {
               ...item,
               value,
-              // deptName: item.name,
             }
           })
         }
@@ -159,7 +203,7 @@ export default {
                 if (data.cityName === '合肥市') {
                   const hefeiList = arr.filter((item) => item.cityName === '合肥市')
                   res =
-                    "<div style='display:flex;'>" +
+                    '<div>' +
                     this.renderOneCompany(hefeiList[0], this.btnIndex) +
                     this.renderOneCompany(hefeiList[1], this.btnIndex) +
                     '</div>'
@@ -439,14 +483,23 @@ export default {
       }
 
       if (btnIndex == 4) {
+        let title = ''
+        if (this.radio == 1) {
+          title = '线路工程机械化率配置率'
+        } else if (this.radio == 2) {
+          title = '变电工程机械化率配置率'
+        } else if (this.radio == 3) {
+          title = '电缆工程机械化率配置率'
+        }
+
         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 +
+          data.companyName +
           '</div>' +
-          this.renderItem('机械化率', data.mechanization, '%') +
+          this.renderItem(title, data.mechanizationRate, '%') +
           '</div>'
         )
       }
@@ -528,6 +581,7 @@ export default {
 }
 
 // 多选框
+.radio-box,
 .circle-checkbox {
   position: absolute;
   right: -30px;
@@ -535,6 +589,7 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  z-index: 99;
 }
 </style>