首页

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

@@ -26,6 +26,7 @@
           </tr>
         </tbody>
       </table>
+      <el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
     </div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="center-box">
-    <TitleBox titleText="工程在用装备情况" @handleMore="handleMore" />
+    <TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 10px" />
 
     <el-select
       class="select-box"
@@ -17,6 +17,58 @@
     >
       <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="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">线路</div>
+        <div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
+        <div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">电缆</div>
+      </div>
+      <div>
+        <div class="num-view">
+          <div class="num-item">
+            <div>项目数</div>
+            <div class="num">{{ equipNum }} <span class="unit-text">个</span></div>
+          </div>
+          <div class="num-item">
+            <div>在用装备数</div>
+            <div class="num">{{ equipNum }} <span class="unit-text">台</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <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>
+        </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">
+              <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>
+        </tbody>
+      </table>
+      <el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
+    </div>
   </div>
 </template>
 
@@ -34,12 +86,43 @@ export default {
       proCode: '',
       proCodeList: [],
       options: [],
+      proNum: 0,
+      equipNum: 0,
+      tabIndex: 0,
+      tableData: [],
     }
   },
   mounted() {
+    this.getList()
     this.getProList()
   },
   methods: {
+    changTab(type) {
+      if (this.tabIndex === type) {
+        return
+      }
+      this.tabIndex = type
+      console.log('🚀 ~ type:', type)
+      console.log('🚀 ~ this.tabIndex:', this.tabIndex)
+      this.getList()
+    },
+    async getList() {
+      try {
+        const params = {
+          type: this.tabIndex,
+          proCode: this.proCode,
+        }
+        const res = await getEquipmentUseApi(params)
+        this.tableData = res.data.equipmentUse || []
+        if (this.tableData.length > 5) {
+          this.tableData = this.tableData.slice(0, 5)
+        }
+        this.proNum = res.data.proNum || 0
+        this.equipNum = res.data.equipmentNum || 0
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
     async getProList() {
       try {
         const res = await getVoltageLevelApi()
@@ -50,12 +133,45 @@ export default {
     },
     changeProCode(val) {
       this.proCode = val.length > 0 ? val.join(',') : ''
-      // this.getList()
+      this.getList()
     },
     handleMore() {
       console.log('🚀 ~ methods.handleMore:')
     },
+    rowStyle(index) {
+      let background = ''
 
+      if (index === 0) {
+        background = 'linear-gradient(90deg, rgba(44,186,178,0.2) 0%, rgba(44,186,178,0) 100%)'
+      } else if (index === 1) {
+        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) {
+        background = 'linear-gradient( 90deg, rgba(219,196,95,0.2) 0%, rgba(219,196,95,0) 100%)'
+      }
+      return {
+        background,
+        height: '40px', // 👈 统一行高
+        borderRadius: '5px',
+      }
+    },
+    indexStyle(index) {
+      let color = '#333'
+      if (index === 0) {
+        color = '#2CBAB2' // 👈 第一名：青绿
+      } else if (index === 1) {
+        color = '#4EACFF' // 👈 第二名：蓝色
+      } else if (index === 2) {
+        color = '#FEAF6A' // 👈 第三名：橙色
+      } else if (index === 3 || index === 4) {
+        color = '#DBC45F' // 👈 第四/五名：金色
+      }
+
+      return {
+        color,
+      }
+    },
   },
 }
 </script>
@@ -65,9 +181,94 @@ export default {
   position: relative;
 
   .select-box {
-    position: relative;
+    position: absolute;
-    top: -31px;
+    top: 3px;
-    left: 400px;
+    right: 98px;
+  }
+}
+
+.num {
+  font-family: OPPOSans;
+  font-size: 16px;
+}
+.unit-text {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 12px;
+  color: #333;
+}
+.index-num {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 14px;
+}
+.pro-name {
+  display: inline-block;
+  max-width: 260px;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: middle;
+}
+.row-sty {
+  height: 40px;
+  margin-bottom: 7px;
+  border-radius: 5px;
+}
+table {
+  border-collapse: separate;
+  border-spacing: 0 7px;
+}
+td {
+  background-clip: padding-box;
+}
+td:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+td:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.topView {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .topTab {
+    margin-right: 10px;
+    width: 60px;
+    height: 24px;
+    border-radius: 3px;
+    border: 1px solid #cccccc;
+    text-align: center;
+    cursor: pointer;
+  }
+  .active {
+    background: #2cbab2;
+    color: #fff;
+  }
+}
+
+.num-view {
+  display: flex;
+  align-items: center;
+
+  .num-item {
+    width: 196px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-right: 18px;
+    font-size: 14px;
+    color: #333;
+    background: linear-gradient(90deg, rgba(78, 172, 255, 0.2) 0%, rgba(78, 172, 255, 0) 100%);
+    border-radius: 5px;
   }
 }
 </style>

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

@@ -54,7 +54,7 @@
       </div>
 
       <div class="bottom-item-2">
-        <div class="bt-title">线路装备</div>
+        <div class="bt-title">变电装备</div>
         <div>装备数</div>
         <div class="num-text">{{ state2.num }}<span class="unit-text"> 台</span></div>
 
@@ -77,7 +77,7 @@
       </div>
 
       <div class="bottom-item-3">
-        <div class="bt-title">线路装备</div>
+        <div class="bt-title">电缆装备</div>
         <div>装备数</div>
         <div class="num-text">{{ state3.num }}<span class="unit-text"> 台</span></div>