ylrz_his_scrm_adminUI/src/components/DeviceInfo/Bloodoxygen.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" style="min-width: 841px; height: 320px; width: 100%;">
            <div ref="heartrateChart" style="width: 100%; height: 100%"></div>
        </div>
        <!-- 列表展示 -->
        <div v-show="detailsType">
            <el-table :data="dataList">
                <el-table-column type="index" label="序号" align="center"/>
                <el-table-column label="时间" align="center" prop="time" />
                <el-table-column label="血氧" align="center" prop="avgBoxy" />
                 <!-- 使用 empty 插槽自定义无数据时的显示内容 -->
                <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 * as echarts from "echarts";
import { querySpo2,queryBOPageByDate } from "@/api/watch/deviceInfo";
export default {
    props: {
        deviceId: {
            type: String || Number,
            default: "",
        },
        detailsType: { 
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dataList:[],
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                deviceId:"",
                // date:"",
                beginTime:"",
                endTime:""
            },
            total: 0,
            currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
            currentDatePicker: "",
            exportLoading: false,
            chart: null,
            chartOptions: {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        label: {
                            backgroundColor: "#FFFFFF",
                        },
                        lineStyle: {
                            color: "#DE5D36",
                            width: 1,
                        },
                    },
                    // backgroundColor: "rgba(255, 140, 106, 1)",
                    backgroundColor: "#999999",
                    borderColor: "#EC3B2C",
                    borderWidth: 1,
                    textStyle: {
                        color: "#FFFFFF",
                    },
                    extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
                    formatter: (params) => {
                        if (params[0].value != undefined) {
                            return this.parseTime(params[0].value[0], "{h}:{i}") + " " + params[0].value[1];
                        }
                    },
                },
                xAxis: {
                    type: "time",
                    splitNumber: 6,
                    // axisLine: {
                    //     show: false,
                    // },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#999999",
                        margin: 20,
                        fontWeight: "bold",
                        formatter: (value) => {
                            return this.parseTime(value, "{h}:{i}");
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: [],
                        symbol: "none",
                        type: 'line',
                    }
                ]
            }

        }
    },
    methods: {
        getDataPage(){
            this.loading = true;
            this.queryParams.deviceId = this.deviceId;
            this.queryParams.beginTime = this.currentDate + " 00:00:00";
            this.queryParams.endTime = this.currentDate + " 23:59:59";
            queryBOPageByDate(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);
                });
        },
        datePickerchange() {
            this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
            this.getDetailsData()
        },
        initChart() {
            const chartElement = this.$refs.heartrateChart;
            const sportChartElement = this.$refs.sportHeartrate;
            if (chartElement) {
                this.chart = echarts.init(chartElement);
                this.seChartOptions()
            }
            if (sportChartElement) {
                this.sportChart = echarts.init(sportChartElement);
                this.sportChart.setOption(this.sportChartOption);
            }
        },
        seChartOptions() {
            this.chartOptions.xAxis.min = this.currentDate + ' 00:00:00'
            this.chartOptions.xAxis.max = this.currentDate + ' 23:59:59'
            this.chart.setOption(this.chartOptions);
        },
        // 获取血氧折线图
        getDetailsData() {
            querySpo2(this.currentDate, this.deviceId)
                .then((response) => {
                    if (response && response.data) {
                        // console.log("------------------" + JSON.stringify(response.data, null, 2))
                        const data = response.data.map((item) => (
                            {
                                value: [
                                    new Date(item.createTime).getTime(),
                                    item.avgBoxy,
                                ],
                            }));

                        // 将数据分别赋值给不同的 series
                        this.chartOptions.series[0].data = data;
                        // 更新图表
                        if (this.detailsType == false) {
                            this.initChart();
                        }
                    } else {
                        console.warn("血氧数据返回为空或格式不正确:", response);
                    }
                })
                .catch((error) => {
                    console.error("获取血氧数据失败:", error);
                });
        },
        //   // 导出数据逻辑
        //   exportData() {
        //     this.$confirm("是否确认导出所有用户数据项?", "警告", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "warning",
        //     })
        //       .then(() => {
        //         this.exportLoading = true;
        //         return exportHeartDate(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;
}

.fz15 {
    font-size: 15px !important;
}

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

.box-header {
    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;
}

.heartrate-data {
    @include u-flex(row, center, space-around);
    margin-top: 30px;

    &-item {
        height: 60px;
        width: 196px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(1, 24, 54, 0.1);
        overflow: hidden;
        @include u-flex(row, center, flex-start);

        img {
            height: 41px;
            width: 41px;
        }
    }

    &-imgbox {
        flex-shrink: 0;
        height: 60px;
        width: 60px;
        @include u-flex(row, center, center);
    }

    &-right {
        flex: 1;
        text-align: center;
        font-size: 13px;
        color: #606165;
        font-family: PingFang SC-Medium;
        background: #fff;
        height: 60px;
    }

    &-num {
        font-size: 22px;
        color: #2c2c3b;
        line-height: 38px;
    }
}

.heartrate-sport {
    @include u-flex(row, flex-start, flex-start);
    margin-top: 20px;

    &-l {
        width: 490px;
        flex-shrink: 0;
    }

    &-r {
        flex: 1;
        max-width: 720px;
    }

    &-lechart {
        width: 490px;
        height: 300px;
    }

    &-rechart {
        width: 100%;
        @include u-flex(row, center, center);
    }
}
</style>