Bladeren bron

顶部左上角菜单展开缩放按钮同步UI。智慧场景-智会议,会议室设备信息,鼠标悬浮显示名称。

DESKTOP-6LTVLN7\Liumouren 2 jaren geleden
bovenliggende
commit
9f6344d79c
2 gewijzigde bestanden met toevoegingen van 64 en 71 verwijderingen
  1. 58 65
      src/components/home/HomeHeader.vue
  2. 6 6
      src/components/scene/meeting/config/meetingRoomItem.vue

+ 58 - 65
src/components/home/HomeHeader.vue

@@ -1,25 +1,25 @@
 <script>
-import logoPng from '@/assets/images/logo.png'
+import logoPng from "@/assets/images/logo.png";
 
 export default {
   props: {
     leftVisible: Boolean,
-    isLogin: Boolean,
+    isLogin: Boolean
   },
-  emits: ['update:leftVisible'],
+  emits: ["update:leftVisible"],
   setup(props, context) {
     const methods = {
       toggleLeftVisible() {
-        const val = !props.leftVisible
-        context.emit('update:leftVisible', val)
-      },
-    }
-    return methods
+        const val = !props.leftVisible;
+        context.emit("update:leftVisible", val);
+      }
+    };
+    return methods;
   },
   data() {
     let validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'));
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
       } else if (value !== this.updPwdForm.newpwd) {
         callback(new Error("两次输入密码不匹配"));
       } else {
@@ -34,35 +34,32 @@ export default {
       updPwdForm: {},
       updPwdFormRules: {
         oldpwd: [
-          {required: true, message: '请输入密码', trigger: 'blur'},
-          {required: true, message: '请输入密码', trigger: 'change'},
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { required: true, message: "请输入密码", trigger: "change" }
         ],
         newpwd: [
-          {required: true, message: '请输入新密码', trigger: 'change'},
-          {min: 6, message: '长度至少为6位', trigger: 'change'},
+          { required: true, message: "请输入新密码", trigger: "change" },
+          { min: 6, message: "长度至少为6位", trigger: "change" }
         ],
-        confirmPwd: [
-          {validator: validatePass, trigger: 'change'},
-          {validator: validatePass, trigger: 'blur'},
-        ]
+        confirmPwd: [{ validator: validatePass, trigger: "change" }, { validator: validatePass, trigger: "blur" }]
       }
-    }
+    };
   },
   mounted() {
-    this.$store.paramStore().buildingId = '1';
+    this.$store.paramStore().buildingId = "1";
   },
   methods: {
     toNotice() {
-      this.$router.push({path: '/notice'})
+      this.$router.push({ path: "/notice" });
     },
     handleBuildingChange(val) {
       this.$store.paramStore().buildingId = val;
     },
     toUpdPassword() {
-      this.updPwdVisible = true
+      this.updPwdVisible = true;
     },
     handleOk() {
-      this.$message.warning('当前暂不允许修改密码');
+      this.$message.warning("当前暂不允许修改密码");
     },
     handleCancel() {
       this.updPwdVisible = false;
@@ -70,50 +67,42 @@ export default {
     },
     logout() {
       this.$store.userStore().logout();
-      this.$router.push('/login')
+      this.$router.push("/login");
     }
-  },
-}
+  }
+};
 </script>
 
 <template>
   <div class="header">
-    <div v-show="isLogin" class="fold" @click="toggleLeftVisible">
-      <a-icon type="unordered-list" class="icon"/>
-    </div>
+    <div v-show="isLogin" class="fold" @click="toggleLeftVisible"><a-icon type="unordered-list" class="icon" /></div>
     <div class="systemInfo">
-      <a-avatar class="logo" shape="square" :src="logoPng"/>
-      <div class="title">
-        智慧运营管理中心
-      </div>
+      <a-avatar class="logo" shape="square" :src="logoPng" />
+      <div class="title">智慧运营管理中心</div>
     </div>
 
     <div v-show="isLogin" class="project">
       <a-select class="project-select" default-value="1" @change="handleBuildingChange">
         <template #suffixIcon>
-          <a-icon type="caret-down" style="color: white"/>
+          <a-icon type="caret-down" style="color: white" />
         </template>
 
-        <a-select-option value="1">
-          主语国际3号楼
-        </a-select-option>
+        <a-select-option value="1"> 主语国际3号楼 </a-select-option>
       </a-select>
     </div>
 
     <div class="header-btn">
-      <a-icon type="desktop" class="icon"/>
-      <a-icon type="mobile" class="icon"/>
+      <a-icon type="desktop" class="icon" />
+      <a-icon type="mobile" class="icon" />
       <span v-show="isLogin">
