Merge remote-tracking branch 'origin/dev_New' into dev_New

gaoluyang

13 小时以前 710bcdab858d407d3be9e7a1df32282379c29df6

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -2,8 +2,8 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%">
      <div style="height: 100%"> 
      <div class="pie-chart-wrapper">
        <div class="pie-background"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -11,7 +11,7 @@
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :options="pieOptions"
          style="height: 100%"
          class="land-chart"
        />
@@ -28,36 +28,24 @@

// 数据列表（来自接口）
const dataList = ref([])
import { productCategoryDistribution } from '@/api/viewIndex.js'

// 颜色列表
const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF']

// label 富文本：为每个颜色生成一个小圆点样式（确保在 label 中可见）
const dotRich = landColors.reduce((acc, color, idx) => {
  acc[`dot${idx}`] = {
    width: 8,
    height: 8,
    borderRadius: 8,
    backgroundColor: color,
    align: 'center',
  }
  return acc
}, {})

// 图例配置（右侧竖排）
const landLegend = {
// 在制品工序柱状图配置
const workInProcessXAxis = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { 
      color: '#B8C8E0',
      interval: 0,
      rotate: 25
    },
    data: [],
  },
])

const workInProcessYAxis = [
  {
    type: 'value',
    axisLabel: { color: '#B8C8E0' },
    name: '',
  },
]

const workInProcessBarLegend = {
  show: false,
  icon: 'circle',
  data: [],
@@ -95,52 +83,62 @@

// 提示框
const landTooltip = {
  triggerOn: 'click',
  // triggerOn: 'hover',
  alwaysShowContent: true,
  position: function (pt) {
    return [pt[0], 130]
  },
  formatter: function (params) {
    return `${params.name} (${params.value}类)`
  },
}

// 双层环形饼图
const landSeries = ref([
  {
    name: '外圈',
    name: '产品大类',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
    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 },
      },
      formatter: function (params) {
        const children = params?.data?.children || []
        if (!children.length) return ''
        // label 展示 children 的 name + value
        return children.map((c) => `${c.name} ${c.value}`).join('\n')
        const parentName = params?.data?.name || ''
        const rawVal = params?.data?.value
        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
        const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
        const dot = `{${dotKey}|} `
        const parentLine = `${dot}{parent|${parentName} (${parentValue}类)}`
        if (!children.length) return parentLine
        // 父级全部显示；子级最多 5 个，超出显示省略号
        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
        if (children.length > 5) displayed.push('{child|…}')
        return [parentLine, ...displayed].join('\n')
      },
    },
    labelLine: {
      show: true,
      length: 40,
      length2: 40,
      length: 20,
      length2: 20,
      lineStyle: {
        color: '#B8C8E0',
      },
    name: '产品数量',
    type: 'bar',
    barWidth: 25,
    barGap: 0,
    emphasis: {
      focus: 'series',
    },
    itemStyle: {
      color: function (params) {
        return landColors[params.dataIndex % landColors.length]
      },
    },
    // 初始绑定为响应式数据源，后续通过接口填充
    data: dataList.value,
  },
  {
@@ -149,19 +147,6 @@
    radius: ['35%', '40%'],
    center: ['50%', '50%'],
    silent: true,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#4EE4FF' },
          { offset: 1, color: '#00A4ED' },
        ],
      },
      borderRadius: [4, 4, 0, 0]
    },
    label: {
      show: false,
    },
@@ -177,8 +162,12 @@

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

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

const loadData = async () => {
@@ -199,44 +188,10 @@
    landLegend.data = []
    landSeries.value[0].data = []
  }
const grid = {
  left: '3%',
  right: '4%',
  bottom: '15%',
  containLabel: true,
}

const tooltip = {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
  },
  formatter: function (params) {
    let result = params[0].axisValueLabel + '<br/>'
    params.forEach((item) => {
      result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`
    })
    return result
  },
}

// 获取各产品大类分布
const getProductCategoryDistribution = () => {
  productCategoryDistribution()
    .then((res) => {
      if (res.code === 200 && res.data && res.data.items) {
        workInProcessXAxis.value[0].data = res.data.items.map(item => item.name)
        workInProcessBarSeries.value[0].data = res.data.items.map(item => parseInt(item.value))
      }
    })
    .catch((error) => {
      console.error('获取各产品大类分布失败:', error)
    })
}

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

@@ -247,4 +202,26 @@
  width: 100%;
  height: 420px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}

.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
  width: 360px;
  height: 360px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>