超时加载动画

src/App.vue

@@ -7,21 +7,7 @@ import departments from './component/humanResources/department.vue'
 import jobTitle from './component/humanResources/jobTitle.vue';
 import empss from './component/humanResources/emp.vue';
 import verticalTable from './component/main/verticalTable/verticalTable.vue';
-import loadingComponents from './component/loadingComponents/loadingComponents.vue';
-import { provide, ref, watch } from 'vue';
-const size = ref({
-  offsetWidth: 1,
-  offsetHeight: 1,
-  offsetLeft: 1,
-  offsetTop: 1
-});
-watch(() => size.value.offsetHeight, (res) => {
-  console.log(size.value.offsetWidth);
-  console.log(size.value.offsetHeight);
-  console.log(size.value.offsetLeft);
-  console.log(size.value.offsetTop);
-})
-provide('size', size);
+
 </script>
 
 <template>
@@ -29,7 +15,6 @@ provide('size', size);
       <contract-list></contract-list>
       <announcementType></announcementType>
       <departments></departments> -->
-  <loadingComponents :width="1000" :height="1000"></loadingComponents>
   <empss></empss>
   <!-- <job-title></job-title> -->
   <verticalTable></verticalTable>

src/component/humanResources/emp.vue

@@ -4,6 +4,7 @@ import { deepClone } from '@/util/deepCode'
 import { TreeToFlat, FlatToTree } from '@/util/toTree'
 import { computed } from '@vue/reactivity';
 import { getHumanResourcesDepartment, getContractCategory, getEmpList } from '@/api/api';
+import { usePromiseStore } from '@/storage/promiseStorage'
 
 import mains from '@/component/main/main.vue';
 import ejectDialog from '@/component/main/ejectDialog.vue';
@@ -11,7 +12,9 @@ import headers from '@/component/main/header/header.vue';
 import addButton from '@/component/main/header/add_download/button.vue';
 import addDownload from '@/component/main/header/add_download/addDownload.vue';
 import forms from '@/component/main/header/form.vue';
