From 505798927f75c84693cc51becf16aa525503fc92 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 11 七月 2024 17:23:38 +0800
Subject: [PATCH] 2024.7.11
---
src/views/inspection/problem/component/ProblemType.vue | 108 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 94 insertions(+), 14 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index fe6d2d9..6967ca7 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,16 +1,95 @@
<template>
<el-row justify="space-between">
- <div>闂鍒嗗竷</div>
- <OptionTime v-model="time"></OptionTime>
+ <el-col :span="18">
+ <div v-if="mainProType">
+ 绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
+ <!-- <span v-for="item in mainProType" :key="item.name">
+ {{ item.name }}锛岄棶棰樻暟锛歿{ item.count }}锛屽崰姣攞{ item.per }}
+ </span> -->
+ </div>
+ </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 { 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
+ }
+ },
methods: {
- refresh() {
+ 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((page, pageSize) => {
+ 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 fontSize = 12
const option = {
legend: {
@@ -35,18 +114,19 @@
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
- data: [
- { value: 24, name: '鍑哄叆鍙ｏ紙閬撹矾锛夋壃灏�' },
- { value: 20, name: '宸ョ▼杞﹁締' },
- { value: 18, name: '閬撹矾鎵皹' },
- { value: 26, name: '璺潰纭寲' },
- { value: 30, name: '娓ｅ湡' }
- ].sort(function (a, b) {
- return a.value - b.value
- }),
+ data: chartData,
+ // data: [
+ // { value: 24, name: '鍑哄叆鍙ｏ紙閬撹矾锛夋壃灏�' },
+ // { value: 20, name: '宸ョ▼杞﹁締' },
+ // { value: 18, name: '閬撹矾鎵皹' },
+ // { value: 26, name: '璺潰纭寲' },
+ // { value: 30, name: '娓ｅ湡' }
+ // ].sort(function (a, b) {
+ // return a.value - b.value
+ // }),
roseType: 'radius',
label: {
- color: 'rgba(255, 255, 255, 0.3)'
+ color: 'rgba(255, 255, 255, 0.8)'
},
labelLine: {
lineStyle: {
@@ -74,7 +154,7 @@
},
mounted() {
this.echart = echarts.init(this.$refs.echart)
- this.refresh()
+ this.fetchProblemsStatistic()
}
}
</script>
--
Gitblit v1.9.3