From d54e45f8c324cb1dc3094a644697ae92210cd736 Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 27 一月 2026 17:31:09 +0800
Subject: [PATCH] feat: BI大屏接口对接
---
src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue | 138 +++++++++++++++++++++++++--------------------
1 files changed, 77 insertions(+), 61 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue b/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue
index 92e4fbc..72ba5ba 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue
@@ -3,6 +3,7 @@
<PanelHeader title="浜哄憳鍒嗗竷" />
<div class="main-panel panel-item-customers">
<Echarts
+ ref="echartsRef"
:chartStyle="chartStyle"
:legend="pieLegend"
:series="pieSeries"
@@ -16,18 +17,16 @@
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import { getProgressStatistics } from '@/api/viewIndex.js'
+import { ref, onMounted, computed } from 'vue'
+import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
/**
* @introduction 鎶婃暟缁勪腑key鍊肩浉鍚岀殑閭ｄ竴椤规彁鍙栧嚭鏉ワ紝缁勬垚涓�涓璞�
- * @description 璇︾粏鎻忚堪
* @param {鍙傛暟绫诲瀷} array 浼犲叆鐨勬暟缁� [{a:"1",b:"2"},{a:"2",b:"3"}]
* @param {鍙傛暟绫诲瀷} key 灞炴�у悕 a
* @return {杩斿洖绫诲瀷璇存槑}
- * @exception [杩濅緥绫诲瀷] [杩濅緥绫诲瀷璇存槑]
*/
function array2obj(array, key) {
const resObj = {}
@@ -42,83 +41,82 @@
height: '100%',
}
-// 楗煎浘鏁版嵁锛堢ず渚嬶級
-const pieDatas = [
- { value: 335, name: '杩涘叆鍖哄煙', percent: '10' },
- { value: 310, name: '鍖哄煙鍏ヤ镜', percent: '40' },
- { value: 274, name: '浜哄憳鑱氶泦', percent: '30' },
- { value: 235, name: '瓒婄晫渚︽祴', percent: '20' },
-]
+const echartsRef = ref(null)
+const pieDatas = ref([])
+const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF', '#43e8fc', '#27EBE7']
-const pieColors = ['#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
-const pieLegendData = pieDatas.map((d, idx) => ({
- name: d.name,
- icon: 'circle',
- textStyle: {
- fontSize: 18,
- color: pieColors[idx],
- },
-}))
-const pieObjData = array2obj(pieDatas, 'name')
+const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))
-const pieLegend = {
- orient: 'vertical',
- top: 'center',
- left: '50%',
- itemGap: 30,
- data: pieLegendData,
- formatter: function (name) {
- return `{title|${name}}{value|${pieObjData[name].value}}{unit|浜簘{percent|${pieObjData[name].percent}}{unit|%}`
- },
- textStyle: {
- rich: {
- value: {
- color: '#43e8fc',
- fontSize: 18,
- fontWeight: 600,
- padding: [0, 10, 0, 30],
- },
- unit: {
- color: '#82baff',
- fontSize: 14,
- fontWeight: 600,
- padding: [0, 50, 0, 0],
- },
- percent: {
- color: '#43e8fc',
- fontSize: 18,
- fontWeight: 600,
- padding: [0, 10, 0, 0],
- },
- title: {
- fontSize: 18,
- padding: [0, 0, 0, 0],
+const pieLegend = computed(() => {
+ const data = pieDatas.value.map((d, idx) => ({
+ name: d.name,
+ icon: 'circle',
+ textStyle: {
+ fontSize: 18,
+ color: pieColors[idx % pieColors.length],
+ },
+ }))
+
+ return {
+ orient: 'vertical',
+ top: 'center',
+ left: '50%',
+ itemGap: 30,
+ data: data,
+ formatter: function (name) {
+ const item = pieObjData.value[name]
+ if (!item) return name
+ return `{title|${name}}{value|${item.value}}{unit|浜簘{percent|${item.rate}}{unit|%}`
+ },
+ textStyle: {
+ rich: {
+ value: {
+ color: '#43e8fc',
+ fontSize: 18,
+ fontWeight: 600,
+ padding: [0, 10, 0, 30],
+ },
+ unit: {
+ color: '#82baff',
+ fontSize: 14,
+ fontWeight: 600,
+ padding: [0, 50, 0, 0],
+ },
+ percent: {
+ color: '#43e8fc',
+ fontSize: 18,
+ fontWeight: 600,
+ padding: [0, 10, 0, 0],
+ },
+ title: {
+ fontSize: 18,
+ padding: [0, 0, 0, 0],
+ },
},
},
- },
-}
+ }
+})
const pieTooltip = {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
}
-const pieSeries = ref([
+const pieSeries = computed(() => [
{
- name: '璁块棶鏉ユ簮',
+ name: '浜哄憳鍒嗗竷',
type: 'pie',
radius: '70%',
center: ['20%', '50%'],
itemStyle: {
- // 缁欐瘡涓墖鍖哄姞鍒嗛殧缂濋殭锛岄鑹插彇娣辫壊鑳屾櫙
borderColor: '#0a1c3a',
- borderWidth: 4,
+ borderWidth: 2,
},
label: {
show: false
},
- data: pieDatas,
- roseType: 'radius',
+ minAngle: 15,
+ data: pieDatas.value,
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function () {
@@ -131,6 +129,24 @@
backgroundColor: 'transparent',
textStyle: { color: '#B8C8E0' },
}
+
+const getDeptStaffDistribution = () => {
+ deptStaffDistribution().then(res => {
+ if (res.code === 200) {
+ pieDatas.value = res.data.items.map(item => ({
+ name: item.name,
+ value: parseInt(item.value),
+ rate: item.rate
+ }))
+ }
+ }).catch(err => {
+ console.error('鑾峰彇閮ㄩ棬浜哄憳鍒嗗竷鏁版嵁澶辫触:', err)
+ })
+}
+
+onMounted(() => {
+ getDeptStaffDistribution()
+})
</script>
<style scoped>
--
Gitblit v1.9.3