From 4dc039bef6b41f66cc2831d5cd29dbb6b72fd353 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Fri, 24 May 2024 17:45:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E7=BB=BC=E5=90=88?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/enm.js          |   9 +
 src/config/route.js           |  11 ++
 src/views/enm_base/search.vue | 357 ++++++++++++++++++++++++++++++++++
 3 files changed, 377 insertions(+)
 create mode 100644 src/views/enm_base/search.vue

diff --git a/src/api/model/enm.js b/src/api/model/enm.js
index 099ca175..d562fadd 100644
--- a/src/api/model/enm.js
+++ b/src/api/model/enm.js
@@ -151,6 +151,15 @@ export default {
 			);
 		}
 	},
+	analyze: {
+		name: "一段时间范围的工段分析数据",
+		req: async function(data){
+			return await http.post(
+				`${config.API_URL}/enm/enstat/analyze/`,
+				data
+			);
+		}
+	},
 	mplogx: {
 		name: "测点采集数据",
 		req: async function(data){
diff --git a/src/config/route.js b/src/config/route.js
index b88583e0..493a2bf8 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -2339,6 +2339,17 @@ const routes = [
           },
         ]
       },
+      {
+            "path": "/enm_base/search",
+            "name": "search",
+            "meta": {
+              "title": "综合查询",
+              "icon": "el-icon-postcard",
+              "type": "menu",
+              "perms": ["enm_base"]
+            },
+            "component": "enm_base/search"
+          },
       //基础配置
       {
         "name": "enm_base",
diff --git a/src/views/enm_base/search.vue b/src/views/enm_base/search.vue
new file mode 100644
index 00000000..907653aa
--- /dev/null
+++ b/src/views/enm_base/search.vue
@@ -0,0 +1,357 @@
+<template>
+	<div class="app-container">
+		<el-header>
+			<div class="left-panel">
+				时间1：
+				<el-date-picker
+					v-model="query.searchData"
+					type="daterange"
+					range-separator="至"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+					value-format="YYYY-MM-DD"
+					@change="getList1"
+				/>
+				<el-button
+					type="primary"
+					@click="exportExcel()"
+					:loading="exportLoading"
+					>导出xlsx
+				</el-button>
+				时间2：
+				<el-date-picker
+					v-model="query.searchData2"
+					type="daterange"
+					range-separator="至"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+					value-format="YYYY-MM-DD"
+					@change="getList2"
+				/>
+				<el-button type="primary" @click="comparas">对比 </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="1200"
+						cellspacing="0"
+						:key="timeStamp"
+						id="myTable"
+						class="myTable"
+					>
+						<thead class="myTableHead">
+							<tr>
+								<th>工段</th>
+								<th>总产量</th>
+								<th>台时产量</th>
+								<th>运转时间</th>
+								<th>运转率</th>
+								<th>单位产品电耗</th>
+								<th>单位产品综合电耗</th>
+								<th>单位产品标煤耗</th>
+								<th>单位产品综合能耗</th>
+								<th>吨熟料发电量</th>
+							</tr>
+						</thead>
+						<tr v-for="(item, index) in tableDatas1" :key="index">
+							<td>{{ item.mgroup_name }}</td>
+							<td>{{ item.total_production }}</td>
+							<td>{{ item.production_hour }}</td>
+							<td>{{ item.run_hour }}</td>
+							<td>{{ item.run_rate }}</td>
+							<td>{{ item.elec_consume_unit }}</td>
+							<td>{{ item.celec_consume_unit }}</td>
+							<td>{{ item.coal_consume_unit }}</td>
+							<td>{{ item.cen_consume_unit }}</td>
+							<td>{{ item.production_elec_unit }}</td>
+							<!-- <td
+								v-for="(item0, index0) in item"
+								:key="index0"
+								class="numCell"
+							>
+								{{ item0 }}
+							</td> -->
+						</tr>
+					</table>
+					<table
+						border="1"
+						width="1200"
+						cellspacing="0"
+						:key="timeStamp"
+						id="myTable"
+						class="myTable"
+					>
+						<thead class="myTableHead">
+							<tr>
+								<th>工段</th>
+								<th>总产量</th>
+								<th>台时产量</th>
+								<th>运转时间</th>
+								<th>运转率</th>
+								<th>单位产品电耗</th>
+								<th>单位产品综合电耗</th>
+								<th>单位产品标煤耗</th>
+								<th>单位产品综合能耗</th>
+								<th>吨熟料发电量</th>
+							</tr>
+						</thead>
+						<tr v-for="(item, index) in tableDatas2" :key="index">
+							<td>{{ item.mgroup_name }}</td>
+							<td>{{ item.total_production }}</td>
+							<td>{{ item.production_hour }}</td>
+							<td>{{ item.run_hour }}</td>
+							<td>{{ item.run_rate }}</td>
+							<td>{{ item.elec_consume_unit }}</td>
+							<td>{{ item.celec_consume_unit }}</td>
+							<td>{{ item.coal_consume_unit }}</td>
+							<td>{{ item.cen_consume_unit }}</td>
+							<td>{{ item.production_elec_unit }}</td>
+							<!-- <td
+								v-for="(item0, index0) in item"
+								:key="index0"
+								class="numCell"
+							>
+								{{ item0 }}
+							</td> -->
+						</tr>
+					</table>
+				</div>
+			</div>
+		</el-card>
+		<el-dialog title="对比" v-model="dialogVisible" width="1224">
+			<el-select
+				v-model="mgroupName"
+				placeholder="工段"
+				@change="mgroupChange"
+			>
+				<el-option
+					v-for="item in mgroups"
+					:key="item.id"
+					:label="item.name"
+					:value="item.name"
+				></el-option>
+			</el-select>
+			<div id="myChart" style="width: 1200px; height: 400px"></div>
+		</el-dialog>
+	</div>
+</template>
+<script>
+import * as echarts from "echarts";
+const colors = ["#647bfe", "#91CC75"];
+export default {
+	data() {
+		return {
+			mgroupName: "",
+			timeStamp: 0,
+			query: {
+				searchData: "",
+				page: 0,
+				type: "month_st",
+				mgroup: "",
+			},
+			tableDatas1: [
+				{ mgroup_name: "石灰石破碎" },
+				{ mgroup_name: "原料磨" },
+				{ mgroup_name: "煤磨" },
+				{ mgroup_name: "回转窑" },
+				{ mgroup_name: "余热发电" },
+			],
+			tableDatas2: [
+				{ mgroup_name: "石灰石破碎" },
+				{ mgroup_name: "原料磨" },
+				{ mgroup_name: "煤磨" },
+				{ mgroup_name: "回转窑" },
+				{ mgroup_name: "余热发电" },
+			],
+			chartData1: {},
+			chartData2: {},
+			mgroups: [],
+			searchData: [],
+			searchData2: [],
+			exportLoading: false,
+			dialogVisible: false,
+			options: {
+				color: ["#647bfe", "#91CC75"],
+				tooltip: {
+					show: true,
+					// trigger: "axis",
+					// axisPointer: {
+					// 	type: "cross",
+					// },
+					// confine: false,
+					showContent: true,
+					triggerOn: "mousemove",
+				},
+				grid: {
+					right: "7%",
+					left: "7%",
+					top: "15%",
+				},
+				legend: {
+					top: "2%",
+					data: ["时段一", "时段二"],
+				},
+				xAxis: {
+					axisTick: {
+						show: false,
+						length: 5,
+						inside: true,
+					},
+					data: [
+						"总产量",
+						"台时产量",
+						"运转时间",
+						"运转率",
+						"单位产品电耗",
+						"单位产品综合电耗",
+						"单位产品标煤耗",
+						"单位产品综合能耗",
+						"吨熟料发电量",
+					],
+				},
+				yAxis: [
+					{
+						type: "value",
+						name: "电量 (KW·h)",
+						position: "left",
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: colors[0],
+							},
+						},
+						axisLabel: {
+							formatter: "{value}",
+						},
+					},
+				],
+				series: [
+					{
+						name: "时段一",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+					},
+					{
+						name: "时段二",
+						type: "bar",
+						yAxisIndex: 0,
+						data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+					},
+				],
+			},
+			myChart: null,
+		};
+	},
+	mounted() {
+		this.getMgroup();
+	},
+	methods: {
+		getList1(val) {
+			let that = this;
+			let start_date = val[0];
+			let end_date = val[1];
+			this.$API.enm.analyze
+				.req({
+					start_date: start_date,
+					end_date: end_date,
+				})
+				.then((res) => {
+					that.tableDatas1 = res;
+					res.forEach((item) => {
+						that.chartData1[item.mgroup_name] = [];
+						let arr = [];
+						arr[0] = item.total_production;
+						arr[1] = item.production_hour;
+						arr[2] = item.run_hour;
+						arr[3] = item.run_rate;
+						arr[4] = item.elec_consume_unit;
+						arr[5] = item.celec_consume_unit;
+						arr[6] = item.coal_consume_unit;
+						arr[7] = item.cen_consume_unit;
+						arr[8] = item.production_elec_unit;
+						that.chartData1[item.mgroup_name] = arr;
+					});
+				});
+		},
+		getList2(val) {
+			let that = this;
+			let start_date = val[0];
+			let end_date = val[1];
+			this.$API.enm.analyze
+				.req({
+					start_date: start_date,
+					end_date: end_date,
+				})
+				.then((res) => {
+					that.tableDatas2 = res;
+					res.forEach((item) => {
+						that.chartData2[item.mgroup_name] = [];
+						let arr = [];
+						arr[0] = item.total_production;
+						arr[1] = item.production_hour;
+						arr[2] = item.run_hour;
+						arr[3] = item.run_rate;
+						arr[4] = item.elec_consume_unit;
+						arr[5] = item.celec_consume_unit;
+						arr[6] = item.coal_consume_unit;
+						arr[7] = item.cen_consume_unit;
+						arr[8] = item.production_elec_unit;
+						that.chartData2[item.mgroup_name] = arr;
+					});
+				});
+		},
+
+		getMgroup() {
+			this.$API.mtm.mgroup.list.req({ page: 0 }).then((res) => {
+				this.mgroups = res;
+			});
+		},
+		//对比
+		comparas() {
+			let that = this;
+			that.dialogVisible = true;
+			setTimeout(() => {
+				let chartDom = document.getElementById("myChart");
+				that.myChart = echarts.init(chartDom);
+				that.myChart.setOption(that.options);
+			}, 100);
+			() => {};
+		},
+		mgroupChange(val) {
+			let that = this;
+			that.options.series[0].data = this.chartData1[val];
+			that.options.series[1].data = this.chartData2[val];
+			that.myChart.clear();
+			that.myChart.setOption(that.options);
+		},
+		handleQuery() {
+			this.tableDatas1 = [];
+			this.getData();
+		},
+		itemClick(type, item) {
+			this.type = type;
+			this.asynDialog = 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;
+}
+</style>