|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="center-box">
|
|
|
|
|
<TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 10px" />
|
|
|
|
|
<TitleBox titleText="工程在用装备情况" @handleMore="handleMore" style="margin-bottom: 10px"/>
|
|
|
|
|
|
|
|
|
|
<el-select
|
|
|
|
|
class="select-box"
|
|
|
|
|
@ -14,20 +14,20 @@
|
|
|
|
|
@change="changeProCode"
|
|
|
|
|
style="width: 316px"
|
|
|
|
|
>
|
|
|
|
|
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
|
|
|
|
|
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"/>
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
|
<div class="topView">
|
|
|
|
|
<div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">线路</div>
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">电缆</div>
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == '线路' }" @click="changTab('线路')">线路</div>
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == '变电' }" @click="changTab('变电')">变电</div>
|
|
|
|
|
<div class="topTab" :class="{ active: tabIndex == '电缆' }" @click="changTab('电缆')">电缆</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="num-view">
|
|
|
|
|
<div class="num-item">
|
|
|
|
|
<div>项目数</div>
|
|
|
|
|
<div class="num">{{ equipNum }} <span class="unit-text">个</span></div>
|
|
|
|
|
<div class="num">{{ proNum }} <span class="unit-text">个</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="num-item">
|
|
|
|
|
<div>在用装备数</div>
|
|
|
|
|
@ -41,35 +41,35 @@
|
|
|
|
|
<table cellspacing="0" cellpadding="8" style="width: 100%; text-align: center; font-size: 14px">
|
|
|
|
|
<!-- 双层表头 -->
|
|
|
|
|
<thead>
|
|
|
|
|
<!-- 第一行:跨列合并 -->
|
|
|
|
|
<tr>
|
|
|
|
|
<th>排名</th>
|
|
|
|
|
<th style="width: 260px">工程名称</th>
|
|
|
|
|
<th>在用装备数(台)</th>
|
|
|
|
|
<th>规模(拆单公里)</th>
|
|
|
|
|
<th>百公里线路装备使用情况</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<!-- 第一行:跨列合并 -->
|
|
|
|
|
<tr>
|
|
|
|
|
<th>排名</th>
|
|
|
|
|
<th style="width: 260px">工程名称</th>
|
|
|
|
|
<th>在用装备数(台)</th>
|
|
|
|
|
<th>规模(拆单公里)</th>
|
|
|
|
|
<th>百公里线路装备使用情况</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<!-- 表体:使用 v-for 渲染数据 -->
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
|
|
|
|
|
<td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
|
|
|
|
|
<td style="width: 260px; text-align: left">
|
|
|
|
|
<tr v-for="(row, index) in tableData" :key="index" class="row-sty" :style="rowStyle(index)">
|
|
|
|
|
<td class="index-num" style="width: 50px" :style="indexStyle(index)">NO0{{ index + 1 }}</td>
|
|
|
|
|
<td style="width: 260px; text-align: left">
|
|
|
|
|
<span class="pro-name" :title="row.projectName">
|
|
|
|
|
{{ row.projectName }}
|
|
|
|
|
</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="num" style="width: 140px">{{ row.inUser }}</td>
|
|
|
|
|
<td class="num" style="width: 140px">{{ row.scale }}</td>
|
|
|
|
|
<td class="num" style="width: 190px">{{ row.usage }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="num" style="width: 140px">{{ row.inUser }}</td>
|
|
|
|
|
<td class="num" style="width: 140px">{{ row.scale }}</td>
|
|
|
|
|
<td class="num" style="width: 190px">{{ row.usage }}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<el-empty v-if="tableData.length == 0" :image-size="110" description="暂无数据"></el-empty>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ProEquipMore ref="proEquipMore" />
|
|
|
|
|
<ProEquipMore ref="proEquipMore"/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -91,8 +91,8 @@ export default {
|
|
|
|
|
options: [],
|
|
|
|
|
proNum: 0,
|
|
|
|
|
equipNum: 0,
|
|
|
|
|
tabIndex: 0,
|
|
|
|
|
tableData: [],
|
|
|
|
|
tabIndex: '线路',
|
|
|
|
|
tableData: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -113,7 +113,7 @@ export default {
|
|
|
|
|
try {
|
|
|
|
|
const params = {
|
|
|
|
|
type: this.tabIndex,
|
|
|
|
|
proCode: this.proCode,
|
|
|
|
|
proCode: this.proCode
|
|
|
|
|
}
|
|
|
|
|
const res = await getEquipmentUseApi(params)
|
|
|
|
|
this.tableData = res.data.equipmentUse || []
|
|
|
|
|
@ -156,7 +156,7 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
background,
|
|
|
|
|
height: '40px', // 👈 统一行高
|
|
|
|
|
borderRadius: '5px',
|
|
|
|
|
borderRadius: '5px'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
indexStyle(index) {
|
|
|
|
|
@ -172,10 +172,10 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
color,
|
|
|
|
|
color
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -194,17 +194,20 @@ export default {
|
|
|
|
|
font-family: OPPOSans;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.unit-text {
|
|
|
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.index-num {
|
|
|
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.pro-name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
max-width: 260px;
|
|
|
|
|
@ -215,18 +218,22 @@ export default {
|
|
|
|
|
text-align: left;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row-sty {
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin-bottom: 7px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: separate;
|
|
|
|
|
border-spacing: 0 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td {
|
|
|
|
|
background-clip: padding-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
td:first-child {
|
|
|
|
|
border-top-left-radius: 5px;
|
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
|
@ -251,6 +258,7 @@ td:last-child {
|
|
|
|
|
text-align: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
background: #2cbab2;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|