fix🐛: 权限绑定

.env.development

@@ -7,4 +7,4 @@ VITE_APP_TITLE = 智能安全管控平台
 VITE_APP_PREFIX = demo
 
 # 网络请求
-VITE_APP_API_BASEURL = http://192.168.211.58:8082/api/mr
+VITE_APP_API_BASEURL = http://192.168.105.40:8082/api/mr

src/App.vue

@@ -15,6 +15,7 @@
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
   const useSystem = useOutsideSystemStore()
+  useSystem.getPermissions()
 
   const locale = shallowRef(zhCN)
   const dateLocale = shallowRef(dateZhCN)

src/components/UniversalWindow/components/uwMenu.vue

@@ -59,7 +59,7 @@
       icon: 'material-symbols-light:frame-source-sharp',
       w: '40',
       h: '20',
-      auth: [],
+      auth: ['mrpartScreenMenu'],
       uuid: uuidv4().substring(0, 8)
     },
     {
@@ -68,7 +68,7 @@
       icon: 'fluent:cursor-click-24-regular',
       w: '40',
       h: '22',
-      auth: [],
+      auth: ['mrglanceViewMenu'],
       uuid: uuidv4().substring(0, 8)
     },
     {
@@ -77,7 +77,7 @@
       icon: 'lucide:rotate-3d',
       w: '40',
       h: '18',
-      auth: [],
+      auth: ['mradvancedLinkageMenu'],
       uuid: uuidv4().substring(0, 8)
     },
     // {
@@ -95,7 +95,7 @@
       icon: 'mdi:transit-detour',
       w: '40',
       h: '20',
-      auth: [],
+      auth: ['mrtourMenu'],
       uuid: uuidv4().substring(0, 8)
     }
   ])

src/directives/modules/auth.js