-        <a-icon type="question-circle" class="icon"/>
-        <a-icon v-if="!hasMsg" type="bell" class="icon" @click="toNotice"/>
-        <a-badge v-if="hasMsg" dot :offset="[-15, 15]" @click="toNotice">
-          <a-icon type="bell" class="icon"/>
-        </a-badge>
+        <a-icon type="question-circle" class="icon" />
+        <a-icon v-if="!hasMsg" type="bell" class="icon" @click="toNotice" />
+        <a-badge v-if="hasMsg" dot :offset="[-15, 15]" @click="toNotice"> <a-icon type="bell" class="icon" /> </a-badge>
       </span>
     </div>
 
     <div v-show="isLogin" class="userInfo">
-      <a-avatar class="user-avatar" icon="user"/>
+      <a-avatar class="user-avatar" icon="user" />
 
       <a-dropdown>
         <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">
@@ -121,12 +110,8 @@ export default {
           <span style="display: inline-block;margin-left: 8px"> {{ $store.userStore().userInfo.userName }} </span>
         </a-button>
         <a-menu slot="overlay">
-          <a-menu-item>
-            <a href="javascript:;" style="text-align: center" @click="toUpdPassword">修改密码</a>
-          </a-menu-item>
-          <a-menu-item>
-            <a href="javascript:;" style="text-align: center" @click="logout">退出登录</a>
-          </a-menu-item>
+          <a-menu-item> <a href="javascript:;" style="text-align: center" @click="toUpdPassword">修改密码</a> </a-menu-item>
+          <a-menu-item> <a href="javascript:;" style="text-align: center" @click="logout">退出登录</a> </a-menu-item>
         </a-menu>
       </a-dropdown>
 
@@ -142,29 +127,33 @@ export default {
       <!--</div>-->
     </div>
 
-
     <!--修改密码-->
     <a-modal
-        title="修改密码"
-        v-if="updPwdVisible"
-        :visible="updPwdVisible"
-        :confirm-loading="confirmLoading"
-        @ok="handleOk"
-        @cancel="handleCancel"
+      title="修改密码"
+      v-if="updPwdVisible"
+      :visible="updPwdVisible"
+      :confirm-loading="confirmLoading"
+      @ok="handleOk"
+      @cancel="handleCancel"
     >
-      <a-form-model ref="updPwdForm" :model="updPwdForm" :rules="updPwdFormRules" :label-col="{span:4}" :wrapperCol="{span:18}">
+      <a-form-model
+        ref="updPwdForm"
+        :model="updPwdForm"
+        :rules="updPwdFormRules"
+        :label-col="{ span: 4 }"
+        :wrapperCol="{ span: 18 }"
+      >
         <a-form-model-item label="原密码" prop="oldpwd">
-          <a-input-password v-model="updPwdForm.oldpwd" placeholder="请输入原密码"/>
+          <a-input-password v-model="updPwdForm.oldpwd" placeholder="请输入原密码" />
         </a-form-model-item>
         <a-form-model-item label="新密码" prop="newpwd">
-          <a-input-password v-model="updPwdForm.newpwd" placeholder="请输入新密码"/>
+          <a-input-password v-model="updPwdForm.newpwd" placeholder="请输入新密码" />
         </a-form-model-item>
         <a-form-model-item label="确认密码" prop="confirmPwd">
-          <a-input-password v-model="updPwdForm.confirmPwd" placeholder="再次输入新密码"/>
+          <a-input-password v-model="updPwdForm.confirmPwd" placeholder="再次输入新密码" />
         </a-form-model-item>
       </a-form-model>
     </a-modal>
-
   </div>
 </template>
 
@@ -182,7 +171,12 @@ export default {
   }
 
   .fold {
-    margin: auto 2px;
+    margin: 0px;
+    width: 60px;
+    background: #266a99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .systemInfo {
@@ -250,7 +244,6 @@ export default {
 
     margin-left: auto;
   }
-
 }
 
 .icon {

+ 6 - 6
src/components/scene/meeting/config/meetingRoomItem.vue

@@ -6,20 +6,20 @@
           {{ obj.name }} <span style="font-size: 15px">{{ "[" + obj.timeRange[0] + "-" + obj.timeRange[1] + "]" }}</span>
         </div>
       </a-col>
-      <a-col :span="16">
+      <a-col :span="16" style="z-index:999;">
         <div class="meetingRoomItem-devices">
-          <!-- <a-tooltip placement="bottom" v-for="device in obj.devices" :key="device.id" title="test"> -->
           <div
             class="meetingRoomItem-device"
             v-for="device in obj.devices"
             :key="device.id"
             :style="{ backgroundColor: color.light }"
           >
-            <span class="anticon" style="color: white;font-size: 16px;padding: 2px"
-              ><a-icon style="color: white" :type="device.icon" />
-            </span>
+            <a-tooltip placement="bottom" :title="devicesMap[device.icon]">
+              <span class="anticon" style="color: white;font-size: 16px;padding: 2px;cursor: pointer;"
+                ><a-icon style="color: white" :type="device.icon" />
+              </span>
+            </a-tooltip>
           </div>
-          <!-- </a-tooltip> -->
         </div>
       </a-col>
       <a-col :span="8">