summaryrefslogtreecommitdiff
path: root/src/views/rangeConfigManage
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/rangeConfigManage')
-rw-r--r--src/views/rangeConfigManage/index.vue729
-rw-r--r--src/views/rangeConfigManage/mock.js718
-rw-r--r--src/views/rangeConfigManage/module/ConfigForm.vue658
-rw-r--r--src/views/rangeConfigManage/module/Header.vue204
-rw-r--r--src/views/rangeConfigManage/module/RoleForm.vue94
5 files changed, 0 insertions, 2403 deletions
diff --git a/src/views/rangeConfigManage/index.vue b/src/views/rangeConfigManage/index.vue
deleted file mode 100644
index f7466c0..0000000
--- a/src/views/rangeConfigManage/index.vue
+++ /dev/null
@@ -1,729 +0,0 @@
-<template>
- <div class="range-config-manage" ref="appRef">
- <div class="show">
- <Header
- :range-dict="rangeDict"
- :batch-deploy-loading="batchDeployLoading"
- :batch-del-loading="batchDelLoading"
- :batch-pipeline-loading="batchPipelineLoading"
- :disabled-batch-pipline="disabledBatchPipline"
- @addConfig="addConfig"
- @query="query"
- @batchDeploy="batchDeploy"
- @batchDel="batchDel"
- @batchPipeline="batchPipeline"
- ></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
- @cell-mouse-enter="cellEnter"
- @selection-change="handleSelectionChange"
- >
- <el-table-column
- align="center"
- type="selection"
- width="80"/>
- <el-table-column
- align="center"
- type="index"
- label="序号"
- width="80"/>
- <el-table-column
- align="center"
- prop="tor_version"
- label="Tor版本"
- 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="replicas"
- label="复本数"
- min-width="100"/>
- <el-table-column
- align="center"
- prop="service"
- label="服务"
- min-width="150"/>
- <el-table-column
- align="center"
- prop="bandwidth"
- label="宽带"
- min-width="100"/>
- <el-table-column
- align="center"
- prop="memory"
- label="内存"
- min-width="100"/>
- <el-table-column
- align="center"
- prop="out_port"
- label="映射端口"
- min-width="100"/>
- <el-table-column
- align="center"
- prop="has_deployed"
- label="部署状态"
- min-width="100"
- >
- <template slot-scope="scope">
- {{ scope.row.has_deployed ? '已部署' : '未部署' }}
- </template>
- </el-table-column>
- <el-table-column
- align="center"
- prop="network_id"
- label="网络"
- min-width="100">
- <template slot-scope="scope">
- <el-popover
- placement="top"
- width="180"
- trigger="hover"
- :visible-arrow="false"
- popper-class= "pop-con"
- :ref="`popover1` + scope.$index">
- <div v-if="popVisiable === true" style="text-align: center; margin: 0;">
- <p>国家：{{popoverData.country}}</p>
- <p>网络：{{popoverData.network}}</p>
- </div>
- <a
- class="network"
- slot="reference"
- @mouseenter="openAction(scope.$index)"
- @mouseleave="cancelAction(scope.$index)"
- >
- {{ `网络${scope.row.network_id}`}}
- </a>
- </el-popover>
- </template>
- </el-table-column>
- <el-table-column
- align="center"
- label="操作"
- min-width="300"
- >
- <template slot-scope="scope">
- <el-button type="text" size="medium" :disabled="scope.row.delLoading" @click="edit(scope.row)">修改</el-button>
- <el-button type="text" size="medium" :disabled="scope.row.has_deployed==true || scope.row.delLoading" :loading="scope.row.deployLoading" @click="deploy(scope.row)">部署</el-button>
- <el-button type="text" size="medium" :loading="scope.row.delLoading" @click="del(scope.row)">删除</el-button>
- <el-button type="text" size="medium" :disabled="scope.row.delLoading" :loading="scope.row.restartLoading" @click="restart(scope.row)">重启</el-button>
- <el-button type="text" size="medium" :disabled="scope.row.pipeline_id===0 || scope.row.delLoading" :loading="scope.row.pipelineLoading" @click="pipeline(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>
- <ConfigForm
- ref="configForm"
- :is-add="isAdd"
- :target_id="target_id"
- :other-role="otherRole"
- :country-dict="countryDict"
- @refresh="init"
- @openRoleForm="openRoleForm"
- @clearRoleForm="clearRoleForm">
- </ConfigForm>
- <RoleForm
- ref="roleForm"
- v-model="otherRole"
- @submitOtherRole="submitOtherRole">
- </RoleForm>
- </div>
- </div>
-</template>
-<script>
-import Header from './module/Header.vue'
-import ConfigForm from './module/ConfigForm.vue'
-import RoleForm from './module/RoleForm.vue'
-import { getTargetsResponse } from './mock.js'
-export default {
- name: "RangeConfigManage",
- components:{ Header, ConfigForm, RoleForm },
- // props:['fTag','fInput','fFrom','FIsConfigQuery'],
- data(){
- return{
- page: 1,
- size: 10,
- total: 0,
- isAdd: false,
- loading: false,
- target_id: '',
- otherRole: '',
- tableData: [],
- selectConfigIds: [],
- countryDict: [],
- rangeDict: [],
- batchDeployLoading: false,
- batchDelLoading: false,
- batchPipelineLoading: false,
- networkVisible: false,
- popoverData: {},
- popVisiable: false,
- roleDict:{
- da: '权威目录节点',
- client: '客户端节点',
- guard: '入口节点',
- relay: '路由节点',
- exit: '出口节点',
- onion: '洋葱服务节点',
- },
- disabledBatchPipline: false,
- delTimer: null,
- counter: 0,
- batchDelTimer: null,
- batchCounter: 0,
- }
- },
- mounted() {
-
- },
- watch: {
- '$store.state.range.targetId': {
- handler(newVal, oldVal) {
- this.target_id = newVal
- this.init()
- },
- immediate: true
- }
- },
- created() {
- this.getCountryDict()
- this.getRangeDict()
- },
- destroyed() {
- if(this.delTimer) {
- clearInterval(this.delTimer)
- this.delTimer = null
- }
- if(this.batchDelTimer) {
- clearInterval(this.batchDelTimer)
- this.batchDelTimer = null
- }
- this.counter = 0
- this.batchCounter = 0
- },
- methods:{
- init(params={}) {
- // this.tableData = getTargetsResponse?.result?.items
- // this.total = getTargetsResponse?.result?.total
-
- // TODO: 暂时注释接口
- 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.getSettingList, 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, 'deployLoading', false)
- this.$set(item, 'delLoading', false)
- this.$set(item, 'restartLoading', false)
- this.$set(item, 'pipelineLoading', false)
- return item
- })
- // 是否全部都没有流水线
- this.disabledBatchPipline = this.tableData.findIndex(item => item.pipeline_id !== 0) === -1 ? true : false
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.loading = false
- })
- },
- query(params) {
- this.init(params)
- },
- // 打开添加配置dialog
- addConfig() {
- this.isAdd = true
- this.$refs.configForm.getTorDict()
- this.$refs.configForm.getImageDict()
- document.querySelector('.mask').style.display = 'block'
- this.$refs.configForm.visible = true
- },
- // 当选择其它角色时，弹窗填写角色窗
- openRoleForm() {
- this.$refs.roleForm.visible = true
- },
- clearRoleForm() {
- this.otherRole = ''
- },
- // 编辑Form重新请求镜像字典
- submitOtherRole() {
- this.$refs.configForm.getImageDict()
- },
- // 批量部署
- batchDeploy() {
- if (this.selectConfigIds.length === 0) {
- this.$notify({
- title: '请勾选要部署的数据！',
- type: 'success',
- duration: 2500
- })
- return
- }
- this.batchDeployLoading = true
- this.$axios.post(this.$http.api.batchDeply, {setting_id_list: this.selectConfigIds}, {target_id: this.target_id}).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.$notify({
- title: '批量部署成功',
- type: 'success',
- duration: 2500
- })
- this.init()
- } else {
- this.$notify({
- title: res,
- type: 'success',
- duration: 2500
- })
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.batchDeployLoading = false
- })
- },
- // 批量删除
- batchDel() {
- if (this.selectConfigIds.length === 0) {
- this.$notify({
- title: '请勾选要删除的数据！',
- type: 'success',
- duration: 2500
- })
- return
- }
- this.batchDelLoading = true
- this.$axios.delete(this.$http.api.asynBatchDel, {}, {setting_id_list: this.selectConfigIds}).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.init()
- this.$notify({
- title: res.message,
- type: 'success',
- duration: 2500
- })
- this.batchDelTimer = setInterval(() => {
- this.getBatchTask(res?.result?.task_id || '')
- },10 * 1000)
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.batchDelLoading = false
- })
- },
- // 批量运行流水线
- batchPipeline() {
- if (this.selectConfigIds.length === 0) {
- this.$notify({
- title: '请勾选要运行流水线的数据！',
- type: 'success',
- duration: 2500
- })
- return
- }
- this.batchPipelineLoading = true
- this.$axios.post(this.$http.api.batchPipeline, {setting_id_list: this.selectConfigIds}, {}).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.$notify({
- title: '批量运行流水线成功',
- type: 'success',
- duration: 2500
- })
- this.init()
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.batchPipelineLoading = false
- })
- },
- // 部署
- deploy(row) {
- row.deployLoading = true
- this.$axios.post(this.$http.api.singleDeploy, {}, {setting_id: row.id}).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.deployLoading = false
- })
- },
- // 删除
- del(row) {
- const url = this.$http.api.asynDelSetting + '/' + row.id
- const params = {
- user_id: row.user_id
- }
- row.delLoading = true
- this.$axios.delete(url, params).then(res => {
- if (res.code == 200 || res.code == "OK") {
- // this.init()
- this.$notify({
- title: res.message,
- type: 'success',
- duration: 2500
- })
- if (this.delTimer) {
- clearInterval(this.delTimer)
- this.delTimer = null
- this.counter = 0
- }
- this.delTimer = setInterval(() => {
- this.getTask(res?.result?.task_id || '')
- },10 * 1000)
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- // row.delLoading = false
- })
- },
- // 重启
- restart(row) {
- row.restartLoading = true
- this.$axios.post(this.$http.api.singleDeploy, {}, { setting_id: row.id }).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.restartLoading = false
- })
- },
- // 运行流水线
- pipeline(row) {
- row.pipelineLoading = true
- this.$axios.post(this.$http.api.pipeline, {}, { setting_id: row.id }).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.pipelineLoading = false
- })
- },
- // 修改
- edit(row) {
- this.isAdd = false
- this.$refs.configForm.setting_id = row.id
- this.$refs.configForm.form.role = row.role
- this.$refs.configForm.form.tor_version = row.tor_version
- this.$refs.configForm.form.image_id = row.image_id
- this.$refs.configForm.form.replicas = row.replicas
- this.$refs.configForm.form.bandwidth = row.bandwidth
- this.$refs.configForm.form.memory = row.memory
- this.$refs.configForm.form.service = row.service
- this.$refs.configForm.form.out_port = row.out_port
- this.$refs.configForm.form.or_port = row.or_port
- this.$refs.configForm.form.dir_port = row.dir_port
- this.$refs.configForm.form.socks_port = row.socks_port
- this.$refs.configForm.form.control_port = row.control_port
- this.$refs.configForm.form.country_id = row.country_id
- this.$refs.configForm.form.network_id = row.network_id
- this.$refs.configForm.form.direct = row.direct
- this.$refs.configForm.form.start_tcpdump = row.start_tcpdump
- if(row.start_tcpdump) {
- this.$refs.configForm.form.deployType = 'start'
- } else {
- if(row.direct) {
- this.$refs.configForm.form.deployType = 'direct'
- } else {
- this.$refs.configForm.form.deployType = 'only'
- }
- }
- this.$refs.configForm.getTorDict()
- this.$refs.configForm.getImageDict()
- this.$refs.configForm.getNetworkDict()
- document.querySelector('.mask').style.display = 'block'
- this.$refs.configForm.visible = true
- },
- // 获取国家字典
- getCountryDict() {
- const params = {
- page: 1,
- size: 99
- }
- this.$axios.get(this.$http.api.getCountryDict, params).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.countryDict = res?.result?.items.map(item => {
- return {
- label: item.country_name,
- value: item.id
- }
- })
- }
- }).catch(err => {
- console.log(err)
- })
- },
- // 获取靶场列表字典
- 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)
- }).finally(() => {
- this.rangeDict.unshift({label: '全部靶场', value: ''})
- })
- },
- // 处理选中的数据
- handleSelectionChange(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()
- },
- // 获取网络
- cellEnter(row, column){
- if(column.label === "网络"){
- this.popoverData = {}
- this.popVisiable = false
- // this.loading = true
- const reqParams = {
- network_id: row.network_id,
- }
- this.$axios.get(this.$http.api.getNetwork, reqParams).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.popoverData = res.result
- this.popVisiable = true;
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- // this.loading = false
- })
- }
- },
- cancelAction(index){
- let refName = "popover1" + index;
- this.$refs[refName].doClose();
- },
- openAction(index){
- let refName = "popover1" + index;
- this.$refs[refName].doShow();
- },
- // 获取任务进度
- getTask(task_id) {
- const url = this.$http.api.task + '/' + task_id
- this.$axios.get(url, {}).then(res => {
- if(res.task_status !== 'PENDING' && res.task_status !== 'STARTED') {
- if (res?.task_result?.code === 500 || res?.task_result?.message === 'false') {
- this.$notify({
- title: res?.task_result?.result || `${res.task_id}任务执行失败`,
- type: 'success',
- duration: 2500
- })
- } else {
- this.$notify({
- title: res?.task_result?.result || `${res.task_id}任务执行完毕`,
- type: 'success',
- duration: 2500
- })
- }
- clearInterval(this.delTimer)
- this.delTimer = null
- this.counter = 0
- this.init()
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.counter++
- if (this.counter >= 60) {
- clearInterval(this.delTimer)
- this.delTimer = null
- this.counter = 0
- this.init()
- }
- })
- },
- // 获取任务进度
- getBatchTask(task_id) {
- const url = this.$http.api.task + '/' + task_id
- this.$axios.get(url, {}).then(res => {
- if(res.task_status !== 'PENDING' && res.task_status !== 'STARTED') {
- if (res?.task_result?.code === 500 || res?.task_result?.message === 'false') {
- this.$notify({
- title: res?.task_result?.result || `${res.task_id}任务执行失败`,
- type: 'success',
- duration: 2500
- })
- } else {
- this.$notify({
- title: res?.task_result?.result || `${res.task_id}任务执行完毕`,
- type: 'success',
- duration: 2500
- })
- }
- clearInterval(this.batchDelTimer)
- this.batchDelTimer = null
- this.batchCounter = 0
- this.init()
- }
- }).catch(err => {
- console.log(err)
- }).finally(() => {
- this.batchCounter++
- if (this.batchCounter >= 30) {
- clearInterval(this.batchDelTimer)
- this.batchDelTimer = null
- this.batchCounter = 0
- this.init()
- }
- })
- }
- }
-}
-
-</script>
-
-<style lang='less' scoped="scoped">
-.custom-table {
- width: 100%;
- height: 100%;
-}
-.range-config-manage{
- width: 100%;
- height: 100%;
- /*background-color: #010f4e;*/
- // background-color: rgba(255, 25, 49, 0.4);
- float: right;
- position: relative; /* 确保相对定位生效 */
-
- .show{
- width: 95%;
- height: 95%;
- /*background-color: #67c23a;*/
- position: absolute; /* 绝对定位 */
- top: 50%; /* 向下偏移50% */
- left: 50%; /* 向右偏移50% */
- transform: translate(-50%, -50%); /* 回移50% */
- background-image:url('../../img/backgroundFourCorner.png');
- background-repeat: no-repeat; /* 可选，防止图像重复 */
- background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
- /*background-size: cover; !* 宽度为100%，高度自适应保持宽高比 *!*/
-
- /*display: flex; !* 将容器设置为 Flex 容器 *!*/
- /*justify-content: center; !* 水平居中子元素 *!*/
- /*align-items: center; !* 垂直居中子元素 *!*/
-
- .list{
- width: 95%;
- height: 84%;
- margin-left: 2.5%;
- overflow-y: auto;
- overflow-y: scroll;
- overflow-x: hidden;
- border: none;
- ::v-deep .network {
- float: right;
- cursor: pointer;
- font-size: 14px;
- color: #857BFF;
- text-decoration: 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>
diff --git a/src/views/rangeConfigManage/mock.js b/src/views/rangeConfigManage/mock.js
deleted file mode 100644
index 8a25cfd..0000000
--- a/src/views/rangeConfigManage/mock.js
+++ /dev/null
@@ -1,718 +0,0 @@
-const getTargetsResponse = {
- "code": 200,
- "message": "success",
- "result": {
- "total": 32,
- "page": 1,
- "size": 20,
- "pages": 0,
- "items": [
- {
- "tor_version": "4.6.10",
- "role": "da",
- "replicas": 1,
- "service": "string",
- "bandwidth": 10,
- "memory": 100,
- "image_id": 0,
- "out_port": 0,
- "has_deployed": false,
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 0,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "relay",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 1,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "exit",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 2,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "onion",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 3,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "client",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 4,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "guard",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 5,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 6,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 7,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "tor_version": "4.6.10",
- "role": "string",
- "replicas": 1,
- "service": "string",
- "bandwidth": 10,
- "memory": 100,
- "image_id": 0,
- "out_port": 0,
- "has_deployed": false,
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 0,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 1,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 2,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 3,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 4,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 5,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 6,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 7,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "tor_version": "4.6.10",
- "role": "string",
- "replicas": 1,
- "service": "string",
- "bandwidth": 10,
- "memory": 100,
- "image_id": 0,
- "out_port": 0,
- "has_deployed": false,
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 0,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 1,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 2,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 3,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 4,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 5,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 6,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 7,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "tor_version": "4.6.10",
- "role": "string",
- "replicas": 1,
- "service": "string",
- "bandwidth": 10,
- "memory": 100,
- "image_id": 0,
- "out_port": 0,
- "has_deployed": false,
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 0,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 1,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 2,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 3,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 4,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 5,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 6,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- },
- {
- "role": "string",
- "image_id": 0,
- "replicas": 1,
- "bandwidth": 10,
- "memory": 100,
- "service": "string",
- "tor_version": "4.6.10",
- "create_time": "2023-12-19T14:17:19.290Z",
- "update_time": "2023-12-19T14:17:19.290Z",
- "out_port": 0,
- "socks_port": 19001,
- "control_port": 19002,
- "or_port": 7000,
- "dir_port": 9030,
- "id": 7,
- "has_deployed": false,
- "start_tcpdump": 0,
- "user_id": 0,
- "target_id": 0,
- "network_id": 0
- }
- ]
- }
- }
-
-export { getTargetsResponse } \ No newline at end of file
diff --git a/src/views/rangeConfigManage/module/ConfigForm.vue b/src/views/rangeConfigManage/module/ConfigForm.vue
deleted file mode 100644
index a9eac76..0000000
--- a/src/views/rangeConfigManage/module/ConfigForm.vue
+++ /dev/null
@@ -1,658 +0,0 @@
-<template>
-<div class="config-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="basicForm"
- :model="form"
- :rules="rules"
- label-width="150px"
- class="basic-form"
- size="small"
- >
- <el-row>
- <el-col :span="20">
- <el-form-item label="角色选择" prop="role">
- <el-select v-model="form.role" placeholder="请选择角色" @change="selectRole">
- <el-option
- v-for="item in roleDict"
- :key="item.value"
- :label="item.value === 'other' ? `${item.label}(${otherRole})` : `${item.label}(${item.value})`"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role!=='other'">
- <el-col :span="20">
- <el-form-item label="tor 版本" prop="tor_version" :rules="form.role!=='other' ? rules.tor_version : [{required: false}]">
- <el-select v-model="form.tor_version" placeholder="tor 版本" @change="selectTor">
- <el-option
- v-for="item in torDict"
- :key="item"
- :label="item"
- :value="item">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="20">
- <el-form-item label="选择镜像" prop="image_id">
- <el-select v-model="form.image_id" placeholder="镜像名">
- <el-option
- v-for="item in imageDict"
- :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="20">
- <el-form-item label="复本数" prop="replicas">
- <el-input v-model="form.replicas" placeholder="请输入内容 (默认值是1)"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="20">
- <el-form-item label="带宽限制" prop="bandwidth">
- <el-input v-model="form.bandwidth" placeholder="请输入内容 (默认值是10)">
- <p slot="suffix" class="el-input__icon">M</p>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="20">
- <el-form-item label="内存限制" prop="memory">
- <el-input v-model="form.memory" placeholder="请输入内容 (默认值是100)">
- <p slot="suffix" class="el-input__icon">Mi</p>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role==='onion'">
- <el-col :span="20">
- <el-form-item label="服务器地址" prop="service" :rules="form.role==='onion' ? rules.service : [{required: false}]">
- <el-input v-model="form.service" placeholder="请输入内容 (onion角色必填)"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role==='client'">
- <el-col :span="20">
- <el-form-item label="代理端口" prop="out_port" :rules="form.role==='client' ? rules.out_port : [{required: false}]">
- <!-- <el-input v-model="form.out_port" placeholder="请输入内容 (client角色必填，范围30000-32767)"></el-input> -->
- <el-select v-model="form.out_port" placeholder="请选择代理端口" @visible-change="showOutPortSelect">
- <el-option
- v-for="item in outPortDict"
- :key="item"
- :label="item"
- :value="item">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role==='da'||form.role==='relay'||form.role ==='guard'||form.role ==='exit'">
- <el-col :span="20">
- <el-form-item label="or端口" prop="or_port">
- <el-input v-model="form.or_port" placeholder="请输入内容 (默认值是7000)"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role==='da'||form.role==='relay'||form.role ==='guard'||form.role ==='exit'">
- <el-col :span="20">
- <el-form-item label="dir端口" prop="dir_port">
- <el-input v-model="form.dir_port" placeholder="请输入内容 (默认值是9030)"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role ==='onion'||form.role==='client'">
- <el-col :span="20">
- <el-form-item label="客户端监听端口" prop="socks_port">
- <el-input v-model="form.socks_port" placeholder="请输入内容 (默认值是19001)"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row v-if="form.role ==='onion'||form.role==='client'">
- <el-col :span="20">
- <el-form-item label="客户端控制端口" prop="control_port">
- <el-input v-model="form.control_port" placeholder="请输入内容 (默认值是19002)"></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="network-box" v-if="tag==='网络配置'">
- <el-form
- ref="netForm"
- :model="form"
- :rules="netFormRules"
- label-width="150px"
- class="basic-form"
- >
- <el-row>
- <el-col :span="20">
- <el-form-item label="国家" prop="country_id">
- <el-select v-model="form.country_id" placeholder="请选择国家" @change="getNetworkDict">
- <el-option
- v-for="item in countryDict"
- :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="20">
- <el-form-item label="网络" prop="network_id">
- <el-select v-model="form.network_id" placeholder="请选择网络地址">
- <el-option
- v-for="item in networkDict"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </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="updateTag('部署', true)">下一步</el-button>
- </div>
- </div>
-
- </div>
- <div class="deploy-box" v-if="tag==='部署'">
- <div class="dmgxdjx">
- <div style="margin-right: 45%">
- <el-radio-group v-model="form.deployType" @change="selectDeploy">
- <el-radio label="direct">直接部署</el-radio>
- <el-radio label="only">仅添加配置</el-radio>
- <el-radio label="start">启动采集程序并部署</el-radio>
- </el-radio-group>
- </div>
- </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: 'ConfigForm',
- props: {
- isAdd: {
- typeof: Boolean,
- required: true
- },
- target_id: {
- typeof: String,
- required: true
- },
- otherRole: {
- typeof: String,
- required: true
- },
- countryDict: {
- typeof: Array,
- require: true
- }
- },
- data() {
- return {
- visible:false,
- loading: false,
- tag:"基本配置",
- setting_id: '',
- form: {
- role: 'da', // 角色选择
- tor_version: '', // tor版本
- image_id: '', // 选择镜像
- replicas: null, // 复本数
- bandwidth: null, // 宽带限制
- memory: null, // 内存限制
- service: '', // 服务器地址
- out_port: null, // 代理端口
- or_port: null, // or端口
- dir_port: null, // dir端口
- socks_port: null, // 客户端监听端口
- control_port: null, // 客户端控制端口
-
- country_id: '', // 国家
- network_id: '', // 网络
-
- deployType: 'direct', // 部署方式
- direct: true, // 直接部署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: [],
- outPortDict: [],
- imageDict: [],
- rules: {
- role: [
- { required: true, message: '请选择角色', trigger: 'blur' }
- ],
- tor_version: [
- { required: true, message: '请选择tor版本', trigger: 'blur' }
- ],
- image_id: [
- { required: true, message: '请选择镜像', trigger: 'blur' }
- ],
- service:[
- { required: true, message: '请输入服务器地址', trigger: 'blur' }
- ],
- out_port: [
- { required: true, message: '请输入代理端口', trigger: 'blur' }
- ]
- },
- netFormRules: {
- country_id: [
- { required: true, message: '请选择国家', trigger: 'blur' }
- ],
- network_id: [
- { required: true, message: '请选择网络', trigger: 'blur' }
- ]
- }
- }
- },
- created() {
- this.getOutPortDict()
- },
- methods: {
- // 关闭
- close() {
- document.querySelector('.mask').style.display = 'none'
- this.visible = false
- this.tag = '基本配置'
- this.resetForm()
- this.$emit('clearRoleForm')
- },
- // 重置
- resetForm() {
- this.form = {
- role: 'da', // 角色选择
- 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', // 部署方式
- direct: true, // 直接部署true 仅添加配置false
- start_tcpdump: false // 启动采集程序并部署 true
- }
- },
- // 选择哪个页面
- updateTag(val, isValid){
- if (val === '网络配置' && isValid) {
- this.$refs.basicForm.validate((valid) => {
- if (valid) {
- this.tag=val
- }
- })
- } else if(val === '部署' && isValid) {
- this.$refs.netForm.validate((valid) => {
- if (valid) {
- this.tag=val
- }
- })
- } else {
- this.tag=val
- }
- },
- // 角色选择
- selectRole(node) {
- if (node === 'other') {
- this.$emit('openRoleForm')
- }
- // 获取torDict
- this.getTorDict()
- // 获取镜像字典
- this.getImageDict()
- },
- // tor选择
- selectTor(tor){
- // 获取镜像字典
- this.getImageDict()
- },
- // 获取torDick
- getTorDict() {
- 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)
- })
- },
- // 获取imageDict
- getImageDict(){
- const params = {
- page:1,
- size: 99,
- image_name: this.form.role,
- image_version: this.form.tor_version
- }
- if (this.form.role === 'other' && this.otherRole) {
- params.image_name = this.otherRole
- params.image_type = 'define'
- }
- 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)
- })
- },
- showOutPortSelect() {
- this.getOutPortDict()
- },
- // 获取代理端口字典
- getOutPortDict(){
- const params = {}
- this.$axios.get(this.$http.api.getOutPortDict, params).then(res => {
- if (res.code == 200 || res.code == "OK") {
- this.outPortDict = res?.result
- }
- }).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 } = this.form
- let submitForm = {role, image_id }
- if (this.form.replicas) {
- submitForm.replicas = this.form.replicas
- }
- if (this.form.bandwidth) {
- submitForm.bandwidth = this.form.bandwidth
- }
- if (this.form.memory) {
- submitForm.memory = this.form.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
- if (this.form.or_port) {
- submitForm.or_port = this.form.or_port
- }
- if (this.form.dir_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
- if (this.form.socks_port) {
- submitForm.socks_port = this.form.socks_port
- }
- if (this.form.control_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
- if (this.form.socks_port) {
- submitForm.socks_port = this.form.socks_port
- }
- if (this.form.control_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+ `/${this.setting_id}/?target_id=${this.target_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>
-.config-dialog{
- z-index: 997;
- width: 620px;
- height: 555px;
- position: absolute; /* 绝对定位 */
- top: 50%; /* 向下偏移50% */
- left: 50%; /* 向右偏移50% */
- transform: translate(-50%, -50%); /* 回移50% */
- background-image:url('../../../img/tjpz.svg');
- background-repeat: no-repeat; /* 可选，防止图像重复 */
- background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
- .el-icon-close{
- float: right;
- padding-right: 7%;
- padding-top: 3%
- }
- .basic-form {
- margin-top: 20px;
- text-align: left;
- ::v-deep .el-select {
- width: 100%;
- }
- }
- .tag{
- margin-left: 9%;
- .tags{
- margin-right: 5%;
- margin-top: 2%;
- font-size: 23px;
- border: none;
- background-color: transparent !important;
- color: #565e6e;
- }
- }
- .but-color {
- background-color: #02DDEA !important;
- }
- .basic-box{
- .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: 5%;
- background-color: rgba(24, 133, 234, 0.2);
- color: #1b7cc4;
- }
- }
- }
- .network-box{
- .anDiv{
- width: 100%;
- float: left;
- margin-top: 50%;
- text-align: center;
- .glBut{
- width: 90px;
- height: 30px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- margin-left: 5%;
- background-color: rgba(24, 133, 234, 0.2);
- color: #1b7cc4;
- }
- }
-
- }
- .deploy-box{
- .dmgxdjx{
- width: 100%;
- float: left;
- display: block;
- margin-top: 3%;
- margin-left: 20%;
- text-align: left;
- .el-radio {
- display: block;
- margin-top: 20%;
- font-size: 14px;
- color: #ffffff;
- }
- }
- .anDiv{
- width: 100%;
- float: left;
- margin-top: 49%;
- text-align: center;
- .glBut{
- width: 90px;
- height: 30px;
- 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/rangeConfigManage/module/Header.vue b/src/views/rangeConfigManage/module/Header.vue
deleted file mode 100644
index a34d198..0000000
--- a/src/views/rangeConfigManage/module/Header.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-<div class="head">
- <div class="target-select">
- <el-select class="range-select" style="width:220px;" v-model="target_id" placeholder="全部靶场" @change="changeRange">
- <el-option
- v-for="item in rangeDict"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <img src="../../../img/btn/addConfigBtn.svg" style="height: 70% ;width: 10%;margin-right: 2%;color: #ffffff" @click="addConfig">
- <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"></svg-icon>
- <span style="margin-left: 10px;">{{ item.label }}</span>
- </el-option>
- </el-select>
- </div>
- <div class="deploy-select">
- <el-select v-model="has_deployed" 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 type="primary" :loading="batchDeployLoading" @click="batchDeploy">批量部署</el-button>
- <el-button type="primary" :loading="batchDelLoading" @click="batchDel">批量删除</el-button>
- <el-button type="primary" :loading="batchPipelineLoading" @click="batchPipeline" :disabled="disabledBatchPipline">批量运行流水线</el-button>
-</div>
-</template>
-
-<script>
-export default {
- name: 'Header',
- props: ['rangeDict', 'batchDeployLoading', 'batchDelLoading', 'batchPipelineLoading', 'disabledBatchPipline'],
- data() {
- return {
- target_id: '',
- role: '',
- has_deployed: '',
- roleDict:[
- {label: '权威目录节点', value: 'da'},
- {label: '路由节点', value: 'relay'},
- {label: '出口节点', value: 'exit'},
- {label: '洋葱服务节点', value: 'onion'},
- {label: '客户端节点', value: 'client'},
- {label: '入口节点', value: 'guard'}
- ],
- statusDict: [
- {value: 'true', label: '已部署'},
- {value: 'false',label: '未部署'}
- ]
- }
- },
- watch: {
- '$store.state.range.targetId': {
- handler(newVal, oldVal) {
- this.target_id = newVal
- },
- immediate: true
- }
- },
- methods: {
- // 改变靶场
- changeRange() {
- this.$store.commit('range/setTargetId', this.target_id)
- },
- // 新增
- addConfig() {
- this.$emit('addConfig')
- },
- // 查询
- query() {
- let params = {}
- if (this.has_deployed !== '') {
- params.has_deployed = this.has_deployed
- }
- if (this.role !== '') {
- params.role = this.role
- }
- this.$emit('query', params)
- },
- // 批量部署
- batchDeploy() {
- this.$emit('batchDeploy')
- },
- // 批量删除
- batchDel() {
- this.$emit('batchDel')
- },
- // 批量运行流水线
- batchPipeline() {
- this.$emit('batchPipeline')
- }
- }
-}
-</script>
-
-<style lang="less" scoped>
-.head{
- width: 95%;
- height: 7%;
- margin-top: 1%;
- margin-left: 2.5%;
- 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;
- }
-
- }
- .target-select{
- font-size: 10px;
- float: left;
- margin-top: 0.5%;
- display: inline-block;
- height: 60%;
- width: 10%;
- margin-left: 0.5%;
- .custom-popper .el-select-dropdown {
- max-height: 3px;
- }
- .range-select {
- ::v-deep .el-input {
- width: 80%;
- .el-input__inner {
- background-color: transparent !important;
- border-color: transparent;
- border-radius: 0;
- color: #FFFFFF;
- }
- /* select去除竖线 */
- .el-input__suffix::before {
- content: "";
- width: 0;
- height: 0;
- margin: 0;
- position: absolute;
- }
- /*select的上下箭头图标样式*/
- .el-select__caret {
- color: rgba(2, 221, 234, 0.9);
- }
- }
- }
- }
- .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/rangeConfigManage/module/RoleForm.vue b/src/views/rangeConfigManage/module/RoleForm.vue
deleted file mode 100644
index 2189151..0000000
--- a/src/views/rangeConfigManage/module/RoleForm.vue
+++ /dev/null
@@ -1,94 +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: 4.5%">角色</span>
- <el-input
- :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() {
- this.$emit('submitOtherRole')
- document.querySelector('.mask').style.display = 'none'
- this.visible = false
- }
- }
-
-}
-</script>
-
-<style lang="less" scoped>
-.role-dialog{
- z-index: 998;
- width: 30%;
- height: 20%;
- position: absolute; /* 绝对定位 */
- top: 50%; /* 向下偏移50% */
- left: 50%; /* 向右偏移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: 10%;
- text-align: center;
- .glBut{
- width: 90px;
- height: 30px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- margin-left: 10%;
- background-color: rgba(24, 133, 234, 0.2);
- color: #1b7cc4;
- }
- }
-}
-</style> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-30 21:47:47 +0000