<template>
|
<el-row>
|
<el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
|
<div v-show="mainProType">
|
<el-text>突出问题</el-text>
|
<div ref="echartRef" class="pie-chart"></div>
|
</div>
|
<template v-if="mainProType">
|
<div v-show="false" class="font-small">
|
突出问题：{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{
|
mainProType.per
|
}}
|
</div>
|
</template>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="colSpanLarge" :xl="colSpanLarge">
|
<el-text>单日汇总</el-text>
|
<BaseTable :data="summary">
|
<el-table-column
|
label="问题数"
|
prop="proNum"
|
:show-overflow-tooltip="true"
|
></el-table-column>
|
<el-table-column
|
label="整改数"
|
prop="changeNum"
|
:show-overflow-tooltip="true"
|
></el-table-column>
|
<el-table-column
|
label="整改率"
|
prop="changePer"
|
:show-overflow-tooltip="true"
|
></el-table-column>
|
</BaseTable>
|
</el-col>
|
</el-row>
|
</template>
|
<script setup>
|
import { computed, onMounted, ref, watch } from 'vue'
|
import dayjs from 'dayjs'
|
import * as echarts from 'echarts'
|
import { pieChartOption } from '@/utils/echart/chart-option'
|
|
const props = defineProps({
|
date: {
|
type: Date,
|
default: new Date()
|
},
|
data: {
|
type: Array,
|
default: () => []
|
},
|
proStatistic: {
|
type: Array,
|
default: () => []
|
},
|
loading: Boolean
|
})
|
|
const colSpanLarge = computed(() => {
|
return mainProType.value ? 15 : 24
|
})
|
|
// 饼图
|
let echart
|
const echartRef = ref(null)
|
|
// 当日时间
|
const timeObj = computed(() => {
|
const d = dayjs(props.date)
|
return {
|
year: d.year(),
|
month: d.month(),
|
date: d.date()
|
}
|
})
|
|
// 问题和整改数量统计
|
const summary = computed(() => {
|
let proNum = 0,
|
changeNum = 0,
|
changePer = '/'
|
props.data.forEach((d) => {
|
proNum += d.proNum
|
changeNum += d.changeNum
|
})
|
|
if (proNum > 0) {
|
changePer = Math.round((changeNum / proNum) * 100) + '%'
|
}
|
|
return [{ proNum, changeNum, changePer }]
|
})
|
|
// 突出问题统计
|
const mainProType = computed(() => {
|
let res
|
let total = 0,
|
max = 0
|
props.proStatistic.forEach((d) => {
|
total += d.count
|
})
|
props.proStatistic.forEach((d) => {
|
if (total > 0) {
|
const per = d.count / total
|
if (per >= max) {
|
max = per
|
res = {
|
name: d.name,
|
count: d.count,
|
per: Math.round(per * 100) + '%'
|
}
|
}
|
}
|
})
|
refreshChart(props.proStatistic)
|
return res
|
})
|
|
function refreshChart(data) {
|
if (!data || !echart) return
|
const chartData = data
|
.map((item) => {
|
return {
|
value: item.count,
|
name: item.name
|
}
|
})
|
// 正序排列
|
.sort(function (a, b) {
|
return b.value - a.value
|
})
|
const option = pieChartOption('问题分布', chartData, 1)
|
const series = option.series[0]
|
// series.radius = '50%'
|
series.center = ['15%', '50%']
|
series.label.formatter = '{b}\n{c}个({d}%)'
|
echart.setOption(option)
|
setTimeout(() => {
|
echart.resize()
|
}, 100)
|
}
|
|
// watch(props.proStatistic, (nV, oV) => {
|
// if (nV != oV) {
|
// refreshChart(nV)
|
// }
|
// })
|
|
onMounted(() => {
|
echart = echarts.init(echartRef.value)
|
})
|
</script>
|
<style scoped>
|
.pie-chart {
|
/* width: 200px; */
|
height: 70px;
|
}
|
</style>
|
