pms-iot-vue/src/views/pms/video_center/sip/components/player/DeviceTree.vue

<template>
  <div id="DeviceTree" style="width: 100%; height: 100%; background-color: #ffffff; overflow: auto">
    <div style="line-height: 3vh; margin-bottom: 10px; font-size: 17px;" class="pl-5 mt-2">设备列表</div>
    <el-tree 
      ref="treeRef" 
      :props="defaultProps" 
      :current-node-key="selectchannelId" 
      :default-expanded-keys="expandIds"
      :highlight-current="true" 
      @node-click="handleNodeClick" 
      :load="loadNode" 
      lazy 
      node-key="id"
      style="min-width: 100%; display: inline-block !important"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node" style="width: 100%">
          <span 
            v-if="data.type === 0 && data.online" 
            title="在线设备"
            class="device-online iconfont icon-jiedianleizhukongzhongxin2"
          ></span>
          <span 
            v-if="data.type === 0 && !data.online" 
            title="离线设备"
            class="device-offline iconfont icon-jiedianleizhukongzhongxin2"
          ></span>
          <span 
            v-if="data.type === 3 && data.online" 
            title="在线通道"
            class="device-online iconfont icon-shebeileijiankongdian"
          ></span>
          <span 
            v-if="data.type === 3 && !data.online" 
            title="离线通道"
            class="device-offline iconfont icon-shebeileijiankongdian"
          ></span>
          <span 
            v-if="data.type === 4 && data.online" 
            title="在线通道-球机"
            class="device-online iconfont icon-shebeileiqiuji"
          ></span>
          <span 
            v-if="data.type === 4 && !data.online" 
            title="离线通道-球机"
            class="device-offline iconfont icon-shebeileiqiuji"
          ></span>
          <span 
            v-if="data.type === 5 && data.online" 
            title="在线通道-半球"
            class="device-online iconfont icon-shebeileibanqiu"
          ></span>
          <span 
            v-if="data.type === 5 && !data.online" 
            title="离线通道-半球"
            class="device-offline iconfont icon-shebeileibanqiu"
          ></span>
          <span 
            v-if="data.type === 6 && data.online" 
            title="在线通道-枪机"
            class="device-online iconfont icon-shebeileiqiangjitongdao"
          ></span>
          <span 
            v-if="data.type === 6 && !data.online" 
            title="离线通道-枪机"
            class="device-offline iconfont icon-shebeileiqiangjitongdao"
          ></span>
          <span v-if="data.online" style="padding-left: 1px" class="device-online">{{ node.label }}</span>
          <span v-if="!data.online" style="padding-left: 1px" class="device-offline">{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { listSipDeviceChannel } from '@/api/pms/video/sipdevice'
import { listDeviceShort } from '@/api/pms/video/device'

// 使用组合式API
const { t } = useI18n()

// 定义 props
const props = defineProps({
  onlyCatalog: {
    type: Boolean,
    default: false
  },
  clickEvent: {
    type: Function,
    default: null
  }
})

// 定义 emits
const emit = defineEmits([])

// refs
const treeRef = ref(null)

// 数据状态
const total = ref(0)
const channelList = ref([])
const DeviceData = ref([])
const expandIds = ref([])
const selectData = ref({})
const selectchannelId = ref('')

// 默认属性
const defaultProps = reactive({
  children: 'children',
  label: 'name',
  isLeaf: 'isLeaf',
})

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 100,
  status: 3,
  deviceType: 3,
})

// 生命周期钩子
onMounted(() => {
  selectchannelId.value = ''
  expandIds.value = ['0']
})

onUnmounted(() => {
  // 组件销毁时的操作
})

// 节点点击事件
const handleNodeClick = (data, node, element) => {
  selectData.value = node.data
  selectchannelId.value = node.data.value
  
  if (node.level !== 0) {
    const deviceNode = treeRef.value.getNode(data.userData.channelSipId)
    if (typeof props.clickEvent === 'function' && node.level > 1) {
      props.clickEvent(deviceNode.data.userData)
    }
  }
}

// 加载节点
const loadNode = (node, resolve) => {
  if (node.level === 0) {
    listDeviceShort(queryParams).then((response) => {
      const data = response
      if (data.length > 0) {
        let nodeList = []
        for (let i = 0; i < data.length; i++) {
          let node = {
            name: data[i].deviceName,
            isLeaf: false,
            id: data[i].serialNumber,
            type: 0,
            online: data[i].status === 3,
            userData: data[i],
          }
          nodeList.push(node)
        }
        resolve(nodeList)
      } else {
        resolve([])
      }
    })
  } else {
    let channelArray = []
    listSipDeviceChannel(node.data.userData.serialNumber).then((res) => {
      if (res != null) {
        channelArray = channelArray.concat(res)
        channelDataHandler(channelArray, resolve)
      } else {
        resolve([])
      }
    })
  }
}

// 通道数据处理
const channelDataHandler = (data, resolve) => {
  if (data.length > 0) {
    let nodeList = []
    for (let i = 0; i < data.length; i++) {
      let item = data[i]
      let channelType = item.id.substring(10, 13)
      console.log('channelType: ' + channelType)
      let type = 3
      if (item.id.length <= 10) {
        type = 2
      } else {
        if (item.id.length > 14) {
          let channelType = item.id.substring(10, 13)
          // 111-DVR编码;112-视频服务器编码;118-网络视频录像机(NVR)编码;131-摄像机编码;132-网络摄像机(IPC)编码
          if (channelType !== '111' && channelType !== '112' && channelType !== '118' && channelType !== '131' && channelType !== '132') {
            type = -1
            // 1-球机;2-半球;3-固定枪机;4-遥控枪机
          } else if (item.basicData.ptztype === 1) {
            type = 4
          } else if (item.basicData.ptztype === 2) {
            type = 5
          } else if (item.basicData.ptztype === 3 || item.basicData.ptztype === 4) {
            type = 6
          }
        } else {
          if (item.basicData.subCount > 0 || item.basicData.parental === 1) {
            type = 2
          }
        }
      }
      let node = {
        name: item.name || item.id,
        isLeaf: true,
        id: item.id,
        deviceId: item.deviceId,
        type: type,
        online: item.status === 3,
        userData: item.basicData,
      }

      if (channelType === '111' || channelType === '112' || channelType === '118' || channelType === '131' || channelType === '132') {
        nodeList.push(node)
      }
    }
    resolve(nodeList)
  } else {
    resolve([])
  }
}

// 重置
const reset = () => {
  // Vue 3 中不再需要 $forceUpdate
}

// 暴露方法给父组件
defineExpose({
  treeRef,
  handleNodeClick,
  loadNode,
  channelDataHandler,
  reset
})
</script>

<style scoped>
.device-tree-main-box {
  text-align: left;
}

.device-online {
  color: #252525;
}

.device-offline {
  color: #727272;
}
</style>