176 lines
3.8 KiB
Vue
176 lines
3.8 KiB
Vue
<template>
|
||
<div class="table-style">
|
||
<div class="title-tip">
|
||
<div>各网省装备在用率情况</div>
|
||
<div class="more" @click="">更多 ></div>
|
||
</div>
|
||
|
||
<div class="table-list scroll-container">
|
||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||
<!-- 双层表头 -->
|
||
<thead>
|
||
<!-- 第一行：跨列合并 -->
|
||
<tr>
|
||
<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: 200px">{{ row.name }}</td>
|
||
<td>{{ row.proportion }} %</td>
|
||
<td>{{ row.turnoverRate }} 次/年</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getDeptEquipmentApi } from '@/api/wsScreen'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [
|
||
{
|
||
name: '安徽省',
|
||
proportion: '61.55',
|
||
turnoverRate: '2.55',
|
||
},
|
||
{
|
||
name: '山西',
|
||
proportion: '48.25',
|
||
turnoverRate: '2.34',
|
||
},
|
||
{
|
||
name: '河北',
|
||
proportion: '42.36',
|
||
turnoverRate: '2.23',
|
||
},
|
||
{
|
||
name: '江苏',
|
||
proportion: '39.56',
|
||
turnoverRate: '1,91',
|
||
},
|
||
{
|
||
name: '山东',
|
||
proportion: '36.05',
|
||
turnoverRate: '1.81',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
// this.getList()
|
||
},
|
||
methods: {
|
||
async getList() {
|
||
try {
|
||
const res = await getDeptEquipmentApi()
|
||
console.log('🚀 ~ 各单位装备在用率情况 ~ res:', res)
|
||
this.tableData = res.data || []
|
||
} catch (error) {
|
||
console.log('🚀 ~ 各单位装备在用率情况 ~ error:', error)
|
||
}
|
||
},
|
||
openDialog() {
|
||
this.$emit('openDialog')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.table-style {
|
||
height: 350px;
|
||
}
|
||
.title-tip {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 10px;
|
||
padding-left: 45px;
|
||
font-family: DS-TITLE;
|
||
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
.more {
|
||
margin-right: 20px;
|
||
color: #5fbbdb;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-family: '';
|
||
}
|
||
}
|
||
.table-list {
|
||
margin-top: 20px;
|
||
height: 280px;
|
||
overflow: auto;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 11px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 10px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
|
||
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
line-height: 22px;
|
||
}
|
||
|
||
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%;
|
||
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>
|