123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<template>
|
|
<div v-if="tableData.length != 0">
|
|
<!-- div设计table -->
|
|
<div class="table" v-for="(item, index) in columnsData" :key="index">
|
|
<!-- 单层表头 -->
|
|
<div class="thead">
|
|
<div class="thead_top">
|
|
{{ item[0].showName ? item[0].showName : '' }}({{ item[0].unit }})
|
|
</div>
|
|
<div class="thead_bot">
|
|
<div class="thead_bot_cell" v-for="(vv, key) in item" :key="key">
|
|
{{ vv.phase + '相 ' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 有合并表头的数据 -->
|
|
<div class="tbody">
|
|
<div class="tbody_cell" v-for="(vv, key) in item" :key="key">
|
|
{{
|
|
tableData.find(item => {
|
|
return item.anotherName == vv.showName && item.phase == vv.phase
|
|
})?.statisticalData
|
|
? tableData.find(item => {
|
|
return item.anotherName == vv.showName && item.phase == vv.phase
|
|
})?.statisticalData
|
|
: '/'
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, nextTick, onMounted } from 'vue'
|
|
import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
|
|
const loading = ref(false)
|
|
const tableData: any = ref([])
|
|
loading.value = true
|
|
const columnsData: any = ref([])
|
|
const getColumns = () => {
|
|
getRealTimeTableList().then(res => {
|
|
columnsData.value = res.data
|
|
})
|
|
}
|
|
nextTick(() => {})
|
|
onMounted(() => {
|
|
getColumns()
|
|
loading.value = false
|
|
})
|
|
const getTableData = (list: any) => {
|
|
tableData.value = list
|
|
loading.value = false
|
|
columnsData.value.map((item: any) => {
|
|
item.map((vv: any) => {
|
|
vv.statisticalData = list.find((kk: any) => {
|
|
return kk.anotherName == vv.showName && kk.phase == vv.phase
|
|
})?.statisticalData
|
|
})
|
|
})
|
|
}
|
|
defineExpose({ getTableData })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// ::v-deep .vxe-table--empty-content{
|
|
// display: none !important;
|
|
// }
|
|
.table {
|
|
width: 100%;
|
|
height: 120px;
|
|
border: 1px solid #eee;
|
|
border-bottom: 2px solid #eee;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.thead {
|
|
width: 100%;
|
|
height: auto;
|
|
background: #f4f6f9;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.thead_top {
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border: 1px solid #eee;
|
|
color: #111;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.thead_bot {
|
|
width: 100%;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
display: flex;
|
|
color: #111;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
.thead_bot_cell {
|
|
flex: 1;
|
|
border: 1px solid #eee;
|
|
}
|
|
}
|
|
}
|
|
.tbody {
|
|
flex: 1;
|
|
display: flex;
|
|
text-align: center;
|
|
.tbody_cell {
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
border: 1px solid #eee;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
.tbody:hover {
|
|
background: #f4f6f9;
|
|
}
|
|
}
|
|
</style>
|