修改客户所提基础问题

src/views/user/rent-facility/index.vue

@@ -2,7 +2,7 @@
     <div class="equipment-table">
         <h2 class="title">机械化施工装备配置率</h2>
 
-        <div v-show="!showSecondPage">
+        <div v-if="!showSecondPage">
             <el-table
                 :data="pagedData"
                 show-overflow-tooltip
@@ -53,13 +53,13 @@
                 :total="total"
             /> -->
         </div>
-
         <Line
-            v-show="showSecondPage"
+          v-if="showSecondPage"
-            :title="secondPageTitle"
+          :key="secondPageTitleId + '_' + secondPageTitle"
-			:secondPageTitleId="secondPageTitleId"
+          :title="secondPageTitle"
-            :table-data="detailTableData"
+          :secondPageTitleId="secondPageTitleId"
-            @back="handleBack"
+          :table-data="detailTableData"
+          @back="handleBack"
         />
     </div>
 </template>
@@ -116,16 +116,25 @@ onMounted(() => {
 
 // 钻取详情
 const handleDrill = async (row, type) => {
-	const res = await getDetailList({ companyId: row.companyId,configType:type })
+  // 1. 先清空旧数据并隐藏旧页面，避免组件未刷新
-	if(res.code ==200){
+  showSecondPage.value = false
-		//secondPageTitle.value = `${row.deptName}详情页面`;
+  detailTableData.value = []
-		secondPageTitle.value = `${row.companyName }详情页面`;
+
-		secondPageTitleId.value =row.companyId;
+  // 2. 调接口拿到详情数据
-		showSecondPage.value = true;
+  const res = await getDetailList({ companyId: row.companyId, configType: type })
-		detailTableData.value =res.rows
+  if (res.code === 200) {
-	} 
+    secondPageTitle.value = `${row.companyName}详情页面`
+    secondPageTitleId.value = row.companyId
+    detailTableData.value = res.rows
+
+    // 3. nextTick 等组件清理完后再显示
+    nextTick(() => {
+      showSecondPage.value = true
+    })
+  }
 }
 
+
 // 返回主页面
 const handleBack = () => {
     showSecondPage.value = false;

src/views/user/rent-facility/line.vue

@@ -25,14 +25,17 @@
              <el-table-column prop="combinedName" label="装备类目" width="120" /> 
             <el-table-column prop="name" label="装备名称" width="120" />
             <el-table-column label="基本配置标准（台/套）"  min-width="120"  align="center">
-                <el-table-column prop="standard" label="标准"  />
+                <el-table-column
+                    prop="standard"
+                    :label="`标准(${props.tableData && props.tableData[0] && props.tableData[0].labelVol || ''})`"
+                  />
             </el-table-column>
 			<!-- <el-table-column prop="type" label="装备种类" width="100"   /> -->
 			<el-table-column prop="desc" label="配置说明" width="100"   />
             <el-table-column prop="value" label="装备配置率赋值" width="200"   />
             <el-table-column prop="own" label="自有装备数量" width="150"  >
                 <template #default="{ row }">
-                    <span class="cell-yellow">{{ row.own }}</span>
+                    <span class="link" @click="showOwnDetail(row)">{{ row.own }}</span>
                 </template>
             </el-table-column>
             <el-table-column prop="rent" label="租赁装备数量" width="120">
@@ -54,12 +57,54 @@
             <el-table-column prop="reason" label="特殊装备原因" width="130" /> -->
         </el-table>
     </div>
+	<!-- 三级页面弹窗 -->
+	 <el-dialog
+	   v-model="dialogVisible"
+	   :title="`【${currentDetail.name || ''}】自有装备详情`"
+	   width="65%"
+	   class="own-detail-dialog"
+	   :destroy-on-close="true"
+	   :close-on-click-modal="false"
+	 >
+	   <div class="dialog-body-wrapper">
+	     <el-table :data="ownDetailList" size="small" border class="custom-table">
+		   <el-table-column prop="index" label="序号" width="60" >
+		   	<template #default="scope">
+		   	    {{ scope.$index + 1 }}
+		   	  </template>
+		   </el-table-column>
+	       <el-table-column prop="deviceName" label="装备名称" />
+	       <el-table-column prop="code" label="装备编号" width="240" />
+	       <el-table-column prop="deviceTypeName" label="装备类目" />
+		   <el-table-column prop="typeName" label="装备型号" />
+	     </el-table>
+	   </div>
+	   <template #footer>
+	     <el-button @click="dialogVisible = false">关闭</el-button>
+	   </template>
+	 </el-dialog>
+
+
 </template>
 
 <script setup>
 import { ArrowLeft } from '@element-plus/icons-vue'
 import { defineProps } from 'vue'
-import { exportNewBuy} from '@/http/api/rent-facility/line'
+import { exportNewBuy,getdeviceInfo} from '@/http/api/rent-facility/line'
+// 控制弹窗显示
+const dialogVisible = ref(false)
+const currentDetail = ref({})  // 当前行数据
+const ownDetailList = ref([])  // 自有装备详情数据
+function showOwnDetail(row) {
+   currentDetail.value = row
+  dialogVisible.value = true
+
+  getdeviceInfo({ companyName:row.companyId,devicenewName:row.name}).then((response) => {
+			  if(response.code ==200){
+				  ownDetailList.value =response.data
+			  }
+  		    }) 
+}
 const props = defineProps({
     title: String,
 	secondPageTitleId: String,
@@ -117,6 +162,57 @@ function calculateActual(row) {
 </script>
 
 <style scoped>
+	 
+ .own-detail-dialog .el-dialog {
+  background-color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.own-detail-dialog .el-dialog__title {
+  font-weight: bold;
+  font-size: 20px;
+  color: #00a288;
+}
+
+.dialog-body-wrapper {
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 20px 0;
+}
+
+/* 表格表头、单元格统一加大字体、居中对齐 */
+.own-detail-dialog .custom-table ::v-deep th {
+  background: #00a288;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.own-detail-dialog .custom-table ::v-deep td {
+  font-size: 16px;
+  text-align: center;
+  padding: 12px 8px;
+}
+
+/* 底部按钮样式 */
+.own-detail-dialog .el-dialog__footer {
+  padding: 16px 24px;
+  text-align: right;
+}
+.own-detail-dialog .el-button {
+  font-size: 16px;
+  padding: 10px 20px;
+}
+
+	.link {
+	    color: #409eff; 
+	    cursor: pointer; 
+	    text-decoration: underline; 
+	}
+	.link:hover { 
+	    color: #66b1ff; 
+	}
 .second-page { animation: fadeIn .3s; background: #fff; padding: 24px; border-radius: 8px;
     box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} }