From 5293d8150a752dd32e5afc62b414c99af11b9173 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 9 Jul 2024 16:51:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=8E=AF=E4=BF=9D=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E6=8E=92=E6=94=BE=E5=8F=A3=E7=82=B9=E5=87=BB=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/route.js          |  11 +
 src/views/enp/pfk.vue        |  62 +--
 src/views/enp/pfk_detail.vue | 707 +++++++++++++++++++++++++++++++++++
 3 files changed, 757 insertions(+), 23 deletions(-)
 create mode 100644 src/views/enp/pfk_detail.vue

diff --git a/src/config/route.js b/src/config/route.js
index 6a4673cd..3bcff5d3 100644
--- a/src/config/route.js
+++ b/src/config/route.js
@@ -69,6 +69,17 @@ const routes = [
 						},
 						component: "home/enp_home",
 					},
+					{
+						name: "dashboard_ly",
+						path: "/dashboard_ly",
+						meta: {
+							title: "控制台",
+							icon: "el-icon-monitor",
+							affix: true,
+							perms: ["dashboard_ly"],
+						},
+						component: "home/enm_home",
+					},
 					{
 						path: "/track",
 						name: "track",
diff --git a/src/views/enp/pfk.vue b/src/views/enp/pfk.vue
index 2bf968ab..e5987d79 100644
--- a/src/views/enp/pfk.vue
+++ b/src/views/enp/pfk.vue
@@ -30,6 +30,7 @@
 				row-key="id"
 				:params="query"
 				hidePagination
+				@row-click="rowClick"
 			>
 				<el-table-column
 					label="#"
@@ -94,7 +95,7 @@
 						<el-button
 							link
 							size="small"
-							@click="table_equip(scope.row)"
+							@click.stop="table_equip(scope.row)"
 							v-auth="'drain.update'"
 							type="primary"
 							>设备</el-button
@@ -103,26 +104,20 @@
 						<el-button
 							link
 							size="small"
-							@click="table_edit(scope.row)"
+							@click.stop="table_edit(scope.row)"
 							v-auth="'drain.update'"
 							type="primary"
 							>编辑</el-button
 						>
 						<el-divider direction="vertical"></el-divider>
-						<el-popconfirm
-							title="确定删除吗？"
-							@confirm="table_del(scope.row, scope.$index)"
+						<el-button
+							link
+							size="small"
+							@click.stop="table_del(scope.row)"
+							v-auth="'drain.update'"
+							type="danger"
+							>删除</el-button
 						>
-							<template #reference>
-								<el-button
-									link
-									size="small"
-									v-auth="'drain.delete'"
-									type="danger"
-									>删除</el-button
-								>
-							</template>
-						</el-popconfirm>
 					</template>
 				</el-table-column>
 			</scTable>
@@ -183,6 +178,15 @@
 			</el-main>
 		</el-container>
 	</el-drawer>
+	<el-drawer
+		title="排放口及关联设备信息"
+		v-model="visibleEquipDetail"
+		:size="'90%'"
+		destroy-on-close
+		@closed="visibleEquipDetail = false"
+	>
+		<detail-drawer :detailItem="detailItem"></detail-drawer>
+	</el-drawer>
 	<el-dialog title="排放口设备" v-model="visible">
 		<el-main style="padding: 0 20px 20px 20px">
 			<el-form
@@ -233,12 +237,14 @@
 	</el-dialog>
 </template>
 <script>
+import detailDrawer from "./pfk_detail.vue";
 import saveDialog from "./pfk_form.vue";
 import { drainTypeEnum } from "@/utils/enum.js";
 export default {
 	name: "dept",
 	components: {
 		saveDialog,
+		detailDrawer,
 	},
 	data() {
 		return {
@@ -265,6 +271,7 @@ export default {
 			visible: false,
 			options: [],
 			visibleEquip: false,
+			visibleEquipDetail: false,
 		};
 	},
 	mounted() {
@@ -294,14 +301,18 @@ export default {
 		},
 		//删除
 		async table_del(row) {
-			var id = row.id;
-			var res = await this.$API.enp.drain.delete.req(id);
-			if (res.err_msg) {
-				this.$message.error(res.err_msg);
-			} else {
-				this.$refs.table.refresh();
-				this.$message.success("删除成功");
-			}
+			this.$confirm(`确定删除吗？`, "提示", {
+				type: "warning",
+			}).then(() => {
+				this.$API.enp.drain.delete.req(row.id).then((res) => {
+					if (res.err_msg) {
+						this.$message.error(res.err_msg);
+					} else {
+						this.$refs.table.refresh();
+						this.$message.success("删除成功");
+					}
+				});
+			});
 		},
 		//搜索
 		handleQuery() {
@@ -357,6 +368,11 @@ export default {
 				}
 			});
 		},
+		rowClick(row) {
+			console.log(row);
+			this.detailItem = row;
+			this.visibleEquipDetail = true;
+		},
 	},
 };
 </script>
