From 377131455958f1acf2e824f8fcf34de05fcbb4c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Thu, 5 Sep 2024 16:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=89=8D=E5=A4=87=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/main.js                                   |   7 +-
 .../materialPreparation/index.vue             | 114 ++++++++++++++++--
 3 files changed, 109 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 8735228..2ee6102 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "countup.js": "^2.1.0",
     "crypto-js": "^4.1.1",
     "echarts": "^5.5.0",
+    "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.4.1",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.6",
diff --git a/src/main.js b/src/main.js
index 166a1c1..1f83cb3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,8 +12,11 @@ import QrcodeVue from 'qrcode.vue';
 // DataV https://datav-vue3.netlify.app/Guide/Guide.html
 // 图表组件
 import DataVVue3 from '@kjgl77/datav-vue3'
-// import * as echarts from 'echarts/core';
-
+import * as echarts from 'echarts';
+import {
+	CanvasRenderer
+} from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
 import VueEcharts from 'vue-echarts';
 // import * as DataV from '@dataview/datav-vue3';
 // element-plus dayJS
diff --git a/src/views/materialMangement/materialPreparation/index.vue b/src/views/materialMangement/materialPreparation/index.vue
index 50e31e0..0a53fd3 100644
--- a/src/views/materialMangement/materialPreparation/index.vue
+++ b/src/views/materialMangement/materialPreparation/index.vue
@@ -19,8 +19,8 @@
 			<el-form-item>
 				<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
 				<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
-				<el-button icon="Printer" @click="printAll">打印全部</el-button>
-				<el-button icon="Printer" @click="printSelect">打印勾选工单</el-button>
+				<!-- <el-button icon="Printer" @click="printAll">打印全部</el-button>
+				<el-button icon="Printer" @click="printSelect">打印勾选工单</el-button> -->
 			</el-form-item>
 		</el-form>
 		<!-- 工单列表 -->
@@ -38,7 +38,7 @@
 			}"
 			:loading="loading"
 			:data="dataList">
-			<vxe-column type="checkbox" width="60"></vxe-column>
+			<!-- <vxe-column type="checkbox" width="60"></vxe-column> -->
 			<vxe-column type="seq" title="序号" width="60"></vxe-column>
 			<vxe-column title="优先级" width="80">
 				<template #default="{ row, rowIndex }">
@@ -53,15 +53,19 @@
 								<template #header>
 									<div class="card-header">
 										<el-row justify="space-between">
-											<el-col :span="18">{{ item.taskCode }}</el-col>
+											<el-col :span="18">配料号:{{ item.taskCode }}</el-col>
 											<el-col :span="6"
 												><el-button type="danger" @click="handleDeleteTask(item, index, row)">删除</el-button></el-col
 											>
 										</el-row>
 									</div>
 								</template>
-								<el-scrollbar height="100px">
-									<el-row justify="space-between">
+								<el-scrollbar height="200px">
+									<div class="chart-box">
+										<vChart style="width: 200px; height: 200px" :option="getLiquidFillOptions(item.percentage)"></vChart>
+									</div>
+
+									<!-- <el-row justify="space-between">
 										<el-col :span="18">物料总数</el-col>
 										<el-col :span="6">200</el-col>
 									</el-row>
@@ -72,7 +76,7 @@
 									<el-row justify="space-between">
 										<el-col :span="18">完成进度</el-col>
 										<el-col :span="6">12/24</el-col>
-									</el-row>
+									</el-row> -->
 								</el-scrollbar>
 								<template #footer>
 									<el-row justify="space-between">
@@ -388,7 +392,12 @@ const confirmFilterEvent = (option) => {
 }
 // 单元格样式
 function cellClassName({ row, column }) {
-	if (row.configured_all_Quantity > 0) {
+	const needNum = row.boM_require_Quantity
+	const useNum = row.configured_all_Quantity
+	if (useNum > 0 && useNum < needNum) {
+		return 'row-orange'
+	}
+	if (useNum >= needNum) {
 		return 'row-green'
 	}
 }
@@ -418,6 +427,77 @@ function getTaskInfoList(taskCode) {
 }
 /// ========================================================
 
+/// ========== 水位图参数反馈 ================
+import 'echarts-liquidfill/src/liquidFill.js'
+function getLiquidFillOptions(num) {
+	let _color = '#ff0000'
+	if (num > 50 && num < 90) {
+		_color = '#ffaa00'
+	}
+	if (num >= 90) {
+		_color = '#00aa00'
+	}
+	return {
+		// title: {
+		// 	text: '完成率'
+		// },
+		legend: {
+			padding: 0
+		},
+		series: [
+			{
+				type: 'gauge',
+				// 进度条
+				progress: {
+					show: true,
+					width: 18
+				},
+				// 总刻度
+				axisLine: {
+					lineStyle: {
+						width: 18
+					}
+				},
+				// 刻度样式
+				axisTick: {
+					// 不显示刻度
+					show: false
+				},
+				// 分割线
+				splitLine: {
+					show: false
+				},
+				// 刻度标签
+				axisLabel: {
+					show: false
+				},
+				title: {
+					show: false
+				},
+				detail: {
+					valueAnimation: false,
+					fontSize: 18,
+					offsetCenter: [0, '50%']
+				},
+				itemStyle: {
+					color: _color,
+					shadowColor: 'rgba(214, 214, 214, 0.4)',
+					shadowBlur: 10,
+					shadowOffsetX: 2,
+					shadowOffsetY: 2
+				},
+				data: [
+					{
+						value: num
+					}
+				]
+			}
+		]
+	}
+}
+
+/// =======================================
+
 /// ======================= 打印配置 ==============================
 import printTemplate from './ThePrintTemplate.vue'
 
@@ -454,8 +534,8 @@ function printSelect() {
 	font-weight: 600;
 }
 .add-box {
-	width: 100%;
-	height: 280px;
+	width: 300px;
+	height: 380px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -465,8 +545,20 @@ function printSelect() {
 	display: flex;
 	flex-direction: row;
 }
+.chart-box {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
 ::v-deep(.row-green) {
 	background-color: #55aa7f;
 	color: #fff;
 }
-</style>
+::v-deep(.row-orange) {
+	background-color: #e29700;
+	color: #fff;
+}
+</style>
\ No newline at end of file