mky-vent-base/src/views/vent/safetyList/index.vue

<template>
    <div class="safetyList">
      <customHeader>安全监控新增列表</customHeader>
      <div class="content">
        <div class="left-box">
          <!-- 左侧树菜单 -->
          <!-- <fileSystem :selected="selected" :list="listArr" :draggable="true" @on-click="onClick">
            <template #icon="{ item }">
              <template v-if="item.isFolder">
                <SvgIcon v-if="item.isexpanded" size="18" name="file-open" />
                <SvgIcon v-else size="18" name="file-close" />
              </template>
              <treeIcon class="iconfont" :title="item.title" v-else />
            </template>
          </fileSystem> -->
        </div>
        <div class="right-box">
          <!-- <NormalTable :key="dataNow" :searchParam="searchParam" :columns="columns" :deleteById="deleteById"
            :downLoad="downLoad" :list="reportList" designScope="device-tabel" title="报表管理" :showTab="false"
            @saveAdd="saveAdd" /> -->
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, nextTick, reactive, onMounted } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
//   import fileSystem from './comment/common/cameraTree.vue';
//   import { SvgIcon } from '/@/components/Icon';
//   import treeIcon from './comment/common/Icon/treeIcon.vue';
//   import NormalTable from './comment/NormalTable.vue';
  import { message } from 'ant-design-vue';
  import { } from './safetyList.data';
  import { } from './safetyList.api';
  
 
  
//   //左侧菜单列表
//   let listArr = reactive<any[]>([
//     {
//       pid: 'auto',
//       isFolder: true,
//       isexpanded:true,
//       title: '系统数据报表',
//       id: '0',
//       children: []
//     },
//     {
//       pid: 'hand',
//       isFolder: true,
//       isexpanded:true,
//       title: '手动报表',
//       id: '1',
//       children: []
//     },
//     {
//       pid: 'temp',
//       isFolder: true,
//       isexpanded:true,
//       title: '报表模板',
//       id: '2',
//       children: []
//     },
//   ]);
//   //lxh 当前选中树节点
//   let selected = reactive<any>({
//     id: null,
//     pid: null,
//     title: '',
//     isFolder: false,
//   });
  
//   //获取左侧菜单树
//   async function getTreeList() {
//     const res = await getQuery()
//     if (res.length != 0) {
//       listArr.forEach(el => {
//         el.children.length = 0
//         res.forEach(v => {
//           // v.id=v.itemValue
//           let childre: any[] = []
//           if (v.children.length != 0) {
//             v.children.forEach(m => {
//               childre.push({ pid: v.itemValue, ppid: el.id, isFolder: false,isexpanded:false, title: m.itemText, id: m.itemValue })
//             })
//           }
//           el.children.push({ pid: el.id, isFolder: true,isexpanded:false, title: v.itemText, id: v.itemValue, children: childre })
//         })
//       })
//       console.log(listArr, 'listArr-----------')
//     }
//   }
//   //点击目录
//   async function onClick(node) {
//     console.log(node, 'node--------------')
//     if (node.pid == 'auto') {
//       treeClick(node)
//     } else if (node.pid == 'hand') {
//       treeClick(node)
//     } else {
//       treeClick(node)
//     }
//   };
//   function treeClick(node) {
//     dataNow.value = new Date().getTime()
//     selected.id = node.id;
//     selected.pid = node.pid;
//     selected.title = node.title;
//     selected.isFolder = node.isFolder;
//     selected.ppid=node.ppid
//     if (node.id == '0' || node.id == '1' || node.id == '2') {
//       searchParam.busKind = ''
//       searchParam.modelType = node.id
//       searchParam.reportType = ''
//     } else if (node.pid == '0' || node.pid == '1' || node.pid == '2') {
//       searchParam.busKind = node.id
//       searchParam.modelType = node.pid
//       searchParam.reportType = ''
//     } else {
//       searchParam.busKind = node.pid
//       searchParam.modelType = node.ppid
//       searchParam.reportType = node.id
//     }
//   }
  
  
  
//   async function saveAdd(params) {
//     let res = await save({ ...params });
//     if (res.id) {
//       message.warning('新增成功!');
//     } else {
//       message.error('新增失败!')
//     }
//     dataNow.value = new Date().getTime()
//   }
  
//   onMounted(() => {
//     getTreeList()
//   })
  </script>
  
  <style lang="less" scoped>
  .safetyList {
    width: calc(100% - 20px);
    height: calc(100% - 90px);
    position: relative;
    margin: 80px 10px 10px 10px;
  
    .content {
      width: 100%;
      height: calc(100% - 30px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
  
      // z-index: 999;
      .left-box {
        width: 15%;
        height: 100%;
        padding: 20px;
        border: 1px solid #99e8ff66;
        background: #27546e1a;
        box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
        -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
        -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
        overflow-y: auto;
  
        // lxh
        .iconfont {
          color: #fff;
          font-size: 12px;
          margin-left: 5px;
        }
      }
  
      .right-box {
        width: 85%;
        height: 100%;
        padding: 0px 0px 0px 15px;
        box-sizing: border-box;
      }
    }
  }
  </style>