279 lines
		
	
	
		
			7.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			279 lines
		
	
	
		
			7.4 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | ||
| 	<div class="app-container">
 | ||
| 		<el-header>
 | ||
| 			<div class="left-panel">
 | ||
| 				<el-date-picker
 | ||
| 					v-model="query.year_s"
 | ||
| 					type="year"
 | ||
| 					value-format="YYYY"
 | ||
| 					format="YYYY"
 | ||
| 					placeholder="查询年份"
 | ||
| 					class="headerSearch"
 | ||
| 				/>
 | ||
| 				<el-button
 | ||
| 					type="primary"
 | ||
| 					icon="el-icon-search"
 | ||
| 					@click="handleQuery"
 | ||
| 				></el-button>
 | ||
| 				<el-button
 | ||
| 					type="primary"
 | ||
| 					@click="exportExcel()"
 | ||
| 					:loading="exportLoading"
 | ||
| 					>导出xlsx
 | ||
| 				</el-button>
 | ||
| 				<el-button type="primary" @click="handlePrint">打印 </el-button>
 | ||
| 			</div>
 | ||
| 		</el-header>
 | ||
| 		<el-card style="margin-top: 5px">
 | ||
| 			<div class="printWrap">
 | ||
| 				<div ref="print" id="myReport" class="printContainer">
 | ||
| 					<table
 | ||
| 						border="1"
 | ||
| 						width="1800"
 | ||
| 						cellspacing="0"
 | ||
| 						:key="timeStamp"
 | ||
| 						id="myTable"
 | ||
| 						class="myTable"
 | ||
| 					>
 | ||
| 						<thead class="myTableHead">
 | ||
| 							<tr>
 | ||
| 								<th colspan="19">回转窑工段班组月度对比分析</th>
 | ||
| 							</tr>
 | ||
| 							<tr>
 | ||
| 								<th rowspan="2">月份</th>
 | ||
| 								<th rowspan="2">班组</th>
 | ||
| 								<th colspan="2">产量</th>
 | ||
| 								<th>运转率</th>
 | ||
| 								<th colspan="7">单位产品煤耗</th>
 | ||
| 								<th colspan="7">单位产品电耗</th>
 | ||
| 							</tr>
 | ||
| 							<tr>
 | ||
| 								<th>总产量(t)</th>
 | ||
| 								<th>台时产量(t/h)</th>
 | ||
| 								<th>运转率(%)</th>
 | ||
| 
 | ||
| 								<th>当期值(kgce/t))</th>
 | ||
| 								<th>目标值(kgce/t)</th>
 | ||
| 								<th>当期与目标差值(kgce/t)</th>
 | ||
| 								<th>环期值(kgce/t)</th>
 | ||
| 								<th>当期与环期差值(kgce/t)</th>
 | ||
| 								<th>环比增长率(%)</th>
 | ||
| 								<th>同比增长率(%)</th>
 | ||
| 
 | ||
| 								<th>当期值(kW·h/t)</th>
 | ||
| 								<th>目标值(kW·h/t)</th>
 | ||
| 								<th>当期与目标差值(kW·h/t)</th>
 | ||
| 								<th>环期值(kW·h/t)</th>
 | ||
| 								<th>当期与环期差值(kW·h/t)</th>
 | ||
| 								<th>环比增长率(%)</th>
 | ||
| 								<th>同比增长率(%)</th>
 | ||
| 							</tr>
 | ||
| 						</thead>
 | ||
| 						<tr v-for="(item, index) in tableDatas" :key="index">
 | ||
| 							<td
 | ||
| 								v-for="(item0, index0) in item"
 | ||
| 								:key="index0"
 | ||
| 								class="numCell"
 | ||
| 							>
 | ||
| 								{{ item0 }}
 | ||
| 							</td>
 | ||
| 						</tr>
 | ||
| 					</table>
 | ||
| 				</div>
 | ||
| 			</div>
 | ||
| 		</el-card>
 | ||
| 	</div>
 | ||
| </template>
 | ||
| <script>
 | ||
