product-inventory-management.git

<template>
  <div>
    <PanelHeader title="产品采购金额分析" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
          :legend="landLegend"
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="pieOptions"
          style="height: 320px"
          class="land-chart"
        />
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
 
/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
 * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  属性名 a
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}
 
// 数据列表（来自接口）
const dataList = ref([])
 
// 卡片数据
const cardItems = ref([])
 
// 假数据
const mockCardData = [
  { name: '电子产品', value: 156, rate: '28.5' },
  { name: '机械设备', value: 132, rate: '24.1' },
  { name: '原材料', value: 98, rate: '17.9' },
  { name: '化工产品', value: 87, rate: '15.9' },
  { name: '纺织品', value: 45, rate: '8.2' },
  { name: '其他', value: 31, rate: '5.7' },
]
 
// 颜色列表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']
 
const landObjData = computed(() => array2obj(dataList.value, 'name'))
 
// 图例配置（右侧竖排）
const landLegend = computed(() => {
  const data = dataList.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: landColors[idx % landColors.length],
    },
  }))
 
  return {
    orient: 'vertical',
    top: 'center',
    left: '60%',
    itemGap: 30,
    data: data,
    formatter: function (name) {
      const item = landObjData.value[name]
      if (!item) return name
      return `{title|${name}}{value|${item.value}}{unit|件}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 30],
        },
        unit: {
          color: '#82baff',
          fontSize: 12,
          fontWeight: 600,
          padding: [0, 10, 0, 0],
        },
        percent: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 0],
        },
        title: {
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
      },
    },
  }
})
 
// 提示框
const landTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
}
 
// 双层环形饼图
const landSeries = ref([
  {
    name: '产品采购金额分析',
    type: 'pie',
    radius: ['40%', '60%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: dataList.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
  {
    // 内圈
    type: 'pie',
    radius: ['40%', '45%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
    },
    data: [1],
  },
])
 
const chartStyle = {
  width: '100%',
  height: '100%',
}
 
const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}
 
const setMockData = () => {
  // 卡片数据
  cardItems.value = mockCardData.map(item => ({
    label: item.name,
    value: item.value,
    unit: '件',
    rate: item.rate
  }))
  // 图表数据
  dataList.value = mockCardData.map((it) => ({
    name: it.name,
    value: Number(it.value || 0),
    rate: it.rate,
    children: [],
  }))
  landSeries.value[0].data = dataList.value
}
 
const loadData = async () => {
  setMockData()
  // try {
  //   const res = await productCategoryDistribution()
  //   const items = res?.data?.items || []
  //   dataList.value = items.map((it) => ({
  //     name: it.name,
  //     value: Number(it.value || 0),
  //     rate: it.rate,
  //     children: Array.isArray(it.children) ? it.children : [],
  //   }))
  //   // 卡片数据
  //   cardItems.value = items.map(item => ({
  //     label: item.name,
  //     value: parseInt(item.value),
  //     unit: '件',
  //     rate: item.rate
  //   }))
  //   landLegend.data = dataList.value.map((d) => d.name)
  //   landSeries.value[0].data = dataList.value
  // } catch (e) {
  //   console.error('获取产品大类分布失败:', e)
  //   setMockData()
  // }
}
 
onMounted(() => {
  loadData()
})
</script>
 
<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
 
.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
}
 
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}
 
 
.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>