yjdp-web/src/views/emergencyCommandMap/LeftSection/IndividualEquipment.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 { 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 treeData = ref([
  {
    label: '移动单兵设备',
    children: [
      {
        label: '茂名市应急管理局',
        children: [
          {
            label: '应急无人机'
          },
          { label: '智能手持终端01' },
          { label: '智能手持终端02' }
        ]
      }
    ]
  }
]);

const getTree = () => {
  getDroneTree(queryParams).then((res) => {
    treeData.value = res.data;
  });
};
const handleNodeClick = (data) => {};
</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>