添加cid前端请求数据时加载动画

src/views/CIDList.vue

@@ -9,7 +9,7 @@ import { updateCIDService } from "@/api/cid.js";
 import router from "@/router/index.js";
 import Menu from "@/views/Menu.vue";
 
-import {ElMessage} from "element-plus";
+import {ElMessage, ElLoading} from "element-plus";
 
 export default {
   data() {
@@ -53,16 +53,21 @@ export default {
   // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getDeviceList() {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '加载中',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
       let result = {};
       try {
         result = await getCIDListService(this.tokenData);
+        let data = result.data;
+        this.tableData = data;
       } catch (e) {
         console.log(e);
+      } finally {
+        loading.close();
       }
-      let data = result.data;
-
-
-      this.tableData = data;
     },
     onSubmit() {
       getDeviceList({ token: token });
@@ -76,24 +81,29 @@ export default {
 
     //设置项目执行构建部署
     async runCID(index) {
-      var id = this.tableData[index].ID;
+      const loading = ElLoading.service({
-      var run_data = {
+        lock: true,
-        id: id,
+        text: '执行中',
-        ip: this.ip,
+        background: 'rgba(0, 0, 0, 0.7)',
-        userId: this.tokenData.userId,
+      });
-        token: this.tokenData.token,
-      };
       try {
+        var id = this.tableData[index].ID;
+        var run_data = {
+          id: id,
+          ip: this.ip,
+          userId: this.tokenData.userId,
+          token: this.tokenData.token,
+        };
         var d_re = await runCIDService(run_data);
         if (d_re.code == 0) {
-          //alert("操作成功");
           ElMessage.success("操作成功");
         } else {
-          //alert("操作失败");
           ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
+      } finally {
+        loading.close();
       }
     },
     toRunCIDLog(index) {
@@ -106,26 +116,31 @@ export default {
       if (!confirm("是否删除")) {
         return;
       }
-    
+      
-      var id = this.tableData[index].ID;
+      const loading = ElLoading.service({
-      var delete_data = {
+        lock: true,
-        id: id,
+        text: '删除中',
-        userId: this.tokenData.userId,
+        background: 'rgba(0, 0, 0, 0.7)',
-        token: this.tokenData.token,
+      });
-      };
       try {
+        var id = this.tableData[index].ID;
+        var delete_data = {
+          id: id,
+          userId: this.tokenData.userId,
+          token: this.tokenData.token,
+        };
         var d_re = await deleteCIDService(delete_data);
         if (d_re.code == 0) {
-          //alert("删除成功");
           ElMessage.success("删除成功");
           //刷新页面
           this.getDeviceList();
         } else {
-          //alert("操作失败");
           ElMessage.error("操作失败");
         }
       } catch (e) {
         console.log(e);
+      } finally {
+        loading.close();
       }
     },
     async updateButtonCID(index) {
@@ -140,36 +155,46 @@ export default {
     },
     async addCID() {
       this.addDialogVisible = false;
+      const loading = ElLoading.service({
+        lock: true,
+        text: '添加中',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
       let result = {};
       try {
         result = await addCIDService(this.addForm);
         if (result.code == 0) {
-          //alert("添加成功");
           ElMessage.success("添加成功");
           this.getDeviceList()
         } else {
-          //alert("添加失败");
           ElMessage.error("添加失败");
         }
       } catch (e) {
         console.log(e);
+      } finally {
+        loading.close();
       }
     },
     async updateCID() {
       this.updateDialogVisible = false;
+      const loading = ElLoading.service({
+        lock: true,
+        text: '更新中',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
       let result = {};
       try {
         result = await updateCIDService(this.updateForm);
         if (result.code == 0) {
-          //alert("修改成功");
           ElMessage.success("修改成功");
           this.getDeviceList()
         } else {
-          //alert("修改失败");
           ElMessage.error("修改失败");
         }
       } catch (e) {
         console.log(e);
+      } finally {
+        loading.close();
       }
     },
     async getIpClient() {

src/views/CIDLog.vue

@@ -14,6 +14,7 @@ export default {
     return {
       ip: "",
       tableData: [],
+      loading: false,
       tokenData: {
         token: localStorage.getItem("token"),
         ip: localStorage.getItem("ip"),
@@ -42,10 +43,13 @@ export default {
     },
     async getCIDLogList() {
       let result = {};
+      this.loading = true;
       try {
         result = await getCIDLogListService(this.tokenData);
+        this.loading = false;
       } catch (e) {
         console.log(e);
+        this.loading = false;
       }
       let data = result.data;
       for(var i=0;i<data.length;i++){
@@ -234,7 +238,13 @@ export default {
           </el-form>
 
           <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table :data="tableData" width="100%" border>
+          <el-table 
+            :data="tableData" 
+            width="100%" 
+            border
+            v-loading="loading"
+            element-loading-text="数据加载中..."
+          >
             :row-style="this.tableRowClassName"
             <el-table-column prop="ID" label="id" width="80"></el-table-column>
             <el-table-column

src/views/login.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>个人记录 - 登录</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/element-plus"></script>
+    <style>
+        body {
+            background-image: url('https://picsum.photos/1920/1080');
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+
+        .login-container {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .el-card {
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .footer {
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            text-align: center;
+            padding: 10px 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+        }
+
+        .third-party-login {
+            text-align: center;
+        }
+
+        .third-party-login .el-button {
+            margin: 5px;
+        }
+        .qq-btn {
+            background-image: url(https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png);
+
+            }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <div class="login-container">
+            <el-card>
+                <template #header>
+                    <h3 class="text-2xl font-bold text-center">个人记录登录页面</h3>
+                </template>
+                <el-form ref="loginFormRef" :model="loginForm" label-width="80px">
+                    <el-form-item label="用户名">
+                        <el-input v-model="loginForm.username"></el-input>
+                    </el-form-item>
+                    <el-form-item label="密码">
+                        <el-input v-model="loginForm.password" type="password"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button size="medium" @click="handleLogin">登录</el-button>
+                    </el-form-item>
+                </el-form>
+                <a href="https://ljsea.top" style="font-size: 12px;color: blue;width: 120px;">跳转主页</a>
+                <el-divider content-position="center">第三方登录</el-divider>
+                <img src="https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png"  @click="thirdLogin('qq')">
+                <div class="third-party-login">
+                    <!-- <el-button
+                    class="qq-btn"
+                    @click="thirdLogin('qq')"
+                  ></el-button> -->
+                  
+                </div>
+            </el-card>
+        </div>
+        <div class="footer">
+            <a href="https://beian.miit.gov.cn/">备案号：蜀ICP备2022027005号-2</a>
+        </div>
+    </div>
+    <script>
+        const { createApp } = Vue;
+        const app = createApp({
+            data() {
+                return {
+                    loginForm: {
+                        username: '',
+                        password: ''
+                    },
+                    currentLoginRequest: 0,
+                    maxLoginRepeatRequest: 60,
+                    loginFormRef: null
+                };
+            },
+            methods: {
+                handleLogin() {
+                    console.log('登录信息：', this.loginForm);
+                    if (this.loginForm.username === '' || this.loginForm.password === '') {
+                        ElementPlus.ElMessage({
+                            message: '用户名和密码不能为空',
+                            type: 'error',
+                        });
+                        return;
+                    }
+                    ElementPlus.ElMessage({
+                        message: '用户名或密码错误',
+                        type: 'error',
+                    });
+                },
+                handleQQLogin() {
+                    console.log('点击了 QQ 登录');
+                    // 这里应添加实际的 QQ 登录逻辑，比如跳转到 QQ 登录授权页面
+                },
+                async thirdLogin(type) {
+                    let loginUrl = 'https://graph.qq.com/oauth2.0/show?which=error&display=pc&error=100010&which=Login&display=pc&client_id=101827468&response_type=code&state=eyJ1dWlkIjoiZTIyMDM5OGEtOTczMy00NjVlLWFkMTMtNWE5ZTE2YWI5ZmFkIiwidHlwZSI6ImxvZ2luIiwicHJvamVjdCI6IlNBVyIsInBsYXRmb3JtIjoicXEiLCJ1c2VyX2lkIjowfQ%3D%3D';
+                    window.open(loginUrl, "_blank");
+                },
+
+            }
+        });
+        app.use(ElementPlus);
+        app.mount('#app');
+    </script>
+</body>
+
+</html>
+