| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted, computed } from 'vue' |
| | | import { deptStaffDistribution } from '@/api/viewIndex.js' |
| | | import { productSalesAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import CarouselCards from './CarouselCards.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | |
| | | return { |
| | | orient: 'vertical', |
| | | top: 'center', |
| | | left: '60%', |
| | | left: '52%', |
| | | 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|%}` |
| | | return `{title|${name}}{value|${item.value}}{unit|元}{percent|${item.rate}}{unit|%}` |
| | | }, |
| | | textStyle: { |
| | | rich: { |
| | |
| | | color: '#43e8fc', |
| | | fontSize: 14, |
| | | fontWeight: 600, |
| | | padding: [0, 0, 0, 30], |
| | | padding: [0, 0, 0, 10], |
| | | }, |
| | | unit: { |
| | | color: '#82baff', |
| | |
| | | |
| | | const pieTooltip = { |
| | | trigger: 'item', |
| | | formatter: '{a} <br/>{b} : {c} ({d}%)', |
| | | formatter: '{a} <br/>{b} : {c}元 ({d}%)', |
| | | } |
| | | |
| | | const pieSeries = computed(() => [ |
| | |
| | | |
| | | const cardItems = ref([]) |
| | | |
| | | // 假数据 |
| | | const mockData = [ |
| | | { name: '生产部', value: 125, rate: '35.2' }, |
| | | { name: '技术部', value: 85, rate: '23.9' }, |
| | | { name: '销售部', value: 65, rate: '18.3' }, |
| | | { name: '财务部', value: 32, rate: '9.0' }, |
| | | { name: '人事部', value: 28, rate: '7.9' }, |
| | | { name: '行政部', value: 20, rate: '5.6' }, |
| | | ] |
| | | |
| | | const getDeptStaffDistribution = () => { |
| | | setMockData() |
| | | // deptStaffDistribution().then(res => { |
| | | // if (res.code === 200) { |
| | | // const items = res.data.items || [] |
| | | // // 卡片数据 |
| | | // cardItems.value = items.map(item => ({ |
| | | // label: item.name, |
| | | // value: parseInt(item.value), |
| | | // unit: '人' |
| | | // })) |
| | | // // 图表数据 |
| | | // pieDatas.value = items.map(item => ({ |
| | | // name: item.name, |
| | | // value: parseInt(item.value), |
| | | // rate: item.rate |
| | | // })) |
| | | // } else { |
| | | // // 使用假数据 |
| | | // setMockData() |
| | | // } |
| | | // }).catch(err => { |
| | | // console.error('获取部门人员分布数据失败:', err) |
| | | // // 使用假数据 |
| | | // setMockData() |
| | | // }) |
| | | } |
| | | |
| | | const setMockData = () => { |
| | | // 卡片数据 |
| | | cardItems.value = mockData.map(item => ({ |
| | | label: item.name, |
| | | value: item.value, |
| | | unit: '人' |
| | | })) |
| | | // 图表数据 |
| | | pieDatas.value = mockData.map(item => ({ |
| | | name: item.name, |
| | | value: item.value, |
| | | rate: item.rate |
| | | })) |
| | | const fetchData = () => { |
| | | productSalesAnalysis() |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const items = res.data |
| | | cardItems.value = items.map((item) => ({ |
| | | label: item.name, |
| | | value: item.value, |
| | | unit: '元', |
| | | rate: item.rate, |
| | | })) |
| | | pieDatas.value = items.map((item) => ({ |
| | | name: item.name, |
| | | value: parseFloat(item.value) || 0, |
| | | rate: item.rate, |
| | | })) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产品销售金额分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getDeptStaffDistribution() |
| | | fetchData() |
| | | }) |
| | | </script> |
| | | |