ylrz_his_scrm_adminUI/src/components/DeviceInfo/Pressure.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="createTime" />
                <el-table-column label="sbp(mmgh)" align="center" prop="sbp" />
                <el-table-column label="dbp(mmgh)" align="center" prop="dbp" />
                <el-table-column label="hr(次/分)" align="center" prop="hr" />
                <template #empty>
                <div>
                    今日暂无数据，请选择其他日期
                </div>
            </template>
            </el-table>
            <pagination v-show="(dataListTotal > 0) && detailsType" :total="dataListTotal" :page.sync="tqueryParams.pageNum" :limit.sync="tqueryParams.pageSize" @pagination="getTableList"/>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { queryPressure } from "@/api/watch/deviceInfo";
export default {
    props: {
        deviceId: {
            type: String || Number,
            default: "",
        },
        detailsType: { 
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            list: [],
            dataList:[],
            tqueryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            dataListTotal: 0,
            currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
            currentDatePicker: "",
            exportLoading: false,
            chart: null,
            chartOptions: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {},
                xAxis: {
                    boundaryGap: false,
                    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',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                
                series: [
                    {
                        name: 'sbp(mmgh)',
                        type: "line",
                        symbol: "none",
                        data: []
                    },
                    {
                        name: 'dbp(mmgh)',
                        type: "line",
                        symbol: "none",
                        data: []
                    },
                    {
                        name: 'hr(次/分)',
                        type: "line",
                        symbol: "none",
                        data: []
                    }
                ]
            }
        }
    },
    methods: {
        datePickerchange() {
            this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
            this.getDetailsData()
        },
        initChart() {
            const chartElement = this.$refs.heartrateChart;
            if (chartElement) {
                this.chart = echarts.init(chartElement);
                this.seChartOptions()
            }

        },
        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() {
            queryPressure(this.currentDate, this.deviceId)
                .then((response) => {
                    if (response && response.data) {
                        this.list = response.data
                        this.getTableList()
                        const data1 = response.data.map((item) => (
                            {
                                value: [
                                    new Date(item.createTime).getTime(),
                                    item.sbp,
                                ],
                            }));
                        const data2 = response.data.map((item) => (
                            {
                                value: [
                                    new Date(item.createTime).getTime(),
                                    item.dbp,
                                ],
                            }));
                        const data3 = response.data.map((item) => (
                            {
                                value: [
                                    new Date(item.createTime).getTime(),
                                    item.hr,
                                ],
                            }));

                        // 将数据分别赋值给不同的 series
                        this.chartOptions.series[0].data = data1;
                        this.chartOptions.series[1].data = data2;
                        this.chartOptions.series[2].data = data3;

                        // 更新图表
                        if (this.detailsType == false) {
                            this.initChart();
                        }
                    } else {
                        console.warn("心率数据返回为空或格式不正确:", response);
                    }
                })
                .catch((error) => {
                    console.error("获取心率数据失败:", error);
                });
        },
        getTableList() {
            this.dataListTotal = this.list.length
            const start = (this.tqueryParams.pageNum - 1) * this.tqueryParams.pageSize;
            const end = start + this.tqueryParams.pageSize;
            this.dataList = this.list.slice(start, end);
        },
        // 导出数据逻辑
        //   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>