<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="{width: 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;
width: 0;
}
.progress-bar-success{
background:linear-gradient(to right,#76EE00,#CD0000);
}
</style>