|
|
@@ -0,0 +1,189 @@
|
|
|
+<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>
|
|
|
+
|
hongrunxia