跳转

src/views/home/components/ProvincialCompany.vue

@@ -134,6 +134,33 @@
             :prop="column.prop"
             align="center"
           >
+
+            <!-- 表格列插槽：单独处理装备总数、工具总数 -->
+            <template #default="scope">
+              <!-- 装备总数：非0/非空变色 + 跳转 -->
+              <div
+                v-if="column.prop === 'maNum'"
+                :class="{ 'table-active-color': isEffectiveValue(scope.row.maNum) }"
+                @click="handleTableJump('equip', scope.row)"
+                style="cursor: pointer; user-select: none;"
+              >
+                {{ scope.row.maNum }}
+              </div>
+              <!-- 工具总数：非0/非空变色 + 跳转 -->
+              <div
+                v-else-if="column.prop === 'toolNum'"
+                :class="{ 'table-active-color': isEffectiveValue(scope.row.toolNum) }"
+                @click="handleTableJump('tool', scope.row)"
+                style="cursor: pointer; user-select: none;"
+              >
+                {{ scope.row.toolNum }}
+              </div>
+              <!-- 其他列保持原样 -->
+              <div v-else>
+                {{ scope.row[column.prop] }}
+              </div>
+            </template>
+
           </el-table-column>
         </el-table>
         <!-- 柱状图 -->
@@ -195,6 +222,37 @@ export default {
   },
 
   methods: {
+    // 1. 判断数值是否有效（非0/非null/非undefined/非空字符串）
+    isEffectiveValue(val) {
+      if (val === null || val === undefined || val === '') return false;
+      const numVal = Number(val);
+      return !isNaN(numVal) && numVal !== 0;
+    },
+    // 2. 表格单元格跳转方法（携带整行数据）
+    handleTableJump(type, rowData) {
+      // 仅当对应数值有效时才执行跳转
+      const targetVal = type === 'equip' ? rowData.maNum : rowData.toolNum;
+      if (!this.isEffectiveValue(targetVal)) {
+        return; // 无效数值不触发跳转
+      }
+      if (type === 'equip') {
+        console.log('跳转至装备详情页', {
+          equipTotal: rowData.maNum
+        });
+        this.$router.push({
+          path: '/equipment/equipment-ledger',
+          query: { company: rowData.companyName, total: rowData.maNum }
+        });
+      } else if (type === 'tool') {
+        console.log('跳转至工具详情页', {
+          toolTotal: rowData.toolNum
+        });
+        this.$router.push({
+          path: '/toolsManage/toolsLedger',
+          query: { company: rowData.companyName, total: rowData.toolNum }
+        });
+      }
+    },
     async getDataAll() {
       try {
         const res = await getDeviceNumAll()
@@ -607,4 +665,16 @@ export default {
 .scroll-list li.odd {
   background-color: #ebf8f3;
 }
+
+// 表格有效数值（非0/非空）的样式
+.table-active-color {
+  color: #1890ff !important; // 蓝色（可修改为你需要的颜色）
+  font-weight: 700 !important; // 加粗突出
+}
+
+// 鼠标悬浮时的过渡效果（可选）
+.table-active-color:hover {
+  color: #096dd9 !important;
+  transition: color 0.2s ease;
+}
 </style>