factory_web/src/views/statistics/all_jy_cjg.vue

<template>
	<div>
		<div v-for="(item, $index) in mgroup" :key="item.id">
			<scEcharts height="500px" :option="'option'+$index"></scEcharts>
			<el-table :data="'tableData'+$index"  class="exportTables">
				<el-table-column type="index" width="50" />
				<el-table-column label="日期" prop="date">
					<template #default="scope">
						<span>{{ scope.row.年 }}</span>
						<span v-if="scope.row.月">-{{ scope.row.月 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="规格" prop="规格">
				</el-table-column>
				<el-table-column label="型号" prop="型号">
				</el-table-column>
				<el-table-column label="合格数" prop="合格数">
				</el-table-column>
				<el-table-column label="不合格数" prop="合格数">
					<el-table-column label="条纹" prop="条纹"></el-table-column>
					<el-table-column label="气泡" prop="气泡"></el-table-column>
					<el-table-column label="断裂" prop="断裂"></el-table-column>
					<el-table-column label="气线" prop="气线"></el-table-column>
					<el-table-column label="炸纹" prop="炸纹"></el-table-column>
					<el-table-column label="结石" prop="结石"></el-table-column>
					<el-table-column label="弯曲" prop="弯曲"></el-table-column>
					<el-table-column label="偏壁" prop="偏壁"></el-table-column>
					<el-table-column label="大小头" prop="大小头"></el-table-column>
					<el-table-column label="其他" prop="其他"></el-table-column>
					<el-table-column label="合计" prop="不合格数"></el-table-column>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
	import scEcharts from '@/components/scEcharts';
	const baseOption ={
		title: {
			text: '工序检验统计',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		series: [
			{
				name: '工序检验',
				type: 'pie',
				radius: ['40%', '60%'],
				center: ['50%', '60%'],
				label: {
					show: true,
					formatter: '{b} : {c}',
				},
				data: []
			}
		]
	};
	export default {
		name: 'all_jy_cjg',
		props: {
			queryType:{
				type: String,
				default: "月"
			},
			queryDate:{
				type: String,
				default: ""
			},
			start_date:{
				type: String,
				default: ""
			},
			end_date:{
				type: String,
				default: ""
			},
		},
		components: {
			scEcharts
		},
		data() {
			return {
				currentYear:'',
				currentMonth:'',
				typeOptions:['月','年'],
				mgroupOption:[],
				tableData0:[],
				tableData1:[],
				tableData2:[],
				tableData3:[],
				tableData4:[],
				tableData5:[],
				tableData6:[],
				tableData7:[],
				tableData8:[],
				tableData9:[],
				tableData10:[],
				tableData11:[],
				tableData12:[],
				tableData13:[],
				tableData14:[],
				option0:{},
				option1:{},
				option2:{},
				option3:{},
				option4:{},
				option5:{},
				option6:{},
				option7:{},
				option8:{},
				option9:{},
				option10:{},
				option11:{},
				option12:{},
				option13:{},
				option14:{},
			}
		},
		mounted(){
			this.$nextTick(() => {
			    this.getMgroup();
			})
			
		},
		methods:{
			deepCopy(obj) {
				return JSON.parse(JSON.stringify(obj));
			},
			getMgroup(){
				let that = this;
				this.$API.mtm.mgroup.list.req({belong_dept__name:'6车间',page:0}).then((res) => {
					for(let i=0;i<res.length;i++){
						that.mgroupsData = res;
						this.getData(res[i].name,i);
					}
				});
			},
			getData(name,index){
				let that = this;
				let exec = that.queryType=='月'?'lineMonth':'lineYear';
				let obj = {
					query: {
						end_date: that.end_date,
						start_date: that.start_date,
						mgroup_name: name,
						group_bys_material: "",
						order_bys_material: "",
						select_cols_material: "",
						group_bys_mgroup: ", mgroup.name",
						select_cols_mgroup: ", mgroup.name AS 工段",
						is_count_utask: -1
					},
				};
				let optionKey = 'option'+index;
				let tableKey = 'tableData'+index;
				that[optionKey] = that.deepCopy(baseOption);
				that[optionKey].title.text= name;
				//获取echarts数据
				that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
					if (res.data2.ds0) { 
						let data = res.data2.ds0;
						let seriesData = [
							{value: 0, name: '合格数'},
							{value: 0, name: '条纹'},
							{value: 0, name: '气泡'},
							{value: 0, name: '断裂' },
							{value: 0, name: '气线' },
							{value: 0, name: '炸纹'},
							{value: 0, name: '结石'},
							{value: 0, name: '弯曲' },
							{value: 0, name: '偏壁'},
							{value: 0, name: '大小头'},
							{value: 0, name: '其他'},
						];
						if (data.length > 0) { 
							data.forEach((item) => {
							    seriesData.forEach((item2) => {
							        item2.value += item[item2.name];
							    })
							})
						}
						that[optionKey].series[0].data = seriesData;
					}
				});
				let obj2 = {
					query: {
						start_date: that.start_date, end_date: that.end_date,
						mgroup_name: name,
						group_bys_mgroup: ", mgroup.name",
  						select_cols_mgroup: ", mgroup.name AS 工段",
						is_count_utask: -1
					},
				};
				//获取table数据
				that.$API.bi.dataset.exec.req(exec, obj2).then((res2) => {
					console.log('获取table数据:',  res2.data2.ds0);
					that[tableKey] = res2.data2.ds0;
				});
			},
		},
	}
</script>

<style scoped>
.tables {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 10;
}
</style>