Loading加载效果

frontend/src/views/machine/controlSource/components/controlSourceDetail.vue

@@ -112,30 +112,36 @@
                                     </el-tab-pane>
                                 </el-tabs>
                                 <div class="page">
-                                    <div class="loading-container">
-                                        <el-progress
-                                            v-if="loading"
-                                            type="circle"
-                                        >
-                                        <template #default="{}">
-                                            <span class="Loading">Loading</span>
-                                        </template>
-                                        </el-progress>
+                                    <div class="black-container">
+<!--                                        <el-progress-->
+<!--                                            v-if="loading"-->
+<!--                                            type="circle"-->
+<!--                                        >-->
+<!--                                        <template #default="{}">-->
+<!--                                            <span class="Loading">Loading</span>-->
+<!--                                        </template>-->
+<!--                                        </el-progress>-->
+                                      <div class="loading-container" v-if="showLoading">
+                                        <div style="width: 80%;height: 80%;" class="loading-box">
+                                          <Loading style="color: #003078;"/>
+                                        </div>
+                                        <div style="color:#fff;width: 80%;text-align: center;">Loading...</div>
+                                      </div>
                                     </div>
                                   <div style="margin-top: 10px;">
                                     <span>标准源加量输出:{{hour}}时{{minute}}分{{second}}秒</span>
                                   </div>
                                   <div style="margin-top: 10px;">
                                     <el-button :icon="VideoPlay"
-                                                type="primary" 
-                                                size="large" 
+                                                type="primary"
+                                                size="large"
                                                 @click="startLoading"
                                                :disabled="startDisabeld"
                                     >启动</el-button>
                                     <el-button :icon="VideoPause"
-                                                type="primary" 
-                                                size="large" 
-                                                @click="stopLoading"  
+                                                type="primary"
+                                                size="large"
+                                                @click="stopLoading"
                                                :disabled="pauseDisabled"
                                     >停止</el-button>
                                   </div>
@@ -160,7 +166,7 @@
             v-if="showDialog"
         />
         <!-- 查看 -->
-        <ViewRow ref="viewRowRef"  
+        <ViewRow ref="viewRowRef"
                 :activeName="activeName"
                 :formContent="props.formContent"
                 @close="viewDialog = false"
@@ -175,7 +181,7 @@ import Tree from './tree.vue'
 import Commun from './communication.vue'
 import {type CascaderOption, ElMessage} from 'element-plus'
 import { getTreeData } from '@/api/check/test'
-import {CirclePlus, Delete, Check, CopyDocument, View, EditPen, VideoPlay,VideoPause} from '@element-plus/icons-vue'
+import {CirclePlus, Delete, Check, CopyDocument, View, EditPen, VideoPlay, VideoPause, Loading} from '@element-plus/icons-vue'
 import type { TestScript } from '@/api/device/interface/testScript'
 import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
 import { CheckData } from '@/api/check/interface'
@@ -233,7 +239,7 @@ const testProjectPopupRef = ref()
 const tableData: any = ref([])
 const tabData: any = ref([])
 
-const loading = ref(true)
+const showLoading = ref(false)
 const column = ref([
     {
         label: 'L1',
@@ -258,20 +264,20 @@ const second = ref(0)
 
 const emit = defineEmits(['update:activeName','update:activeIndex','update:startDisabeld','update:pauseDisabled'])
 const controlContent = ref<controlSource.ResControl>({
-        userPageId: '', 
-        scriptId: '',  
+        userPageId: '',
+        scriptId: '',
         scriptIndex: 0,
         sourceId: '',
         valueType:-1
 })
 // 获取树
-const getTree = () => { 
+const getTree = () => {
     getTreeData({
         scriptId: '9ff96807cf8c7524587982ed8baa8b57'
     }).then(res => {
         if (res.code === 'A0000') {
             treeData.value = res.data
-            
+
             // 添加tab子项
             props.options.forEach((k: any, i: number) => {
                 tabData.value[i].children = []
@@ -335,7 +341,7 @@ const tabChange = () => {
                 tabData.value.filter((item: any) => item.value == activeName.value)[0]?.children[0]?.value || ''
         }
 
-     
+
     }
     inquireTable()
 }
@@ -391,7 +397,7 @@ const view = (row: Partial<TestScript.ResTestScript> = {}) => {
     setTimeout(() => {
         viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
     }, 0)
-    
+
 }
 
 // 定义 startLoading 方法
@@ -426,6 +432,9 @@ const stopLoading = async () => {
 
 
 const startTimeCount = () => {
+  // Loading效果展示
+  showLoading.value = true
+
   hour.value = 0
   minute.value = 0
   second.value = 0
@@ -448,6 +457,8 @@ const stopTimeCount = () => {
   if (timer) {
     clearInterval(timer)
   }
+  //Loading效果关闭
+  showLoading.value = false
 }
 
 // 获取左边树数据
@@ -467,7 +478,7 @@ onMounted(() => {
         })
     })
     activeName.value = tabData.value[0].value
-   
+
     valueCode.value = dictStore
         .getDictData('Script_Value_Type')
         .filter(item => item.id == props.formContent.valueType)[0].code
@@ -553,7 +564,7 @@ defineExpose({
   align-items: center;
   justify-content: center;
 
-  .loading-container {
+  .black-container {
     background-color: #000;
     width: 300px;
     height: 300px;
@@ -561,6 +572,29 @@ defineExpose({
     align-items: center;
     justify-content: center;
     margin-left: 20px;
+
+    .loading-container{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.loading-box {
+  animation: rotate 2s linear infinite;
+  font-size: 30px; /* 增大图标的大小 */
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
   }
 }