feat(vimp): 设备树原型

2026-05-27 02:33:06 +08:00
parent e08cea9c6a
commit 7467b54834
14 changed files with 966 additions and 1 deletions
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { NTabPane, NTabs, type TabPaneProps } from 'naive-ui';
+import { ref, type Component } from 'vue';
+import CameraTree from './components/camera-tree.vue';
+import AlarmTree from './components/alarm-tree.vue';
+
+interface ResourceTabPane extends TabPaneProps {
+  name: string;
+  tab: string;
+  component?: Component;
+}
+
+const resourceTabPanes: ResourceTabPane[] = [
+  { name: 'camera', tab: '摄像头', component: CameraTree },
+  { name: 'alarm', tab: '警报器', component: AlarmTree },
+];
+
+const selectedDeviceGbCode = ref<[string]>(['']);
+
+const onDragover = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'copy';
+  }
+};
+
+const onDrop = (event: DragEvent) => {
+  event.preventDefault();
+  const type = event.dataTransfer?.getData('type');
+  if (!type) return;
+  if (type === 'camera') {
+    const code = event.dataTransfer?.getData('code');
+    if (!code) return;
+    const name = event.dataTransfer?.getData('name');
+    selectedDeviceGbCode.value = [code];
+    window.$message.info(`播放：${JSON.stringify({ code, name })}`);
+  } else if (type === 'alarm') {
+    const code = event.dataTransfer?.getData('code');
+    if (!code) return;
+    const name = event.dataTransfer?.getData('name');
+    selectedDeviceGbCode.value = [code];
+    window.$message.info(`查看警报器：${JSON.stringify({ code, name })}`);
+  } else {
+  }
+};
+</script>
+
+<template>
+  <div style="height: 100%; overflow: hidden; display: flex">
+    <div style="width: 540px; height: 100%; overflow: hidden">
+      <NTabs :type="'line'" :placement="'left'" style="height: 100%">
+        <NTabPane v-for="{ name: resourceName, tab: resourceTab, component } in resourceTabPanes" :key="resourceName" :tab="resourceTab" :name="resourceName">
+          <template v-if="!!component">
+            <component :is="component" v-model:selected-device-gb-code="selectedDeviceGbCode" />
+          </template>
+        </NTabPane>
+      </NTabs>
+    </div>
+    <div style="flex: 1">
+      <div style="height: 480px; background-color: #666; display: grid; place-items: center" @dragover="onDragover" @drop="onDrop">
+        <div>这里是播放器</div>
+        <div>{{ selectedDeviceGbCode }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>