<template>
|
<el-table
|
:data="showTableData"
|
v-loading="loading"
|
table-layout="fixed"
|
:row-class-name="tableRowClassName"
|
:height="tableHeight"
|
size="small"
|
@row-click="handleRowClick"
|
>
|
<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 v-if="showMoreBtn" class="btn-more font-small">
|
<el-link type="primary" @click="showMore = !showMore">
|
{{ showMore ? '收起更多' : '查看更多' }}
|
</el-link>
|
</div>
|
</template>
|
<script setup>
|
import { computed, ref } from 'vue'
|
import dayjs from 'dayjs'
|
import { useMapStore } from '@/stores/map.js'
|
|
import marks from '@/utils/map/marks.js'
|
import mapUtil from '@/utils/map/util.js'
|
import scene_1 from '@/assets/icon/scene_1.png'
|
|
const mapStore = useMapStore()
|
|
const props = defineProps({
|
data: {
|
type: Array
|
},
|
loading: Boolean
|
})
|
|
const showCount = 3
|
|
const showMore = ref(false)
|
const showMoreBtn = computed(() => {
|
return props.data.length > showCount
|
})
|
|
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) => {
|
if (!a.updateTime) {
|
return 1
|
} else if (!b.updateTime) {
|
return -1
|
} else {
|
return dayjs(b.updateTime) - dayjs(a.updateTime)
|
}
|
})
|
// return l
|
})
|
|
const showTableData = computed(() => {
|
if (showMore.value) {
|
return tableData.value
|
} else {
|
return tableData.value.slice(0, showCount)
|
}
|
})
|
|
/**
|
* 计算整改率
|
* @param {Number} p 问题数
|
* @param {Number} c 整改数
|
*/
|
function calPer(p, c) {
|
if (p == 0) {
|
return '/'
|
} else {
|
return Math.round((c / p) * 100) + '%'
|
}
|
}
|
|
function handleRowClick(row, col, event) {
|
const title = row.scene.name
|
const lnglat = [row.scene.longitude, row.scene.latitude]
|
const img = scene_1
|
mapUtil.clearViews()
|
marks.drawMarker(title, lnglat, img)
|
mapUtil.setFitView()
|
|
mapStore.focusMarker = row
|
}
|
</script>
|
<style scoped>
|
.btn-more {
|
text-align: center;
|
}
|
</style>
|
