首页优化

2026-02-03 17:44:06 +08:00 · 2026-02-03 17:44:06 +08:00 · a85b1613fa
parent b5f7e4496f
commit a85b1613fa
5 changed files with 87 additions and 23 deletions
--- a/src/views/home/components/ProvincialChart.vue
+++ b/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 {
--- a/src/views/home/components/provincial/Bottom1-2.vue
+++ b/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>
+        <tbody class="t-body">
          <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) {
-          this.tableData = this.tableData.slice(0, 5)
-        }
+        // if (this.tableData.length > 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>
--- a/src/views/home/components/provincial/Center1.vue
+++ b/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)
      }
--- a/src/views/home/components/provincial/Center2.vue
+++ b/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"
--- a/src/views/home/components/provincial/Top2.vue
+++ b/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>