refactor(layout): 调整布局样式并优化轮播卡片组件

云

8 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

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

@@ -1,10 +1,13 @@
<template>
  <div>
    <PanelHeader title="产品采购金额分析" />
    <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>
        <div class="pie-center">
          <span class="pie-center-value">{{ totalAmount }}</span>
          <span class="pie-center-label">合计(元)</span>
        </div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -26,7 +29,8 @@
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
import { rawMaterialPurchaseAmountRatio } from '@/api/viewIndex.js'
import { BI, baseChartOptions, withTooltip, formatAmount } from '../theme.js'

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
@@ -48,20 +52,14 @@
// 卡片数据
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 landColors = BI.series

const landObjData = computed(() => array2obj(dataList.value, 'name'))

const totalAmount = computed(() =>
  formatAmount(dataList.value.reduce((sum, d) => sum + (Number(d.value) || 0), 0))
)

// 图例配置（右侧竖排）
const landLegend = computed(() => {
@@ -69,7 +67,7 @@
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      fontSize: 14,
      color: landColors[idx % landColors.length],
    },
  }))
@@ -77,35 +75,35 @@
  return {
    orient: 'vertical',
    top: 'center',
    left: '60%',
    itemGap: 30,
    left: '52%',
    itemGap: 24,
    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|%}`
      return `{title|${name}}{value|${formatAmount(item.value)}}{percent|${item.rate}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
        title: {
          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,
          color: BI.text,
          padding: [0, 0, 0, 0],
        },
        title: {
        value: {
          color: BI.textStrong,
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 6, 0, 10],
        },
        percent: {
          color: BI.accentBright,
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 6],
        },
        unit: {
          color: BI.text,
          fontSize: 12,
          padding: [0, 0, 0, 0],
        },
@@ -115,21 +113,22 @@
})

// 提示框
const landTooltip = {
const landTooltip = withTooltip({
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)',
}
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
})

// 双层环形饼图
const landSeries = ref([
  {
    name: '产品采购金额分析',
    type: 'pie',
    radius: ['40%', '60%'],
    radius: ['48%', '68%'],
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderColor: BI.sliceBorder,
      borderWidth: 2,
      borderRadius: 4,
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
@@ -146,9 +145,9 @@
    },
  },
  {
    // 内圈
    // 内圈轨道环
    type: 'pie',
    radius: ['40%', '45%'],
    radius: ['40%', '43%'],
    center: ['25%', '50%'],
    silent: true,
    label: {
@@ -158,7 +157,7 @@
      show: false,
    },
    itemStyle: {
      color: 'rgba(0, 127, 255, 0.25)',
      color: 'rgba(74, 108, 240, 0.22)',
    },
    data: [1],
  },
@@ -169,57 +168,35 @@
  height: '100%',
}

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}
const pieOptions = baseChartOptions

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()
  // }
const fetchData = () => {
  rawMaterialPurchaseAmountRatio()
    .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,
        }))
        dataList.value = items.map((it) => ({
          name: it.name,
          value: parseFloat(it.value) || 0,
          rate: it.rate,
          children: [],
        }))
        landSeries.value[0].data = dataList.value
      }
    })
    .catch((err) => {
      console.error('获取原材料采购金额占比失败:', err)
    })
}

onMounted(() => {
  loadData()
  fetchData()
})
</script>

@@ -231,7 +208,9 @@
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 18px;
  width: 100%;
  height: 449px;
@@ -244,19 +223,28 @@
  background: transparent;
}


.pie-background {
.pie-center {
  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;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 2;
}

.pie-center-value {
  font-weight: 600;
  font-size: 20px;
  color: var(--bi-text-strong);
  font-variant-numeric: tabular-nums;
}

.pie-center-label {
  font-size: 12px;
  color: var(--bi-text);
}
</style>