feat: 进销质量类分析接口对接

gongchunyi

22 小时以前 e1535c267711c7c8d560e8916437167bbcd3156b

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

@@ -13,13 +13,8 @@

        <div class="inspect-body">
          <div class="ring">
            <Echarts
              :chartStyle="ringChartStyle"
              :series="buildRingSeries(section)"
              :tooltip="ringTooltip"
              :legend="{ show: false }"
              :options="ringOptions"
            />
            <Echarts :chartStyle="ringChartStyle" :series="buildRingSeries(section)" :tooltip="ringTooltip"
              :legend="{ show: false }" :options="ringOptions" />
          </div>

          <div class="stats">
@@ -51,42 +46,72 @@
</template>

<script setup>
import { reactive } from 'vue'
import { reactive, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import DateTypeSwitch from './DateTypeSwitch.vue'
import { rawMaterialDetection, processDetection, factoryDetection } from '@/api/viewIndex.js'

const QUALIFIED_COLOR = '#4EE4FF'
const UNQUALIFIED_COLOR = '#3378FF'
const TRACK_COLOR = 'rgba(78, 228, 255, 0.12)'

const apiMap = {
  raw: rawMaterialDetection,
  process: processDetection,
  final: factoryDetection,
}


const fetchSectionData = async (section) => {
  const api = apiMap[section.key]
  if (!api) return

  try {
    const res = await api({
      type: section.dateType,
    })

    if (res?.code === 200 && res?.data) {
      const data = res.data
      section.qualifiedCount = Number(data.qualifiedCount || 0)
      section.unqualifiedCount = Number(data.unqualifiedCount || 0)
      section.qualifiedRate = Number(data.qualifiedRate || 0)
      section.unqualifiedRate = Number(data.unqualifiedRate || 0)
    }
  } catch (err) {
    console.error(`${section.key} 接口请求失败`, err)
  }
}


const sections = reactive([
  {
    key: 'raw',
    title: '原材料检测',
    dateType: 1,
    qualifiedCount: 199,
    unqualifiedCount: 99,
    qualifiedRate: 90,
    unqualifiedRate: 10,
    qualifiedCount: 0,
    unqualifiedCount: 0,
    qualifiedRate: 0,
    unqualifiedRate: 0,
  },
  {
    key: 'process',
    title: '过程检测',
    dateType: 1,
    qualifiedCount: 199,
    unqualifiedCount: 99,
    qualifiedRate: 90,
    unqualifiedRate: 10,
    qualifiedCount: 0,
    unqualifiedCount: 0,
    qualifiedRate: 0,
    unqualifiedRate: 0,
  },
  {
    key: 'final',
    title: '成品出厂检测',
    dateType: 1,
    qualifiedCount: 199,
    unqualifiedCount: 99,
    qualifiedRate: 90,
    unqualifiedRate: 10,
    qualifiedCount: 0,
    unqualifiedCount: 0,
    qualifiedRate: 0,
    unqualifiedRate: 0,
  },
])

@@ -183,15 +208,15 @@
  const section = sections.find((s) => s.key === key)
  if (!section) return
  section.dateType = dateType
  const rates = calcRates(section.qualifiedCount, section.unqualifiedCount)
  section.qualifiedRate = rates.qualifiedRate
  section.unqualifiedRate = rates.unqualifiedRate
  // 切换日期类型时重新获取数据
  fetchSectionData(section)
}

sections.forEach((s) => {
  const rates = calcRates(s.qualifiedCount, s.unqualifiedCount)
  s.qualifiedRate = rates.qualifiedRate
  s.unqualifiedRate = rates.unqualifiedRate
// 组件挂载时获取所有section的数据
onMounted(() => {
  sections.forEach((section) => {
    fetchSectionData(section)
  })
})
</script>

@@ -248,7 +273,7 @@
        width: 18px;
        height: 7px;
        border-radius: 8px;
        background: linear-gradient(360deg, rgba(33,133,255,0.4) 0%, rgba(33,221,255,0) 100%);
        background: linear-gradient(360deg, rgba(33, 133, 255, 0.4) 0%, rgba(33, 221, 255, 0) 100%);
        position: absolute;
        top: 50%;
        left: -1px;
@@ -308,7 +333,7 @@
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content:space-around;
  justify-content: space-around;
  align-items: center;
  gap: 18px;
}
@@ -329,11 +354,9 @@
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(78, 228, 255, 0.75) 0 1deg,
    rgba(78, 228, 255, 0) 1deg 9deg
  );
  background: repeating-conic-gradient(from 0deg,
      rgba(78, 228, 255, 0.75) 0 1deg,
      rgba(78, 228, 255, 0) 1deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  opacity: 0.35;