echart实现睡眠前台代码

zoukankan html css js c++ java

echart实现睡眠前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sleep.aspx.cs" Inherits="sleep" %>

<%@ Register Src="UC/UCAlert.ascx" TagName="UCAlert" TagPrefix="UCAlert" %>
<%@ Register Src="~/UC/UCFoot.ascx" TagName="UCFoot" TagPrefix="UCFoot" %>
<%@ Register Src="~/UC/UCScroll.ascx" TagName="UCScroll" TagPrefix="UCScroll" %>
<%@ Register Src="UC/UCCheck.ascx" TagName="UCCheck" TagPrefix="UCCheck" %>
<%@ Register Src="~/UC/UCVoice.ascx" TagName="UCVoice" TagPrefix="UCVoice" %>
<%@ Register Src="~/UC/UCVoiceButton.ascx" TagName="UCVoiceButton" TagPrefix="UCVoiceButton" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>睡眠</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/weui.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/alert.css">
<script src="js/adaptive.js"></script>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/date.js"></script>
<script src="js/alert.js"></script>
<script src="js/main.js"></script>
<script src="js/dropload.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
<script type="text/javascript" src="js/WXInterfaceHelper.js"></script>
</head>
<input type="hidden" id="vRole" value="<%=voiceRole %>" />
<input type="hidden" id="tRole" value="<%=TextRole %>" />
<input type="hidden" id="pRole" value="<%=PicRole %>" />
<script src="js/InitVoiceMsg.js" type="text/javascript"></script>
<body>
<form id="Form2" runat="server">
<UCAlert:UCAlert ID="UCAlert" runat="server" />
<UCCheck:UCCheck ID="UCCheck" runat="server" />
</form>
<div class="wrapper01">
<div class="m-date03">
<ul class="m-date-tab">
<li class="on" onclick="daystatic(1)">日</li>
<li onclick="daystatic(2)">周</li>
</ul>
</div>
<div class="m-center05">
<div class="m-chart01">
<div class="chart-con01">
<div class="m-date04">
<a href="javascript:;" class="today" onclick="today()">今天</a>
<input id="date" class="date01 date02" type="button">
<label for="date" class="date_icon">
</label>
<input type="hidden" id="device" value="<%=Request["deviceID"] %>" />
<input type="hidden" id="VoiceOneSecond" value="<%=VoiceOneSecond %>" />
<input type="hidden" id="Secs" value="<%=Secs %>" />
<input type="hidden" id="dType" value="6" />
<input type="hidden" id="timeslot" onclick="subDate()" value="<%=ProUtil.getTimeSlot(DateTime.Now.Hour/5) %>" />
</div>
<ul class="m-legend">
<li class="legend-con"><span class="legend-color01"></span>深睡 </li>
<li class="legend-con"><span class="legend-color02"></span>浅睡 </li>
<li class="legend-con"><span class="legend-color03"></span>清醒 </li>
</ul>
<div class="chart03" id="sleep-day">
</div>
<div class="m-report01">
<span class="report_tit01">运动检查报告单 </span>
<div class="report_txt_con">
<div class="report_txt">
<span id="span_deepTime">深睡： 0小时 </span>
</div>
<div class="report_txt">
<span id="span_ligthTime">浅睡： 0小时 </span><span id="span_wakeTime">清醒： 0小时 </span>
</div>
</div>
</div>
</div>
<div class="chart-con01">
<div class="m-date04">
<div class="date_slide02" id="slide_box02">
<input type="hidden" id="HBeginTime" value="<%=DateTime.Now.AddDays(-6).ToString("yyyy-MM-dd") %>" />
<input type="hidden" id="HEndTime" value="<%=DateTime.Now.ToString("yyyy-MM-dd") %>" />
<a href="javascript:Addday('prev');" class="prev">
<img src="images/prev_01.png">
</a>
<div class="m-scroll_list">
<ul>
<li id="li_time">
<%=DateTime.Now.AddDays(-6).ToString("yyyy-MM-dd") %>
~
<%=DateTime.Now.ToString("yyyy-MM-dd") %>
</li>
</ul>
</div>
<a href="javascript:Addday('next');" class="next">
<img src="images/next_01.png">
</a>
</div>
<script type="text/javascript">
function Addday(tag) {
var HBeginTime = $("#HBeginTime").val();
var HEndTime = $("#HEndTime").val();
var begintime1;
var endtime1;
if (tag == "prev") {
begintime1 = getAfterDate(HBeginTime, -6); //6天前的日期
endtime1 = getAfterDate(HEndTime, -6); //6天前的日期
}
else if (tag == "next") {
begintime1 = getAfterDate(HBeginTime, 6); //6天后的日期
endtime1 = getAfterDate(HEndTime, 6); //6天后的日期

}
$("#li_time").html("");
$("#li_time").html(begintime1 + "~" + endtime1);
$("#HBeginTime").val(begintime1);
$("#HEndTime").val(endtime1);
loadWeekData(begintime1, endtime1);
}
//计算N天后的时间
function getAfterDate(d, n) {
var test = ConvertgetDate(d);
var year = test.getFullYear();
var mon = test.getMonth() + 1;
var day = test.getDate();
if (day <= n) {
if (mon > 1) {
mon = mon - 1;
}
else {
year = year - 1;
mon = 12;
}
}
test.setDate(test.getDate() + n);
year = test.getFullYear();
mon = test.getMonth() + 1;
day = test.getDate();
s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s;
}
function ConvertgetDate(strDate) {
var date = eval('new Date(' + strDate.replace(/d+(?=-[^-]+$)/,
function (a) { return parseInt(a, 10) - 1; }).match(/d+/g) + ')');
return date;
}
</script>
</div>
<ul class="m-legend">
<li class="legend-con"><span class="legend-color01"></span>深睡 </li>
<li class="legend-con"><span class="legend-color02"></span>浅睡 </li>
<li class="legend-con"><span class="legend-color03"></span>清醒 </li>
</ul>
<div class="chart03" id="sleep-week">
</div>
</div>
</div>

<div class="m-sleep-tip">
<span class="report_tit01">睡眠小贴士 </span>
<div class="report_txt_con">
<div class="sleep-tip_txt">
<p>
1、睡眠不要太晚</p>
<p>
2、早睡有益身心健康</p>
<p>
3、睡前不要剧烈运动，营造良好睡眠环境</p>
</div>
</div>
</div>

<div class="m-message" id="message">
<ul class="lists">
</ul>
</div>
</div>

<%--update/2021/1/11--%>
<UCVoice:UCVoice ID="UCVoice" runat="server" />

<UCFoot:UCFoot ID="UCFoot" runat="server" />

<UCVoiceButton:UCVoiceButton ID="UCVoiceButton" runat="server" />

</div>
<script src="js/echarts-all.js"></script>
<script src="js/macarons.js"></script>
</body>
</html>
<script type="text/javascript">
//查找数组元素位置
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return i;
}
}
return -1;
}
var myChart = echarts.init(document.getElementById('sleep-day'), e_macarons)
var option = {
tooltip: { trigger: 'axis'
},
toolbox: {
show: false
},
grid: {
left: '5%',
right: '5%'
},
calculable: false,
xAxis: {
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize: 20,
interval: 0
}
},
yAxis: [{
type: 'value',
show: false
}]
};
$(document).on("click", ".picker-calendar-day", function () {
var date = $("#date").val();
subDate(date);
});
//提交睡眠请求
var subDate = function (currentTime) {
var id = $("#device").val();
// var date = $("#date").val();
var beginTime = currentTime ;
var endTime = currentTime;
var xaxis = new Array("23:00","00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00");

$.ajax({
type: "post",
dataType: 'json',
url: "/Handler/DeviceHandler.ashx",
data: { otype: "chart", chart: "sleep",sleepType:"day","device": id, "begintime": beginTime, "endtime": endTime },
success: function (result) {
if (result.statusCode == 10000) {
var res = JSON.parse(result.Data);
if (res.Return) {
var datas = new Array();
var legends = new Array();
for (var i = 0; i < res.Data.length; i++) {
var data = {
name: res.Data[i].name,
type: res.Data[i].type,
smooth: true,
data: res.Data[i].sleepdata,//睡眠数据
};
datas[i] = data;
};
xaxis=res.sleeptimes;
myChart.setOption(option);
myChart.setOption({ series: datas, xAxis: {data:xaxis} });
$("#span_deepTime").text("深睡： "+res.sleepDeep+"小时");
$("#span_ligthTime").text("浅睡： "+res.sleepLight+"小时");
$("#span_wakeTime").text("清醒： " + res.sleepWake+"小时");
} else {
$("#span_deepTime").text(" 深睡： 0 ");
$("#span_ligthTime").text("浅睡： 0");
$("#span_wakeTime").text("清醒：0");
myChart.setOption(option);
myChart.setOption({ series: [{
name: '睡眠质量',
type: 'bar',
barCategoryGap: "0%",
data: []
}], xAxis: {data:xaxis},
yAxis: [{
type: 'value',
// name: '心率(BMP)',
min: 0,
max: 8,
splitNumber: 10,
axisLabel: {
interval: 0
}
}]
});

}
}
else {
showTip(result.Message, 2000, function () { window.location.href ="index.aspx"});
}
}
});
}
var HEndTime=$("#HEndTime").val();
subDate(HEndTime);
</script>
<script type="text/javascript">
var option2 = {
xAxis: {
type: 'category',

axisLabel: {
fontSize: 20,
interval: 0
}
},
yAxis: {
type: 'value',
min: 0,
max: 12,
axisLabel: {
fontSize: 20,
formatter: '{value} h'
}
},
grid: {
left: '9%',
right: '5%'
}
};

