Merge branch 'main' into ft_local_dev

fengtao
2 parents 117ec55d 0950ebd2
Showing 11 changed files with 246 additions and 76 deletions
.env.development
.env.production
src/App.vue
src/components/Tree/src/Tree.vue
src/layouts/default/index.vue
src/views/alarm/log/hook/useAlarmNotify.ts
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/SplitScreenMode.vue
src/views/camera/manage/config.data.ts
src/views/common/organizationIdTree/src/OrganizationIdTree.vue
src/views/visual/board/config/panelDetail.ts
--- a/.env.development
View file @fc7bf03
+++ b/.env.development
View file @fc7bf03
@@ -45,5 +45,5 @@ VITE_CONTENT_SECURITY_POLICY = false
 # Alarm Notify Polling Interval Time
 VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 5000
-# Alarm Notify Auto Close Time
-VITE_ALARM_NOTIFY_DURATION = 5000
+# Alarm Notify Auto Close Time Unit is Second
+VITE_ALARM_NOTIFY_DURATION = 5
--- a/.env.production
View file @fc7bf03
+++ b/.env.production
View file @fc7bf03
@@ -46,5 +46,5 @@ VITE_CONTENT_SECURITY_POLICY = false
 # Alarm Notify Polling Interval Time
 VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 60000
-# Alarm Notify Auto Close Time
-VITE_ALARM_NOTIFY_DURATION = 5000
+# Alarm Notify Auto Close Time Unit is Second
+VITE_ALARM_NOTIFY_DURATION = 5
--- a/src/App.vue
View file @fc7bf03
+++ b/src/App.vue
View file @fc7bf03
@@ -8,7 +8,6 @@
 <script lang="ts" setup>
   import { ConfigProvider } from 'ant-design-vue';
-  import { useAlarmNotify } from './views/alarm/log/hook/useAlarmNotify';
   import { AppProvider } from '/@/components/Application';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
@@ -16,5 +15,4 @@
   const { getAntdLocale } = useLocale();
   useTitle();
-  useAlarmNotify();
 </script>
--- a/src/components/Tree/src/Tree.vue
View file @fc7bf03
+++ b/src/components/Tree/src/Tree.vue
View file @fc7bf03
@@ -31,7 +31,6 @@
   import { CreateContextOptions } from '/@/components/ContextMenu';
   import { CheckEvent } from './typing';
