| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <PanelHeader title="产品大类" /> |
|---|
| | | <PanelHeader title="物料编码" /> |
|---|
| | | <div class="panel-item-customers"> |
|---|
| | | <div class="pie-chart-wrapper" ref="pieWrapperRef"> |
|---|
| | | <div class="pie-background" ref="pieBackgroundRef"></div> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { ref, onMounted, onBeforeUnmount } from 'vue' |
|---|
| | | import { ref, onMounted, onBeforeUnmount, inject, watch } from 'vue' |
|---|
| | | import Echarts from '@/components/Echarts/echarts.vue' |
|---|
| | | import PanelHeader from '../PanelHeader.vue' |
|---|
| | | import { productCategoryDistribution } from '@/api/viewIndex.js' |
|---|
| | |
|---|
| | | // 双层环形饼图 |
|---|
| | | const landSeries = ref([ |
|---|
| | | { |
|---|
| | | name: '产品大类', |
|---|
| | | name: '物料编码', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['35%', '55%'], |
|---|
| | | center: ['50%', '50%'], |
|---|
| | |
|---|
| | | // 数据加载完成后调整背景位置 |
|---|
| | | adjustBackgroundPosition() |
|---|
| | | } catch (e) { |
|---|
| | | console.error('获取产品大类分布失败:', e) |
|---|
| | | console.error('获取物料编码分布失败:', e) |
|---|
| | | dataList.value = [] |
|---|
| | | landLegend.data = [] |
|---|
| | | landSeries.value[0].data = [] |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null) |
|---|
| | | if (dataDashboardRefreshTick) { |
|---|
| | | watch(dataDashboardRefreshTick, () => { |
|---|
| | | loadData() |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | onMounted(() => { |
|---|
| | | loadData() |
|---|
| | | initBackground() |
|---|
