first commit

src/views/business/wall/tree.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="device-wrapper">
+    <el-tree
+        :data="tableData"
+        ref="treeRef"
+        :props="{ label: 'videoName', children: 'children' }"
+        node-key="id"
+        @node-click="handleNodeClick">
+        <template v-slot="{ node, data }">
+            <!-- <img src="@/assets/images/livePreview/icon-monitor.png" alt=""> -->
+            <span :class="(data.status === 'offline' && treeType === 'UAV') ? 'offline': ''">{{ node.label }}</span>
+        </template>
+    </el-tree>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+
+const emit = defineEmits([ 'handle' ])
+
+const tableData = ref([])
+const treeType = ref('')
+
+const refresh = (type) => {
+    treeType.value = type
+    if(type === 'CCTV') {
+        tableData.value = [
+            { videoName: '温州鹿城屯前江润大楼', children: [ { videoName: '浙江-温州-江润大楼-球机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed' },
+                { videoName: '浙江-温州-江润大楼-球机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c' },
+                { videoName: '浙江-温州-江润大楼-球机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059' },
+                { videoName: '浙江-温州-江润大楼-球机4', videoCode: '55dafd6aef164fd6a3af331419058c56' } ]
+            },
+            { videoName: '永嘉桥下坦头南', children: [ { videoName: '浙江-温州-永嘉桥下坦头南-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a' },
+                { videoName: '浙江-温州-永嘉桥下坦头南-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed' },
+                { videoName: '浙江-温州-永嘉桥下坦头南-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775' },
+                { videoName: '浙江-温州-永嘉桥下坦头南-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04' } ]
+            }
+        ]
+    }else if(type === 'UAV') {
+        tableData.value = [
+            { videoName: '鹿城山福临江工业区南', children: [ { videoName: '浙江-温州-鹿城山福临江工业区南-无人机1', videoCode: 'fd3b45e1429a4e47bba873af602a9bed', status: 'offline' },
+                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机2', videoCode: 'b7f9fff8e3504e419cb2f5fad5b2845c', status: 'online' },
+                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机3', videoCode: '15a73f6bfa6f46c5bad965f0ead70059', status: 'online' },
+                { videoName: '浙江-温州-鹿城山福临江工业区南-无人机4', videoCode: '55dafd6aef164fd6a3af331419058c56', status: 'online' } ]
+            },
+            { videoName: '永嘉梅岙镇', children: [ { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机1', videoCode: '5bedb9f9f6c94d30821b6cca1428bd1a', status: 'online' },
+                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机2', videoCode: 'd93a735382c74a4c9e8ba3ed25a3b1ed', status: 'online' },
+                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机3', videoCode: '1ce2a9c72f704fc09da9d77426b58775', status: 'online' },
+                { videoName: '浙江-温州-永嘉梅岙镇-无人机-球机4', videoCode: '43cf81a75dea47b688bc9586db63cc04', status: 'offline' } ]
+            }
+        ]
+    }
+
+}
+const handleNodeClick = (data, node) => {
+  if(!data.children || data.children.length === 0) {
+    emit('handle', node.data)
+  }
+}
+
+defineExpose({
+    refresh
+})
+</script>
+
+<style lang="scss" scoped>
+.device-wrapper {
+  width: 25%;
+  .el-tree{
+        background: transparent;
+      }
+      :deep(.el-tree-node){
+        width: 100%;
+        margin-bottom: 4px;
+        background: rgba(10,169,255,0.15);
+        border-radius: 3px 3px 3px 3px;
+        font-size: 14px;
+        align-items: center;
+        box-sizing: border-box;
+        border: 1px solid rgba(24, 128, 254, 0);
+        flex-shrink: 0;
+        cursor: pointer;
+
+        .el-tree-node__content{
+          height: 44px;
+          border: 1px solid transparent;
+          box-sizing: border-box;
+          &:has(.offline) {
+            opacity: 0.5;
+            }
+        }
+        img{
+          margin-right: 10px;
+        }
+        span{
+          color: #E1F1FAFF;
+          &.offline{
+            opacity: 0.8;
+          }
+        }
+
+        &:focus>.el-tree-node__content,.el-tree-node__content:hover{
+          color: #0EF8F8FF;
+          background-color: rgba(10,169,255,0.5);
+          border: 1px solid #5FA4FF;
+
+          &::before {
+            background-image: url('@/assets/images/livePreview/icon-monitor-active.png');
+          }
+          &:has(.offline) {
+            background-color: none;
+            cursor:not-allowed;
+          }
+        }
+      }
+}
+</style>