From 622a29616cc144de901a7ebfe7c78f40d95d77ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”>
Date: Thu, 18 Jul 2024 00:34:49 +0800
Subject: [PATCH] aa

---
 src/views/pages/carPage/index.vue | 90 +++++++++++++++++++++++++++++--
 1 file changed, 87 insertions(+), 3 deletions(-)

diff --git a/src/views/pages/carPage/index.vue b/src/views/pages/carPage/index.vue
index c42e0fe..ee36c01 100644
--- a/src/views/pages/carPage/index.vue
+++ b/src/views/pages/carPage/index.vue
@@ -434,9 +434,21 @@
             <!-- 添加提交按钮 -->
             <el-form-item>
               <el-button type="primary"></el-button>
-              <el-button type="primary" @click="submitForm()"
+              <el-button
+                type="primary"
+                v-if="!send_Status"
+                :class="[btn_sendFlag ? '' : 'send_drp', `btnbg fs35 `]"
+                @click="submitForm()"
                 >下发指令</el-button
               >
+              <div class="send_box" v-else>
+                <span class="fs45">发送中</span> 
+                <div class="loading-dots">
+                  <span>.</span>
+                  <span>.</span>
+                  <span>.</span>
+                </div>
+              </div>
               <!-- @click="submitForm('formRef')" -->
               <!-- <el-button @click="resetForm('formRef')">清空</el-button> -->
             </el-form-item>
@@ -757,8 +769,10 @@ const handledata_time = (data_s: any, time_s: any) => {
   const formattedDate = `${year}-${month}-${day}`;
   return `${formattedDate} ${time_s}`;
 };
+let send_Status = ref(false); //发送中。。的状态
+let btn_sendFlag = ref(false); //发送按钮的状态
 const submitForm = () => {
-  console.log(formData, "1--------------formData");
+  send_Status.value = true; //显示 div 为发送中
   // let dataNew
   let datat_start = handledata_time(
     formData.value.start_date,
@@ -777,7 +791,19 @@ const submitForm = () => {
     startTime: datat_start,
     endTime: datat_end,
   };
-
+  setTimeout(() => {
+    send_Status.value=false
+   
+    ajustCarPageFlag.value=false
+  }, 2000);
+  setTimeout(() => {
+    ElMessage({
+      showClose: true,
+      message: "指令下发成功",
+      type: "success",
+    });
+  }, 3000);
+  // send_Status.value=false
   ajustInfo_api(datainput).then((res: any) => {
     console.log(res, "1-------car");
   });
@@ -1763,7 +1789,22 @@ const styleVar = computed(() => {
               font-size: changeHeight(30) !important;
               box-sizing: border-box;
             }
+            .send_drp {
+              cursor: no-drop; //禁用状态
+              color: #cccccc;
+            }
+            .btns {
+              cursor: pointer;
+              display: flex;
+              width: changeHeight(550);
+              justify-content: space-between;
+              font-size: changeHeight(35);
+              .send_box {
+                width: changeHeight(250);
+              }
+            }
           }
+
           // 时间选择器
           .el-select__wrapper {
             width: changeHeight(120);
@@ -2222,6 +2263,49 @@ const styleVar = computed(() => {
     }
   }
 }
+
+.loading-dots {
+  display: inline-block;
+  font-size: changeHeight(80); /* 根据需要调整大小 */
+  color: #58a7cb; /* 点的颜色 */
+}
+
+.loading-dots span {
+  animation: blink 1s step-start infinite;
+}
+.loading-dots span:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loading-dots span:nth-child(2) {
+  animation-delay: 0.2s; /* 每个点的延迟时间稍微减少一点 */
+}
+
+.loading-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.loading-dots span:nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+.loading-dots span:nth-child(5) {
+  animation-delay: 0.8s;
+}
+
+.loading-dots span:nth-child(6) {
+  animation-delay: 1s;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
 //滚动条样式
 /* 定义滚动条宽度 */
 ::-webkit-scrollbar {