-import empSelectForm from './empSelectForm.vue'
+import empSelectForm from './empSelectForm.vue';
+import loadingComponents from '@/component/loadingComponents/loadingComponents.vue';
+import animation1 from '@/component/loadingComponents/animation/animation1.vue'
 
 //树形列表
 onMounted(() => {
@@ -49,10 +52,12 @@ const tablePagination = reactive({
     pageSize: 10,
     total: 1
 });
+const sendRequestFirst = usePromiseStore();
 const getData = () => {
     empSelect.value.page = tablePagination.currentPage;
     empSelect.value.limit = tablePagination.pageSize;
-    getEmpList({ page: tablePagination.currentPage, limit: tablePagination.pageSize, deptName: JSON.stringify(treeValue.value) }).then((res) => {
+    sendRequestFirst.setSendRequestFirst( getEmpList({ page: tablePagination.currentPage, limit: tablePagination.pageSize, deptName: JSON.stringify(treeValue.value) }));
+    sendRequestFirst.getSendRequestFirst().then((res) => {
         if (res.data.data.code === 10000) {
             tableData.value = res.data.data.data;
             tablePagination.total = res.data.data.count;
@@ -60,6 +65,10 @@ const getData = () => {
             console.log(res.data.data.msg);
         }
     })
+    sendRequestFirst.setSendRequestFirst(new Promise((resolve,reject)=>{
+        setTimeout(resolve,5000,"延时测试");
+    }))
+    
 }
 onMounted(() => {
     getData();
@@ -188,7 +197,12 @@ provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
     }
     return;
 });
-const size = inject('size');
+const size = ref({
+    offsetWidth: 1,
+    offsetHeight: 1,
+    offsetLeft: 1,
+    offsetTop: 1
+});
 const commonLayout = ref();
 onMounted(() => {
     watch(() => tableData.value, (res) => {
@@ -203,15 +217,21 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="common-layout" ref="commonLayout">
+    <loadingComponents :width="size.offsetWidth" :height="size.offsetHeight" :top="size.offsetTop" :left="size.offsetLeft">
+        <template #animation>
+            <animation1></animation1>
+        </template>
+    </loadingComponents>
+    <div class="common-layout">
         <el-container>
-            <el-aside>
-                <h2>企业组织架构</h2>
-                <el-tree ref="treeInstance" :data="treeData" show-checkbox node-key="title"
-                    :default-expanded-keys="defExpandedKey" :default-checked-keys="defExpandedKey" :props="defaultProps"
-                    @check-change="treeCheckChange" />
-            </el-aside>
+                <el-aside>
+                    <h2>企业组织架构</h2>
+                    <el-tree ref="treeInstance" :data="treeData" show-checkbox node-key="title"
+                        :default-expanded-keys="defExpandedKey" :default-checked-keys="defExpandedKey" :props="defaultProps"
+                        @check-change="treeCheckChange" />
+                </el-aside>
             <el-main>
+                <div ref="commonLayout">
                 <mains :tableType="tableType" :operation="operation">
                     <headers>
                         <forms>
@@ -239,11 +259,11 @@ onMounted(() => {
                             @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                     </template>
                 </mains>
+            </div>
             </el-main>
         </el-container>
     </div>
 </template>
 
 <style scoped>
-.el-aside {}
 </style>
\ No newline at end of file

src/component/loadingComponents/animation/animation1.vue

+<script setup></script>
+
+<template>
+    
+    <div class="cssLoad"></div>
+</template>
+
+<style scoped>
+.cssLoad{
+    width: 30px;
+    height: 30px;
+    border: 2px solid #000;
+    border-top-color: rgba(0, 0, 0, 0.2);
+    border-right-color: rgba(0, 0, 0, 0.2);
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    border-radius: 100%;
+    animation: circle infinite 0.75s linear;
+}
+@keyframes circle {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
\ No newline at end of file

src/component/loadingComponents/loadingComponents.vue

 <script setup>
-import {ref} from 'vue';
+import { ref } from 'vue';
+import { usePromiseStore } from '@/storage/promiseStorage';
+import animation1 from './animation/animation1.vue';
+
 const prop = defineProps([
-    'width','height'
+    'width', 'height', 'top', 'left'
 ]);
 const isShow = ref(false);
 const exitMask = ref(false);
-const width = ref(100);
-const height = ref(100);
-const promise1 = new Promise((resolve, reject) => {
-    setTimeout(resolve, 1000, 'promise 1 resolved');
-});
-const promise2 = new Promise((resolve, reject) => {
-    setTimeout(resolve, 3000, 'promise 2 rejected');
-});
+// const promise1 = new Promise((resolve, reject) => {
+//     setTimeout(resolve, 1000, 'promise 1 resolved');
+// });
+// const promise2 = new Promise((resolve, reject) => {
+//     setTimeout(resolve, 3000, 'promise 2 rejected');
+// });
 
-const promise3 = new Promise((resolve, reject) => {
-    setTimeout(resolve, 4000, 'promise 3 resolved')
+const promiseDelayed = new Promise((resolve, reject) => {
+    setTimeout(resolve, 1000, 'promiseDelayed')
 });
-
+const sendRequestAll = usePromiseStore();
 (async () => {
     try {
-        let result = await Promise.race([promise1, promise2, promise3]);
-        if (result === 'promise 1 resolved') {
-            isShow.value = true;
-            exitMask.value = true;
-            console.log("please wait...")
+        for (let index in sendRequestAll) {
+            if (index.slice(0, 1) === '_' || index.slice(0, 1) === '$') {
+                continue;
+            } else if (typeof (sendRequestAll[index]) === 'string') {
+                continue;
+            } else if (index.slice(0, 3) === 'set') {
+
+            } else if (index.slice(0, 3) === 'get') {
+                setTimeout(() => {
+                    Promise.race([sendRequestAll[index](), promiseDelayed]).then((res) => {
+                        if (res === 'promiseDelayed') {
+                            isShow.value = true;
+                            exitMask.value = true;
+                            sendRequestAll[index]().then((res) => {
+                                isShow.value = false;
+                                exitMask.value = false;
+                            })
+                        }
+                    });
+                }, 1000);
+            }
+            console.log(index);
         }
-        promise2.then((res) => {
-            isShow.value = false;
-            exitMask.value = false;
-            console.log(res);
-        })
-        console.log(result);
+        // let result = await Promise.race([promise1, promise2, promiseDelayed]);
+        // if (result === 'promise 1 resolved') {
+        //     for(let index in prop){
+        //         console.log(prop[index]);
+        //     }
+        //     isShow.value = true;
+        //     exitMask.value = true;
+        //     console.log("please wait...")
+        // }
+        // promise2.then((res) => {
+        //     isShow.value = false;
+        //     exitMask.value = false;
+        //     console.log(res);
+        // })
+        // console.log(result);
 
     } catch (err) {
         console.error(err);
@@ -40,38 +67,24 @@ const promise3 = new Promise((resolve, reject) => {
 </script>
 
 <template>
-    <div class='test' :style="{'--var-width-main':prop.width+'px','--var-height-main':prop.height+'px'}">
-        fjdsakjflsd
-        <div :class="{'mask':exitMask}"></div>
-        <div :class="{'loading':true,'is-show':isShow}"></div>
+    <div class='test'
+        :style="{ '--var-index-main': 100, '--var-width-main': prop.width + 'px', '--var-height-main': prop.height + 'px', '--var-top-main': prop.top - 8 + 'px', '--var-left-main': prop.left - 8 + 'px' }">
+        <div :class="{ 'mask': exitMask }"></div>
+        <div :class="{ 'loading': true, 'is-show': isShow }">
+            <slot name='animation'></slot>
+        </div>
     </div>
 </template>
 
 
 <style scoped>
+
 .loading {
-    position: relative;
-    width: 30px;
-    height: 30px;
-    border: 2px solid #000;
-    border-top-color: rgba(0, 0, 0, 0.2);
-    border-right-color: rgba(0, 0, 0, 0.2);
-    border-bottom-color: rgba(0, 0, 0, 0.2);
-    border-radius: 100%;
-    display: none;
-    animation: circle infinite 0.75s linear;
     position: absolute;
-    left: calc(50% - 15px);
-    top: calc(50% - 15px);
-}
-
-@keyframes circle {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+    display: none;
+    left: calc(var(--var-left-main) + var(--var-width-main)/2 - 15px);
+    top: calc(var(--var-top-main) + var(--var-height-main)/2 - 15px);
+    z-index: calc(var(--var-index-main) + 1);
 }
 
 .is-show {
@@ -79,9 +92,10 @@ const promise3 = new Promise((resolve, reject) => {
 }
 
 .mask {
+    z-index: var(--var-index-main);
     position: absolute;
-    left: 0px;
-    top: 0px;
+    left: var(--var-left-main);
+    top: var(--var-top-main);
     width: var(--var-width-main);
     height: var(--var-height-main);
     font-size: 16px;
@@ -92,9 +106,6 @@ const promise3 = new Promise((resolve, reject) => {
 }
 
 .test {
-    height: var(--var-width-main);
-    width: var(--var-height-main);
-    color: aqua;
     position: relative;
 }
 </style>
\ No newline at end of file

src/main.js

@@ -7,10 +7,9 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import { createPinia } from 'pinia'
 
 
-const pinia = createPinia()
 const app = createApp(App);
 app.use(router);
-app.use(pinia);
+app.use(createPinia());
 app.use(ElementPlus, {
   locale: zhCn,
 });

src/storage/promiseStorage.js

+import { defineStore } from "pinia";
+
+export const usePromiseStore = defineStore('promise', {
+    state() {
+        return {
+            sendRequestFirst:''
+        };
+    },
+    actions: {
+        setSendRequestFirst(sendRequestFirst){
+            this.sendRequestFirst = sendRequestFirst;
+        },
+        getSendRequestFirst(){
+            return this.sendRequestFirst;
+        }
+    }
+});
\ No newline at end of file