bufenxiugai
This commit is contained in:
parent
c9f78b5d6a
commit
b230202990
|
|
@ -1,55 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header class="panel_title">
|
<el-header style="height:60%">
|
||||||
<div class="left-panel">
|
|
||||||
空气质量监测微站
|
|
||||||
</div>
|
|
||||||
<div class="right-panel">
|
|
||||||
<div class="backMap" @click="backtoMap">
|
|
||||||
切换地图
|
|
||||||
<el-icon>
|
|
||||||
<Switch />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-header>
|
|
||||||
<el-main class="nopadding">
|
|
||||||
<el-container>
|
<el-container>
|
||||||
<el-header class="searchWrap">
|
<el-header class="panel_title">
|
||||||
<div class="left-panel"></div>
|
<div class="left-panel">
|
||||||
|
空气质量监测微站
|
||||||
|
</div>
|
||||||
<div class="right-panel">
|
<div class="right-panel">
|
||||||
<el-select v-model="query.mgroup" placeholder="全部工序" @change="handleQuery" clearable>
|
<div class="backMap" @click="backtoMap">
|
||||||
<el-option v-for="item in processOptions" :key="item" :label="item" :value="item"></el-option>
|
切换地图
|
||||||
</el-select>
|
<el-icon>
|
||||||
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
|
<Switch />
|
||||||
placeholder="设备名称/设备编号"></el-input>
|
</el-icon>
|
||||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main class="nopadding">
|
||||||
<scTable :apiObj="apiObj" size="large" :params="params" :query="query">
|
<el-container>
|
||||||
<el-table-column type="index" width="50" />
|
<el-header class="searchWrap">
|
||||||
<el-table-column prop="number" label="设备编号"></el-table-column>
|
<div class="left-panel"></div>
|
||||||
<el-table-column prop="level" label="设备名称"></el-table-column>
|
<div class="right-panel">
|
||||||
<el-table-column prop="type" label="设备类型"></el-table-column>
|
<el-select v-model="query.mgroup" placeholder="全部工序" @change="handleQuery" clearable>
|
||||||
<el-table-column prop="mgroup_name" label="所属工序"></el-table-column>
|
<el-option v-for="item in processOptions" :key="item" :label="item"
|
||||||
<el-table-column prop="running_state" label="运行状态"></el-table-column>
|
:value="item"></el-option>
|
||||||
<el-table-column label="PM2.5" align="center">
|
</el-select>
|
||||||
<el-table-column prop="mgroup" label="实测值"></el-table-column>
|
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px"
|
||||||
<el-table-column prop="mgroup" label="预警值"></el-table-column>
|
v-model="query.search" placeholder="设备名称/设备编号"></el-input>
|
||||||
</el-table-column>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
|
||||||
<el-table-column prop="mgroup" label="PM10" align="center">
|
</div>
|
||||||
<el-table-column prop="mgroup" label="实测值"></el-table-column>
|
</el-header>
|
||||||
<el-table-column prop="mgroup" label="预警值"></el-table-column>
|
<el-main>
|
||||||
</el-table-column>
|
<scTable :apiObj="apiObj" size="large" :params="params" :query="query">
|
||||||
<el-table-column prop="level" label="湿度"></el-table-column>
|
<el-table-column type="index" width="50" />
|
||||||
<el-table-column prop="mgroup" label="温度"></el-table-column>
|
<el-table-column prop="number" label="设备编号"></el-table-column>
|
||||||
<el-table-column prop="eqpment" label="大气压"></el-table-column>
|
<el-table-column prop="level" label="设备名称"></el-table-column>
|
||||||
<el-table-column prop="mgroup" label="风向"></el-table-column>
|
<el-table-column prop="type" label="设备类型"></el-table-column>
|
||||||
</scTable>
|
<el-table-column prop="mgroup_name" label="所属工序"></el-table-column>
|
||||||
|
<el-table-column prop="running_state" label="运行状态"></el-table-column>
|
||||||
|
<el-table-column prop="PM25" label="PM2.5实测值"></el-table-column>
|
||||||
|
<el-table-column prop="PM10" label="PM10实测值"></el-table-column>
|
||||||
|
<el-table-column prop="level" label="湿度"></el-table-column>
|
||||||
|
<el-table-column prop="mgroup" label="温度"></el-table-column>
|
||||||
|
<el-table-column prop="eqpment" label="大气压"></el-table-column>
|
||||||
|
<el-table-column prop="mgroup" label="风向"></el-table-column>
|
||||||
|
</scTable>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<el-container>
|
||||||
|
<el-header class="panel_title">
|
||||||
|
<div class="left-panel">
|
||||||
|
空气质量微站实时监测详情
|
||||||
|
</div>
|
||||||
|
<div class="right-panel">
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<div v-show="currentEquipmentId != ''" id="lineChart" style="width: 100%; height:100%;"></div>
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-main>
|
</el-main>
|
||||||
|
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -60,14 +74,41 @@ export default {
|
||||||
query: {},
|
query: {},
|
||||||
apiObj: null,
|
apiObj: null,
|
||||||
processOptions: [],
|
processOptions: [],
|
||||||
|
currentEquipmentId: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
this.$refs.table.queryData(this.query);
|
this.$refs.table.queryData(this.query);
|
||||||
},
|
},
|
||||||
timeHandleQuery() { },
|
initChart() {
|
||||||
carHandleQuery() { },
|
var that = this;
|
||||||
|
var myChart = echarts.getInstanceByDom(document.getElementById('lineChart'));
|
||||||
|
if (myChart == undefined) {
|
||||||
|
myChart = echarts.init(document.getElementById('lineChart'), 'dark');
|
||||||
|
}
|
||||||
|
myChart.showLoading();
|
||||||
|
this.$API.bi.dataset.exec.req('enp_edata2', {
|
||||||
|
query: this.query,
|
||||||
|
raise_exception: true
|
||||||
|
}).then(res => {
|
||||||
|
let newOption = Object.assign({}, this.basicOption);
|
||||||
|
let ds0 = res.data.ds0
|
||||||
|
ds0.pop()
|
||||||
|
let series = []
|
||||||
|
if (ds0) {
|
||||||
|
let ds00 = ds0[0]
|
||||||
|
for (var x = 1, y = ds00.length; x < y; x++) {
|
||||||
|
series.push({ type: 'line' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
newOption.dataset.source = res.data.ds0;
|
||||||
|
newOption.series = series;
|
||||||
|
newOption.title.text = this.currentEquipmentName;
|
||||||
|
myChart.setOption(newOption);
|
||||||
|
}).then(() => { myChart.hideLoading() })
|
||||||
|
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -107,61 +107,41 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 左侧列表数据 -->
|
<!-- 左侧列表数据 -->
|
||||||
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
|
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
|
||||||
<!-- 主要排放口实时监测清单 -->
|
<!-- 有组织排放实时监测清单CEMS -->
|
||||||
<div class="panel panel1">
|
<div class="panel panel1">
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
<div class="blockTitleText">主要排放口实时监测清单</div>
|
<div class="blockTitleText">主要排放口实时监测清单</div>
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="title_s">{{ cemsData.equipment_name }}</div>
|
<!-- <div class="title_s">{{ cemsData.equipment_name }}</div> -->
|
||||||
<div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div>
|
<!-- <div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div> -->
|
||||||
<div class="tableHear" style="padding: 0 1vh;">
|
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
|
||||||
|
:refValue="refValue1"></scScrollTavle>
|
||||||
|
<!-- <div class="tableHear" style="padding: 0 1vh;">
|
||||||
<div style="flex:1;height:1vh"></div>
|
<div style="flex:1;height:1vh"></div>
|
||||||
<div style="flex:5;margin: 0 1vh;">项目</div>
|
<div style="flex:5;margin: 0 1vh;">设备名称</div>
|
||||||
<div style="flex:2">实测</div>
|
<div style="flex:2">颗粒物</div>
|
||||||
<div style="flex:2">折算</div>
|
<div style="flex:2">SO₂</div>
|
||||||
|
<div style="flex:2">NOx</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rowItem">
|
<div class="rowItem">
|
||||||
<div class="rowindex">1</div>
|
<div class="rowindex">1</div>
|
||||||
<div class="rowname">颗粒物(mg/m³)</div>
|
<div class="rowname">设备名称</div>
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
<div class="rownum">
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class=" rowItem">
|
|
||||||
<div class="rowindex">2</div>
|
|
||||||
<div class="rowname">SO₂(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
<div class="rownum">
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
||||||
}}</span>
|
}}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">3</div>
|
|
||||||
<div class="rowname">NOx(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
<div class="rownum">
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 接入设备数量总览 -->
|
<!-- 接入设备数量总览 -->
|
||||||
|
|
@ -205,289 +185,98 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 主要排放口实时监测清单 -->
|
<!-- 无组织排放实时监测清单 TSP-->
|
||||||
<div class="panel panel1">
|
<div class="panel panel1">
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
<div class="blockTitleText">主要排放口实时监测清单</div>
|
<div class="blockTitleText">主要排放口实时监测清单</div>
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="title_s">{{ cemsData.equipment_name }}</div>
|
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight" :rowData="lineData2" :titleData="liData2"
|
||||||
<div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div>
|
:refValue="refValue2"></scScrollTavle>
|
||||||
<div class="tableHear" style="padding: 0 1vh;">
|
|
||||||
<div style="flex:1;height:1vh"></div>
|
|
||||||
<div style="flex:5;margin: 0 1vh;">项目</div>
|
|
||||||
<div style="flex:2">实测</div>
|
|
||||||
<div style="flex:2">折算</div>
|
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">1</div>
|
|
||||||
<div class="rowname">颗粒物(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class=" rowItem">
|
|
||||||
<div class="rowindex">2</div>
|
|
||||||
<div class="rowname">SO₂(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">3</div>
|
|
||||||
<div class="rowname">NOx(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧数据 -->
|
<!-- 右侧数据 -->
|
||||||
<div v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
|
<div v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
|
||||||
<!-- 主要排放口实时监测清单 -->
|
<!-- 空气微站实时监测清单 -->
|
||||||
<div class="panel panel1">
|
<div class="panel panel1">
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
<div class="blockTitleText">环境质量实时监测清单</div>
|
<div class="blockTitleText">空气微站实时监测清单</div>
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<scScrollTavle v-if="table3Visible" :tableHeight="containerHeight" :rowData="lineData3" :titleData="liData3"
|
||||||
|
:refValue="refValue3"></scScrollTavle>
|
||||||
<div class="tableHear" style="padding: 0 1vh;">
|
<!-- <div>
|
||||||
<div style="flex:1;height:1vh"></div>
|
<div class="tableHear"
|
||||||
<div style="flex:5;margin: 0 1vh;">项目</div>
|
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.2vh">
|
||||||
<div style="flex:2">实测</div>
|
<div style="flex:2">监测设备名称</div>
|
||||||
<div style="flex:2">折算</div>
|
<div style="flex:1">PM10(μg/m³)</div>
|
||||||
|
<div style="flex:1">PM2.5(μg/m³)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rowItem">
|
<div class="tableBody">
|
||||||
<div class="rowindex">1</div>
|
<div v-for="item in wData" :key="item">
|
||||||
<div class="rowname">颗粒物(mg/m³)</div>
|
<div class="badyItem">
|
||||||
<div class="rownum">
|
<div style="flex:2">
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
|
<img src="img/enp_blue/listImg.png"
|
||||||
}}</span>
|
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
|
||||||
<span v-else>-</span>
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rownum">
|
<div v-for="item in wData" :key="item">
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
<div class="badyItem">
|
||||||
<span v-else>-</span>
|
<div style="flex:2">
|
||||||
|
<img src="img/enp_blue/listImg.png"
|
||||||
|
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="item in wData" :key="item">
|
||||||
|
<div class="badyItem">
|
||||||
|
<div style="flex:2">
|
||||||
|
<img src="img/enp_blue/listImg.png"
|
||||||
|
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
||||||
|
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class=" rowItem">
|
</div> -->
|
||||||
<div class="rowindex">2</div>
|
|
||||||
<div class="rowname">SO₂(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">3</div>
|
|
||||||
<div class="rowname">NOx(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 车辆数量总览 -->
|
<!-- 今日车辆统计数据 -->
|
||||||
<div class="panel panel2">
|
<div class="panel panel2">
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
<div class="blockTitleText">出入厂车辆数量统计</div>
|
<div class="blockTitleText">今日车辆统计数据</div>
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="display:flex;">
|
||||||
<div class="chart" id="chart1" style="width:7vw;height:7vw;"></div>
|
<div class="chart" id="pieChart"></div>
|
||||||
|
<div style="width:50%">
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 主要排放口实时监测清单 -->
|
<!-- 环卫车作业情况 -->
|
||||||
<div class="panel panel1">
|
<div class="panel panel1">
|
||||||
<div class="blockTitle">
|
<div class="blockTitle">
|
||||||
<div class="blockTitleText">主要排放口实时监测清单</div>
|
<div class="blockTitleText">环卫车作业情况</div>
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="title_s">{{ cemsData.equipment_name }}</div>
|
|
||||||
<div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div>
|
|
||||||
<div class="tableHear" style="padding: 0 1vh;">
|
|
||||||
<div style="flex:1;height:1vh"></div>
|
|
||||||
<div style="flex:5;margin: 0 1vh;">项目</div>
|
|
||||||
<div style="flex:2">实测</div>
|
|
||||||
<div style="flex:2">折算</div>
|
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">1</div>
|
|
||||||
<div class="rowname">颗粒物(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class=" rowItem">
|
|
||||||
<div class="rowindex">2</div>
|
|
||||||
<div class="rowname">SO₂(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rowItem">
|
|
||||||
<div class="rowindex">3</div>
|
|
||||||
<div class="rowname">NOx(mg/m³)</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
|
|
||||||
}}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
<div class="rownum">
|
|
||||||
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
|
||||||
<span v-else>-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 环境质量实时监测清单 -->
|
|
||||||
<!-- <div class="panel panel1">
|
|
||||||
<div class="blockTitle">
|
|
||||||
<div class="blockTitleText">环境质量实时监测清单</div>
|
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="tableHear"
|
|
||||||
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.3vh">
|
|
||||||
<div style="flex:2">监测设备名称</div>
|
|
||||||
<div style="flex:1">PM10(μg/m³)</div>
|
|
||||||
<div style="flex:1">PM2.5(μg/m³)</div>
|
|
||||||
</div>
|
|
||||||
<div class="tableBody">
|
|
||||||
<div v-for="item in wData" :key="item">
|
|
||||||
<div class="badyItem">
|
|
||||||
<div style="flex:2">
|
|
||||||
<img src="img/enp_blue/listImg.png"
|
|
||||||
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
</div>
|
|
||||||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
|
||||||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<!-- 接入设备数量总览 -->
|
|
||||||
<!-- <div class="panel panel2">
|
|
||||||
<div class="blockTitle">
|
|
||||||
<div class="blockTitleText">接入设备数量总览</div>
|
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
|
||||||
</div>
|
|
||||||
<div style="display: flex;padding: 1vh 1vw;">
|
|
||||||
<div style="width: 50%;height:100%">
|
|
||||||
<div class="eqItem">
|
|
||||||
<img class="eqImg" src="img/enp_blue/eq_s.svg">
|
|
||||||
<div class="eqText">
|
|
||||||
<div class="eqName">生产设备</div>
|
|
||||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.sc }}</span>台</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="eqItem">
|
|
||||||
<img class="eqImg" src="img/enp_blue/eq_v.svg">
|
|
||||||
<div class="eqText">
|
|
||||||
<div class="eqName">监测设备</div>
|
|
||||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jc }}</span>台</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="width: 50%;height:100%">
|
|
||||||
<div class="eqItem">
|
|
||||||
<img class="eqImg " src="img/enp_blue/eq_z.svg">
|
|
||||||
<div class="eqText">
|
|
||||||
<div class="eqName">治理设备</div>
|
|
||||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="eqItem">
|
|
||||||
<img class="eqImg" src="img/enp_blue/eq_c.svg">
|
|
||||||
<div class="eqText">
|
|
||||||
<div class="eqName">监控设备</div>
|
|
||||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jk }}</span>台</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<!-- 环境质量实时监测清单 -->
|
|
||||||
<!-- <div class="panel panel1">
|
|
||||||
<div class="blockTitle">
|
|
||||||
<div class="blockTitleText">环境质量实时监测清单</div>
|
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="tableHear"
|
|
||||||
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.3vh">
|
|
||||||
<div style="flex:2">监测设备名称</div>
|
|
||||||
<div style="flex:1">PM10(μg/m³)</div>
|
|
||||||
<div style="flex:1">PM2.5(μg/m³)</div>
|
|
||||||
</div>
|
|
||||||
<div class="tableBody">
|
|
||||||
<div v-for="item in wData" :key="item">
|
|
||||||
<div class="badyItem">
|
|
||||||
<div style="flex:2">
|
|
||||||
<img src="img/enp_blue/listImg.png"
|
|
||||||
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
</div>
|
|
||||||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
|
||||||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 左右两条边框线 -->
|
||||||
<!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
|
<!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
|
||||||
<!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
|
<!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
|
||||||
|
<!-- 设备分类 -->
|
||||||
<div v-show="activeIndex == 0" class="btns_enp">
|
<div v-show="activeIndex == 0" class="btns_enp">
|
||||||
<div class="btns" :class="bindBtnClass(0)">生产设备</div>
|
<div class="btns" :class="bindBtnClass(0)">生产设备</div>
|
||||||
<div class="btns" :class="bindBtnClass(1)">治理设备</div>
|
<div class="btns" :class="bindBtnClass(1)">治理设备</div>
|
||||||
|
|
@ -495,6 +284,7 @@
|
||||||
<div class="btns" :class="bindBtnClass(3)">监控设备</div>
|
<div class="btns" :class="bindBtnClass(3)">监控设备</div>
|
||||||
<!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> -->
|
<!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 底部背景图片 -->
|
||||||
<div v-show="activeIndex == 0" class="bottom_enp"></div>
|
<div v-show="activeIndex == 0" class="bottom_enp"></div>
|
||||||
<div v-if="activeIndex != 0" class="container">
|
<div v-if="activeIndex != 0" class="container">
|
||||||
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
|
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
|
||||||
|
|
@ -547,7 +337,8 @@ import alarmrecord from "./enpComponents/alarmrecord.vue";
|
||||||
import pollutant2 from "./enpComponents/pollutant2.vue"
|
import pollutant2 from "./enpComponents/pollutant2.vue"
|
||||||
import smartg from "./enpComponents/smartg.vue";
|
import smartg from "./enpComponents/smartg.vue";
|
||||||
import videowall from "./enpComponents/video.vue";
|
import videowall from "./enpComponents/video.vue";
|
||||||
import 'babylonjs-loaders';
|
import scScrollTavle from '@/components/scScrollTable.vue';
|
||||||
|
// import 'babylonjs-loaders';
|
||||||
import 'animate.css';
|
import 'animate.css';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -566,7 +357,8 @@ export default {
|
||||||
alarmrecord,
|
alarmrecord,
|
||||||
pollutant2,
|
pollutant2,
|
||||||
smartg,
|
smartg,
|
||||||
videowall
|
videowall,
|
||||||
|
scScrollTavle
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -595,18 +387,32 @@ export default {
|
||||||
activeSectionName: '回转窑',
|
activeSectionName: '回转窑',
|
||||||
updateTime: '2023-08-17 16:00:00',
|
updateTime: '2023-08-17 16:00:00',
|
||||||
pieOption: {
|
pieOption: {
|
||||||
|
title: {
|
||||||
|
text: '',
|
||||||
|
subtext: '',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// orient: 'vertical',
|
||||||
|
right: 10,
|
||||||
|
bottom: 1,
|
||||||
|
data: ['新能源', '其他']
|
||||||
|
},
|
||||||
backgroundColor: 'rgba(255,255,255,0)',
|
backgroundColor: 'rgba(255,255,255,0)',
|
||||||
color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)'],
|
color: ['rgb(3,195,198)', 'rgb(155,248,249)', 'rgb(110,181,249)', 'rgb(205,248,248)'],
|
||||||
grid: {
|
grid: {
|
||||||
left: '3%',
|
left: '3%',
|
||||||
right: '4%',
|
top: '3%',
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
series: {
|
series: {
|
||||||
name: '出入场车辆数量统计',
|
name: '今日车辆数量统计',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: [45, 55],
|
radius: [35, 45],
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series',
|
focus: 'series',
|
||||||
|
|
@ -633,12 +439,23 @@ export default {
|
||||||
{ value: 2, name: '新能源' },
|
{ value: 2, name: '新能源' },
|
||||||
{ value: 6, name: '其他' },
|
{ value: 6, name: '其他' },
|
||||||
],
|
],
|
||||||
wryData: {
|
containerHeight: 100,
|
||||||
count: 0,
|
refValue1: 'moocBox1',
|
||||||
count_product: 0,
|
table1Visible: true,
|
||||||
count_mtrans: 0,
|
lineData: [],
|
||||||
count_mstore: 0
|
liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
|
||||||
},
|
|
||||||
|
refValue2: 'moocBox2',
|
||||||
|
table2Visible: true,
|
||||||
|
lineData2: [],
|
||||||
|
liData2: ['', '设备名称', 'TSP测量值'],
|
||||||
|
|
||||||
|
refValue3: 'moocBox3',
|
||||||
|
table3Visible: true,
|
||||||
|
lineData3: [],
|
||||||
|
liData3: ['', '设备名称', 'PM10', 'PM2.5'],
|
||||||
|
|
||||||
|
|
||||||
eqNumData: {
|
eqNumData: {
|
||||||
sc: 0,
|
sc: 0,
|
||||||
jc: 0,
|
jc: 0,
|
||||||
|
|
@ -648,55 +465,27 @@ export default {
|
||||||
},
|
},
|
||||||
cemsData: [],
|
cemsData: [],
|
||||||
tspData: [],
|
tspData: [],
|
||||||
monitorData: [
|
wData: [],
|
||||||
{ value: 1.167, name: '颗粒物(mg/m³)' },
|
|
||||||
{ value: 5.714, name: 'SO₂(mg/m³)' },
|
|
||||||
{ value: 12.546, name: 'NOx(mg/m³)' },
|
|
||||||
],
|
|
||||||
arguData: [
|
|
||||||
{ value: 21.215, name: '含氧量' },
|
|
||||||
{ value: 78.318, name: '温度' },
|
|
||||||
{ value: 4.183, name: '流速' },
|
|
||||||
{ value: 21.215, name: '压力' },
|
|
||||||
{ value: 3.612, name: '湿度' },
|
|
||||||
{ value: 2, name: '流量' },
|
|
||||||
],
|
|
||||||
mgroupValues: {
|
|
||||||
电石渣: { total: '0', elec: '0' },
|
|
||||||
原料磨: { total: '0', elec: '0' },
|
|
||||||
煤磨: { total: '0', elec: '0' },
|
|
||||||
回转窑: { total: '0', elec: '0' },
|
|
||||||
水泥磨: { total: '0', elec: '0' },
|
|
||||||
水泥包装: { total: '0', elec: '0' }
|
|
||||||
},
|
|
||||||
wData: [
|
|
||||||
{ name: '磅房', pm10: '2.9', pm25: '14.2' },
|
|
||||||
{ name: '北厂界', pm10: '-', pm25: '68.1' },
|
|
||||||
{ name: '东厂界', pm10: '-', pm25: '41.322' },
|
|
||||||
],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
document.documentElement.classList.add("dark")
|
document.documentElement.classList.add("dark")
|
||||||
this.$TOOL.data.set("APP_DARK", true)
|
this.$TOOL.data.set("APP_DARK", true)
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
that.initDomStyle();
|
||||||
that.getleft1Data();
|
that.getleft1Data();
|
||||||
that.getleft2Data();
|
that.getleft2Data();
|
||||||
that.getleft3Data();
|
that.getleft3Data();
|
||||||
this.getright1Data();
|
this.getright1Data();
|
||||||
this.getright2Data();
|
this.getright2Data();
|
||||||
|
this.getright3Data();
|
||||||
that.initCharts();
|
that.initCharts();
|
||||||
that.addListener();
|
that.addListener();
|
||||||
that.initDomStyle();
|
|
||||||
|
|
||||||
that.$nextTick(() => {
|
that.$nextTick(() => {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
// that.initFactory();
|
}, 5000);
|
||||||
|
|
||||||
}, 1000);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
|
|
@ -707,15 +496,30 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//无组织污染源一览数据
|
//有组织排放口实时监测清单数据（ CEMS）
|
||||||
getleft1Data() {
|
getleft1Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.enp.drain.countcate.req({ type: 20 }).then((res) => {
|
that.$API.em.equipment.list.req({ type: 20, cate__code: 'cems', has_envdata: 'yes' }).then(res => {
|
||||||
console.log(res)
|
that.cemsDataList = res.results;
|
||||||
that.wryData = res;
|
that.cemsData = res.results[0];
|
||||||
that.pieData[0].value = res.count_product;
|
let lineData = [];
|
||||||
that.pieData[1].value = res.count_mtrans;
|
res.results.forEach((item, index) => {
|
||||||
that.pieData[2].value = res.count_mstore;
|
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {};
|
||||||
|
obj1.elType = 'primary';
|
||||||
|
obj1.value = item.name;//设备名称
|
||||||
|
obj2.elType = 'primary';
|
||||||
|
obj2.value = item.envdata && item.envdata.dust_zs ? item.envdata.dust_zs : '-';//颗粒物折算值
|
||||||
|
obj3.elType = 'primary';
|
||||||
|
obj3.value = item.envdata && item.envdata.so2_zs ? item.envdata.so2_zs : '-';//SO₂折算值
|
||||||
|
obj4.elType = 'primary';
|
||||||
|
obj4.value = item.envdata && item.envdata.nox_zs ? item.envdata.nox_zs : '-';//NOx折算值
|
||||||
|
arr.push(obj1);
|
||||||
|
arr.push(obj2);
|
||||||
|
arr.push(obj3);
|
||||||
|
arr.push(obj4);
|
||||||
|
lineData.push(arr);
|
||||||
|
});
|
||||||
|
this.lineData = lineData;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//接入设备数量
|
//接入设备数量
|
||||||
|
|
@ -737,30 +541,55 @@ export default {
|
||||||
this.eqNumData.jk = res4.count;
|
this.eqNumData.jk = res4.count;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//有组织排放口实时监测清单数据（ CEMS）
|
|
||||||
getleft3Data() {
|
|
||||||
let that = this;
|
|
||||||
that.$API.em.equipment.list.req({ type: 20, cate__code: 'cems', has_envdata: 'yes' }).then(res => {
|
|
||||||
that.cemsDataList = res.results;
|
|
||||||
that.cemsData = res.results[0];
|
|
||||||
})
|
|
||||||
},
|
|
||||||
//无组织排放口实时监测数据（TSP）
|
//无组织排放口实时监测数据（TSP）
|
||||||
getright1Data() {
|
getleft3Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.em.equipment.list.req({ type: 20, cate__code: 'tsp', has_envdata: 'yes' }).then(res => {
|
that.$API.em.equipment.list.req({ type: 20, cate__code: 'tsp', has_envdata: 'yes' }).then(res => {
|
||||||
that.tspDataList = res.results;
|
that.tspDataList = res.results;
|
||||||
that.tspData = res.results[0];
|
that.tspData = res.results[0];
|
||||||
|
let lineData = [];
|
||||||
|
res.results.forEach((item, index) => {
|
||||||
|
let arr = [], obj1 = {}, obj2 = {};
|
||||||
|
obj1.elType = 'primary';
|
||||||
|
obj1.value = item.name;//设备名称
|
||||||
|
obj2.elType = 'primary';
|
||||||
|
obj2.value = item.envdata && item.envdata.dust_zs ? item.envdata.dust_zs : '-';//颗粒物折算值
|
||||||
|
arr.push(obj1);
|
||||||
|
arr.push(obj2);
|
||||||
|
lineData.push(arr);
|
||||||
|
});
|
||||||
|
this.lineData2 = lineData;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
//环境质量实时监测清单---（小微站）
|
//空气微站实时监测---（小微站）
|
||||||
getright2Data() {
|
getright1Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
|
that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
|
||||||
that.wData = res.results;
|
that.wData = res.results;
|
||||||
console.log('wData', this.wData)
|
console.log('wData', this.wData)
|
||||||
|
let lineData = [];
|
||||||
|
res.results.forEach((item, index) => {
|
||||||
|
let arr = [], obj1 = {}, obj2 = {}, obj3 = {};
|
||||||
|
obj1.elType = 'primary';
|
||||||
|
obj1.value = item.name;//设备名称
|
||||||
|
obj2.elType = 'primary';
|
||||||
|
obj2.value = item.envdata && item.envdata.PM10 ? item.envdata.PM10 : '-';//PM10
|
||||||
|
obj3.elType = 'primary';
|
||||||
|
obj3.value = item.envdata && item.envdata.PM25 ? item.envdata.PM25 : '-';//PM2.5
|
||||||
|
arr.push(obj1);
|
||||||
|
arr.push(obj2);
|
||||||
|
arr.push(obj3);
|
||||||
|
lineData.push(arr);
|
||||||
|
});
|
||||||
|
this.lineData3 = lineData;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//今日车辆统计数据
|
||||||
|
getright2Data() {
|
||||||
|
|
||||||
|
},
|
||||||
|
//环卫车作业情况
|
||||||
|
getright3Data() { },
|
||||||
configDark() {
|
configDark() {
|
||||||
this.config.dark = this.config.dark ? false : true
|
this.config.dark = this.config.dark ? false : true
|
||||||
},
|
},
|
||||||
|
|
@ -775,6 +604,7 @@ export default {
|
||||||
this.elDrawer = true;
|
this.elDrawer = true;
|
||||||
},
|
},
|
||||||
initDomStyle() {
|
initDomStyle() {
|
||||||
|
let that = this;
|
||||||
// 获取窗口的总高度
|
// 获取窗口的总高度
|
||||||
var windowHeight = window.innerHeight;
|
var windowHeight = window.innerHeight;
|
||||||
var windowWidth = window.innerWidth;
|
var windowWidth = window.innerWidth;
|
||||||
|
|
@ -794,10 +624,10 @@ export default {
|
||||||
// model.style.height = (windowHeight - 4) + 'px';
|
// model.style.height = (windowHeight - 4) + 'px';
|
||||||
// model.style.top = 0;
|
// model.style.top = 0;
|
||||||
|
|
||||||
var chartHeight1 = (100 - 18) * 0.37 + 'vh';
|
var chartHeight1 = (100 - 18) * 0.35 + 'vh';
|
||||||
var chartHeight2 = (100 - 18) * 0.25 + 'vh';
|
var chartHeight2 = (100 - 18) * 0.29 + 'vh';
|
||||||
console.log(chartHeight1);
|
let piechart = document.getElementById('pieChart');
|
||||||
console.log(chartHeight2);
|
piechart.style.height = ((100 - 18) * 0.29 - 4) + 'vh';
|
||||||
// var chartHeight3 = (100 - 17) * 0.28 + 'vh';
|
// var chartHeight3 = (100 - 17) * 0.28 + 'vh';
|
||||||
// var chartHeight4 = (100 - 17) * 0.715 + 'vh';
|
// var chartHeight4 = (100 - 17) * 0.715 + 'vh';
|
||||||
var charts = document.getElementsByClassName('panel')
|
var charts = document.getElementsByClassName('panel')
|
||||||
|
|
@ -841,6 +671,10 @@ export default {
|
||||||
chart.style.height = chartHeight;
|
chart.style.height = chartHeight;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
let containerHeight = document.getElementsByClassName('panel1')[0].clientHeight;
|
||||||
|
debugger;
|
||||||
|
console.log('containerHeight', containerHeight);
|
||||||
|
that.containerHeight = containerHeight;
|
||||||
if (this.engine != null) {
|
if (this.engine != null) {
|
||||||
this.engine.resize();
|
this.engine.resize();
|
||||||
}
|
}
|
||||||
|
|
@ -868,7 +702,6 @@ export default {
|
||||||
},
|
},
|
||||||
menuClick(index) {
|
menuClick(index) {
|
||||||
if (index == 0) { this.activeIndex = index; }
|
if (index == 0) { this.activeIndex = index; }
|
||||||
//
|
|
||||||
},
|
},
|
||||||
handleClick(command) {
|
handleClick(command) {
|
||||||
this.activeIndex = 1;
|
this.activeIndex = 1;
|
||||||
|
|
@ -898,7 +731,6 @@ export default {
|
||||||
getMessage(msg) {
|
getMessage(msg) {
|
||||||
console.log(msg);
|
console.log(msg);
|
||||||
},
|
},
|
||||||
|
|
||||||
compare(property) {
|
compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
return a[property] - b[property];
|
return a[property] - b[property];
|
||||||
|
|
@ -906,9 +738,9 @@ export default {
|
||||||
},
|
},
|
||||||
initCharts() {
|
initCharts() {
|
||||||
let that = this;
|
let that = this;
|
||||||
// 初始化所有表格
|
// 初始化所有表
|
||||||
that.pieOption.series.data = that.pieData;
|
that.pieOption.series.data = that.pieData;
|
||||||
that.setChart('chart1', that.pieOption);
|
that.setChart('pieChart', that.pieOption);
|
||||||
},
|
},
|
||||||
addListener() {
|
addListener() {
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
@ -1208,7 +1040,7 @@ header {
|
||||||
|
|
||||||
.eqText {
|
.eqText {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 9vh;
|
height: 100%;
|
||||||
font-size: 1.4vh;
|
font-size: 1.4vh;
|
||||||
padding-left: 0.5vw;
|
padding-left: 0.5vw;
|
||||||
margin: 0.5vh 0;
|
margin: 0.5vh 0;
|
||||||
|
|
@ -1243,11 +1075,11 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart1 {
|
#pieChart {
|
||||||
/* background-image: url('/public/img/enp_blue/huan_bg.png');
|
/* background-image: url('/public/img/enp_blue/huan_bg.png');
|
||||||
background-size: 75%;
|
background-size: 75%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue