|
@@ -4,18 +4,34 @@
|
|
|
:props="defaultProps"
|
|
:props="defaultProps"
|
|
|
@node-click="handleNodeClick"
|
|
@node-click="handleNodeClick"
|
|
|
node-key="code"
|
|
node-key="code"
|
|
|
- :default-checked-keys="['C12-200-01']"
|
|
|
|
|
ref="treeRef"
|
|
ref="treeRef"
|
|
|
:default-expand-all="true"
|
|
:default-expand-all="true"
|
|
|
- />
|
|
|
|
|
|
|
+ >
|
|
|
|
|
+ <template #default="{ node, data }">
|
|
|
|
|
+ <span class="custom-tree-node">
|
|
|
|
|
+ <span
|
|
|
|
|
+ ><span
|
|
|
|
|
+ class="cameraCommon"
|
|
|
|
|
+ :class="{
|
|
|
|
|
+ cameraSelect:
|
|
|
|
|
+ data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId),
|
|
|
|
|
+ }"
|
|
|
|
|
+ ></span
|
|
|
|
|
+ >{{ node.label }}</span
|
|
|
|
|
+ >
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <!-- {{ JSON.stringify(data) }} -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-tree>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import { ElTree } from 'element-plus';
|
|
import { ElTree } from 'element-plus';
|
|
|
- import { Ref, ref } from 'vue';
|
|
|
|
|
|
|
+ import { ref } from 'vue';
|
|
|
import { useRouteQuery } from '@vueuse/router';
|
|
import { useRouteQuery } from '@vueuse/router';
|
|
|
import useCameraDetail from '../../store/useCameraDetailStore';
|
|
import useCameraDetail from '../../store/useCameraDetailStore';
|
|
|
import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
|
|
import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
|
|
|
- import { onMounted } from 'vue';
|
|
|
|
|
const props = defineProps<{ data }>();
|
|
const props = defineProps<{ data }>();
|
|
|
|
|
|
|
|
const { setDetail } = useCameraDetail();
|
|
const { setDetail } = useCameraDetail();
|
|
@@ -34,10 +50,22 @@
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- onMounted(() => {
|
|
|
|
|
- console.log('cameraId', cameraId.value);
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
const treeRef = ref(null);
|
|
const treeRef = ref(null);
|
|
|
</script>
|
|
</script>
|
|
|
-<style scoped></style>
|
|
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+ .cameraCommon {
|
|
|
|
|
+ width: 6px;
|
|
|
|
|
+ height: 6px;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cameraSelect {
|
|
|
|
|
+ width: 6px;
|
|
|
|
|
+ height: 6px;
|
|
|
|
|
+ background: #0052d9;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ margin-right: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|