跳转

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()
@@ -358,15 +416,15 @@ export default {
       const initShowEquip = equipTotals.some(v => v > 0);
       const initShowTool = toolTotals.some(v => v > 0);
       const initShowBoth = initShowEquip && initShowTool;
-      
+
       barChart.setOption({
         tooltip: {
           trigger: 'axis',
           formatter: (params) => {
             let res = `${params[0].name}<br/>`;
             params.forEach(p => {
-              const val = p.seriesName === '装备总数' 
+              const val = p.seriesName === '装备总数'
-                ? equipTotals[p.dataIndex] 
+                ? equipTotals[p.dataIndex]
                 : toolTotals[p.dataIndex];
               res += `${p.seriesName}: ${val}个<br/>`;
             });
@@ -374,9 +432,9 @@ export default {
           }
         },
         // ✅ 永久双图例，永不消失
-        legend: { 
+        legend: {
-          top: 0, 
+          top: 0,
-          right: 20, 
+          right: 20,
           data: ['装备总数', '工具总数'],
           selected: {
             '装备总数': initShowEquip,
@@ -385,7 +443,7 @@ export default {
         },
         grid: { left: '3%', right: '3%', bottom: '3%', top: '15%', containLabel: true },
         xAxis: {
-          type: 'category', 
+          type: 'category',
           data: companyNames,
           axisLabel: {
             fontSize: 13, interval: 0, lineHeight: 16,
@@ -399,7 +457,7 @@ export default {
             }
           }
         },
-        yAxis: initShowBoth 
+        yAxis: initShowBoth
           ? { // 双系列-固定阶梯刻度
               type: 'value',
               name: '数量（个）',
@@ -435,7 +493,7 @@ export default {
         const selectedSeries = Object.keys(params.selected).filter(key => params.selected[key]);
         // 判断是否同时显示两个系列
         const showBothSeries = selectedSeries.length > 1;
-        
+
         // ✅ 核心修复：单系列清空所有固定配置，强制线性轴生效
         let newYAxisConfig;
         if (showBothSeries) {
@@ -468,10 +526,10 @@ export default {
             splitLine: { lineStyle: { type: 'solid', color: '#e0e0e0' } }
           };
         }
-        
+
         // ✅ 关键：更新Y轴时添加 replaceMerge: true，强制覆盖旧配置（解决不生效核心）
         barChart.setOption({ yAxis: newYAxisConfig }, { replaceMerge: ['yAxis'], silent: true });
-        
+
         // 更新系列数据
         const newSeries = [];
         if (params.selected['装备总数']) {
@@ -607,4 +665,16 @@ export default {
 .scroll-list li.odd {
   background-color: #ebf8f3;
 }
-</style>
+
+// 表格有效数值（非0/非空）的样式
+.table-active-color {
+  color: #1890ff !important; // 蓝色（可修改为你需要的颜色）
+  font-weight: 700 !important; // 加粗突出
+}
+
+// 鼠标悬浮时的过渡效果（可选）
+.table-active-color:hover {
+  color: #096dd9 !important;
+  transition: color 0.2s ease;
+}
+</style>