From 5c0c055ba880e1cd707c6d7306bddbb934e60421 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=AE=E5=BB=BA?= <450837357@qq.com>
Date: Mon, 7 Apr 2025 10:33:58 +0800
Subject: [PATCH] first

---
 .../board/kanBan/compents/midMidFirst.vue     |  20 +-
 .../options/mid_mid_left_2_options.js         | 173 ++++++++++++++++++
 src/views/board/kanBan/index.vue              |  34 ++--
 3 files changed, 209 insertions(+), 18 deletions(-)
 create mode 100644 src/views/board/kanBan/compents/options/mid_mid_left_2_options.js

diff --git a/src/views/board/kanBan/compents/midMidFirst.vue b/src/views/board/kanBan/compents/midMidFirst.vue
index 5b6b2a5..13ea4cd 100644
--- a/src/views/board/kanBan/compents/midMidFirst.vue
+++ b/src/views/board/kanBan/compents/midMidFirst.vue
@@ -4,13 +4,20 @@
 
 <script>
 import * as echarts from 'echarts';
- import { defineComponent } from 'vue';
+
+import { defineComponent } from 'vue';
 import resize from './dashboard/mixins/resize';
-import {option} from './options/mid_mid_left_1_options';
+import {option} from './options/mid_mid_left_2_options';
 export default defineComponent({
 	mixins: [resize],
 	props: {
 		year: null,
+		productionData : {
+			type : Object,
+			default () {
+				return {}
+			}
+		},
 		className: {
 			type: String,
 			default: 'chart'
@@ -29,10 +36,15 @@ export default defineComponent({
 			// myChart: null,
 			loading: true,
 			dataForCount: [],
-			dataForWeight: []
+			dataForWeight: [],
+			chartOptions: {}
 		};
 	},
 	async mounted() {
+		this.chartOptions = JSON.parse(JSON.stringify(option));
+		let newValue = this.productionData
+		let seriesData = [newValue.schedulingWorkorder, newValue.productionWorkorder, newValue.completeWorkorder]
+		option.series[0].data = seriesData
 		// await this.getTypeData()
 		this.initChart()
 	},
@@ -43,6 +55,8 @@ export default defineComponent({
 		// this.myChart.dispose();
 		// this.myChart = null;
 	},
+
+
 	methods: {
 		initChart() {
 			let myChart = echarts.init(this.$el);
diff --git a/src/views/board/kanBan/compents/options/mid_mid_left_2_options.js b/src/views/board/kanBan/compents/options/mid_mid_left_2_options.js
new file mode 100644
index 0000000..fe7a462
--- /dev/null
+++ b/src/views/board/kanBan/compents/options/mid_mid_left_2_options.js
@@ -0,0 +1,173 @@
+import * as echarts from 'echarts';
+
+let xAxisData = ["排产单量", "生产单量", "完工单量"]
+let seriesData = [100, 200, 300]
+
+let colors = ['#2fa3f8', '#f4b069', '#2fa3f8']
+
+
+export let option = {
+	// backgroundColor: '#09224e',
+	grid: {
+		left: '2%',
+		right: '8%',
+		top: '16%',
+		bottom: '5%',
+		containLabel: true,
+	},
+	tooltip: {
+		trigger: 'axis',
+		axisPointer: {
+			type: 'none'
+		},
+		formatter: function (params) {
+			return params[0].name + ': ' + params[0].value;
+		}
+	},
+	xAxis: {
+		data: xAxisData,
+		axisTick: {
+			show: false,
+		},
+		axisLine: {
+			show: true,
+			lineStyle: {
+				color: '#37B6F2',
+				opacity: 0.5,
+			}
+		},
+		axisLabel: {
+			textStyle: {
+				color: '#ffffff',
+			},
+			// interval: 0,
+			fontSize: 8,
+			//函数模板
+			formatter(val, i) {
+				if (i == 0) {
+					return `{start| ${val}}`
+				} else if (i == 1) {
+					return `{two| ${val}}`
+				}
+				else if (i == 2) {
+					return `{three| ${val}}`
+				}
+				else if (i == 3) {
+					return `{end| ${val}}`
+				}
+
+			},
+			rich: {
+				start: {
+					color: '#fff',
+					padding: [5, 4, 4, 4],
+					align: 'center'
+				},
+				two: {
+					color: '#fff',
+					padding: [5, 4, 4, 4],
+					align: 'center'
+				},
+				three: {
+					color: '#fff',
+					padding: [5, 4, 4, 4],
+					align: 'center'
+				},
+			}
+		},
+	},
+	yAxis: {
+		name:'（个）          ',
+		type: "value",
+		splitLine: {
+			show: true, lineStyle: {
+				color: '#37B6F2',
+				opacity: 0.1,
+			}
+		},
+		axisTick: { show: false },
+		axisLine: { show: false },
+		axisLabel: {
+			show: true,
+			textStyle: {
+				color: '#ffffff',
+			},
+		}
+	},
+	series: [{
+		name: 'hill',
+		type: 'pictorialBar',
+		barCategoryGap: '10%',
+		symbolClip: true,
+		symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+		itemStyle: {
+			normal: {
+				color: function (params) {
+					return {
+						type: 'linear',
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [{
+							offset: 0,
+							color: colors[params.dataIndex]
+						},
+							{
+								offset: 0.3,
+								color: colors[params.dataIndex]
+							},
+							{
+								offset: 1,
+								color: 'rgba(13,8,16,0)'
+							}
+						],
+						global: false //  缺省为  false
+					}
+				}
+			},
+			emphasis: {
+				opacity: 1
+			},
+		},
+		// 图形上方描述文字
+		label: {
+			show: false,
+			position: 'top',
+			offset: [0, 0],
+			fontSize: 12,
+			formatter: function (params) {
+				let index = params.dataIndex
+				let str = "{a" + index + "|" + params.value + "万人}";
+				return str;
+			},
+			rich: {
+				a0: {
+					color: colors[0],
+					align: "center",
+				},
+				a1: {
+					color: colors[1],
+					align: "center",
+				},
+				a2: {
+					color: colors[2],
+					align: "center",
+				},
+				a3: {
+					color: colors[3],
+					align: "center",
+				},
+
+			}
+		},
+		emphasis: {
+			itemStyle: {
+				opacity: 1
+			}
+		},
+		data: seriesData,
+		z: 2
+	}]
+};
+
diff --git a/src/views/board/kanBan/index.vue b/src/views/board/kanBan/index.vue
index 34b8cae..1f0ccc2 100644
--- a/src/views/board/kanBan/index.vue
+++ b/src/views/board/kanBan/index.vue
@@ -159,7 +159,7 @@
 							<div class="left-side"></div>
 							<div class="right-side">
 								<div class="upper-content">
-									<span style="font-size: 12px">排产数量</span>
+									<span style="font-size: 12px">排产单量</span>
 								</div>
 								<div class="upper-content">
                   <span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
@@ -168,17 +168,17 @@
 								</div>
 							</div>
 						</div>
-						<div class="bar_area">
-							<dv-loading v-show="loading10">Loading...</dv-loading>
-							<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />
-						</div>
+						<!--            <div class="bar_area">-->
+						<!--              <dv-loading v-show="loading10">Loading...</dv-loading>-->
+						<!--              <mid-mid-first v-show="!loading10" :year="year" width="375px" height="250px" @endLoading="endLoading" />-->
+						<!--            </div>-->
 					</div>
 					<div class="content_area">
 						<div class="ls_content">
 							<div class="left-side"></div>
 							<div class="right-side">
 								<div class="upper-content">
-									<span style="font-size: 12px">生产数量</span>
+									<span style="font-size: 12px">生产单量</span>
 								</div>
 								<div class="upper-content">
                   <span style="font-size: 16px; margin-left: 3px; color: #d6b514; font-weight: 400">
@@ -187,17 +187,17 @@
 								</div>
 							</div>
 						</div>
-						<div class="bar_area">
-							<dv-loading v-show="loading10">Loading...</dv-loading>
-							<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />
-						</div>
+						<!--            <div class="bar_area">-->
+						<!--              <dv-loading v-show="loading10">Loading...</dv-loading>-->
+						<!--              <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
+						<!--            </div>-->
 					</div>
 					<div class="content_area">
 						<div class="ls_content">
 							<div class="left-side"></div>
 							<div class="right-side">
 								<div class="upper-content">
-									<span style="font-size: 12px">完工数量</span>
+									<span style="font-size: 12px">完工单量</span>
 								</div>
 								<div class="upper-content">
                   <span style="font-size: 16px; margin-left: 3px; color: #00a2cb; font-weight: 400">
@@ -206,10 +206,14 @@
 								</div>
 							</div>
 						</div>
-						<div class="bar_area">
-							<dv-loading v-show="loading10">Loading...</dv-loading>
-							<mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />
-						</div>
+						<!--            <div class="bar_area">-->
+						<!--              <dv-loading v-show="loading10">Loading...</dv-loading>-->
+						<!--              <mid-mid-first v-show="!loading10" :year="year" width="375px" height="70px" @endLoading="endLoading" />-->
+						<!--            </div>-->
+					</div>
+					<div class="midd_area" style="    width: 372px;height: 207px;position: absolute;right: 30px;">
+						<dv-loading v-show="loading10">Loading...</dv-loading>
+						<mid-mid-first v-show="!loading10" :productionData="productionData" :year="year" width="370px" height="200px" @endLoading="endLoading" />
 					</div>
 				</div>