巡检不良分析

src/api/quality/qcTable.js

@@ -109,3 +109,35 @@ export function getTableHzTitle(query) {
 		params: query
 	});
 }
+//巡检缺陷不良率表头
+export function getTableHzTitleTh(query) {
+	return request({
+		url: '/quality/staticTable/getTableHzTitle',
+		method: 'post',
+		data: query
+	});
+}
+//巡检缺陷不良率表体
+export function getTableHzData(query) {
+	return request({
+		url: '/quality/staticTable/getTableHzData',
+		method: 'post',
+		data: query
+	});
+}
+//巡检不良占比分析报表
+export function getTableHzNoOkData(query) {
+	return request({
+		url: '/quality/staticTable/getTableHzNoOkData',
+		method: 'post',
+		data: query
+	});
+}
+// 获取头部统计维度年月日
+export function getDictData(data) {
+	return request({
+		url: '/quality/qcInterface/getDictData',
+		method: 'get',
+		params: data
+	});
+}

src/views/quality/qcTableCheckDevelop/index.vue

@@ -1,61 +1,122 @@
 <template>
 	<div class="app-container">
-		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom: -34px;">
-			<el-form-item label="来料月份" prop="incomeTimeYM">
-				<el-date-picker
-				v-model="queryParams.incomeTimeYM"
-				format="yyyy-MM"
-				type="month"
-				placeholder="选择月">
+		<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 label="供应商" prop="supplierCodeArray">
-				<div class="tagbox">
-					<div class="tag" style="" placeholder="请选择供应商">
-						<el-tag
-						:key="index"
-						class="tagitem"
-						v-for="(tag, index) in selectMaterielListtag"
-						closable
-						:disable-transitions="false"
-						@close="handleClose(tag)"
-						>
-						{{ tag.supplierName }}
-						</el-tag>
-					</div>
-					<el-button
-						slot="append"
-						class="button1"
-						@click="handleSelectSupplier"
-						icon="el-icon-search"
-					></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-row>
-				</div>
+			<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>
 
-		<el-row :gutter="10" class="mb8">
-			<el-col :span="1.5">
-				<el-button
-					type="warning"
-					plain
-					icon="el-icon-download"
-					size="mini"
-					@click="handleExport"
-					v-hasPermi="['mes:rfidProcess:export']"
-				>导出</el-button>
-			</el-col>
-			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-		</el-row>
-
-		<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
+		<div class="top-table">
+			<div class="top-left-table">
+				<div class="title">巡检数据统计</div>
+				<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed">
+					<thead>
+						<tr>
+							<th rowspan="2">时间</th>
+							<th rowspan="2" style="border-right:1px solid #dfe6ec;">抽样数</th>
+							<th :colspan="tableThead.length?tableThead.length:''">缺陷不良</th>
+							<th rowspan="2" style="border-left:1px solid #dfe6ec;">不良率</th>
+						</tr>
+						<tr>
+							<th v-for="(item,index) in tableThead" :key="index">{{item}}</th>
+						</tr>
+					</thead>
+				</table>	
+				<div style="width:100%;height:300px;overflow-y: auto">
+				<table class="tableStyle" cellpadding="0" cellspacing="0" style="table-layout : fixed">
+					<tbody>
+						
+							<tr v-for="(item,index) in tableTbody" :key="index">
+								<td>{{item.timeCol}}</td>
+								<td>{{item.sampleQuality}}</td>
+								<td v-for="(items,indexs) in item.ddTab" :key="indexs">{{items}}</td>
+								<td>{{item.noOkRate}}%</td>
+							</tr>
+					
+				</tbody>
+						
+				</table>
+				</div>
+			</div>
+			<div class="top-right-table">
+				<div class="title">巡检</div>
+				<table class="tableStyle" cellpadding="0" cellspacing="0" style="width:100%;table-layout : fixed">
+					<thead>
+						<tr>
+							<th>缺陷类别</th>
+							<th>不良数</th>
+							<th>占比</th>
+						</tr>
+					</thead>
+				</table>
+					<div style="width:100%;height:300px;overflow-y: auto">
+						<table class="tableStyle" cellpadding="0" cellspacing="0" style="table-layout : fixed">
+							<tbody>
+								
+									<tr v-for="(items,indexs) in tableBlfx" :key="indexs">
+										<td>{{items.dataType}}</td>
+										<td>{{items.noOkQuality}}</td>
+										<td>{{items.noOkNumRate}}%</td>
+									</tr>
+							
+							</tbody>						
+						</table>
+					</div>
+			</div>
+			
+		</div>
+		<div class="bottom-echart">
+			<div class="left-echart">
+				<div class="title">巡检不良率</div>
+				<div id="echartss" style="width:680px;height:200px;"></div>
+			</div>
+			<div class="right-echart">
+				<div class="title">不良排列图</div>
+				<div id="echartTs" style="width:650px;height:200px;"></div>
+			</div>
+		  
+		</div>
+		<!-- <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"/>
@@ -66,21 +127,16 @@
 			<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>
