fix:环保模块排放口点击显示关联信息

This commit is contained in:
shijing 2024-07-09 16:51:28 +08:00
parent cd7f0a0f89
commit 5293d8150a
3 changed files with 757 additions and 23 deletions

View File

@ -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",

View File

@ -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>

View File

@ -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.风量 }}/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.过滤面积
}}
</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 }} /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/
<span class="infotitle">折算值</span
>0.218 mg/
</div>
</el-col>
<el-col :span="24">
<div>
<span class="infotitle"
>SO2实测值</span
>0.218 mg/
<span class="infotitle">折算值</span
>0.218 mg/
</div>
</el-col>
<el-col :span="24">
<div>
<span class="infotitle"
>NOX实测值</span
>0.218 mg/
<span class="infotitle">折算值</span
>0.218 mg/
</div>
</el-col>
<el-col :span="12">
<div>
<span class="infotitle">流量</span>
0.000 /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>