yjdp-web/src/views/emergencyCommandMap/LeftSection/Drone.vue

<template>
  <div class="content">
    <div class="left-content">
      <div class="search-box">
        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" @keyup.enter="getTree">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="tree-container">
        <div class="tree-box">
          <div style="overflow-y: auto; height: 100%">
            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
          </div>
        </div>
      </div>
    </div>
    <!--
    <div class="right-content video-list">
      <HKVideo :dot_data="data" autoplay />
    </div>
    -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, watch, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
// import { getAvconDeptTree } from '@/api/emergencyCommandMap/communication';
import { getDroneTree } from '@/api/emergencyCommandMap/Drone';
interface QueryParams {
  equipment: string;
}
const queryParams = reactive<QueryParams>({
  equipment: ''
});
// const queryParams2 = reactify({});
const options = ref([]);
// const treeData = ref([]);
let data = ref({
  'name': '东镇街道长塘居委会大湴村边2',
  'invideoIds': true,
  'area': '茂名市视频数据共享管理平台/茂名市应急管理局/信宜市应急管理局/信宜防溺水监控/东镇街道防溺水（移动）/长塘村',
  'ip': '级联',
  'status': '在线',
  'status_lifetime': '68天23.79小时',
  'record_status': '--',
  'inspection_datetime': '2024-07-15 16:24:09',
  'video_code_int': '44098301581314000465',
  'video_code': '44098301581314000465',
  'longitude': 110.908867,
  'latitude': 22.357185
});

const getTree = () => {
  getDroneTree(queryParams).then((res) => {
    treeData.value = res.data;
  });
};
const handleNodeClick = (data) => {
  console.log('handleNodeClick', data)
};
const treeData = [
  {
    label: '无人机设备',
    children: [
      {
        label: '茂名市应急管理局',
        children: [
          {
            id: "1",
            label: '应急无人机',
            url: "http://19.152.196.223:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
          }
        ]
      },
      {
        label: '电白区应急管理局',
        children: [
          {
            id: "2",
            label: '应急无人机',
            url: "http://19.152.196.223:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
          }
        ]
      },
      {
        label: '茂南区应急管理局',
        children: [
          {
            id: "3",
            label: '应急无人机',
            url: "http://19.152.196.223:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
          }
        ]
      }
    ]
  }
];
onMounted(() => {
  getTree();
});
</script>

<style scoped lang="scss">
.content {
  display: flex;
  height: 430px;
  .left-content {
    height: 100%;
    flex: 1;
    margin-right: 20px;

    .search-box {
      display: flex;

      .custom-input {
        width: 100%;
      }
    }
    :deep(.el-tree) {
      background-color: transparent;
      color: #fbffff;
      font-size: 38px;
      .el-tree-node__content {
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: normal;
        word-break: break-all;
      }
      .el-tree-node__expand-icon {
        color: #297cfc;
        font-size: 23px;
      }
      .el-tree-node:focus > .el-tree-node__content,
      .el-tree-node__content:hover {
        background-color: transparent !important;
      }
    }
  }
  .right-content {
    height: 100%;
    flex-grow: 1;
    flex: 1;
  }
}
</style>