yangsy
69 lines
2.3 KiB
Vue
69 lines
2.3 KiB
Vue
<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>
|