update 更换背景图 看板接口对接

src/components/body-d-left/threeL.vue

@@ -5,104 +5,111 @@
             <div class="type-time">
                 <span
                     :class="selectIndex === index ? 'select' : 'unSelect'"
-                    v-for="(item, index) in typeTime"
+                    v-for="(item, index) in timeTab"
                     :key="index"
                     @click="handleSelect(index)"
                     >{{ item.name }}</span
                 >
             </div>
             <div class="physical-container">
-                <div class="physical-item">
-                    <span>10444人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>344人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>兴隆圆医院</span>
-                </div>
-                <div class="physical-item">
-                    <span>144人</span>
-                    <span>延安</span>
+                <a-spin :spinning="spinning" class="spin"></a-spin>
+                <div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">
+                    <div class="ct">
+                        <div class="value">{{ countData[item.key] || '' }}</div>
+                        <div class="label">{{ item.title }}</div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
+    import { onMounted, ref } from 'vue';
     import PublicTitle from '../publicTitle.vue';
-    const typeTime = ref([
-        {
-            name: '全部',
-            value: 'all',
-        },
-        {
-            name: '本年',
-            value: 'year',
-        },
-        {
-            name: '本月',
-            value: 'month',
-        },
-        {
-            name: '本周',
-            value: 'week',
-        },
-    ]);
-    const physical = ref();
+    import { getDetail } from '/@/components/body-d-left/left.api';
+    import { hospitalList, useSpin, timeTab } from '/@/components/body-d-left/bodyLeftHooks';
+
+    const { setSpin, spinning } = useSpin();
     const selectIndex = ref(0);
+
     function handleSelect(index: number) {
         selectIndex.value = index;
+        setSpin(true);
+        setTimeout(() => {
+            setSpin(false);
+        }, 1000);
+    }
+
+    onMounted(() => {
+        getList();
+    });
+
+    const countData = ref({});
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const { code, result } = (await getDetail({})) || {};
+            setSpin(!spinning.value);
+            if (code != 200) {
+                return;
+            }
+            countData.value = result[0] || {};
+            console.log('result', result);
+        } catch {
+            setSpin(!spinning.value);
+        }
     }
 </script>
 <style scoped lang="less">
     .inner {
         height: calc(100% - 40px);
+
         .physical-container {
             width: 96%;
             height: 92%;
-            padding-top: 2%;
+            padding-top: 6%;
             display: flex;
             flex-wrap: wrap;
             align-content: space-around;
+            position: relative;
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
+
             .physical-item {
                 width: 33%;
                 height: 46%;
                 color: #ffffff;
                 display: flex;
                 flex-direction: column;
-                span:nth-child(1) {
-                    font-size: 22px;
+
+                .ct {
+                    margin-top: -20px;
+                }
+
+                .value {
+                    font-size: 20px;
                     font-weight: bold;
                 }
-                span:nth-child(2) {
-                    font-size: 16px;
+
+                .label {
+                    font-size: 14px;
                 }
             }
-            .physical-item:nth-child(1),
-            .physical-item:nth-child(2),
-            .physical-item:nth-child(3) {
+
+            .b1 {
                 background: url('../../assets/images/physical-top.png') no-repeat;
-                background-size: 100% 100%;
+                background-size: 95% 95%;
             }
-            .physical-item:nth-child(4),
-            .physical-item:nth-child(5),
-            .physical-item:nth-child(6) {
+
+            .b2 {
                 background: url('../../assets/images/physical-bottom.png') no-repeat;
-                background-size: 100% 100%;
+                background-size: 95% 95%;
             }
         }
     }
-</style>
+</style>