$(function(){
|
var nameObj = [], radarArr=[], parnoArr = [], videoArr = [];
|
//环境质量
|
var areaRatio = echarts.init(document.getElementById('areaRatio'));
|
//水文与水环境历史数据
|
var waterHistory = echarts.init(document.getElementById('waterHistory'));
|
//空气环境历史数据
|
var airHistory = echarts.init(document.getElementById('airHistory'));
|
//土壤历史数据
|
var soilHistory = echarts.init(document.getElementById('soilHistory'));
|
//气象历史数据
|
var weatherHistory = echarts.init(document.getElementById('weatherHistory'));
|
//监测预警
|
var mainSurveyEchart = echarts.init(document.getElementById('mainSurveyEchart'));
|
|
var bmapChart = echarts.init(document.getElementById('map'));
|
|
var infoBoxTemp = null;
|
bmapChart.setOption({
|
backgroundColor: '#ff0000',
|
bmap: {
|
center: [115.93675,28.701835],
|
zoom: 12,
|
roam: true,
|
mapStyle: {
|
styleJson: [{
|
'featureType': 'water',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#234768',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'land',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#183a5f',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'railway',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'highway',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#3f65ad',
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'highway',
|
'elementType': 'labels',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'geometry',
|
'stylers': {
|
'color': '#175fff',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'geometry.fill',
|
'stylers': {
|
'color': '#173758',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'poi',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'green',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'subway',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'manmade',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1e4584',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'local',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#183a5f',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'labels',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'boundary',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1d4570',
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'building',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1d4570',
|
'visibility': 'on'
|
}
|
}, // 行政标注
|
{
|
"featureType": "label",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#ffffff",
|
"visibility": "on"
|
}
|
},
|
{
|
"featureType": "label",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#444444",
|
"visibility": "on"
|
}
|
}]
|
}
|
},
|
tooltip:{
|
trigger: 'item',
|
},
|
series: []
|
});
|
|
//echart获取百度地图实例对象
|
var ecModel = bmapChart._model;
|
var bmap = null;
|
ecModel.eachComponent('bmap', function (bmapModel) {
|
if(bmap == null){
|
bmap = bmapModel.__bmap;
|
}
|
});
|
bmap.enableScrollWheelZoom(true);
|
//******************** 江西省边界线 *******************
|
getBoundary();
|
function getBoundary(){
|
var bdary = new BMap.Boundary();
|
var name = "江西省";
|
bdary.get(name, function(rs){ //获取行政区域
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
for(var i = 0; i < count; i++){
|
var ply = new BMap.Polygon(rs.boundaries[i],
|
{
|
strokeWeight: 4, //设置多边形边线线粗
|
strokeOpacity: 1, //设置多边形边线透明度0-1
|
StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
|
strokeColor: "#378eef", //设置多边形边线颜色
|
fillColor: "#ffffff",
|
fillOpacity:0.01
|
}); //建立多边形覆盖物
|
bmap.addOverlay(ply); //添加覆盖物
|
bmap.setViewport(ply.getPath()); //调整视野
|
}
|
});
|
}
|
//******************** 查询全景数据 *******************
|
$('.tes').show();
|
$.ajax({
|
url: getNativePath() + "station/findStationByPanorama.do",
|
type: "get",
|
dataType: "json",
|
success: function(data) {
|
parnoArr = data.data; //保存全景数据
|
$.ajax({
|
url: getNativePath() + "station/findfindStationTreeByWlpnm.do",
|
type: "get",
|
data:{"stnmVideoType":"2"},
|
dataType: "json",
|
success: function(data) {
|
videoArr = []; //保存视频数据
|
for(var i=0; i<data.data.length; i++){
|
for(var j=0; j<data.data[i].children.length; j++){
|
if(!data.data[i].children[j].children){
|
videoArr.push({
|
"id":data.data[i].children[j].id,
|
"name":data.data[i].children[j].text,
|
"videolist":data.data[i].children[j].videoUrl
|
});
|
}else{
|
for(var k=0; k<data.data[i].children[j].children.length; k++){
|
var ddData = data.data[i].children[j].children[k];
|
videoArr.push({
|
"id":ddData.id,
|
"name":ddData.text,
|
"videolist":ddData.videoUrl
|
});
|
}
|
}
|
}
|
}
|
siteQuery(); //站点查询
|
}
|
});
|
}
|
});
|
|
$("#close").unbind().click(function(){
|
//关闭视频
|
$(".radarEchart-box").hide();
|
});
|
|
$(".parnoBtn").unbind().click(function(){
|
//查看全景
|
// var parnoUrl = $(this).attr("data-url");
|
// window.open(parnoUrl);
|
$(".video-pup").show();
|
var viUrl = $(this).attr("data-url");
|
$(".video-pup").html('<a class="video-close"><img src="images/close-sp.png" width="40"/></a>'+
|
'<iframe scrolling="no" frameborder=0 src="'+viUrl+'"></iframe>');
|
$(".video-close").unbind().click(function(){
|
$(".video-pup").hide();
|
$(".video-pup").html("");
|
});
|
});
|
$(".videoBtn").unbind().click(function(){
|
//查看视频
|
$(".video-pup").show();
|
var viUrl = $(this).attr("data-url");
|
$(".video-pup").html('<a class="video-close"><img src="images/close-sp.png" width="40"/></a>'+
|
'<iframe scrolling="no" frameborder=0 src="'+viUrl+'"></iframe>');
|
$(".video-close").unbind().click(function(){
|
$(".video-pup").hide();
|
$(".video-pup").html("");
|
});
|
});
|
|
//******************** 站点查询 *******************
|
var arr = [];
|
function siteQuery(){
|
$.ajax({
|
type: "get",
|
url: getNativePath() + "station/findStationTree.do",
|
dataType: "json",
|
success: function (result) {
|
var myIcon = new BMap.Icon("images/点.png", new BMap.Size(40, 40));
|
var _ztreeObj = [];
|
var resultObj = result.data;
|
arr = result.data;
|
var count = 0;
|
for (var i = 0; i < resultObj.length; i++) {
|
//在地图上描点
|
if(resultObj[i].lon && resultObj[i].lat){
|
var point = new BMap.Point(resultObj[i].lon, resultObj[i].lat);
|
var mylable = new BMap.Label(resultObj[i].stnm, {
|
offset:new BMap.Size(27, 9)
|
});
|
mylable.setStyle({ color : "#1bd0ad", fontSize : "14px", border:"0px", "background":"transparent"})
|
var marker = new BMap.Marker(point, {icon: myIcon});
|
marker.setLabel(mylable);
|
bmap.addOverlay(marker);
|
addClickHandler(resultObj[i].stcd, marker, resultObj[i].stnm);
|
}
|
//ztree 数据
|
var searchCatalog = {};
|
searchCatalog.id = resultObj[i].stcdId;
|
searchCatalog.stcd = resultObj[i].stcd;
|
searchCatalog.pId = resultObj[i].pid;
|
searchCatalog.name = resultObj[i].stnm;
|
searchCatalog.lon = resultObj[i].lon;
|
searchCatalog.lat = resultObj[i].lat;
|
_ztreeObj.push(searchCatalog);
|
}
|
//第一级、第二级父节点不显示单选按钮
|
// for (var x in _ztreeObj) {
|
// if (_ztreeObj[x].pId == 0 || _ztreeObj[x].pId == 1) {
|
// _ztreeObj[x].nocheck = true;
|
// }
|
// }
|
var setting2 = {
|
check: { enable: true, chkStyle: "radio", radioType: "all"},
|
data: { simpleData: {enable: true} },
|
callback: { onCheck: onCheck,onClick: onClick}
|
};
|
|
var ztree = $.fn.zTree.init($("#treeDemo"), setting2, _ztreeObj);
|
//调用模糊查询方法
|
fuzzySearch('treeDemo','#citySel',null,true);
|
//默认勾选自来水厂
|
var nodes = ztree.getNodesByParamFuzzy("name", "都昌", null);
|
$("#searchScid").val(nodes[0].stcd); //保存站点编号
|
for (var nodesKey in nodes) {
|
if (!nodes[nodesKey].isParent) {
|
var node = nodes[nodesKey];
|
ztree.checkNode(node, true, true, true);
|
break;
|
}
|
}
|
|
//点击某个节点 然后将该节点的名称赋值值文本框
|
function onCheck(e, treeId, treeNode) {
|
$('.tes').show();
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
treeNodeAction(treeNode);
|
}
|
|
function onClick(e, treeId, treeNode) {
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
//判断是否为父级
|
//if(treeNode.children) return false;
|
$('.tes').show();
|
zTree.checkNode(treeNode, !treeNode.checked, true);
|
treeNodeAction(treeNode);
|
}
|
|
function treeNodeAction(treeNode){
|
// var parentName = treeNode.getParentNode();
|
// if(parentName.name != "监测监控实验站"){
|
// $("#citySel").val(treeNode.name+"（"+parentName.name+"）");
|
// $("#searchScName").val(treeNode.name+"（"+parentName.name+"）");
|
// }else{
|
// $("#citySel").val(treeNode.name);
|
// $("#searchScName").val(treeNode.name);
|
// }
|
$("#citySel").val(treeNode.name);
|
$("#searchScName").val(treeNode.name);
|
$("#searchScid").val(treeNode.stcd);
|
if(infoBoxTemp){ infoBoxTemp.close(); }
|
qualityQuery(treeNode.stcd, areaRatio); //环境质量
|
actualTimeQuery(treeNode.stcd, actualImgParam); //实时数据
|
//historyQuery(treeNode.stcd); //历史数据
|
SurveyEchart(treeNode.stcd, mainSurveyEchart); // 监测预警
|
count++;
|
if(count>1){
|
bmap.centerAndZoom(new BMap.Point(treeNode.lon, treeNode.lat), 12); //地图定位到该站点
|
}
|
$(".menuContent").slideUp('fast'); //关闭下拉框
|
$("#citySel").blur();
|
$(".parnoBtn, .videoBtn").hide();
|
if(parnoArr.length > 0){ //全景
|
for(var i=0; i<parnoArr.length; i++){
|
if(parnoArr[i].stcd == treeNode.stcd){
|
if(parnoArr[i].panoramaUrl){
|
$(".parnoBtn").show();
|
$(".parnoBtn").attr("data-url", parnoArr[i].panoramaUrl);
|
}
|
}
|
}
|
}
|
|
if(videoArr.length > 0){ //视频
|
for(var i=0; i<videoArr.length; i++){
|
if(videoArr[i].id == treeNode.stcd){
|
if(videoArr[i].videolist){
|
$(".videoBtn").show();
|
$(".videoBtn").attr("data-url", videoArr[i].videolist);
|
}
|
}
|
}
|
}
|
}
|
|
//隐藏树
|
function hideMenu() {
|
$("#citySel").val($("#searchScName").val());
|
$("#menuContent").fadeOut("fast");
|
$("body").unbind("mousedown");
|
}
|
$("#citySel").click(function () {
|
$(".menuContent").slideDown('fast');
|
});
|
$("#citySel").blur(function () {
|
$("#citySel").val($("#searchScName").val());
|
$(".menuContent").slideUp('fast');
|
});
|
|
$("#menuContent").mouseenter(function () {
|
$("#citySel").unbind("blur");
|
});
|
$("#menuContent").mouseleave(function () {
|
$("#citySel").focus();
|
$("#citySel").blur(function () {
|
$(".menuContent").slideUp('fast');
|
});
|
});
|
|
$("#map").click(function(){
|
$("#citySel").blur();
|
$("#citySel").val($("#searchScName").val());
|
hideMenu();
|
});
|
},
|
error: function (e) {
|
console.log(e);
|
alert("请求失败");
|
}
|
});
|
}
|
//******************** 点击站点展示 实时信息 *******************
|
function addClickHandler(stcd, marker, name){
|
marker.addEventListener("click",function(e){
|
openInfo(stcd, e, name)}
|
);
|
}
|
function openInfo(stcd, e, name){
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findElementCurrentByStcd.do",
|
type: "get",
|
data:{"stcd":stcd},
|
dataType: "json",
|
success: function(data) {
|
var sthtml = "";
|
var p = e.target;
|
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
|
// $("#citySel").val(name);
|
// $("#searchScName").val(name);
|
if(data.data.waterList.length > 0){// 水文
|
sthtml += mapStationShow(data.data.waterList, "水文与水环境");
|
}
|
|
if(data.data.airList.length > 0){// 空气
|
sthtml += mapStationShow(data.data.airList, "空气环境");
|
}
|
|
if(data.data.soilList.length > 0){// 土壤
|
sthtml += mapStationShow(data.data.soilList, "土壤");
|
}
|
|
if(data.data.weatherList.length > 0){// 气象
|
sthtml += mapStationShow(data.data.weatherList, "气象");
|
}
|
sthtml = '<div class="map-pup-til">'+name+'</div><div class="map-pup">'+sthtml+'<div class="jiao-icon"><span></span></div></div>';
|
|
var infoBox = new BMapLib.InfoBox(bmap, sthtml, {
|
boxStyle:{
|
width: "260px",
|
height: "200px",
|
marginBottom: "35px",
|
marginleft:"6px",
|
backgroundColor:"#253b75",
|
color:"#fff",
|
border:"1px solid #188488",
|
borderRadius:"3px"
|
},
|
closeIconUrl: "images/close-pup.png",
|
closeIconMargin:'4px',
|
closeIconZIndex:1,
|
enableAutoPan: true,
|
align: INFOBOX_AT_TOP
|
});
|
//判断上一个窗体是否存在，若存在则执行close
|
if(infoBoxTemp){ infoBoxTemp.close(); }
|
infoBoxTemp = infoBox;
|
infoBox.open(point);
|
$('.map-pup').niceScroll({
|
cursorcolor: "#ccc",//#CC0071 光标颜色
|
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
|
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
|
cursorwidth: "5px", //像素光标的宽度
|
cursorborder: "0", // 游标边框css定义
|
cursorborderradius: "5px",//以像素为光标边界半径
|
autohidemode: false //是否隐藏滚动条
|
});
|
|
$(".infoBox").hover(function(){
|
bmap.disableScrollWheelZoom();
|
}, function(){
|
bmap.enableScrollWheelZoom();
|
})
|
}
|
});
|
}
|
|
function mapStationShow(data, nametil){
|
var html = '', htmltil = '';
|
for(var i=0; i<data.length; i++){
|
if(data[i].unit == "无"){
|
data[i].unit = "";
|
}
|
if(data[i].code != "UPTIME"){
|
if(data[i].value == null || data[i].value == undefined){
|
html += '<div><label>'+data[i].name+':</label><span>'+"0.00"+data[i].unit+'</span></div>';
|
}else{
|
html += '<div><label>'+data[i].name+':</label><span>'+parseFloat(data[i].value).toFixed(2)+data[i].unit+'</span></div>';
|
}
|
}else{
|
htmltil = '<div class="hj-til"><label>'+nametil+'</label><span>'+(data[i].value).substring(0, 16)+'</span></div>';
|
}
|
}
|
return htmltil+html;
|
}
|
//******************** 环境质量 *******************
|
function qualityQuery(stcd, areaRatio){
|
$('.main-acreage .histor-tip').hide();
|
$.ajax({
|
url:getNativePath() + "naturalFactors/findExponentByStcd.do",
|
type: "get",
|
data:{"stcd":stcd},
|
dataType: "json",
|
success: function(data) {
|
$("#quality b").html(data.data[0].level);
|
areaRatio.clear();
|
if(data.data[0].level == "无"){
|
$('.main-acreage .histor-tip').show();
|
return false;
|
}
|
monitoringEchart(areaRatio, data.data[0].strlist);
|
}
|
});
|
};
|
|
function monitoringEchart(areaRatio, radarArrs){
|
var subArr1 = radarArrs.slice(1, 2);
|
var subArr2 = radarArrs.slice(5, 6);
|
radarArrs.splice(1,1,subArr2[0]);
|
radarArrs.splice(5,1,subArr1[0]);
|
var radarItem = [], radarValue = [], maxArr = [];
|
for(var i=0; i<radarArrs.length; i++){
|
var numArr = [];
|
var max = radarArrs[i].max;
|
for(var j=1; j<=radarArrs[i].max; j++){
|
if(j == 1){
|
numArr.push({"num":j, "numva":max--, "level":"一级"});
|
}else if(j == 2){
|
numArr.push({"num":j, "numva":max--, "level":"二级"});
|
}else if(j == 3){
|
numArr.push({"num":j, "numva":max--, "level":"三级"});
|
}else if(j == 4){
|
numArr.push({"num":j, "numva":max--, "level":"四级"});
|
}else if(j == 5){
|
numArr.push({"num":j, "numva":max--, "level":"五级"});
|
}else if(j == 6){
|
numArr.push({"num":j, "numva":max--, "level":"六级"});
|
}
|
|
}
|
|
|
for(var j=0; j<numArr.length; j++){
|
if(numArr[j].num == radarArrs[i].level){
|
var value = parseFloat(radarArrs[i].value).toFixed(2)
|
radarItem.push({"name":radarArrs[i].name, "max":radarArrs[i].max, "values":value, "levels":numArr[j].level});
|
radarValue.push(numArr[j].numva);
|
}
|
}
|
}
|
|
var radaoption = {
|
color: ['#00c2ff', '#f9cf67', '#e92b77'],
|
tooltip : {
|
formatter:function(params){
|
var html = "";
|
for(var i=0; i<radarItem.length; i++){
|
html += '<div>'+radarItem[i].name+'：'+radarItem[i].values+'('+radarItem[i].levels+')</div>';
|
}
|
return html;
|
},
|
position: function (pos, params, dom, rect, size) {
|
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
|
var obj = {top: 60};
|
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
|
return obj;
|
}
|
},
|
radar: [{
|
radius:'55%',
|
center:['55%','50%'],
|
name: {
|
formatter:"{value}",
|
textStyle: {
|
fontSize: 12, //外圈标签字体大小
|
color: '#fff' //外圈标签字体颜色
|
}
|
},
|
indicator: radarItem,
|
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
|
show: true,
|
areaStyle: { // 分隔区域的样式设置。
|
color: ['#315791', '#315791'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
|
}
|
},
|
axisLine: { //指向外圈文本的分隔线样式
|
lineStyle: {
|
color: '#b0d0f5'
|
}
|
},
|
|
splitLine: {
|
lineStyle: {
|
color: '#b0d0f5', // 分隔线颜色
|
width: 1, // 分隔线线宽
|
}
|
}
|
}],
|
series: [{
|
name: '雷达图',
|
type: 'radar',
|
itemStyle: {
|
emphasis: {
|
lineStyle: {
|
width: 4
|
}
|
}
|
},
|
itemStyle: {normal: {areaStyle: {type: 'default'}}},
|
data: [{
|
name: '',
|
value: radarValue,
|
itemStyle: {
|
normal: { //图形悬浮效果
|
borderColor: '#00c2ff',
|
borderWidth: 2.5
|
}
|
},
|
}]
|
}, ]
|
};
|
|
areaRatio.setOption(radaoption);
|
$(window).resize(areaRatio.resize);
|
}
|
|
//******************** 指标状态 *******************
|
function SurveyEchart (stcd, mainSurveyEchart){
|
$(".survey-close, .survey-list-top, .survey-list-box").hide();
|
$("#mainSurveyEchart, .main-survey-menu-spot").show();
|
$(".survey-list-box").html("");
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findSationEleNumAndWarning.do",
|
type: "get",
|
data:{"stcd":stcd},
|
dataType: "json",
|
success: function(data) {
|
mainSurveyEchart.clear();
|
$("#zonCont").html(data.data.total);
|
$("#zcCont").html(data.data.normal);
|
$("#ycCont").html(data.data.warning);
|
if(data.data.air == 0 && data.data.soil == 0 && data.data.water == 0 && data.data.weather == 0 ){
|
$(".survey-tip").show();
|
}else{
|
$(".survey-tip").hide();
|
SurveyEchartData(data.data, mainSurveyEchart);
|
}
|
|
$("#ycBtn").unbind().click(function(){ // 查询异常数据，进行列表展示
|
$(".survey-list-box").mCustomScrollbar("destroy");
|
$(".survey-close, .survey-list-top, .survey-list-box").show();
|
$("#mainSurveyEchart, .main-survey-menu-spot").hide();
|
$(".survey-tip").hide();
|
$(".survey-list-box").html("");
|
var html = "", val = 0;
|
if(data.data.warningList.length > 0){
|
for(var i=0; i<data.data.warningList.length; i++){
|
if(isNaN(data.data.warningList[i].value)){
|
val = data.data.warningList[i].value;
|
if(!data.data.warningList[i].yz){
|
html += '<li><span title="'+data.data.warningList[i].fieldName+'">'+data.data.warningList[i].fieldName+'</span>'+
|
'<span title="'+val+'">'+val+'</span>'+
|
'<span title=" ">/</span>'+
|
'<span title="'+data.data.warningList[i].type+'">'+data.data.warningList[i].type+'</span>'+
|
'<span title="'+data.data.warningList[i].time+'">'+data.data.warningList[i].time+'</span></li>';
|
}else{
|
html += '<li><span title="'+data.data.warningList[i].fieldName+'">'+data.data.warningList[i].fieldName+'</span>'+
|
'<span title="'+val+'">'+val+'</span>'+
|
'<span title="'+data.data.warningList[i].yz+'">'+data.data.warningList[i].yz+'</span>'+
|
'<span title="'+data.data.warningList[i].type+'">'+data.data.warningList[i].type+'</span>'+
|
'<span title="'+data.data.warningList[i].time+'">'+data.data.warningList[i].time+'</span></li>';
|
}
|
}else{
|
val = parseFloat(data.data.warningList[i].value).toFixed(2);
|
html += '<li><span title="'+data.data.warningList[i].fieldName+'">'+data.data.warningList[i].fieldName+'</span>'+
|
'<span title="'+val+data.data.warningList[i].unit+'">'+val+data.data.warningList[i].unit+'</span>'+
|
'<span title="'+data.data.warningList[i].yz+'">'+data.data.warningList[i].yz+'</span>'+
|
'<span title="'+data.data.warningList[i].type+'">'+data.data.warningList[i].type+'</span>'+
|
'<span title="'+data.data.warningList[i].time+'">'+data.data.warningList[i].time+'</span></li>';
|
}
|
}
|
$(".survey-list-box").html(html);
|
$(".survey-list-box").mCustomScrollbar();
|
}else{
|
$(".survey-list-box").html("<div style='width:100%; text-align:center; font-size:14px; color:#fff; padding-top:20%;'>暂无数据<div>");
|
}
|
});
|
}
|
});
|
}
|
|
function SurveyEchartData(data, mainSurveyEchart){
|
var datas = [], dataName = [];
|
if(data.air != 0){
|
dataName.push('空气环境要素');
|
datas.push({value:data.air, name:'空气环境要素', desc:data.eleColumnList[0].airColumn, itemStyle:{ color: '#5ee2a4'}});
|
}
|
if(data.soil != 0){
|
dataName.push('土壤要素');
|
datas.push({value:data.soil, name:'土壤要素', desc:data.eleColumnList[0].soilColumn, itemStyle:{ color: '#fed101' }});
|
}
|
if(data.water != 0){
|
dataName.push('水文与水环境要素');
|
datas.push({value:data.water, name:'水文与水环境要素', desc:data.eleColumnList[0].waterColumn, itemStyle:{ color: '#58d2e2' }});
|
}
|
if(data.weather != 0){
|
dataName.push('气象要素');
|
datas.push({value:data.weather, name:'气象要素', desc:data.eleColumnList[0].wealtherColimn, itemStyle:{ color: '#e2674a' }});
|
}
|
var surveyOption = {
|
tooltip : {
|
trigger: 'item',
|
// formatter: "{b} : {c} ({d}%)"
|
formatter:function(data){
|
var descarr = data.data.desc.split(',')
|
var str = ''
|
for(var i in descarr){
|
str += descarr[i] + "<br />"
|
}
|
return data.name + " : " + data.data.value + "<br />" + str
|
}
|
},
|
legend: {
|
top:"center",
|
left:"5",
|
orient: 'vertical',
|
data:dataName,
|
textStyle : {color:'#fff', lineHeight:15},
|
pageTextStyle:{color:'#fff'},
|
pageIconColor:'#fff',
|
pageIconInactiveColor:'#fff',
|
itemWidth:14,
|
formatter: function (name) {
|
if(name.length > 4){
|
var sName = name.substring(0,4);
|
var eName = name.substring(4,name.length);
|
var html = sName+"\n"+eName;
|
return html;
|
}else{
|
return name;
|
}
|
}
|
},
|
series : [
|
{
|
name:'',
|
type:'pie',
|
radius : ['30%', '80%'],
|
center : ['65%', '55%'],
|
roseType : 'radius',
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
avoidLabelOverlap: false,
|
data:datas
|
}
|
|
]
|
};
|
|
mainSurveyEchart.setOption(surveyOption);
|
$(window).resize(mainSurveyEchart.resize);
|
}
|
|
$(".survey-close").unbind().click(function(){
|
var stcd = $("#searchScid").val();
|
SurveyEchart (stcd, mainSurveyEchart);
|
});
|
|
//******************** 实时数据 *******************
|
function actualTimeQuery(stcd, actualImgParam){
|
$(".actual-list .title, .water-list, .actual-tip, .actual-list .soil-tip").hide();
|
$(".water-list").html("");
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findElementCurrentByStcd.do",
|
type: "get",
|
data:{"stcd":stcd},
|
dataType: "json",
|
success: function(data) {
|
$("#actualList").mCustomScrollbar("destroy");
|
var selData = [];
|
if(data.data.waterList.length == 0 && data.data.airList.length == 0 && data.data.soilList.length == 0 && data.data.weatherList.length == 0){
|
$(".actual-list .soil-tip").show();
|
}else{
|
if(data.data.waterList.length > 0){// 水文
|
selData.push("水文");
|
actualTimeQueryData(data.data.waterList, "waterList", "title-sw", actualImgParam);
|
}
|
|
if(data.data.airList.length > 0){// 空气
|
selData.push("空气");
|
actualTimeQueryData(data.data.airList, "airList", "title-kq", actualImgParam);
|
}
|
|
if(data.data.soilList.length > 0){// 土壤
|
selData.push("土壤");
|
actualTimeQueryData(data.data.soilList, "soilList", "title-tr", actualImgParam);
|
}
|
|
if(data.data.weatherList.length > 0){// 气象
|
selData.push("气象");
|
actualTimeQueryData(data.data.weatherList, "weatherList", "title-qx", actualImgParam);
|
}
|
$("#actualList").mCustomScrollbar("destroy");
|
$("#actualList").mCustomScrollbar();
|
}
|
historyQuery(stcd, selData);
|
var option = "";
|
for(var i=0; i<selData.length; i++){
|
if(i == 0){
|
option += '<option value="'+selData[i]+'" selected="">'+selData[i]+'</option>';
|
}else{
|
option += '<option value="'+selData[i]+'">'+selData[i]+'</option>';
|
}
|
}
|
|
$("#interestAihao").html(option);
|
//实时数据下拉框
|
$("#interestAihao").find("option").removeAttr("selected");
|
$("#interestAihao").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == selData[0]){
|
$(this).attr("selected","selected");
|
if($(this).val() == "水文"){
|
actualEchart(data.data.waterList, actualTime);
|
}else if($(this).val() == "空气"){
|
actualEchart(data.data.airList, actualTime);
|
}else if($(this).val() == "土壤"){
|
actualEchart(data.data.soilList, actualTime);
|
}else if($(this).val() == "气象"){
|
actualEchart(data.data.weatherList, actualTime);
|
}
|
}
|
});
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
form.on('select(aihao)', function(e){
|
if(e.value == "水文"){
|
actualEchart(data.data.waterList, actualTime);
|
}else if(e.value == "空气"){
|
actualEchart(data.data.airList, actualTime);
|
}else if(e.value == "土壤"){
|
actualEchart(data.data.soilList, actualTime);
|
}else if(e.value == "气象"){
|
actualEchart(data.data.weatherList, actualTime);
|
}
|
});
|
});
|
}
|
});
|
}
|
|
function actualTimeQueryData(dataList, actualObj, titleObj, actualImgParam){
|
var html = '';
|
$('.'+titleObj).show();
|
for(var i=0, len = dataList.length; i<len; i++){
|
if(dataList[i].code == "UPTIME"){
|
$('.'+titleObj).find('span').html((dataList[i].value).substring(0, 16));
|
}else{
|
var values = parseFloat(dataList[i].value).toFixed(2);
|
var imgNum = 0, exceed = "";
|
for(k in actualImgParam){
|
if(k == dataList[i].code){
|
imgNum = actualImgParam[k].imgUrl;
|
}
|
}
|
if(dataList[i].exceed){
|
exceed = "<img src='images/exceed.png' width='20'/>"
|
}
|
if(dataList[i].unit == "无") dataList[i].unit = "";
|
var span = "";
|
if(dataList[i].annotation){
|
var span = "<i data-heml='"+dataList[i].annotation+"'></i>";
|
}
|
|
if(dataList[i].level || dataList[i].levelExplain){
|
if(dataList[i].level && dataList[i].levelExplain){
|
dataList[i].levelExplain = '('+dataList[i].levelExplain+')';
|
}
|
html += '<li>'+
|
'<span><img src="images/'+imgNum+'.png" width="22"/></span>'+
|
'<span title="'+dataList[i].name+'">'+dataList[i].name+'</span>'+
|
'<span title="'+values+dataList[i].unit+'">'+ dataList[i].level+dataList[i].levelExplain+'</span>'+
|
'<span>'+exceed+'</span>'+
|
'<span>'+span+'</span>'+
|
'</li>';
|
}else{
|
html += '<li>'+
|
'<span><img src="images/'+imgNum+'.png" width="22"/></span>'+
|
'<span title="'+dataList[i].name+'">'+dataList[i].name+'</span>'+
|
'<span title="'+values+dataList[i].unit+'">'+ values+dataList[i].unit+'</span>'+
|
'<span>'+exceed+'</span>'+
|
'<span>'+span+'</span>'+
|
'</li>';
|
}
|
|
}
|
}
|
$("#"+actualObj).html("<ul>"+html+"</ul>");
|
$("#"+actualObj).show();
|
|
$("#"+actualObj+" ul li span i").hover(function(e){
|
var explain = $(this).attr("data-heml");
|
var wh = $(window).width();
|
var top = e.pageY + 5;
|
var left = e.pageX + 5;
|
if(left > (wh - 230)) left = left - 230;
|
$('.Explain-window').css({'top': top + 'px','left': left + 'px'});
|
$(".Explain-window").html("<p>"+explain+"</p>");
|
$(".Explain-window").show("slow");
|
}, function(e){
|
$(".Explain-window").html("");
|
$(".Explain-window").hide("slow");
|
});
|
}
|
|
|
function actualEchart(listData){
|
var html = "", listDataArr = [];
|
if(listData.length <= 1){
|
$("#leftposition, #rightposition").hide();
|
}else{
|
$("#leftposition, #rightposition").show();
|
}
|
if(listData.length <= 0){
|
$("#actualTime").html('<div class="actual-tip">暂无数据</div>');
|
return false;
|
}
|
for(var i=0; i<listData.length; i++){
|
if(listData[i].code != "UPTIME"){
|
listDataArr.push(listData[i]);
|
}
|
}
|
|
for(var i=0; i<listDataArr.length; i++){
|
html += '<div class="actual-time-box" id="actualTime'+(i+1)+'"></div>';
|
}
|
|
$("#actualTime").html(html);
|
$("#leftposition").addClass('on');
|
$("#rightposition").removeClass('on');
|
$("#leftposition").find('img').attr("src", "images/shensuo-on.png");
|
$("#rightposition").find('img').attr("src", "images/shensuo.png");
|
$("#actualTime").css({"width":$(".actual-time").width()*listData.length, "margin-left":"0px"});
|
$(".actual-time-box").css({"height":$("#actualTime").height(), "width":$(".actual-time").width()});
|
var index = 0;
|
$("#leftposition").unbind().click(function() {
|
$("#rightposition").removeClass('on');
|
$("#rightposition").find('img').attr("src", "images/shensuo.png");
|
index--;
|
if(index <= 0){
|
$("#leftposition").addClass('on');
|
$("#leftposition").find('img').attr("src", "images/shensuo-on.png");
|
index = 0;
|
}
|
$("#actualTime").css({"margin-left":-$(".actual-time").width()*index});
|
})
|
|
$("#rightposition").unbind().click(function() {
|
index++;
|
$("#leftposition").removeClass('on');
|
$("#leftposition").find('img').attr("src", "images/shensuo.png");
|
if(index >= listData.length-2){
|
$("#rightposition").addClass('on');
|
$("#rightposition").find('img').attr("src", "images/shensuo-on.png");
|
index = listData.length-2;
|
}
|
$("#actualTime").css({"margin-left":-$(".actual-time").width()*index});
|
})
|
|
actualEchartShow(listDataArr);
|
}
|
|
function actualEchartShow(listData){
|
for(var i=0; i<listData.length; i++){
|
var actualTime = echarts.init(document.getElementById("actualTime"+(i+1)));
|
for(var k in actualImgParam){
|
if(k == listData[i].code){
|
if(actualImgParam[k].name == "水温"){
|
wdj(actualTime, listData[i], actualImgParam[k]);
|
}else{
|
actualEchartZs(actualTime, listData[i], actualImgParam[k]);
|
}
|
}
|
}
|
}
|
|
}
|
|
function actualEchartZs(actualTime, listData, actualImgParam){
|
listData.value = parseFloat(listData.value).toFixed(2);
|
var actualOption = {
|
tooltip : {
|
formatter: "{b} : {c}"+listData.unit,
|
position: function (pos, params, dom, rect, size) {
|
var obj = {top: 60};
|
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
|
return obj;
|
}
|
},
|
series: [{
|
type: 'gauge',
|
splitNumber: actualImgParam.splitNumber,
|
min:0,
|
max: actualImgParam.max,
|
detail: {
|
formatter: '{value}'+listData.unit,
|
fontSize: 11,
|
color: '#fff',
|
offsetCenter: [0, '90%'],
|
borderRadius: 2,
|
borderColor: '#fff',
|
borderWidth: 1,
|
fontFamily: 'Arial',
|
width: 70
|
},
|
title : {
|
offsetCenter: ['0%', '-30%'],
|
fontSize: 12,
|
color:"#fff"
|
},
|
radius: '90%',
|
center: ['50%', '50%'], // 默认全局居中
|
axisLine: { // 坐标轴线
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: actualImgParam.color,
|
width: 15,
|
shadowColor: '#0093ee', //默认透明
|
shadowOffsetX: 0,
|
shadowOffsetY: 0,
|
shadowBlur: 10,
|
opacity: 1,
|
}
|
|
},
|
splitLine: { // 分隔线
|
length: 10, // 属性length控制线长
|
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
color: '#fff'
|
}
|
},
|
axisTick: { // 坐标轴小标记
|
length: 5, // 属性length控制线长
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: '#fff'
|
}
|
},
|
axisLabel: {
|
fontSize:9
|
},
|
data: [{value: listData.value, name:listData.name}]
|
}
|
]
|
}
|
|
actualTime.setOption(actualOption);
|
$(window).resize(actualTime.resize);
|
}
|
|
//******************** 历史数据 *******************
|
function historyQuery(stcd, selData){
|
$(".soil-tip").hide();
|
//默认查询1的天数据
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = nowtime.getFullYear()+'-'+p(nowtime.getMonth()+1)+"-"+p(nowtime.getDate())+" 00:00:00";
|
$("#historyStratTime").val(starttime);
|
$("#historyEndTime").val(endtime);
|
if(selData.length > 1){
|
$(".history-more").hide();
|
for(var i=0; i<selData.length; i++){
|
if(selData[i] == "水文"){
|
$(".main-bottom .monit-history:nth-child(1) .history-more").show();
|
}else if(selData[i] == "空气"){
|
$(".main-bottom .monit-history:nth-child(2) .history-more").show();
|
}else if(selData[i] == "土壤"){
|
$(".main-bottom .monit-history:nth-child(4) .history-more").show();
|
}else if(selData[i] == "气象"){
|
$(".main-bottom .monit-history:nth-child(3) .history-more").show();
|
}
|
}
|
$(".main-bottom .monit-history:nth-child(1) .monit-history-top h5").html("水文与水环境历史数据");
|
$(".main-bottom .monit-history:nth-child(2) .monit-history-top h5").html("空气环境历史数据");
|
$(".main-bottom .monit-history:nth-child(3) .monit-history-top h5").html("气象历史数据");
|
$(".main-bottom .monit-history:nth-child(4) .monit-history-top h5").html("土壤历史数据");
|
$(".main-bottom .monit-history:nth-child(1) .history-more").attr("data-id", "host1");
|
$(".main-bottom .monit-history:nth-child(2) .history-more").attr("data-id", "host2");
|
$(".main-bottom .monit-history:nth-child(3) .history-more").attr("data-id", "host4");
|
$(".main-bottom .monit-history:nth-child(4) .history-more").attr("data-id", "host3");
|
}else{
|
$(".history-more").show();
|
if(selData[0] == "水文"){
|
$(".main-bottom .monit-history .monit-history-top h5").html("水文与水环境历史数据");
|
$(".main-bottom .monit-history .history-more").attr("data-id", "host1");
|
}else if(selData[0] == "空气"){
|
$(".main-bottom .monit-history .monit-history-top h5").html("空气环境历史数据");
|
$(".main-bottom .monit-history .history-more").attr("data-id", "host2");
|
}else if(selData[0] == "土壤"){
|
$(".main-bottom .monit-history .monit-history-top h5").html("土壤历史数据");
|
$(".main-bottom .monit-history .history-more").attr("data-id", "host3");
|
}else if(selData[0] == "气象"){
|
$(".main-bottom .monit-history .monit-history-top h5").html("气象历史数据");
|
$(".main-bottom .monit-history .history-more").attr("data-id", "host4");
|
}
|
}
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findElementDataByTime.do",
|
type: "get",
|
data:{"stcd":stcd, "startTime":starttime, "endTime":endtime},
|
dataType: "json",
|
success: function(data) {
|
var colorData1 = ['rgba(252, 158, 23, 0.2)', 'rgba(8, 246, 124, 0.2)', 'rgba(80, 163, 125, 0.2)', 'rgba(42, 194, 222, 0.2)', 'rgba(252, 158, 23, 0.2)', 'rgba(248, 218, 15, 0.2)', 'rgba(166, 53, 53, 0.2)', 'rgba(248, 156, 0, 0.2)', 'rgba(160, 102, 2, 0.2)', 'rgba(24, 159, 90, 0.2)'];
|
var colorData2 = ['rgba(252, 158, 23, .6)', 'rgba(8, 246, 124, .6)', 'rgba(80, 163, 125, .6)', 'rgba(42, 194, 222, .6)', 'rgba(252, 158, 23, .6)', 'rgba(248, 218, 15, .6)', 'rgba(166, 53, 53, .6)', 'rgba(248, 156, 0, .6)', 'rgba(160, 102, 2, .6)', 'rgba(24, 159, 90, .6)'];
|
$('.tes').hide();
|
var json = data.data;
|
var time = [], legendData = [], seriesData = [], unitData = [];
|
waterHistory.clear();
|
soilHistory.clear();
|
airHistory.clear();
|
weatherHistory.clear();
|
|
if(selData.length > 1){
|
if(json.waterList.length > 0){
|
// ********** 水文与水环境历史数据
|
legendData = [], seriesData = [], unitData = [];
|
var selected = {};
|
for(var i=0, len = json.waterList.length; i<len; i++){
|
legendData.push(json.waterList[i].name);
|
unitData.push({"name":json.waterList[i].name, "unit":json.waterList[i].unit});
|
var hosData = [], time = [];
|
for(var j=0, le = json.waterList[i].valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(json.waterList[i].valueDataList[j].value).toFixed(2));
|
time.push((json.waterList[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
//如果值不为数字，就转换成0.00
|
for(var z in hosData){
|
if(hosData[z] == 'NaN'){
|
hosData[z] = '0.00'
|
}
|
}
|
seriesData.push({
|
name:json.waterList[i].name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
selected[json.waterList[i].name] = true;
|
}else{
|
selected[json.waterList[i].name] = false;
|
}
|
}
|
historyEchart(waterHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else{
|
$(".main-bottom .monit-history:nth-child(1) .soil-tip").show();
|
}
|
if(json.airList.length > 0){
|
// ********** 空气环境历史数据
|
legendData = [], seriesData = [], unitData = [];
|
var selected = {};
|
//-------------------------------
|
var dataList = [];
|
var pmArr = [], timess = [];
|
var aitem, aindex, bitem;
|
/*for(var z in json.airList){
|
console.log(json.airList);
|
if(json.airList[z].name == "2.5微米颗粒物" || json.airList[z].name == "10微米颗粒物"){
|
var dataWm = [], pmArr = [];
|
for(var k in json.airList[z].valueDataList){
|
if(json.airList[z].valueDataList[k].value != "0.0"){
|
dataWm.push(json.airList[z].valueDataList[k]);
|
pmArr.push(json.airList[z].valueDataList[k]);
|
}
|
}
|
json.airList[z].valueDataList = dataWm;
|
}
|
}*/
|
|
var ss = [];
|
for(var ar in pmArr){
|
ss.push({"endTime":pmArr[ar].pmArr, "startTime":pmArr[ar].startTime, "value":"0.0"});
|
}
|
|
for(var i=0, len = json.airList.length; i<len; i++){
|
if(json.airList[i].name == "二氧化硫" || json.airList[i].name == "二氧化碳"){
|
json.airList[i].valueDataList = ss;
|
}
|
}
|
/*for(var i=0, len = json.airList.length; i<len; i++){
|
if(stcd == "3604281001"){ //都昌
|
if(json.airList[i].name == "2.5微米颗粒物"){
|
dataList.unshift(json.airList[i]);
|
}else{
|
dataList.push(json.airList[i]);
|
}
|
}else if(stcd == "3610231001"){ //南丰傩湖
|
if(json.airList[i].name == "负氧离子"){
|
dataList.unshift(json.airList[i]);
|
}else{
|
dataList.push(json.airList[i]);
|
}
|
}
|
}*/
|
|
dataList = json.airList;
|
|
//-------------------------------
|
for(var i=0, len = json.airList.length; i<len; i++){
|
legendData.push(json.airList[i].name);
|
unitData.push({"name":json.airList[i].name, "unit":json.airList[i].unit});
|
var hosData = [], time = [];
|
for(var j=0, le = json.airList[i].valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(json.airList[i].valueDataList[j].value).toFixed(2));
|
time.push((json.airList[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
for(var z in hosData){
|
if(hosData[z] == 'NaN'){
|
hosData[z] = '0.00'
|
}
|
}
|
seriesData.push({
|
name:json.airList[i].name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
selected[json.airList[i].name] = true;
|
}else{
|
selected[json.airList[i].name] = false;
|
}
|
}
|
historyEchart(airHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else{
|
$(".main-bottom .monit-history:nth-child(2) .soil-tip").show();
|
}
|
if(json.soilList.length > 0){
|
// ********** 土壤历史数据
|
legendData = [], seriesData = [], unitData = [];
|
var selected = {};
|
for(var i=0, len = json.soilList.length; i<len; i++){
|
legendData.push(json.soilList[i].name);
|
unitData.push({"name":json.soilList[i].name, "unit":json.soilList[i].unit});
|
var hosData = [], time = [];
|
for(var j=0, le = json.soilList[i].valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(json.soilList[i].valueDataList[j].value).toFixed(2));
|
time.push((json.soilList[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
for(var z in hosData){
|
if(hosData[z] == 'NaN'){
|
hosData[z] = '0.00'
|
}
|
}
|
seriesData.push({
|
name:json.soilList[i].name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
selected[json.soilList[i].name] = true;
|
}else{
|
selected[json.soilList[i].name] = false;
|
}
|
}
|
historyEchart(soilHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else{
|
$(".main-bottom .monit-history:nth-child(4) .soil-tip").show();
|
}
|
if(json.weatherList.length > 0){
|
// ********** 气象历史数据
|
legendData = [], seriesData = [], unitData= [];
|
var selected = {};
|
for(var i=0, len = json.weatherList.length; i<len; i++){
|
legendData.push(json.weatherList[i].name);
|
unitData.push({"name":json.weatherList[i].name, "unit":json.weatherList[i].unit});
|
var hosData = [], time = [];
|
for(var j=0, le = json.weatherList[i].valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(json.weatherList[i].valueDataList[j].value).toFixed(2));
|
time.push((json.weatherList[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
for(var z in hosData){
|
if(hosData[z] == 'NaN'){
|
hosData[z] = '0.00'
|
}
|
}
|
seriesData.push({
|
name:json.weatherList[i].name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
selected[json.weatherList[i].name] = true;
|
}else{
|
selected[json.weatherList[i].name] = false;
|
}
|
}
|
historyEchart(weatherHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else{
|
$(".main-bottom .monit-history:nth-child(3) .soil-tip").show();
|
|
}
|
}else{
|
if(selData[0] == "水文"){
|
historyEchartAlone(json.waterList, colorData1, colorData2);
|
}else if(selData[0] == "空气"){
|
historyEchartAlone(json.airList, colorData1, colorData2);
|
}else if(selData[0] == "土壤"){
|
historyEchartAlone(json.soilList, colorData1, colorData2);
|
}else if(selData[0] == "气象"){
|
historyEchartAlone(json.weatherList, colorData1, colorData2);
|
}
|
}
|
}
|
});
|
}
|
|
function historyEchartAlone(list, colorData1, colorData2){
|
if(list.length > 0){
|
var legendDatas = [], seriesDatas = [], unitDatas = [];
|
var selecteds = {};
|
for(var i=0, len = list.length; i<len; i++){
|
if(i<3){
|
historyEchartAloneData(i, list[i], colorData1, colorData2);
|
}else{
|
if(i == 3){
|
selecteds[list[i].name] = true;
|
}else{
|
selecteds[list[i].name] = false;
|
}
|
legendDatas.push(list[i].name);
|
unitDatas.push({"name":list[i].name, "unit":list[i].unit});
|
var hosDatas = [], times = [];
|
for(var j=0, le = list[i].valueDataList.length; j<le; j++){
|
hosDatas.push(parseFloat(list[i].valueDataList[j].value).toFixed(2));
|
times.push((list[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
seriesDatas.push({
|
name:list[i].name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosDatas
|
});
|
}
|
}
|
if(list.length > 3){
|
historyEchart(soilHistory, times, legendDatas, seriesDatas, selecteds, 1, unitDatas);
|
}else{
|
if(list.length <= 2){
|
if(list.length <= 1){
|
$(".main-bottom .monit-history:nth-child(2) .soil-tip").show();
|
$(".main-bottom .monit-history:nth-child(2) .history-more").hide();
|
}
|
$(".main-bottom .monit-history:nth-child(3) .soil-tip").show();
|
$(".main-bottom .monit-history:nth-child(3) .history-more").hide();
|
}
|
$(".main-bottom .monit-history:nth-child(4) .soil-tip").show();
|
$(".main-bottom .monit-history:nth-child(4) .history-more").hide();
|
}
|
}else{
|
$(".main-bottom .monit-history .soil-tip").show();
|
}
|
}
|
|
function historyEchartAloneData(i, list, colorData1, colorData2){
|
var legendData = [], seriesData = [], unitData = [];
|
var selected = {};
|
legendData.push(list.name);
|
unitData.push({"name":list.name, "unit":list.unit});
|
var hosData = [], time = [];
|
for(var j=0, le = list.valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(list.valueDataList[j].value).toFixed(2));
|
time.push((list.valueDataList[j].startTime).substring(0, 16));
|
}
|
seriesData.push({
|
name:list.name,
|
type: 'line',
|
smooth: false,
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
historyEchart(waterHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else if(i == 1){
|
historyEchart(airHistory, time, legendData, seriesData, selected, 1, unitData);
|
}else if(i == 2){
|
historyEchart(weatherHistory, time, legendData, seriesData, selected, 1, unitData);
|
}
|
}
|
|
//******************** 历史数据 ----- 更多 *******************
|
$(".his-close").unbind().click(function(){
|
//关闭更多
|
$(".history-query").hide();
|
$(historyQueryEchart).height($(".history-query").height());
|
$(historyQueryEchart).width($(".history-query").width());
|
var historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart'));
|
historyQueryEchart.clear();
|
});
|
|
$('.history-more').unbind().click(function(){
|
var dataId = $(this).attr('data-id');
|
$("#historyType").val(dataId);
|
strTime = getToday("s", 0);
|
endTime = getToday("e", 0);
|
$("#historyStratTime").val(strTime);
|
$("#historyEndTime").val(endTime);
|
$(".history-query-date span").removeClass('on');
|
$(".history-query-date span").eq(0).addClass('on');
|
historyMoreQuery();
|
})
|
|
function historyMoreQuery(){
|
$(".his-loding").show();
|
$('.history-query .histor-tip').hide();
|
var dataId = $("#historyType").val();
|
var stcd = $("#searchScid").val();
|
var starttime = $("#historyStratTime").val();
|
var endtime = getToday("e", 0);
|
if(starttime.length < 14){
|
starttime = starttime +" 00:00:00";
|
}
|
$(".history-query").show();
|
var historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart'));
|
historyQueryEchart.clear();
|
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findElementDataByTime.do",
|
type: "get",
|
data:{"stcd":stcd, "startTime":starttime, "endTime":endtime},
|
dataType: "json",
|
success: function(data) {
|
$(".his-loding").hide();
|
$(historyQueryEchart).height($(".history-query").height());
|
$(historyQueryEchart).width($(".history-query").width());
|
var json = data.data;
|
var time = [], legendData = [], seriesData = [];
|
switch (dataId){
|
case 'host1': //水文与水环境历史数据
|
$(".history-query-title h3").html("水文与水环境历史数据");
|
historyMore(data.data.waterList, historyQueryEchart);
|
break;
|
case 'host2': //空气环境历史数据
|
$(".history-query-title h3").html("空气环境历史数据");
|
//---------------------------------------------------
|
var dataList = [];
|
var pmArr = [], timess = [];
|
var aitem, aindex, bitem;
|
for(var z in json.airList){
|
// if(json.airList[z].name == "2.5微米颗粒物" || json.airList[z].name == "10微米颗粒物"){
|
var dataWm = [], pmArr = [];
|
for(var k in json.airList[z].valueDataList){
|
// if(json.airList[z].valueDataList[k].value != "0.0"){
|
dataWm.push(json.airList[z].valueDataList[k]);
|
pmArr.push(json.airList[z].valueDataList[k]);
|
// }
|
}
|
json.airList[z].valueDataList = dataWm;
|
// }
|
}
|
|
var ss = [];
|
for(var ar in pmArr){
|
ss.push({"endTime":pmArr[ar].pmArr, "startTime":pmArr[ar].startTime, "value":"0.0"});
|
}
|
|
for(var i=0, len = json.airList.length; i<len; i++){
|
if(json.airList[i].name == "二氧化硫" || json.airList[i].name == "二氧化碳"){
|
json.airList[i].valueDataList = ss;
|
}
|
}
|
/*for(var z in data.data.airList){
|
if(data.data.airList[z]['name'] == "2.5微米颗粒物"){
|
|
aitem = data.data.airList[z];
|
aindex = z;
|
if(z != 0){
|
bitem = data.data.airList[0];
|
data.data.airList[0] = aitem;
|
data.data.airList[aindex] = bitem;
|
}
|
break;
|
}
|
}
|
for(var i=0, len = data.data.airList.length; i<len; i++){
|
if(stcd == "3604281001"){ //都昌
|
if(data.data.airList[i].name == "2.5微米颗粒物"){
|
dataList.unshift(data.data.airList[i]);
|
}else{
|
dataList.push(data.data.airList[i]);
|
}
|
}else if(stcd == "3610231001"){ //南丰傩湖
|
if(data.data.airList[i].name == "负氧离子"){
|
dataList.unshift(data.data.airList[i]);
|
}else{
|
dataList.push(data.data.airList[i]);
|
}
|
}
|
}*/
|
dataList = data.data.airList;
|
//-------------------------------------------------
|
historyMore(data.data.airList, historyQueryEchart);
|
break;
|
case 'host3': //土壤历史数据
|
$(".history-query-title h3").html("土壤历史数据");
|
historyMore(data.data.soilList, historyQueryEchart);
|
break;
|
case 'host4': //气象历史数据
|
$(".history-query-title h3").html("气象历史数据");
|
historyMore(data.data.weatherList, historyQueryEchart);
|
break;
|
|
}
|
|
}
|
});
|
}
|
|
function historyMore(dataArr, qeryEchart){
|
var colorData1 = ['rgba(252, 158, 23, 0.2)', 'rgba(8, 246, 124, 0.2)', 'rgba(80, 163, 125, 0.2)', 'rgba(42, 194, 222, 0.2)', 'rgba(252, 158, 23, 0.2)', 'rgba(248, 218, 15, 0.2)', 'rgba(166, 53, 53, 0.2)', 'rgba(248, 156, 0, 0.2)', 'rgba(160, 102, 2, 0.2)', 'rgba(24, 159, 90, 0.2)'];
|
var colorData2 = ['rgba(252, 158, 23, .6)', 'rgba(8, 246, 124, .6)', 'rgba(80, 163, 125, .6)', 'rgba(42, 194, 222, .6)', 'rgba(252, 158, 23, .6)', 'rgba(248, 218, 15, .6)', 'rgba(166, 53, 53, .6)', 'rgba(248, 156, 0, .6)', 'rgba(160, 102, 2, .6)', 'rgba(24, 159, 90, .6)'];
|
if(dataArr.length > 0 ){
|
var legendData = [], seriesData = [], unitData = [];
|
var selected = {};
|
for(var i=0, len = dataArr.length; i<len; i++){
|
legendData.push(dataArr[i].name);
|
unitData.push({"name":dataArr[i].name, "unit":dataArr[i].unit});
|
var hosData = [], time = [];
|
for(var j=0, le = dataArr[i].valueDataList.length; j<le; j++){
|
hosData.push(parseFloat(dataArr[i].valueDataList[j].value).toFixed(2));
|
time.push((dataArr[i].valueDataList[j].startTime).substring(0, 16));
|
}
|
seriesData.push({
|
name:dataArr[i].name,
|
type: 'line',
|
showSymbol:false,
|
symbol:'circle',
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0.6,
|
color: colorData1[i]
|
}, {
|
offset: 1,
|
color: colorData2[i]
|
}], false),
|
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
shadowBlur: 10
|
}
|
},
|
data:hosData
|
});
|
if(i == 0){
|
selected[dataArr[i].name] = true;
|
}else{
|
selected[dataArr[i].name] = false;
|
}
|
|
}
|
historyEchart(qeryEchart, time, legendData, seriesData, selected, 2, unitData);
|
}else{
|
$('.history-query .histor-tip').show();
|
}
|
}
|
|
function historyEchart(waterHistory, time, legendData, seriesData, selected, num, unitData){
|
var colorData = ['#FC9E17', '#08f67c', '#50a37d', '#2ac2de', '#FC9E17', '#f8da0f', '#a63535', '#f89c00', '#a06602', '#189f5a'];
|
var topVal = "0";
|
var dataZooms = [];
|
if(num == 2){
|
topVal = "20";
|
dataZooms = [{
|
type: 'inside',
|
start: 0,
|
end: 100
|
}, {
|
start: 0,
|
end: 10,
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
bottom:'35',
|
height:8,
|
handleColor: '#ff8c80',
|
handleStyle: {
|
borderColor: '#ff8c80',
|
borderWidth: "1",
|
shadowBlur: 0,
|
background: '#ff8c80',
|
shadowColor: '#ff8c80',
|
},
|
}];
|
}
|
var waterOption = {
|
color:colorData,
|
tooltip : {
|
trigger: 'axis',
|
formatter:function(params){
|
var html = '<div>'+params[0].name+'<div>';
|
var unit = ""
|
for(var i=0; i<params.length; i++){
|
unit = "";
|
for(var j=0; j<unitData.length; j++){
|
if(unitData[j].name == params[i].seriesName){
|
if(unitData[j].unit != "无"){
|
unit = unitData[j].unit;
|
}
|
}
|
}
|
html +='<div>'+params[i].marker+params[i].seriesName+'：'+params[i].value+ unit+'</div>'
|
}
|
return html;
|
},
|
},
|
legend: {
|
type:'scroll',
|
orient: 'horizontal',
|
data:legendData,
|
selected:selected,
|
textStyle : {color:'#fff'},
|
pageTextStyle:{color:'#fff'},
|
pageIconColor:'#fff',
|
pageIconInactiveColor:'#fff',
|
top:topVal
|
},
|
grid: {
|
left: '12',
|
right: '4%',
|
bottom: '1%',
|
top:'15%',
|
containLabel: true
|
},
|
dataZoom: dataZooms,
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
nameTextStyle:{color:'#fff'},
|
axisLine:{
|
lineStyle:{
|
color:"#fff"
|
}
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#fff'
|
}
|
},
|
data:time.map(function(str) {
|
return str.replace(' ', '\n')
|
})
|
},
|
yAxis: {
|
name: '',
|
max:null,
|
min:null,
|
type: 'value',
|
axisLine:{
|
lineStyle:{
|
color:"#fff"
|
}
|
},
|
axisTick:{
|
show:false
|
},
|
axisLabel: {
|
margin: 10,
|
textStyle: {
|
fontSize: 12,
|
color: '#fff'
|
}
|
},
|
splitLine:{
|
lineStyle:{color:'#fff'},
|
show:false
|
},
|
},
|
series: seriesData
|
};
|
waterHistory.setOption(waterOption);
|
var selecd = waterHistory.getOption().legend[0].selected;
|
for(var k in selecd){
|
if(k == "酸碱度" && selecd[k] == true){
|
waterHistory.setOption({
|
yAxis: {
|
max:14,
|
min:0
|
}
|
});
|
}
|
}
|
waterHistory.off();
|
waterHistory.on('legendselectchanged', function(obj) {
|
if(obj.name == "酸碱度"){
|
waterHistory.setOption({
|
yAxis: {
|
max:14,
|
min:0
|
}
|
});
|
}else{
|
waterHistory.setOption({
|
yAxis: {
|
max:null,
|
min:null
|
}
|
});
|
}
|
});
|
$(window).resize(waterHistory.resize);
|
}
|
|
//******************** 历史数据 ----- 查询 *******************
|
$("#hisToryQueryBtn").unbind().click(function(){
|
historyMoreQuery();
|
});
|
|
$("#hisToryClearBtn").unbind().click(function(){
|
var historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart'));
|
$("#stationInput").val("");
|
$("#querySelects1").find("option").each(function(){
|
$(this).removeAttr("selected");
|
if($(this).val() == ""){
|
$(this).attr("selected","selected");
|
findStnm("");
|
}
|
})
|
layui.use('form', function(){ //监听站点选中事件 动态更新站点
|
var form = layui.form;
|
form.render();
|
});
|
$(".history-query-date span").removeClass('on').eq(0).addClass('on');
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = nowtime.getFullYear()+'-'+p(nowtime.getMonth()+1)+"-"+p(nowtime.getDate())+" 00:00:00";
|
$("#historyStratTime").val(starttime);
|
$("#historyEndTime").val(endtime);
|
var values = $("#actualInput").val();
|
historyQueryEchart.dispose(); //销毁图表
|
$(window).off('resize'); //移除已销毁图表的resize事件
|
historyQueryEchart = echarts.init(document.getElementById('historyQueryEchart')); //初始化图表
|
historyMoreQuery();
|
});
|
|
$("#hisToryDownLoadBtn").unbind().click(function(){
|
for(var i in arr){
|
if(arr[i]['stnm'] == $("#searchScName").val()){
|
var stcd = arr[i]['stcd'];
|
}
|
}
|
if($('.history-query-title h3').html() == '水文与水环境历史数据'){
|
var type = 'T_DATA_WATER';
|
}else if($('.history-query-title h3').html() == '空气环境历史数据'){
|
var type = 'T_DATA_AIR';
|
}else if($('.history-query-title h3').html() == '气象历史数据'){
|
var type = 'T_DATA_WEATHER';
|
}else if($('.history-query-title h3').html() == '土壤历史数据'){
|
var type = 'T_DATA_SOIL';
|
}
|
var nowtime = new Date();
|
var endtime = times(nowtime);
|
var starttime = $('#historyStratTime').val();
|
if(starttime.length<19){
|
starttime += " 00:00:00";
|
}
|
$.ajax({
|
url:getNativePath() + "naturalFactors/booleanExcelExportElements.do?stcd=" + stcd + "&startTime=" + starttime + "&endTime=" + endtime + "&eleType=" + type + "&title=" + encodeURI($('.history-query-title h3').html(), "UTF-8") + "",
|
success:function(res){
|
if(res && res.success){
|
window.open(getNativePath() + "naturalFactors/excelExportElements.do?stcd=" + stcd + "&startTime=" + starttime + "&endTime=" + endtime + "&eleType=" + type + "&title=" + encodeURI($('.history-query-title h3').html(), "UTF-8") + "");
|
}else{
|
layer.msg('暂无数据,无法下载！');
|
}
|
}
|
});
|
})
|
|
$(".history-query-date span").unbind().click(function(){
|
var type = $(this).attr("data-txt");
|
var strTime = "", endTime = "";
|
$(this).addClass('on').siblings().removeClass('on');
|
if(type == "day"){
|
strTime = getToday("s", 0);
|
endTime = getToday("e", 0);
|
}else if(type == "week"){
|
strTime = getMonday("s", 0);
|
endTime = getToday("e", 0).substr(0,10);
|
}else if(type == "month"){
|
strTime = getMonth("s", 0);
|
endTime = getToday("e", 0).substr(0,10);
|
}
|
$("#historyStratTime").val(strTime);
|
$("#historyEndTime").val(endTime);
|
historyMoreQuery();
|
});
|
|
|
function max(arr){
|
var num = arr[0];
|
for(var i=0;i<arr.length; i++){
|
if(num < arr[i]){
|
num = arr[i]
|
}
|
}
|
return num;
|
}
|
|
function p(s) {return s < 10 ? '0' + s: s;}
|
|
function times(timeData){
|
return timeData.getFullYear()+'-'+p(timeData.getMonth()+1)+"-"+p(timeData.getDate())+" "+p(timeData.getHours())+":"+p(timeData.getMinutes())+":"+p(timeData.getSeconds());
|
|
}
|
|
//******************** 实现日期选择联动 *******************
|
var start = {
|
format: 'YYYY-MM-DD hh:mm:ss',
|
minDate: '1900-01-01 00:00:00', //设定最小日期为当前日期
|
maxDate: $.nowDate({
|
DD: 0
|
}), //最大日期
|
choosefun: function(elem, datas) {
|
end.minDate = datas; //开始日选好后，重置结束日的最小日期
|
endDates();
|
},
|
okfun: function(elem, datas) {}
|
};
|
var end = {
|
format: 'YYYY-MM-DD hh:mm:ss',
|
minDate: '1900-01-01 00:00:00',
|
maxDate: '4099-06-16 00:00:00',
|
choosefun: function(elem, datas) {
|
start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
|
}
|
};
|
|
function endDates() {
|
end.trigger = false;
|
$("#historyEndTime").jeDate(end);
|
}
|
$("#historyStratTime").jeDate(start);
|
$("#historyEndTime").jeDate(end);
|
|
//******************** 水文 -- 温度计 *******************
|
function wdj(actualTime, listData, actualImgParam){
|
var TP_value = parseFloat(parseFloat(listData.value).toFixed(2));
|
var kd = [];
|
var Gradient = [];
|
// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
|
for(var i = 0, len = 95; i <= len; i++) {
|
if(i < 10 || i > 90) {
|
kd.push('')
|
} else {
|
if((i - 10) % 20 === 0) {
|
kd.push('-3');
|
} else if((i - 10) % 4 === 0) {
|
kd.push('-1');
|
} else {
|
kd.push('');
|
}
|
}
|
}
|
|
//中间线的渐变色和文本内容
|
if(TP_value > 20) {
|
Gradient.push({
|
offset: 0,
|
color: '#93FE94'
|
}, {
|
offset: 0.5,
|
color: '#E4D225'
|
}, {
|
offset: 1,
|
color: '#E01F28'
|
})
|
} else if(TP_value > -20) {
|
Gradient.push({
|
offset: 0,
|
color: '#93FE94'
|
}, {
|
offset: 1,
|
color: '#E4D225'
|
})
|
} else {
|
Gradient.push({
|
offset: 1,
|
color: '#93FE94'
|
})
|
}
|
// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
|
var option = {
|
title: {
|
show:false,
|
text: '水温',
|
left:'60%',
|
y:'center',
|
textStyle:{
|
color:'#fff',
|
fontSize:14,
|
align:'center'
|
}
|
},
|
grid: {
|
left:'43%',
|
right: '0%',
|
bottom: '40',
|
top:'2%',
|
},
|
yAxis: [{
|
show: false,
|
data: [],
|
min: 0,
|
max: 95,
|
axisLine: {
|
show: false
|
}
|
},{
|
type: 'category',
|
data: ['', '', '', '', '', '', '', '', '', '','', '', '°C'],
|
position: 'left',
|
offset: -60,
|
axisLabel: {
|
fontSize: 10,
|
color: 'white'
|
},
|
axisLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
}],
|
xAxis: [{
|
show: false,
|
min: -10,
|
max: 80,
|
data: []
|
}, {
|
show: false,
|
min: -10,
|
max: 80,
|
data: []
|
}, {
|
show: false,
|
min: -10,
|
max: 80,
|
data: []
|
}, {
|
show: false,
|
min: -5,
|
max: 80,
|
|
}],
|
series: [{
|
name: '条',
|
type: 'bar', // 对应上面XAxis的第一个对)象配置
|
xAxisIndex: 0,
|
data: [{
|
value: (TP_value + 20),
|
label: {
|
normal: {
|
show: true,
|
position: [15, 10],
|
width: 100,
|
height: 100,
|
formatter: '{wen|水温}\n{back| ' + TP_value + ' }{unit|°C}',
|
rich: {
|
wen:{
|
fontSize: 14,
|
lineHeight: 20,
|
color: "#fff",
|
align: 'center',
|
},
|
back: {
|
align: 'center',
|
lineHeight: 25,
|
fontSize: 14,
|
fontFamily: 'digifacewide',
|
color: "#fff"
|
},
|
unit: {
|
fontFamily: '微软雅黑',
|
fontSize: 12,
|
lineHeight: 25,
|
color: "#fff"
|
}
|
}
|
}
|
}
|
}],
|
|
barWidth: 10,
|
itemStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
|
}
|
},
|
z: 2
|
}, {
|
name: '白框',
|
type: 'bar',
|
xAxisIndex: 1,
|
barGap: '-100%',
|
data: [94],
|
barWidth: 18,
|
itemStyle: {
|
normal: {
|
color: '#3b5272',
|
barBorderRadius: 50,
|
}
|
},
|
z: 1
|
}, {
|
name: '外框',
|
type: 'bar',
|
xAxisIndex: 2,
|
barGap: '-100%',
|
data: [95],
|
barWidth: 23,
|
itemStyle: {
|
normal: {
|
color: '#7da3d6',
|
barBorderRadius: 50,
|
}
|
},
|
z: 0
|
}, {
|
name: '圆',
|
type: 'scatter',
|
hoverAnimation: false,
|
data: [0],
|
xAxisIndex: 0,
|
symbolSize: 30,
|
itemStyle: {
|
normal: {
|
color: '#93FE94',
|
opacity: 1,
|
}
|
},
|
z: 2
|
}, {
|
name: '白圆',
|
type: 'scatter',
|
hoverAnimation: false,
|
data: [0],
|
xAxisIndex: 1,
|
symbolSize: 40,
|
itemStyle: {
|
normal: {
|
color: '#3b5272',
|
opacity: 1,
|
}
|
},
|
z: 1
|
}, {
|
name: '外圆',
|
type: 'scatter',
|
hoverAnimation: false,
|
data: [0],
|
xAxisIndex: 2,
|
symbolSize: 46,
|
itemStyle: {
|
normal: {
|
color: '#7da3d6',
|
opacity: 1,
|
}
|
},
|
z: 0
|
}, {
|
name: '刻度',
|
type: 'bar',
|
yAxisIndex: 0,
|
xAxisIndex: 3,
|
label: {
|
normal: {
|
show: true,
|
position: 'left',
|
distance: 10,
|
color: 'white',
|
fontSize: 14,
|
formatter: function(params) {
|
if(params.dataIndex > 130 || params.dataIndex < 10) {
|
return '';
|
} else {
|
if((params.dataIndex - 10) % 10 === 0) {
|
return params.dataIndex - 20;
|
} else {
|
return '';
|
}
|
}
|
}
|
}
|
},
|
barGap: '-100%',
|
data: kd,
|
barWidth: 1,
|
itemStyle: {
|
normal: {
|
color: 'white',
|
barBorderRadius: 120,
|
}
|
},
|
z: 0
|
}]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
actualTime.setOption(option);
|
$(window).resize(actualTime.resize);
|
}
|
|
});
|
