代码提交
This commit is contained in:
jiang
parent
f1f8020f50
commit
4709cb472f
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue