tropsCode/src/views/analysis/components/runa.vue

<template>
  <div v-if="details._comments">
    <div class="column" v-if="details._comments.speed">
      <div class="column-title">速度曲线</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.speed">
          <div class="item-title">速度
            <i v-if="details._comments.speed.level == '0'" class="cha">差</i>
            <i v-if="details._comments.speed.level == '1'" class="liang">良</i>
            <i v-if="details._comments.speed.level == '2'" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <!--图表开始-->
              <div class="chartBox" id="speedChart"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                速度点评
              </div>
              <div class="item-con-li-con">
                <div v-html="details._comments.speed.comments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details._comments.stride">
      <div class="column-title">步幅曲线</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.stride">
          <div class="item-title">步幅
            <i v-if="details._comments.stride.level == '0'" class="cha">差</i>
            <i v-if="details._comments.stride.level == '1'" class="liang">良</i>
            <i v-if="details._comments.stride.level == '2'" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <!--图表开始-->
              <div class="chartBox" id="strideChart"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                步幅点评
              </div>
              <div class="item-con-li-con">
                <div v-html="details._comments.stride.comments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details._comments.steps">
      <div class="column-title">步频曲线</div>
      <div class="column-con">
        <div class="item" v-if="details._comments.steps">
          <div class="item-title">步频
            <i v-if="details._comments.steps.level == '0'" class="cha">差</i>
            <i v-if="details._comments.steps.level == '1'" class="liang">良</i>
            <i v-if="details._comments.steps.level == '2'" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <!--图表开始-->
              <div class="chartBox" id="stepsChart"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                步频点评
              </div>
              <div class="item-con-li-con">
                <div v-html="details._comments.steps.comments"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column" style="display: none;">
      <div class="column-title">示范视频</div>
      <div>
        <video src="" poster="" :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
const route = useRoute();

//父值
const props = defineProps({
  detailsData: {
    type: Object,
    default: {}
  },
});

const data = reactive<any>({
  details: {},
  query: {},
  typeList: [],
  speedList: [],
  strideList: [],
  stepsList: [],
  fullAvgRateList: [],
});
const { details, query, typeList, speedList, strideList, stepsList, fullAvgRateList } = toRefs(data);

//速度曲线
const speedChart = () => {
  let myChart = echarts.init(document.getElementById("speedChart"));
  let option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['每百米平均速度', '全程平均速度', '满分平均速度']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: typeList.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '每百米平均速度',
        type: 'line',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          color: "#e6fafa"
        },
        data: details.value.speed_distribution
      },
      {
        name: '全程平均速度',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: speedList.value
      },
      {
        name: '满分平均速度',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: fullAvgRateList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//步幅曲线
const strideChart = () => {
  let myChart = echarts.init(document.getElementById("strideChart"));
  let option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['每百米平均步幅', '全程平均步幅']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: typeList.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '每百米平均步幅',
        type: 'line',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          color: "#ffe6e0"
        },
        data: details.value.stride_distribution
      },
      {
        name: '全程平均步幅',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: strideList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//步频曲线
const stepsChart = () => {
  let myChart = echarts.init(document.getElementById("stepsChart"));
  let option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['每百米平均步频', '全程平均步频']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: typeList.value
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '每百米平均步频',
        type: 'line',
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          color: "#fff5e6"
        },
        data: details.value.steps_distribution
      },
      {
        name: '全程平均步频',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: stepsList.value
      },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

//初始化
const getInitialize = () => {
  let typeLists = [];
  let speedLists = [];
  let strideLists = [];
  let stepsLists = [];
  let fullAvgRateLists = [];
  let strideSum = details.value.stride_distribution.reduce((a:any, b:any) => {
    return a + b;
  }, 0);
  let stepsSum = details.value.steps_distribution.reduce((a:any, b:any) => {
    return a + b;
  }, 0);
  let num: any = null;
  if (query.value.exam_name == 'runa800') {
    num = 8
  }
  if (query.value.exam_name == 'runa1000') {
    num = 10
  }
  let strideAverage: any = 0;
  let stepsAverage: any = 0;
  strideAverage = (strideSum / num).toFixed(1);
  stepsAverage = (stepsSum / num).toFixed(1);
  for (let i = 1; i <= num; i++) {
    typeLists.push(i * 100)
    speedLists.push(details.value.speed)
    strideLists.push(strideAverage)
    stepsLists.push(stepsAverage)
    fullAvgRateLists.push(details.value.full_avg_rate)
  }
  typeList.value = typeLists;
  speedList.value = speedLists;
  strideList.value = strideLists;
  stepsList.value = stepsLists;
  fullAvgRateList.value = fullAvgRateLists;
};

onBeforeMount(() => {
  query.value = route.query;
  details.value = JSON.parse(JSON.stringify(props.detailsData));
  getInitialize();
})

onMounted(() => {
  speedChart();
  strideChart();
  stepsChart();
})
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 30vh;
}
</style>