zhangwencui
2 天以前 1156fbe1fa77e4a6b7d890604d25e98edf8a7059
src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
@@ -22,7 +22,7 @@
<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'
@@ -65,13 +65,13 @@
  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: {
@@ -79,7 +79,7 @@
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 30],
          padding: [0, 0, 0, 10],
        },
        unit: {
          color: '#82baff',
@@ -104,7 +104,7 @@
const pieTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}
const pieSeries = computed(() => [
@@ -137,61 +137,31 @@
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>