<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel" v-if="activeName=='product'||activeName=='test'">
				<el-date-picker
					v-model="query1.time_gte"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="开始时间"
					style="width: 150px"
				/>
				<el-date-picker
					v-model="query1.time_lte"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="结束时间"
					style="margin-left: 2px; width: 150px"
				/>
				<el-input v-model="query1.number_contains" 
					placeholder="板号" 
					clearable 
					style="width: 200px;"
				></el-input>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery1"
				></el-button>
			</div>
			<div class="right-panel" v-if="activeName=='luhao'||activeName=='muju'">
                <el-date-picker
					v-model="query.start_date"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="开始时间"
					style="width: 150px"
				/>
				<el-date-picker
					v-model="query.end_date"
					type="date"
					value-format="YYYY-MM-DD"
					placeholder="结束时间"
					style="margin-left: 2px; width: 150px"
				/>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" style="height: 100%;" lazy>
				<el-tab-pane name="product" label="生产数据" style="height: 100%;">
					<el-container v-if="activeName=='product'">
						<el-main>
							<scTable
							    v-if="activeName=='product'"
								ref="table1"
								:apiObj="apiObj1"
								:params="params1"
								:query="params1"
								row-key="id"
								stripe
							>
								<el-table-column type="index" width="50"  fixed="left"/>
								<el-table-column label="日期" fixed="left" width="100">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_日期?scope.row.data.装炉压板出炉_日期:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="板号" prop="number" fixed="left">	
								</el-table-column>
								<el-table-column label="压前对边" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_对边?scope.row.data.排板_检测项_对边:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="模具号" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装模_检测项_模具号?scope.row.data.装模_检测项_模具号:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="对模具人" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装模_操作人?scope.row.data.装模_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="丝高" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_丝高?scope.row.data.排板_检测项_丝高:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="炉号" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_设备编号?scope.row.data.装炉压板出炉_设备编号:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="装炉人" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_装炉_操作人?scope.row.data.装炉压板出炉_装炉_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压板温度" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_操作项_温度?scope.row.data.装炉压板出炉_操作项_温度:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压力" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_操作项_压力?scope.row.data.装炉压板出炉_操作项_压力:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="下压刻度" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_操作项_刻度?scope.row.data.装炉压板出炉_操作项_刻度:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压板用时" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_操作项_压板用时?scope.row.data.装炉压板出炉_操作项_压板用时:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压板人" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_压板出炉_操作人?scope.row.data.装炉压板出炉_压板出炉_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压后上边" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.脱膜测量_检测项_对边上?scope.row.data.脱膜测量_检测项_对边上:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压后下边" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.脱膜测量_检测项_对边下?scope.row.data.脱膜测量_检测项_对边下:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压后伸长" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.脱膜测量_检测项_伸长?scope.row.data.脱膜测量_检测项_伸长:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="日期" align="center" width="100">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_压板出炉_日期?scope.row.data.装炉压板出炉_压板出炉_日期:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="备注" align="center">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_备注 }}</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
				<el-tab-pane name="test" label="检测数据" style="height: 100%;">
					<el-container v-if="activeName=='test'">
						<el-main>
							<scTable
								ref="table2"
								:apiObj="apiObj1"
								:params="params1"
								:query="params1"
								row-key="id"
								stripe
							>
								<el-table-column label="序号" type="index" width="50"  fixed="left"/>
								<el-table-column label="板号" prop="number" fixed="left">
								</el-table-column>
								<el-table-column label="炉号" fixed="left">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_设备编号 }}</span>
									</template>
								</el-table-column>
								<el-table-column label="放大率￠16mm" align="center" class-name="colorheader1">
									<el-table-column label="差值" class-name="colorheader1">
										<template #default="scope">
											<span>{{ scope.row.data.毛坯检测_检测项_放大率16mm }}</span>
										</template>
									</el-table-column>
									<el-table-column label="合格数" class-name="colorheader1">
										<template #default="scope">
											<span>{{ scope.row.data['毛坯检测_缺陷项_放大率￠16mm不合格']?0:1 }}</span>
										</template>
									</el-table-column>
								</el-table-column>
								<el-table-column label="剪切￠18.3mm" align="center" class-name="colorheader2">
									<el-table-column label="剪切" class-name="colorheader2">
										<template #default="scope">
											<span>{{ scope.row.data.毛坯检测_检测项_剪切18mm }}</span>
										</template>
									</el-table-column>
									<el-table-column label="剪切值" class-name="colorheader2">
										<template #default="scope">
											<span>{{ scope.row.data.毛坯检测_检测项_剪切值18mm }}</span>
										</template>
									</el-table-column>
									<el-table-column label="合格数" class-name="colorheader2">
										<template #default="scope">
											<span>{{ !scope.row.data['毛坯检测_缺陷项_剪切￠18.3mm不合格']&&!scope.row.data['毛坯检测_缺陷项_剪切￠18.3mm可加工']?1:0 }}</span>
										</template>
									</el-table-column>
									<el-table-column label="可加工" class-name="colorheader2">
										<template #default="scope">
											<span>{{ scope.row.data['毛坯检测_缺陷项_剪切￠18.3mm可加工']?1:0 }}</span>
										</template>
									</el-table-column>
								</el-table-column>
								<el-table-column label="暗点" align="center" class-name="colorheader3">
									<el-table-column label="内标合格" class-name="colorheader3">
										<template #default="scope">
											<span>{{scope.row.data.毛坯检测_缺陷项_暗点合格?scope.row.data.毛坯检测_缺陷项_暗点合格:0 }}</span>
										</template>
									</el-table-column>
									<el-table-column label="长点不合格" class-name="colorheader3">
										<template #default="scope">
											<span>{{scope.row.data.毛坯检测_缺陷项_暗点不合格?scope.row.data.毛坯检测_缺陷项_暗点不合格:0 }}</span>
										</template>
									</el-table-column>
								</el-table-column>
								<el-table-column label="崩炸" align="center" class-name="colorheader4">
									<el-table-column label="轻" align="center" class-name="colorheader4">
										<template #default="scope">
											<span>{{scope.row.data.毛坯检测_缺陷项_花朵?scope.row.data.毛坯检测_缺陷项_花朵:0 }}</span>
										</template>
									</el-table-column>
									<el-table-column label="重" align="center" class-name="colorheader4">
										<template #default="scope">
											<span>{{scope.row.data.毛坯检测_缺陷项_花朵重?scope.row.data.毛坯检测_缺陷项_花朵重:0 }}</span>
										</template>
									</el-table-column>
								</el-table-column>
								<el-table-column label="扭后内质" align="center" class-name="colorheader5">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_对边==undefined?scope.row.data.排板_检测项_对边:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="黑网" align="center" class-name="colorheader6">
									<template #default="scope">
										<span>{{ scope.row.data.装模_检测项_模具号==undefined?scope.row.data.装模_检测项_模具号:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="白网" align="center" class-name="colorheader7">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_丝高?scope.row.data.排板_检测项_丝高:0 }}</span>
									</template>
								</el-table-column>
								<el-table-column label="板号" prop="number" class-name="colorheader1">
								</el-table-column>
								<el-table-column label="丝高" align="center" class-name="colorheader2">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_丝高?scope.row.data.排板_检测项_丝高:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="丝长" align="center" class-name="colorheader3">
									<template #default="scope">
										<span>{{ scope.row.data.排板_检测项_丝高?scope.row.data.排板_检测项_丝高:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="对模具人" align="center" class-name="colorheader4">
									<template #default="scope">
										<span>{{ scope.row.data.装模_操作人?scope.row.data.装模_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="日期" align="center" class-name="colorheader5">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_压板出炉_日期?scope.row.data.装炉压板出炉_压板出炉_日期:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="装炉人" align="center" class-name="colorheader6">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_装炉_操作人?scope.row.data.装炉压板出炉_装炉_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压板用时" align="center" class-name="colorheader7">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_操作项_压板用时?scope.row.data.装炉压板出炉_操作项_压板用时:0 }}</span>
									</template>
								</el-table-column>
								<el-table-column label="压板人" align="center" class-name="colorheader1">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_压板出炉_操作人?scope.row.data.装炉压板出炉_压板出炉_操作人:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="炉号" align="center" class-name="colorheader2">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_设备编号?scope.row.data.装炉压板出炉_设备编号:''}}</span>
									</template>
								</el-table-column>
								<el-table-column label="模具号" align="center" class-name="colorheader3">
									<template #default="scope">
										<span>{{ scope.row.data.装模_检测项_模具号?scope.row.data.装模_检测项_模具号:'' }}</span>
									</template>
								</el-table-column>
								<el-table-column label="备注" align="center" class-name="colorheader4">
									<template #default="scope">
										<span>{{ scope.row.data.装炉压板出炉_备注 }}</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
				<el-tab-pane name="luhao" label="炉号统计" style="height: 100%;">
					<el-container v-if="activeName=='luhao'">
						<el-main>
							<scTable
							   v-if="showTable"
								ref="table3"
								:data="tableData"
								row-key="id"
								hidePagination
								hideDo
								stripe
							>
								<el-table-column type="index" width="50"  fixed="left"/>
								<el-table-column label="设备编号" prop="设备编号">
								</el-table-column>
								<el-table-column label="总数">
									<template #default="scope">
										<span v-if="scope.row.总切片数" @click="handleNumClick(scope.row)" style="color:#0052d9;">{{ scope.row.总切片数 }}</span>
										<span v-else @click="handleNumClick(scope.row)" style="color:#0052d9;">{{ scope.row.总生产数 }}</span>
									</template>
								</el-table-column>
								<el-table-column label="长点">
									<template #default="scope">
										<span v-if="scope.row.暗点不合格">{{scope.row.暗点不合格.含}}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column label="长点率">
									<template #default="scope">
										<span v-if="scope.row.暗点不合格">{{((scope.row.暗点不合格.含/scope.row.总切片数)*100).toFixed(2) }}%</span>
										<span v-else>0%</span>
									</template>
								</el-table-column>
								<el-table-column label="放大率不合格">
									<template #default="scope">
										<span v-if="scope.row['放大率￠16mm不合格']">{{scope.row['放大率￠16mm不合格'].含}}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column label="放大率不合格占比">
									<template #default="scope">
										<span v-if="scope.row['放大率￠16mm不合格']">{{((scope.row['放大率￠16mm不合格'].含/scope.row.总切片数)*100).toFixed(2) }}%</span>
										<span v-else>0%</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
				<el-tab-pane name="muju" label="模具号统计" style="height: 100%;">
					<el-container v-if="activeName=='muju'">
						<el-main>
							<scTable
							   v-if="showTable"
								ref="table4"
								:data="tableData"
								row-key="id"
								hidePagination
								hideDo
								stripe
							>
								<el-table-column type="index" width="50"  fixed="left"/>
								<el-table-column label="模具号" prop="模具号">
									<template #default="scope">
										<span>{{scope.row.模具号}}</span>
										<span v-if="scope.row.横压!==null">{{scope.row.横压}}</span>
									</template>
								</el-table-column>
								<el-table-column label="总数" prop="总切片数">
								</el-table-column>
								<el-table-column label="长点">
									<template #default="scope">
										<span v-if="scope.row.暗点不合格">{{scope.row.暗点不合格.含}}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column label="长点率">
									<template #default="scope">
										<span v-if="scope.row.暗点不合格">{{((scope.row.暗点不合格.含/scope.row.总切片数)*100).toFixed(2) }}%</span>
										<span v-else>0%</span>
									</template>
								</el-table-column>
								<el-table-column label="放大率不合格">
									<template #default="scope">
										<span v-if="scope.row['放大率￠16mm不合格']">{{scope.row['放大率￠16mm不合格'].含}}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column label="放大率不合格占比">
									<template #default="scope">
										<span v-if="scope.row['放大率￠16mm不合格']">{{((scope.row['放大率￠16mm不合格'].含/scope.row.总切片数)*100).toFixed(2) }}%</span>
										<span v-else>0%</span>
									</template>
								</el-table-column>
							</scTable>
						</el-main>
					</el-container>
				</el-tab-pane>
			</el-tabs>
		</el-main>
		<el-drawer v-model="visible" :title="userName+'板段列表'" size="50%" direction="rtl" append-to-body destroy-on-close>
			<el-card shadow="never">
				<div v-for="(item,index) in detailRow" :key="item" style="height:22px;border-bottom: 1px solid #efefef;">
					<span style="margin-right:10px;width: 18px;display: inline-block;">{{ index+1 }} </span>
					{{ item }}
				</div>
			</el-card>
		</el-drawer>
	</el-container>
</template>
<script>
export default {
	name: "workHoursRY",
	data() {
		return {
			visible:false,
			showTable:false,
			userName:'',
			activeName: 'product',
			params1: {
				ordering:'data__装炉压板出炉_批次号',
				querys:[[{field:"wm",value:false,compare:"isnull"},{field:"data__has_key",compare:"",value:"装炉压板出炉_批次号"}]],
			},
			query1:{
				number_contains:'',
				time_gte:'',
				time_lte:'',
			},
			query:{
				end_date:'',
				start_date:'',
  				select_cols: ",ls.板段编号列表,ls.切片编号列表"
			},
			mgruops:[],
			tableData:[],
			detailRow:[],
			params:{cate:'热压'},
			apiObj1: this.$API.wpm.wpr.query,
			apiObj: this.$API.mtm.process.list,
		};
	},
    mounted() {
        let that = this;
        let date = new Date();
        that.query.end_date = that.$TOOL.dateFormat2(date);
		that.query.start_date =  that.query.end_date.split('-')[0] + '-' + that.query.end_date.split('-')[1] + '-01';
    },
	methods: {
        getData(){
            let that = this;
            let params = {};
            params.query = that.query;
			let biStr = '';
			if(that.activeName=='luhao'){
				biStr = 'product_defect_equip_bdgy';
				params.query.select_cols = ",ls.板段编号列表,ls.切片编号列表";
			}else if(that.activeName=='muju'){
				biStr = 'product_defect_model';
				params.query.select_cols = "";
			}
			that.$API.bi.dataset.exec.req(biStr, params).then((res) => {
				let data = res.data2.ds0;
				data.forEach(item=>{
					if(item.缺陷分布!==null){
						let defect = JSON.parse(item.缺陷分布);
						for(let key in defect){
							item[key]=defect[key];
						}
					}
				})
				that.$nextTick(() => {
					that.tableData = data;
					that.showTable=true;
                })
			});
        },
		handleQuery1(){
			let that = this;
			let querys1 = [[{field:"wm",value:false,compare:"isnull"},{field:"data__has_key",compare:"",value:"装炉压板出炉_批次号"}]];
			let obj = {},obj1 = {},obj2 = {};
			obj.field = 'data__装炉压板出炉_批次号';
			obj.value = that.query1.number_contains;
			obj.compare = '';

			obj1.field = 'data__装炉压板出炉_日期';
			obj1.value = that.query1.time_gte;
			obj1.compare = 'gte';

			obj2.field = 'data__装炉压板出炉_日期';
			obj2.value = that.query1.time_lte;
			obj2.compare = 'lte';
			if(that.query1.number_contains!==''&&that.query1.number_contains!==null){
				querys1[0].push(obj);
			}
			if(that.query1.time_gte!==''&&that.query1.time_gte!==null){
				querys1[0].push(obj1);
			}
			if(that.query1.time_lte!==''&&that.query1.time_lte!==null){
				querys1[0].push(obj2);
			}
			that.params1.querys = querys1;
			that.$nextTick(() => {
				if(that.activeName=='product'){
					this.$refs.table1.queryData(that.params1);
				}else if(that.activeName=='test'){
					this.$refs.table2.queryData(that.params1);
				}
			});
			
		},
		handleQuery(){
			let that = this;
            that.getData();
		},
		deptChange(){
			this.getData();
		},
		filterName(value, row) {
			return row.物料名 == value;
		},
		handleClick(e){
			console.log('e.props.name',e.props.name);
			this.activeName = e.props.name;
			this.showTable=false;
			if(e.props.name=='luhao'||e.props.name=='muju'){
				this.getData();
			}
		},
		handleNumClick(row){
			let that = this;
			that.userName = row.设备编号;
			that.visible = true;
			that.detailRow = row.切片编号列表;
		},
	},
};
</script>
<style scoped>
</style>
