From 89ab2ec7f8790c5cc184de98682af032c69c2afc Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 11 九月 2024 15:13:27 +0800
Subject: [PATCH] 2024.9.11
---
src/views/inspection/problem/component/ProblemSummary.vue | 142 +++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 135 insertions(+), 7 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 71c3684..e81d006 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,18 +1,81 @@
<template>
- <div>
- 闂鏁�: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼: {{ summary.changePer }}
- </div>
+ <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, ref } from 'vue'
+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
+ 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,
@@ -23,9 +86,74 @@
})
if (proNum > 0) {
- changePer = Math.round((changeNum / proNum) * 100) / 100 + '%'
+ changePer = Math.round((changeNum / proNum) * 100) + '%'
}
- return { proNum, changeNum, changePer }
+ 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 = ['10%', '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>
--
Gitblit v1.9.3