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

spring

8 小时以前 6c7375701b519377752df5da89e8c3910c1661d8

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

@@ -3,6 +3,7 @@
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%">
      <div style="height: 100%"> 
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -27,6 +28,7 @@

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

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

// 图例配置（右侧竖排）
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: [],
@@ -128,6 +153,12 @@
      lineStyle: {
        color: '#B8C8E0',
      },
    name: '产品数量',
    type: 'bar',
    barWidth: 25,
    barGap: 0,
    emphasis: {
      focus: 'series',
    },
    itemStyle: {
      color: function (params) {
@@ -143,6 +174,19 @@
    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,
    },
@@ -159,6 +203,7 @@
const chartStyle = {
  width: '100%',
  height: '150%',
  height: '100%',
}

const loadData = async () => {
@@ -179,10 +224,44 @@
    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>

@@ -192,47 +271,5 @@
  padding: 18px;
  width: 100%;
  height: 420px;
}

.quality-cards {
  display: flex;
  gap: 12px;
  width: 100%;
  height: 54px;
  justify-content: space-between;
  align-items: center;
}

.quality-cardSec {
  display: flex;
}

.quality-cardTitle {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.quality-card {
  width: 80px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.quality-card.one {
  background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
}

.quality-card.two {
  background-image: url('@/assets/BI/guochengyijianicon@2x.png');
}

.quality-card.three {
  background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
}
</style>