diff --git a/src/views/enp/pfk_detail.vue b/src/views/enp/pfk_detail.vue
new file mode 100644
index 00000000..ace1df61
--- /dev/null
+++ b/src/views/enp/pfk_detail.vue
@@ -0,0 +1,707 @@
+<template>
+	<el-container>
+		<el-aside style="width: 35%">
+			<el-container>
+				<!-- <el-header style="height: 3vh">
+					<div class="pageTitle">排放口及关联设备静态信息</div>
+				</el-header> -->
+				<el-main>
+					<div>
+						<div class="pageTitle">排放口及关联设备静态信息</div>
+						<div class="typeLine">
+							<div class="greenBlock">
+								<div class="greenBlockInner"></div>
+							</div>
+							<span>生产设备</span>
+						</div>
+						<div class="infoLine">
+							<span
+								:class="[
+									eqs.state == 10
+										? 'greenCircle'
+										: 'redCircle',
+									'circles',
+								]"
+							></span>
+							<span>{{ eqs.name }}</span>
+						</div>
+						<el-row class="infoLine">
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">设备类型：</span
+									>主要生产设备
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">电机功率：</span>
+									<span v-if="eqs.power_kw"
+										>{{ eqs.power_kw }}kw</span
+									>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">生产能力：</span>
+									<span
+										v-if="
+											eqs.parameter_json &&
+											eqs.parameter_json.生产能力
+										"
+										>{{ eqs.parameter_json.生产能力 }}</span
+									>
+								</div>
+							</el-col>
+						</el-row>
+						<div class="typeLine">
+							<div class="greenBlock">
+								<div class="greenBlockInner"></div>
+							</div>
+							<span>治理设备</span>
+						</div>
+						<div class="infoLine">
+							<span
+								:class="[
+									eqz.state == 10
+										? 'greenCircle'
+										: 'redCircle',
+									'circles',
+								]"
+							></span>
+							<span>{{ eqz.name }}</span>
+						</div>
+						<el-row class="infoLine">
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">风量：</span>
+									<span
+										v-if="
+											eqz.parameter_json &&
+											eqz.parameter_json.风量
+										"
+										>{{ eqz.parameter_json.风量 }}m³/h</span
+									>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">过滤面积：</span>
+									<span
+										v-if="
+											eqz.parameter_json &&
+											eqz.parameter_json.过滤面积
+										"
+										>{{
+											eqz.parameter_json.过滤面积
+										}}
+										m²</span
+									>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">布袋材质：</span>
+									<span
+										v-if="
+											eqz.parameter_json &&
+											eqz.parameter_json.布袋材质
+										"
+										>{{ eqz.parameter_json.布袋材质 }}
+									</span>
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">过滤风速：</span>
+									<span
+										v-if="
+											eqz.parameter_json &&
+											eqz.parameter_json.过滤风速
+										"
+										>{{
+											eqz.parameter_json.过滤风速
+										}} </span
+									>m/min
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">额定功率：</span>
+									<span
+										v-if="
+											eqz.parameter_json &&
+											eqz.parameter_json.额定功率
+										"
+										>{{ eqz.parameter_json.额定功率 }}
+									</span>
+									Kw
+								</div>
+							</el-col>
+						</el-row>
+						<div class="typeLine">
+							<div class="greenBlock">
+								<div class="greenBlockInner"></div>
+							</div>
+
+							<span>排放口</span>
+						</div>
+						<div class="infoLine">
+							<span
+								:class="[
+									detailItem.state == 10
+										? 'greenCircle'
+										: 'redCircle',
+									'circles',
+								]"
+							></span>
+							<span>{{ detailItem.name }}</span>
+						</div>
+						<el-row class="infoLine">
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">排气筒高度：</span
+									>{{ detailItem.height }} m
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">废气处理量：</span>
+									{{ detailItem.treatment_capacity }} m³/h
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle"
+										>PM超低排放限值：
+									</span>
+									{{ detailItem.pm_limit }} mg/Nm³
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">治理措施： </span
+									>{{ detailItem.measure }}
+								</div>
+							</el-col>
+						</el-row>
+						<div class="typeLine">
+							<div class="greenBlock">
+								<div class="greenBlockInner"></div>
+							</div>
+							<span>监测设备</span>
+						</div>
+						<div class="infoLine">
+							<span
+								:class="[
+									eqc.state == 10
+										? 'greenCircle'
+										: 'redCircle',
+									'circles',
+								]"
+							></span>
+							<span>{{ eqc.name }}</span>
+						</div>
+						<el-row class="infoLine">
+							<el-col :span="24">
+								<div>
+									<span class="infotitle"
+										>颗粒物：（实测值）</span
+									>0.218 mg/m³
+									<span class="infotitle">（折算值）</span
+									>0.218 mg/m³
+								</div>
+							</el-col>
+							<el-col :span="24">
+								<div>
+									<span class="infotitle"
+										>SO2：（实测值）</span
+									>0.218 mg/m³
+									<span class="infotitle">（折算值）</span
+									>0.218 mg/m³
+								</div>
+							</el-col>
+							<el-col :span="24">
+								<div>
+									<span class="infotitle"
+										>NOX：（实测值）</span
+									>0.218 mg/m³
+									<span class="infotitle">（折算值）</span
+									>0.218 mg/m³
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">流量：</span>
+									0.000 m³/h
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">温度：</span>
+									0.000 ℃
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">湿度：</span>
+									0.000 %
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">压力：</span>
+									0.000 MPa
+								</div>
+							</el-col>
+							<el-col :span="12">
+								<div>
+									<span class="infotitle">含氧量：</span>
+									0.000 %
+								</div>
+							</el-col>
+						</el-row>
+					</div>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main style="padding: 0">
+			<el-container>
+				<!-- <el-header style="height: 3vh">
+					<div class="pageTitle">排放口及关联设备动态信息</div>
+				</el-header> -->
+				<el-main>
+					<div class="pageTitle">排放口及关联设备动态信息</div>
+					<div
+						id="dataChart"
+						style="
+							width: 100%;
+							height: 35vh;
+							margin-top: 4px;
+							padding: 4px;
+						"
+					></div>
+					<div style="height: 4px"></div>
+					<div
+						id="dataChart2"
+						style="width: 100%; height: 25vh; padding: 4px"
+					></div>
+					<div style="height: 4px"></div>
+					<div
+						id="dataChart3"
+						style="width: 100%; height: 25vh; padding: 4px"
+					></div>
+				</el-main>
+			</el-container>
+		</el-main>
+	</el-container>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+	props: {
+		detailItem: {
+			type: Boolean,
+			default: () => {
+				return false;
+			},
+		},
+	},
+	data() {
+		return {
+			count: 0,
+			apiObj: this.$API.enp.drain.list,
+			params: { type: 10 },
+			options: [
+				{ value: "10", label: "主要排放口" },
+				{ value: "20", label: "一般排放口" },
+			],
+			query: {
+				search: "",
+			},
+			searchInputStyle: {
+				color: "#fff",
+			},
+			level_: {
+				10: "主要排放口",
+				20: "一般排放口",
+			},
+			pfkdetail: false,
+			detailForm: {
+				day: 18,
+				year: 2024,
+				month: 1,
+			},
+			biquery: {
+				end_time: "2024-02-01",
+				start_time: "2024-01-29",
+				time_bucket: "1 minute",
+				equipment_id: "3491356310052896768",
+			},
+			// 3508113475543248896
+			basicOption: {
+				title: {
+					text: "设备名称",
+					left: 0,
+					top: "top",
+					textStyle: {
+						// color: "#fff",
+					},
+				},
+				legend: {
+					top: "8%",
+					textStyle: {
+						// color: "#fff",
+					},
+				},
+				tooltip: {
+					trigger: "axis",
+					confine: true,
+					textStyle: {
+						fontSize: 10,
+					},
+				},
+				grid: {
+					left: "3%",
+					right: "4%",
+					bottom: "3%",
+					containLabel: true,
+				},
+				dataZoom: [
+					{
+						type: "inside",
+						start: 0,
+						end: 20,
+					},
+					{
+						start: 0,
+						end: 20,
+					},
+				],
+				dataset: {
+					source: [],
+				},
+				xAxis: { type: "category" },
+				yAxis: {},
+				series: [{ type: "line" }],
+			},
+			eqs: {},
+			eqc: {},
+			eqz: {},
+		};
+	},
+	mounted() {
+		let that = this;
+		that.getEquipments(that.detailItem.equipments);
+	},
+	methods: {
+		initTimeNow() {
+			var now = new Date();
+			let year = now.getFullYear(); // 年份
+			let month = now.getMonth() + 1; // 月份
+			let day = now.getDate(); // 日期
+			this.detailForm.year = year;
+			this.detailForm.month = month;
+			this.detailForm.day = day;
+		},
+		getEquipments(ids) {
+			let that = this;
+			let reqs = [];
+			ids.forEach((id) => {
+				reqs.push(
+					that.$API.em.equipment.item.req(id).then((res) => {
+						if (res.type == 10) {
+							that.eqs = res;
+						} else if (res.type == 40) {
+							that.eqc = res;
+							console.log("that.eqc", res);
+						} else if (res.type == 30) {
+							that.eqz = res;
+						}
+					})
+				);
+			});
+			const promise = Promise.all(reqs);
+			promise.then(() => {
+				this.getDetailData();
+				this.getTSPData();
+			});
+		},
+		getDetailData() {
+			var now = new Date();
+			var start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24);
+			var that = this;
+			var chartDom = document.getElementById("dataChart");
+			var chartDom2 = document.getElementById("dataChart2");
+			var chartDom3 = document.getElementById("dataChart3");
+			var myChart = echarts.init(chartDom);
+			var myChart2 = echarts.init(chartDom2);
+			var myChart3 = echarts.init(chartDom3);
+			echarts.connect([myChart, myChart2, myChart3]);
+			let params = {
+				query: that.biquery,
+				// raise_exception: true
+			};
+			params.query["start_time"] = this.$TOOL.dateFormat(
+				start,
+				"yyyy-MM-dd hh:mm:00"
+			);
+			params.query["end_time"] = this.$TOOL.dateFormat(
+				now,
+				"yyyy-MM-dd hh:mm:00"
+			);
+			console.log(this.eqc);
+			// params.query['equipment_id'] = this.eqc.id
+			myChart.showLoading();
+			myChart2.showLoading();
+			this.$API.bi.dataset.exec
+				.req("enp_edata2", params)
+				.then((res) => {
+					let newOption = Object.assign({}, this.basicOption);
+					newOption.series = [
+						{
+							type: "line",
+							encode: {
+								y: "颗粒物折算值",
+								seriesName: ["颗粒物折算值"],
+							},
+						},
+						{
+							type: "line",
+							encode: {
+								y: "so2折算值",
+								seriesName: ["so2折算值"],
+							},
+						},
+						{
+							type: "line",
+							encode: {
+								y: "nox折算值",
+								seriesName: ["nox折算值"],
+							},
+						},
+						{
+							type: "line",
+							encode: { y: "温度", seriesName: ["温度"] },
+						},
+						{
+							type: "line",
+							encode: { y: "压力", seriesName: ["压力"] },
+						},
+						{
+							type: "line",
+							encode: { y: "流速", seriesName: ["流速"] },
+						},
+						{
+							type: "line",
+							encode: { y: "湿度", seriesName: ["湿度"] },
+						},
+						{
+							type: "line",
+							encode: { y: "流量", seriesName: ["流量"] },
+						},
+					];
+					newOption.dataset.source = res.data.ds0;
+					newOption.dataZoom.startValue = that.biquery.start_time;
+					newOption.title.text = that.eqc.name;
+					myChart.hideLoading();
+					myChart.setOption(newOption);
+					// myChart2.setOption(newOption);
+					// echarts.connect([myChart, myChart2])
+				})
+				.then(() => {
+					params["equipment_id"] = this.eqs.id;
+					that.$API.bi.dataset.exec
+						.req("enp_eq_rs", params)
+						.then((res2) => {
+							let newOption2 = Object.assign(
+								{},
+								this.basicOption
+							);
+							newOption2.yAxis.minInterval = 1;
+							newOption2.dataset.source = res2.data.ds0;
+							newOption2.dataZoom.startValue =
+								that.biquery.start_time;
+							newOption2.title.text = that.eqs.name;
+							myChart2.setOption(newOption2);
+							myChart2.hideLoading();
+						});
+				})
+				.then(() => {
+					params["equipment_id"] = this.eqz.id;
+					that.$API.bi.dataset.exec
+						.req("enp_eq_rs", params)
+						.then((res3) => {
+							let newOption3 = Object.assign(
+								{},
+								this.basicOption
+							);
+							newOption3.yAxis.minInterval = 1;
+							newOption3.dataset.source = res3.data.ds0;
+							newOption3.dataZoom.startValue =
+								that.biquery.start_time;
+							newOption3.title.text = that.eqz.name;
+							myChart3.setOption(newOption3);
+							myChart3.hideLoading();
+						});
+				});
+		},
+		getTSPData() {
+			let that = this;
+			let now = new Date();
+			let start = new Date();
+			start.setTime(start.getTime() - 3600 * 1000 * 24);
+			let params = {
+				query: that.biquery,
+			};
+			params.query["time_bucket"] = "1 day";
+			params.query["start_time"] = this.$TOOL.dateFormat(
+				start,
+				"yyyy-MM-dd hh:mm:00"
+			);
+			params.query["end_time"] = this.$TOOL.dateFormat(
+				now,
+				"yyyy-MM-dd hh:mm:00"
+			);
+			this.$API.bi.dataset.exec.req("enp_edata2", params).then((res) => {
+				console.log("enp_edata2", res);
+				that.eqc = res;
+			});
+		},
+	},
+};
+</script>
+<style>
+.tableBg {
+	width: 100%;
+	height: 88vh;
+	background-image: url("/public/img/enp_blue/bigtableBg.png");
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.leftCard {
+	height: 80vh;
+	flex: 1;
+	color: #ffffff;
+	font-size: 0.75vw;
+	background-image: url("/public/img/enp_blue/smallTableBg.png");
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	margin-right: 1vw;
+}
+
+.rightCard {
+	flex: 2;
+	height: 80vh;
+	color: #ffffff;
+	background-image: url("/public/img/enp_blue/tableBg.png");
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.totalWrap {
+	display: flex;
+	justify-content: space-between;
+	color: #ffffff;
+	font-size: 1.6vh;
+	padding: 0 0.5vw;
+	height: 3vh;
+	line-height: 3vh;
+}
+
+.totalNumber {
+	color: #64d2ff;
+	font-size: 2vh;
+	font-weight: bold;
+}
+
+.searchBtn {
+	width: 4.7vw;
+	height: 3vh;
+	background-size: 100% 100%;
+	background-image: url("/public/img/enp_blue/search.png");
+}
+
+.backMap {
+	height: 25px;
+	line-height: 25px;
+	position: absolute;
+	right: 1vw;
+	top: 15px;
+	font-size: 1vh;
+	width: -moz-fit-content;
+	width: fit-content;
+	color: #ffffff;
+	padding: 0 0.5vw;
+	background-image: url("/public/img/enp_blue/back.png");
+}
+
+.pageTitle {
+	height: 2vh;
+	line-height: 2vh;
+	/* color: #ffffff; */
+	font-size: 1.5vh;
+	padding-left: 1vw;
+}
+
+/*  */
+.headerTitle {
+	color: #ffffff;
+	height: 4vh;
+	line-height: 4vh;
+	font-size: 2vh;
+	position: relative;
+}
+
+.greenBlock {
+	width: 1vh;
+	height: 1vh;
+	background-image: url("/public/img/enp_blue/greenBlock.png");
+	background-size: 100% 100%;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 0.5vw;
+}
+
+.circles {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+	background: #aaaaaa;
+	display: inline-block;
+	margin: auto 0.5vw auto 0;
+}
+.greenCircle {
+	background: #0ed877;
+}
+.redCircle {
+	background: orange;
+}
+.linesWrap {
+	padding: 1vh 0.5vw;
+	height: 93%;
+	overflow: scroll;
+	font-weight: bold;
+	line-height: 3.5vh;
+}
+
+.typeLine {
+	height: 3.5vh;
+	line-height: 4vh;
+	font-weight: bold;
+	font-size: 1.3vh;
+}
+
+.infoLine {
+	line-height: 3vh;
+	padding-left: 0.5vw;
+	display: flex;
+	font-size: 1.2vh;
+}
+
+.infotitle {
+	font-weight: normal;
+	color: #333333;
+}
+</style>