feat: BI大屏接口对接

gongchunyi

10 小时以前 d54e45f8c324cb1dc3094a644697ae92210cd736

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

@@ -2,7 +2,7 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%"> 
      <div style="height: 100%"> 
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -25,21 +25,18 @@
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { getWorkInProcessTurnover } from '@/api/viewIndex.js'

// 在制品周转统计对象
const workInProcessStatistics = ref({
  totalQuantity: 0,
  avgTurnoverDays: 0,
  turnoverEfficiency: 0,
})
import { productCategoryDistribution } from '@/api/viewIndex.js'

// 在制品工序柱状图配置
const workInProcessXAxis = ref([
  {
    type: 'category',
    axisTick: { show: false },
    axisLabel: { color: '#B8C8E0' },
    axisLabel: { 
      color: '#B8C8E0',
      interval: 0,
      rotate: 25
    },
    data: [],
  },
])
@@ -60,7 +57,7 @@

const workInProcessBarSeries = ref([
  {
    name: '在制品数量',
    name: '产品数量',
    type: 'bar',
    barWidth: 25,
    barGap: 0,
@@ -79,6 +76,7 @@
          { offset: 1, color: '#00A4ED' },
        ],
      },
      borderRadius: [4, 4, 0, 0]
    },
    label: {
      show: true,
@@ -91,13 +89,13 @@

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

const grid = {
  left: '3%',
  right: '4%',
  bottom: '3%',
  bottom: '15%',
  containLabel: true,
}

@@ -115,51 +113,22 @@
  },
}

// 在制品周转统计
const workInProcessTurnoverInfo = () => {
  getWorkInProcessTurnover()
// 获取各产品大类分布
const getProductCategoryDistribution = () => {
  productCategoryDistribution()
    .then((res) => {
      console.log('在制品周转统计数据:', res)

      if (!res || !res.data) {
        console.warn('在制品周转统计数据为空')
        return
      }

      // 从接口获取统计数据
      workInProcessStatistics.value = {
        totalQuantity: res.data.totalOrderCount || 0,
        avgTurnoverDays: res.data.averageTurnoverDays || 0,
        turnoverEfficiency: res.data.turnoverEfficiency || 0,
      }

      // 设置工序柱状图数据
      // X轴：processDetails (工序详情数组)
      // Y轴：processQuantityDetails (工序数量详情数组)
      if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
        // 设置X轴数据（工序名称）
        workInProcessXAxis.value[0].data = res.data.processDetails
      } else {
        workInProcessXAxis.value[0].data = []
      }

      if (
        res.data.processQuantityDetails &&
        Array.isArray(res.data.processQuantityDetails)
      ) {
        // 设置Y轴数据（在制品数量）
        workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
      } else {
        workInProcessBarSeries.value[0].data = []
      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)
      console.error('获取各产品大类分布失败:', error)
    })
}

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

@@ -169,47 +138,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>