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,89 @@
+<template>
+    <div>
+        <public-title title="一线医疗点每日工作动态" themeType="dark" />
+        <div class="inner">
+            <div class="trends-item" v-for="(item, k) in trendsData" :key="k">
+                <div class="trends-title-con">
+                    <span class="icon-medical"></span>
+                    <span class="trends-item-title">{{ item.name }}</span>
+                </div>
+                <div class="trends-item-span-box">
+                    <span class="trends-item-span">高风险干预{{ item?.high }}人</span>
+                    <span class="trends-item-span">慢病管理{{ item?.slow }}人</span>
+                    <span class="trends-item-span">巡诊{{ item?.tour }}人</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { onMounted, ref } from 'vue';
+    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
+    import { getWorkDaily } from '/@/views/centralScreen/centralScreen.api.ts';
+
+    const { setSession, getSession } = useSession();
+    const { WORK_DAILY_NEW } = caching;
+    const trendsData = ref([]);
+
+    async function getTrendsData() {
+        try {
+            const { code, result } = await getWorkDaily({});
+            if (code != 200) {
+                return;
+            }
+            setSession(WORK_DAILY_NEW, result);
+            trendsData.value = result;
+        } catch {
+            trendsData.value = JSON.parse(getSession(WORK_DAILY_NEW));
+        }
+    }
+
+    onMounted(() => {
+        getTrendsData();
+    });
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+        overflow: auto;
+
+        .trends-item {
+            font-size: 16px;
+            padding: 10px 20px;
+
+            .trends-title-con {
+                display: flex;
+                align-items: center;
+            }
+
+            .icon-medical {
+                display: inline-block;
+                width: 26px;
+                height: 26px;
+                background: url('/@/assets/images/medical-center.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .trends-item-title {
+                margin-left: 8px;
+                font-size: 18px;
+                color: #fff;
+            }
+
+            .trends-item-span-box {
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .trends-item-span {
+                flex: 1;
+                color: #ededed;
+            }
+
+            .trends-item-span:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+</style>