装备率提交
This commit is contained in:
parent
19e4fe9c51
commit
1665ee2dbb
|
|
@ -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>
|
||||
Loading…
Reference in New Issue