+		</el-table> -->
 
-		<pagination
-			v-show="total>0"
-			:total="total"
-			:page.sync="queryParams.pageNum"
-			:limit.sync="queryParams.pageSize"
-			@pagination="getList"
-		/>
 	</div>
 </template>
 
 <script>
-import { getIncomeTableList} from "@/api/quality/qcTable";
+import { getIncomeTableList,getTableHzTitleTh,getTableHzData,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
 import moment from 'moment';
+import * as echarts from "echarts";
+
 export default {
 	name: "qcTableCheckDevelop",
 	components: {},
@@ -106,27 +162,13 @@ export default {
 			open: false,
 			 // 新增-物料选中listtag
             selectMaterielListtag:[],
+			dateRange:[],
 			// 查询参数
 			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: ''
+				checkType:'checkTypeSCXJ',
+				ymdms: 'dd',
+				incomeTimeStr: moment().format('YYYY-MM-DD'),
+				
 			},
 			// 表单参数
 			form: {},
@@ -138,47 +180,290 @@ export default {
 				rfid: [
 					{ required: true, message: "rfid号不能为空", trigger: "blur" }
 				],
-			}
+			},
+			jianyanType:[
+				{
+					factoryCode:'checkTypeSCXJ',
+					factoryName:''
+				}
+			],
+			jianyanNode:[
+				// {
+				// 	dictNo:'yyyy',
+				// 	dictValue:'年'
+				// },
+				// {
+				// 	dictNo:'mm',
+				// 	dictValue:'月'
+				// },
+				// {
+				// 	dictNo:'dd',
+				// 	dictValue:'日'
+				// },
+			],
+			tableThead:[],
+			tableTbody:[],
+			tableBlfx:[],
+			echartsData:[],
+			dateNode:'dd',
 		};
 	},
 	mounted(){
-		this.getDate();
-		this.getList();
+		this.getDictData()
+		this.getThead()
+		this.getTbody()
+		this.getBlfx()
+	
+
 	},
 	created() {
 		
 	},
 	methods: {
 
-        /**获取默认查询时间段**/
-		getDate() {
-			let start = this.Fungetdate (0)
-			this.queryParams.incomeTimeYM=start
+
+		async getThead(){
+			let res=await getTableHzTitleTh({checkType:'checkTypeSCXJ'})
+			console.log('resTh',res)
+			this.tableThead=res.columns1
+		},
+		async getTbody(){
+			let res=await getTableHzData(this.queryParams)
+			console.log('resData',res)
+			let xData=[]
+			let yData=[]
+			res.map((item,index)=>{
+				let ddTab=[]
+				xData.push(item.timeCol),
+				yData.push(item.noOkRate)
+				Object.keys(item).map((itemT,indexT)=>{
+					if((itemT!='timeCol')&&(itemT!='sampleQuality')&&(itemT!='noOkRate')){
+						ddTab.push(item[itemT])
+					}
+				})
+				item.ddTab=ddTab
+			})
+			console.log('resData处理后',res)
+			this.tableTbody=res
+			
+			this.getEcharts(xData,yData)
 		},
-		Fungetdate (num) {
-			var dd = new Date();
-			dd.setDate(dd.getDate() + num);
-			var y = dd.getFullYear();
-			var m = dd.getMonth() + 1;//获取当前月份的日期
-			var d = dd.getDate();
-			return y + "-" + m;
+		async getBlfx(){
+			let xdata=[]
+			let ydata=[]
+			let res=await getTableHzNoOkData(this.queryParams)
+			console.log('res不良分析',res)
+			res.map((item,index)=>{
+				xdata.push(item.dataType)
+				ydata.push(item.noOkQuality)
+			})
+			this.tableBlfx=res
+			console.log('table',this.tableBlfx)
+			this.getEchartsT(xdata,ydata)
+
 		},
-		/** 查询列表 */
-		getList() {
-			this.loading = true;
-            if(this.queryParams.incomeTimeYM!=null){
-				this.queryParams.yearMonth = moment(this.queryParams.incomeTimeYM).format('YYYY-MM');
-			}
-			getIncomeTableList(this.queryParams).then(response => {
-				this.incomeList = response.rows;
-				this.total = response.total;
-				this.loading = false;
-			});
+		change(e){
+			console.log('e',e)
+			this.dateNode=e,
+			this.queryParams.incomeTimeStr=null
 		},
-		// 取消按钮
-		cancel() {
-			this.open = false;
-			this.reset();
+		 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
+                }
+            });
+        },
+		getEcharts(xData,yData){
+			var _this=this
+			var chartDom = document.getElementById('echartss');
+			var myChart = echarts.init(chartDom);
+			var option;
+			option = {
+				// title:{
+				// 	text:'不\n良\n率\n%',
+				// 	left:'1%',
+				// 	top:'30%'
+				// },
+				grid: {
+                    y: '10%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '1%',
+					width:'95%',
+                    containLabel: true
+                },
+				// legend:   {
+				// 	top:0,
+                //     right:120,
+                //     icon: "roundRect",
+                //     data:["成品包装不良率%"],
+				// 	textStyle:{
+				// 		color:'#000',
+				// 		fontSize:12
+				// 	}
+                // },
+				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}%'
+					}
+					// splitLine: {
+					// 	show: true
+					// },
+					// axisTick:{
+					// 	show:true,
+					// 	inside:true,
+					// 	alignWithLabel:true,
+					// },
+				},
+				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)
+                        	},
+						}
+					}
+				]
+				};
+
+				option && myChart.setOption(option);	
+		},
+		getEchartsT(xdata,ydata){
+			var chartDom = document.getElementById('echartTs');
+			var myChart2 = echarts.init(chartDom);
+			var option2;
+			option2 = {
+				// title:{
+				// 	text:'不\n良\n率\n%',
+				// 	left:'1%',
+				// 	top:'30%'
+				// },
+				grid: {
+                    y: '10%',
+					x:'1%',
+                    y2: '6%',
+                    x2: '2%',
+					width:'95%',
+                    containLabel: true
+                },
+				// legend:   {
+				// 	top:0,
+                //     right:120,
+                //     icon: "roundRect",
+                //     data:["成品包装不良率%"],
+				// 	textStyle:{
+				// 		color:'#000',
+				// 		fontSize:12
+				// 	}
+                // },
+				xAxis: {
+					type: 'category',
+					// splitLine: {
+					// 	show: true  //分隔线，默认数值轴显示，类目轴不显示
+					// },
+					axisTick:{
+						show:false,
+						inside:true,
+					},
+					
+					data: xdata
+				},
+				yAxis: {
+					type: 'value',
+					show:true,
+					// boundaryGap:true,
+					axisLine:{
+						// show:true,
+					},
+					// splitLine: {
+					// 	show: true
+					// },
+					// axisTick:{
+					// 	show:true,
+					// 	inside:true,
+					// 	alignWithLabel:true,
+					// },
+				},
+				series: [
+					{   
+						name:'成品包装不良率%',
+						data: ydata,
+						type: 'bar',
+						// symbol: "circle",
+						// symbolSize: 5,
+						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)
+                        	},
+						}
+					}
+				]
+				};
+
+				option2 && myChart2.setOption(option2);	
 		},
 		// 表单重置
 		reset() {
@@ -209,13 +494,16 @@ export default {
 		},
 		/** 搜索按钮操作 */
 		handleQuery() {
-			this.queryParams.pageNum = 1;
-			this.getList();
+			console.log('queryForm',this.queryParams)
+			this.getThead()
+			this.getTbody()
+			this.getBlfx()
+			
 		},
 		/** 重置按钮操作 */
 		resetQuery() {
-			this.resetForm("queryForm");
-			this.handleQuery();
+			this.queryParams.ymdms=null
+			this.queryParams.incomeTimeStr=null
 		},
 		// 多选框选中数据
 		handleSelectionChange(selection) {
@@ -223,101 +511,119 @@ export default {
 			this.single = selection.length!==1
 			this.multiple = !selection.length
 		},
-		/** 新增按钮操作 */
-		handleAdd() {
-			this.reset();
-			this.open = true;
-			this.title = "添加生产rfid流程";
-		},
-		/** 修改按钮操作 */
-		handleUpdate(row) {
-			this.reset();
-			const recordId = row.recordId || this.ids
-			getRfidProcess(recordId).then(response => {
-				this.form = response.data;
-				this.open = true;
-				this.title = "修改生产rfid流程";
-			});
-		},
-		/** 提交按钮 */
-		submitForm() {
-			this.$refs["form"].validate(valid => {
-				if (valid) {
-					if (this.form.recordId != null) {
-						updateRfidProcess(this.form).then(response => {
-							this.$modal.msgSuccess("修改成功");
-							this.open = false;
-							this.getList();
-						});
-					} else {
-						addRfidProcess(this.form).then(response => {
-							this.$modal.msgSuccess("新增成功");
-							this.open = false;
-							this.getList();
-						});
-					}
-				}
-			});
-		},
-		/** 删除按钮操作 */
-		handleDelete(row) {
-			const recordIds = row.recordId || this.ids;
-			this.$modal.confirm('是否确认删除生产rfid流程编号为"' + recordIds + '"的数据项？').then(function() {
-				return delRfidProcess(recordIds);
-			}).then(() => {
-				this.getList();
-				this.$modal.msgSuccess("删除成功");
-			}).catch(() => {});
-		},
-		/** 导出按钮操作 */
-		handleExport() {
-			this.download('mes/rfidProcess/export', {
-				...this.queryParams
-			}, `rfidProcess_${new Date().getTime()}.xlsx`)
-		},
-		/**供应商选择弹出框**/
-		handleSelectSupplier() {
-		  this.$refs.itemSelectSupplier.showFlag = true;
-		},
-		//供应商选择确认
-		onSelectSupplier(objs) {
-			var code = '';
-			var desc = '';
-			for (let i = 0; i < objs.length; i++) {
-				if(this.queryParams.supplierCode.indexOf(objs[i].supplierCode)<0){
-					code = code + objs[i].supplierCode + ',';
-					this.selectMaterielListtag.push(objs[i])
-				}else{
-					this.$message({
-						message: objs[i].supplierName+'已经选择',
-						type: 'warning'
-					})
+	}
+};
+</script>
+<style lang="scss" scoped>
+.top-table{
+	display: flex;
+	justify-content: space-between;
+	width: 1450px;
+	height: 380px;
+	.top-left-table{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+		.tableStyle{
+			width: 100%;
+			// border-top: 1px solid #000;
+			// border-left: 1px solid #000;
+			thead{
+				tr{
+				    text-align: center;
+					line-height: 25px;
+					background: #f8f8f9;
+					th{
+						padding: 0;
+						color:#606266;
+						border-bottom: 1px solid #dfe6ec;
+						// border-right: 1px solid #000;
+						// border-bottom: 1px solid #000;
+					}	
 				}
-
-				if(this.queryParams.supplierName.indexOf(objs[i].supplierName)<0){
-				  desc = desc + objs[i].supplierName + ',';
+			}
+			tbody tr{	
+					text-align: center;
+					line-height: 25px;
+					td{
+						padding: 0;
+						border-bottom: 1px solid #dfe6ec;
+						color:#86898b;
+					}			
+			}
+		}
+	}
+	.top-right-table{
+		width: 48%;
+		height: 100%;
+		.title{
+			font-size: 14px;
+			color:#606266;
+			padding: 5px 0px;
+			font-weight: 600;
+		}
+		.tableStyle{
+			width: 100%;
+			// border-top: 1px solid #000;
+			// border-left: 1px solid #000;
+			thead{
+				tr{
+				    text-align: center;
+					line-height: 50px;
+					background: #f8f8f9;
+					th{
+						padding: 0;
+						color:#606266;
+						border-bottom: 1px solid #dfe6ec;
+						// border-right: 1px solid #000;
+						// border-bottom: 1px solid #000;
+					}	
 				}
 			}
-			this.queryParams.supplierCode += code;
-			this.queryParams.supplierName += desc;
-		},
-		// 新增—删除标签
-		handleClose(tag) {
-			this.selectMaterielListtag.splice(this.selectMaterielListtag.indexOf(tag.supplierName), 1);
-
-			var code = "";
-			var desc = "";
-			for (let i = 0; i < this.selectMaterielListtag.length; i++) {
-				code = code + this.selectMaterielListtag[i].supplierCode + ",";
-				desc = desc + this.selectMaterielListtag[i].supplierName + ",";
+			tbody tr{	
+					text-align: center;
+					line-height: 25px;
+					td{
+						padding: 0;
+						border-bottom: 1px solid #dfe6ec;
+						color:#86898b;
+					}			
 			}
-			this.queryParams.supplierCode += code;
-			this.queryParams.supplierName += desc;
 		}
 	}
-};
-</script>
-<style lang="scss" scoped>
+}
+.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; */