erqi-web/src/views/business/wall/tree.vue

<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>