xj-screen/src/views/indexSun/twoR.vue

<template>
    <div class="two-r-box">
        <div class="title">
            <span>健康打卡数据</span>
            <!--            <span class="look-view">查看详情</span>-->
        </div>
        <div class="content">
            <div class="content-item">
                <div class="content-item-info">
                    <div class="content-item-name" style="font-size: 16px">
                        <div class="content-item-img">
                            <img :src="WeightPng" alt="" />
                        </div>
                        减重打卡
                    </div>
                    <div class="content-item-clock">
                        <div>
                            <span class="clock-text">今日打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.weightLossCountDay ? twoRList?.weightLossCountDay : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(1, 1, 2)"
                                >{{ twoRList?.weightLossAbnormalCountDay ? twoRList?.weightLossAbnormalCountDay : '--' }}人</span
                            >
                        </div>
                    </div>
                    <div class="content-item-clock" style="margin-bottom: 0">
                        <div>
                            <span class="clock-text">本月打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.weightLossCountMonth ? twoRList?.weightLossCountMonth : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(1, 2, 2)"
                                >{{ twoRList?.weightLossAbnormalCountMonth ? twoRList?.weightLossAbnormalCountMonth : '--' }}人</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-item">
                <div class="content-item-info">
                    <div class="content-item-name" style="font-size: 16px">
                        <div class="content-item-img">
                            <img :src="FatPng" alt="" />
                        </div>
                        血糖打卡
                    </div>
                    <div class="content-item-clock">
                        <div>
                            <span class="clock-text">今日打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.bloodSugarCountDay ? twoRList?.bloodSugarCountDay : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(2, 1, 2)"
                                >{{ twoRList?.bloodSugarAbnormalCountDay ? twoRList?.bloodSugarAbnormalCountDay : '--' }}人</span
                            >
                        </div>
                    </div>
                    <div class="content-item-clock" style="margin-bottom: 0">
                        <div>
                            <span class="clock-text">本月打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.bloodSugarCountMonth ? twoRList?.bloodSugarCountMonth : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(2, 2, 2)"
                                >{{ twoRList?.bloodSugarAbnormalCountMonth ? twoRList?.bloodSugarAbnormalCountMonth : '--' }}人</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-item" style="margin-bottom: 0">
                <div class="content-item-info">
                    <div class="content-item-name" style="font-size: 16px">
                        <div class="content-item-img">
                            <img :src="BloodPng" alt="" />
                        </div>
                        血压打卡
                    </div>
                    <div class="content-item-clock">
                        <div>
                            <span class="clock-text">今日打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.bloodPressureCountDay ? twoRList?.bloodPressureCountDay : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(3, 1, 2)"
                                >{{ twoRList?.bloodPressureAbnormalCountDay ? twoRList?.bloodPressureAbnormalCountDay : '--' }}人</span
                            >
                        </div>
                    </div>
                    <div class="content-item-clock" style="margin-bottom: 0">
                        <div>
                            <span class="clock-text">本月打卡人数：</span>
                            <span class="clock-num1">{{ twoRList?.bloodPressureCountMonth ? twoRList?.bloodPressureCountMonth : '--' }}人</span>
                        </div>
                        <div>
                            <span class="clock-text">异常人数：</span>
                            <span class="clock-num2" @click="handleClickNum1(3, 2, 2)"
                                >{{ twoRList?.bloodPressureAbnormalCountMonth ? twoRList?.bloodPressureAbnormalCountMonth : '--' }}人</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import WeightPng from '/@/assets/indexSun/weightClock.png';
    import FatPng from '/@/assets/indexSun/fatClock.png';
    import BloodPng from '/@/assets/indexSun/bloodClock.png';
    import { onMounted, ref, watch } from 'vue';
    import { twoRApi } from '/@/views/indexSun/indexSun.api.ts';
    import { useUserStore } from '/@/store/modules/user.ts';

    const { getCenterInfo } = useUserStore();
    const twoRList = ref();
    const emit = defineEmits(['handleClick']);

    const props = defineProps({
        bKey: {
            type: String,
            default: () => '',
        },
        centerId: {
            type: String,
        },
    });

    onMounted(() => {
        getList();
    });

    watch(props, () => {
        getList();
    });

    function getList() {
        twoRApi({ centerId: getCenterInfo?.id })
            .then((res: any) => {
                if (res.code == 200) {
                    localStorage.removeItem('twoRList');
                    twoRList.value = res.result;
                    localStorage.setItem('twoRList', JSON.stringify(res.result));
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }
    function handleClickNum1(type, date, normal) {
        emit('handleClick', { type, date, normal });
    }
</script>
<style lang="less" scoped>
    .two-r-box {
        background: rgba(8, 75, 100, 0.2);
        display: flex;
        flex-direction: column;
        letter-spacing: 0;
        .title {
            height: 40px;
            border-radius: 14px 14px 0 0;
            font-weight: bold;
            font-size: 20px;
            letter-spacing: 2px;
            color: #ffffff;
            line-height: 40px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
            .look-view {
                font-size: 14px;
                cursor: pointer;
            }
        }
        .content {
            height: calc(100% - 40px);
            padding: 10px 30px 10px 15px;
            display: flex;
            flex-direction: column;
            .content-item {
                flex: 1;
                margin-bottom: 5px;
                display: flex;
                .content-item-img {
                    margin-right: 10px;
                    img {
                        width: 32px;
                        margin-top: -3px;
                    }
                }
                .content-item-info {
                    flex: 1;
                    color: #fff;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    font-size: 14px;
                    .content-item-name,
                    .content-item-clock {
                        width: 100%;
                        display: flex;
                        align-items: center;
                    }
                    .content-item-clock {
                        padding-left: 42px;
                        justify-content: space-between;
                        > div {
                            width: 49%;
                            padding-bottom: 2px;
                            margin-bottom: 5px;
                            > span {
                                border-bottom: 1px dashed #fff;
                            }
                        }
                        .clock-text {
                            padding-bottom: 1px;
                        }
                        .clock-num1,
                        .clock-num2 {
                            font-size: 16px;
                        }
                        .clock-num1 {
                            color: #22e8ff;
                        }
                        .clock-num2 {
                            cursor: pointer;
                            color: #f24439;
                        }
                    }
                }
            }
        }
    }
</style>