增加视频监控页面

apps/web-antd/src/views/sis/video/channel-tree.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { onMounted, ref } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
+import { treeList } from '#/api/sis/deviceChannel';
+import type { TreeNode } from '#/api/common';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  /**
+   * 点击刷新按钮的事件
+   */
+  reload: [];
+  /**
+   * 点击节点的事件
+   */
+  select: [];
+}>();
+
+const channelId = defineModel('channelId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+/** 通道数据源 */
+const channelTree = ref<TreeNode[]>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadChannelTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  channelId.value = [];
+  const ret = await treeList();
+  channelTree.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadChannelTree();
+  emit('reload');
+}
+
+onMounted(loadChannelTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div
+          v-if="showSearch"
+          class="bg-background z-100 sticky left-0 top-0 p-[8px]"
+        >
+          <InputSearch
+            v-model:value="searchValue"
+            :placeholder="$t('pages.common.search')"
+            size="small"
+          >
+            <template #enterButton>
+              <a-button @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </a-button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-bind="$attrs"
+            v-if="channelTree.length > 0"
+            v-model:selected-keys="channelId"
+            :class="$attrs.class"
+            :field-names="{ title: 'label', key: 'id' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="channelTree"
+            :virtual="false"
+            default-expand-all
+            @select="$emit('select')"
+          >
+            <template #title="{ label }">
+              <span v-if="label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{
+                  label.substring(
+                    label.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>

apps/web-antd/src/views/sis/video/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <Page class="h-full w-full">
+    <!--  设备分组区域  -->
+    <div class="flex h-full gap-[8px]">
+      <ChannelTree v-model:channel-id="channelId" class="w-[260px]" />
+
+      <!--  设备分组区域  -->
+      <div class="bg-background flex-1">
+        <div class="video-play-area h-[calc(100%-40px)]">
+          <div
+            v-for="i in playerNum"
+            class="player"
+            :class="'player-' + i"
+          ></div>
+        </div>
+        <div class="player-area h-[40px]">
+
+        </div>
+      </div>
+    </div>
+  </Page>
+  >
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Page } from '@vben/common-ui';
+import ChannelTree from './channel-tree.vue';
+
+const channelId = ref("");
+/**
+ * 屏幕播放器数量
+ */
+const playerNum = ref(1);
+</script>
+
+<style></style>