天津_意博凯信 1.备件管理-新增独立备件出库功能入口，支持直接完成备件领用出库操作。 2.设备保养-支持按日期分组折叠展示，分组条目可展开查看明细；...

gaoluyang

2026-08-07 73d112ddc9bdfeb7eaaf3b7308cfb4dbeb470c89

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

@@ -1,29 +1,31 @@
<template>
  <div>
    <PanelHeader title="销售品分布" />
    <div class="main-panel panel-item-customers">
      <CarouselCards :items="cardItems" :visible-count="3" />
      <div class="pie-chart-wrapper" ref="pieWrapperRef">
        <div class="pie-background" ref="pieBackgroundRef"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
   <div>
      <PanelHeader title="销售品分布" />
      <div class="main-panel panel-item-customers">
         <CarouselCards :items="cardItems" :visible-count="3" />
         <div class="pie-chart-wrapper" ref="pieWrapperRef">
            <div class="pie-background" ref="pieBackgroundRef"></div>
            <Echarts
               ref="echartsRef"
               :chartStyle="chartStyle"
               :legend="pieLegend"
               :series="pieSeries"
               :tooltip="pieTooltip"
               :color="pieColors"
               :options="pieOptions"
               style="height: 320px"
            />
         </div>
      </div>
   </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue'
import { productSalesAnalysis } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'

const dateRange = inject('psiDateRange', null)
import CarouselCards from './CarouselCards.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import { useChartBackground } from '@/hooks/useChartBackground.js'
@@ -38,16 +40,16 @@
 * @return {返回类型说明}
 */
function array2obj(array, key) {
  const resObj = {}
  for (let i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
   const resObj = {}
   for (let i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i]
   }
   return resObj
}

const chartStyle = {
  width: '100%',
  height: '100%',
   width: '100%',
   height: '100%',
}

const echartsRef = ref(null)
@@ -57,171 +59,171 @@
const pieObjData = computed(() => array2obj(pieDatas.value, 'name'))

const pieLegend = computed(() => {
  const data = pieDatas.value.map((d, idx) => ({
    name: d.name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: pieColors[idx % pieColors.length],
    },
  }))

  return {
    orient: 'vertical',
    top: 'center',
    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|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#43e8fc',
          fontSize: 14,
          fontWeight: 600,
          padding: [0, 0, 0, 10],
        },
        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 data = pieDatas.value.map((d, idx) => ({
      name: d.name,
      icon: 'circle',
      textStyle: {
         fontSize: 18,
         color: pieColors[idx % pieColors.length],
      },
   }))
	
   return {
      orient: 'vertical',
      top: 'center',
      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|%}`
      },
      textStyle: {
         rich: {
            value: {
               color: '#43e8fc',
               fontSize: 14,
               fontWeight: 600,
               padding: [0, 0, 0, 10],
            },
            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 pieTooltip = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c}元 ({d}%)',
   trigger: 'item',
   formatter: '{a} <br/>{b} : {c}元 ({d}%)',
}

const pieSeries = computed(() => [
  {
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
    },
    label: {
      show: false
    },
    minAngle: 15,
    data: pieDatas.value,
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function () {
      return Math.random() * 200
    },
  },
   {
      name: '产品销售金额分析',
      type: 'pie',
      radius: '60%',
      center: ['25%', '50%'],
      itemStyle: {
         borderColor: '#0a1c3a',
         borderWidth: 2,
      },
      label: {
         show: false
      },
      minAngle: 15,
      data: pieDatas.value,
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function () {
         return Math.random() * 200
      },
   },
])

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

const cardItems = ref([])

// 使用封装的背景位置调整方法（与其他文件保持一致）
const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  left: '25%',       // 图表中心 X 是 25%
  top: '50%',        // 图表中心 Y 是 50%
  offsetX: '-51.5%', // X 轴偏移
  offsetY: '-50%',   // Y 轴偏移
  watchData: pieDatas // 监听数据变化，自动调整位置
   wrapperRef: pieWrapperRef,
   backgroundRef: pieBackgroundRef,
   left: '25%',       // 图表中心 X 是 25%
   top: '50%',        // 图表中心 Y 是 50%
   offsetX: '-51.5%', // X 轴偏移
   offsetY: '-50%',   // Y 轴偏移
   watchData: pieDatas // 监听数据变化，自动调整位置
})

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)
    })
   productSalesAnalysis(dateRange?.value || undefined)
      .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)
      })
}

const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    fetchData()
  })
   watch(dataDashboardRefreshTick, () => {
      fetchData()
   })
}

onMounted(() => {
  fetchData()
  initBackground()
   fetchData()
   initBackground()
})

onBeforeUnmount(() => {
  cleanupBackground()
   cleanupBackground()
})
</script>

<style scoped>
.main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
   border: 1px solid #1a58b0;
   padding: 18px;
   width: 100%;
   height: 449px;
}
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
   position: relative;
   width: 100%;
   height: 320px;
}
.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;
   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>