Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

huminmin

2 天以前 b46d3fcc37e5eb76e77e5b7f1c0e7383af237d30

 src/views/reportAnalysis/financialAnalysis/components/left-bottom.vue

@@ -1,7 +1,14 @@
<template>
  <div>
    <PanelHeader title="支出构成分析" />
    <PanelHeader title="构成分析" />
    <div class="main-panel panel-item-customers">
      <div class="filters-row">
        <ProductTypeSwitch
          v-model="amountType"
          :options="amountTypeOptions"
          @change="handleTypeChange"
        />
      </div>
      <!-- <CarouselCards :items="cardItems" :visible-count="3" /> -->
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
@@ -25,8 +32,8 @@
import { ref, onMounted, computed } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
import ProductTypeSwitch from './ProductTypeSwitch.vue'
import { expenseCompositionAnalysis } from '@/api/viewIndex.js'

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
@@ -41,6 +48,14 @@
  }
  return resObj
}

// 当前类型：1=支出 2=收入
const amountType = ref(1)

const amountTypeOptions = [
  { label: 1, text: '产品' },
  { label: 2, text: '客户' },
]

// 数据列表（来自接口）
const dataList = ref([])
@@ -69,12 +84,16 @@
    top: 'center',
    left: '52%',
    itemGap: 30,
    show: false,
    show: true,
    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|%}`
      const num = Number(item.value)
      const isWan = num > 10000
      const displayValue = isWan ? (num / 10000).toFixed(2) : num
      const displayUnit = isWan ? '万元' : '元'
      return `{title|${name}}{value|${displayValue}}{unit|${displayUnit}}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
@@ -112,12 +131,13 @@
}

// 双层环形饼图
// 双层环形饼图
const landSeries = ref([
  {
    name: '产品采购金额分析',
    name: '构成分析',
    type: 'pie',
    radius: ['50%', '75%'],
    center: ['50%', '60%'],
    radius: ['40%', '60%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
@@ -126,16 +146,7 @@
      },
    },
    label: {
      show: true,
      position: 'outside',
      color: '#fff',
      fontSize: 12,
      lineHeight: 18,
      // rich: {
      //   ...dotRich,
      //   parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
      //   child: { fontSize: 12, color: '#fff', lineHeight: 18 },
      // },
      show: false
    },
    minAngle: 15,
    data: dataList.value,
@@ -148,8 +159,8 @@
  {
    // 内圈
    type: 'pie',
    radius: ['50%', '60%'],
    center: ['50%', '60%'],
    radius: ['40%', '45%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
      show: false,
@@ -175,7 +186,7 @@
}

const fetchData = () => {
  rawMaterialPurchaseAmountRatio()
  expenseCompositionAnalysis({ type: amountType.value })
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        const items = res.data
@@ -195,8 +206,12 @@
      }
    })
    .catch((err) => {
      console.error('获取原材料采购金额占比失败:', err)
      console.error('获取费用构成分析失败:', err)
    })
}

const handleTypeChange = () => {
  fetchData()
}

onMounted(() => {
@@ -209,6 +224,14 @@
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filters-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.panel-item-customers {
@@ -228,11 +251,11 @@

.pie-background {
  position: absolute;
  left: 50%;
  top: 60%;
  left: 25%;
  top: 50%;
  transform: translate(-51.5%, -50%);
  width: 380px;
  height: 380px;
  width: 310px;
  height: 310px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;