From 4709cb472fb3c824034710d5b7ecaeda30ecac50 Mon Sep 17 00:00:00 2001
From: jiang <BnsGit@123!>
Date: Fri, 12 Dec 2025 17:42:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/rent-facility/index.vue | 144 ++++++------
 src/views/rent-facility/line.vue  | 372 +++++-------------------------
 2 files changed, 133 insertions(+), 383 deletions(-)

diff --git a/src/views/rent-facility/index.vue b/src/views/rent-facility/index.vue
index b533d73b..f2a640f7 100644
--- a/src/views/rent-facility/index.vue
+++ b/src/views/rent-facility/index.vue
@@ -1,65 +1,67 @@
 <template>
   <div class="equipment-table">
-    <h2 class="title">机械化机械化施工装备配置率</h2>
-    <el-card class="content-box" style="height: 800px">
-    <div v-if="!showSecondPage">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        show-overflow-tooltip
-        :cell-style="{ textAlign: 'center' }"
-        class="custom-table"
-        height="800"
-      >
-        <el-table-column width="240" align="center">
-          <template slot="header">
-            <div class="diagonal-header">
-              <div class="diagonal-line"></div>
-              <div class="header-top">指标项</div>
-              <div class="header-bottom">公司</div>
-            </div>
-          </template>
-          <template slot-scope="scope">
-            <div>{{ scope.row.companyName }}</div>
-          </template>
-        </el-table-column>
+    <h2 class="title" v-if="!showSecondPage">机械化机械化施工装备配置率 </h2>
+    <el-card class="content-box" style="height: 800px" v-if="!showSecondPage">
+      <div v-if="!showSecondPage">
+        <el-table
+          :data="tableData"
+          border
+          stripe
+          :header-cell-style="headerCellStyle"
+          show-overflow-tooltip
+          :cell-style="{ textAlign: 'center' }"
+          class="custom-table"
+          height="800"
+        >
+          <el-table-column width="240" align="center">
+            <template slot="header">
+              <div class="diagonal-header">
+                <div class="diagonal-line"></div>
+                <div class="header-top">指标项</div>
+                <div class="header-bottom">公司</div>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>{{ scope.row.companyName }}</div>
+            </template>
+          </el-table-column>
 