var myChart2 = echarts.init(document.getElementById('sleep-week'), e_macarons)
var id = $("#device").val();

function daystatic(tagid) {
if (tagid == 2) {
loadWeekData($("#HBeginTime").val(), $("#HEndTime").val());
}
}

function loadWeekData(time1, time2) {
$.ajax({
type: "post",
dataType: 'json',
url: "/Handler/DeviceHandler.ashx",
data: { otype: "chart", chart: "sleep", sleepType: "week", device: id, "begintime": time1, "endtime": time2 },
success: function (result) {
if (result.statusCode == 10000) {
var res = JSON.parse(result.Data);
if (res.Return) {
var datas = new Array();
var legends = new Array();
var xaxis = new Array();
xaxis = res.listtime; //
myChart2.setOption(option2);
myChart2.setOption({ series: res.sleepweekDetail, xAxis: { data: xaxis} });
} else {
var xaxis2 = res.listtime; //
myChart2.setOption(option2);
myChart2.setOption({ series: res.sleepweekDetail, xAxis: { data: xaxis2} });

}
}
else {
showTip(result.Message, 2000, function () { window.location.href = "index.aspx" });
}
}
});

}

</script>
<script type="text/javascript">
$(function () {
InitVoiceMessage("yundong", '<%=deviceID %>'); //传2个参数:留言类型和设备ID
});
//公众号图片上传
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) != 'micromessenger') {
//H5浏览器';
//showTip("只能在微信中上传留言图片", 3000);
} else {
//是微信浏览器
$('#chat-tuxiang').attr('onclick', "avatarUpload('txtImg','yundong')");
}
</script>

查看全文

相关阅读:
pandas Dataframe filter
process xlsx with pandas
data manipulate in excel with easyExcel class
modify registry in user environment
add number line in vim
java import webservice
ctypes MessageBoxA
music 163 lyrics
【python实例】自动贩卖机
 【python基础】sys模块（库）方法汇总

原文地址：https://www.cnblogs.com/wugh8726254/p/14491542.html