<template>
|
<el-table
|
:data="showTableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:row-class-name="tableRowClassName"
|
:height="tableHeight"
|
size="small"
|
>
|
<el-table-column type="index" label="" width="30"> </el-table-column>
|
<el-table-column prop="scene.name" :show-overflow-tooltip="true" label="名称" width="150">
|
</el-table-column>
|
<el-table-column prop="scene.location" :show-overflow-tooltip="true" label="地址">
|
</el-table-column>
|
<el-table-column prop="proNum" :show-overflow-tooltip="true" label="问题" width="41">
|
</el-table-column>
|
<el-table-column prop="changeNum" :show-overflow-tooltip="true" label="整改" width="41">
|
</el-table-column>
|
<el-table-column :show-overflow-tooltip="true" label="整改率" width="54">
|
<template #default="{ row }">
|
{{ calPer(row.proNum, row.changeNum) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="updateTime" :show-overflow-tooltip="true" label="时间">
|
<template #default="{ row }">
|
{{ $fm.formatH(row.updateTime) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="btn-more font-small">
|
<el-link type="primary" @click="showMore = !showMore">查看更多</el-link>
|
</div>
|
</template>
|
<script setup>
|
import { computed, ref } from 'vue'
|
import dayjs from 'dayjs'
|
|
const props = defineProps({
|
data: {
|
type: Array
|
},
|
loading: Boolean
|
})
|
|
const showMore = ref(false)
|
|
const tableData = computed(() => {
|
const l = props.data.map((value) => {
|
const time = value.subtask.executionendtime
|
? value.subtask.executionendtime
|
: value.subtask.executionstarttime
|
value.updateTime = time
|
return value
|
})
|
|
return l.sort((a, b) => {
|
return dayjs(b.updateTime) - dayjs(a.updateTime)
|
})
|
// return l
|
})
|
|
const showTableData = computed(() => {
|
if (showMore.value) {
|
return tableData.value
|
} else {
|
return tableData.value.slice(0, 3)
|
}
|
})
|
|
/**
|
* 计算整改率
|
* @param {Number} p 问题数
|
* @param {Number} c 整改数
|
*/
|
function calPer(p, c) {
|
if (p == 0) {
|
return '/'
|
} else {
|
return Math.round((c / p) * 100) / 100 + '%'
|
}
|
}
|
</script>
|
<style scoped>
|
.btn-more {
|
text-align: center;
|
}
|
</style>
|