-        <el-table-column prop="valueA" label="线路设备配置率">
-          <template slot-scope="scope">
-            <span class="link" @click="handleDrill(scope.row, 0)">{{ scope.row.valueA }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="valueB" label="电缆设备配置率">
-          <template slot-scope="scope">
-            <span class="link" @click="handleDrill(scope.row, 1)">{{ scope.row.valueB }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="valueC" label="变电设备配置率">
-          <template slot-scope="scope">
-            <span class="link" @click="handleDrill(scope.row, 2)">{{ scope.row.valueC }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+          <el-table-column prop="valueA" label="线路设备配置率">
+            <template slot-scope="scope">
+              <span class="link" @click="handleDrill(scope.row, 0)">{{ scope.row.valueA }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="valueB" label="电缆设备配置率">
+            <template slot-scope="scope">
+              <span class="link" @click="handleDrill(scope.row, 1)">{{ scope.row.valueB }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="valueC" label="变电设备配置率">
+            <template slot-scope="scope">
+              <span class="link" @click="handleDrill(scope.row, 2)">{{ scope.row.valueC }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </el-card>
 
-<!--    <Line
+    <LineDetail
       v-if="showSecondPage"
       :key="secondPageTitleId + '_' + secondPageTitle"
       :title="secondPageTitle"
       :secondPageTitleId="secondPageTitleId"
       :table-data="detailTableData"
       @back="handleBack"
-    />-->
+    />
   </div>
 </template>
 
 <script>
-/* import Line from '../rent-facility/line.vue' */
 import { listRate, getDetailList } from '@/api/rent-facility/index'
+import LineDetail from '@/views/rent-facility/line.vue'
 
 export default {
+  components: { LineDetail },
 
   data() {
     return {
@@ -75,7 +77,7 @@ export default {
     // 表头样式
     headerCellStyle() {
       return {
-        background: '#00a288',
+        background: '#00a288 !important',
         color: '#fff',
         textAlign: 'center'
       }
@@ -102,7 +104,7 @@ export default {
     // 钻取详情
     async handleDrill(row, type) {
       // 1. 先清空旧数据并隐藏旧页面，避免组件未刷新
-      this.showSecondPage = false
+      this.showSecondPage = true
       this.detailTableData = []
 
       // 2. 调接口拿到详情数据
@@ -159,11 +161,11 @@ export default {
   width: 100%;
   height: 100%;
   background: linear-gradient(
-    to top right,
-    transparent 49.5%,
-    white 49.5%,
-    white 50.5%,
-    transparent 50.5%
+      to top right,
+      transparent 49.5%,
+      white 49.5%,
+      white 50.5%,
+      transparent 50.5%
   );
 }
 
@@ -199,27 +201,27 @@ export default {
 
 
 ::v-deep .el-table {
-    // 启用斑马纹
-    &.el-table--striped .el-table__body {
-      tr.el-table__row--striped td {
-        background-color: #F6FBFA !important; // 浅紫色
-      }
-    }
-
-    .el-table__header {
-      background: #E9F0EE;
-
-      th {
-        background: #E9F0EE !important;
-        color: #606266;
-        font-weight: 600;
-        height: 50px;
-      }
-    }
-
-    &.el-table--striped .el-table__body tr.el-table__row:hover>td.el-table__cell {
-      background-color: #CCF1E9 !important;
+  // 启用斑马纹
+  &.el-table--striped .el-table__body {
+    tr.el-table__row--striped td {
+      background-color: #F6FBFA !important; // 浅紫色
     }
   }
+
+  .el-table__header {
+    background: #E9F0EE;
+
+    th {
+      background: #E9F0EE !important;
+      color: #606266;
+      font-weight: 600;
+      height: 50px;
+    }
+  }
+
+  &.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
+    background-color: #CCF1E9 !important;
+  }
+}
 </style>
 
diff --git a/src/views/rent-facility/line.vue b/src/views/rent-facility/line.vue
index 5ac64914..db553507 100644
--- a/src/views/rent-facility/line.vue
+++ b/src/views/rent-facility/line.vue
@@ -1,386 +1,134 @@
 <template>
-  <div class="second-page" style="margin-top: 20px">
-<!--    <div class="second-page-header">-->
-<!--      <i class="el-icon-arrow-left back-icon" @click="$emit('back')"></i>-->
-<!--      <span class="second-page-title">{{ title }}</span>-->
-<!--    </div>-->
-
-
-    <el-row style="margin-bottom: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
-      <el-button
-        size="mini"
-        @click="handleAdd"
-        type="primary"
-        class="primary-lease"
-      >
-        新建
-      </el-button>
-<!--      <el-button-->
-<!--        size="mini"-->
-<!--        type="danger"-->
-<!--        class="primary-lease"-->
-<!--        @click="handleBatchDelete"-->
-<!--        :disabled="selectedRows.length === 0"-->
-<!--      >-->
-<!--        批量删除-->
-<!--      </el-button>-->
-    </el-row>
-
+  <div class="second-page">
+    <div class="second-page-header">
+      <!-- 替换 Element Plus 图标为 Element UI 的图标使用方式 -->
+      <i class="el-icon-arrow-left back-icon" @click="$emit('back')"></i>
+      <span class="second-page-title">{{ title }}</span>
+    </div>
 
     <el-table
       :data="tableData"
       border
       :span-method="spanMethod"
-      style="width: 100% ;margin-top: 10px"
       :header-cell-style="headerCellStyle"
       :cell-style="{ textAlign: 'center' }"
       class="custom-table detail-table"
-      stripe
-      height="546"
     >
-      <el-table-column prop="index" label="序号" width="60">
-        <template slot-scope="scope">
-          {{ scope.$index + 1 }}
-        </template>
+      <el-table-column prop="index" label="序号" width="60"/>
+      <el-table-column prop="name" label="装备名称" width="120"/>
+      <el-table-column label="基本配置标准（台/套）" align="center">
+        <el-table-column prop="standard" label="标准" width="80"/>
+        <el-table-column prop="combinedName" label="装备种类"/>
+        <el-table-column prop="desc" label="配置说明"/>
       </el-table-column>
-      <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="`标准(${tableData && tableData[0] && tableData[0].labelVol || ''})`"
-          :formatter="formatStandard"
-        />
-      </el-table-column>
-      <el-table-column prop="desc" label="配置说明" width="100" />
-      <el-table-column prop="value" label="装备配置率赋值" width="200" />
-      <el-table-column prop="own" label="自有装备数量" width="150">
+      <el-table-column prop="value" label="装备配置率赋值" width="130"/>
+      <el-table-column prop="own" label="自有装备数量" width="120">
+        <!-- Vue2 中使用 slot-scope 替代 #default -->
         <template slot-scope="scope">
-          <span class="link" @click="showOwnDetail(scope.row)">{{ scope.row.own }}</span>
+          <span class="cell-yellow">{{ scope.row.own }}</span>
         </template>
       </el-table-column>
       <el-table-column prop="rent" label="租赁装备数量" width="120">
+        <!-- Vue2 中使用 slot-scope 替代 #default -->
         <template slot-scope="scope">
-                    <span class="cell-yellow">
-                        {{ (Number(scope.row.rent) || 0) + (Number(scope.row.orderCount) || 0) || '' }}
-                    </span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="ifExist" label="装备实际配置率" width="130">
-        <template slot-scope="scope">
-          <span class="cell-yellow"> {{ calculateActual(scope.row) }}</span>
+          <span class="cell-yellow">{{ scope.row.rent }}</span>
         </template>
       </el-table-column>
+      <el-table-column prop="actual" label="装备实际配置率" width="130"/>
     </el-table>
-
-
-    <!-- 新增/编辑对话框 -->
-    <el-dialog
-      width="1000px"
-      @close="handleDialogClose"
-      destroy-on-close
-      :title="dialogTitle"
-      :visible.sync="addOrEditDialogVisible"
-      custom-class="simple-dialog"
-    >
-
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="addOrEditDialogVisible = false" class="cancel-btn">取消</el-button>
-        <el-button type="primary" @click="handleSubmit" :loading="submitLoading" class="confirm-btn" v-if="!isView">
-          <span v-if="!submitLoading">{{ isAdd ? '新增' : '保存' }}</span>
-          <span v-else>提交中...</span>
-        </el-button>
-      </div>
-    </el-dialog>
-
-
-
-
-
-
-
-
-
-
-    <!-- 三级页面弹窗 -->
-    <el-dialog
-      :visible.sync="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" stripe height="546">
-          <el-table-column prop="index" label="序号" width="60">
-            <template slot-scope="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>
-      <div slot="footer">
-        <el-button @click="dialogVisible = false">关闭</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { exportNewBuy, getdeviceInfo } from '@/api/rent-facility/line'
-
+// Vue2 无需导入 defineProps 和 ArrowLeft 图标（使用 Element UI 内置图标）
 export default {
+  // 声明组件名称（可选，推荐添加）
+  name: 'SecondPage',
+  // Vue2 中通过 props 选项定义属性
   props: {
-    title: String,
-    secondPageTitleId: String,
-    tableData: Array
-  },
-  data() {
-    return {
-      // 控制弹窗显示
-      addOrEditDialogVisible: false,
-      dialogVisible: false,
-      currentDetail: {},  // 当前行数据
-      ownDetailList: []   // 自有装备详情数据
+    title: {
+      type: String,
+      default: '' // 可选：添加默认值，增强鲁棒性
+    },
+    tableData: {
+      type: Array,
+      default: () => [] // 可选：添加默认值，避免空数组报错
     }
   },
-
-
-  mounted() {
-this.getList()
-  },
-
-
+  // 方法定义在 methods 中
   methods: {
-
-    // 新增工程
-    handleAdd() {
-      this.isAdd = true
-      this.isView = false
-      this.dialogTitle = '新增'
-      this.$refs.addOrEditFormRef?.clearValidate()
-      this.addOrEditDialogVisible = true
-    },
-
-
-
-    // 获取列表
-    async getList() {
-      console.log('列表-查询', this.queryParams)
-      this.isLoading = true
-      try {
-        const params = { ...this.queryParams }
-        const res = await getdeviceInfo(params)
-        this.tableList = res.rows || []
-        this.total = res.total || 0
-      } catch (error) {
-        this.tableList = []
-        this.total = 0
-      } finally {
-        this.isLoading = false
-      }
-    },
-
-
-
-    // 显示自有装备详情
-    showOwnDetail(row) {
-      this.currentDetail = row
-      this.dialogVisible = true
-
-      getdeviceInfo({
-        companyName: row.companyId,
-        deviceId: row.typeId
-      }).then((response) => {
-        if (response.code === 200) {
-          this.ownDetailList = response.data
-        }
-      })
-    },
-
     // 合并单元格方法
     spanMethod() {
       return [1, 1]
-    },
-
-    // 导出数据
-    handleExport() {
-      const companyId = this.secondPageTitleId
-      exportNewBuy({ companyId }).then(() => {
-        console.log('导出成功')
-      })
-    },
-
-    // 计算实际配置率
-    calculateActual(row) {
-      const standard = parseFloat(row.standard)
-      const own = parseFloat(row.own || 0)
-      let rent = parseFloat(row.rent || 0)
-      const value = parseFloat(row.value) // 配置率满分值
-      const orderCount = parseFloat(row.orderCount || 0)
-      const ifExist = row.ifExist
-
-      rent = rent + orderCount
-
-      if (!standard || standard === 0 || isNaN(value)) return '0'
-
-      const ratio = (own + rent * 0.6 + orderCount * 0.9) / standard
-      let actual = ratio > 1 ? value : ratio * value
-
-      // 限制得分最大为 20（仅当 ifExist === 1）
-      if (ifExist === 1 && actual > 20) {
-        actual = 20
-      }
-
-      return actual.toFixed(2)
-    },
-
-    // 格式化标准值
-    formatStandard(row) {
-      return row.standard != null ? Math.round(row.standard) : ''
     }
   },
+  // 表头样式可以定义在 computed 中（响应式）或 data 中（静态）
+  // 这里用 computed 保持和原代码一致的响应式特性（虽然是静态值）
   computed: {
-    // 表头样式
     headerCellStyle() {
       return {
-        background: '#E9F0EE',
-        color: '#606266',
-        textAlign: 'center',
-        fontWeight: 600,
-        height: '50px'
+        background: '#00a288 !important',
+        color: '#fff',
+        textAlign: 'center'
       }
     }
   }
 }
 </script>
 
-<style scoped>
-/* 页面整体样式 */
+<style lang="scss" scoped>
 .second-page {
-  animation: fadeIn .3s;
+  animation: fadeIn 0.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);}
+  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);
+  }
 }
 
-/* 页面头部样式 */
 .second-page-header {
   display: flex;
   align-items: center;
   margin-bottom: 24px;
 }
+
 .back-icon {
   font-size: 22px;
   color: #00a288;
   cursor: pointer;
   margin-right: 12px;
 }
+
 .back-icon:hover {
   color: #409eff;
 }
+
 .second-page-title {
   font-size: 18px;
   font-weight: bold;
   color: #00a288;
 }
 
-/* 通用表格样式 */
-.custom-table {
-  --el-table-row-hover-bg-color: #CCF1E9;
-}
-
-/* 覆盖 Element Plus 默认的表格样式 */
-.custom-table /deep/ .el-table--striped .el-table__body {
-  tr.el-table__row--striped td {
-    background-color: #F6FBFA !important;
-  }
-}
-
-.custom-table /deep/ .el-table__header-wrapper th {
-  background: #E9F0EE !important;
-  color: #606266 !important;
-  font-weight: 600 !important;
-  height: 50px !important;
-}
-
-.custom-table /deep/ .el-table__body-wrapper td {
-  padding: 12px 8px;
-  font-size: 14px;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.custom-table /deep/ .el-table__body tr:hover>td.el-table__cell {
-  background-color: #CCF1E9 !important;
-}
-
-/* 弹窗样式 */
-.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 /deep/ th {
-  background: #E9F0EE !important;
-  color: #606266 !important;
-  font-size: 14px;
-  font-weight: 600 !important;
-  text-align: center;
-}
-.own-detail-dialog .custom-table /deep/ td {
-  font-size: 14px;
-  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;
-}
-
-/* 特定文字颜色样式 */
 .cell-yellow {
   color: #e6a23c;
   font-weight: bold;
 }
 
+/* Vue2 支持 ::v-deep 语法，也可以替换为 /deep/ 或 >>> */
+.custom-table ::v-deep th,
+.custom-table ::v-deep td {
+  border: 1px solid #ebeef5;
+  text-align: center;
+}
 </style>