ylrz_his_scrm_adminUI/src/components/DeviceInfo/Sports.vue

<template>
  <div>
    <div class="box-header">
      <div class="box-title boldtext">
        运动 <span style="margin-left: 14px">{{ currentDate }}</span>
      </div>
      <div>
        <el-button @click="exportData" size="small" style="margin-right: 20px">导出</el-button>
        <el-date-picker size="small" v-model="currentDatePicker" type="date" placeholder="选择日期"
          value-format="yyyy-MM-dd" @change="datePickerchange">
        </el-date-picker>
      </div>
    </div>
     <!-- 展示 -->
    <div v-show="!detailsType">
      <div class="sports-echarts">
        <div class="sports-echarts-title">
          <span class="sports-echarts-num">{{ stepTotal || '-' }}</span>步
        </div>
        <div class="sports-echarts-box">
          <div ref="sportCharts" style="width: 100%;height: 100%;min-width: 783px;"></div>
        </div>
      </div>
    </div>
    <div v-show="detailsType">
      <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="stepTotal" label="运动步数" />
      <el-table-column prop="distanceTotal" label="运动里程" />
      <el-table-column prop="sportTime" label="运动时长(min)" />
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="type" label="运动类型" />
      <template #empty>
          <div>
              今日暂无数据，请选择其他日期
          </div>
      </template>
    </el-table>
    <pagination v-show="(total > 0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
    </div>
  </div>
</template>

<script>
import { querySportData,exportSporttDate,querySportPageByDate } from "@/api/watch/deviceInfo";

export default {
  props: {
    deviceId: {
      type: String || Number,
      default: "",
    },
    detailsType: { 
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,// 遮罩层
      dataList:[],
      total: 0,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        deviceId:"",
        startTime:"",
        endTime:""
      },
      stepTotal: '',
      currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
      currentDatePicker: "",
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      max_y: 40,
      chart: null,
      chartOptions: {
        grid: {
          top: "18%",
          left: "10%",
          bottom: "10%",
          right: "7%"
        },
        title: {
          subtext: "单位：步",
          left: 7,
          top: "0%",
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ],
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#999999",
            interval: function (index, name) {
              if (index % 6 == 0 || index == 23) return true;
              else return false;
            }
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          },
          axisLabel: {
            fontSize: 12,
            color: "#999999",
            formatter: (value) => {
              if (value >= this.max_y) {
                return value;
              } else return value;
            }
          }
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 8,
            color: '#65a9ff'
          }
        ]
      }
    };
  },
  methods: {
    getDataPage(){
      this.loading = true;
      this.queryParams.deviceId = this.deviceId;
      this.queryParams.startTime = this.currentDate + " 00:00:00";
      this.queryParams.endTime = this.currentDate + " 23:59:59";
      querySportPageByDate(this.queryParams)
        .then((response) => {
          if (response) {
            this.dataList = response.rows;
            this.total = response.total;
            this.loading = false;
          } else {
            console.warn("运动分页数据返回为空或格式不正确:", response);
          }
        })
        .catch((error) => {
          console.error("获取运动分页数据失败:", error);
        });
    },
    getDetailsData() {
      querySportData(this.currentDate, this.deviceId)
        .then((response) => {
          if (response && response.data) {
            this.stepTotal = response.data.stepTotal;
            this.chartOptions.series[0].data = response.data.steps;
            // console.log("-----------------------" + JSON.stringify(this.chartOptions.series[0].data, null, 2))
            // 更新图表
            if(this.detailsType == false) {
              this.initChart();
            }
          } else {
            console.warn("心率数据返回为空或格式不正确:", response);
          }
        })
        .catch((error) => {
          console.error("获取心率数据失败:", error);
        });
    },
    datePickerchange() {
      this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
      if(this.detailsType){
        this.getDataPage();
        } else{
        this.getDetailsData();
      }
    },
    initChart() {
      const chartElement = this.$refs.sportCharts;
      if (chartElement) {
        this.chart = this.echarts.init(chartElement);
        this.chartOptions.xAxis.min = this.currentDate + ' 00:00:00'
        this.chartOptions.xAxis.max = this.currentDate + ' 23:59:59'
        this.chart.setOption(this.chartOptions);
      }
    },
    exportData() { 
      this.$confirm("是否确认导出所有用户数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportSporttDate(this.currentDate, this.deviceId);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
  display: flex;
  flex-direction: $flexD;
  align-items: $alignI;
  justify-content: $justifyC;
}

.boldtext {
  font-size: 16px;
  color: #292929;
  line-height: 30px;
  font-weight: 700;
}

.box-header {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  @include u-flex(row, center, space-between);
  height: 50px;
}

.box-title {
  color: #292929;
  font-size: 16px;
  font-family: PingFang SC-Medium;
  padding-left: 10px;
  border-left: 4px solid #2284ff;
  line-height: 13px;
}

.sports-echarts {
  &-title {
    padding: 12px;
    font-size: 12px;
    color: #727272;
  }

  &-num {
    font-weight: 700;
    font-size: 16px;
    color: #292929;
  }

  &-box {
    min-width: 783px;
    width: 100%;
    max-width: 1200px;
    height: 300px;
  }
}
</style>