diff options
Diffstat (limited to 'src/views/rangeNodeManage/nodeList')
17 files changed, 0 insertions, 4673 deletions
diff --git a/src/views/rangeNodeManage/nodeList/components/DirNameForm.vue b/src/views/rangeNodeManage/nodeList/components/DirNameForm.vue deleted file mode 100644 index 7939629..0000000 --- a/src/views/rangeNodeManage/nodeList/components/DirNameForm.vue +++ /dev/null @@ -1,95 +0,0 @@ -<template> -<div class="role-dialog" v-if="visible"> - <i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 2.8%" @click="close"></i> - <div class="fbs"> - <span style="margin-right: 3%">文件名</span> - <el-input - size="mini" - :value="value" - placeholder="请输入内容" - style="width: 50%" - v-bind="$attrs" - v-on="$listeners"> - </el-input> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="submit">确认</el-button> - </div> - </div> -</div> -</template> - -<script> -export default { - name: 'RoleForm', - props: { - value: { - typeof: String, - require: true, - default: '' - } - }, - data() { - return { - visible: false - } - }, - watch: { - value: { - handler(val) { - this.$emit('input', val) - } - } - }, - methods: { - close() { - // document.querySelector('.mask').style.display = 'none' - this.visible = false - }, - submit() { - // document.querySelector('.mask').style.display = 'none' - this.visible = false - this.$emit('makeDirSubmit') - } - } - -} -</script> - -<style lang="less" scoped> -.role-dialog{ - z-index: 998; - width: 300px; - height: 120px; - position: absolute; /* 绝对定位 */ - top: 100px; /* 向下偏移50% */ - left: 150px; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../img/jbpzxybqr.png'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */ - .fbs{ - width: 100%; - float: left; - margin-top: 3%; - text-align: center; - } - .anDiv{ - width: 100%; - float: left; - margin-top: 5%; - text-align: center; - .glBut{ - width: 50px; - height: 18px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/components/DownloadFileManager.vue b/src/views/rangeNodeManage/nodeList/components/DownloadFileManager.vue deleted file mode 100644 index 9c77da3..0000000 --- a/src/views/rangeNodeManage/nodeList/components/DownloadFileManager.vue +++ /dev/null @@ -1,536 +0,0 @@ -<template> -<div class="content"> - <el-tree - ref="tree" - class="tree-section" - lazy - node-key="id" - :data="treeData" - :props="defaultProps" - :load="loadNode" - @node-click="handleNodeClick" - v-dragresize="dragConfig" - > - </el-tree> - <div class="tree-content"> - <div style="text-align:left; width: 100%; padding: 10px;border: 1px solid #BAD0F11A;"> - <span> - {{ dirTitle }} - </span> - </div> - <div style="clear:both;text-align:left; padding: 10px;border-bottom: 1px solid #BAD0F11A;"> - <img src="../../../../img/icon/file-icon.svg" alt="" style="width: 18px; height: 18px;"> - {{ currentFileName }} - </div> - <ul style="clear:both;" class="tree-content-ul"> - <li v-for="fileItem in fileList" :key="fileItem.name"> - <el-radio v-model="filename" :label="fileItem.name" class="file-info">{{ '' }}</el-radio> - <span class="file-info">{{ fileItem.name }}</span> - <i class="el-icon-document file-info" style="font-size: 20px"></i> - <span class="file-info">{{ fileItem.size }}</span> - <span class="file-info">{{ fileItem.time }}</span> - </li> - </ul> - <div class="empty-box"></div> - </div> - <!-- <ul - v-show="visible" - :style="{left:left+'px',top:top+'px'}" - class="contextmenu" - > - <li> - <label - class="button" - for="file-input" - > - <span>上传</span> - <input - type="file" - class="file-input" - id="file-input" - @change="upload" - /> - </label> - </li> - <li @click="download">下载</li> - <li @click="del">删除</li> - </ul> --> - <!-- <ul - v-show="uploadVisible" - :style="{left:left+'px',top:top+'px'}" - class="contextmenu" - > - <li> - <label - class="button" - for="file-input" - > - <span>上传</span> - <input - type="file" - class="file-input" - id="file-input" - @change="upload" - /> - </label> - </li> - </ul> --> - <!-- <div v-show="showTreeMenu" class="treeMenu"> - <div @click="makeDir">新建文件夹</div> - <div @click="delDir">删除文件夹</div> - </div> --> - <DirNameForm - ref="dirNameForm" - v-model="dirName" - @makeDirSubmit="makeDirSubmit"> - </DirNameForm> -</div> -</template> - -<script> -import DirNameForm from './DirNameForm.vue' -export default { -components: { DirNameForm }, -props: ['isFullscreen'], -data() { - return{ - visible: false, - uploadVisible: false, - top: 0, - left: 0, - nodeId: '', - dirTitle: '>', - currentFileName: '', - fileList: [], - selectFile: {}, - selectNode: {path: '/'}, - rightClickNode: {}, - defaultProps: { - children: 'children', - label: 'name', - }, - showTreeMenu: false, // 文件夹数据 - contextNode: {}, // 文件夹数据 - dirName: '', // 新建文件名 - treeData: [], - filename: '' - } -}, -computed: { - dragConfig() { - return [ - { - dragBorder: "right", - setCssProperty: "width", - }, - ]; - }, -}, -watch: { - '$store.state.range.nodeId': { - handler(newVal, oldVal) { - this.nodeId = newVal - // this.getCurrentDirFile('/') - }, - immediate: true - }, - visible(value) { - if (value) { - document.body.addEventListener('click', this.closeMenu) - } else { - document.body.removeEventListener('click', this.closeMenu) - } - }, - uploadVisible(value) { - if (value) { - document.body.addEventListener('click', this.closeUploadMenu) - } else { - document.body.removeEventListener('click', this.closeUploadMenu) - } - }, -}, -methods: { - // upload(e) { - // this.$emit('selectUploadFile', {path: this.selectNode.path, file: e.target.files[0]}) - // const params = { - // node_id : this.nodeId, - // current_dir: this.selectNode.path, - // file: e.target.files[0] - // } - // const submitForm = new FormData() - // for(const key in params) { - // submitForm.append(key, params[key]) - // } - // this.$axios.postFormData(this.$http.api.uploadFile, submitForm).then(res => { - // if (res.code == 200 || res.code == "OK") { - // this.$notify({ - // title: '上传文件成功', - // type: 'success', - // duration: 2500 - // }) - // // 更新当前路径下的文件信息 - // this.handleNodeClick(this.selectNode) - // this.setCurrentHighlight(this.selectNode.$treeNodeId); - // } - // }).catch(err => { - // console.log(err) - // }) - // }, - // download() { - // // this.downLoading = true - // const reqParams = { - // master_node_id : this.nodeId, - // current_dir: this.selectNode.path, - // filename: this.selectFile.name - // } - // this.$axios.getFile(this.$http.api.batchDownload, reqParams).then(res => { - // if (res.status == 200 || res.statusText == "OK") { - // const { data, headers } = res - // const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') - // // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理 - // //const blob = new Blob([JSON.stringify(data)], ...) - // const blob = new Blob([data], {type: headers['content-type']}) - // let dom = document.createElement('a') - // let url = window.URL.createObjectURL(blob) - // dom.href = url - // dom.download = decodeURI(fileName) - // dom.style.display = 'none' - // document.body.appendChild(dom) - // dom.click() - // dom.parentNode.removeChild(dom) - // window.URL.revokeObjectURL(url) - // this.$notify({ - // title: '下载文件成功', - // type: 'success', - // duration: 2500 - // }) - // } else { - // this.$notify({ - // title: '下载文件失败', - // type: 'success', - // duration: 2500 - // }) - // } - // }).catch(err => { - // console.log(err) - // }).finally(() => { - // // this.downLoading = false - // }) - // }, - del() { - const params = { - node_id : this.nodeId, - current_dir: this.selectNode.path, - filename: this.selectFile.name - } - this.$axios.delete(this.$http.api.delFile, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除文件成功', - type: 'success', - duration: 2500 - }) - // 更新当前路径下的文件信息 - this.handleNodeClick(this.selectNode) - // console.log('选中了节点id===', this.selectNode.$treeNodeId) - this.setCurrentHighlight(this.selectNode.$treeNodeId); - // this.init() - } - }).catch(err => { - console.log(err) - }) - }, - // 设置当前选中高亮 - setCurrentHighlight (id) { - this.$nextTick(() => { - this.$refs.tree.setCurrentKey(id) - }) - }, - openMenu(fileItem, e) { - const menuMinWidth = 105 - const offsetLeft = this.$el.getBoundingClientRect().left // container margin left - const offsetWidth = this.$el.offsetWidth // container width - const maxLeft = offsetWidth - menuMinWidth // left boundary - const left = e.clientX - offsetLeft + 60 // 15: margin right - - if (left > maxLeft) { - this.left = maxLeft - } else { - this.left = left - } - - if (this.isFullscreen) { - this.top = e.clientY - 180 // fix 位置bug - } else { - this.top = e.clientY - 160 // fix 位置bug - } - this.uploadVisible = false - this.visible = true - this.selectFile = fileItem - }, - closeMenu() { - this.visible = false - }, - openUploadMenu(e) { - const menuMinWidth = 105 - const offsetLeft = this.$el.getBoundingClientRect().left // container margin left - const offsetWidth = this.$el.offsetWidth // container width - const maxLeft = offsetWidth - menuMinWidth // left boundary - const left = e.clientX - offsetLeft + 60 // 15: margin right - - if (left > maxLeft) { - this.left = maxLeft - } else { - this.left = left - } - - if (this.isFullscreen) { - this.top = e.clientY - 120 // fix 位置bug - } else { - this.top = e.clientY - 160 // fix 位置bug - } - this.visible = false - this.uploadVisible = true - }, - closeUploadMenu() { - this.uploadVisible = false - }, - // 获取当前路径下文件 - getCurrentDirFile(currentDir) { - const reqParams = { node_id: this.nodeId, current_dir: currentDir } - return this.$axios.get(this.$http.api.getCurrentDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - const dirs = res?.result?.object?.dir || [] - this.fileList = res?.result?.object?.file || [] - // console.log('请求回来files===', files) - const nodeData = dirs.map(dir => { - return { - name: dir.name, - path: currentDir === '/' ? currentDir + dir.name : `${currentDir}/${dir.name}`, - fileList: [] - } - }) - // console.log('请求回来nodeData====', nodeData) - return nodeData - } - }).catch(err => { - console.log(err) - }) - }, - // 点击加载子节点 - async loadNode(node, reslove) { - // console.log('执行了loadNode', node) - if (node.level == 0) { - let nodeData = await this.getCurrentDirFile('/') - // console.log('初始化数据===', nodeData) - // this.selectNode = nodeData.fileList - return reslove(nodeData) - } else { - let nodeData = await this.getCurrentDirFile(node.data.path) - // 判断是否为最底层节点 根据自己接口返回的数据判断即可 - nodeData.forEach(item => { - item.hasChildren == false ? item.lastNode = ture : null - }); - // this.selectNode = nodeData.fileList - return reslove(nodeData) - } - }, - handleNodeClick(node) { - // this.fileList = [] - // console.log('选中了节点===', node) - // console.log('选中了节点id===', node.$treeNodeId) - this.selectNode = node - this.dirTitle = node.path.split('/').join('>') - this.currentFileName = node.name - // this.fileList = node.fileList - const reqParams = { node_id: this.nodeId, current_dir: node.path } - this.$axios.get(this.$http.api.getCurrentDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.fileList = res?.result?.object?.file || [] - } - }).catch(err => { - console.log(err) - }) - }, - openTreeMenu(event, data, node, target) { - // console.log(event, data, node, target) - this.showTreeMenu = true // 显示菜单 - this.contextNode = data // 存储数据 - // console.log(this.contextNode, 'contextNode') - // console.log(node, 'rightClickNode=======') - // console.log(target, 'target') - this.rightClickNode = node - document.querySelector('.treeMenu').setAttribute('style',`top:${event.clientY + 30}px;left:${event.clientX + 30}px;`) - document.addEventListener('click', this.closeTreeMenu) - document.addEventListener('contextmenu', this.closeTreeMenu) - }, - closeTreeMenu() { - this.showTreeMenu = false // 关闭菜单 - document.removeEventListener('click', this.closeTreeMenu) - document.removeEventListener('contextmenu', this.closeTreeMenu) - }, - // 当新建文件夹时，先填写名字 - openDirNameForm() { - this.$refs.dirNameForm.visible = true - }, - // 新建文件夹 - makeDir() { - this.openDirNameForm() - }, - // 新建文件夹接口提交 - makeDirSubmit() { - const reqParams = { node_id: this.nodeId, current_dir: this.contextNode.path, new_dir_name: this.dirName } - this.$axios.get(this.$http.api.makeDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '新建文件夹成功', - type: 'success', - duration: 2500 - }) - // 页面增加子节点 - let id = Math.ceil(Math.random() * 1000000) - var addNode = { - path: this.contextNode.path + '/' + this.dirName, - name: this.dirName, - fileList: [] - // id: id, - // name: this.dirName, - // data: { - // path: this.contextNode.path, - // name: this.dirName, - // fileList: [] - // } - } - // console.log(addNode, 'addNode======') - this.$refs.tree.append(addNode, this.rightClickNode) - } - }).catch(err => { - console.log(err) - }) - }, - // 删除文件夹 - delDir() { - const index = this.contextNode.path.lastIndexOf('/') - const path = this.contextNode.path.substring(0, index); - const params = { - node_id : this.nodeId, - current_dir: path, - dir_name: this.contextNode.name - } - this.$axios.delete(this.$http.api.delDir, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除文件成功', - type: 'success', - duration: 2500 - }) - // 页面删除子节点 - this.$refs.tree.remove(this.rightClickNode) - } - }).catch(err => { - console.log(err) - }) - } -} -} -</script> - -<style lang='less' scoped="scoped"> -.content { - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - color: #ffffff; - .tree-section { - width: 25%; - height: 100%; - // background-color: #1A2648; - background: transparent; - border: 1px solid #BAD0F11A; - color: #06F7FF; - overflow-y: auto; - ::v-deep .el-tree-node__content:hover { - background-color: rgba(14, 61, 138, 0.3) !important; - } - ::v-deep .el-tree-node.is-current > .el-tree-node__content { - background-color: rgba(14, 61, 138, 0.3) !important; - } - } - .tree-content { - width: 75%; - height: 100%; - display: flex; - flex-direction: column; - .tree-content-ul { - width: 100%; - background-color: rgba(25, 33, 61, 0.4); - overflow-y: auto; - li { - display: flex; - flex-direction: row; - justify-content: space-around; - border-bottom: 1px solid #BAD0F11A; - padding: 5px; - .file-info { - flex: 1 1 100px; - } - } - } - .empty-box { - flex: 1; - } - } -} -.contextmenu { - margin: 0; - border-radius: 6px; - border: 0.5px solid rgba(6, 247, 255, 0.20); - background: #0E3D8A; - z-index: 3000; - position: absolute; - list-style-type: none; - padding: 5px 0; - font-size: 12px; - font-weight: 400; - color: #06F7FF; - // box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05); - li { - margin: 0; - padding: 7px 30px; - cursor: pointer; - &:hover { - border-radius: 3px; - background: rgba(6, 247, 255, 0.10); - } - } - .file-input { - display: none; - } - } - -.treeMenu { - position: fixed; - z-index: 99999; - top: 50%; - left: 50%; - color: #06F7FF; - background-color: #0E3D8A; - overflow: hidden; - border-radius: 5px; - border: 0.5px solid rgba(6, 247, 255, 0.20); - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05); - div{ - padding: 7px 30px; - box-sizing: border-box; - //width: 50px; - text-align: center; - } - div:hover{ - border-radius: 3px; - background: rgba(6, 247, 255, 0.10); - cursor: pointer; - } -} -</style> diff --git a/src/views/rangeNodeManage/nodeList/components/MainNode.vue b/src/views/rangeNodeManage/nodeList/components/MainNode.vue deleted file mode 100644 index 5219549..0000000 --- a/src/views/rangeNodeManage/nodeList/components/MainNode.vue +++ /dev/null @@ -1,98 +0,0 @@ -<template> -<el-table - class="main-table styleTable" - ref="mainTable" - height="500px" - style="width: 100%;" - :data="nodeList" - tooltip-effect="dark" - highlight-current-row -> - <el-table-column label="" width="80" align="center"> - <template slot-scope="scope"> - <el-radio v-model="master_node_id" :label="scope.row.id" @input="handleSelectionMain(scope.row)">{{ "" }}</el-radio> - </template> - </el-table-column> - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <!-- <template slot-scope="scope"> - {{ scope.row.has_deployed ? '已部署' : '未部署' }} - </template> --> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatTime }} - </template> - </el-table-column> -</el-table> -</template> - -<script> -export default { - name: 'MainNode', - props: { - nodeList: { - typeof: Array, - require: true - } - }, - data() { - return { - master_node_id: '' - } - }, - methods: { - // 选择主节点 - handleSelectionMain(row) { - this.$emit('selectMainNode', row) - }, - } -} -</script> - -<style lang="less" scoped> - -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/components/OperateNode.vue b/src/views/rangeNodeManage/nodeList/components/OperateNode.vue deleted file mode 100644 index 30e5881..0000000 --- a/src/views/rangeNodeManage/nodeList/components/OperateNode.vue +++ /dev/null @@ -1,98 +0,0 @@ -<template> -<el-table - class="main-table styleTable" - ref="operateTable" - height="500px" - style="width: 100%;" - :data="nodeList" - tooltip-effect="dark" - highlight-current-row - @selection-change="handleSelectionOperateNode" -> - <el-table-column - align="center" - type="selection" - width="80"/> - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <!-- <template slot-scope="scope"> - {{ scope.row.has_deployed ? '已部署' : '未部署' }} - </template> --> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatTime }} - </template> - </el-table-column> -</el-table> -</template> - -<script> -export default { - name: 'OperateNode', - props: { - nodeList: { - typeof: Array, - require: true - } - }, - data() { - return { - - } - }, - methods: { - // 选择被操作节点 - handleSelectionOperateNode(selectRows) { - this.$emit('selectOperateNode', selectRows) - }, - } -} -</script> - -<style lang="less" scoped> - -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/components/UploadFileManager.vue b/src/views/rangeNodeManage/nodeList/components/UploadFileManager.vue deleted file mode 100644 index d62dfdf..0000000 --- a/src/views/rangeNodeManage/nodeList/components/UploadFileManager.vue +++ /dev/null @@ -1,520 +0,0 @@ -<template> -<div class="content"> - <el-tree - ref="tree" - class="tree-section" - lazy - node-key="id" - :data="treeData" - :props="defaultProps" - :load="loadNode" - @node-click="handleNodeClick" - v-dragresize="dragConfig" - > - </el-tree> - <div class="tree-content"> - <div style="text-align:left; width: 100%; padding: 10px;border: 1px solid #BAD0F11A;"> - <span> - {{ dirTitle }} - </span> - </div> - <div style="clear:both;text-align:left; padding: 10px;border-bottom: 1px solid #BAD0F11A;"> - <img src="../../../../img/icon/file-icon.svg" alt="" style="width: 18px; height: 18px;"> - {{ currentFileName }} - </div> - <ul style="clear:both;" class="tree-content-ul"> - <li v-for="fileItem in fileList" :key="fileItem.name"> - <i class="el-icon-document file-info" style="font-size: 20px"></i> - <span class="file-info">{{ fileItem.name }}</span> - <span class="file-info">{{ fileItem.size }}</span> - <span class="file-info">{{ fileItem.time }}</span> - </li> - </ul> - <!-- <div class="empty-box" @contextmenu.prevent="openUploadMenu($event)"></div> --> - </div> - <ul - v-show="visible" - :style="{left:left+'px',top:top+'px'}" - class="contextmenu" - > - <!-- <li> - <label - class="button" - for="file-input" - > - <span>上传</span> - <input - type="file" - class="file-input" - id="file-input" - @change="upload" - /> - </label> - </li> --> - <!-- <li @click="download">下载</li> - <li @click="del">删除</li> --> - </ul> - <!-- <ul - v-show="uploadVisible" - :style="{left:left+'px',top:top+'px'}" - class="contextmenu" - > - <li> - <label - class="button" - for="file-input" - > - <span>上传</span> - <input - type="file" - class="file-input" - id="file-input" - @change="upload" - /> - </label> - </li> - </ul> --> - <!-- <div v-show="showTreeMenu" class="treeMenu"> - <div @click="makeDir">新建文件夹</div> - <div @click="delDir">删除文件夹</div> - </div> --> - <DirNameForm - ref="dirNameForm" - v-model="dirName" - @makeDirSubmit="makeDirSubmit"> - </DirNameForm> -</div> -</template> - -<script> -import DirNameForm from './DirNameForm.vue' -export default { -components: { DirNameForm }, -props: ['isFullscreen'], -data() { - return{ - visible: false, - uploadVisible: false, - top: 0, - left: 0, - nodeId: '', - dirTitle: '>', - currentFileName: '', - fileList: [], - selectFile: {}, - selectNode: {path: '/'}, - rightClickNode: {}, - defaultProps: { - children: 'children', - label: 'name', - }, - showTreeMenu: false, // 文件夹数据 - contextNode: {}, // 文件夹数据 - dirName: '', // 新建文件名 - treeData: [] - } -}, -computed: { - dragConfig() { - return [ - { - dragBorder: "right", - setCssProperty: "width", - }, - ]; - }, -}, -watch: { - '$store.state.range.nodeId': { - handler(newVal, oldVal) { - this.nodeId = newVal - // this.getCurrentDirFile('/') - }, - immediate: true - }, - visible(value) { - if (value) { - document.body.addEventListener('click', this.closeMenu) - } else { - document.body.removeEventListener('click', this.closeMenu) - } - }, - uploadVisible(value) { - if (value) { - document.body.addEventListener('click', this.closeUploadMenu) - } else { - document.body.removeEventListener('click', this.closeUploadMenu) - } - }, -}, -methods: { - // upload(e) { - // this.$emit('selectUploadFile', {path: this.selectNode.path, file: e.target.files[0]}) - // const params = { - // node_id : this.nodeId, - // current_dir: this.selectNode.path, - // file: e.target.files[0] - // } - // }, - updateCurrentPath() { - this.handleNodeClick(this.selectNode) - this.setCurrentHighlight(this.selectNode.$treeNodeId); - }, - download() { - // this.downLoading = true - const reqParams = { - node_id : this.nodeId, - current_dir: this.selectNode.path, - filename: this.selectFile.name - } - this.$axios.getFile(this.$http.api.downloadFile, reqParams).then(res => { - if (res.status == 200 || res.statusText == "OK") { - const { data, headers } = res - const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') - // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理 - //const blob = new Blob([JSON.stringify(data)], ...) - const blob = new Blob([data], {type: headers['content-type']}) - let dom = document.createElement('a') - let url = window.URL.createObjectURL(blob) - dom.href = url - dom.download = decodeURI(fileName) - dom.style.display = 'none' - document.body.appendChild(dom) - dom.click() - dom.parentNode.removeChild(dom) - window.URL.revokeObjectURL(url) - this.$notify({ - title: '下载文件成功', - type: 'success', - duration: 2500 - }) - } else { - this.$notify({ - title: '下载文件失败', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - // this.downLoading = false - }) - }, - del() { - const params = { - node_id : this.nodeId, - current_dir: this.selectNode.path, - filename: this.selectFile.name - } - this.$axios.delete(this.$http.api.delFile, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除文件成功', - type: 'success', - duration: 2500 - }) - // 更新当前路径下的文件信息 - this.handleNodeClick(this.selectNode) - // console.log('选中了节点id===', this.selectNode.$treeNodeId) - this.setCurrentHighlight(this.selectNode.$treeNodeId); - // this.init() - } - }).catch(err => { - console.log(err) - }) - }, - // 设置当前选中高亮 - setCurrentHighlight (id) { - this.$nextTick(() => { - this.$refs.tree.setCurrentKey(id) - }) - }, - openMenu(fileItem, e) { - const menuMinWidth = 105 - const offsetLeft = this.$el.getBoundingClientRect().left // container margin left - const offsetWidth = this.$el.offsetWidth // container width - const maxLeft = offsetWidth - menuMinWidth // left boundary - const left = e.clientX - offsetLeft + 60 // 15: margin right - - if (left > maxLeft) { - this.left = maxLeft - } else { - this.left = left - } - - if (this.isFullscreen) { - this.top = e.clientY - 180 // fix 位置bug - } else { - this.top = e.clientY - 160 // fix 位置bug - } - this.uploadVisible = false - this.visible = true - this.selectFile = fileItem - }, - closeMenu() { - this.visible = false - }, - openUploadMenu(e) { - const menuMinWidth = 105 - const offsetLeft = this.$el.getBoundingClientRect().left // container margin left - const offsetWidth = this.$el.offsetWidth // container width - const maxLeft = offsetWidth - menuMinWidth // left boundary - const left = e.clientX - offsetLeft + 60 // 15: margin right - - if (left > maxLeft) { - this.left = maxLeft - } else { - this.left = left - } - - if (this.isFullscreen) { - this.top = e.clientY - 120 // fix 位置bug - } else { - this.top = e.clientY - 160 // fix 位置bug - } - this.visible = false - this.uploadVisible = true - }, - closeUploadMenu() { - this.uploadVisible = false - }, - // 获取当前路径下文件 - getCurrentDirFile(currentDir) { - const reqParams = { node_id: this.nodeId, current_dir: currentDir } - return this.$axios.get(this.$http.api.getCurrentDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - const dirs = res?.result?.object?.dir || [] - this.fileList = res?.result?.object?.file || [] - // console.log('请求回来files===', files) - const nodeData = dirs.map(dir => { - return { - name: dir.name, - path: currentDir === '/' ? currentDir + dir.name : `${currentDir}/${dir.name}`, - fileList: [] - } - }) - // console.log('请求回来nodeData====', nodeData) - return nodeData - } - }).catch(err => { - console.log(err) - }) - }, - // 点击加载子节点 - async loadNode(node, reslove) { - // console.log('执行了loadNode', node) - if (node.level == 0) { - let nodeData = await this.getCurrentDirFile('/') - // console.log('初始化数据===', nodeData) - // this.selectNode = nodeData.fileList - return reslove(nodeData) - } else { - let nodeData = await this.getCurrentDirFile(node.data.path) - // 判断是否为最底层节点 根据自己接口返回的数据判断即可 - nodeData.forEach(item => { - item.hasChildren == false ? item.lastNode = ture : null - }); - // this.selectNode = nodeData.fileList - return reslove(nodeData) - } - }, - handleNodeClick(node) { - // this.fileList = [] - // console.log('选中了节点===', node) - // console.log('选中了节点id===', node.$treeNodeId) - this.selectNode = node - this.dirTitle = node.path.split('/').join('>') - this.currentFileName = node.name - // this.fileList = node.fileList - const reqParams = { node_id: this.nodeId, current_dir: node.path } - this.$axios.get(this.$http.api.getCurrentDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.fileList = res?.result?.object?.file || [] - } - }).catch(err => { - console.log(err) - }) - }, - openTreeMenu(event, data, node, target) { - // console.log(event, data, node, target) - this.showTreeMenu = true // 显示菜单 - this.contextNode = data // 存储数据 - // console.log(this.contextNode, 'contextNode') - // console.log(node, 'rightClickNode=======') - // console.log(target, 'target') - this.rightClickNode = node - document.querySelector('.treeMenu').setAttribute('style',`top:${event.clientY + 30}px;left:${event.clientX + 30}px;`) - document.addEventListener('click', this.closeTreeMenu) - document.addEventListener('contextmenu', this.closeTreeMenu) - }, - closeTreeMenu() { - this.showTreeMenu = false // 关闭菜单 - document.removeEventListener('click', this.closeTreeMenu) - document.removeEventListener('contextmenu', this.closeTreeMenu) - }, - // 当新建文件夹时，先填写名字 - openDirNameForm() { - this.$refs.dirNameForm.visible = true - }, - // 新建文件夹 - makeDir() { - this.openDirNameForm() - }, - // 新建文件夹接口提交 - makeDirSubmit() { - const reqParams = { node_id: this.nodeId, current_dir: this.contextNode.path, new_dir_name: this.dirName } - this.$axios.get(this.$http.api.makeDir, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '新建文件夹成功', - type: 'success', - duration: 2500 - }) - // 页面增加子节点 - let id = Math.ceil(Math.random() * 1000000) - var addNode = { - path: this.contextNode.path + '/' + this.dirName, - name: this.dirName, - fileList: [] - // id: id, - // name: this.dirName, - // data: { - // path: this.contextNode.path, - // name: this.dirName, - // fileList: [] - // } - } - // console.log(addNode, 'addNode======') - this.$refs.tree.append(addNode, this.rightClickNode) - } - }).catch(err => { - console.log(err) - }) - }, - // 删除文件夹 - delDir() { - const index = this.contextNode.path.lastIndexOf('/') - const path = this.contextNode.path.substring(0, index); - const params = { - node_id : this.nodeId, - current_dir: path, - dir_name: this.contextNode.name - } - this.$axios.delete(this.$http.api.delDir, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除文件成功', - type: 'success', - duration: 2500 - }) - // 页面删除子节点 - this.$refs.tree.remove(this.rightClickNode) - } - }).catch(err => { - console.log(err) - }) - } -} -} -</script> - -<style lang='less' scoped="scoped"> -.content { - width: 100%; - height: 100%; - display: flex; - flex-direction: row; - color: #ffffff; - .tree-section { - width: 25%; - height: 100%; - // background-color: #1A2648; - background: transparent; - border: 1px solid #BAD0F11A; - color: #06F7FF; - overflow-y: auto; - ::v-deep .el-tree-node__content:hover { - background-color: rgba(14, 61, 138, 0.3) !important; - } - ::v-deep .el-tree-node.is-current > .el-tree-node__content { - background-color: rgba(14, 61, 138, 0.3) !important; - } - } - .tree-content { - width: 75%; - height: 100%; - display: flex; - flex-direction: column; - .tree-content-ul { - width: 100%; - background-color: rgba(25, 33, 61, 0.4); - overflow-y: auto; - li { - display: flex; - flex-direction: row; - justify-content: space-around; - border-bottom: 1px solid #BAD0F11A; - padding: 5px; - .file-info { - flex: 1 1 100px; - } - } - } - .empty-box { - flex: 1; - } - } -} -.contextmenu { - margin: 0; - border-radius: 6px; - border: 0.5px solid rgba(6, 247, 255, 0.20); - background: #0E3D8A; - z-index: 3000; - position: absolute; - list-style-type: none; - padding: 5px 0; - font-size: 12px; - font-weight: 400; - color: #06F7FF; - // box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05); - li { - margin: 0; - padding: 7px 30px; - cursor: pointer; - &:hover { - border-radius: 3px; - background: rgba(6, 247, 255, 0.10); - } - } - .file-input { - display: none; - } - } - -.treeMenu { - position: fixed; - z-index: 99999; - top: 50%; - left: 50%; - color: #06F7FF; - background-color: #0E3D8A; - overflow: hidden; - border-radius: 5px; - border: 0.5px solid rgba(6, 247, 255, 0.20); - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05); - div{ - padding: 7px 30px; - box-sizing: border-box; - //width: 50px; - text-align: center; - } - div:hover{ - border-radius: 3px; - background: rgba(6, 247, 255, 0.10); - cursor: pointer; - } -} -</style> diff --git a/src/views/rangeNodeManage/nodeList/index.vue b/src/views/rangeNodeManage/nodeList/index.vue deleted file mode 100644 index 7a0e2fd..0000000 --- a/src/views/rangeNodeManage/nodeList/index.vue +++ /dev/null @@ -1,445 +0,0 @@ -<template> -<div class="range-config-manage" ref="appRef"> - <Header - :range-dict="rangeDict" - @query="query" - @batchConsole="batchConsole" - @batchDownload="batchDownload" - @batchUpload="batchUpload" - @batchCollectTraffic="batchCollectTraffic" - ></Header> - <div class="list" > - <el-table - class="custom-table" - ref="multipleTable" - v-loading="loading" - element-loading-text="加载中..." - height="100%" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - > - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - <span style="padding-left: 5px;">{{ roleDict[scope.row.role] || scope.row.role }}</span> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <template slot-scope="scope"> - <div class="deploy-status"> - <svg-icon :icon-class="getStatus(scope.row.status).class"></svg-icon> - <span :class="getStatus(scope.row.status).class">{{ getStatus(scope.row.status).label }}</span> - </div> - </template> - </el-table-column> - <el-table-column - align="center" - prop="collecting" - label="正在采集流量" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.collecting ? '是' : '否' }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="150" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="150" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - label="操作" - min-width="200" - > - <template slot-scope="scope"> - <el-button type="text" size="medium" :disabled="scope.row.status==='pending' || !roleDict[scope.row.role]" @click="console(scope.row)">控制台</el-button> - <el-button type="text" size="medium" :disabled="!roleDict[scope.row.role]" @click="log(scope.row)">日志</el-button> - <el-button type="text" size="medium" :disabled="!roleDict[scope.row.role]" @click="detail(scope.row)">详情</el-button> - </template> - </el-table-column> - </el-table> - </div> - <el-pagination - background - :current-page="page" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - :total="total" - layout="total, sizes, prev, pager, next, jumper" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - > - </el-pagination> - <div class="mask"></div> - <Console - ref="batchConsole" - :target_id="target_id" - @refresh="init"> - </Console> - <Download - ref="batchDownload" - :target_id="target_id" - @refresh="init"> - </Download> - <Upload - ref="batchUpload" - :target_id="target_id" - @refresh="init"> - </Upload> - <CollectTraffic - ref="batchCollectTraffic" - :target_id="target_id" - @refresh="init"> - </CollectTraffic> -</div> -</template> -<script> -import Header from './module/Header.vue' -import Console from './module/Console.vue' -import Download from './module/Download.vue' -import Upload from './module/Upload.vue' -import CollectTraffic from './module/CollectTraffic' - -export default { - name: "RangeConfigManage", - components:{ Header, Console, Download, Upload, CollectTraffic }, - - data(){ - return{ - page: 1, - size: 10, - total: 0, - target_id: '', - tableData: [], - selectConfigIds: [], - rangeDict: [], - loading: false, - pendingTimer: null, - roleDict:{ - da: '权威目录节点', - client: '客户端节点', - guard: '入口节点', - relay: '路由节点', - exit: '出口节点', - onion: '洋葱服务节点', - } - } - }, - mounted() { - - }, - watch: { - '$store.state.range.targetId': { - handler(newVal, oldVal) { - this.target_id = newVal - this.init() - }, - immediate: true - } - }, - created() {}, - beforeDestroy() { - if (this.pendingTimer) { - clearInterval(this.pendingTimer) - this.pendingTimer = null - } -}, - methods:{ - init(params={}) { - // this.tableData = getTargetsResponse?.result?.items - // this.total = getTargetsResponse?.result?.total - - // const checkedData = JSON.parse(JSON.stringify(this.selectTableData)) - const reqParams = { - page: this.page, - size: this.size, - ...params - } - if (this.target_id && this.target_id !== '') { - reqParams.target_id = this.target_id - } - this.loading = true - this.$axios.get(this.$http.api.getNodeList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.tableData = res?.result?.items - this.total = res?.result?.total - // this.$nextTick(()=>{ - // checkedData.forEach((item) => { - // this.$refs?.multipleTable?.toggleRowSelection(this.tableData.find(val => val.id === item.id), true) - // }) - // }) - let index = this.tableData?.findIndex(item => { - return item.status === 'pending' - }) - if (index !== -1) { - if (!this.pendingTimer) { - this.pendingTimer = setInterval(() => { - this.init() - }, 10 * 1000) - } - } - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - query(params) { - this.init(params) - }, - // 批量控制台 - batchConsole() { - document.querySelector('.mask').style.display = 'block' - this.$refs.batchConsole.visible = true - }, - // 批量下载文件 - batchDownload() { - this.$refs.batchDownload.getNodeList() - document.querySelector('.mask').style.display = 'block' - this.$refs.batchDownload.visible = true - }, - // 批量上传 - batchUpload() { - // this.$store.commit('range/setNodeId', '') - this.$refs.batchUpload.getNodeList() - document.querySelector('.mask').style.display = 'block' - this.$refs.batchUpload.visible = true - }, - // 批量运行流水线 - batchCollectTraffic() { - this.$refs.batchCollectTraffic.getNodeList() - document.querySelector('.mask').style.display = 'block' - this.$refs.batchCollectTraffic.visible = true - }, - // 控制台 - console(row) { - this.$store.commit('range/setNodeId', row.id) - this.$router.push({ - name: 'console', - params: { - closeIcon : true - } - }) - }, - // 日志 - log(row) { - this.$store.commit('range/setNodeId', row.id) - this.$router.push({ - name: 'log', - params: { - closeIcon : true - } - }) - }, - // 详情 - detail(row) { - this.$store.commit('range/setNodeId', row.id) - //保存是否正在采集流量 - this.$store.commit('node/setStartTraffic', row.collecting) - //保存是否正在结束采集流量 - this.$store.commit('node/setEndTraffic', row.analysing) - this.$router.push({ name: 'nodeDetail'}) - }, - getStatus(status) { - let statusInfo = { - label: '', - class: '' - } - switch (status) { - case 'true': - case 'pending': - statusInfo.label = '正在部署' - statusInfo.class = 'deployNormal' - break; - case 'false': - statusInfo.label = '部署失败' - statusInfo.class = 'deployFail' - break; - case 'complete': - statusInfo.label = '部署完成' - statusInfo.class = 'deploySuccess' - break; - default: - break; - } - return statusInfo - }, - // 获取靶场列表字典 - getRangeDict() { - const reqParams = { - page: 1, - size: 99, - } - this.$axios.get(this.$http.api.getTargets, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.rangeDict = res?.result?.items.map(item => { - return { - label: item.target_name, - value: item.id - } - }) - } - }).catch(err => { - console.log(err) - }) - }, - // // 处理选中的数据 - // handleSelectionChange(selectData) { - // this.selectTableData = selectData - // this.selectConfigIds = selectData.map(item => { - // return item.id - // }) - // }, - // 修改每页数据条数 - handleSizeChange(val) { - console.log(`每页 ${val} 条`) - this.page=1 - this.size=val - this.query() - }, - // 修改页数 - handleCurrentChange(val) { - console.log(`当前页: ${val}`) - this.page=val - this.query() - } - } -} - -</script> - -<style lang='less' scoped="scoped"> -.el-pagination { - padding: 15px 55px 0 0 !important; -} -.custom-table { - width: 100%; - height: 100%; - .deploy-status { - display: inline-block; - width: 103px; - height: 28px; - color:#FFFFFF; - border-radius: 3px; - padding: 5px, 12px, 5px, 12px; - background: rgba(227, 249, 233, 0.2); - } - .deployFail { - color: #E9473E; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } - .deployNormal { - color: #02DDEA; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } - .deploySuccess { - color: #0CCB64; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } -} -.range-config-manage { - width: 100%; - height: 100%; - // display: flex; - // flex-direction: column; - // justify-content: flex-start; - .list{ - width: 100%; - height: 73%; - // margin-left: 2.5%; - // overflow-y: auto; - // overflow-y: scroll; - // overflow-x: hidden; - // border: none; - } - .list::-webkit-scrollbar { - width: 0px; /* 隐藏滚动条 */ - height: 0px; - background-color: transparent; /* 让背景透明 */ - - } - /* 隐藏火狐浏览器滚动条 */ - @-moz-document url-prefix() { - .trackSource { - scrollbar-width: none; - } - } - // 遮罩层 - .mask{ - position: fixed; /*将元素设置为固定定位*/ - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0,0,0,0.5); /*通过rgba函数来控制遮罩层的透明度*/ - display: none; /*将元素隐藏*/ - } - } -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/mock.js b/src/views/rangeNodeManage/nodeList/mock.js deleted file mode 100644 index 49bc588..0000000 --- a/src/views/rangeNodeManage/nodeList/mock.js +++ /dev/null @@ -1,38 +0,0 @@ -const getTargetsResponse ={ - "code": 200, - "message": "success", - "result": { - "items": [ - { - "setting_id": 1, - "traffic_collect_task_id": 1, - "id": 1, - "ip": "1.1.1.1", - "pod_name": "pod_name1", - "nick_name": "第一节点", - "status": "未部署", - "onion": "onion1", - "create_time": "2023-12-26T10:51:15.363Z", - "complete_time": "2023-12-26T10:51:15.363Z" - }, - { - "setting_id": 2, - "traffic_collect_task_id": 2, - "id": 2, - "ip": "2.2.2.2", - "pod_name": "pod_name2", - "nick_name": "第二节点", - "status": "已部署", - "onion": "onion2", - "create_time": "2023-12-26T10:51:15.363Z", - "complete_time": "2023-12-26T10:51:15.363Z" - } - ], - "total": 0, - "page": 1, - "size": 50, - "pages": 0 - } - } - -export { getTargetsResponse }
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/RuleList.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/RuleList.vue deleted file mode 100644 index fac918e..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/RuleList.vue +++ /dev/null @@ -1,207 +0,0 @@ -<template> - <div class="rule-section"> - <div class="task-box"> - <div class="header"> - <span>规则列表</span> - <img @click="addRule" src="../../../../../img/icon/addTrafficBtn.png" alt="" style="width: 194px; height: 40px;"> - </div> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - height="230px" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - > - <el-table-column - align="center" - prop="id" - label="id" - width="100"/> - <el-table-column - align="center" - prop="rule_name" - label="规则名称" - min-width="130"/> - <el-table-column - align="center" - prop="rule" - label="具体规则" - min-width="130" - > - </el-table-column> - <el-table-column - align="center" - prop="update_time" - label="添加时间" - min-width="130" - > - <template slot-scope="scope"> - {{ scope.row.update_time | formatDate }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="use_count" - label="使用次数" - min-width="130"/> - <el-table-column - align="center" - label="操作" - min-width="300" - > - <template slot-scope="scope"> - <el-button type="text" size="medium" @click="editRule(scope.row)">修改</el-button> - <el-button type="text" size="medium" :loading="scope.row.delLoading" @click="delRule(scope.row)">删除</el-button> - </template> - </el-table-column> - </el-table> - </div> - </div> - <div class="mask"></div> - <RuleForm ref="ruleForm" :is-add="isAdd" @refresh="init"/> - </div> - </template> - - <script> - import RuleForm from './module/RuleForm' - export default { - name: 'RuleList', - components: { RuleForm }, - props: {}, - data() { - return { - tableData: [], - isAdd: true, - visible:false, - loading: false - } - }, - created() { - this.init() - }, - methods: { - init() { - const reqParams = { - page: 1, - size: 99, - } - this.loading = true - this.$axios.get(this.$http.api.getRuleList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.tableData = res?.result?.items - this.tableData.map(item => { - this.$set(item, 'delLoading', false) - return item - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - // 添加流量采集规则 - addRule() { - this.isAdd = true - this.$refs.ruleForm.visible = true - }, - // 编辑规则 - editRule(row) { - this.isAdd = false - this.$refs.ruleForm.rule_id = row.id - this.$refs.ruleForm.form.rule_name = row.rule_name - this.$refs.ruleForm.form.rule = row.rule - this.$refs.ruleForm.visible = true - }, - // 删除规则 - delRule(row) { - this.$confirm('此操作将永久删除该规则, 是否继续?', '确认删除', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning' - }).then(() => { - this.del(row) - }).catch(() => { - this.$notify({ - title: '已取消删除', - type: 'success', - duration: 2500 - }) - }); - }, - del(row) { - const url = this.$http.api.rule + '/' + row.id - row.delLoading = true - this.$axios.delete(url, {}).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除成功', - type: 'success', - duration: 2500 - }) - this.init() - } - }).catch(err => { - console.log(err) - }).finally(() => { - row.delLoading = false - }) - }, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.visible = false - this.resetForm() - } - } - } - </script> - - <style lang="less" scoped> - .rule-section{ - // height: 100%; - .styleTable { - background-color: transparent !important; - } - .base-input { - width: 100%; - float: left; - margin-top: 2%; - text-align: center; - } - .label-span { - margin-right: 3%; - display: inline-block; - width: 60px; - text-align: right; - } - .but-color { - background-color: #02DDEA !important; - } - .task-box{ - width: 100%; - min-height: 45%; - display: flex; - flex-direction: column; - padding: 2%; - .header{ - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - height: 50px; - line-height: 50px; - margin-bottom: 1%; - } - .content { - flex: 1; - ::v-deep .el-textarea__inner { - background-color: #1A2648; - } - } - } - } - </style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/TaskList.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/TaskList.vue deleted file mode 100644 index 616ad6d..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/TaskList.vue +++ /dev/null @@ -1,391 +0,0 @@ -<template> - <div class="task-section"> - <div class="task-box"> - <div class="header"> - <span>任务列表</span> - <img @click="addTask" src="../../../../../img/icon/batchCollectBtn.png" alt="" style="width: 194px; height: 40px;"> - </div> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - v-loading="loading" - height="230px" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - @expand-change="handleExpandChange" - > - <el-table-column type="expand"> - <template slot-scope="props"> - <el-table - class="main-table styleTable" - ref="multipleTable" - v-loading="loading" - height="100%" - style="width: 100%; margin: 5px 20px;" - :data="taskNodeList" - tooltip-effect="dark" - highlight-current-row - > - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"/> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatDate }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatDate }} - </template> - </el-table-column> - </el-table> - </template> - </el-table-column> - <el-table-column - align="center" - prop="id" - label="id" - width="60"/> - <el-table-column - align="center" - prop="task_name" - label="任务名称" - min-width="100"/> - <el-table-column - align="center" - prop="traffic_collect_rule_id" - label="采集规则" - min-width="100"/> - <el-table-column - align="center" - prop="collecting" - label="任务状态" - min-width="80" - > - <template slot-scope="scope"> - {{ scope.row.collecting ? (scope.row.collecting === true ? '正在采集' : '采集失败') : '采集完成' }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="start_collect_time" - label="开始时间" - min-width="110" - > - <template slot-scope="scope"> - {{ scope.row.start_collect_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="end_collect_time" - label="结束时间" - min-width="110" - > - <template slot-scope="scope"> - {{ scope.row.end_collect_time | formatTime }} - </template> - </el-table-column> - <el-table-column - align="center" - label="操作" - min-width="300" - > - <template slot-scope="scope"> - <el-button type="text" size="medium" :loading="startLoading" @click="startTask(scope.row)">开始</el-button> - <el-button type="text" size="medium" :loading="stopLoading" @click="endTask(scope.row)">结束</el-button> - <el-button type="text" size="medium" @click="editTask(scope.row)">修改</el-button> - <el-button type="text" size="medium" @click="delTask(scope.row)">删除</el-button> - <!-- <el-button type="text" size="medium" @click="viewNode(scope.row)">查看节点</el-button> --> - <el-button type="text" size="medium" @click="downloadPack(scope.row)">下载pcap包</el-button> - </template> - </el-table-column> - </el-table> - </div> - </div> - <div class="mask"></div> - <TaskForm - ref="taskForm" - :node-list="nodeList" - :is-add="isAdd" - :target_id="target_id" - @refresh="init"> - </TaskForm> - <DownloadPack - ref="downloadPack" - @refresh="init"> - </DownloadPack> - </div> - </template> - - <script> - import TaskForm from './module/TaskForm' - import DownloadPack from './module/DownloadPack' - export default { - name: 'Console', - components: { TaskForm, DownloadPack }, - props: { - target_id: { - typeof: String, - default: 0 - }, - nodeList: { - typeof: Array, - require: true - }, - }, - data() { - return { - tableData: [], - taskNodeList: [], - isAdd: true, - visible:false, - loading: false, - startLoading: false, - stopLoading: false - } - }, - created() { - this.init() - }, - methods: { - init() { - const reqParams = { - page: 1, - size: 99, - } - this.loading = true - this.$axios.get(this.$http.api.getTaskList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - // this.total = res?.result?.total - this.tableData = res?.result?.items - this.tableData.map(item => { - this.$set(item, 'delLoading', false) - return item - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - // 创建批量采集流量任务 - addTask() { - this.isAdd = true - document.querySelector('.mask').style.display = 'block' - this.$refs.taskForm.visible = true - }, - // 编辑任务 - editTask(row) { - this.isAdd = false - this.$refs.taskForm.task_id = row.id ?? '' - this.$refs.taskForm.form.task_name = row.task_name ?? '' - this.$refs.taskForm.form.task_description = row.task_description ?? '' - this.$refs.taskForm.form.node_list = row.node_list ?? [] - this.$refs.taskForm.form.traffic_collect_rule_id = row.traffic_collect_rule_id - this.$refs.taskForm.form.filter_noise = row.filter_noise ?? '' - this.$refs.taskForm.visible = true - }, - // 开始 - startTask(row) { - const reqParams = { - task_id: row.id, - command: 'start' - } - this.startLoading = true - this.$axios.get(this.$http.api.taskStartStop, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '开始统计流量', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - this.startLoading = false - }).finally(() => { - }) - }, - // 结束 - endTask(row) { - const reqParams = { - task_id: row.id, - command: 'stop' - } - this.stopLoading = true - this.$axios.get(this.$http.api.taskStartStop, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.startLoading = false - this.$notify({ - title: '结束统计流量', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - setTimeout(() => { - this.stopLoading = false - this.init() - }, 5 * 1000) - }) - }, - - // 删除任务 - delTask(row) { - this.$confirm('此操作将永久删除该任务, 是否继续?', '确认删除', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning' - }).then(() => { - this.del(row) - }).catch(() => { - this.$notify({ - title: '已取消删除', - type: 'success', - duration: 2500 - }) - }); - }, - del(row) { - const url = this.$http.api.trafficTask + '/' + row.id - row.delLoading = true - this.$axios.delete(url, {delete_minio: true}).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '删除任务成功', - type: 'success', - duration: 2500 - }) - this.init() - } - }).catch(err => { - console.log(err) - }).finally(() => { - row.delLoading = false - }) - }, - // 展开行查看节点 - handleExpandChange(row, expandedRows) { - this.getTaskNodeList(row) - }, - // // 查看节点 - // viewNode(row) { - // this.getTaskNodeList(row) - // }, - // 获取节点列表 - getTaskNodeList(row) { - const params = { - page:1, - size: 99, - task_id: row.id - } - this.$axios.get(this.$http.api.getTrafficNodes, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.taskNodeList = res?.result?.items - } - }).catch(err => { - console.log(err) - }) - }, - // 下载pcap包 - downloadPack(row) { - this.$refs.downloadPack.task_id = row.id - this.$refs.downloadPack.init() - document.querySelector('.mask').style.display = 'block' - this.$refs.downloadPack.visible = true - } - } - } - </script> - - <style lang="less" scoped> - .task-section{ - // height: 100%; - .styleTable { - background-color: transparent !important; - } - .base-input { - width: 100%; - float: left; - margin-top: 2%; - text-align: center; - } - .label-span { - margin-right: 3%; - display: inline-block; - width: 60px; - text-align: right; - } - .but-color { - background-color: #02DDEA !important; - } - .task-box{ - width: 100%; - min-height: 45%; - display: flex; - flex-direction: column; - padding: 2%; - .header{ - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - height: 50px; - line-height: 50px; - margin-bottom: 1%; - } - .content { - flex: 1; - ::v-deep .el-textarea__inner { - background-color: #1A2648; - } - } - } - ::v-deep .el-table tbody tr>td { - // background: rgba(25, 33, 61, 0.5) !important; - background-color: #0A162C !important; - } - } - </style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/index.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/index.vue deleted file mode 100644 index fe93dd2..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/index.vue +++ /dev/null @@ -1,110 +0,0 @@ -<template> -<div class="console-dialog" v-if="visible"> - <!-- 在此处指定弹窗的样式和内容 --> - <i class="el-icon-close" @click="close"></i> - <div class="tag"> - <el-tag class="tags" style="color:#f8fdff">批量采集流量</el-tag> - </div> - <TaskList style="height: 42%;" :node-list="nodeList"></TaskList> - <RuleList style="height: 42%;"></RuleList> - <footer class="anDiv"> - <el-button class="glBut but-color" type="primary" @click="close">确定</el-button> - </footer> -</div> -</template> - -<script> -import TaskList from './TaskList' -import RuleList from './RuleList' -export default { - name: 'Console', - components: { TaskList, RuleList }, - props: { - target_id: { - typeof: String, - required: true, - default: 0 - } - }, - data() { - return { - visible:false, - nodeList: [] - } - }, - methods: { - getNodeList() { - const reqParams = { - page: 1, - size: 99 - } - if (this.target_id && this.target_id !== '') { - reqParams.target_id = this.target_id - } - this.$axios.get(this.$http.api.getNodeList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.nodeList = res?.result?.items - } - }).catch(err => { - console.log(err) - }).finally(() => {}) - }, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.$emit('refresh') - this.visible = false - } - } -} -</script> - -<style lang="less" scoped> -.console-dialog{ - z-index: 997; - width: 1331px; - height: 800px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../../img/background/NodeListDialog.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: cover; /* 宽度为100%，高度自适应保持宽高比 */ - .el-icon-close{ - float: right; - padding-right: 8%; - padding-top: 1.8% - } - .tag{ - text-align: left; - margin-left: 2%; - .tags{ - margin-top: 1%; - font-size: 23px; - border: none; - background-color: transparent !important; - color: #565e6e; - } - } - .but-color { - background-color: #02DDEA !important; - } - .anDiv{ - width: 100%; - float: left; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/DownloadPack.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/DownloadPack.vue deleted file mode 100644 index c9d7080..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/DownloadPack.vue +++ /dev/null @@ -1,223 +0,0 @@ -<template> - <div - class="custom-dialog" - v-if="visible" - > - <span class="dialog-title">pcap包下载</span> - <!-- 在此处指定弹窗的样式和内容 --> - <i class="el-icon-close" style="float: right; padding-right: 10%;padding-top: 2.5%" @click="close"></i> - <div class="basic-box"> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - v-loading="loading" - height="420px" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - @selection-change="handleSelectionChange" - > - <el-table-column - align="center" - type="selection" - width="80"/> - <el-table-column - align="center" - prop="bucket_name" - label="桶名称" - width="80"/> - <el-table-column - align="center" - prop="file_name" - label="文件名称" - min-width="100"/> - <el-table-column - align="center" - prop="size" - label="文件大小" - min-width="100" - > - </el-table-column> - <el-table-column - align="center" - prop="last_modified" - label="生成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.last_modified | formatTime }} - </template> - </el-table-column> - </el-table> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut but-color" type="primary" @click="download" :loading="downLoading">下载</el-button> - </div> - </div> - </div> - </div> -</template> - -<script> -export default { - name: 'RuleForm', - // props: ['task_id'], - data() { - return { - visible: false, - loading: false, - downLoading: false, - task_id: '', - tableData: [], - selectFileNameList: [] - } - }, - created() { - }, - methods: { - init() { - const reqParams = { - page: 1, - size: 99, - task_id: this.task_id - } - this.loading = true - this.$axios.get(this.$http.api.getPackList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.tableData = res?.result?.items - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - handleSelectionChange(selectData) { - this.selectFileNameList = selectData.map(item => { - return { - bucket_name: item.bucket_name, - file_name: item.file_name - } - }) - }, - close() { - this.resetForm() - document.querySelector('.mask').style.display = 'none' - this.visible = false - }, - resetForm() { - }, - // 下载 - download() { - if (this.selectFileNameList.length <= 0) { - this.$notify({ - title: '请勾选要下载的文件', - type: 'warning', - duration: 2500 - }) - return - } - const reqParams = { - task_id: this.task_id, - object_info_list: JSON.stringify(this.selectFileNameList) - } - this.downLoading = true - this.$axios.getFile(this.$http.api.downloadPacp, reqParams).then(res => { - if (res.status == 200 || res.statusText == "OK") { - const { data, headers } = res - const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') - // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理 - //const blob = new Blob([JSON.stringify(data)], ...) - const blob = new Blob([data], {type: headers['content-type']}) - let dom = document.createElement('a') - let url = window.URL.createObjectURL(blob) - dom.href = url - dom.download = decodeURI(fileName) - dom.style.display = 'none' - document.body.appendChild(dom) - dom.click() - dom.parentNode.removeChild(dom) - window.URL.revokeObjectURL(url) - this.$notify({ - title: '下载文件成功', - type: 'success', - duration: 2500 - }) - } else { - this.$notify({ - title: '下载文件失败', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.downLoading = false - this.close() - }) - } - } -} -</script> - -<style lang="less" scoped> - .custom-dialog{ - z-index: 998; - width: 620px; - height: 555px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../../../img/background/dialog660-553.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - // background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */ - .dialog-title { - font-size: 20px; - float: left; - margin: 11px 0 11px 20px; - } - .basic-box { - width: 100%; - min-height: 100%; - padding: 2%; - display: flex; - flex-direction: column; - .content { - flex: 1; - .bcmcDiv{ - width: 100%; - float: left; - margin-top: 5%; - text-align: center; - .bcmc { - width: 60%; - } - } - } - } - .anDiv{ - width: 100%; - float: left; - margin-bottom: 10%; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 2%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - .but-color { - background-color: #02DDEA; - } - } - } -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/RuleForm.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/RuleForm.vue deleted file mode 100644 index f280b5a..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/RuleForm.vue +++ /dev/null @@ -1,164 +0,0 @@ -<template> - <div - class="rule-dialog" - v-if="visible" - > - <!-- 在此处指定弹窗的样式和内容 --> - <i class="el-icon-close" style="float: right; padding-right: 8%;padding-top: 3%" @click="close"></i> - <el-form - ref="ruleForm" - :model="form" - :rules="rules" - label-width="150px" - class="rule-form" - > - <el-row> - <el-col :span="20"> - <el-form-item label="规则名称" prop="rule_name"> - <el-input v-model="form.rule_name" placeholder="请输入规则名称"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="规则" prop="rule"> - <el-input type="textarea" v-model="form.rule" placeholder="请输入规则"></el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div class="submit-footer"> - <div> - <el-button class="glBut but-color" type="primary" @click="submit" :loading="loading">确定</el-button> - </div> - </div> - <div class="mask"></div> - </div> -</template> - -<script> -export default { - name: 'RuleForm', - props: ['isAdd'], - data() { - return { - visible: false, - loading: false, - form: { - rule_name: '', // 规则名称 - rule: '' // 规则 - }, - rule_id: '', - rules: { - rule_name: [ - { required: true, message: '请输入规则名称', trigger: 'blur' } - ], - rule: [ - { required: true, message: '请输入规则', trigger: 'blur' } - ] - } - } - }, - methods: { - close() { - this.resetForm() - // document.querySelector('.mask').style.display = 'none' - this.visible = false - }, - submit() { - this.$refs.ruleForm.validate((valid) => { - if (valid) { - if (this.isAdd) { - this.add() - } else { - this.edit() - } - } - }) - }, - add () { - this.loading = true - const url = this.$http.api.rule - this.$axios.post(url, this.form).then(res => { - if (res.code == 200 || res.code == "OK") { - this.resetForm() - this.close() - this.$emit('refresh') - this.$notify({ - title: '创建规则成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - edit() { - this.loading = true - const url = this.$http.api.rule + `/${this.rule_id}` - this.$axios.put(url, this.form).then(res => { - if (res.code == 200 || res.code == "OK") { - this.resetForm() - this.close() - this.$emit('refresh') - this.$notify({ - title: '编辑规则成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - resetForm() { - this.form = { - rule_name: '', // 规则名称 - rule: '' // 规则 - } - } - } -} -</script> - -<style lang="less" scoped> - .rule-dialog{ - width: 620px; - height: 555px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../../../img/background/addRuleBg.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */ - .rule-form { - margin-top: 70px; - text-align: left; - } - .submit-footer{ - width: 100%; - float: left; - margin-top: 200px; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 2%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - .but-color { - background-color: #02DDEA; - } - } - } -</style> diff --git a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/TaskForm.vue b/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/TaskForm.vue deleted file mode 100644 index a7d2cc0..0000000 --- a/src/views/rangeNodeManage/nodeList/module/CollectTraffic/module/TaskForm.vue +++ /dev/null @@ -1,522 +0,0 @@ -<template> -<div class="console-dialog" v-if="visible"> - <!-- 在此处指定弹窗的样式和内容 --> - <i class="el-icon-close" @click="close"></i> - <div class="tag"> - <el-tag class="tags" :style="{'color': (tag==='添加任务') ? '#f8fdff': '#565e6e'}">添加任务</el-tag> - <el-tag class="tags" :style="{'color': (tag==='被操作节点') ? '#f8fdff': '#565e6e'}">被操作节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='操作') ? '#f8fdff': '#565e6e'}">操作</el-tag> - </div> - <div class="basic-box" v-if="tag==='添加任务'"> - <el-form - ref="addTaskForm" - :model="form" - :rules="taskRules" - label-width="150px" - class="basic-form" - size="small" - > - <el-row> - <el-col :span="12" :offset="6"> - <el-form-item label="任务名称" prop="task_name"> - <el-input v-model="form.task_name" placeholder="请输入任务名称"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12" :offset="6"> - <el-form-item label="任务描述" prop="task_description"> - <el-input v-model="form.task_description" placeholder="请输入任务描述"> - </el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <footer class="anDiv"> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点', true)">下一步</el-button> - </footer> - </div> - <div class="table-box" v-if="tag==='被操作节点'"> - <div class="tip-message">请勾选多个节点</div> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - height="100%" - style="width: 100%;" - :data="nodeList" - tooltip-effect="dark" - highlight-current-row - @selection-change="handleSelectionNode" - > - <el-table-column - align="center" - type="selection" - width="80"/> - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <template slot-scope="scope"> - <div class="deploy-status"> - <svg-icon :icon-class="getStatus(scope.row.status).class"></svg-icon> - <span :class="getStatus(scope.row.status).class">{{ getStatus(scope.row.status).label }}</span> - </div> - </template> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatDate }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatDate }} - </template> - </el-table-column> - </el-table> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('添加任务')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('操作', true)">下一步</el-button> - </div> - </div> - - </div> - <div class="basic-box" v-if="tag==='操作'"> - <el-form - ref="operateForm" - :model="form" - :rules="oprateRules" - label-width="150px" - class="basic-form" - size="small" - > - <el-row> - <el-col :span="12" :offset="6"> - <el-form-item label="选择规则" prop="traffic_collect_rule_id"> - <el-select v-model="form.traffic_collect_rule_id" placeholder="请选择规则" @focus="getRuleList"> - <el-option - v-for="item in ruleDict" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12" :offset="6"> - <el-form-item label="是否过滤噪音流量" prop="filter_noise"> - <el-radio-group v-model="form.filter_noise"> - <el-radio :label="true">是</el-radio> - <el-radio :label="false">否</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - </el-form> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="submit" :loading="loading">确认</el-button> - </div> - </div> - </div> -</div> -</template> - -<script> -export default { - name: 'TaskForm', - props: { - isAdd: { - typeof: Boolean, - required: true - }, - nodeList: { - typeof: Array, - require: true - }, - target_id: { - typeof: String, - required: true - } - }, - data() { - return { - visible:false, - loading: false, - tag:"添加任务", - task_id: '', - ruleDict: [], - form: { - task_name: '', // 任务名称 - task_description: '', // 任务描述 - node_list: [], // 节点列表 - traffic_collect_rule_id: null, // 选择规则 - filter_noise: true, // 是否过滤噪音流量 - }, - taskRules: { - task_name:[ - { required: true, message: '请输入任务名称', trigger: 'blur' } - ], - task_description: [ - { required: true, message: '请输入任务描述', trigger: 'blur' } - ] - }, - oprateRules: { - traffic_collect_rule_id: [ - { required: true, message: '请选择规则', trigger: 'blur' } - ], - filter_noise: [ - { required: true, message: '请选择是否过滤噪音流量', trigger: 'blur' } - ] - }, - setting_id: '', - torDict: [], - networkDict: [], - imageDict: [] - } - }, - created() { - // 获取规则字典 - this.getRuleList() - }, - methods: { - // 选择添加任务 - handleSelectionNode(selectRows) { - this.form.node_list = selectRows.map(row => { - return row.id - }) - }, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.visible = false - this.tag = '添加任务' - this.resetForm() - }, - // 重置 - resetForm() { - this.form = { - task_name: '', // 任务名称 - task_description: '', // 任务描述 - node_list: [], // 节点列表 - traffic_collect_rule_id: null, // 选择规则 - filter_noise: true, // 是否过滤噪音流量 - } - }, - // 选择哪个页面 - updateTag(val, isValid){ - if (val === '被操作节点' && isValid) { - this.$refs.addTaskForm.validate((valid) => { - if (valid) { - this.tag=val - } - }) - } else if(val === '操作' && isValid) { - if (this.form.node_list.length > 0) { - this.tag=val - } else { - this.$notify({ - title: '请勾选要被操作的节点！', - type: 'success', - duration: 2500 - }) - return - } - } else { - this.tag=val - } - }, - // 获取规则列表 - getRuleList() { - const reqParams = { - page: 1, - size: 99, - } - this.loading = true - this.$axios.get(this.$http.api.getRuleList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.ruleDict = res?.result?.items.map(item => { - return { - label: item.rule_name, - value: item.id - } - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - // 提交数据 - submit() { - this.$refs.operateForm.validate((valid) => { - if (valid) { - if (this.isAdd) { - this.add() - } else { - this.edit() - } - } - }) - }, - add () { - this.loading = true - const url = this.$http.api.trafficTask - this.$axios.post(url, this.form).then(res => { - if (res.code == 200 || res.code == "OK") { - this.resetForm() - this.close() - this.$emit('refresh') - this.$notify({ - title: '创建任务成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - edit() { - this.loading = true - const url = this.$http.api.trafficTask + `/${this.task_id}` - this.$axios.put(url, this.form).then(res => { - if (res.code == 200 || res.code == "OK") { - this.resetForm() - this.close() - this.$emit('refresh') - this.$notify({ - title: '编辑任务成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - getStatus(status) { - let statusInfo = { - label: '', - class: '' - } - switch (status) { - case 'true': - case 'pending': - statusInfo.label = '正在部署' - statusInfo.class = 'deployNormal' - break; - case 'false': - statusInfo.label = '部署失败' - statusInfo.class = 'deployFail' - break; - case 'complete': - statusInfo.label = '部署完成' - statusInfo.class = 'deploySuccess' - break; - default: - break; - } - return statusInfo - } - } -} -</script> - -<style lang="less" scoped> -.console-dialog{ - z-index: 997; - width: 1171px; - height: 705px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../../../img/background/NodeListDialog.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: cover; /* 宽度为100%，高度自适应保持宽高比 */ - - .el-icon-close{ - float: right; - padding-right: 7%; - padding-top: 1.8% - } - .tag{ - margin-left: 9%; - .tags{ - margin-right: 5%; - margin-top: 1%; - font-size: 23px; - border: none; - background-color: transparent !important; - color: #565e6e; - } - } - .basic-form { - margin-top: 50px; - text-align: left; - ::v-deep .el-select { - width: 100%; - } - } - .but-color { - background-color: #02DDEA !important; - } - - .basic-box{ - .anDiv{ - width: 100%; - float: left; - margin-top: 450px; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - - } - } - - .table-box{ - width: 100%; - min-height: 100%; - display: flex; - flex-direction: column; - padding: 2%; - .tip-message{ - width: 100%; - height: 50px; - text-align: left; - padding: 11px 0 12px 20px; - font-size: 20px; - background-color: #1A2648; - border-radius: 4px; - margin-bottom: 2%; - } - .content { - flex: 1; - display: flex; - flex-direction: row; - .deploy-status { - display: inline-block; - width: 103px; - height: 28px; - color:#FFFFFF; - border-radius: 3px; - padding: 5px, 12px, 5px, 12px; - background: rgba(227, 249, 233, 0.2); - } - .deployFail { - color: #E9473E; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } - .deployNormal { - color: #02DDEA; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } - .deploySuccess { - color: #0CCB64; - width: 56px; - height: 28px; - margin-left: 10px; - font-family: PingFang SC; - font-size: 14px; - font-weight: 400; - line-height: 28px; - letter-spacing: 0em; - text-align: left; - } - } - .anDiv{ - width: 100%; - float: left; - margin-bottom: 7%; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - } - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/Console.vue b/src/views/rangeNodeManage/nodeList/module/Console.vue deleted file mode 100644 index fec6b03..0000000 --- a/src/views/rangeNodeManage/nodeList/module/Console.vue +++ /dev/null @@ -1,521 +0,0 @@ -<template> -<div class="console-dialog" v-if="visible"> - <!-- 在此处指定弹窗的样式和内容 --> - <i class="el-icon-close" @click="close"></i> - <div class="tag"> - <el-tag class="tags" :style="{'color': (tag==='主节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('主节点')">主节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='被操作节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('被操作节点')">被操作节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='控制台') ? '#f8fdff': '#565e6e'}" @click="updateTag('控制台')">控制台</el-tag> - </div> - <div class="basic-box" v-if="tag==='主节点'"> - <div class="tip-message">请选择主节点作为打开文件系统的依据</div> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - height="100%" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - @selection-change="handleSelectionMain" - > - <el-table-column - align="center" - type="selection" - width="80"/> - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <!-- <template slot-scope="scope"> - {{ scope.row.has_deployed ? '已部署' : '未部署' }} - </template> --> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatDate }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatDate }} - </template> - </el-table-column> - </el-table> - </div> - <footer class="anDiv"> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">下一步</el-button> - </footer> - </div> - <div class="basic-box" v-if="tag==='被操作节点'"> - <div class="tip-message">请勾选多个节点</div> - <div class="content"> - <el-table - class="main-table styleTable" - ref="multipleTable" - height="100%" - style="width: 100%;" - :data="tableData" - tooltip-effect="dark" - highlight-current-row - @selection-change="handleSelectionMain" - > - <el-table-column - align="center" - type="selection" - width="80"/> - <el-table-column - align="center" - prop="id" - label="id" - width="80"/> - <el-table-column - align="center" - prop="nick_name" - label="节点昵称" - min-width="100"/> - <el-table-column - align="center" - prop="role" - label="角色" - min-width="100"> - <template slot-scope="scope"> - <svg-icon :icon-class="scope.row.role"></svg-icon> - </template> - </el-table-column> - <el-table-column - align="center" - prop="ip" - label="ip" - min-width="150"/> - <el-table-column - align="center" - prop="status" - label="部署状态" - min-width="100" - > - <!-- <template slot-scope="scope"> - {{ scope.row.has_deployed ? '已部署' : '未部署' }} - </template> --> - </el-table-column> - <el-table-column - align="center" - prop="create_time" - label="创建开始时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.create_time | formatDate }} - </template> - </el-table-column> - <el-table-column - align="center" - prop="complete_time" - label="创建完成时间" - min-width="100" - > - <template slot-scope="scope"> - {{ scope.row.complete_time | formatDate }} - </template> - </el-table-column> - </el-table> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('主节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('控制台')">下一步</el-button> - </div> - </div> - - </div> - <div class="basic-box" v-if="tag==='控制台'"> - <div class="tip-message">主节点名称：10-relaytwlgthavry -已勾选的节点名称列表：11-relayyqbgcxuewy、12-relayztitnmkgfl…</div> - <div class="content"> - <el-input - type="textarea" - :rows="25" - placeholder="请输入命令" - v-model="textarea"> - </el-input> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="submit" :loading="loading">确认</el-button> - </div> - </div> - </div> -</div> -</template> - -<script> -export default { - name: 'Console', - props: { - tableData: { - typeof: Array, - require: true - }, - target_id: { - typeof: String, - required: true - } - }, - data() { - return { - visible:false, - loading: false, - tag:"主节点", - setting_id: '', - form: { - role: '', // 角色选择 - tor_version: '', // tor版本 - image_id: '', // 选择镜像 - replicas: '', // 复本数 - bandwidth: '', // 宽带限制 - memory: '', // 内存限制 - service: '', // 服务器地址 - out_port: '', // 代理端口 - or_port: '', // or端口 - dir_port: '', // dir端口 - socks_port: '', // 客户端监听端口 - control_port: '', // 客户端控制端口 - - country_id: '', // 国家 - network_id: '', // 网络 - - deployType: '', // 部署方式 - direct: false, // 直接部署true 仅添加配置false - start_tcpdump: false // 启动采集程序并部署 true - }, - roleDict:[ - {label: '权威目录节点', value: 'da'}, - {label: '路由节点', value: 'relay'}, - {label: '出口节点', value: 'exit'}, - {label: '洋葱服务节点', value: 'onion'}, - {label: '客户端节点', value: 'client'}, - {label: '入口节点', value: 'guard'}, - {label: '其他节点', value: 'other'} - ], - torDict: [], - networkDict: [], - imageDict: [] - } - }, - methods: { - // 选择主节点 - handleSelectionMain() {}, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.visible = false - this.tag = '主节点' - this.resetForm() - }, - // 重置 - resetForm() { - this.form = { - role: '', // 角色选择 - tor_version: '', // tor版本 - image_id: '', // 选择镜像 - replicas: '', // 复本数 - bandwidth: '', // 宽带限制 - memory: '', // 内存限制 - service: '', // 服务器地址 - out_port: '', // 代理端口 - or_port: '', // or端口 - dir_port: '', // dir端口 - socks_port: '', // 客户端监听端口 - control_port: '', // 客户端控制端口 - - country_id: '', // 国家 - network_id: '', // 网络 - - deployType: '', // 部署方式 - direct: false, // 直接部署true 仅添加配置false - start_tcpdump: false // 启动采集程序并部署 true - } - }, - // 选择哪个页面 - updateTag(val){ - this.tag=val - }, - // 角色选择 - selectRole(node) { - if (node === 'other') { - this.$emit('openRoleForm') - } - // 获取torDict - this.$axios.get(this.$http.api.getTorDict, {role: this.form.role}).then(res => { - if (res.code == 200 || res.code == "OK") { - this.torDict = res?.result - } - }).catch(err => { - console.log(err) - }) - // 获取镜像字典 - this.getImageDict() - - }, - // tor选择 - selectTor(tor){ - // 获取镜像字典 - this.getImageDict() - }, - // 获取imageDict - getImageDict(){ - const params = { - page:1, - size: 99, - image_name: this.form.role, - image_version: this.form.tor_version - } - this.$axios.get(this.$http.api.getImageDict, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.imageDict = res?.result?.items.map(item => { - return { - label: item.image_name + '-' + item.image_version, - value: item.id - } - }) - } - }).catch(err => { - console.log(err) - }) - }, - // 获取网络 - getNetworkDict(){ - const params = { - page:1, - size: 99, - country_id: this.form.country_id, - } - this.$axios.get(this.$http.api.getNetworkDict, params).then(res => { - if (res.code == 200 || res.code == "OK") { - this.networkDict = res?.result?.items.map(item => { - return { - label: item.cidr, - value: item.id - } - }) - } - }).catch(err => { - console.log(err) - }) - }, - selectDeploy(deployType) { - switch (deployType) { - case 'direct': - this.form.direct = true - break - case 'only': - this.form.direct = false - break - case 'start': - this.form.start_tcpdump = true - break - default: - this.form.direct = true - break - } - }, - // 提交数据 - submit() { - // const submitForm = this.setSubmitForm() - // if (this.isAdd) { - // this.add(submitForm) - // } else { - // this.edit(submitForm) - // } - }, - setSubmitForm() { - const {role, image_id, replicas, bandwidth, memory } = this.form - let submitForm = {role, image_id, replicas, bandwidth, memory } - if (this.form.role === 'other') { - submitForm.role = this.otherRole - } else if (this.form.role==='da'||this.form.role==='relay'||this.form.role ==='guard'||this.form.role ==='exit') { - submitForm.tor_version = this.form.tor_version - submitForm.or_port = this.form.or_port - submitForm.dir_port = this.form.dir_port - } else if (this.form.role==='onion') { - submitForm.tor_version = this.form.tor_version - submitForm.service = this.form.service - submitForm.socks_port = this.form.socks_port - submitForm.control_port = this.form.control_port - } else if (this.form.role==='client') { - submitForm.tor_version = this.form.tor_version - submitForm.out_port = this.form.out_port - submitForm.socks_port = this.form.socks_port - submitForm.control_port = this.form.control_port - } - return submitForm - }, - add(submitForm) { - this.loading = true - const url = this.$http.api.setting + `/?target_id=${this.target_id}&network_id=${this.form.network_id}&direct=${this.form.direct}&start_tcpdump=${this.form.start_tcpdump}` - this.$axios.post(url, submitForm).then(res => { - if (res.code == 200 || res.code == "OK") { - this.close() - this.$emit('refresh') - this.$notify({ - title: '添加靶场配置成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - }, - edit(submitForm) { - this.loading = true - const url = this.$http.api.setting + `/?target_id=${this.target_id}&setting_id=${this.setting_id}&network_id=${this.form.network_id}&direct=${this.form.direct}&start_tcpdump=${this.form.start_tcpdump}` - this.$axios.put(url, submitForm).then(res => { - if (res.code == 200 || res.code == "OK") { - this.close() - this.$emit('refresh') - this.$notify({ - title: '添加靶场配置成功', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - } - } -} -</script> - -<style lang="less" scoped> -.console-dialog{ - z-index: 997; - width: 1331px; - height: 800px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../img/background/NodeListDialog.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: cover; /* 宽度为100%，高度自适应保持宽高比 */ - .el-icon-close{ - float: right; - padding-right: 8%; - padding-top: 1.8% - } - .tag{ - margin-left: 15%; - .tags{ - margin-right: 5%; - margin-top: 1%; - font-size: 23px; - border: none; - background-color: transparent !important; - color: #565e6e; - } - } - - .base-input { - width: 100%; - float: left; - margin-top: 2%; - text-align: center; - } - .label-span { - margin-right: 3%; - display: inline-block; - width: 60px; - text-align: right; - } - .but-color { - background-color: #02DDEA !important; - } - .basic-box{ - width: 100%; - min-height: 100%; - display: flex; - flex-direction: column; - padding: 2%; - .tip-message{ - width: 100%; - height: 50px; - line-height: 50px; - font-size: 20px; - background-color: #1A2648; - border-radius: 4px; - margin-bottom: 2%; - } - .content { - flex: 1; - ::v-deep .el-textarea__inner { - background-color: #1A2648; - } - } - .anDiv{ - width: 100%; - float: left; - margin-bottom: 7%; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - - } - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/Download.vue b/src/views/rangeNodeManage/nodeList/module/Download.vue deleted file mode 100644 index b76a9e5..0000000 --- a/src/views/rangeNodeManage/nodeList/module/Download.vue +++ /dev/null @@ -1,274 +0,0 @@ -<template> -<div class="console-dialog" v-if="visible"> - <i class="el-icon-close" @click="close"></i> - <div class="tag"> - <el-tag class="tags" :style="{'color': (tag==='主节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('主节点')">主节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='被操作节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('被操作节点')">被操作节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='文件管理') ? '#f8fdff': '#565e6e'}" @click="updateTag('文件管理')">文件管理</el-tag> - </div> - <div class="basic-box" v-show="tag==='主节点'"> - <div class="tip-message">请选择主节点作为打开文件系统的依据</div> - <div class="content"> - <!-- 主节点 --> - <MainNode - :node-list="nodeList" - @selectMainNode="selectMainNode" - ></MainNode> - </div> - <footer class="anDiv"> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">下一步</el-button> - </footer> - </div> - <div class="basic-box" v-show="tag==='被操作节点'"> - <div class="tip-message">请勾选多个节点</div> - <div class="content"> - <!-- 被操作节点 --> - <OperateNode - :node-list="nodeList" - @selectOperateNode="selectOperateNode" - ></OperateNode> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('主节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('文件管理')">下一步</el-button> - </div> - </div> - - </div> - <div class="basic-box" v-if="tag==='文件管理'"> - <div class="tip-message" style="height: 76px;"> - <span>{{`主节点名称：${master_node_name}`}}<br/>{{`已勾选的节点名称列表：${batch_node_name_list.join('、')}`}}</span> - </div> - <!-- 文件管理 --> - <FileManager - ref="fileManager" - ></FileManager> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="download" :loading="loading">下载</el-button> - </div> - </div> - </div> -</div> -</template> - -<script> -import MainNode from '../components/MainNode.vue' -import OperateNode from '../components/OperateNode.vue' -import FileManager from '../components/DownloadFileManager.vue' -import qs from 'qs' -export default { - name: 'Download', - components:{ - MainNode, - OperateNode, - FileManager - }, - props: { - target_id: { - typeof: String, - required: true - } - }, - data() { - return { - nodeList: [], - downloadForm: { - master_node_id: '', - batch_node_id_list: [], - current_dir: '', - filename: '' - }, - master_node_name: '', - batch_node_name_list: [], - visible:false, - loading: false, - tag:"主节点", - form: {} - } - }, - methods: { - // 获取节点列表 - getNodeList() { - const reqParams = { - page: 1, - size: 99 - } - if (this.target_id && this.target_id !== '') { - reqParams.target_id = this.target_id - } - this.$axios.get(this.$http.api.getNodeList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.nodeList = res?.result?.items - } - }).catch(err => { - console.log(err) - }).finally(() => {}) - }, - // 选择主节点 - selectMainNode({ id, nick_name }) { - this.$store.commit('range/setNodeId', id) - this.downloadForm.master_node_id = id - this.master_node_name = nick_name - }, - // 选择被操作节点 - selectOperateNode(selectRows) { - this.batch_node_name_list = [] - this.downloadForm.batch_node_id_list = selectRows.map(row => { - this.batch_node_name_list.push(row.nick_name) - return row.id - }) - }, - // 选择上传文件 - selectUploadFile({path, file}) { - this.downloadForm.current_dir = path - this.downloadForm.file = file - }, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.visible = false - this.tag = '主节点' - this.resetForm() - }, - // 重置 - resetForm() { - this.form = {} - }, - // 选择哪个页面 - updateTag(val){ - this.tag=val - }, - // 提交数据 - download() { - this.downloadForm.current_dir = this.$refs.fileManager.selectNode.path - this.downloadForm.filename = this.$refs.fileManager.filename - const reqParams = qs.stringify(this.downloadForm, { arrayFormat: 'repeat' }) - const url = this.$http.api.batchDownload + '?' + reqParams - this.$axios.getFile(url).then(res => { - if (res.status == 200 || res.statusText == "OK") { - const { data, headers } = res - const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') - // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理 - //const blob = new Blob([JSON.stringify(data)], ...) - const blob = new Blob([data], {type: headers['content-type']}) - let dom = document.createElement('a') - let url = window.URL.createObjectURL(blob) - dom.href = url - dom.download = decodeURI(fileName) - dom.style.display = 'none' - document.body.appendChild(dom) - dom.click() - dom.parentNode.removeChild(dom) - window.URL.revokeObjectURL(url) - this.$notify({ - title: '下载文件成功', - type: 'success', - duration: 2500 - }) - } else { - this.$notify({ - title: '下载文件失败', - type: 'success', - duration: 2500 - }) - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.close() - }) - } - } -} -</script> - -<style lang="less" scoped> -.console-dialog{ - z-index: 997; - width: 1331px; - height: 800px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../img/background/NodeListDialog.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: cover; /* 宽度为100%，高度自适应保持宽高比 */ - .el-icon-close{ - float: right; - padding-right: 8%; - padding-top: 1.8% - } - .tag{ - margin-left: 15%; - .tags{ - margin-right: 5%; - margin-top: 1%; - font-size: 23px; - border: none; - background-color: transparent !important; - color: #565e6e; - } - } - .base-input { - width: 100%; - float: left; - margin-top: 2%; - text-align: center; - } - .label-span { - margin-right: 3%; - display: inline-block; - width: 60px; - text-align: right; - } - .but-color { - background-color: #02DDEA !important; - } - .basic-box{ - width: 100%; - min-height: 100%; - display: flex; - flex-direction: column; - padding: 2%; - .tip-message{ - width: 100%; - height: 50px; - text-align: left; - padding: 11px 0 12px 20px; - font-size: 20px; - background-color: #1A2648; - border-radius: 4px; - margin-bottom: 2%; - } - .content { - flex: 1; - display: flex; - flex-direction: row; - } - .anDiv{ - width: 100%; - float: left; - margin-bottom: 7%; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - } - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/Header.vue b/src/views/rangeNodeManage/nodeList/module/Header.vue deleted file mode 100644 index f4c97c7..0000000 --- a/src/views/rangeNodeManage/nodeList/module/Header.vue +++ /dev/null @@ -1,146 +0,0 @@ -<template> -<div class="head"> - <div class="role-select"> - <el-select v-model="role" clearable placeholder="节点角色" @change="query"> - <el-option - v-for="item in roleDict" - :key="item.value" - :label="item.label" - :value="item.value"> - <svg-icon :icon-class="item.value ? item.value : 'other'"></svg-icon> - <span style="margin-left: 10px;">{{ item.label }}</span> - </el-option> - </el-select> - </div> - <div class="deploy-select"> - <el-select v-model="status" clearable placeholder="节点部署状态" @change="query"> - <el-option - v-for="item in statusDict" - :key="item.value" - :label="item.label" - :value="item.value"> - </el-option> - </el-select> - </div> - <el-button v-if="false" type="primary" @click="batchConsole">批量控制台</el-button> - <el-button v-if="true" type="primary" @click="batchDownload">批量下载文件</el-button> - <el-button v-if="true" type="primary" @click="batchUpload">批量上传文件</el-button> - <el-button v-if="true" type="primary" @click="batchCollectTraffic">批量采集流量</el-button> -</div> -</template> - -<script> -export default { - name: 'Header', - data() { - return { - role: '', - status: '', - roleDict:[ - {label: '全部节点', value: ''}, - {label: '权威目录节点', value: 'da'}, - {label: '路由节点', value: 'relay'}, - {label: '出口节点', value: 'exit'}, - {label: '洋葱服务节点', value: 'onion'}, - {label: '客户端节点', value: 'client'}, - {label: '入口节点', value: 'guard'} - ], - statusDict: [ - {value: 'pending', label: '正在部署'}, - {value: 'false', label: '部署失败'}, - {value: 'complete',label: '部署完成'} - ] - } - }, - methods: { - // 查询 - query() { - let params = {} - if (this.role !== '') { - params.role = this.role - } - if (this.status !== '') { - params.status = this.status - } - this.$emit('query', params) - }, - // 批量控制台 - batchConsole() { - this.$emit('batchConsole') - }, - // 批量下载文件 - batchDownload() { - this.$emit('batchDownload') - }, - // 批量上传文件 - batchUpload() { - this.$emit('batchUpload') - }, - // 批量采集流量 - batchCollectTraffic() { - this.$emit('batchCollectTraffic') - } - } -} -</script> - -<style lang="less" scoped> -.head{ - width: 100%; - height: 15%; - margin-top: 1%; - text-align: right; - - /*background-color: #5daf34;*/ - .block{ - display: inline-block; - margin-left: 2%; - - } - .input{ - display: inline-block; - height: 60%; - width: 10%; - margin-left: 0.5%; - .el-input::placeholder { - width: auto; - } - .icon-group { - display: flex; /* 设置容器为 Flexbox 容器 */ - align-items: center; /* 垂直居中图片 */ - gap: 5px; /* 图片和文字之间的间距，可以根据需要进行调整 */ - - } - .icon-group img { - transform: scale(1); - margin-right: 15px; - margin-top: 6px; - } - - } - .deploy-select{ - display: inline-block; - height: 60%; - width: 10%; - margin-top: 0.5%; - margin-left: 0.5%; - margin-right: 1%; - .el-input::placeholder { - width: auto; - } - .icon-group { - display: flex; /* 设置容器为 Flexbox 容器 */ - align-items: center; /* 垂直居中图片 */ - gap: 5px; /* 图片和文字之间的间距，可以根据需要进行调整 */ - } - .icon-group img { - transform: scale(1); - margin-right: 15px; - margin-top: 6px; - } - } - ::v-deep .role-select{ - display: inline-block; - } -} -</style>
\ No newline at end of file diff --git a/src/views/rangeNodeManage/nodeList/module/Upload.vue b/src/views/rangeNodeManage/nodeList/module/Upload.vue deleted file mode 100644 index 987749c..0000000 --- a/src/views/rangeNodeManage/nodeList/module/Upload.vue +++ /dev/null @@ -1,285 +0,0 @@ -<template> -<div class="console-dialog" v-if="visible"> - <i class="el-icon-close" @click="close"></i> - <div class="tag"> - <el-tag class="tags" :style="{'color': (tag==='主节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('主节点')">主节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='被操作节点') ? '#f8fdff': '#565e6e'}" @click="updateTag('被操作节点')">被操作节点</el-tag> - <el-tag class="tags" :style="{'color': (tag==='文件管理') ? '#f8fdff': '#565e6e'}" @click="updateTag('文件管理')">文件管理</el-tag> - </div> - <div class="basic-box" v-show="tag==='主节点'"> - <div class="tip-message">请选择主节点作为打开文件系统的依据</div> - <div class="content"> - <!-- 主节点 --> - <MainNode - :node-list="nodeList" - @selectMainNode="selectMainNode" - ></MainNode> - </div> - <footer class="anDiv"> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">下一步</el-button> - </footer> - </div> - <div class="basic-box" v-show="tag==='被操作节点'"> - <div class="tip-message">请勾选多个节点</div> - <div class="content"> - <!-- 被操作节点 --> - <OperateNode - :node-list="nodeList" - @selectOperateNode="selectOperateNode" - ></OperateNode> - </div> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('主节点')">上一步</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('文件管理')">下一步</el-button> - </div> - </div> - - </div> - <div class="basic-box" v-if="tag==='文件管理'"> - <div class="tip-message" style="height: 76px;"> - <span>{{`主节点名称：${master_node_name}`}}<br/>{{`已勾选的节点名称列表：${batch_node_name_list.join('、')}`}}</span> - </div> - <!-- 文件管理 --> - <FileManager - ref="fileManager" - ></FileManager> - <div class="anDiv"> - <div> - <el-button class="glBut" type="primary" @click="close">取消</el-button> - <el-button class="glBut but-color" type="primary" @click="updateTag('被操作节点')">上一步</el-button> - <label - class="file-upload-button" - for="file-input-upload" - > - <span>上传</span> - <input - type="file" - id="file-input-upload" - @change="submit" - style="display: none;" - /> - </label> - </div> - </div> - </div> -</div> -</template> - -<script> -import MainNode from '../components/MainNode.vue' -import OperateNode from '../components/OperateNode.vue' -import FileManager from '../components/UploadFileManager.vue' -import qs from 'qs' -export default { - name: 'Upload', - components:{ - MainNode, - OperateNode, - FileManager - }, - props: { - target_id: { - typeof: String, - required: true - } - }, - data() { - return { - nodeList: [], - uploadForm: { - master_node_id: '', - batch_node_id_list: [], - current_dir: '' - }, - file: '', - master_node_name: '', - batch_node_name_list: [], - visible:false, - loading: false, - tag:"主节点", - form: {} - } - }, - methods: { - // 获取节点列表 - getNodeList() { - const reqParams = { - page: 1, - size: 99 - } - if (this.target_id && this.target_id !== '') { - reqParams.target_id = this.target_id - } - this.$axios.get(this.$http.api.getNodeList, reqParams).then(res => { - if (res.code == 200 || res.code == "OK") { - this.nodeList = res?.result?.items - } - }).catch(err => { - console.log(err) - }).finally(() => {}) - }, - // 选择主节点 - selectMainNode({ id, nick_name }) { - this.$store.commit('range/setNodeId', id) - this.uploadForm.master_node_id = id - this.master_node_name = nick_name - }, - // 选择被操作节点 - selectOperateNode(selectRows) { - this.batch_node_name_list = [] - this.uploadForm.batch_node_id_list = selectRows.map(row => { - this.batch_node_name_list.push(row.nick_name) - return row.id - }) - }, - // // 选择上传文件 - // selectUploadFile({path}) { - // this.uploadForm.current_dir = path - // // this.file = file - // }, - // 关闭 - close() { - document.querySelector('.mask').style.display = 'none' - this.visible = false - this.tag = '主节点' - this.resetForm() - }, - // 重置 - resetForm() { - this.form = {} - }, - // 选择哪个页面 - updateTag(val){ - this.tag=val - }, - // 提交数据 - submit(e) { - this.uploadForm.current_dir = this.$refs.fileManager.selectNode.path - this.file = e.target.files[0] - const params = qs.stringify(this.uploadForm, { arrayFormat: 'repeat' }) - const url = this.$http.api.batchUpload + '?' + params - const submitForm = new FormData() - submitForm.append('file', this.file) - this.loading = true - this.$axios.postFormData(url, submitForm).then(res => { - if (res.code == 200 || res.code == "OK") { - this.$notify({ - title: '批量上传成功', - type: 'success', - duration: 2500 - }) - // 更新当前路径下的文件信息 - this.$refs.fileManager.updateCurrentPath() - } - }).catch(err => { - console.log(err) - }).finally(() => { - this.loading = false - }) - } - } -} -</script> - -<style lang="less" scoped> -.console-dialog{ - z-index: 997; - width: 1331px; - height: 800px; - position: absolute; /* 绝对定位 */ - top: 50%; /* 向下偏移50% */ - left: 50%; /* 向右偏移50% */ - transform: translate(-50%, -50%); /* 回移50% */ - background-image:url('../../../../img/background/NodeListDialog.svg'); - background-repeat: no-repeat; /* 可选，防止图像重复 */ - background-size: cover; /* 宽度为100%，高度自适应保持宽高比 */ - .el-icon-close{ - float: right; - padding-right: 8%; - padding-top: 1.8% - } - .tag{ - margin-left: 15%; - .tags{ - margin-right: 5%; - margin-top: 1%; - font-size: 23px; - border: none; - background-color: transparent !important; - color: #565e6e; - } - } - .base-input { - width: 100%; - float: left; - margin-top: 2%; - text-align: center; - } - .label-span { - margin-right: 3%; - display: inline-block; - width: 60px; - text-align: right; - } - .but-color { - background-color: #02DDEA !important; - } - - .file-upload-button { - display: inline-block; - padding: 5px 33px; - background-color: #02DDEA; - color: #1b7cc4; - border: none; - border-radius: 0; - cursor: pointer; - font-size: 14px; - } - .file-upload-button:hover { - background-color: #02DDEA; - } - - .basic-box{ - width: 100%; - min-height: 100%; - display: flex; - flex-direction: column; - padding: 2%; - .tip-message{ - width: 100%; - height: 50px; - text-align: left; - padding: 11px 0 12px 20px; - font-size: 20px; - background-color: #1A2648; - border-radius: 4px; - margin-bottom: 2%; - } - .content { - flex: 1; - display: flex; - flex-direction: row; - } - .anDiv{ - width: 100%; - float: left; - margin-bottom: 7%; - text-align: center; - .glBut{ - width: 90px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - margin-left: 5%; - margin-right: 5%; - background-color: rgba(24, 133, 234, 0.2); - color: #1b7cc4; - } - } - } -} -</style>
\ No newline at end of file |