///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2019 zhongsong. All Rights Reserved.
|
// 模块描述:显示坐标
|
///////////////////////////////////////////////////////////////////////////
|
define([
|
'dojo/_base/declare',
|
'dojo/_base/lang',
|
'dojo/_base/array',
|
'dojo/_base/html',
|
'dojo/topic',
|
'jimu/BaseWidget',
|
'jimu/utils',
|
'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
|
'libs/zTree_v3/js/jquery.ztree.all'
|
],
|
function (declare,
|
lang,
|
array,
|
html,
|
topic,
|
BaseWidget,
|
aspect,
|
string,
|
utils
|
) {
|
return declare([BaseWidget], {
|
baseClass: 'jimu-widget-searchTabaPopup',
|
name: 'searchTabaPopup',
|
layers: {},
|
startup: function () {
|
// 暴露在外的接
|
var that = this;
|
$('.cloce').click(() => {
|
if (window.$myVideoFlvplayer) {
|
var flvPlayer = window.$myVideoFlvplayer;
|
flvPlayer.pause();
|
flvPlayer.unload();
|
flvPlayer.detachMediaElement();
|
flvPlayer.destroy();
|
flvPlayer = null;
|
window.$myVideoFlvplayer = false
|
}
|
$('.jimu-widget-searchTabaPopup').css({ 'display': 'none' });
|
that.myChart.clear();
|
that.myChart1.clear();
|
that.myChart2.clear();
|
$('.myCHosetimeinput').val("");
|
that.times = [1];
|
|
var dom = $('#poput-m-t-video');
|
dom.empty();
|
dom = $('#poput-m-t-quanjing');
|
dom.empty();
|
})
|
|
$('.jimu-widget-searchTabaPopup').find('#query').click(() => {
|
if (that.times[0] != 1 || window.defultEchartsTimes[0] != 1) {
|
that.times = window.defultEchartsTimes;
|
var stcd = $('.jimu-widget-searchTabaPopup').find('#userMyStcd').val();
|
that.getOurData(that.times, stcd);
|
} else {
|
layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
|
//得到各种内置组件
|
var layer = layui.layer //弹层
|
// layer.msg('请先填写关键字', { icon: 1, time: 1000, shift: 6 });
|
layer.tips('请先选择时间', '#query', {
|
tips: [1, '#FF5722']
|
});
|
})
|
}
|
})
|
|
$('.jimu-widget-searchTabaPopup').find('#empty').click(() => {
|
$('.myCHosetimeinput').val("");
|
that.times = [1];
|
window.defultEchartsTimes = [1];
|
})
|
|
|
},
|
|
closeToolBox: function (item) {
|
// if (item != this.name) {
|
// $('.tool-y-box').hide();
|
// }
|
},
|
|
onOpen: function () {
|
var that = this;
|
|
|
// $('.jimu-widget-searchTabaPopup').css({ 'display': 'block' });
|
// $('.jimu-widget-searchTabaPopup').find('.p-main').eq(1).css({ 'display': 'block' }).siblings().css({ 'display': 'none' });
|
this.creMyEcharts();
|
layui.use('laydate', function () {
|
var laydate = layui.laydate;
|
|
laydate.render({
|
elem: '#time6'
|
//设置开始日期、日期日期的 input 选择器
|
, type: 'datetime'
|
//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
|
, range: ['#test-startDate-1', '#test-endDate-1']
|
, done: function (value, date) {
|
let begintime = value.substring(0, 19),
|
endtime = value.substring(22);
|
that.times = [begintime, endtime];
|
}
|
});
|
// laydate.render({
|
// elem: '#test6'
|
// ,type: 'datetime'
|
// ,range: true
|
// });
|
});
|
this.getEchartsData();
|
},
|
times: [1],
|
myChart: '',
|
myChart1: '',
|
myChart2: '',
|
creMyEcharts: function (id) {
|
var dom = document.getElementById('popup-threse-shuiwenEcharts');
|
this.myChart = echarts.init(dom);
|
var dom = document.getElementById('popup-threse-shuiwenEcharts1');
|
this.myChart1 = echarts.init(dom);
|
var dom = document.getElementById('popup-threse-shuiwenEcharts2');
|
this.myChart2 = echarts.init(dom);
|
},
|
getOurData: function (time, stcd) {
|
// console.log(time,stcd,55555555555555)
|
var that = this
|
, url = `http://171.34.76.171:8880/pyh-station/monitorData/queryStationHistoryMonitorData?stcd=${stcd}&startTime=${time[0]}&endTime=${time[1]}`,
|
token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyNDQxNDQsImV4cCI6MTYyNTgzNjE0NH0.wjtMw7hv8IYGxFKI9b1vo2ozMXD1pE0-02HinfPl-r8l0TYVg1YvMBxW_VzzFKoY1jeC6XByQQT-aC_mAvBnWA';
|
axios.get(url, {
|
headers: {
|
'token': token
|
}
|
}).then((res) => {
|
if (res.data.code == 200) {
|
var shui = res.data.data.MONITOR_WATER//水文
|
, legendData = []
|
, xData = []
|
, seriesData = [];
|
for (var k in shui) {
|
legendData.push(shui[k].name);
|
var once = {
|
name: shui[k].name,
|
type: 'line',
|
stack: '总量',
|
data: [],
|
}
|
var onS = shui[k].valList;
|
for (var o in onS) {
|
once.data.push(onS[o].value);
|
}
|
seriesData.push(once);
|
}
|
try {
|
var ins = shui[1].valList;
|
}
|
catch (err) {
|
//在这里处理错误
|
// console.log(err)
|
}
|
for (var i in ins) {
|
xData.push(ins[i].startTime);
|
}
|
// console.log(seriesData)
|
// console.log(shui[0].valList)
|
that.getEchartsData(legendData, xData, seriesData, 1);//水文
|
|
var air = res.data.data.MONITOR_AIR//空气
|
, legendDataair = []
|
, xDataair = []
|
, seriesDataair = [];
|
for (var k in air) {
|
legendDataair.push(air[k].name);
|
var once = {
|
name: air[k].name,
|
type: 'line',
|
stack: '总量',
|
data: [],
|
}
|
var onS = air[k].valList;
|
for (var o in onS) {
|
once.data.push(onS[o].value);
|
}
|
seriesDataair.push(once);
|
}
|
try {
|
var ins = air[0].valList;
|
}
|
catch (err) {
|
//在这里处理错误
|
// console.log(err)
|
}
|
for (var i in ins) {
|
xDataair.push(ins[i].startTime);
|
}
|
// 渲染图表
|
that.getEchartsData(legendDataair, xDataair, seriesDataair, 2);//空气
|
|
var qi = res.data.data.MONITOR_WEATHER//气象
|
, legendDataqi = []
|
, xDataqi = []
|
, seriesDataqi = [];
|
for (var k in qi) {
|
legendDataqi.push(qi[k].name);
|
var once = {
|
name: qi[k].name,
|
type: 'line',
|
stack: '总量',
|
data: [],
|
}
|
var onS = qi[k].valList;
|
for (var o in onS) {
|
once.data.push(onS[o].value);
|
}
|
seriesDataqi.push(once);
|
}
|
try {
|
var ins = qi[0].valList;
|
}
|
catch (err) {
|
//在这里处理错误
|
// console.log(err)
|
}
|
for (var i in ins) {
|
xDataqi.push(ins[i].startTime);
|
}
|
// 渲染图表
|
|
that.getEchartsData(legendDataqi, xDataqi, seriesDataqi, 3);//气象
|
}
|
})
|
},
|
getEchartsData: function (l, x, s, i) {
|
var that = this;
|
|
var option;
|
|
option = {
|
// title: {
|
// text: '折线图堆叠'
|
// },
|
animationDuration: 1000,
|
color: ['#1AD4AD', '#5AB1EF', '#F96D85', '#FFBD87', '#0067A5', '#CABDE7', '#D87C82', '#A0BEFF', '#D9D0C7', '#8DAD9C'],
|
dataZoom: [{
|
type: 'slider'
|
}, {
|
type: 'inside'
|
}],
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: l
|
// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
},
|
grid: {
|
left: '1%',
|
right: '3%',
|
bottom: '12%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: x
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: s,
|
};
|
if (i == 1) {
|
option && that.myChart.setOption(option);
|
} else if (i == 2) {
|
option && that.myChart1.setOption(option);
|
} else if (i == 3) {
|
option && that.myChart2.setOption(option);
|
}
|
},
|
onClose: function () {
|
//面板关闭的时候触发 （when this panel is closed trigger）
|
},
|
|
onMinimize: function () {
|
this.resize();
|
},
|
|
onMaximize: function () {
|
this.resize();
|
},
|
|
resize: function () {
|
|
},
|
|
destroy: function () {
|
//销毁的时候触发
|
//todo
|
//do something before this func
|
this.inherited(arguments);
|
}
|
|
});
|
});
|
