factory_web/src/views/statistics/ppass_num.vue

<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="queryType" clearable @change="queryTypeChange">
					<el-option v-for="item in typeOptions" 
					:key="item" 
					:label="item" 
					:value="item"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-if="queryType=='月'"
					v-model="queryDate"
					type="month"
					placeholder="查询月期"
					value-format="YYYY-MM"
					style="width:100%"
				>
				</el-date-picker>
				<el-date-picker
					v-if="queryType=='年'"
					v-model="queryDate"
					type="year"
					placeholder="查询年份"
					value-format="YYYY"
					style="width:100%"
				>
				</el-date-picker>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
			</div>
		</el-header>
		<el-main>
			<!-- <el-alert title="生产统计" type="success" style="margin-bottom:20px;"></el-alert> -->
			<el-row :gutter="10">
				<el-col :lg="12">
					<el-card shadow="never">
						<scEcharts height="300px" :option="option"></scEcharts>
					</el-card>
				</el-col>
				<el-col :lg="12">
					<el-card shadow="never">
						<el-table :data="tableData">
							<el-table-column type="index" width="50" />
							<el-table-column label="工序" prop="process">
							</el-table-column>
							<el-table-column label="规格" prop="name">
							</el-table-column>
							<el-table-column label="型号" prop="name">
							</el-table-column>
							<el-table-column label="合格数" prop="count_ok">
							</el-table-column>
							<!-- <el-table-column label="产品编号" prop="number">
							</el-table-column> -->
						</el-table>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	const xAxisData = ['平头','粘头','粗磨','中磨','细磨','抛光','开槽','配管'];
	export default {
		name: 'chart',	
		components: {
			scEcharts
		},
		data() {
			return {
				queryType:'月',
				queryDate:'',
				start_date:'',
				end_date:'',
				currentYear:'',
				currentMonth:'',
				typeOptions:['月','年'],
				option: {
					title: {
						text: '本周生产数量',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data:xAxisData
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						barWidth: '15px',
					},
					{
						data: [110, 180, 120, 120, 60, 90, 110],
						type: 'bar',
						barWidth: '15px',
					}]
				},
				tableData:[
					{id:1,process:'平头',date:'2023-12-11',name:'ZJ2-1',count_ok:200},
					{id:1,process:'粘头',date:'2023-12-11',name:'ZJ2-2',count_ok:200},
					{id:1,process:'粗磨',date:'2023-12-11',name:'ZJ2-3',count_ok:200},
					{id:1,process:'中磨',date:'2023-12-11',name:'ZJ2-4',count_ok:200},
					{id:1,process:'细磨',date:'2023-12-11',name:'ZJ2-1',count_ok:200},
					{id:1,process:'抛光',date:'2023-12-11',name:'ZJ2-2',count_ok:200},
					{id:1,process:'开槽',date:'2023-12-11',name:'ZJ2-3',count_ok:200},
					{id:1,process:'配管',date:'2023-12-11',name:'ZJ2-4',count_ok:200},
				],
			}
		},
		mounted(){
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth()+1;
			let days = new Date(year, month, 0).getDate();
			this.currentYear = year;
			this.currentMonth = month;
			this.start_date =year+'-'+month+'-01';
			this.end_date = year+'-'+month+'-'+new Date(year, month, 0).getDate();
			this.queryDate = year+'-'+month;
			this.getData6();
		},
		methods:{
			queryTypeChange(value){
				console.log(value)
				this.queryDate = '';
			},
			getData6(){
				let that = this;
				let exec = that.queryType=='月'?'lineWeek':'lineMonth';
				let obj = {
					query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
				};
				that.$API.bi.dataset.exec.req(exec, obj).then((doInRes) => {
					console.log('6生产车间统计:',doInRes);
					debugger;
				});
			},
			handleQuery(){
				if(this.queryDate!==''){
					if(this.queryType=='月'){
						
						this.start_date =this.queryDate+'-01';
						let arr = this.queryDate.split('-');
						this.end_date = this.queryDate+'-'+new Date(arr[0], arr[1], 0).getDate();
					}else{
						this.start_date = this.queryDate+'-01-01';
						this.end_date = this.queryDate+'-12-31';
					}
				}else{
					if(this.queryType=='月'){
						this.start_date =this.currentYear+'-'+this.currentMonth+'-01';
						this.end_date = this.currentYear+'-'+this.currentMonth+'-'+new Date(this.currentYear, this.currentMonth, 0).getDate();
					}else{
						this.start_date = this.currentYear+'-01-01';
						this.end_date = this.currentYear+'-12-31';
					}
				}
				this.getData6();
			},
		},
	}
</script>

<style>
</style>