xj-screen/src/components/body-d-left/oneL.vue

<template>
    <div class="common-card" :class="[themeType]">
        <public-title title="服务详情数据" />
        <div class="inner">
            <div class="type-time">
                <span
                    v-for="(item, index) in typeTime"
                    :key="index"
                    :class="[selectIndex === index ? 'select' : 'unSelect']"
                    @click="handleSelect(index, item.value)"
                    >{{ item.name }}</span
                >
            </div>
            <div class="server-container">
                <div
                    v-for="(item, index) in statistics"
                    :key="index"
                    class="server-item"
                    :class="['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : ''"
                    @click="handleClick(item)"
                >
                    <span>{{ item?.name }}</span>
                    <span>{{ item?.value }}</span>
                </div>
                <a-spin :spinning="spinning" class="spin"></a-spin>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { list } from '/@/components/body-d-left/left.api';
    import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { useDetailStore } from '/@/store/modules/detailData.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
    import { setTheme } from '/@/assets/theme/themeList.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const { themeType } = useTheme();
    const { LEFT_KEY1 } = caching;
    const props = defineProps({
        refreshState: {
            type: Boolean,
        },
        setting: {
            type: Object,
        },
        theme: {
            type: String,
        },
    });
    const emit = defineEmits(['handleClick']);
    const typeTime = ref(timeTab);
    const { statistics, setStatistics, getStatistics } = useStatistics();
    const selectIndex = ref(0);
    const selectVal = ref('2'); //本年
    const { setSpin, spinning } = useSpin();

    onMounted(() => {
        getList();
        if (props.theme) {
            setTheme(props.theme);
        }
    });

    const useDetail = useDetailStore();
    const { setSession, getSession } = useSession();

    async function getList() {
        setSpin(true);
        try {
            const { code, result } = (await list({ condition: selectVal.value, dataType: props.setting.dataType })) || {};
            setSpin(false);
            if (code != 200 || !result) {
                return;
            }
            setSession(LEFT_KEY1, JSON.stringify(result));
            setValue(result);
        } catch {
            setSpin(false);
            const result = JSON.parse(getSession(LEFT_KEY1));
            setValue(result);
        }
    }

    function setValue(result = {}) {
        let { alerdyreceive = '', totalacceptance = '' } = result;
        setStatistics(result);
        if (alerdyreceive || totalacceptance) {
            useDetail.setAlerdyreceive(alerdyreceive);
            useDetail.setTotalacceptance(totalacceptance);
        }
    }

    function handleSelect(index: number, value: string) {
        selectIndex.value = index;
        selectVal.value = value;
        getList();
    }

    function handleClick(item) {
        emit('handleClick', item);
    }

    watch(
        () => props.refreshState,
        () => {
            getList();
        }
    );
</script>
<style scoped lang="less">
    .inner {
        height: calc(100% - 40px);

        .server-container {
            color: #fff;
            padding-top: 4%;
            height: 88%;
            display: grid;
            align-items: start;
            overflow-y: auto;
            position: relative;

            .spin {
                position: absolute;
                left: 50%;
                top: 50%;
            }

            .server-item {
                font-size: 16px;
                padding: 6px 0;

                &.hasCursor {
                    cursor: pointer;
                }

                span {
                    display: inline-block;
                    width: 50%;
                }

                span:nth-child(1) {
                    text-align: left;
                    padding-left: 5%;
                }

                span:nth-child(2) {
                    text-align: right;
                    padding-right: 6%;
                }
            }

            .server-item:nth-child(odd) {
                background-color: #0a0a0c;
            }
        }
    }
</style>