diff options
Diffstat (limited to 'src/views/rangeNodeManage/nodeList/module')
10 files changed, 0 insertions, 2843 deletions
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 |