From ed58b6c48482f67d8c13ad7d6ae2a7e355ae056b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 30 May 2025 17:11:46 +0800
Subject: [PATCH] feat:适配调整

---
 src/views/device/fly.vue |  121 +++++++++++++++++++++++++---------------
 1 files changed, 76 insertions(+), 45 deletions(-)

diff --git a/src/views/device/fly.vue b/src/views/device/fly.vue
index a3a8ac8..2fd28b2 100644
--- a/src/views/device/fly.vue
+++ b/src/views/device/fly.vue
@@ -1,6 +1,7 @@
 <template>
   <basic-container>
     <avue-crud
+      id="device"
       :option="option"
       :table-loading="loading"
       :data="data"
@@ -34,24 +35,13 @@
         <el-tag>{{ row.dept_name }}</el-tag>
       </template>
       <template #status="{ row }">
-        <div
-          v-if="row.status == true"
-          class="onlineStatus"
-         
-        >
-          <div
-            class="onlineStatus-dot"
-          ></div>
-          <span style="margin-left: 5px">在线</span>
+        <div v-if="row.status == true" class="onlineStatus">
+          <div class="onlineStatus-dot"></div>
+          <span class="online" >在线</span>
         </div>
-        <div
-          v-if="row.status == false"
-           class="onlineStatus"
-        >
-          <div
-           class="onlineStatus-dot1"
-          ></div>
-          <span style="margin-left: 5px">离线</span>
+        <div v-if="row.status == false" class="onlineStatus">
+          <div class="onlineStatus-dot1"></div>
+          <span class="online">离线</span>
         </div>
       </template>
       <template #menu="scope">
@@ -74,12 +64,28 @@
       </template>
     </avue-crud>
     <el-dialog title="操控密码设置" append-to-body v-model="operatePasswordSetBox" width="455px">
-      <el-form :model="passwordForm" ref="passwordForm" label-width="80px" :rules="rules" v-loading="loadingForm">
+      <el-form
+        :model="passwordForm"
+        ref="passwordForm"
+        label-width="80px"
+        :rules="rules"
+        v-loading="loadingForm"
+      >
         <el-form-item label="密码" prop="password">
-          <el-input type="password" v-model="passwordForm.password" placeholder="请输入密码" show-password></el-input>
+          <el-input
+            type="password"
+            v-model="passwordForm.password"
+            placeholder="请输入密码"
+            show-password
+          ></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="password2">
-          <el-input type="password" v-model="passwordForm.password2" placeholder="请输入确认密码" show-password></el-input>
+          <el-input
+            type="password"
+            v-model="passwordForm.password2"
+            placeholder="请输入确认密码"
+            show-password
+          ></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -96,7 +102,15 @@
 </template>
 
 <script>
-import { getList, remove, update, add, getDetail,getOperatePassword,operatePasswordUpdate } from '@/api/device/device';
+import {
+  getList,
+  remove,
+  update,
+  add,
+  getDetail,
+  getOperatePassword,
+  operatePasswordUpdate,
+} from '@/api/device/device';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -118,15 +132,15 @@
       }
     };
     return {
-      loadingForm:false,
+      loadingForm: false,
       rules: {
         password: [{ required: true, validator: validatePass, trigger: 'blur' }],
         password2: [{ required: true, validator: validatePass2, trigger: 'blur' }],
       },
-      passwordForm:{
-        id:'',
-        password:'',
-        password2:'',
+      passwordForm: {
+        id: '',
+        password: '',
+        password2: '',
       },
       operatePasswordSetBox: false,
       operatePasswordViewBox: false,
@@ -141,9 +155,9 @@
       },
       selectionList: [],
       option: {
-        height: '460',
-        calcHeight: 32,
-        dialogWidth: 950,
+        // height: '460',
+        // calcHeight: 32,
+        // dialogWidth: 950,
         tip: false,
         searchShow: true,
         searchMenuSpan: 6,
@@ -345,14 +359,14 @@
         if (valid) {
           this.loadingForm = true;
           const data = {
-            id:this.passwordForm.id,
-            operate_password: this.passwordForm.password
-          }
+            id: this.passwordForm.id,
+            operate_password: this.passwordForm.password,
+          };
           // 提交
           operatePasswordUpdate(data).then(res => {
             this.loadingForm = false;
             this.operatePasswordSetBox = false;
-            that.passwordForm = {}
+            that.passwordForm = {};
             this.onLoad(this.page);
             this.$message({
               type: 'success',
@@ -368,22 +382,22 @@
     // 操作密码设置
     handleOperatePassword(row) {
       this.operatePasswordSetBox = true;
-      this.passwordForm.id = row.id
+      this.passwordForm.id = row.id;
     },
-    viewOperatePassword(row){
+    viewOperatePassword(row) {
       this.operatePasswordViewBox = true;
       // 查询密码
-      getOperatePassword(row.id).then(res=>{
-         this.operate_password = res.data.data;
-      })
+      getOperatePassword(row.id).then(res => {
+        this.operate_password = res.data.data;
+      });
     },
     init() {
-      this.page= {
+      (this.page = {
         pageSize: 10,
         currentPage: 1,
         total: 0,
-      },
-      this.onLoad(this.page);
+      }),
+        this.onLoad(this.page);
     },
     rowSave(row, done, loading) {
       add(row).then(
@@ -526,16 +540,33 @@
 </script>
 
 <style lang="scss" scoped>
+:deep(#device .el-card__body .avue-crud__body .el-form) {
+  height: 655px !important;
+  overflow: auto;
+}
+.online {
+  margin-left: 5px;
+}
 .onlineStatus1 {
-display: flex; flex-direction: column; align-items: center
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .onlineStatus {
-display: flex; flex-direction: row; align-items: center
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .onlineStatus-dot {
-width: 15px; height: 15px; background-color: #40cb8b; border-radius: 50%
+  width: 15px;
+  height: 15px;
+  background-color: #40cb8b;
+  border-radius: 50%;
 }
 .onlineStatus-dot1 {
-width: 15px; height: 15px; background-color: #de5e5e; border-radius: 50%
+  width: 15px;
+  height: 15px;
+  background-color: #de5e5e;
+  border-radius: 50%;
 }
 </style>

--
Gitblit v1.9.3