This commit is contained in:
jiang
parent
1665ee2dbb
commit
3d4d6bff07
|
|
@ -0,0 +1,15 @@
|
||||||
|
// 个人中心 基础信息模块
|
||||||
|
|
||||||
|
import { get, post } from '../../index'
|
||||||
|
|
||||||
|
// 获取验证码
|
||||||
|
export const listRate = (data) => {
|
||||||
|
return get(`/material-mall/dept/listRate`, data)
|
||||||
|
}
|
||||||
|
// 立即注册按钮
|
||||||
|
export const listConfigType = (data) => {
|
||||||
|
return get('/material-mall/dept/listConfigType', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,246 +1,132 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="equipment-table">
|
<div class="equipment-table">
|
||||||
<h2 class="title">机械化施工装备配置率</h2>
|
<h2 class="title">机械化施工装备配置率</h2>
|
||||||
|
|
||||||
<!-- 主表格页面 -->
|
<div v-if="!showSecondPage">
|
||||||
<div v-if="!showSecondPage">
|
<el-table
|
||||||
<el-table
|
:data="pagedData"
|
||||||
:data="pagedData"
|
show-overflow-tooltip
|
||||||
show-overflow-tooltip
|
:header-cell-style="headerCellStyle"
|
||||||
:header-cell-style="headerCellStyle"
|
:cell-style="{ textAlign: 'center' }"
|
||||||
:cell-style="{ textAlign: 'center' }"
|
class="custom-table"
|
||||||
class="custom-table"
|
>
|
||||||
>
|
<el-table-column width="140" align="center">
|
||||||
<!-- 斜线表头：指标项 / 公司 -->
|
<template #header>
|
||||||
<el-table-column width="140" align="center">
|
<div class="diagonal-header">
|
||||||
<template #header>
|
<div class="diagonal-line"></div>
|
||||||
<div class="diagonal-header">
|
<div class="header-top">指标项</div>
|
||||||
<div class="diagonal-line"></div>
|
<div class="header-bottom">公司</div>
|
||||||
<div class="header-top">指标项</div>
|
</div>
|
||||||
<div class="header-bottom">公司</div>
|
</template>
|
||||||
</div>
|
<template #default="{ row }">
|
||||||
</template>
|
<div>{{ row.company }}</div>
|
||||||
<template #default="{ row }">
|
</template>
|
||||||
<div>{{ row.company }}</div>
|
</el-table-column>
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="score" label="总得分" />
|
<el-table-column prop="score" label="总得分" />
|
||||||
<el-table-column prop="line" label="线路设备配置率">
|
<el-table-column prop="line" label="线路设备配置率">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<span class="link" @click="handleDrill(row, 'line')">点击可钻取</span>
|
<span class="link" @click="handleDrill(row, 'line')">{{ row.line }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="cable" label="电缆设备配置率" />
|
<el-table-column prop="cable" label="电缆设备配置率" />
|
||||||
<el-table-column prop="substation" label="变电设备配置率" />
|
<el-table-column prop="substation" label="变电设备配置率" />
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
||||||
<PagingComponent
|
<PagingComponent
|
||||||
@getList="getMessageListData"
|
@getList="getListRateData"
|
||||||
:pageSize="queryParams.pageSize"
|
:pageSize="queryParams.pageSize"
|
||||||
:pageNumber="queryParams.pageNum"
|
:pageNumber="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Line
|
||||||
|
v-else
|
||||||
|
:title="secondPageTitle"
|
||||||
|
:table-data="detailTableData"
|
||||||
|
@back="handleBack"
|
||||||
|
/>
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
import Line from '../rent-facility/line.vue'
|
||||||
|
import PagingComponent from 'components/PagingComponent/index.vue'
|
||||||
// 原始数据
|
import {
|
||||||
const tableData = ref([
|
listRate, //列表
|
||||||
{ company: '六安', score: '89.6', line: '84.3%', cable: '75.8%', substation: '90.2%' },
|
listConfigType //新增
|
||||||
{ company: '安庆', score: '91.2', line: '87.1%', cable: '79.5%', substation: '91.8%' },
|
} from '@/http/api/rent-facility'
|
||||||
{ company: '池州', score: '88.3', line: '82.7%', cable: '76.2%', substation: '89.5%' },
|
const tableData = ref<any>([])
|
||||||
{ company: '宣城', score: '93.5', line: '88.9%', cable: '80.1%', substation: '94.2%' },
|
const total = ref(0)
|
||||||
{ 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 queryParams = ref({ pageNum: 1, pageSize: 5 })
|
||||||
const total = computed(() => tableData.value.length)
|
|
||||||
|
|
||||||
|
const getListRateData = async () => {
|
||||||
|
const res: any = await listRate(queryParams);
|
||||||
|
if (res && res.data) {
|
||||||
|
tableData.value = res.data.rows;
|
||||||
|
total.value = res.data.total;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const pagedData = computed(() => {
|
const pagedData = computed(() => {
|
||||||
const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize
|
const start = (queryParams.value.pageNum - 1) * queryParams.value.pageSize
|
||||||
return tableData.value.slice(start, start + queryParams.value.pageSize)
|
return tableData.value.slice(start, start + queryParams.value.pageSize)
|
||||||
})
|
})
|
||||||
|
|
||||||
const getMessageListData = (pageNum) => {
|
const getMessageListData = (pageNum) => {
|
||||||
queryParams.value.pageNum = pageNum
|
queryParams.value.pageNum = pageNum
|
||||||
}
|
}
|
||||||
|
|
||||||
// 详情页状态
|
|
||||||
const showSecondPage = ref(false)
|
const showSecondPage = ref(false)
|
||||||
const secondPageTitle = ref('')
|
const secondPageTitle = ref('')
|
||||||
const currentRow = ref(null)
|
const detailTableData = ref([])
|
||||||
|
|
||||||
// 点击可钻取
|
|
||||||
const handleDrill = (row, type) => {
|
const handleDrill = (row, type) => {
|
||||||
currentRow.value = row
|
secondPageTitle.value = `${row.company}详情页面`
|
||||||
secondPageTitle.value = `${row.company}详情页面`
|
showSecondPage.value = true
|
||||||
showSecondPage.value = true
|
detailTableData.value = [
|
||||||
|
{
|
||||||
// 动态模拟数据
|
index: 1, process: '工序A', name: `${type}设备A`,
|
||||||
detailTableData.value = [
|
standard: '10', type: '类型1', desc: '说明1',
|
||||||
{
|
value: '5', own: 3, rent: 2, actual: '50%',
|
||||||
index: 1, process: '工序A', name: `${type}设备A`,
|
special: '10%', reason: '特殊原因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%',
|
||||||
index: 2, process: '工序B', name: `${type}设备B`,
|
special: '5%', reason: '特殊原因B'
|
||||||
standard: '8', type: '类型2', desc: '说明2',
|
}
|
||||||
value: '4', own: 2, rent: 2, actual: '40%',
|
]
|
||||||
special: '5%', reason: '特殊原因B'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleBack = () => {
|
const handleBack = () => {
|
||||||
showSecondPage.value = false
|
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 = {
|
const headerCellStyle = {
|
||||||
background: '#00a288',
|
background: '#00a288',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
textAlign: 'center'
|
textAlign: 'center'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.equipment-table {
|
/* 保留原有样式 */
|
||||||
padding: 20px;
|
.equipment-table { padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); }
|
||||||
background: #fff;
|
.title { text-align: center; font-weight: bold; font-size: 18px; margin-bottom: 20px; color: #00a288; }
|
||||||
border-radius: 8px;
|
.diagonal-header { width: 100%; background-color: #00a288; color: white; position: relative; height: 40px; font-size: 12px; }
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
.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%); }
|
||||||
.title {
|
.header-top { position: absolute; top: 4px; right: 6px; z-index: 1; }
|
||||||
text-align: center;
|
.header-bottom { position: absolute; bottom: 4px; left: 8px; z-index: 1; }
|
||||||
font-weight: bold;
|
.link { color: #409eff; cursor: pointer; text-decoration: underline; }
|
||||||
font-size: 18px;
|
.link:hover { color: #66b1ff; }
|
||||||
margin-bottom: 20px;
|
.custom-table ::v-deep th, .custom-table ::v-deep td { border: 1px solid #ebeef5; text-align: center; }
|
||||||
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<div class="second-page">
|
||||||
|
<div class="second-page-header">
|
||||||
|
<el-icon class="back-icon" @click="$emit('back')"><ArrowLeft /></el-icon>
|
||||||
|
<span class="second-page-title">{{ title }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
border
|
||||||
|
:span-method="spanMethod"
|
||||||
|
: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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||||
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: String,
|
||||||
|
tableData: Array
|
||||||
|
})
|
||||||
|
|
||||||
|
const spanMethod = () => [1, 1]
|
||||||
|
|
||||||
|
const headerCellStyle = {
|
||||||
|
background: '#00a288',
|
||||||
|
color: '#fff',
|
||||||
|
textAlign: 'center'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.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; }
|
||||||
|
.custom-table ::v-deep th, .custom-table ::v-deep td { border: 1px solid #ebeef5; text-align: center; }
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue