<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/Utils.js" ></script>
</head>
<style type="text/css">
/*.mui-bar{ position: inherit;
z-index: 10;
right: 0;
left: 0;
height:139px !important;
}*/
.bg-color{
background-color:#24C789;
/*height:139px;*/
}
.bg-color a,.bg-color h1{color:#FFFFFF;}
/*.headbox1{
overflow: hidden;
}*/
.headbox{
width:100%;
/*padding-top: 0px;*/
overflow:hidden;
background-color:#24C789;
}
.headbox2,.headbox3{
float: left;
width:49%;
text-align: center;
}
.suline{
float:left;
height:50px;
margin-left:5px;
margin-top: 5px;
border:1px solid #FFFFFF ;
opacity:0.5;
}
.headbox2 span,.headbox3 span{
color:#FFFFFF;
}
.headbox2 h4,.headbox3 h4{
font-size: 32px; color:#FFFFFF;
}
.headbox3 h4 span{
font-size: 15px;
}
.mui-content{
margin-top:0px;
}
.chart {
height: 195px;
margin-left: -170px;
padding: 0px;
}
.chart2 {
width: 100%;
height: 195px;
margin-left: 0px;
padding: 0px;
}
.bodybox1{
width:100%;
height:195px;
background-color:#fff;
/*border:1px solid red ;*/
}
.bodybox2,.bodybox2,.bodybox3{
margin-top:10px;
height: 195px;
background-color:#fff;
/*border:1px solid red;*/
}
.bodybox2-in{width:100%;padding: 20px 0px;}
.bodybox2-1{
float: left;
width:33.33%;
background-color:#fff;
/*border: gray solid 1px;*/
}
.bodybox2-1-1,.bodybox2-1-2,.bodybox2-1-3,.bodybox2-1-4{
text-align: center;
height:88px;
}
.bodybox2-1-M{
text-align: center;
height:176px;
}
.bodybox2-1-M .bodybox2-1-I{
width:128px;
height:128px;
line-height: 160px;
}
.bodybox3{
padding-top: 24px;
height:130px;
background-color:#fff;
}
.bodybox3-1,.bodybox3-2,.bodybox3-3{
float: left;
width:33.33%;
text-align: center;
}
.bodybox3-span{
display: inline-block;
width:50px;
height:15px;
line-height: 15px;
font-size: 10px;
border: 1px solid #999999;
border-radius:8px;
}
/*#imgfenxiang{
width:40px;
height:40px;
}*/
/*#imgfenxiang{
width:"35%";
height:50px;
}*/
</style>
<body>
<!--<header class="mui-bar mui-bar-nav bg-color">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">运动中</h1>
<a class="mui-pull-right"><img id="imgfenxiang" src="img/sportDetail/分享.png"/></a>
</header>-->
<!--<div class="mui-content">-->
<!--</div>-->
<script src="js/mui.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script type="text/javascript">
var url = "http://192.168.10.15:8083/motion/motionTimeSlotData/1854";
mui.init();
var motionData ={};
var map = {};
mui.ajax(url,{
data:{
"userId": 432,
"interfaceId": 0
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data)
{
// debugger;
//服务器返回响应,根据响应结果,分析是否登录成功;
console.log(JSON.stringify(data));
motionData = JSON.parse(JSON.stringify(data.obj.list[0]));
document.getElementById('dayTotalExerciseTime').innerHTML = sec_to_time(parseInt(motionData.dayTotalExerciseTime)*60);
document.getElementById('dayConsume').innerHTML = motionData.dayConsume+"<span>大卡</span>";
document.getElementById('totalExerciseTime').innerHTML =sec_to_time(parseInt( motionData.totalExerciseTime)*60);
document.getElementById('powerGeneration').innerHTML = motionData.powerGeneration+"<span>千焦</span>";
document.getElementById('meanHeartRateStrength').innerHTML = motionData.meanHeartRateStrength+"<span>次/秒</span>";
document.getElementById('consume').innerHTML = motionData.consume+"<span>大卡</span>";
document.getElementById('distance').innerHTML = motionData.distance+"<span>千米</span>";
document.getElementById('imgUrl').src=motionData.imgUrl;
document.getElementById('equipmentName').innerHTML = motionData.equipmentName;
if(parseInt(motionData.motionState) == 0){
document.getElementById('motionState').innerHTML ="未完成";
}else if(parseInt(motionData.motionState) == 1){
document.getElementById('motionState').innerHTML ="进行中";
}else{
document.getElementById('motionState').innerHTML ="已完成";
}
// debugger;
map={
"极限运动":motionData.maximalExercise+"min",
"无氧运动":motionData.anaerobicExercise+"min",
"有氧运动":motionData.aerobicExercise+"min",
"燃脂运动":motionData.fatMovement+"min",
"热身运动":motionData.warmup+"min"
};
// echarts.init(document.getElementById("pieChart")).showLoading();
var formatterB = "{b|"+motionData.consume+"}";
echarts.init(document.getElementById("pieChart")).setOption({
tooltip: {//提示框浮层
showContent:false,//showContent
trigger: 'item',//无类目轴的图表使用item,有类目轴使用axis触发,none表示不触发提示框
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
toolbox:{
feature:{
readOnly:true
}
},
legend: {
formatter: function (name) {
// debugger;
var retunName =name+' '+' '+' '+' '+' '+' '+map[name];
return retunName;//5min为后台返回数据
},
selectedMode:false,//控制是否可以通过点击图例改变系列的显示状态
orient: 'vertical',
left:370,
y:'center',
data:[
{name:'极限运动',icon:'image://img/sportDetail/Ellipse 10.png'},
{name:'无氧运动',icon:'image://img/sportDetail/Ellipse 10 copy.png'},
{name:'有氧运动',icon:'image://img/sportDetail/Ellipse 10 copy 2.png'},
{name:'燃脂运动',icon:'image://img/sportDetail/Ellipse 10 copy 3.png'},
{name:'热身运动',icon:'image://img/sportDetail/Ellipse 10 copy 4.png'}
]
},
color:['#F16565','#FFED77','#36D7B7','#3558DA','#868A8E'],
series: [
{
hoverAnimation:false,//是否开启 hover 在扇区上的放大动画效果。
name:'运动数据',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap:false,//是否启用防止标签重叠策略, 这里把标签放在中心 必须重叠
label: {
normal: {
show: true,//是否显示圆环里面的内容
// formatter:'运动数据\n999',//圆环里面的内容(支持换行)
formatter: [
'{a|运动点数}',
formatterB
].join('\n'),
rich: {
a: {
fontSize:10
},
b: {
fontSize:18,
fontWeight:'bolder',
height: 20
}
},
lineHeight: 20,
color:'#999999',
fontWeight:'bold',
position: 'center'
},
emphasis: {
show: false,//点击相关区域是否显示在圆环里面显示内容
textStyle: {
fontSize: '16',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show:false
}
},
data:[
{value:motionData.maximalExercise, name:'极限运动'},
{value:motionData.anaerobicExercise, name:'无氧运动'},
{value:motionData.aerobicExercise, name:'有氧运动'},
{value:motionData.fatMovement, name:'燃脂运动'},
{value:motionData.warmup, name:'热身运动'}
]
}
]
});
var arr=[];
function getXData(value){
//motionData.heartRate.length
if(value <= 30){
for (var i = 0;i<=30;i++) {
arr.push(i);
}
}
else{
for (var i = 0;i<=value;i++) {
arr.push(i);
}
}
return arr;
}
// echarts.init(document.getElementById("pieChart")).hideLoading();
echarts.init(document.getElementById("pieChart2")).setOption({
toolbox:{
show: false,
feature:
{
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable : false,
// dataZoom: [//给x轴设置滚动条
// //下面这个属性是里面拖到 inside
// {
// type: 'inside',
// filterMode:'empty',
// show: true,
// xAxisIndex: [0],
// start: 0,//默认为1
// end: motionData.heartRate.length+1
// },
// ],
xAxis:
[
{
name:'min',
splitLine:{show: false},
// splitArea : {show : true},//保留网格区域
type: 'category',
// gridIndex:0,
// min:2,
boundaryGap:true,
// axisLine:
// {
// symbol:['none', 'arrow'],
// symbolSize:[8,10]
// },
axisTick:
{
alignWithLabel:true
},
// axisLabel:
// {
interval: getaside(1,100)
// interval: 4
// },
data:getXData(motionData.heartRate.length)
}
],
yAxis:
[
{
splitLine:
{
show: false
},
type: 'value',
scale: true,
name: '心率强度',
max: 120,
axisLabel :
{
formatter: function(value)
{
return value+'%';
}
},
splitArea : {show : true}
}
],
series:
[
{
name: 'test',
type: 'bar',
itemStyle:
{
normal:
{
color: function(params)
{
var colorList = [
'#F16565','#FFED77','#36D7B7','#3558DA','#868A8E'
];
if(0<=params.data && params.data<=20){
return colorList[0]
} if(20<params.data && params.data<=40){
return colorList[1]
} if(40<params.data && params.data<=60){
return colorList[2]
}
if(60<params.data && params.data<=80){
return colorList[3]
}
else{
return colorList[4]
}
},
//以下为是否显示,显示位置和显示格式的设置了
label: {
show: false,
position: 'top',
// formatter: '{c}'
formatter: '{b}\n{c}'
}
}
},
data: motionData.heartRate
}
]
});
echarts.init(document.getElementById("pieChart")).hideLoading();
},
error:function(xhr,type,errorThrown)
{
//异常处理;
debugger;
console.log(type);
}
});
</script>
<div class="headbox">
<div class="headbox2">
<span>总时间</span>
<h4 id="dayTotalExerciseTime"></h4>
</div>
<div class="suline"></div>
<div class="headbox3">
<span>总卡路里</span>
<h4 id="dayConsume"></h4>
</div>
</div>
<!--<a href="test.html">ssssss</a>-->
<div class="bodybox1">
<div class="mui-slider" style="height: 200px;">
<div class="mui-slider-group">
<div class="mui-slider-item"><div class="chart" id="pieChart"></div> </div>
<div class="mui-slider-item"><div class="chart2" id="pieChart2"></div> </div>
</div>
</div>
</div>
<div class="bodybox2">
<div class="bodybox2-in">
<div class="bodybox2-1">
<div class="bodybox2-1-1">
<img src="img/sportDetail/时间 (2).png"/>
<h6 id="totalExerciseTime"><span></span></h6>
</div>
<div class="bodybox2-1-2">
<img src="img/sportDetail/矢量智能对象1.png"/>
<h6 id="powerGeneration"></h6>
</div>
</div>
<div class="bodybox2-1">
<div class="bodybox2-1-M">
<div class="bodybox2-1-I">
<img src="img/sportDetail/心率.png" />
</div>
<h6 id="meanHeartRateStrength"></h6>
</div>
</div>
<div class="bodybox2-1">
<div class="bodybox2-1-3">
<img src="img/sportDetail/矢量智能对象2.png"/>
<h6 id="consume"></h6>
</div>
<div class="bodybox2-1-4">
<img src="img/sportDetail/里程_f.png"/>
<h6 id="distance"></h6>
</div>
</div>
</div>
</div>
<div class="bodybox3">
<div class="bodybox3-1">
<img id="imgUrl" src="img/sportDetail/单车出租1.png"/>
<h6><span id="equipmentName"></span></h6>
<span class="bodybox3-span" id="motionState">进行中</span>
</div>
</div>
<script type="text/javascript">
document.getElementById('dayTotalExerciseTime').innerHTML = sec_to_time(parseInt(motionData.dayTotalExerciseTime)*60)
</script>
</body>
</html>