<template>
<div>
<h2 style="float: right">
<a-icon type="user" style=""/>{{ username }}
</h2>
<div>
<a-row :gutter="24">
<a-col :md="12" :lg="12">
<h3>心率</h3>
<span>{{ xinludata }}</span>
<div id="myChart" class="notfound"></div>
<h3>力竭状态</h3>
<span>{{status}}</span>
<div class="progress">
<div class="progress-bar progress-bar-success" :style="{ widthData + '%'}">
<span class="sr-only">{{widthData}}%</span>
</div>
</div>
</a-col>
<a-col :md="12" :lg="12">
<span>{{ peisudata }}</span>
<div id="myChart1" class="notfound"></div>
</a-col>
</a-row>
</div>
<a-row>
<a-col span="10">
<a-button @click="handleGoBack">返回</a-button>
</a-col>
</a-row>
</div>
</template>
<script src="https://unpkg.com/viser-vue/umd/viser-vue.min.js"></script>
<script>
import moment from 'moment'
import { STable } from '@/components'
import { getRoleList } from '@/api/manage'
import { getTrainingRecordPrecise } from '@/api/training'
export default {
name: 'TrainingStatus',
components: {
STable,
},
data() {
return {
dateList: [],
valueList: [],
peopleparameterdata: [],//原生跑后台数据
sourceData2:[], //原生化跑整理数据
keydata:[],
widthData: 0,//力竭状态数据
status: '',
xinludata: '',
peisudata: '',
username: '' // 队员名字
}
},
props: ['record'],
created () {
// console.log('record是个啥：' + JSON.stringify(this.record))
const getparam = {
course_training_id: this.record.course_training_id,
kind: 1
}
getRoleList({ t: new Date() })
// console.log('向后台传递的参数' + JSON.stringify(getparam))
getTrainingRecordPrecise(getparam).then(res => {
// console.log('返回的状态数据' + JSON.stringify(res))
this.username = res.data[0].name
if (res.data[0].status == 0) {
this.status = '暂无状态数据！'
} else {
this.widthData = res.data[0].status
}
if (res.data[0].heart_rate.xaxis.length !== 0) {
// this.trainingdata = res.data[0].heart_rate
this.dateList = res.data[0].heart_rate.xaxis
this.valueList = res.data[0].heart_rate.data
this.drawLine()
} else {
this.xinludata = '暂无心率数据'
}
if (res.data[0].pace.length !== 0) {
console.log('原生跑数据' + JSON.stringify(res.data[0].pace))
this.peopleparameterdata = res.data[0].pace
for (var j = 0; j < this.peopleparameterdata.length; j++) {
var key1 = j + 1;
this.keydata[j] = key1
// console.log('没变化之前的数据' + this.peopleparameterdata[j])
let value4 = this.peopleparameterdata[j].replace(/(w*)分(.*)秒/g, '$1:$2')
let value2 = value4.split(':');
// 这里可以换成以分钟为单位--
// var hs = parseInt(value2[0] * 60);
let ms = parseInt(value2[0] * 1);
let ss = (value2[1] * 0.01);
/*var hs = parseInt(value2[0] * 3600);
var ms = parseInt(value2[1] * 60);
var ss = parseInt(value2[2]);*/
var value3 = ms + ss;
this.sourceData2[j] = value3
}
console.log('原生跑配速key值' + this.keydata)
console.log('原生跑配速' + this.sourceData2)
this.drawLine1()
} else {
console.log('暂无配速数据')
this.peisudata = '暂无配速数据'
this.widthData = res.data[0].status
}
})
},
mounted(){
// this.drawLine();
},
methods: {
moment,
drawLine(){
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
// Make gradient line here
backgroundColor: ['#081944'], // 全图默认背景
grid: [{
show: false,
borderWidth: 1,
}],
visualMap: [{
show: false, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
type: 'continuous', // 定义为连续型 visualMap
seriesIndex: 0, // 指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列
min: 0, // 指定 visualMapPiecewise 组件的最小值。
max: 400
}],
// 提示框组件
tooltip: {
trigger: 'axis' // 触发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用/none什么都不触发
},
xAxis: [{
data: this.dateList,
show: true //是否显示x轴
}],
yAxis: [{
nameTextStyle: { // 坐标轴名称的文字样式。
color: '#63B8FF',
fontWeight:'bold', // 坐标轴名称文字字体的粗细
fontSize: 15
},
name: '心率次数/bmp',
splitLine: {
show: true, // x轴、y轴显示网格线,坐标轴在 grid 区域中的分隔线
lineStyle:{
// 使用深浅的间隔色--分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
color: ['#4F5258', '#30394F']
}
}
}],
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [{
type: 'line', // 线条
showSymbol: false, // 是否显示 symbol符号, 如果 false 则只有在 tooltip hover 的时候显示。
data: this.valueList,
lineStyle: {color: '#BA3945'}, // 线条样式
markPoint: { // 图表标注
data: [
{
type: 'max',
name: '最高心率',
label: {
formatter: "{c}"+"/bmp",
color: '#CCCCCC',
show: true,
offset: [-5,-10] // 是否对文字进行偏移。默认不偏移
},
symbolSize: [1, 1]
},
{
type: 'min',
name: '最小心率',
label: {
formatter: "{c}"+"/bmp",
color: '#CCCCCC',
show: true,
position: 'bottom',
offset: [-5,5] // 是否对文字进行偏移。默认不偏移
},
symbolSize: [1, 1] // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
}
],
label: { // 标注的文本
show: true
},
itemStyle: {
color: '#081944', // 图形的颜色--设置这个是为了隐藏掉图标
opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
}
}
}]
});
},
drawLine1(){
let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart1.setOption({
color: ['#3398DB'], // 柱状条颜色默认色板
tooltip : { // 提示框
trigger: 'axis', // 触发类型'axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // 区域是否包含坐标轴的刻度标签。
},
xAxis : [
{
type : 'value', // 数值轴，适用于连续数据
show: false //是否显示x轴
}
],
yAxis : [
{
type : 'category', // 坐标轴类型- 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
data : ['1', '2', '3', '4', '5'],
axisTick: { // 坐标轴刻度相关设置-
alignWithLabel: true // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
},
nameTextStyle: { // 坐标轴名称的文字样式。
color: '#63B8FF',
fontWeight:'bold', // 坐标轴名称文字字体的粗细
fontSize: 15
},
name: '配速/分钟',
axisTick: {
show: false
},
axisLine: {
show: false // 是否显示坐标轴轴线。
}
}
],
series : [
{
name:'配速时长',
type:'bar', // 柱状/条形图
barMaxWidth: '50%', // 柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比
data:[200, 334, 390, 330, 220],
label:{ // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
normal: {
formatter: "{c}"+"/分钟",
show: true,
position: 'insideLeft',
offset: [20,0] // 是否对文字进行偏移。默认不偏移
}
},
markPoint: { // 图表标注
data: [
{
type: 'max',
name: '最慢',
label: {
formatter: "{b}", // {b}：数据名
// color: '#CCCCCC',
show: true,
offset: [15,0]
},
symbolSize: [1, 1]
},
{
type: 'min',
name: '最快',
label: {
formatter: "最快" ,// {c}：数据值
// color: '#CCCCCC',
show: true,
offset: [15,0]
//position: 'bottom',
},
symbolSize: [1, 1] // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
}
],
// symbol: 'none', // 标记的图形。circle-圆形,rect-方形
label: { // 标注的文本
show: true
},
itemStyle: {
color: '#081944', // 图形的颜色--设置这个是为了隐藏掉图标
opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
}
}
}
]
})
},
handleGoBack () {
this.$emit('onGoBack')
},
getFormatDate (times) {
var nowDate = new Date(times);
var year = nowDate.getFullYear();
var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
var hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
var minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
var second = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
//return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
return hour + ":" + minute +":" + second;
}
}
}
</script>
<style lang="less" scoped>
.notfound{
height: 400px;
}
.progress{
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
height: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-bar{
background-color: #337ab7;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
color: #fff;
float: left;
font-size: 12px;
height: 100%;
line-height: 20px;
text-align: center;
transition: width 0.6s ease 0s;
0;
}
.progress-bar-success{
background:linear-gradient(to right,#76EE00,#CD0000);
}
</style>