From ff82e86becbd200adabd2ce56fba1f6b3c6c37e1 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 23 六月 2025 23:10:49 +0800
Subject: [PATCH] 2025.6.23
---
src/views/inspection/problem/component/ProblemType.vue | 91 +++++++++++----------------------------------
1 files changed, 22 insertions(+), 69 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index 6967ca7..7b40def 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,16 +1,18 @@
<template>
<el-row justify="space-between">
- <el-col :span="18">
- <div v-if="mainProType">
+ <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 }}
- <!-- <span v-for="item in mainProType" :key="item.name">
- {{ item.name }}锛岄棶棰樻暟锛歿{ item.count }}锛屽崰姣攞{ item.per }}
- </span> -->
- </div>
+ </el-text> -->
</el-col>
<el-col :span="6">
<el-row justify="end">
- <OptionTime v-model="time"></OptionTime>
+ <!-- <OptionTime v-model="time"></OptionTime> -->
</el-row>
</el-col>
</el-row>
@@ -18,9 +20,9 @@
</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'
@@ -66,12 +68,20 @@
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((page, pageSize) => {
+ this.fetchData(() => {
return problemApi.fetchProblemsStatistic(param).then((res) => {
this.dataList = res
const chartData = res
@@ -90,71 +100,14 @@
})
},
refresh(chartData) {
- const fontSize = 12
- const option = {
- legend: {
- data: ['闂', '鏁存敼'],
- textStyle: {
- fontSize: fontSize,
- color: 'white'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- tooltip: {
- trigger: 'item'
- },
- series: [
- {
- name: '闂鍒嗗竷',
- type: 'pie',
- radius: '55%',
- center: ['50%', '50%'],
- 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.8)'
- },
- labelLine: {
- lineStyle: {
- color: 'rgba(255, 255, 255, 0.3)'
- },
- smooth: 0.2,
- length: 10,
- length2: 20
- },
- itemStyle: {
- color: '#c23531',
- shadowBlur: 200,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- },
- animationType: 'scale',
- animationEasing: 'elasticOut',
- animationDelay: function (idx) {
- return Math.random() * 200
- }
- }
- ]
- }
+ const option = pieChartOption('闂鍒嗗竷', chartData)
this.echart.setOption(option)
}
},
mounted() {
this.echart = echarts.init(this.$refs.echart)
- this.fetchProblemsStatistic()
+ // this.area = this.areaStore.area
+ // this.fetchProblemsStatistic()
}
}
</script>
--
Gitblit v1.9.3