<template>
|
<el-row justify="space-between">
|
<el-col :span="24">
|
<el-row v-if="mainProType" justify="space-between" class="p-h-16">
|
<el-statistic title="突出问题" :value="mainProType.name" />
|
<el-statistic title="问题数" :value="mainProType.count" />
|
<el-statistic title="占比" :value="mainProType.per" />
|
</el-row>
|
<!-- <el-text v-if="mainProType">
|
突出问题：{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{ mainProType.per }}
|
</el-text> -->
|
</el-col>
|
<el-col :span="6">
|
<el-row justify="end">
|
<!-- <OptionTime v-model="time"></OptionTime> -->
|
</el-row>
|
</el-col>
|
</el-row>
|
<div ref="echart" class="line-chart"></div>
|
</template>
|
<script>
|
import * as echarts from 'echarts'
|
import { pieChartOption } from '@/utils/echart/chart-option'
|
import { unref } from 'vue'
|
import dayjs from 'dayjs'
|
import problemApi from '@/api/fysp/problemApi.js'
|
import { useFetchData } from '@/composables/fetchData'
|
import { useAreaStore } from '@/stores/area.js'
|
import { mapStores } from 'pinia'
|
|
export default {
|
setup() {
|
const { loading, fetchData } = useFetchData()
|
return { loading, fetchData }
|
},
|
data() {
|
return {
|
dataList: []
|
}
|
},
|
computed: {
|
...mapStores(useAreaStore),
|
mainProType() {
|
let res
|
let total = 0,
|
max = 0
|
this.dataList.forEach((d) => {
|
total += d.count
|
})
|
this.dataList.forEach((d) => {
|
if (total > 0) {
|
const per = d.count / total
|
if (per >= max) {
|
max = per
|
// res.push({
|
// name: d.name,
|
// count: d.count,
|
// per: Math.round(per * 100) + '%'
|
// })
|
res = {
|
name: d.name,
|
count: d.count,
|
per: Math.round(per * 100) + '%'
|
}
|
}
|
}
|
})
|
return res
|
}
|
},
|
watch: {
|
'areaStore.area': {
|
handler(nV, oV) {
|
this.fetchProblemsStatistic()
|
},
|
deep: true
|
}
|
},
|
methods: {
|
fetchProblemsStatistic() {
|
const param = unref(this.areaStore.area)
|
param.starttime = dayjs(param.starttime).startOf('month').format('YYYY-MM-DD HH:mm:ss')
|
param.endtime = dayjs(param.endtime).endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
this.fetchData(() => {
|
return problemApi.fetchProblemsStatistic(param).then((res) => {
|
this.dataList = res
|
const chartData = res
|
.map((item) => {
|
return {
|
value: item.count,
|
name: item.name
|
}
|
})
|
.sort(function (a, b) {
|
return a.value - b.value
|
})
|
|
this.refresh(chartData)
|
})
|
})
|
},
|
refresh(chartData) {
|
const option = pieChartOption('问题分布', chartData)
|
this.echart.setOption(option)
|
}
|
},
|
mounted() {
|
this.echart = echarts.init(this.$refs.echart)
|
// this.area = this.areaStore.area
|
// this.fetchProblemsStatistic()
|
}
|
}
|
</script>
|
<style scoped>
|
.line-chart {
|
/* width: 200px; */
|
height: 200px;
|
}
|
</style>
|
