feat:禅道446折线图：X轴展示产品编号，Y轴展示分检的像位移值

src/views/statistics/bxerp/workerTimes.vue

@@ -107,13 +107,7 @@
 								</el-table-column>
 								<el-table-column label="总数">
 									<template #default="scope">
-										<span v-if="scope.row.总切片数" @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
+										<span @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
-										<span v-else @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总生产数 }}</span>
-									</template>
-								</el-table-column>
-								<el-table-column label="合格率" prop="合格率">
-									<template #default="scope">
-										<span>{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
 									</template>
 								</el-table-column>
 							</scTable>
@@ -137,11 +131,8 @@
 								<el-table-column label="物料名" prop="物料名" :filters="nameFilters" :filter-method="filterName" filter-placement="bottom-end">
 								</el-table-column>
 								<el-table-column label="总数" prop="总切片数">
-								</el-table-column>
-								<el-table-column label="合格率" prop="合格率">
 									<template #default="scope">
-										<span v-if="scope.row.总切片数>0">{{((scope.row.总切片合格数/scope.row.总切片数)*100).toFixed(2) }}%</span>
+										<span @click="handleClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
-										<span v-else>0%</span>
 									</template>
 								</el-table-column>
 							</scTable>
@@ -149,13 +140,86 @@
 					</el-container>
 				</el-tab-pane>
 			</el-tabs>
+			<el-drawer
+				v-model="boardVisible"
+				:title="boardTitle"
+				size="80%"
+				direction="rtl"
+				append-to-body
+				destroy-on-close
+			>
+				<div class="board-drawer-body">
+					<div class="board-drawer-table">
+						<el-table :data="boardList" border stripe height="100%" style="width: 100%;">
+							<el-table-column type="index" label="序号" width="60" />
+							<el-table-column label="板段号" prop="板段号" />
+							<el-table-column label="像位移" prop="像位移" />
+						</el-table>
+					</div>
+					<div class="board-drawer-chart">
+						<div class="board-chart-scroll">
+							<scEcharts
+								:option="chartOption"
+								:style="{ width: chartWidth + 'px', height: '100%' }"
+							/>
+						</div>
+					</div>
+				</div>
+			</el-drawer>
 		</el-main>
 	</el-container>
 </template>
 
 <script>
+import scEcharts from "@/components/scEcharts";
 export default {
 	name: "workerTimes",
+	components: { scEcharts },
+	computed: {
+		chartWidth() {
+			const perPoint = 22;
+			const minWidth = 600;
+			return Math.max(minWidth, (this.boardList.length || 1) * perPoint);
+		},
+		chartOption() {
+			const xs = this.boardList.map(i => i.板段号);
+			const ys = this.boardList.map(i => (i.像位移 == null ? null : Number(i.像位移)));
+			return {
+				tooltip: { trigger: 'axis' },
+				grid: { left: 50, right: 20, top: 30, bottom: 100 },
+				xAxis: {
+					type: 'category',
+					data: xs,
+					axisLabel: { rotate: 85, interval: 0, fontSize: 11 }
+				},
+				yAxis: { type: 'value', name: '像位移' },
+				series: [{
+					name: '像位移',
+					type: 'line',
+					data: ys,
+					connectNulls: false,
+					symbol: 'circle',
+					symbolSize: 6,
+					markLine: {
+						symbol: 'none',
+						silent: true,
+						data: [
+							{
+								yAxis: 100,
+								lineStyle: { color: '#f5a623', width: 1.5, type: 'dashed' },
+								label: { formatter: '标准 100', position: 'insideEndTop', color: '#f5a623' }
+							},
+							{
+								yAxis: 200,
+								lineStyle: { color: '#f5222d', width: 1.5, type: 'dashed' },
+								label: { formatter: '标准 200', position: 'insideEndTop', color: '#f5222d' }
+							}
+						]
+					}
+				}]
+			};
+		}
+	},
 	data() {
 		return {
 			query:{
@@ -175,6 +239,9 @@ export default {
 			filterNames:[],
 			visible:false,
 			userName:'',
+			boardVisible:false,
+			boardTitle:'',
+			boardList:[],
 			code:'lineDay_p',
 			activeName:'shengchan',
 			apiObj: this.$API.system.user.list,
@@ -310,6 +377,16 @@ export default {
 		deptChange(){
 			this.getData();
 		},
+		handleClick(row){
+			let that = this;
+			let detail = row.板段明细;
+			if(typeof detail === 'string'){
+				try{ detail = JSON.parse(detail); }catch(e){ detail = []; }
+			}
+			that.boardList = Array.isArray(detail) ? detail : [];
+			that.boardTitle = (row.工装编号 || row.开台人员姓名 || '') + ' 板段列表';
+			that.boardVisible = true;
+		},
 		handleQuery(){
 			let that = this;
 			that.getData();
@@ -319,4 +396,26 @@ export default {
 </script>
 
 <style scoped>
+.board-drawer-body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: 8px;
+}
+.board-drawer-table {
+	flex: 0 0 60%;
+	min-height: 0;
+	overflow: hidden;
+}
+.board-drawer-chart {
+	flex: 0 0 40%;
+	min-height: 0;
+	overflow: hidden;
+}
+.board-chart-scroll {
+	width: 100%;
+	height: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
 </style>