<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/chart.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title"></h1>
</header>
<div id="container" ></div><br />
<div class="canshu">
<div class="upperLimit">
<div class="upperLimit-text">上限:</div>
<div class="upperLimit-num"></div>
</div>
<div class="lowerLimit">
<div class="lowerLimit-text">下限:</div>
<div class="lowerLimit-num"></div>
</div>
<div class="current">
<div class="current-text">当前:</div>
<div class="current-num"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script type="text/javascript" src="js/ecStat.min.js"></script>
<script type="text/javascript" src="js/dataTool.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script type="text/javascript" src="js/api"></script>
<script type="text/javascript" src="js/bmap.min.js"></script>
<script type="text/javascript" src="js/simplex.js"></script>
<script type="text/javascript">
mui.plusReady(function(){
var waterId = plus.webview.currentWebview().waterId;
var paramId = plus.webview.currentWebview().paramId;
getInfo(waterId,paramId);
})
// getInfo(2,2);
function getInfo(waterId,paramId){
var wurl = 'http://www.lx0575.com/water/getInforByParam ';
var title = document.getElementsByClassName('mui-title');
var upperLimit = document.getElementsByClassName('upperLimit-num');
var lowerLimit = document.getElementsByClassName('lowerLimit-num');
var current = document.getElementsByClassName('current-num');
// console.log(title[0].innerHTML)
mui.ajax(wurl, {
data: {
watersId:waterId,
pasramId:paramId
},
dataType: 'json', //服务器返回json格式数据
type: 'GET', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒;
headers: {
//'Content-Type': 'application/json'
},
success: function(data) {
var items = data.items;
console.log(items)
var use = items[0].use; //水域名称
var seriesName = items[0].param; //坐标上的名称
var alarmMax = items[0].alarmMax; //报警最高值
var alarmMin = items[0].alarmMin; //报警最小值
var scopeMin = items[0].scopeMin; //纵坐标最小值
var scopeMax = items[0].scopeMax; //纵坐标最大值
var paramId = items[0].paramId; //参数id(温度:1,PH值:2,溶解氧:3,浊度:4)
var value = items[0].paramValue; //数值
var curvePoints = items[0].curvePoints; //一页显示多少个点
var unit = items[0].unit; //单位
title[0].innerHTML = use + seriesName + '详情';
upperLimit[0].innerHTML = alarmMax + unit;
lowerLimit[0].innerHTML = alarmMin + unit;
current[0].innerHTML = items[items.length - 1].paramValue + unit;
//横坐标数据处理(时间)
var xAxisData = [];
for(var i = 0 ; i < items.length ; i ++){
var gmtCreate = items[i].gmtCreate;
var time = gmtCreate.substr(0,16);
xAxisData.push(time)
}
//纵坐标数据处理
var yAxisData = [];
if(paramId == 1){
for(var i = 0 ; i <= 45 ; i += 5){
var obj = {};
obj.yAxis = i;
yAxisData.push(obj);
}
}else if(paramId == 2){
for(var i = 0 ; i <= 14 ; i ++){
var obj = {};
obj.yAxis = i;
yAxisData.push(obj);
}
}else if(paramId == 3){
for(var i = 0 ; i <= 20 ; i += 2){
var obj = {};
obj.yAxis = i;
yAxisData.push(obj);
}
}else if(paramId == 4){
for(var i = 0 ; i <= 4000 ; i += 400){
var obj = {};
obj.yAxis = i;
yAxisData.push(obj);
}
}
//具体数值处理
var paramValue = [];
for(var i = 0; i < items.length ; i ++){
paramValue.push(items[i].paramValue);
}
//报警颜色处理
var pieces = [];
var color = {};
color.gt = scopeMin;
color.lte = alarmMin;
color.color = 'red';
pieces.push(color);
var color = {};
color.gt = alarmMin;
color.lte = alarmMax;
color.color = 'green';
pieces.push(color);
var color = {};
color.gt = alarmMax;
color.lte = scopeMax;
color.color = 'red';
pieces.push(color);
//一页显示多少点
console.log(xAxisData.length)
if(curvePoints >= xAxisData.length){
startValue = xAxisData[0];
}else{
startValue = xAxisData[xAxisData.length - curvePoints];
}
console.log(startValue)
var info = {};
info.seriesName = seriesName;
info.xAxisData = xAxisData;
info.yAxisData = yAxisData;
info.paramValue = paramValue;
info.pieces = pieces;
info.startValue = startValue;
draw(info);
},
error: function(xhr, type, errorThrown) {
console.log(type);
},
complete:function(){
}
});
}
function draw(info){
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.setOption(option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: info.xAxisData
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: info.startValue
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: info.pieces,
outOfRange: {
color: '#999'
}
},
series: {
name: info.seriesName,
type: 'line',
// data: data.map(function(item) {
// return item[1];
// }),
data:info.paramValue,
markLine: {
silent: true,
data:info.yAxisData
}
}
});
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 水质监测管理系统APP源码.zip
资源推荐
资源详情
资源评论
收起资源包目录
水质监测管理系统APP源码.zip (55个子文件)
code_20105
image
login_bac.png 129KB
logo.png 15KB
index_border.png 6.3MB
echart_bac.jpg 21KB
index_bac.jpg 72KB
js
simplex.js 16KB
api 254B
ecStat.min.js 10KB
bmap.min.js 5KB
china.js 61KB
echarts.min.js 981KB
world.js 144KB
echarts-gl.min.js 657KB
mui.min.js 120KB
jquery.min.js 91KB
dataTool.min.js 4KB
manifest.json 15KB
chart.html 7KB
unpackage
.dependencies 4B
res
icons
48x48.png 5KB
100x100.png 19KB
96x96.png 17KB
180x180.png 56KB
58x58.png 7KB
50x50.png 5KB
87x87.png 14KB
72x72.png 10KB
152x152.png 41KB
76x76.png 11KB
40x40.png 3KB
114x114.png 24KB
256x256.png 106KB
80x80.png 12KB
144x144.png 37KB
192x192.png 63KB
57x57.png 7KB
120x120.png 26KB
29x29.png 2KB
release
H56521972_1119190440.apk 11MB
H56521972_1215215846.apk 11MB
H56521972_1101203821.apk 11MB
H56521972_1026202836.apk 10.98MB
.confirmed_dependencies 2KB
css
mui.min.css 75KB
chart.css 866B
login.css 2KB
waterDetail.css 2KB
index.css 2KB
login.html 3KB
index.html 4KB
sj.json 58B
.project 814B
waterDetail.html 4KB
mui.html 3KB
fonts
mui.ttf 29KB
共 55 条
- 1
资源评论
- XQL_24252024-04-11果断支持这个资源,资源解决了当前遇到的问题,给了新的灵感,感谢分享~
土豆片片
- 粉丝: 1575
- 资源: 5636
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功