From 1665ee2dbb8ff45cbf62c9de1611036182ea8ce0 Mon Sep 17 00:00:00 2001
From: lizhenhua <1075222162@qq.com>
Date: Tue, 1 Jul 2025 09:18:53 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E7=8E=87=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/rent-facility/index.vue | 246 +++++++++++++++++++++++++
 1 file changed, 246 insertions(+)
 create mode 100644 src/views/user/rent-facility/index.vue

diff --git a/src/views/user/rent-facility/index.vue b/src/views/user/rent-facility/index.vue
new file mode 100644
index 0000000..2470f7b
--- /dev/null
+++ b/src/views/user/rent-facility/index.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="equipment-table">
+    <h2 class="title">机械化施工装备配置率</h2>
+
+    <!-- 主表格页面 -->
+    <div v-if="!showSecondPage">
+      <el-table
+        :data="pagedData"
+        show-overflow-tooltip
+        :header-cell-style="headerCellStyle"
+        :cell-style="{ textAlign: 'center' }"
+        class="custom-table"
+      >
+        <!-- 斜线表头：指标项 / 公司 -->
+        <el-table-column width="140" align="center">
+          <template #header>
+            <div class="diagonal-header">
+              <div class="diagonal-line"></div>
+              <div class="header-top">指标项</div>
+              <div class="header-bottom">公司</div>
+            </div>
+          </template>
+          <template #default="{ row }">
+            <div>{{ row.company }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="score" label="总得分" />
+        <el-table-column prop="line" label="线路设备配置率">
+          <template #default="{ row }">
+            <span class="link" @click="handleDrill(row, 'line')">点击可钻取</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="cable" label="电缆设备配置率" />
+        <el-table-column prop="substation" label="变电设备配置率" />
+      </el-table>
+
+      <PagingComponent
+        @getList="getMessageListData"
+        :pageSize="queryParams.pageSize"
+        :pageNumber="queryParams.pageNum"
+        :total="total"
+      />
+    </div>
+
+    <!-- 二级页面 -->
+    <div v-else class="second-page">
+      <div class="second-page-header">
+        <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon>
+        <span class="second-page-title">{{ secondPageTitle }}</span>
+      </div>
+
+      <el-table
+        :data="detailTableData"
+        border
+        :span-method="detailSpanMethod"
+        :header-cell-style="headerCellStyle"
+        :cell-style="{ textAlign: 'center' }"
+        class="custom-table detail-table"
+      >
+        <el-table-column prop="index" label="序号" width="60" />
+        <el-table-column prop="process" label="工序" width="80" />
+        <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="type" label="装备种类" />
+          <el-table-column prop="desc" label="配置说明" />
+        </el-table-column>
+        <el-table-column prop="value" label="装备配置率赋值" width="130" />
+        <el-table-column prop="own" label="自有装备数量" width="120">
+          <template #default="{ row }">
+            <span class="cell-yellow">{{ row.own }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="rent" label="租赁装备数量" width="120">
+          <template #default="{ row }">
+            <span class="cell-yellow">{{ row.rent }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="actual" label="装备实际配置率" width="130" />
+        <el-table-column prop="special" label="特殊装备配置率" width="130" />
+        <el-table-column prop="reason" label="特殊装备原因" width="120" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ArrowLeft } from '@element-plus/icons-vue'
+
+// 原始数据
+const tableData = ref([
+  { company: '六安', score: '89.6', line: '84.3%', cable: '75.8%', substation: '90.2%' },
+  { company: '安庆', score: '91.2', line: '87.1%', cable: '79.5%', substation: '91.8%' },
+  { company: '池州', score: '88.3', line: '82.7%', cable: '76.2%', substation: '89.5%' },
+  { company: '宣城', score: '93.5', line: '88.9%', cable: '80.1%', substation: '94.2%' },
+  { company: '黄山', score: '90.8', line: '85.6%', cable: '77.4%', substation: '92.5%' },
+  { company: '亳州', score: '87.4', line: '81.2%', cable: '74.6%', substation: '88.9%' },
+  { company: '合肥', score: '94.1', line: '89.7%', cable: '82.3%', substation: '95.4%' },
+  { company: '芜湖', score: '92.6', line: '87.8%', cable: '80.7%', substation: '93.5%' }
+])
+
+// 分页控制
+const queryParams = ref({ pageNum: 1, pageSize: 5 })
+const total = computed(() => tableData.value.length)
+
+const pagedData = computed(() => {
+  const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize
+  return tableData.value.slice(start, start + queryParams.value.pageSize)
+})
+
+const getMessageListData = (pageNum) => {
+  queryParams.value.pageNum = pageNum
+}
+
+// 详情页状态
+const showSecondPage = ref(false)
+const secondPageTitle = ref('')
+const currentRow = ref(null)
+
+// 点击可钻取
+const handleDrill = (row, type) => {
+  currentRow.value = row
+  secondPageTitle.value = `${row.company}详情页面`
+  showSecondPage.value = true
+
+  // 动态模拟数据
+  detailTableData.value = [
+    {
+      index: 1, process: '工序A', name: `${type}设备A`,
+      standard: '10', type: '类型1', desc: '说明1',
+      value: '5', own: 3, rent: 2, actual: '50%',
+      special: '10%', reason: '特殊原因A'
+    },
+    {
+      index: 2, process: '工序B', name: `${type}设备B`,
+      standard: '8', type: '类型2', desc: '说明2',
+      value: '4', own: 2, rent: 2, actual: '40%',
+      special: '5%', reason: '特殊原因B'
+    }
+  ]
+}
+
+const handleBack = () => {
+  showSecondPage.value = false
+}
+
+const getTypeName = (type) => {
+  const types = { line: '线路设备', cable: '电缆设备', substation: '变电设备' }
+  return types[type] || type
+}
+
+const detailTableData = ref([])
+const detailSpanMethod = ({ row, column, rowIndex, columnIndex }) => [1, 1]
+
+// 表头样式
+const headerCellStyle = {
+  background: '#00a288',
+  color: '#fff',
+  textAlign: 'center'
+}
+</script>
+
+<style scoped>
+.equipment-table {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+.title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 20px;
+  color: #00a288;
+}
+.diagonal-header {
+  width: 100%;
+  background-color: #00a288;
+  color: white;
+  position: relative;
+  height: 40px;
+  font-size: 12px;
+}
+.diagonal-line {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: linear-gradient(to top right, transparent 49.5%, white 49.5%, white 50.5%, transparent 50.5%);
+}
+.header-top {
+  position: absolute; top: 4px; right: 6px; z-index: 1;
+}
+.header-bottom {
+  position: absolute; bottom: 4px; left: 8px; z-index: 1;
+}
+.link {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.link:hover {
+  color: #66b1ff;
+}
+.custom-table ::v-deep th,
+.custom-table ::v-deep td {
+  border: 1px solid #ebeef5;
+  text-align: center;
+}
+.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);}
+}
+.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;
+}
+.cell-yellow {
+  color: #e6a23c;
+  font-weight: bold;
+}
+</style>