518 lines
24 KiB
Vue
518 lines
24 KiB
Vue
<template>
|
||
<el-container v-if="!pollutantDetail">
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header class="panel_title">
|
||
<div class="left-panel">污染源清单</div>
|
||
<div class="right-panel">
|
||
<el-button type="primary" @click="backtoMap">返回地图</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<el-container>
|
||
<el-header class="searchWrap">
|
||
<div class="left-panel">
|
||
<div style="font-size: 1.8vh;">
|
||
全厂污染源：<span class="totalNumber">{{ count }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="right-panel">
|
||
<el-select v-model="query.cate" placeholder="污染源分类" @change="handleQuery" clearable>
|
||
<el-option v-for="e in drainTypeEnum.values" :key="e.key" :value="e.key"
|
||
:label="e.text"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable ref="table" :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj"
|
||
row-key="id" :params="params" :query="query" @row-click="rowClick"
|
||
@dataChange="updateCount">
|
||
<!-- <el-table-column type="index" width="50" /> -->
|
||
<el-table-column prop="number" label="编号" width="80" />
|
||
<el-table-column prop="name" label="名称" width="120" />
|
||
<el-table-column prop="type" label="类型" width="100">
|
||
<template #default="scope">{{ drainTypeEnum[scope.row.cate]?.text }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="mgroup_name" label="所属工段" width="100" />
|
||
<el-table-column label="物料名称" min-width="100" show-overflow-tooltip />
|
||
<el-table-column label="物料分类" min-width="80" show-overflow-tooltip />
|
||
<el-table-column label="主要参数" min-width="100" show-overflow-tooltip />
|
||
<el-table-column label="封闭方式" min-width="100" show-overflow-tooltip />
|
||
<el-table-column label="输送/堆取方式" min-width="120" show-overflow-tooltip />
|
||
<el-table-column label="治理措施" min-width="100" show-overflow-tooltip />
|
||
<el-table-column label="生产设备" min-width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
|
||
<div v-if="item.type == 10">
|
||
<div>
|
||
<el-tag :type="runningStateEnum[item.running_state]?.type">{{
|
||
runningStateEnum[item.running_state]?.text }}</el-tag>|
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="治理设备" min-width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
|
||
<div v-if="item.type == 30">
|
||
<div>
|
||
<el-tag :type="runningStateEnum[item.running_state]?.type">{{
|
||
runningStateEnum[item.running_state]?.text }}</el-tag>|
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="监测设备" min-width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
|
||
<div v-if="item.type == 40">
|
||
<div>
|
||
<el-tag :type="runningStateEnum[item.running_state]?.type">{{
|
||
runningStateEnum[item.running_state]?.text }}</el-tag>|
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="监控设备" min-width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
|
||
<div v-if="item.type == 50">
|
||
<div>
|
||
<el-tag :type="runningStateEnum[item.running_state]?.type">{{
|
||
runningStateEnum[item.running_state]?.text }}</el-tag>|
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
<el-container v-else>
|
||
<el-header class="panel_title">
|
||
<div class="left-panel">污染源及关联设备信息
|
||
</div>
|
||
<div class="right-panel">
|
||
<el-button type="primary" @click="handleClick">返回</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main>
|
||
<el-container>
|
||
<el-aside style="width: 35%">
|
||
<div class="aside_one">
|
||
<div class="pageTitle">污染源及关联设备静态信息</div>
|
||
<div class="linesWrap">
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
|
||
<span>污染源</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ detailItem.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">物料名称</span>{{ detailItem.height }} </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="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="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="circles"></span>
|
||
<span>{{ eqc.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div><span class="infotitle">TSP：</span> 0.000 m³/h</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="typeLine">
|
||
<div class="greenBlock">
|
||
<div class="greenBlockInner"></div>
|
||
</div>
|
||
<span>监控设备</span>
|
||
</div>
|
||
<div class="infoLine">
|
||
<span class="circles"></span>
|
||
<span>{{ eqj.name }}</span>
|
||
</div>
|
||
<el-row class="infoLine">
|
||
<el-col :span="12">
|
||
<div id="divPlugin" class="plugin"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-aside>
|
||
<el-main>
|
||
<div class="aside_side">
|
||
<div class="pageTitle">污染源及关联设备动态信息</div>
|
||
<div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></div>
|
||
<div id="dataChart" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></div>
|
||
|
||
<div id="dataChart3" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></div>
|
||
<!-- <div id="dataChart4" style="width: 100%; height:200px;margin-top:1vh"></div> -->
|
||
</div>
|
||
|
||
</el-main>
|
||
</el-container>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { drainTypeEnum } from "@/utils/enum.js";
|
||
import { runningStateEnum } from "@/utils/enum.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
runningStateEnum,
|
||
drainTypeEnum,
|
||
count: 0,
|
||
eqs: {},
|
||
eqc: {},
|
||
eqz: {},
|
||
eqj: {},
|
||
pollutantDetail: false,
|
||
query: {},
|
||
apiObj: this.$API.enp.drain.list,
|
||
params: { type: 20, equip_data: 'base' },
|
||
detailItem: {},
|
||
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",
|
||
},
|
||
basicOption: {
|
||
title: {
|
||
text: '设备名称',
|
||
left: 0,
|
||
top: 'top',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
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' }]
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.init();
|
||
},
|
||
methods: {
|
||
initDom() {
|
||
var chart1 = echarts.init(document.getElementById('dataChart'), 'dark');
|
||
var chart2 = echarts.init(document.getElementById('dataChart2'), 'dark');
|
||
var chart3 = echarts.init(document.getElementById('dataChart3'), 'dark');
|
||
echarts.connect([chart1, chart2, chart3]);
|
||
},
|
||
backtoMap() {
|
||
this.$emit('close')
|
||
},
|
||
updateCount(res, tableData) {
|
||
this.count = res.count
|
||
},
|
||
initTimeNow() {
|
||
var now = new Date();
|
||
var start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
||
this.biquery['start_time'] = this.$TOOL.dateFormat(start, 'yyyy-MM-dd hh:mm:00')
|
||
this.biquery['end_time'] = this.$TOOL.dateFormat(now, 'yyyy-MM-dd hh:mm:00')
|
||
},
|
||
handleQuery() {
|
||
this.$refs.table.queryData(this.query);
|
||
},
|
||
rowClick(row) {
|
||
this.pollutantDetail = true;
|
||
this.detailItem = row;
|
||
this.$nextTick(() => {
|
||
this.getEquipments(row.equipments);
|
||
this.initTimeNow();
|
||
this.initDom();
|
||
})
|
||
},
|
||
getEquipments(ids) {
|
||
let that = this;
|
||
let reqs = [];
|
||
ids.forEach(id => {
|
||
that.$API.em.equipment.item.req(id).then(res => {
|
||
if (res.type == 10) { //生产设备
|
||
that.eqs = res;
|
||
that.getDetailData(1, id);
|
||
} else if (res.type == 40) { //监测设备
|
||
that.eqc = res;
|
||
that.getDetailData(2, id);
|
||
} else if (res.type == 30) { //治理设备
|
||
that.eqz = res;
|
||
|
||
that.getDetailData(3, id);
|
||
}
|
||
else if (res.type == 50) { //监控设备
|
||
debugger;
|
||
this.login(res);//监控摄像头
|
||
that.eqj = res;
|
||
}
|
||
})
|
||
});
|
||
},
|
||
getDetailData(type, id) {
|
||
var that = this;
|
||
var bicode = 'enp_edata2'
|
||
if (type == 1) {
|
||
var myChart = echarts.getInstanceByDom(document.getElementById('dataChart'));
|
||
bicode = 'enp_eq_rs'
|
||
myChart.showLoading();
|
||
} else if (type == 2) {
|
||
var myChart2 = echarts.getInstanceByDom(document.getElementById('dataChart2'));
|
||
myChart2.showLoading();
|
||
} else if (type == 3) {
|
||
var myChart3 = echarts.getInstanceByDom(document.getElementById('dataChart3'));
|
||
bicode = 'enp_eq_rs'
|
||
myChart3.showLoading();
|
||
}
|
||
// else {
|
||
// var chartDom4 = document.getElementById('dataChart4');
|
||
// var myChart4 = echarts.init(chartDom4);
|
||
// }
|
||
let obj = that.biquery;
|
||
obj.equipment_id = id;
|
||
let params = { query: obj };
|
||
that.$API.bi.dataset.exec.req(bicode, params).then(res => {
|
||
let newOption = Object.assign({}, this.basicOption);
|
||
newOption.dataset.source = res.data.ds0;
|
||
newOption.dataZoom.startValue = that.biquery.start_time;
|
||
if (type == 1) {
|
||
newOption.title.text = that.eqs.name;
|
||
myChart.hideLoading()
|
||
myChart.setOption(newOption);
|
||
} else if (type == 2) {
|
||
newOption.series = [
|
||
{ type: 'line', encode: { y: 'tsp', seriesName: ["tsp"] } },
|
||
// { type: 'line', encode: { y: '温度', seriesName: ["温度"] } },
|
||
// { type: 'line', encode: { y: '压力', seriesName: ["压力"] } }
|
||
]
|
||
newOption.title.text = that.eqc.name;
|
||
newOption.yAxis.minInterval = 1;
|
||
myChart2.setOption(newOption);
|
||
myChart2.hideLoading()
|
||
} else if (type == 3) {
|
||
newOption.title.text = that.eqz.name;
|
||
newOption.yAxis.minInterval = 1;
|
||
myChart3.setOption(newOption);
|
||
myChart3.hideLoading()
|
||
}
|
||
// else {
|
||
// newOption.title.text = that.eqc.name;
|
||
// myChart4.setOption(newOption);
|
||
// echarts.connect([myChart3, myChart4])
|
||
// }
|
||
})
|
||
},
|
||
handleClick() {
|
||
this.pollutantDetail = false;
|
||
this.detailItem = {};
|
||
},
|
||
|
||
//监控摄像头
|
||
//初始化插件
|
||
init() {
|
||
|
||
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
|
||
//初始化
|
||
alert(1)
|
||
WebVideoCtrl.I_InitPlugin("divPlugin", 200, 200, {
|
||
iWndowType: 2, //分裂系数N*N
|
||
bWndFull: true, //双击全屏
|
||
cbInitPluginCompleted: function () {
|
||
alert(1)
|
||
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
|
||
// 检查插件是否最新
|
||
WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
|
||
if (bFlag) {
|
||
alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
|
||
}
|
||
});
|
||
}, () => {
|
||
alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
|
||
});
|
||
|
||
},
|
||
});
|
||
|
||
},
|
||
|
||
//摄像头登录
|
||
login(jkdata){
|
||
|
||
WebVideoCtrl.I_Login(
|
||
jkdata.ip,
|
||
1,
|
||
jkdata.port,
|
||
jkdata.login_name,
|
||
jkdata.login_pwd,
|
||
{
|
||
async: true,
|
||
cgi: 1,
|
||
success: (xmlDoc) => {
|
||
console.log("登录成功", xmlDoc);
|
||
//预览
|
||
WebVideoCtrl.I_StartRealPlay(szIp + "_" + ipPort, {
|
||
success: () => {
|
||
console.log("预览成功");
|
||
},
|
||
});
|
||
},
|
||
error: (xmlDoc) => {
|
||
console.log("登录失败", xmlDoc);
|
||
},
|
||
}
|
||
);
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.plugin {
|
||
width: 200px;
|
||
height: 200px;
|
||
/* background: #ffffff; */
|
||
}
|
||
</style>
|