kd-aiot-frontend-yms/src/views/monitor/components/monitorList.vue

<template>
  <div class="preinstall_box monitorList">
    <div class="title_box">摄像头</div>
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
      highlight-current
      default-expand-all
    />
  </div>
</template>

<script>
  import * as realTime from '@/api/isp/ispRealtime/monitor/index';
  //   const realTime = {};

  export default {
    name: 'MonitorList',
    data() {
      return {
        data: [],
        defaultProps: {
          label: 'name'
        }
      };
    },
    mounted() {
      this.getCameraList();
    },
    methods: {
      async getCameraList() {
        const res = await realTime.listByType();
        this.data = res;
        this.$emit('getCameraList', this.data);
      },
      handleNodeClick(data) {
        console.log(data);
        this.$emit('getClickId', data);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .preinstall_box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(227, 229, 230);
    .title_box {
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      color: #404446;
      background: #f2f4f5;
      font-family: 'albb', sans-serif;
    }
  }
</style>