<template>
|
<div class="HJContainerRight">
|
<div class="HJContainerRightTop">
|
<!-- <div class="HJContainerRightTop1">-->
|
<!-- <div class="title"><span>各监测站点数据排名</span> <button @click="CreateStationState()">分布</button></div>-->
|
<!-- <div class="HJContainerRightTop1chart" id="HJContainerRightTop1chart"></div>-->
|
<!-- </div>-->
|
<div class="HJContainerRightTop2">
|
<div class="title"><span>空气质量历史趋势分析</span></div>
|
<div class="HJContainerRightTop2chart" id="HJContainerRightTop2chart"></div>
|
</div>
|
</div>
|
<div class="HJContainerRightBottom">
|
<div class="HJContainerRightBottom1">
|
<div class="titleC"><span>各个监测站点实时数据</span></div>
|
<div class="HJContainerRightBottom1table">
|
<scrool></scrool>
|
</div>
|
</div>
|
</div>
|
<el-dialog v-dialogDrag width="1000px" class="HGTitle" :visible.sync="dialogVisible1">
|
<div class="dialogHG">
|
<!-- <div class="td0">
|
<span>{{qyData.RefName}}</span>
|
</div> -->
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/时光倒流.png" />
|
</span> -->
|
<span class="span2">名称：{{EVEMENT.monitoringStationName}}</span>
|
</div>
|
<div class="td1">
|
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/生产力.png" />
|
</span> -->
|
<span class="span2">时间:{{this.parseTime(EVEMENT.createTime,'{y}-{m}-{d} {h}:{i}:{s}')}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/表格.png" />
|
</span> -->
|
<span class="span2">空气质量状况:{{EVEMENT.KQZL}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/表格.png" />
|
</span> -->
|
<span class="span2">首要污染物:{{EVEMENT.SYWRW}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/水.png" />
|
</span> -->
|
<span class="span2">PM2.5:{{EVEMENT.pmTwoPointFiveVal+EVEMENT.pmTwoPointFiveUnit}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/绿色能源.png" />
|
</span> -->
|
<span class="span2">PM10:{{EVEMENT.pmZeroVal+EVEMENT.pmZeroUnit}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/油桶桶桶.png" />
|
</span> -->
|
<span class="span2">一氧化碳：{{EVEMENT.carbonMonoxideVal+EVEMENT.carbonMonoxideUnit}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/油桶桶桶.png" />
|
</span> -->
|
<span class="span2">二氧化氮：{{EVEMENT.nitrogenDioxideVal+EVEMENT.nitrogenDioxideUnit}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/油桶桶桶.png" />
|
</span> -->
|
<span class="span2">臭氧：{{EVEMENT.ozoneVal+EVEMENT.ozoneUnit}}</span>
|
</div>
|
<div class="td1">
|
<!-- <span class="span1">
|
<img src="../../../assets/image/Left/EnterpriseOperation/油桶桶桶.png" />
|
</span> -->
|
<span class="span2">二氧化硫：{{EVEMENT.sulfurDioxideVal+EVEMENT.sulfurDioxideUnit}}</span>
|
</div>
|
<div class="td1" style="border: none;">
|
|
<span class="span2">位置：{{EVEMENT.monitorLocation}}</span>
|
</div>
|
</div>
|
</el-dialog>
|
|
|
|
|
</div>
|
</template>
|
|
<script>
|
import scrool from "./scrool.vue"
|
import {
|
axios_get,
|
axios_post
|
} from '../../../until/request.js'
|
export default {
|
components: {
|
scrool
|
},
|
data() {
|
return {
|
chart1: {},
|
chart1option: {},
|
location: [],
|
handler: null,
|
dialogVisible1: false,
|
EVEMENT: {
|
NAME: "监测站点1",
|
Tvoc: "15",
|
KQZL: "88",
|
SYWRW: "臭氧",
|
PM25: "15",
|
PM10: "47",
|
YYHT: "15",
|
EYHD: "22",
|
CY: "1",
|
EYHL: "2",
|
loc: "朝阳县"
|
},
|
|
time1: null,
|
time2: null,
|
|
|
//站点检测
|
//DataX: [],
|
DataChart1: [],
|
KQLoction:[],
|
|
|
|
|
}
|
},
|
|
mounted() {
|
this.GetJCZDList();
|
this.GetHistory();
|
},
|
|
|
methods: {
|
drawChart1(datas) {
|
this.chart1 = this.$echarts.init(document.getElementById("HJContainerRightTop1chart"));
|
|
let itemStyle;
|
var colorList = ['#3AC5A4', '#4EB2FF', '#F6D602', '#83A5AA'];
|
|
let maxArr = new Array(datas.length).fill(10);
|
this.chart1option = {
|
tooltip: {
|
show: false,
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow',
|
}
|
},
|
legend: {
|
show: false,
|
},
|
grid: {
|
left: "-20%",
|
right: 70,
|
containLabel: true,
|
},
|
xAxis: {
|
show: true,
|
type: 'value',
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: ['rgba(62, 113, 157, 0.5)']
|
}
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: 'rgba(62, 113, 157, 0.5)'
|
}
|
},
|
axisLabel: {
|
show: false,
|
color: 'rgba(62, 113, 157, 1)'
|
}
|
},
|
yAxis: [{
|
type: 'category',
|
inverse: true,
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisPointer: {
|
label: {
|
show: true,
|
margin: 30,
|
},
|
},
|
data: datas.map((item) => item.name),
|
axisLabel: {
|
margin: 250,
|
fontSize: 30,
|
align: 'left',
|
color: '#fff',
|
rich: {
|
a1: {
|
color: '#fff',
|
backgroundColor: colorList[0],
|
width: 20,
|
height: 20,
|
align: 'center',
|
borderRadius: 10,
|
},
|
a2: {
|
color: '#fff',
|
backgroundColor: colorList[1],
|
width: 20,
|
height: 20,
|
align: 'center',
|
borderRadius: 10,
|
},
|
a3: {
|
color: '#fff',
|
backgroundColor: colorList[2],
|
width: 20,
|
height: 20,
|
align: 'center',
|
borderRadius: 10,
|
},
|
b: {
|
color: '#fff',
|
backgroundColor: colorList[3],
|
width: 20,
|
height: 20,
|
align: 'center',
|
borderRadius: 10,
|
},
|
},
|
formatter: function(params) {
|
var index = datas.map((item) => item.name).indexOf(params);
|
index = index + 1;
|
if (index - 1 < 3) {
|
return ['{a' + index + '|' + index + '}' + ' ' + params].join('\n');
|
} else {
|
return ['{b|' + index + '}' + ' ' + params].join('\n');
|
}
|
},
|
},
|
}],
|
series: [{
|
z: 2,
|
name: 'value',
|
type: 'bar',
|
barWidth: 20,
|
zlevel: 1,
|
data: datas.map((item, i) => {
|
itemStyle = {}
|
itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
offset: 0,
|
color: 'transparent',
|
},
|
{
|
offset: 1,
|
color: i < 3 ? colorList[i] : colorList[3],
|
},
|
])
|
return {
|
value: item.value,
|
itemStyle: itemStyle,
|
};
|
}),
|
label: {
|
show: true,
|
position: 'right',
|
color: '#fff',
|
fontSize: 28,
|
},
|
itemStyle: {
|
barBorderRadius: [0, 15, 15, 0],
|
}
|
},
|
{
|
name: '',
|
type: 'bar',
|
barWidth: 40,
|
barGap: '-150%',
|
itemStyle: {
|
normal: {
|
color: 'rgba(0, 64, 128, 0.19)',
|
},
|
},
|
data: maxArr,
|
},
|
],
|
};
|
this.chart1.setOption(this.chart1option);
|
},
|
|
|
drawChart2(dataX,dataY) {
|
this.chart1 = this.$echarts.init(document.getElementById("HJContainerRightTop2chart"));
|
// let dataX = ['1月', '2月', '3月', '4月', '5月', '6月'];
|
// let dataY = [109, 115, 99, 132, 87, 59];
|
this.chart1option = {
|
|
tooltip: {
|
trigger: 'axis',
|
textStyle: {
|
fontSize: 28
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false, //坐标轴两边留白
|
data: dataX,
|
axisLabel: { //坐标轴刻度标签的相关设置。
|
interval: 1, //设置为 1，表示『隔一个标签显示一个标签』
|
// margin:15,
|
textStyle: {
|
color: '#eeeeee',
|
fontStyle: 'normal',
|
fontFamily: '微软雅黑',
|
fontSize: 18,
|
},
|
|
rotate:50,
|
},
|
axisTick: { //坐标轴刻度相关设置。
|
show: false,
|
},
|
axisLine: { //坐标轴轴线相关设置
|
lineStyle: {
|
color: '#CAFFFD',
|
opacity: 0.3
|
}
|
},
|
splitLine: { //坐标轴在 grid 区域中的分隔线。
|
show: false,
|
lineStyle: {
|
color: '#E5E9ED',
|
// opacity:0.1
|
}
|
}
|
},
|
yAxis: [{
|
type: 'value',
|
splitNumber: 5,
|
axisLabel: {
|
textStyle: {
|
color: '#EEEEEE',
|
fontStyle: 'normal',
|
fontFamily: '微软雅黑',
|
fontSize: 18,
|
}
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#CAFFFD',
|
opacity: 0.3
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: true,
|
lineStyle: {
|
type: 'dashed',
|
color: 'rgba(202, 255, 253, 0.2)',
|
// opacity:0.1
|
}
|
}
|
|
}],
|
series: [{
|
name: '指数',
|
type: 'line',
|
smooth: true,
|
symbol: 'circle',
|
symbolSize: 10,
|
itemStyle: {
|
normal: {
|
color: 'rgba(246,214,2, 1)',
|
shadowColor: '#F6D602',
|
shadowBlur: 20,
|
borderColor: '#F6D602',
|
borderWidth: 2,
|
lineStyle: {
|
color: "#F6D602",
|
width: 1
|
},
|
areaStyle: {
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
offset: 0,
|
color: 'rgba(0,0,0,0)'
|
}, {
|
offset: 1,
|
color: 'rgba(246,214,2, 1)'
|
}]),
|
}
|
}
|
},
|
data: dataY
|
}, ]
|
};
|
this.chart1.setOption(this.chart1option);
|
},
|
|
|
CreateState() {
|
//120.586486,41.303682
|
let location = [{
|
name: "站点1",
|
long: "120.55127",
|
lat: "41.295515",
|
loc: "柳城经济开发区管委会"
|
},
|
{
|
name: "站点2",
|
long: "120.5514825",
|
lat: "41.26670101",
|
loc: "西通路"
|
},
|
{
|
name: "站点3",
|
long: "120.5658007",
|
lat: "41.30861046",
|
loc: "金锰北路"
|
},
|
{
|
name: "站点4",
|
long: "120.5491833",
|
lat: "41.28830023",
|
loc: "建业路"
|
},
|
{
|
name: "站点5",
|
long: "120.5727801",
|
lat: "41.32834532",
|
loc: "鞍羊线"
|
},
|
];
|
|
for (let i = 0; i < location.length; i++) {
|
var position = sgworld.Creator.CreatePosition(location[i].long, location[i].lat, 0);
|
var label = sgworld.Creator.CreateLabel(position, location[i].name,
|
SmartEarthRootUrl + 'Workers/img/weatherLoc.png', {
|
// 文本偏移量
|
pixelOffset: {
|
x: 0,
|
y: -80
|
},
|
scale: 2,
|
// 无视遮挡
|
disableDepthTestDistance: Infinity
|
}, 0, "");
|
this.location.push(label);
|
}
|
|
let _that = this;
|
_that.handler = new Cesium.ScreenSpaceEventHandler(window.Viewer.scene.canvas);
|
_that.handler.setInputAction(function(event) {
|
var pick = window.Viewer.scene.pick(event.position);
|
|
if (Cesium.defined(pick)) {
|
if (pick.id._label._text._value.indexOf('站点') > -1) {
|
let item = location.filter((item) => item.name == pick.id._label._text._value);
|
_that.GetStationMessage(pick.id._label._text._value, item[0].loc);
|
};
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
sgworld.Navigate.flyToPosition(location[0].long, location[0].lat, 1000);
|
|
},
|
|
//加载站点的geojson
|
CreateStationState() {
|
try{
|
axios_post("/environmental/allStation").then(response=>{
|
//debugger;
|
if(this.location.length>0){
|
for(let i=0;i<this.location.length;i++){
|
this.location[i].deleteObject();
|
}
|
this.location=[];
|
}
|
|
for (let i = 0; i < response.data.length; i++) {
|
let obj={
|
name: response.data[i].monitoringStationName,
|
value:response.data[i].monitoringStationId
|
};
|
this.KQLoction.push(obj);
|
var Myposition = sgworld.Creator.CreatePosition(response.data[i].lon, response.data[i].lat, 0);
|
var label = sgworld.Creator.CreateLabel(Myposition, response.data[i].monitoringStationName,
|
SmartEarthRootUrl + 'Workers/img/weatherLoc.png', {
|
// 文本偏移量
|
pixelOffset: {
|
x: 0,
|
y: -80
|
},
|
scale: 2,
|
// 无视遮挡
|
disableDepthTestDistance: Infinity
|
}, 0, "");
|
this.location.push(label);
|
}
|
//添加点击事件
|
let _that = this;
|
_that.handler = new Cesium.ScreenSpaceEventHandler(window.Viewer.scene.canvas);
|
_that.handler.setInputAction(function(event) {
|
var pick = window.Viewer.scene.pick(event.position);
|
if (Cesium.defined(pick)) {
|
if(pick.id._label._text._value!=""){
|
let itemId= _that.KQLoction.find(item=>item.name==pick.id._label._text._value).value;
|
_that.GetStationMessage(itemId);
|
}
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
//sgworld.Navigate.flyToPosition(this.location[0].long, this.location[0].lat, 1000);
|
})
|
|
}catch{
|
|
}
|
},
|
|
//获取监测站点监测信息
|
GetStationMessage(itemId){
|
axios_get("/environmental/monitoringData/"+itemId).then(response=>{
|
this.EVEMENT=response.data;
|
this.dialogVisible1 = true;
|
})
|
},
|
|
//数据监测站点PM25排名
|
GetJCZDList() {
|
this.GetDataListByPM25();
|
let _that = this;
|
this.time1 = setInterval(function() {
|
_that.GetDataListByPM25();
|
}, 1000*60);
|
},
|
|
//获取数据排名
|
GetDataListByPM25(){
|
axios_post("/environmental/todayMonitoringRanking").then(response => {
|
this.DataChart1=[];
|
console.log(response);
|
for (let i = 0; i < response.data.length; i++) {
|
let obj={
|
name:"",
|
value:""
|
};
|
obj.name=response.data[i].monitoringStationName;
|
obj.value=response.data[i].pmTwoPointFiveVal;
|
this.DataChart1.push(obj);
|
}
|
|
if (this.DataChart1.length < 5) {
|
let ccount = 5 - this.DataChart1.length;
|
for (let j = 0; j < ccount; j++) {
|
let obj={
|
name:"",
|
value:""
|
};
|
obj.name="空气检测站" + (response.data.length + j+1);
|
obj.value=0;
|
this.DataChart1.push(obj);
|
}
|
}
|
|
//console.log(_that.DataChart1);
|
this.drawChart1(this.DataChart1);
|
|
})
|
|
},
|
|
//获取历史质量趋势
|
GetHistory(){
|
axios_post("/environmental/monitoringHistoryAnalyse").then(response => {
|
let dataaxios = [];
|
let datayxios = [];
|
for (let i = 0; i < response.data.length; i++) {
|
dataaxios.push(this.parseTime(response.data[i].calculateTime,'{m}-{d}'));
|
datayxios.push(parseFloat(response.data[i].pmTwoPointFiveVal).toFixed(2));
|
}
|
this.drawChart2(dataaxios,datayxios);
|
})
|
},
|
|
|
},
|
|
destroyed() {
|
if (this.handler != null) {
|
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
this.handler = null;
|
}
|
if (this.location.length > 0) {
|
for (let i = 0; i < this.location.length; i++) {
|
this.location[i].deleteObject();
|
}
|
}
|
|
if (this.time1 != null) {
|
clearInterval(this.time1);
|
}
|
if (this.time2 != null) {
|
clearInterval(this.time2);
|
}
|
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped="scoped">
|
.HJContainerRight {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
width: 100%;
|
|
.HJContainerRightTop {
|
height: 50%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
|
.HJContainerRightTop1 {
|
width: 49%;
|
height: 100%;
|
|
.HJContainerRightTop1chart {
|
height: calc(100% - 72px);
|
width: 100%;
|
}
|
|
|
}
|
|
.HJContainerRightTop2 {
|
width: 100%;
|
height: 100%;
|
|
.HJContainerRightTop2chart {
|
height: calc(100% - 72px);
|
width: 100%;
|
}
|
}
|
|
|
}
|
|
.HJContainerRightBottom {
|
height: 50%;
|
width: 100%;
|
|
.HJContainerRightBottom1 {
|
|
height: 100%;
|
width: 100%;
|
|
.HJContainerRightBottom1table {
|
margin-top: 20px;
|
width: 100%;
|
height: calc(100% - 112px);
|
}
|
}
|
|
}
|
}
|
|
|
|
.title {
|
width: 100%;
|
height: 38px;
|
background-image: url(../../../assets/images/title.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 28px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
letter-spacing: 3px;
|
|
span {
|
width: 70%;
|
text-indent: 70px;
|
}
|
|
button {
|
height: 80%;
|
width: 20%;
|
font-size: 24px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #FFFFFF;
|
border: solid 1px #04A7DC;
|
background-color: #020919;
|
border-radius: 10px;
|
}
|
|
|
}
|
|
.titleC {
|
width: 100%;
|
height: 44px;
|
background-image: url(../../../assets/images/titleC.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 28px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
text-indent: 70px;
|
letter-spacing: 3px;
|
}
|
|
|
.HGTitle /deep/ .el-dialog {
|
background-image: url(../../../assets/image/Left/EnterpriseOperation/secondbg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-color: transparent;
|
display: flex;
|
display: -ms-flex;
|
/* 兼容IE */
|
flex-direction: column;
|
-ms-flex-direction: column;
|
/* 兼容IE */
|
margin: 0 !important;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
max-height: calc(100% - 30px);
|
max-width: calc(100% - 30px);
|
}
|
|
|
.dialogHG {
|
padding-left: 100px;
|
padding-right: 100px;
|
// padding-bottom: 100px;
|
|
|
border-radius: 10px;
|
height: 1500px;
|
width: calc(100% - 100px);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
font-size: 40px;
|
letter-spacing: 2px;
|
|
.td0 {
|
height: 10%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 50px;
|
border-bottom: solid 1px #FFF;
|
}
|
|
.td1 {
|
height: 120px;
|
width: 100%;
|
font-size: 40px;
|
display: flex;
|
flex-direction: row;
|
border-bottom: solid 1px #FFF;
|
}
|
|
.td2 {
|
height: calc(80% - 800px);
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 596px;
|
height: 326px;
|
}
|
}
|
|
.td3 {
|
height: 100px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
border-bottom: solid 1px #FFF;
|
}
|
|
.span1 {
|
width: 20%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.span2 {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
|
}
|
</style>
|
