From 8eeea8314a9d45b6c8bc4dd23692a43a98d1211a Mon Sep 17 00:00:00 2001
From: lucungang <lucungang@kehaida.com>
Date: Fri, 23 Aug 2024 15:54:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/quality/qcTable.js                    |  27 +
 src/views/quality/llAnalysisReport/index.vue  | 610 ++++++++++++++++++
 .../quality/qcTableCheckDevelop/index.vue     |   6 +-
 src/views/quality/qcTableCheckOrder/index.vue |  61 +-
 src/views/quality/qcTableIncome/index.vue     | 148 +++--
 src/views/quality/sjAnalysisReport/index.vue  | 608 +++++++++++++++++
 6 files changed, 1409 insertions(+), 51 deletions(-)
 create mode 100644 src/views/quality/llAnalysisReport/index.vue
 create mode 100644 src/views/quality/sjAnalysisReport/index.vue

diff --git a/src/api/quality/qcTable.js b/src/api/quality/qcTable.js
index b5c6628..625d967 100644
--- a/src/api/quality/qcTable.js
+++ b/src/api/quality/qcTable.js
@@ -109,6 +109,8 @@ export function getTableHzTitle(query) {
 		params: query
 	});
 }
+
+/**巡检分析报表 */
 //巡检缺陷不良率表头
 export function getTableHzTitleTh(query) {
 	return request({
@@ -140,4 +142,29 @@ export function getDictData(data) {
 		method: 'get',
 		params: data
 	});
+}
+/**首检、来料分析报表接口 */
+//不良率表体
+export function getTableHzDataSC(query) {
+	return request({
+		url: '/quality/staticTable/getTableHzDataSC',
+		method: 'post',
+		data: query
+	});
+}
+//不良占比分析报表
+export function getTableHzNoOkDataSC(query) {
+	return request({
+		url: '/quality/staticTable/getTableHzNoOkDataSC',
+		method: 'post',
+		data: query
+	});
+}
+//供应商柱状图
+export function getIncomeChartList(query) {
+	return request({
+		url: '/quality/staticTable/getIncomeChartList',
+		method: 'post',
+		data: query
+	});
 }
\ No newline at end of file
diff --git a/src/views/quality/llAnalysisReport/index.vue b/src/views/quality/llAnalysisReport/index.vue
new file mode 100644
index 0000000..6f2167a
--- /dev/null
+++ b/src/views/quality/llAnalysisReport/index.vue
@@ -0,0 +1,610 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-15px" >
+			<!-- <el-form-item label="检验类型">
+				 <el-select v-model="queryParams.checkType" filterable placeholder="请选择检验类型">
+					<el-option
+					v-for="item in jianyanType"
+					:key="item.factoryCode"
+					:label="item.factoryName"
+					:value="item.factoryCode">
+					</el-option>
+				</el-select>
+			</el-form-item> -->
+			<el-form-item label="统计维度">
+				 <el-select v-model="queryParams.ymdms" filterable placeholder="请选择检验节点" @change="change(queryParams.ymdms)">
+					<el-option
+					v-for="item in jianyanNode"
+					:key="item.ymdType"
+					:label="item.ymdTypeName"
+					:value="item.ymdType">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='yyyy'" label="检验时间">
+				<el-date-picker				
+				v-model="queryParams.incomeTimeStr"
+				style="width: 230px"
+				type="year"
+				value-format="yyyy"
+				placeholder="选择检验时间">
+				</el-date-picker>
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='mm'" label="检验时间">
+				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" value-format="yyyy-MM"
+				type="month" placeholder="选择检验时间" />
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='dd'" label="检验时间">
+				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" type="date" value-format="yyyy-MM-dd" placeholder="选择检验时间"
+				/>
+			</el-form-item>
+			
+			
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+			</el-form-item>
+		</el-form>
+
+		<div class="top-table">
+			<el-tabs v-model="activeName" @tab-click="handleClick" style="height:1000px;overflow-y: auro;">
+				<el-tab-pane label="不良率统计" name="first" >
+					<div class="top-one-tab">
+						<div class="title">来料不良率</div>
+						<div id="echartssl" style="width:1200px;height:450px;"></div>
+					</div>
+					<div class="top-left-table">
+						<div class="title">来料数据统计</div>
+						<el-table :data="tableTbody" height="440" :loading="loading" ref="tables">
+							<el-table-column label="时间" align="center" prop="timeCol" min-width="100" fixed="left" />
+							<el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100" fixed/>
+							<el-table-column label="缺陷不良" align="center"  min-width="100">
+								<template v-for="(column, index) in tableThead">
+									<el-table-column align="center"  :prop="'col'+index" :key="index" :label="column"/>
+								</template>
+							</el-table-column>
+							<el-table-column label="不良率" align="center" prop="noOkRate" min-width="100" fixed="right">
+								<template slot-scope="scope">
+									<span>{{scope.row.noOkRate}}%</span>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="不良数统计" name="second">
+					<div class="top-one-tab">
+						<div class="title">不良排列图</div>
+						<div id="echartTsl" style="width:1200px;height:500px;"></div>
+					</div>
+					<div class="top-right-table">
+						<div class="left-table">
+							<div class="title">来料</div>
+							<el-table :data="tableBlfx" height="400">
+								<el-table-column label="时间" align="center" prop="dataType" min-width="100" />
+								<el-table-column label="抽样数" align="center" prop="noOkQuality" min-width="100"/>
+								<el-table-column label="不良率" align="center" prop="noOkNumRate" min-width="100">
+									<template slot-scope="scope">
+										<span>{{scope.row.noOkNumRate}}%</span>
+									</template>
+								</el-table-column>
+							</el-table>
+						</div>
+						<div class="right-echarts">
+							<div class="title">不良比例</div>
+							<div id="echartsThl" style="width:600px;height:450px;"></div>
+						</div>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getIncomeTableList,getTableHzTitleTh,getTableHzDataSC,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
+import moment from 'moment';
+import * as echarts from "echarts";
+
+export default {
+	name: "LlAnalysisReport",
+	components: {},
+	data() {
+		return {
+			// 遮罩层
+			loading: false,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 生产rfid流程表格数据
+			incomeList: [],
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			activeName:'',
+			 // 新增-物料选中listtag
+            selectMaterielListtag:[],
+			dateRange:[],
+			// 查询参数
+			queryParams: {
+				checkType:'checkTypeLL',
+				ymdms: 'dd',
+				incomeTimeStr: moment().format('YYYY-MM-DD'),
+				
+			},
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {
+				workorderId: [
+					{ required: true, message: "工单ID不能为空", trigger: "blur" }
+				],
+				rfid: [
+					{ required: true, message: "rfid号不能为空", trigger: "blur" }
+				],
+			},
+			jianyanType:[
+				{
+					factoryCode:'checkTypeLL',
+					factoryName:''
+				}
+			],
+			jianyanNode:[
+				// {
+				// 	dictNo:'yyyy',
+				// 	dictValue:'年'
+				// },
+				// {
+				// 	dictNo:'mm',
+				// 	dictValue:'月'
+				// },
+				// {
+				// 	dictNo:'dd',
+				// 	dictValue:'日'
+				// },
+			],
+			tableThead:[
+				
+			],
+			tableTbody:[],
+			tableBlfx:[],
+			echartsData:[],
+			dateNode:'dd',
+		};
+	},
+	mounted(){
+		// this.$nextTick(()=>{
+			this.getDictData()
+			this.getThead()
+			this.getTbody()
+			this.getBlfx()
+		// })
+		
+		// this.getEchartsThl()
+	
+
+	},
+	created() {
+		this.activeName='first'
+	},
+	methods: {
+
+		handleClick(){
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+		},
+		async getThead(){
+			let res=await getTableHzTitleTh({checkType:'checkTypeLL'})
+			console.log('resTh',res)
+			this.tableThead=res.columns1
+			
+		},
+		async getTbody(){
+			this.loading=true
+			let res=await getTableHzDataSC(this.queryParams)
+			console.log('resData',res)
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+			let xData=[]
+			let yData=[]
+			this.tableTbody=res
+			res.map((item,index)=>{
+				xData.push(item.timeCol),
+				yData.push(item.noOkRate)
+				
+			})
+			console.log('tableTbody',this.tableTbody)
+			this.loading=false
+			this.getEchartsl(xData,yData)
+		},
+		async getBlfx(){
+			let xdata=[]
+			let ydata=[]
+			let peiData=[]
+			let res=await getTableHzNoOkData(this.queryParams)
+			console.log('res不良分析',res)
+			res.map((item,index)=>{
+				var pDat={}
+				pDat.name=item.dataType
+				pDat.value=item.noOkQuality
+				xdata.push(item.dataType)
+				ydata.push(item.noOkQuality)
+				peiData.push(pDat)
+			})
+			this.tableBlfx=res
+			console.log('table',this.tableBlfx)
+			this.getEchartsTl(xdata,ydata)
+			this.getEchartsThl(peiData)
+
+		},
+		change(e){
+			console.log('e',e)
+			this.dateNode=e,
+			this.queryParams.incomeTimeStr=null
+		},
+		 getDictData() {
+            const _this = this;
+            getDictData(
+                {
+                    dictType: 'static_dims',
+                }
+            ).then((response) => {
+                if (response) {
+                    console.log('response',response)
+                    _this.jianyanNode = response
+					_this.queryParams.ymdms=_this.jianyanNode[2].ymdType
+                }
+            });
+        },
+		getEchartsl(xData,yData){
+			var _this=this
+			var chartDoml = document.getElementById('echartssl');
+			var myChartl = echarts.init(chartDoml);
+			var optionl;
+			optionl = {
+				grid: {
+                    y: '5%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '1%',
+					width:'96%',
+                    containLabel: true
+                },
+				xAxis: {
+					type: 'category',
+					name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
+					splitLine: {
+						show: true  //分隔线，默认数值轴显示，类目轴不显示
+					},
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					axisLabel:{
+						rotate: _this.queryParams.ymdms=='mm'?50:0,
+						fontSize:11
+					},
+					
+					data: xData
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					// boundaryGap:true,
+					axisLine:{
+						// show:true,
+					},
+					axisLabel:{
+						formatter:'{value}%'
+					}
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: yData,
+						type: 'line',
+						symbol: "circle",
+						symbolSize: 5,
+						label:{
+							show:true,
+							fontSize:11
+						},
+						lineStyle: {
+							color: "rgba(12, 115, 242, 1)"
+						},
+						areaStyle:{
+							normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: "#fff" // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
+                                }], false)
+                        	},
+						}
+					}
+				]
+				};
+
+				optionl && myChartl.setOption(optionl);	
+		},
+		getEchartsTl(xdata,ydata){
+			var chartDoml = document.getElementById('echartTsl');
+			var myChart2l = echarts.init(chartDoml);
+			var option2l;
+			option2l = {
+				grid: {
+                    y: '10%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '2%',
+					width:'95%',
+                    containLabel: true
+                },
+				xAxis: {
+					type: 'category',
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					
+					data: xdata
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					axisLine:{
+					},
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: ydata,
+						type: 'bar',
+						label:{
+							show:true,
+							position: "top",
+						},
+						lineStyle: {
+							color: "rgba(12, 115, 242, 1)"
+						},
+						barWidth: 30,
+						itemStyle:{
+							normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: "#fff" // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
+                                }], false)
+                        	},
+						}
+					}
+				]
+				};
+
+				option2l && myChart2l.setOption(option2l);	
+		},
+		getEchartsThl(peiData){
+			console.log('peiData',peiData)
+			var chartDomTl = document.getElementById('echartsThl');
+			var myChart3l = echarts.init(chartDomTl);
+			var option3l;
+			option3l = {
+				//  title: {
+				// 	text: 'Referer of a Website',
+				// 	left: 'center'
+				// },
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					orient: 'vertical',
+					left: 'left'
+				},
+				series: [
+					{
+						name: '不良数',
+						type: 'pie',
+						radius: '50%',
+						minAngle: 30,
+						data: peiData,
+						emphasis: {
+							itemStyle: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						label: {
+							normal: {
+								position: 'inside',
+								formatter: '{d}%',
+
+								textStyle: {
+									color: '#fff',
+									fontWeight: 'bold',
+									fontSize: 10
+								}
+							}
+						},
+					}
+				]
+			}
+			option3l && myChart3l.setOption(option3l);	
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				recordId: null,
+				workorderId: null,
+				rfid: null,
+				factoryCode: null,
+				machineCode: null,
+				nowProcessId: null,
+				nextProcessId: null,
+				orderNum: null,
+				inTime: null,
+				outTime: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+        shiftId: null
+			};
+			this.resetForm("form");
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			console.log('queryForm',this.queryParams)
+			this.getThead()
+			this.getTbody()
+			this.getBlfx()
+			
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.queryParams.ymdms=null
+			this.queryParams.incomeTimeStr=null
+		},
+		// 多选框选中数据
+		handleSelectionChange(selection) {
+			this.ids = selection.map(item => item.recordId)
+			this.single = selection.length!==1
+			this.multiple = !selection.length
+		},
+	}
+};
+</script>
+<style lang="scss" scoped>
+.top-table{
+	//display: flex;
+	//justify-content: space-between;
+	width: 1280px;
+	height: 1000px;
+	.top-one-tab{
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+	.top-left-table{
+		width: 100%;
+		height: 470px;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}	
+	.top-right-table{
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		.left-table{
+			width: 48%;
+			.title{
+				font-size: 14px;
+				color:#606266;
+				padding: 5px 0px;
+				font-weight: 600;
+			}
+		}
+		.right-echarts{
+			width: 48%;
+			.title{
+				font-size: 14px;
+				color:#606266;
+				padding: 5px 0px;
+				font-weight: 600;
+			}
+		}
+		
+	}
+}
+.bottom-echart{
+	display: flex;
+	justify-content: space-between;
+	width: 1450px;
+	height: 240px;
+	padding-top: 15px;
+	.left-echart{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+	.right-echart{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+}
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 80%;
+  padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel{
+    width: 100px;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: black;
+    line-height: 40px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-right: 12px;
+  }
+  .tag {
+    width: 720px;
+    border: 1px #DCDFE6 solid;
+    height: 60px;
+    padding: 5px 15px;
+    overflow-y: scroll;
+    .tagitem{
+      margin-left: 5px;
+    }
+  }
+  .button1{
+    width: 37px;
+    height: 37px;
+    position: absolute;
+        right: -39px;
+    top: 2px;
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/quality/qcTableCheckDevelop/index.vue b/src/views/quality/qcTableCheckDevelop/index.vue
index afa9e36..7524f5a 100644
--- a/src/views/quality/qcTableCheckDevelop/index.vue
+++ b/src/views/quality/qcTableCheckDevelop/index.vue
@@ -106,7 +106,7 @@ import moment from 'moment';
 import * as echarts from "echarts";
 
 export default {
-	name: "qcTableCheckDevelop",
+	name: "QcTableCheckDevelop",
 	components: {},
 	data() {
 		return {
@@ -197,7 +197,9 @@ export default {
 	methods: {
 
 		handleClick(){
-
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
 		},
 		async getThead(){
 			let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'})
diff --git a/src/views/quality/qcTableCheckOrder/index.vue b/src/views/quality/qcTableCheckOrder/index.vue
index e2ec88d..bf04c73 100644
--- a/src/views/quality/qcTableCheckOrder/index.vue
+++ b/src/views/quality/qcTableCheckOrder/index.vue
@@ -31,7 +31,7 @@
 					></el-button>
 					<el-row style="display: none;">
 						<el-input type="input" clearable v-model="queryParams.supplierCode" placeholder="点击选择物料"/>
-						<el-input type="input"clearable v-model="queryParams.supplierName" placeholder="点击选择物料"/>
+						<el-input type="input" clearable v-model="queryParams.supplierName" placeholder="点击选择物料"/>
 					</el-row>
 				</div>
 			</el-form-item>
@@ -55,18 +55,27 @@
 			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 		</el-row>
 
-		<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
-			<el-table-column label="供应商编号" align="center" prop="supplierCode" width="120" fixed/>
-			<el-table-column label="供应商名称" align="left" prop="supplierName" width="390" fixed/>
-			<el-table-column label="总批数" align="center" prop="batchs" width="90"/>
-			<el-table-column label="合格批次" align="center" prop="okBatchs" width="100"/>
-			<el-table-column label="不合格批次" align="center" prop="noOkBatchs" width="100"/>
-			<el-table-column label="批次不良率" align="center" prop="noOkBatchRate" width="100"/>
-			<el-table-column label="总数量" align="center" prop="nums" width="90"/>
-			<el-table-column label="合格数量" align="center" prop="okNums" width="100"/>
-			<el-table-column label="不合格数量" align="center" prop="noOkNums" width="100"/>
-			<el-table-column label="数量不良率" align="center" prop="noOkNumRate" width="100"/>
-		</el-table>
+		<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed">
+			<thead>
+				<tr>
+					<th>不良项目</th>
+					<th v-for="(item,index) in ceshi" :key="index">{{item}}</th>
+					<th>多放支架</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>不良品数</td>
+					<td v-for="(item,index) in ceshi" :key="index">{{item}}</td>
+					<td>11</td>
+				</tr>
+				<tr>
+					<td>不良比例</td>
+					<td style="text-align:left;" :colspan="ceshi.length+1">***问题______次</td>
+					
+				</tr>
+			</tbody>
+		</table>
 
 		<pagination
 			v-show="total>0"
@@ -86,6 +95,7 @@ export default {
 	components: {},
 	data() {
 		return {
+			ceshi:[1,2,3],
 			// 遮罩层
 			loading: true,
 			// 选中数组
@@ -318,6 +328,31 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app-container{
+	width: 100%;
+	height: 100%;
+	.tableStyle{
+		width: 100%;
+		border-top: 1px solid #000;
+		border-left: 1px solid #000;
+		thead,
+		tbody tr{
+				text-align: center;
+				line-height: 45px;
+				border-top: 1px solid #000;
+				th{
+					padding: 0;
+					border-right: 1px solid #000;
+					border-bottom: 1px solid #000;
+				}
+				td{
+					padding: 0;
+					border-right: 1px solid #000;
+					border-bottom: 1px solid #000;
+				}			
+		}
+	}
+}
 .tagbox {
   display: flex;
   /* overflow: scroll; */
diff --git a/src/views/quality/qcTableIncome/index.vue b/src/views/quality/qcTableIncome/index.vue
index 9c84f0d..faeed86 100644
--- a/src/views/quality/qcTableIncome/index.vue
+++ b/src/views/quality/qcTableIncome/index.vue
@@ -54,27 +54,34 @@
 			</el-col>
 			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 		</el-row>
+		<el-tabs v-model="activeName" @tab-click="handleClick">
+				<el-tab-pane label="供应商质量统计" name="first" >
+					<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
+						<el-table-column label="供应商编号" align="center" prop="supplierCode" width="120" fixed/>
+						<el-table-column label="供应商名称" align="left" prop="supplierName" width="390" fixed/>
+						<el-table-column label="总批数" align="center" prop="batchs" width="90"/>
+						<el-table-column label="合格批次" align="center" prop="okBatchs" width="100"/>
+						<el-table-column label="不合格批次" align="center" prop="noOkBatchs" width="100"/>
+						<el-table-column label="批次不良率" align="center" prop="noOkBatchRate" width="100"/>
+						<el-table-column label="总数量" align="center" prop="nums" width="90"/>
+						<el-table-column label="合格数量" align="center" prop="okNums" width="100"/>
+						<el-table-column label="不合格数量" align="center" prop="noOkNums" width="100"/>
+						<el-table-column label="数量不良率" align="center" prop="noOkNumRate" width="100"/>
+					</el-table>
+					<pagination
+						v-show="total>0"
+						:total="total"
+						:page.sync="queryParams.pageNum"
+						:limit.sync="queryParams.pageSize"
+						@pagination="getList"
+					/>
+				</el-tab-pane>
+				<el-tab-pane label="不良率统计" name="second">
+					<div id="echartGys" style="width:1280px;height:450px;"></div>
+				</el-tab-pane>
+			</el-tabs>
 
-		<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
-			<el-table-column label="供应商编号" align="center" prop="supplierCode" width="120" fixed/>
-			<el-table-column label="供应商名称" align="left" prop="supplierName" width="390" fixed/>
-			<el-table-column label="总批数" align="center" prop="batchs" width="90"/>
-			<el-table-column label="合格批次" align="center" prop="okBatchs" width="100"/>
-			<el-table-column label="不合格批次" align="center" prop="noOkBatchs" width="100"/>
-			<el-table-column label="批次不良率" align="center" prop="noOkBatchRate" width="100"/>
-			<el-table-column label="总数量" align="center" prop="nums" width="90"/>
-			<el-table-column label="合格数量" align="center" prop="okNums" width="100"/>
-			<el-table-column label="不合格数量" align="center" prop="noOkNums" width="100"/>
-			<el-table-column label="数量不良率" align="center" prop="noOkNumRate" width="100"/>
-		</el-table>
-
-		<pagination
-			v-show="total>0"
-			:total="total"
-			:page.sync="queryParams.pageNum"
-			:limit.sync="queryParams.pageSize"
-			@pagination="getList"
-		/>
+		
 			<!--供应商选择弹窗-->
 			<ItemSelectSupplier
 				ref="itemSelectSupplier"
@@ -84,9 +91,10 @@
 </template>
 
 <script>
-import { getIncomeTableList} from "@/api/quality/qcTable";
+import { getIncomeTableList,getIncomeChartList} from "@/api/quality/qcTable";
 import ItemSelectSupplier from "./selectSupplier.vue";
 import moment from 'moment';
+import * as echarts from "echarts";
 export default {
 	name: "RfidProcess",
 	components: {ItemSelectSupplier},
@@ -115,22 +123,8 @@ export default {
 			// 查询参数
 			queryParams: {
 				incomeTimeYM:null,
-				incomeTimeArray: [],
-				checkTimeArray: [],
 				pageNum: 1,
 				pageSize: 10,
-				workorderId: null,
-				rfid: null,
-				factoryCode: null,
-				machineCode: null,
-				nowProcessId: null,
-				nextProcessId: null,
-				orderNum: null,
-				inTime: null,
-				outTime: null,
-				status: null,
-				shiftId: null,
-				productCode: null,
 				supplierName: '',
 				supplierCode: ''
 			},
@@ -144,18 +138,88 @@ export default {
 				rfid: [
 					{ required: true, message: "rfid号不能为空", trigger: "blur" }
 				],
-			}
+			},
+			activeName:'first',
 		};
 	},
 	mounted(){
 		this.getDate();
 		this.getList();
+		this.getIncomeChartList()
 	},
 	created() {
 		
 	},
 	methods: {
+		handleClick(){
+			// this.$nextTick(()=>{
+			// 	this.$refs.tables.doLayout()//对table进行重新布局
+			// })
+		},
+		getEchartsGys(xdata,ydata){
+			var chartDomGys = document.getElementById('echartGys');
+			var myChartGys = echarts.init(chartDomGys);
+			var optionGys;
+			optionGys = {
+				grid: {
+                    y: '10%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '2%',
+					width:'95%',
+                    containLabel: true
+                },
+				xAxis: {
+					type: 'category',
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					axisLabel:{
+						interval: 0,
+						rotate:xdata.length>7?45:0,
+					},
+					data: xdata
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					axisLine:{
+					},
+					axisLabel:{
+						formatter:'{value}%'
+					}
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: ydata,
+						type: 'bar',
+						label:{
+							show:true,
+							position: "top",
+						},
+						lineStyle: {
+							color: "rgba(12, 115, 242, 1)"
+						},
+						barWidth: 30,
+						itemStyle:{
+							normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: "#fff" // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
+                                }], false)
+                        	},
+						}
+					}
+				]
+				};
 
+				optionGys && myChartGys.setOption(optionGys);	
+		},
         /**获取默认查询时间段**/
 		getDate() {
 			let start = this.Fungetdate (0)
@@ -181,6 +245,17 @@ export default {
 				this.loading = false;
 			});
 		},
+		async getIncomeChartList(){
+			if(this.queryParams.incomeTimeYM!=null){
+				this.queryParams.yearMonth = moment(this.queryParams.incomeTimeYM).format('YYYY-MM');
+			}
+			let res=await getIncomeChartList(this.queryParams)
+			console.log('res',res)
+			var xdata=res.map(item=>item.supplierName)
+				var ydata=res.map(it=>it.noOkBatchRateVal)
+				this.getEchartsGys(xdata,ydata)
+
+		},
 		// 取消按钮
 		cancel() {
 			this.open = false;
@@ -217,6 +292,7 @@ export default {
 		handleQuery() {
 			this.queryParams.pageNum = 1;
 			this.getList();
+			this.getIncomeChartList()
 		},
 		/** 重置按钮操作 */
 		resetQuery() {
diff --git a/src/views/quality/sjAnalysisReport/index.vue b/src/views/quality/sjAnalysisReport/index.vue
new file mode 100644
index 0000000..4a76bd9
--- /dev/null
+++ b/src/views/quality/sjAnalysisReport/index.vue
@@ -0,0 +1,608 @@
+<template>
+	<div class="app-container">
+		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-15px" >
+			<!-- <el-form-item label="检验类型">
+				 <el-select v-model="queryParams.checkType" filterable placeholder="请选择检验类型">
+					<el-option
+					v-for="item in jianyanType"
+					:key="item.factoryCode"
+					:label="item.factoryName"
+					:value="item.factoryCode">
+					</el-option>
+				</el-select>
+			</el-form-item> -->
+			<el-form-item label="统计维度">
+				 <el-select v-model="queryParams.ymdms" filterable placeholder="请选择检验节点" @change="change(queryParams.ymdms)">
+					<el-option
+					v-for="item in jianyanNode"
+					:key="item.ymdType"
+					:label="item.ymdTypeName"
+					:value="item.ymdType">
+					</el-option>
+				</el-select>
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='yyyy'" label="检验时间">
+				<el-date-picker				
+				v-model="queryParams.incomeTimeStr"
+				style="width: 230px"
+				type="year"
+				value-format="yyyy"
+				placeholder="选择检验时间">
+				</el-date-picker>
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='mm'" label="检验时间">
+				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" value-format="yyyy-MM"
+				type="month" placeholder="选择检验时间" />
+			</el-form-item>
+			<el-form-item v-show="queryParams.ymdms=='dd'" label="检验时间">
+				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" type="date" value-format="yyyy-MM-dd" placeholder="选择检验时间"
+				/>
+			</el-form-item>
+			
+			
+			<el-form-item>
+				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+			</el-form-item>
+		</el-form>
+
+		<div class="top-table">
+			<el-tabs v-model="activeName" @tab-click="handleClick" style="height:1000px;overflow-y: auro;">
+				<el-tab-pane label="不良率统计" name="first" >
+					<div class="top-one-tab">
+						<div class="title">首检不良率</div>
+						<div id="echartssj" style="width:1200px;height:450px;"></div>
+					</div>
+					<div class="top-left-table">
+						<div class="title">首检数据统计</div>
+						<el-table :data="tableTbody" height="440" :loading="loading" ref="tables">
+							<el-table-column label="时间" align="center" prop="timeCol" min-width="100" fixed="left" />
+							<el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100" fixed/>
+							<el-table-column label="缺陷不良" align="center"  min-width="100">
+								<template v-for="(column, index) in tableThead">
+									<el-table-column align="center"  :prop="'col'+index" :key="index" :label="column"/>
+								</template>
+							</el-table-column>
+							<el-table-column label="不良率" align="center" prop="noOkRate" min-width="100" fixed="right">
+								<template slot-scope="scope">
+									<span>{{scope.row.noOkRate}}%</span>
+								</template>
+							</el-table-column>
+						</el-table>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="不良数统计" name="second">
+					<div class="top-one-tab">
+						<div class="title">不良排列图</div>
+						<div id="echartTsj" style="width:1200px;height:500px;"></div>
+					</div>
+					<div class="top-right-table">
+						<div class="left-table">
+							<div class="title">首检</div>
+							<el-table :data="tableBlfx" height="400">
+								<el-table-column label="时间" align="center" prop="dataType" min-width="100" />
+								<el-table-column label="抽样数" align="center" prop="noOkQuality" min-width="100"/>
+								<el-table-column label="不良率" align="center" prop="noOkNumRate" min-width="100">
+									<template slot-scope="scope">
+										<span>{{scope.row.noOkNumRate}}%</span>
+									</template>
+								</el-table-column>
+							</el-table>
+						</div>
+						<div class="right-echarts">
+							<div class="title">不良比例</div>
+							<div id="echartsThj" style="width:600px;height:450px;"></div>
+						</div>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getIncomeTableList,getTableHzTitleTh,getTableHzDataSC,getTableHzNoOkDataSC,getDictData} from "@/api/quality/qcTable";
+import moment from 'moment';
+import * as echarts from "echarts";
+
+export default {
+	name: "SjAnalysisReport",
+	components: {},
+	data() {
+		return {
+			// 遮罩层
+			loading: false,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 生产rfid流程表格数据
+			incomeList: [],
+			// 弹出层标题
+			title: "",
+			// 是否显示弹出层
+			open: false,
+			activeName:'first',
+			 // 新增-物料选中listtag
+            selectMaterielListtag:[],
+			dateRange:[],
+			// 查询参数
+			queryParams: {
+				checkType:'checkTypeSC',
+				ymdms: 'dd',
+				incomeTimeStr: moment().format('YYYY-MM-DD'),
+				
+			},
+			// 表单参数
+			form: {},
+			// 表单校验
+			rules: {
+				workorderId: [
+					{ required: true, message: "工单ID不能为空", trigger: "blur" }
+				],
+				rfid: [
+					{ required: true, message: "rfid号不能为空", trigger: "blur" }
+				],
+			},
+			jianyanType:[
+				{
+					factoryCode:'checkTypeSC',
+					factoryName:''
+				}
+			],
+			jianyanNode:[
+				// {
+				// 	dictNo:'yyyy',
+				// 	dictValue:'年'
+				// },
+				// {
+				// 	dictNo:'mm',
+				// 	dictValue:'月'
+				// },
+				// {
+				// 	dictNo:'dd',
+				// 	dictValue:'日'
+				// },
+			],
+			tableThead:[
+				
+			],
+			tableTbody:[],
+			tableBlfx:[],
+			echartsData:[],
+			dateNode:'dd',
+		};
+	},
+	mounted(){
+		// this.$nextTick(()=>{
+			this.getDictData()
+			this.getThead()
+			this.getTbody()
+			this.getBlfx()
+		// })
+		
+	
+
+	},
+	created() {
+	},
+	methods: {
+
+		handleClick(){
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+		},
+		async getThead(){
+			let res=await getTableHzTitleTh({checkType:'checkTypeSC'})
+			console.log('resTh',res)
+			this.tableThead=res.columns1
+			
+		},
+		async getTbody(){
+			this.loading=true
+			let res=await getTableHzDataSC(this.queryParams)
+			console.log('resData',res)
+			this.$nextTick(()=>{
+				this.$refs.tables.doLayout()//对table进行重新布局
+			})
+			let xData=[]
+			let yData=[]
+			this.tableTbody=res
+			res.map((item,index)=>{
+				xData.push(item.timeCol),
+				yData.push(item.noOkRate)
+				
+			})
+			console.log('tableTbody',this.tableTbody)
+			this.loading=false
+			this.getEchartsj(xData,yData)
+		},
+		async getBlfx(){
+			let xdata=[]
+			let ydata=[]
+			let peiData=[]
+			let res=await getTableHzNoOkDataSC(this.queryParams)
+			console.log('res不良分析',res)
+			res.map((item,index)=>{
+				var pDat={}
+				pDat.name=item.dataType
+				pDat.value=item.noOkQuality
+				xdata.push(item.dataType)
+				ydata.push(item.noOkQuality)
+				peiData.push(pDat)
+			})
+			this.tableBlfx=res
+			console.log('table',this.tableBlfx)
+			this.getEchartsTj(xdata,ydata)
+			this.getechartsThj(peiData)
+
+		},
+		change(e){
+			console.log('e',e)
+			this.dateNode=e,
+			this.queryParams.incomeTimeStr=null
+		},
+		 getDictData() {
+            const _this = this;
+            getDictData(
+                {
+                    dictType: 'static_dims',
+                }
+            ).then((response) => {
+                if (response) {
+                    console.log('response',response)
+                    _this.jianyanNode = response
+					_this.queryParams.ymdms=_this.jianyanNode[2].ymdType
+                }
+            });
+        },
+		getEchartsj(xData,yData){
+			var _this=this
+			var chartDomj = document.getElementById('echartssj');
+			var myChartj = echarts.init(chartDomj);
+			var optionj;
+			optionj = {
+				grid: {
+                    y: '5%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '1%',
+					width:'96%',
+                    containLabel: true
+                },
+				xAxis: {
+					type: 'category',
+					name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
+					splitLine: {
+						show: true  //分隔线，默认数值轴显示，类目轴不显示
+					},
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					axisLabel:{
+						rotate: _this.queryParams.ymdms=='dd'?0:50,
+						fontSize:11
+					},
+					
+					data: xData
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					// boundaryGap:true,
+					axisLine:{
+						// show:true,
+					},
+					axisLabel:{
+						formatter:'{value}%'
+					}
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: yData,
+						type: 'line',
+						symbol: "circle",
+						symbolSize: 5,
+						label:{
+							show:true,
+							fontSize:11
+						},
+						lineStyle: {
+							color: "rgba(12, 115, 242, 1)"
+						},
+						areaStyle:{
+							normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: "#fff" // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
+                                }], false)
+                        	},
+						}
+					}
+				]
+				};
+
+				optionj && myChartj.setOption(optionj);	
+		},
+		getEchartsTj(xdata,ydata){
+			var chartDomj = document.getElementById('echartTsj');
+			var myChart2j = echarts.init(chartDomj);
+			var option2j;
+			option2j = {
+				grid: {
+                    y: '10%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '2%',
+					width:'95%',
+                    containLabel: true
+                },
+				xAxis: {
+					type: 'category',
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					
+					data: xdata
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					axisLine:{
+					},
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: ydata,
+						type: 'bar',
+						label:{
+							show:true,
+							position: "top",
+						},
+						lineStyle: {
+							color: "rgba(12, 115, 242, 1)"
+						},
+						barWidth: 30,
+						itemStyle:{
+							normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                                    offset: 0,
+                                    color: "#fff" // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
+                                }], false)
+                        	},
+						}
+					}
+				]
+				};
+
+				option2j && myChart2j.setOption(option2j);	
+		},
+		getechartsThj(peiData){
+			console.log('peiData',peiData)
+			var chartDomTj = document.getElementById('echartsThj');
+			var myChart3j = echarts.init(chartDomTj);
+			var option3j;
+			option3j = {
+				//  title: {
+				// 	text: 'Referer of a Website',
+				// 	left: 'center'
+				// },
+				tooltip: {
+					trigger: 'item'
+				},
+				legend: {
+					orient: 'vertical',
+					left: 'left'
+				},
+				series: [
+					{
+						name: '不良数',
+						type: 'pie',
+						radius: '50%',
+						minAngle: 30,
+						data: peiData,
+						emphasis: {
+							itemStyle: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						},
+						label: {
+							normal: {
+								position: 'inside',
+								formatter: '{d}%',
+
+								textStyle: {
+									color: '#fff',
+									fontWeight: 'bold',
+									fontSize: 10
+								}
+							}
+						},
+					}
+				]
+			}
+			option3j && myChart3j.setOption(option3j);	
+		},
+		// 表单重置
+		reset() {
+			this.form = {
+				recordId: null,
+				workorderId: null,
+				rfid: null,
+				factoryCode: null,
+				machineCode: null,
+				nowProcessId: null,
+				nextProcessId: null,
+				orderNum: null,
+				inTime: null,
+				outTime: null,
+				status: null,
+				remark: null,
+				attr1: null,
+				attr2: null,
+				attr3: null,
+				attr4: null,
+				createBy: null,
+				createTime: null,
+				updateBy: null,
+				updateTime: null,
+        shiftId: null
+			};
+			this.resetForm("form");
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			console.log('queryForm',this.queryParams)
+			this.getThead()
+			this.getTbody()
+			this.getBlfx()
+			
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.queryParams.ymdms=null
+			this.queryParams.incomeTimeStr=null
+		},
+		// 多选框选中数据
+		handleSelectionChange(selection) {
+			this.ids = selection.map(item => item.recordId)
+			this.single = selection.length!==1
+			this.multiple = !selection.length
+		},
+	}
+};
+</script>
+<style lang="scss" scoped>
+.top-table{
+	//display: flex;
+	//justify-content: space-between;
+	width: 1280px;
+	height: 1000px;
+	.top-one-tab{
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+	.top-left-table{
+		width: 100%;
+		height: 470px;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}	
+	.top-right-table{
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		.left-table{
+			width: 48%;
+			.title{
+				font-size: 14px;
+				color:#606266;
+				padding: 5px 0px;
+				font-weight: 600;
+			}
+		}
+		.right-echarts{
+			width: 48%;
+			.title{
+				font-size: 14px;
+				color:#606266;
+				padding: 5px 0px;
+				font-weight: 600;
+			}
+		}
+		
+	}
+}
+.bottom-echart{
+	display: flex;
+	justify-content: space-between;
+	width: 1450px;
+	height: 240px;
+	padding-top: 15px;
+	.left-echart{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+	.right-echart{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+	}
+}
+.tagbox {
+  display: flex;
+  /* overflow: scroll; */
+  position: relative;
+  width: 80%;
+  padding-left: 26px;
+  margin-bottom: 15px;
+  .tagboxlabel{
+    width: 100px;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: black;
+    line-height: 40px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-right: 12px;
+  }
+  .tag {
+    width: 720px;
+    border: 1px #DCDFE6 solid;
+    height: 60px;
+    padding: 5px 15px;
+    overflow-y: scroll;
+    .tagitem{
+      margin-left: 5px;
+    }
+  }
+  .button1{
+    width: 37px;
+    height: 37px;
+    position: absolute;
+        right: -39px;
+    top: 2px;
+
+  }
+}
+</style>
\ No newline at end of file

From 79bf271791e0c40275b9c1218fdb8f8fd1e9c5c9 Mon Sep 17 00:00:00 2001
From: shaoyong <yorkshao@163.com>
Date: Fri, 23 Aug 2024 18:03:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=AE=B1=E5=9E=8B=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/mesBox/detail.vue | 36 ++++++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/views/mes/mesBox/detail.vue b/src/views/mes/mesBox/detail.vue
index 64ce24b..1150fca 100644
--- a/src/views/mes/mesBox/detail.vue
+++ b/src/views/mes/mesBox/detail.vue
@@ -11,10 +11,10 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="箱型标签" prop="boxLabel">
+      <el-form-item label="数据标签" prop="boxLabel">
         <el-input
           v-model="queryParams.boxLabel"
-          placeholder="请输入箱型标签"
+          placeholder="请输入数据标签"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -92,15 +92,18 @@
 
     <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="箱型编码" align="center" prop="boxCode" />
+      <el-table-column label="数据编码" align="center" prop="boxCode" />
       <el-table-column label="数据标签" align="center" prop="boxLabel">
         <template slot-scope="scope">
           <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.boxLabel}}</span>
           <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.boxLabel}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="数据关键字" align="center" prop="boxKey" />
-      <el-table-column label="数据值" align="center" prop="boxValue" />
+      <!-- <el-table-column label="数据关键字" align="center" prop="boxKey" />
+      <el-table-column label="数据值" align="center" prop="boxValue" /> -->
+      <el-table-column label="长" align="center" prop="length" />
+      <el-table-column label="宽" align="center" prop="width" />
+      <el-table-column label="高" align="center" prop="height" />
       <el-table-column label="数据排序" align="center" prop="boxSort" />
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
@@ -150,11 +153,20 @@
         <el-form-item label="数据标签" prop="boxLabel">
           <el-input v-model="form.boxLabel" placeholder="请输入数据标签" />
         </el-form-item>
-        <el-form-item label="数据关键字" prop="boxKey">
+        <!-- <el-form-item label="数据关键字" prop="boxKey">
           <el-input v-model="form.boxKey" placeholder="请输入数据键值" />
         </el-form-item>
         <el-form-item label="数据值" prop="boxValue">
-          <el-input v-model="form.boxValue" placeholder="请输入数据键值" />
+          <el-input type="number" v-model="form.boxValue" placeholder="请输入数据键值" />
+        </el-form-item> -->
+        <el-form-item label="长" prop="length">
+          <el-input type="number" v-model="form.length" placeholder="请输入长" />
+        </el-form-item>
+        <el-form-item label="宽" prop="width">
+          <el-input type="number" v-model="form.width" placeholder="请输入宽" />
+        </el-form-item>
+        <el-form-item label="高" prop="height">
+          <el-input type="number" v-model="form.height" placeholder="请输入高" />
         </el-form-item>
         <el-form-item label="样式属性" prop="cssClass">
           <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
@@ -268,13 +280,13 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        boxLabel: [
+        length: [
           { required: true, message: "数据标签不能为空", trigger: "blur" }
         ],
-        boxKey: [
+        width: [
           { required: true, message: "数据关键字不能为空", trigger: "blur" }
         ],
-        boxValue: [
+        height: [
           { required: true, message: "数据值不能为空", trigger: "blur" }
         ],
         boxSort: [
@@ -322,7 +334,11 @@ export default {
       this.form = {
         boxCode: undefined,
         boxLabel: undefined,
+        boxType: undefined,
         boxValue: undefined,
+        length: undefined,
+        width: undefined,
+        height: undefined,
         cssClass: undefined,
         listClass: 'default',
         boxSort: 0,