From 2547159bbd781c8e1a41ecc939385396c85f9766 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 09 六月 2025 23:35:59 +0800
Subject: [PATCH] 2025.6.9（功能编写中）
---
src/views/inspection/problem/component/ProblemType.vue | 155 +++++++++++++++++++++++++++++++--------------------
1 files changed, 94 insertions(+), 61 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index fe6d2d9..7b40def 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,80 +1,113 @@
<template>
<el-row justify="space-between">
- <div>闂鍒嗗竷</div>
- <OptionTime v-model="time"></OptionTime>
+ <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 {
- methods: {
- refresh() {
- 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: [
- { 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)'
- },
- 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
+ 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.refresh()
+ // this.area = this.areaStore.area
+ // this.fetchProblemsStatistic()
}
}
</script>
--
Gitblit v1.9.3