| export default {
 | ||
| 	data() {
 | ||
| 		return {
 | ||
| 			timeStamp: 0,
 | ||
| 			query: {
 | ||
| 				year_s: "",
 | ||
| 				page: 0,
 | ||
| 				type: "month_st",
 | ||
| 				mgroup: "",
 | ||
| 			},
 | ||
| 			tableDatas: [],
 | ||
| 			exportLoading: false,
 | ||
| 		};
 | ||
| 	},
 | ||
| 	mounted() {
 | ||
| 		let that = this;
 | ||
| 		var myDate = new Date();
 | ||
| 		let year = myDate.getFullYear();
 | ||
| 		this.timeStamp = myDate.getTime();
 | ||
| 		that.query.year_s = year;
 | ||
| 		this.$API.mtm.mgroup.list
 | ||
| 			.req({ page: 0, search: "回转窑" })
 | ||
| 			.then((res) => {
 | ||
| 				console.log("回转窑", res);
 | ||
| 				that.query.mgroup = res[0].id;
 | ||
| 				that.getGoalData();
 | ||
| 			});
 | ||
| 	},
 | ||
| 	methods: {
 | ||
| 		getGoalData() {
 | ||
| 			let that = this;
 | ||
| 			let params = {};
 | ||
| 			params.page = 0;
 | ||
| 			params.year = that.query.year_s;
 | ||
| 			params.mgroup = that.query.mgroup;
 | ||
| 			this.$API.mtm.goal.list.req(params).then((res) => {
 | ||
| 				let data = [];
 | ||
| 				if (res.length > 0) {
 | ||
| 					data = res[0];
 | ||
| 				}
 | ||
| 				that.getData(data);
 | ||
| 			});
 | ||
| 		},
 | ||
| 		getData() {
 | ||
| 			let that = this;
 | ||
| 			let query0 = {};
 | ||
| 			query0.page = 0;
 | ||
| 			query0.type = "month_st";
 | ||
| 			query0.year_s = that.query.year_s - 1;
 | ||
| 			query0.mgroup = that.query.mgroup;
 | ||
| 			let wrapArr = [],
 | ||
| 				wrapArr0 = [],
 | ||
| 				wrapArrs = [];
 | ||
| 			this.$API.enm.enstat.req(query0).then((res0) => {
 | ||
| 				let data0 = res0;
 | ||
| 				debugger;
 | ||
| 				if (data0.length > 0) {
 | ||
| 					data0.forEach((item0) => {
 | ||
| 						//先按月份排序,再按班组排序
 | ||
| 						let n0 = item0.month_s;
 | ||
| 						let ind0 = 0;
 | ||
| 						let team_name0 = item0.team_name;
 | ||
| 						if (team_name0.indexOf("甲") > -1) {
 | ||
| 							ind0 = (n0 - 1) * 3;
 | ||
| 						} else if (team_name0.indexOf("乙") > -1) {
 | ||
| 							ind0 = (n0 - 1) * 3 + 1;
 | ||
| 						} else if (team_name0.indexOf("丙") > -1) {
 | ||
| 							ind0 = (n0 - 1) * 3 + 2;
 | ||
| 						}
 | ||
| 						wrapArr0[ind0] = item0;
 | ||
| 					});
 | ||
| 				} else {
 | ||
| 				}
 | ||
| 				this.$API.enm.enstat.req(that.query).then((res) => {
 | ||
| 					let data = res;
 | ||
| 					if (data.length > 0) {
 | ||
| 						data.forEach((item) => {
 | ||
| 							//先按月份排序,再按班组排序
 | ||
| 							let n = item.month_s;
 | ||
| 							let team_name = item.team_name;
 | ||
| 							let ind = 0;
 | ||
| 							if (team_name.indexOf("甲") > -1) {
 | ||
| 								ind = (n - 1) * 3;
 | ||
| 							} else if (team_name.indexOf("乙") > -1) {
 | ||
| 								ind = (n - 1) * 3 + 1;
 | ||
| 							} else if (team_name.indexOf("丙") > -1) {
 | ||
| 								ind = (n - 1) * 3 + 2;
 | ||
| 							}
 | ||
| 							wrapArrs[ind] = item;
 | ||
| 							let arr = [];
 | ||
| 							let time = "" + item.year_s + "." + item.month_s;
 | ||
| 							arr.push(time);
 | ||
| 							arr.push(item.team_name);
 | ||
| 							arr.push(item.total_production);
 | ||
| 							arr.push(item.production_hour);
 | ||
| 							arr.push(item.run_rate);
 | ||
| 
 | ||
| 							//煤耗
 | ||
| 							arr[5] = item.elec_consume_unit; //当期值(KW·h/t)
 | ||
| 							arr[6] = item.celec_consume_unit; //目标值(KW·h/t)//需要接口获取
 | ||
| 							arr[7] = item.celec_consume_unit; //当期与目标差值(KW·h/t)
 | ||
| 							let ind_pre = 0,
 | ||
| 								huanbi = 0;
 | ||
| 							if (item.month_s == 1) {
 | ||
| 								ind_pre = 12;
 | ||
| 								huanbi = wrapArr0[ind_pre]
 | ||
| 									? wrapArr0[ind_pre].elec_consume_unit
 | ||
| 									: "/";
 | ||
| 							} else {
 | ||
| 								ind_pre = ind - 1;
 | ||
| 								huanbi = wrapArr[ind_pre]
 | ||
| 									? wrapArr[ind_pre].elec_consume_unit
 | ||
| 										? wrapArr[ind_pre].elec_consume_unit
 | ||
| 										: "/"
 | ||
| 									: "/";
 | ||
| 							}
 | ||
| 							arr[8] = huanbi; //环期值(KW·h/t)上个月的值
 | ||
| 							arr[9] = item.celec_consume_unit; //当期与环期差值(KW·h/t)
 | ||
| 							arr[10] = item.celec_consume_unit; //环比增长率(%)
 | ||
| 							arr[11] = item.celec_consume_unit; //同比增长率(%)
 | ||
| 							//电耗
 | ||
| 
 | ||
| 							arr[12] = item.elec_consume_unit; //当期值(KW·h/t)
 | ||
| 							arr[13] = item.celec_consume_unit; //目标值(KW·h/t)//需要接口获取
 | ||
| 							arr[14] = item.celec_consume_unit; //当期与目标差值(KW·h/t)
 | ||
| 							let ind_pre1 = 0,
 | ||
| 								huanbi1 = 0;
 | ||
| 							if (item.month_s == 1) {
 | ||
| 								ind_pre1 = 12;
 | ||
| 								huanbi1 = wrapArr0[ind_pre]
 | ||
| 									? wrapArr0[ind_pre].elec_consume_unit
 | ||
| 									: "/";
 | ||
| 							} else {
 | ||
| 								ind_pre1 = ind - 1;
 | ||
| 								huanbi1 = wrapArr[ind_pre]
 | ||
| 									? wrapArr[ind_pre].elec_consume_unit
 | ||
| 										? wrapArr[ind_pre].elec_consume_unit
 | ||
| 										: "/"
 | ||
| 									: "/";
 | ||
| 							}
 | ||
| 							arr[15] = huanbi; //环期值(KW·h/t)上个月的值
 | ||
| 							arr[16] = item.celec_consume_unit; //当期与环期差值(KW·h/t)
 | ||
| 							arr[17] = item.celec_consume_unit; //环比增长率(%)
 | ||
| 							arr[18] = item.celec_consume_unit; //同比增长率(%)
 | ||
| 							arr[19] = item.celec_consume_unit; //同比增长率(%)
 | ||
| 							wrapArr[ind] = arr;
 | ||
| 						});
 | ||
| 						console.log(wrapArr);
 | ||
| 						that.tableDatas = wrapArr;
 | ||
| 					} else {
 | ||
| 					}
 | ||
| 				});
 | ||
| 			});
 | ||
| 		},
 | ||
| 		handleQuery() {
 | ||
| 			this.tableDatas = [];
 | ||
| 			this.getData();
 | ||
| 		},
 | ||
| 		itemClick(type, item) {
 | ||
| 			this.type = type;
 | ||
| 			this.asynDialog = true;
 | ||
| 		},
 | ||
| 		itemClick1(type, item) {
 | ||
| 			this.chartShow = false;
 | ||
| 			this.$API.bi.dataset.exec.req("3322567213885833216").then((res) => {
 | ||
| 				this.myOption = JSON.parse(res.echart_options);
 | ||
| 				debugger;
 | ||
| 				console.log(this.myOption);
 | ||
| 				this.chartShow = true;
 | ||
| 			});
 | ||
| 		},
 | ||
| 		handlePrint() {
 | ||
| 			this.$PRINT("#myReport");
 | ||
| 		},
 | ||
| 		exportExcel() {
 | ||
| 			this.exportLoading = true;
 | ||
| 			this.$XLSX("#myTable", this.tableName);
 | ||
| 			this.exportLoading = false;
 | ||
| 		},
 | ||
| 	},
 | ||
| };
 | ||
| </script>
 | ||
| <style scoped>
 | ||
| .printWrap {
 | ||
| 	width: 100%;
 | ||
| 	overflow-x: scroll;
 | ||
| }
 | ||
| .numCell {
 | ||
| 	width: 100px !important;
 | ||
| }
 | ||
| </style>
 |