135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
||
<div class="scroll-container">
|
||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||
<!-- 双层表头 -->
|
||
<thead>
|
||
<!-- 第一行：跨列合并 -->
|
||
<tr>
|
||
<th rowspan="2">序号</th>
|
||
<th rowspan="2">单位名称</th>
|
||
<th rowspan="2">装备价值（亿元）</th>
|
||
<th colspan="4">装备数量（台）</th>
|
||
<th colspan="4">配置率</th>
|
||
</tr>
|
||
<!-- 第二行：子列 -->
|
||
<tr>
|
||
<th>总数</th>
|
||
<th>线路</th>
|
||
<th>变电</th>
|
||
<th>电缆</th>
|
||
<th>总数</th>
|
||
<th>线路</th>
|
||
<th>变电</th>
|
||
<th>电缆</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<!-- 表体：使用 v-for 渲染数据 -->
|
||
<tbody>
|
||
<tr v-for="(row, index) in tableData" :key="index">
|
||
<td style="width: 60px">{{ index + 1 }}</td>
|
||
<td style="width: 180px">{{ row.deptName }}</td>
|
||
<td style="width: 110px">{{ row.totalValue ? (row.totalValue / 100000000).toFixed(4) : 0 }}</td>
|
||
|
||
<!-- 装备数量 -->
|
||
<td>{{ row.totalEquipmentQuantity }}</td>
|
||
<td>{{ row.lineNum }}</td>
|
||
<td>{{ row.substationNum }}</td>
|
||
<td>{{ row.cableNum }}</td>
|
||
|
||
<!-- 配置率 -->
|
||
<td>{{ row.configRate }}</td>
|
||
<td>{{ row.valueA }}</td>
|
||
<td>{{ row.valueB }}</td>
|
||
<td>{{ row.valueC }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUnitEquipmentConfigurationApi } from '@/api/wsScreen/index'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
async getList() {
|
||
try {
|
||
const res = await getUnitEquipmentConfigurationApi()
|
||
console.log('🚀 ~ getList ~ res:', res)
|
||
if (!res.data) return
|
||
this.tableData = res.data || []
|
||
} catch (error) {
|
||
console.log('🚀 ~ getList ~ error:', error)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
font-family: 'Alibaba-PuHuiTi-Regular';
|
||
font-size: 11px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 9px 3px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
|
||
}
|
||
|
||
th {
|
||
/* background-color: #f5f5f5; */
|
||
font-weight: bold;
|
||
}
|
||
// 第一行背景
|
||
thead {
|
||
background-image: url('../../img/tableHeader.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
tbody tr {
|
||
background-image: url('../../img/tableTr.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/* 奇偶行颜色区分 */
|
||
tbody tr:nth-child(even) {
|
||
/* margin: 10px 0; */
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background-image: url('../../img/table-hover.png');
|
||
cursor: pointer;
|
||
}
|
||
.scroll-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
/* 隐藏滚动条轨迹 */
|
||
-ms-overflow-style: none; /* IE / Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
/* Chrome / Safari */
|
||
.scroll-container::-webkit-scrollbar {
|
||
width: 0; /* 或者直接隐藏 */
|
||
height: 0;
|
||
background: transparent; /* 背景透明 */
|
||
}
|
||
</style>
|