-  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
   interface State {
     expandedKeys: Keys;
@@ -52,13 +51,13 @@
       'update:searchValue',
     ],
     setup(props, { attrs, slots, emit, expose }) {
-      /**
-       * 作者自带Tree组件
-       * 新增显示隐藏
-       * ft
-       */
-      //ft
-      const isFlod = ref(false);
+      // /**
+      //  * 作者自带Tree组件
+      //  * 新增显示隐藏
+      //  * ft
+      //  */
+      // //ft
+      // const isFlod = ref(false);
       //ft
       const state = reactive<State>({
         checkStrictly: props.checkStrictly,
@@ -234,9 +233,9 @@
       }
       //ft
-      function handleFlodOrUnFoldFunc(v) {
-        isFlod.value = v;
-      }
+      // function handleFlodOrUnFoldFunc(v) {
+      //   isFlod.value = v;
+      // }
       //ft
       function handleClickNode(key: string, children: TreeItem[]) {
         if (!props.clickRowToExpand || !children || children.length === 0) return;
@@ -419,7 +418,7 @@
         const showTitle = title || toolbar || search || slots.headerTitle;
         const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
         return (
-          <div style={isFlod.value ? '' : 'width:0vw'} class={[prefixCls, 'h-full', attrs.class]}>
+          <div class={[prefixCls, 'h-full', attrs.class]}>
             {showTitle && (
               <TreeHeader
                 style={'position:relative'}
@@ -448,23 +447,6 @@
             </ScrollContainer>
             <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
-            <span
-              v-show={unref(isFlod)}
-              onClick={() => handleFlodOrUnFoldFunc(false)}
-              class={['is-flod', unref(isFlod) ? 'fold-right' : 'fold-left']}
-            >
-              <DoubleLeftOutlined />
-            </span>
-            <span
-              v-show={!unref(isFlod) && unref(treeDataRef).length != 0}
-              onClick={() => handleFlodOrUnFoldFunc(true)}
-              class={[
-                'is-unflod',
-                !unref(isFlod) && unref(treeDataRef).length != 0 ? 'fold-left' : 'fold-right',
-              ]}
-            >
-              <DoubleRightOutlined />
-            </span>
           </div>
         );
       };
@@ -481,6 +463,7 @@
       top: 0.85rem;
       left: 1.1vw;
     }
+
     .fold-right {
       z-index: 1;
       cursor: pointer;
--- a/src/layouts/default/index.vue
View file @fc7bf03
+++ b/src/layouts/default/index.vue
View file @fc7bf03
@@ -29,6 +29,7 @@
   import { useLockPage } from '/@/hooks/web/useLockPage';
   import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useAlarmNotify } from '/@/views/alarm/log/hook/useAlarmNotify';
   export default defineComponent({
     name: 'DefaultLayout',
@@ -57,7 +58,7 @@
         }
         return cls;
       });
-
+      useAlarmNotify();
       return {
         getShowFullHeaderRef,
         getShowSidebar,
--- a/src/views/alarm/log/hook/useAlarmNotify.ts
View file @fc7bf03
+++ b/src/views/alarm/log/hook/useAlarmNotify.ts
View file @fc7bf03
@@ -4,6 +4,9 @@ import { notification, Button, Tag } from 'ant-design-vue';
 import { h, onMounted, onUnmounted } from 'vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { alarmLevel } from '/@/views/device/list/config/detail.config';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useUserStore } from '/@/store/modules/user';
 interface UseAlarmNotifyParams {
   alarmNotifyStatus?: AlarmStatus;
@@ -44,7 +47,7 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
         notification.open({
           message: '设备告警',
-          duration,
+          duration: Number(duration),
           key,
           description: h('div', {}, [
             h('div', { style: { marginRight: '5px' } }, [
@@ -88,8 +91,22 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
     }, interval);
   };
+  const { hasPermission } = usePermission();
+
   onMounted(() => {
-    polling();
+    const alarmPermissionKey = 'api:alarm:global:notify';
+    const hasPermissionRole = [RoleEnum.CUSTOMER_USER, RoleEnum.TENANT_ADMIN];
+    const userInfo = useUserStore().getUserInfo;
+    const userRoles = userInfo.roles || [];
+
+    const getPermissionFlag = () => {
+      for (const item of userRoles) {
+        const flag = hasPermissionRole.find((each) => item === each);
+        if (flag) return true;
+      }
+      return false;
+    };
+    if (hasPermission(alarmPermissionKey) && getPermissionFlag()) polling();
   });
   onUnmounted(() => {
--- a/src/views/camera/manage/DialogPreviewVideo.vue
View file @fc7bf03
+++ b/src/views/camera/manage/DialogPreviewVideo.vue
View file @fc7bf03
@@ -19,6 +19,12 @@
           />
         </div>
       </div>
+      <!-- <div
+        class="bg-black h-80 text-light-50 w-full h-full flex justify-center items-center"
+        v-if="!showVideo"
+      >
+        视频播放出错啦!
+      </div> -->
     </BasicModal>
   </div>
 </template>
@@ -28,14 +34,9 @@
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
   import { videoPlay } from 'vue3-video-play'; // 引入组件
   import 'vue3-video-play/dist/style.css'; // 引入css
-  import { AccessMode } from './config.data';
+  import { AccessMode, MediaType } from './config.data';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
-  enum MediaType {
-    MP4 = 'mp4',
-    M3U8 = 'm3u8',
-  }
-
   const heightNum = ref(800);
   const showVideo = ref(false);
   const options = reactive({
@@ -94,7 +95,10 @@
           options.src = url;
           const type = (url as CameraModel).videoUrl.replace(reg, '');
           options.type = getMediaType(type);
-        } catch (error) {}
+        } catch (error) {
+        } finally {
+          showVideo.value = true;
+        }
       }
     }
   );
--- a/src/views/camera/manage/SplitScreenMode.vue
View file @fc7bf03
+++ b/src/views/camera/manage/SplitScreenMode.vue
View file @fc7bf03
@@ -2,33 +2,42 @@
   import { PageWrapper } from '/@/components/Page';
   import OrganizationIdTree from '../../common/organizationIdTree/src/OrganizationIdTree.vue';
   import { computed, onMounted, reactive, ref, unref, watch } from 'vue';
-  import { Tabs, Row, Col, Spin, Button } from 'ant-design-vue';
+  import { Tabs, Row, Col, Spin, Button, Pagination, Empty } from 'ant-design-vue';
   import { cameraPage } from '/@/api/camera/cameraManager';
   import { CameraRecord } from '/@/api/camera/model/cameraModel';
-  import { videoPlay as VideoPlay } from 'vue3-video-play'; // 引入组件
-  import 'vue3-video-play/dist/style.css'; // 引入css
+  import { videoPlay as VideoPlay } from 'vue3-video-play';
+  import 'vue3-video-play/dist/style.css';
   import { useFullscreen } from '@vueuse/core';
   import CameraDrawer from './CameraDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { PageMode } from './config.data';
+  import { AccessMode, MediaType, PageMode } from './config.data';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
+  import { isDef } from '/@/utils/is';
+  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+
+  type CameraRecordItem = CameraRecord & {
+    canPlay?: boolean;
+    type?: string;
+    isTransform?: boolean;
+  };
   const emit = defineEmits(['switchMode']);
   const organizationIdTreeRef = ref(null);
   const videoContainer = ref<Nullable<HTMLDivElement>>(null);
   const activeKey = ref(PageMode.SPLIT_SCREEN_MODE);
-  const cameraList = ref<CameraRecord[]>([]);
+  const cameraList = ref<CameraRecordItem[]>([]);
   const organizationId = ref<Nullable<string>>(null);
   const loading = ref(false);
   const pagination = reactive({
     page: 1,
     pageSize: 4,
     colNumber: 2,
+    total: 0,
   });
   const options = reactive({
-    width: '800px',
-    height: '450px',
+    width: '200px',
+    height: '200px',
     color: '#409eff',
     muted: false, //静音
     webFullScreen: false,
@@ -39,9 +48,7 @@
     ligthOff: false, //关灯模式
     volume: 0.3, //默认音量大小
     control: true, //是否显示控制器
-    title: '', //视频名称
     type: 'm3u8',
-    src: '', //视频源
     controlBtns: [
       'audioTrack',
       'quality',
@@ -68,21 +75,63 @@
   const getCameraList = async () => {
     try {
       loading.value = true;
-      const { items } = await cameraPage({
-        page: 1,
+      const { items, total } = await cameraPage({
+        page: pagination.page,
         pageSize: pagination.pageSize,
         organizationId: unref(organizationId)!,
       });
+      pagination.total = total;
+
+      for (const item of items) {
+        // await beforeVideoPlay(item);
+        (item as CameraRecordItem).isTransform = false;
+        beforeVideoPlay(item);
+      }
       cameraList.value = items;
     } catch (error) {
     } finally {
       loading.value = false;
     }
   };
+  const getMediaType = (suffix: string) => {
+    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
+  };
+
+  const beforeVideoPlay = async (record: CameraRecordItem) => {
+    let reg = /(?:.*)(?<=\.)/;
+    if (record.accessMode === AccessMode.ManuallyEnter) {
+      if (record.videoUrl) {
+        const type = record.videoUrl.replace(reg, '');
+        record.type = getMediaType(type);
+        record.isTransform = true;
+      }
+    }
+    if (record.accessMode === AccessMode.Streaming) {
+      try {
+        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+        const type = url.replace(reg, '');
+        const index = unref(cameraList).findIndex((item) => item.id === record.id);
+        if (~index) {
+          const oldRecord = unref(cameraList).at(index)!;
+          unref(cameraList)[index] = {
+            ...oldRecord,
+            videoUrl: url,
+            type: getMediaType(type),
+            isTransform: true,
+          };
+        }
+      } catch (error) {
+      } finally {
+        const index = unref(cameraList).findIndex((item) => item.id === record.id);
+        if (~index) unref(cameraList)[index].isTransform = true;
+      }
+    }
+  };
   const handleSwitchLayoutWay = (pageSize: number, layout: number) => {
     pagination.colNumber = layout;
     pagination.pageSize = pageSize;
+    pagination.page = 1;
     getCameraList();
   };
@@ -104,6 +153,20 @@
     }
   };
+  const handleLoadStart = (record: CameraRecordItem) => {
+    const index = unref(cameraList).findIndex((item) => item.id === record.id);
+    setTimeout(() => {
+      ~index &&
+        !unref(cameraList).at(index)!.canPlay &&
+        (unref(cameraList).at(index)!.canPlay = false);
+    }, 30000);
+  };
+
+  const handleLoadData = (record: CameraRecordItem) => {
+    const index = unref(cameraList).findIndex((item) => item.id === record.id);
+    ~index && (unref(cameraList).at(index)!.canPlay = true);
+  };
+
   const [registerDrawer, { openDrawer }] = useDrawer();
   const handleAddCamera = () => {
@@ -145,6 +208,18 @@
             >
               <SvgIcon class="text-2xl" prefix="iconfont" name="grid-nine" />
             </div>
+            <div>
+              <Pagination
+                v-model:current="pagination.page"
+                :total="pagination.total"
+                :page-size="pagination.pageSize"
+                :show-size-changer="false"
+                @change="getCameraList"
+                :simple="true"
+                :show-quick-jumper="true"
+                :show-total="(total) => `共 ${total} 条`"
+              />
+            </div>
           </div>
           <div class="flex items-center gap-4">
             <div class="flex">
@@ -159,6 +234,10 @@
         </div>
         <section ref="videoContainer" class="bg-light-50 flex-auto">
           <Spin :spinning="loading" class="h-full">
+            <Empty
+              class="h-full flex flex-col justify-center items-center"
+              v-if="!cameraList.length"
+            />
             <Row :gutter="16" class="h-full mx-0">
               <Col
                 v-for="item in cameraList"
@@ -168,8 +247,31 @@
                 :span="getColLayout"
               >
                 <div class="box-border w-full h-full p-3">
-                  <div class="bg-yellow-50 w-full h-full overflow-hidden">
-                    <VideoPlay v-bind="options" :src="item.videoUrl" />
+                  <div class="bg-black w-full h-full overflow-hidden relative video-container">
+                    <Spin v-show="!item.isTransform" :spinning="!item.isTransform">
+                      <div class="bg-black text-light-50"> </div>
+                    </Spin>
+                    <VideoPlay
+                      v-show="item.isTransform"
+                      @loadstart="handleLoadStart(item)"
+                      @loadeddata="handleLoadData(item)"
+                      v-bind="options"
+                      :src="item.videoUrl"
+                      :title="item.name"
+                      :type="item.type"
+                    />
+                    <div
+                      v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay"
+                      class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black"
+                    >
+                      视频加载出错了！
+                    </div>
+                    <div
+                      class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
+                      style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
+                    >
+                      <span>{{ item.name }}</span>
+                    </div>
                   </div>
                 </div>
               </Col>
@@ -203,4 +305,33 @@
   .split-screen-mode:deep(.ant-tabs-tab-active) {
     border-bottom: 1px solid #eee;
   }
+
+  .split-screen-mode:deep(video) {
+    position: absolute;
+    height: calc(100%) !important;
+  }
+
+  .split-screen-mode:deep(.d-player-control) {
+    z-index: 99;
+  }
+
+  .video-container {
+    .video-container-mask {
+      opacity: 0;
+      transition: opacity 0.5;
+      pointer-events: none;
+    }
+
+    &:hover {
+      .video-container-mask {
+        opacity: 1;
+      }
+
+      .video-container-error-msk {
+        // opacity: 0;
+        // visibility: hidden;
+        color: #000;
+      }
+    }
+  }
 </style>
--- a/src/views/camera/manage/config.data.ts
View file @fc7bf03
+++ b/src/views/camera/manage/config.data.ts
View file @fc7bf03
@@ -29,6 +29,11 @@ export enum PageMode {
   FULL_SCREEN_MODE = 'fullScreenMode',
 }
+export enum MediaType {
+  MP4 = 'mp4',
+  M3U8 = 'm3u8',
+}
+
 // 表格列数据
 export const columns: BasicColumn[] = [
   {
@@ -58,7 +63,7 @@ export const columns: BasicColumn[] = [
     width: 160,
   },
   {
-    title: '接受方式',
+    title: '获取方式',
     dataIndex: 'accessMode',
     width: 100,
     slots: { customRender: 'accessMode' },
--- a/src/views/common/organizationIdTree/src/OrganizationIdTree.vue
View file @fc7bf03
+++ b/src/views/common/organizationIdTree/src/OrganizationIdTree.vue
View file @fc7bf03
 <template>
-  <div style="position: absolute"> </div>
-  <div class="bg-white m-4 mr-0 overflow-hidden">
-    <BasicTree
-      title="组织列表"
-      toolbar
-      search
-      :clickRowToExpand="false"
-      :treeData="treeData"
-      :expandedKeys="treeExpandData"
-      :replaceFields="{ key: 'id', title: 'name' }"
-      :selectedKeys="selectedKeys"
-      @select="handleSelect"
-      v-bind="$attrs"
-    />
+  <div class="organization-tree flex relative">
+    <div class="cursor-pointer flex py-4 fold-icon" :class="foldFlag ? 'absolute' : ''">
+      <div @click="handleFold">
+        <DoubleRightOutlined :class="[foldFlag ? '' : 'rotate-180']" class="text-xl transform" />
+      </div>
+    </div>
+    <div
+      :style="{ width: foldFlag ? '0px' : '100%' }"
+      :class="[foldFlag ? '' : 'my-4 ml-2']"
+      class="bg-white mr-0 overflow-hidden"
+    >
+      <BasicTree
+        title="组织列表"
+        toolbar
+        search
+        :clickRowToExpand="false"
+        :treeData="treeData"
+        :expandedKeys="treeExpandData"
+        :replaceFields="{ key: 'id', title: 'name' }"
+        :selectedKeys="selectedKeys"
+        @select="handleSelect"
+        v-bind="$attrs"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="OrganizationIdTree">
-  import { onMounted, ref } from 'vue';
+  import { onMounted, ref, unref } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { getOrganizationList } from '/@/api/system/system';
+  import { DoubleRightOutlined } from '@ant-design/icons-vue';
   const emit = defineEmits(['select']);
   const treeData = ref<TreeItem[]>([]);
@@ -37,6 +48,12 @@
   function resetOrganization() {
     selectedKeys.value = [];
   }
+
+  const foldFlag = ref(true);
+  const handleFold = () => {
+    foldFlag.value = !unref(foldFlag);
+  };
+
   onMounted(async () => {
     treeData.value = (await getOrganizationList()) as unknown as TreeItem[];
     const getAllIds = findForAllId(treeData.value as any, []);
@@ -47,3 +64,17 @@
     resetOrganization,
   });
 </script>
+
+<style scoped lang="less">
+  .organization-tree {
+    .expand {
+      opacity: 0;
+    }
+
+    &:hover {
+      .expand {
+        opacity: 1;
+      }
+    }
+  }
+</style>
--- a/src/views/visual/board/config/panelDetail.ts
View file @fc7bf03
+++ b/src/views/visual/board/config/panelDetail.ts
View file @fc7bf03
@@ -35,7 +35,7 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: 'viewType',
-    label: '名称',
+    label: '公开性',
     component: 'RadioGroup',
     defaultValue: ViewType.PRIVATE_VIEW,
     helpMessage: [
@@ -45,7 +45,7 @@ export const formSchema: FormSchema[] = [
       placeholder: '请选择公开性',
       options: [
         { label: '私有看板', value: ViewType.PRIVATE_VIEW },
-        { label: '公开看板', value: ViewType.PUBLIC_VIEW },
+        { label: '公开看板', value: ViewType.PUBLIC_VIEW, disabled: true },
       ],
     },
   },