@@ -11,18 +11,21 @@ const useSystem = useOutsideSystemStore()
 export default {
   mounted(el, { value }) {
     // 获取用户的所有权限列表
-    const permissions = useSystem.permissions || []
-
     if (Array.isArray(value)) {
       if (!value.length) return
-
-      // 检查是否有任意一个权限匹配
-      const hasPermission = value.some((permission) => permissions.includes(permission))
-
-      // 如果没有权限，则移除元素
-      if (!hasPermission) {
-        el.parentNode?.removeChild(el)
-      }
+      watch(
+        () => useSystem.permissions,
+        (permissions) => {
+          // 检查是否有任意一个权限匹配
+          const hasPermission = value.some((permission) => permissions.includes(permission))
+
+          // 如果没有权限，则移除元素
+          if (!hasPermission) {
+            el.parentNode?.removeChild(el)
+          }
+        },
+        { immediate: true }
+      )
     } else {
       console.error(new Error('v-auth自定义指令需要传入数组！！！'))
     }

src/layout/LayoutMain.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="layout-main flex-1 h-0 relative color-#f0f0f0">
     <!-- <div class="layout-main-left absolute left-15px top-70px"> -->
-    <div class="layout-main-left absolute left-15px top-15px">
+    <div class="layout-main-left absolute left-15px top-15px" v-auth="['mrdashboardShow']">
       <slot name="left"></slot>
     </div>
-    <div class="layout-main-right absolute right-15px top-15px">
+    <div class="layout-main-right absolute right-15px top-15px" v-auth="['mrdashboardShow']">
       <slot name="right"></slot>
     </div>
     <div class="layout-main-bottom w-50% absolute left-50% translate-x-[-50%] bottom--1066px">

src/layout/Three3D/index.vue

@@ -10,6 +10,7 @@
       :fill-border-radius="0"
     />
     <RightClick
+      v-auth="['mraddPointBtn']"
       v-model="rightClickD.show"
       :flag="rightClickFlag"
       :x="rightClickD.x"
@@ -31,7 +32,7 @@
   import { onMounted, onUnmounted, provide, ref } from 'vue'
   import { useOutsideHomeStore } from '@/stores/modules/home'
   import { useOutsideSystemStore } from '@/stores/modules/system'
-  import { getAutofitScale, $mitt } from '@/utils'
+  import { getAutofitScale, $mitt, hasPermission } from '@/utils'
   import storage from '@/utils/storage'
   import RightClick from './components/rightClick.vue'
 
@@ -226,6 +227,12 @@
           duration: 1,
           ease: 'power1.inOut',
           onComplete: async () => {
+            if (
+              useSystemStore.permissions &&
+              !hasPermission(['mrdevicePointShow'], useSystemStore.permissions)
+            ) {
+              return
+            }
             const res = await API_MR_CAMERA_GET()
             // const sprites = [
             //   { x: 1.5, y: 0.7, z: 0 },

src/stores/modules/system.js

@@ -5,7 +5,7 @@ import { useNotification, useModal, NButton } from 'naive-ui'
 import { h } from 'vue'
 import { useOutsideHomeStore } from './home'
 import AlarmVideo from '../../views/VideoBox/components/AlarmVideo.vue'
-import { getAutofitScale } from '@/utils'
+import { hasPermission } from '@/utils'
 import { Events } from '@/utils/enum'
 import mqtt from 'mqtt'
 
@@ -101,6 +101,9 @@ export const useSystemStore = defineStore('systemStore', {
     },
     // 连接报警信息
     async connectAlarmWS() {
+      if (this.permissions && !hasPermission(['mralarmMessageList'], this.permissions)) {
+        return
+      }
       const useHomeStore = useOutsideHomeStore()
       const notification = useNotification()
       const alarmModel = useModal()
@@ -171,33 +174,35 @@ export const useSystemStore = defineStore('systemStore', {
                       dayjs(parseInt(`${data.time}`.padEnd(13, '0'))).format('YYYY-MM-DD HH:mm:ss')
                     )
                   ]),
-                  h(
-                    NButton,
-                    {
-                      text: true,
-                      onClick: () => {
-                        alarmModel.create({
-                          title: d.eventTypes,
-                          preset: 'card',
-                          maskClosable: false,
-                          style: {
-                            width: '50%',
-                            marginTop: '10%'
-                          },
-                          content: () =>
-                            h(AlarmVideo, {
-                              alarm: d
+                  that.permissions && !hasPermission(['mralarmVideoShow'], this.permissions)
+                    ? null
+                    : h(
+                        NButton,
+                        {
+                          text: true,
+                          onClick: () => {
+                            alarmModel.create({
+                              title: d.eventTypes,
+                              preset: 'card',
+                              maskClosable: false,
+                              style: {
+                                width: '50%',
+                                marginTop: '10%'
+                              },
+                              content: () =>
+                                h(AlarmVideo, {
+                                  alarm: d
+                                })
                             })
-                        })
-                      }
-                    },
-                    () =>
-                      // h('div', {
-                      //   class: 'i-fluent-eye-48-regular',
-                      //   style: { width: '28px', height: '28px', padding: '5px' }
-                      // })
-                      '查看'
-                  )
+                          }
+                        },
+                        () =>
+                          // h('div', {
+                          //   class: 'i-fluent-eye-48-regular',
+                          //   style: { width: '28px', height: '28px', padding: '5px' }
+                          // })
+                          '查看'
+                      )
                 ])
             })
           }

src/utils/index.js

@@ -97,6 +97,9 @@ function getCorrectMousePosition(event, container) {
 }
 const getAutofitScale = () => document.body.style.transform.split('(')[2].split(')')[0]
 
+const hasPermission = (value, permissions) =>
+  value.some((permission) => permissions.includes(permission))
+
 export {
   getStaticResource,
   msg,
@@ -106,5 +109,6 @@ export {
   getContainerTransform,
   getCorrectMousePosition,
   dialogFn,
-  getAutofitScale
+  getAutofitScale,
+  hasPermission
 }

src/views/VideoBox/index.vue

@@ -28,6 +28,7 @@
                 v-for="item in listComputed"
                 class="mr-3 last:mr-0"
                 :key="item.iCom"
+                v-auth="item.auth"
                 @click.stop="toolsHandler(item.type)"
               >
                 <div
@@ -50,16 +51,18 @@
               @click="magnifying(!magnifyingFlag)"
             ></span>
             <!-- 全屏按钮 -->
-            <span
-              v-if="isFullscreen"
-              class="block size-28px color-#8ac5ff cursor-pointer i-icon-park-outline:off-screen"
-              @click="toggle"
-            ></span>
-            <span
-              v-else
-              class="block size-28px color-#8ac5ff cursor-pointer i-iconamoon:screen-full"
-              @click="toggle"
-            ></span>
+            <div v-auth="['mrfullScreenBtn']">
+              <span
+                v-if="isFullscreen"
+                class="block size-28px color-#8ac5ff cursor-pointer i-icon-park-outline:off-screen"
+                @click="toggle"
+              ></span>
+              <span
+                v-else
+                class="block size-28px color-#8ac5ff cursor-pointer i-iconamoon:screen-full"
+                @click="toggle"
+              ></span>
+            </div>
           </div>
           <div
             v-if="loading"
@@ -70,8 +73,14 @@
         </div>
       </UseFullscreen>
 
-      <TagBox v-for="(tag, i) in tagList" :key="i" :index="i" :tag="tag"></TagBox>
-      <RightClick v-model="isShow" :x="xy.x" :y="xy.y" />
+      <TagBox
+        v-auth="['mrpanoramicTagShow']"
+        v-for="(tag, i) in tagList"
+        :key="i"
+        :index="i"
+        :tag="tag"
+      ></TagBox>
+      <RightClick v-auth="['mrtagCreationBtn']" v-model="isShow" :x="xy.x" :y="xy.y" />
     </div>
   </div>
 </template>
@@ -210,7 +219,8 @@
       color: '#8ac5ff',
       type: 'hf',
       w: 25,
-      h: 25
+      h: 25,
+      auth: ['mrpanoramicPlaybackBtn']
     },
     {
       iCom: 'i-iconoir:screenshot',
@@ -218,7 +228,8 @@
       color: '#8ac5ff',
       type: 'jt',
       w: 25,
-      h: 25
+      h: 25,
+      auth: ['mrscreenshotBtn']
     },
     {
       iCom: 'i-gala-video',
@@ -227,7 +238,8 @@
       color: '#8ac5ff',
       class: '',
       w: 30,
-      h: 30
+      h: 30,
+      auth: ['mrrecordingBtn']
     }
   ])
   const state = ref(false)

src/views/home/home.vue

@@ -86,7 +86,6 @@
   }
 
   useSystem.connectAlarmWS()
-  useSystem.getPermissions()
 </script>
 
 <style>

src/views/home/leftbox/index.vue

@@ -11,7 +11,7 @@
       <MiddleBox />
     </Box>
     <Box title="实时预警情况" class="animate__animated animate__fadeInLeft animate__1s">
-      <HistoryAlarm />
+      <HistoryAlarm v-auth="['mrhistoricalAlarmBtn']" />
       <BottomBox />
     </Box>
   </div>