From d00a9f035aec50c37c8e0a1363a1968672fb875f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 16 七月 2024 16:58:39 +0800
Subject: [PATCH] 2024.7.16
---
src/views/inspection/problem/component/ProblemSummary.vue | 133 ++++++++++++++++++++++++++++++++++---------
1 files changed, 104 insertions(+), 29 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 1bdc8c4..e81d006 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,37 +1,51 @@
<template>
- <!-- <div class="font-small">
- 浠婃棩缁熻锛氶棶棰樻暟: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼:
- {{ summary.changePer }}
- </div> -->
-
- <div v-if="mainProType" class="font-small">
- 绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{ mainProType.per }}
- </div>
- <BaseTable :data="summary">
- <el-table-column
- label="闂鏁�"
- prop="proNum"
- :show-overflow-tooltip="true"
- width="60"
- ></el-table-column>
- <el-table-column
- label="鏁存敼鏁�"
- prop="changeNum"
- :show-overflow-tooltip="true"
- width="60"
- ></el-table-column>
- <el-table-column
- label="鏁存敼鐜�"
- prop="changePer"
- :show-overflow-tooltip="true"
- width="60"
- ></el-table-column>
- </BaseTable>
+ <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,
default: () => []
@@ -43,6 +57,25 @@
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,
@@ -59,6 +92,7 @@
return [{ proNum, changeNum, changePer }]
})
+// 绐佸嚭闂缁熻
const mainProType = computed(() => {
let res
let total = 0,
@@ -79,6 +113,47 @@
}
}
})
+ 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