From a968e1b156857ace7d8e8cd24001eff3eccf3a58 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 02 二月 2026 16:40:24 +0800
Subject: [PATCH] 军泰伟业 1.部署修改
---
src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 170 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue
new file mode 100644
index 0000000..33f431d
--- /dev/null
+++ b/src/views/reportAnalysis/qualityAnalysis/components/left-bottom.vue
@@ -0,0 +1,170 @@
+<template>
+ <div>
+ <PanelHeader title="鍦ㄥ埗鍝佺粺璁″垎鏋�" />
+ <div class="main-panel panel-item-customers">
+ <CarouselCards :items="cardItems" :visible-count="3" />
+ <div class="chart-wrapper">
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="workInProcessBarLegend"
+ :series="workInProcessBarSeries"
+ :tooltip="tooltip"
+ :xAxis="workInProcessXAxis"
+ :yAxis="workInProcessYAxis"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 100%"
+ />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Echarts from '@/components/Echarts/echarts.vue'
+import PanelHeader from './PanelHeader.vue'
+import CarouselCards from './CarouselCards.vue'
+import { getWorkInProcessTurnover } from '@/api/viewIndex.js'
+
+// 鍦ㄥ埗鍝佸懆杞粺璁″璞�
+const workInProcessStatistics = ref({
+ totalQuantity: 0,
+ avgTurnoverDays: 0,
+ turnoverEfficiency: 0,
+})
+
+// 杞挱鍗＄墖鏁版嵁锛堢敱 workInProcessStatistics 鍚屾锛�
+const cardItems = ref([])
+
+const chartStyle = {
+ width: '100%',
+ height: '100%',
+}
+
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ 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 workInProcessXAxis = ref([
+ {
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: [],
+ },
+])
+const workInProcessYAxis = [
+ {
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' },
+ name: '',
+ },
+]
+const workInProcessBarLegend = {
+ show: false,
+ textStyle: { color: '#B8C8E0' },
+ data: [],
+}
+const workInProcessBarSeries = ref([
+ {
+ name: '鍦ㄥ埗鍝佹暟閲�',
+ type: 'bar',
+ barWidth: 25,
+ barGap: 0,
+ emphasis: { focus: 'series' },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: 'rgba(0,164,237,0)' },
+ { offset: 0, color: '#4EE4FF' },
+ ],
+ },
+ },
+ label: {
+ show: true,
+ position: 'top',
+ color: '#B8C8E0',
+ },
+ data: [],
+ },
+])
+
+const workInProcessTurnoverInfo = () => {
+ getWorkInProcessTurnover()
+ .then((res) => {
+ if (!res || !res.data) return
+ const stats = {
+ totalQuantity: res.data.totalOrderCount || 0,
+ avgTurnoverDays: res.data.averageTurnoverDays || 0,
+ turnoverEfficiency: res.data.turnoverEfficiency || 0,
+ }
+ workInProcessStatistics.value = stats
+ cardItems.value = [
+ { label: '鎬诲湪鍒舵暟閲�', value: stats.totalQuantity, unit: '浠�' },
+ { label: '骞冲潎鍛ㄨ浆澶╂暟', value: stats.avgTurnoverDays, unit: '澶�' },
+ { label: '鍛ㄨ浆鏁堢巼', value: stats.turnoverEfficiency, unit: '%' },
+ ]
+ if (res.data.processDetails && Array.isArray(res.data.processDetails)) {
+ workInProcessXAxis.value[0].data = res.data.processDetails
+ } else {
+ workInProcessXAxis.value[0].data = []
+ }
+ if (res.data.processQuantityDetails && Array.isArray(res.data.processQuantityDetails)) {
+ workInProcessBarSeries.value[0].data = res.data.processQuantityDetails
+ } else {
+ workInProcessBarSeries.value[0].data = []
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鍦ㄥ埗鍝佸懆杞粺璁″け璐�:', err)
+ })
+}
+
+onMounted(() => {
+ workInProcessTurnoverInfo()
+})
+</script>
+
+<style scoped>
+.main-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.panel-item-customers {
+ border: 1px solid #1a58b0;
+ padding: 18px;
+ width: 100%;
+ height: 449px;
+}
+
+.chart-wrapper {
+ height: 70%;
+ flex: 1;
+ min-height: 200px;
+}
+</style>
--
Gitblit v1.9.3