<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">
			<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"/>
			<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> -->

	</div>
</template>

<script>
import { getIncomeTableList,getTableHzTitleTh,getTableHzData,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
import moment from 'moment';
import * as echarts from "echarts";

export default {
	name: "qcTableCheckDevelop",
	components: {},
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 生产rfid流程表格数据
			incomeList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			 // 新增-物料选中listtag
            selectMaterielListtag:[],
			dateRange:[],
			// 查询参数
			queryParams: {
				checkType:'checkTypeSCXJ',
				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:'checkTypeSCXJ',
					factoryName:''
				}
			],
			jianyanNode:[
				// {
				// 	dictNo:'yyyy',
				// 	dictValue:'年'
				// },
				// {
				// 	dictNo:'mm',
				// 	dictValue:'月'
				// },
				// {
				// 	dictNo:'dd',
				// 	dictValue:'日'
				// },
			],
			tableThead:[],
			tableTbody:[],
			tableBlfx:[],
			echartsData:[],
			dateNode:'dd',
		};
	},
	mounted(){
		this.getDictData()
		this.getThead()
		this.getTbody()
		this.getBlfx()
	

	},
	created() {
		
	},
	methods: {


		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)
		},
		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)

		},
		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
                }
            });
        },
		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() {
			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: 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;
					}	
				}
			}
			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;
					}	
				}
			}
			tbody tr{	
					text-align: center;
					line-height: 25px;
					td{
						padding: 0;
						border-bottom: 1px solid #dfe6ec;
						color:#86898b;
					}			
			}
		}
	}
}
.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>