164 lines
3.8 KiB
Vue
164 lines
3.8 KiB
Vue
<template>
|
||
<div class="scroll-container">
|
||
<!-- 表头 -->
|
||
<table class="table-head">
|
||
<thead>
|
||
<tr>
|
||
<th rowspan="2" style="width: 30px">序号</th>
|
||
<th rowspan="2" style="width: 110px">单位名称</th>
|
||
<th rowspan="2" style="width: 60px">装备价值（万元）</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>
|
||
</table>
|
||
|
||
<!-- 内容 -->
|
||
<table class="table-body">
|
||
<tbody>
|
||
<tr v-for="(row, index) in tableData" :key="index">
|
||
<td class="index-num" style="width: 30px">{{ index + 1 }}</td>
|
||
<td style="width: 110px; font-size: 14px">{{ row.deptName }}</td>
|
||
<td class="num-yellow" style="width: 60px">{{ row.totalValue || 0 }}</td>
|
||
|
||
<td class="num-yellow">{{ row.totalEquipmentQuantity }}</td>
|
||
<td class="index-num">{{ row.lineNum }}</td>
|
||
<td class="index-num">{{ row.substationNum }}</td>
|
||
<td class="index-num">{{ row.cableNum }}</td>
|
||
|
||
<td class="num-yellow">{{ row.configRate }}</td>
|
||
<td class="index-num">{{ row.valueA }}</td>
|
||
<td class="index-num">{{ row.valueB }}</td>
|
||
<td class="index-num">{{ 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 || []
|
||
if (this.tableData.length > 3) this.tableData = this.tableData.slice(0, 3)
|
||
} catch (error) {
|
||
console.log('🚀 ~ getList ~ error:', error)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.table-head {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table-body {
|
||
width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0 5px;
|
||
}
|
||
.index-num {
|
||
/* width: 30px; */
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-family: 'DIN';
|
||
}
|
||
.num-yellow {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
background: linear-gradient(180deg, #FFF 25.81%, #FDF277 77.42%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
font-family: 'Alibaba-PuHuiTi-Regular';
|
||
font-size: 11px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
/* padding: 9px 3px; */
|
||
text-align: center;
|
||
/* white-space: nowrap; */
|
||
border: 0.5px solid #254e7c; // 边框颜色可根据背景调整
|
||
}
|
||
|
||
th {
|
||
/* background-color: #f5f5f5; */
|
||
font-weight: bold;
|
||
}
|
||
// 第一行背景
|
||
thead {
|
||
background-image: url('../../img/tableHeader.png');
|
||
background-size: 100% 100%;
|
||
height: 57px;
|
||
font-size: 12px;
|
||
color: #5A89BE;
|
||
}
|
||
|
||
tbody tr {
|
||
background-image: url('../../img/tableTr.png');
|
||
background-size: 100% 100%;
|
||
height: 44px;
|
||
}
|
||
|
||
/* 奇偶行颜色区分 */
|
||
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>
|