update

src/components/body-d-left/bodyLeftHooks.ts

@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+
+export const timeTab = [
+    {
+        name: '全部',
+        value: '1',
+    },
+    {
+        name: '本年',
+        value: '2',
+    },
+    {
+        name: '本月',
+        value: '3',
+    },
+    {
+        name: '本周',
+        value: '4',
+    },
+];
+
+export function useSpin() {
+    const spinning = ref(true);
+
+    function setSpin(flag: boolean) {
+        spinning.value = flag;
+    }
+
+    return {
+        spinning,
+        setSpin,
+    };
+}

src/components/body-d-left/left.api.ts

@@ -1,5 +1,8 @@
-import { get } from '../../api/request'
+import { get } from '../../api/request';
+
 enum Api {
-    server='/health-emergency/emergency/tblUserHelp/statistics'
+    server = '/health-emergency/emergency/tblUserHelp/statistics',
 }
-export const list = (params) => get(Api.server, params)
+
+export const list = (params) => get(Api.server, params);
+//主诉分类

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

@@ -6,16 +6,17 @@
                 <span
                     v-for="(item, index) in typeTime"
                     :key="index"
-                    :class="selectIndex === index ? 'select' : 'unSelect'"
+                    :class="[selectIndex === index ? 'select' : 'unSelect']"
                     @click="handleSelect(index, item.value)"
                     >{{ item.name }}</span
                 >
             </div>
             <div class="server-container">
                 <div v-for="(item, index) in dataLists" :key="index" class="server-item">
-                    <span>{{ item.title }}</span>
-                    <span>{{ item.iphone }}</span>
+                    <span>{{ item?.title }}</span>
+                    <span>{{ item?.gross }}</span>
                 </div>
+                <a-spin :spinning="spinning" class="spin"></a-spin>
             </div>
         </div>
     </div>
@@ -24,59 +25,33 @@
     import { onMounted, ref } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import { list } from './left.api';
+    import { timeTab, useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
 
-    const typeTime = ref([
-        {
-            name: '全部',
-            value: '1',
-        },
-        {
-            name: '本年',
-            value: '2',
-        },
-        {
-            name: '本月',
-            value: '3',
-        },
-        {
-            name: '本周',
-            value: '4',
-        },
-    ]);
-    const dataLists = ref([
-        {
-            title: '最新呼入电话',
-            iphone: '18394578789',
-        },
-        {
-            title: '最新呼入电话',
-            iphone: '18394578789',
-        },
-        {
-            title: '最新呼入电话',
-            iphone: '18394578789',
-        },
-        {
-            title: '最新呼入电话',
-            iphone: '18394578789',
-        },
-    ]);
+    const typeTime = ref(timeTab);
+    const dataLists = ref([]);
     const selectIndex = ref(0);
     const selectVal = ref('1');
+    const { setSpin, spinning } = useSpin();
     onMounted(() => {
         getList();
     });
 
-    function getList() {
-        list({
-            condition: selectVal.value,
-        }).then(() => {});
+    async function getList() {
+        try {
+            const { code, result } = (await list({ condition: selectVal.value })) || [];
+            setSpin(!spinning.value);
+            if (code != 200) {
+                return;
+            }
+            dataLists.value = result?.map((item) => ({ ...item, title: '最新呼入电话' }));
+        } catch {
+            setSpin(!spinning.value);
+        }
     }
 
     function handleSelect(index: number, value: string) {
         selectIndex.value = index;
         selectVal.value = value;
-        console.log(selectVal.value, value);
         getList();
     }
 </script>
@@ -85,19 +60,31 @@
         height: calc(100% - 40px);
 
         .server-container {
-            color: #a3a4a4;
+            color: #fff;
             padding-top: 4%;
             height: 88%;
             display: grid;
             align-items: start;
+            overflow-y: auto;
+            position: relative;
+
+            > :nth-child(1) {
+                padding-top: 0 !important;
+            }
+
+            .spin {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+            }
 
             .server-item {
                 font-size: 16px;
+                padding: 6px 0;
 
                 span {
                     display: inline-block;
                     width: 50%;
-                    font-weight: bold;
                 }
 
                 span:nth-child(1) {
@@ -110,6 +97,10 @@
                     padding-right: 6%;
                 }
             }
+
+            .server-item:nth-child(2n) {
+                background-color: #0a0a0c;
+            }
         }
     }
 </style>