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

<template>
  <div>
    <div class="column" v-if="details._comments.speed">
      <div class="column-title">成绩曲线</div>
      <div class="column-con">
        <div class="item">
          <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="faliChart" ref="echartsRef"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                节奏点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details._comments.speed.comments }}</div>
                <div v-for="(item, index) in details._comments.speed.recms" :key="index" v-html="item"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details.video_url">
      <div class="column-title">测评视频</div>
      <div>
        <video :src="details.video_url"
          :poster="details.video_url.replace('  ', '') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'"
          :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
  </div>
</template>

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

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

const data = reactive<any>({
  details: {},
  query: {},
  typeList: [],
  failedList: [],
  fullAvgRateList: [],
  averageScoreList: [],
  lowSpeedList: [],
});
const { details, query, typeList, failedList, fullAvgRateList,averageScoreList, lowSpeedList } = toRefs(data);

//成绩曲线
const faliChart = () => {
  // let myChart = echarts.init(document.getElementById("faliChart"));
  const myChart = echarts.init(echartsRef.value);
  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
      },
      {
        name: '您的平均速度',
        type: 'line',
        lineStyle: {
          type: 'dashed'
        },
        data: averageScoreList.value
      },
      // {
      //   name: '满分平均速度',
      //   type: 'line',
      //   lineStyle: {
      //     type: 'dashed'
      //   },
      //   data: this.fullAvgRateList
      // },
      // {
      //   name: '低速区',
      //   type: 'line',
      //   lineStyle: {
      //     type: 'dashed'
      //   },
      //   areaStyle: {
      //     color: "#ffdad1"
      //   },
      //   data: this.lowSpeedList
      // },
    ]
  };
  // 窗口大小自适应方案
  myChart.setOption(option);
  setTimeout(function () {
    window.onresize = function () {
      myChart.resize();
    };
  }, 200);
};

onBeforeMount(() => {
  query.value = route.query;
  details.value = JSON.parse(JSON.stringify(props.detailsData));
  let videoList = details.value.video_url.split("  ").filter((item: any) => {
    return item;
  });
  details.value.videoList = videoList
  let typeLists = [];
  let fullAvgRateLists = [];
  let averageScoreLists = [];
  let lowSpeedLists = [];
  let mySum = details.value.count_distribution.reduce((a:any, b:any) => {
    return a + b;
  }, 0);
  let num = details.value.count_distribution.length;
  let averageScore = (mySum / num).toFixed(2);
  for (let i = 1; i <= num; i++) {
    typeLists.push(i * 10)
    fullAvgRateLists.push(details.value.full_avg_rate)
    averageScoreLists.push(averageScore)
    lowSpeedLists.push(2)
  }
  typeList.value = typeList;
  fullAvgRateList.value = fullAvgRateLists;
  averageScoreList.value = averageScoreLists;
  lowSpeedList.value = lowSpeedLists;
})

onMounted(() => {
  faliChart();
})
</script>

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