update 增加新版大屏

2024-09-20 09:28:11 +08:00
parent 01519c97ec
commit 094e88a79e
14 changed files with 1354 additions and 5 deletions
@@ -0,0 +1,141 @@
+<template>
+    <div class="common-card" :class="[themeType]">
+        <public-title title="服务详情数据" :themeType="themeType" />
+        <div class="inner">
+            <div class="type-time">
+                <span
+                    v-for="(item, index) in typeTime"
+                    :key="index"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
+                    @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' : '', themeType]"
+                    @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 { 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 { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { serverApi } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const { themeType } = useTheme();
+    const { SERVER_DETAIL } = caching;
+    const props = defineProps({
+        refreshState: {
+            type: Boolean,
+        },
+        setting: {
+            type: Object,
+        },
+        theme: {
+            type: String,
+        },
+    });
+    const emit = defineEmits(['handleClick']);
+    const typeTime = ref(timeTab);
+    const { statistics, setStatistics } = useStatistics();
+    const selectIndex = ref(0);
+    const selectVal = ref('2'); //本年
+    const { setSpin, spinning } = useSpin();
+
+    onMounted(() => {
+        getList();
+    });
+
+    const useDetail = useDetailStore();
+    const { setSession, getSession } = useSession();
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await serverApi({ condition: selectVal.value, dataType: props.setting.dataType })) || {};
+            setSpin(false);
+            if (code != 200 || !result) {
+                return;
+            }
+            setSession(SERVER_DETAIL, JSON.stringify(result));
+            setValue(result);
+        } catch {
+            setSpin(false);
+            const result = JSON.parse(getSession(SERVER_DETAIL));
+            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: 10px;
+            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 6% 6px 5%;
+
+            &.hasCursor {
+                cursor: pointer;
+            }
+
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+</style>