V2 完成
This commit is contained in:
Gregory
@@ -4,11 +4,11 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<title>靶场管理</title>
|
<title>DNS</title>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.g = {
|
window.g = {
|
||||||
// baseURL:'172.16.0.120:31540', //开发环境
|
// baseURL:'172.16.0.120:31540', //开发环境
|
||||||
baseURL: document.location.host, //正式环境
|
baseURL: '124.221.228.62:2525', //正式环境
|
||||||
// queryTags:[],
|
// queryTags:[],
|
||||||
// switchLanguage:"en",
|
// switchLanguage:"en",
|
||||||
switchLanguage:"zh"
|
switchLanguage:"zh"
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ if (process.env.NODE_ENV == 'development') {
|
|||||||
// 请求超时时间
|
// 请求超时时间
|
||||||
axios.defaults.timeout = 60000;
|
axios.defaults.timeout = 60000;
|
||||||
axios.defaults.headers['Content-Type'] = 'application/json';
|
axios.defaults.headers['Content-Type'] = 'application/json';
|
||||||
|
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||||
// post请求头
|
// post请求头
|
||||||
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
|
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
|
||||||
// axios.defaults.headers['Access-Control-Allow-Header']='Access-Control-Allow-Origin'
|
// axios.defaults.headers['Access-Control-Allow-Header']='Access-Control-Allow-Origin'
|
||||||
@@ -27,10 +28,12 @@ axios.defaults.headers['Content-Type'] = 'application/json';
|
|||||||
|
|
||||||
// // 请求拦截器
|
// // 请求拦截器
|
||||||
axios.interceptors.request.use(
|
axios.interceptors.request.use(
|
||||||
|
|
||||||
config => {
|
config => {
|
||||||
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
|
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
|
||||||
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
|
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
|
||||||
const token = localStorage.getItem('token');
|
// const token = localStorage.getItem('token');
|
||||||
|
const token = "localStorage.getItem('token')";
|
||||||
if(token!=''){
|
if(token!=''){
|
||||||
config.headers['Authorization'] = 'Bearer ' + token
|
config.headers['Authorization'] = 'Bearer ' + token
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,35 @@
|
|||||||
export default {
|
export default {
|
||||||
api: {
|
api: {
|
||||||
|
//任务管理
|
||||||
|
taskList:'/task/',
|
||||||
|
//任务详情
|
||||||
|
taskInfo:'/task/detail',
|
||||||
|
//任务详情日志
|
||||||
|
taskInfoLog:'/task/tp',
|
||||||
|
//代理信息
|
||||||
|
agentQueryList:'/agent/',
|
||||||
|
//代理删除
|
||||||
|
agentDel:'/agent/del',
|
||||||
|
//目标信息获取
|
||||||
|
targetQueryList:'/target/',
|
||||||
|
targetMap:'target/map',
|
||||||
|
//目标信息筛选基础数据
|
||||||
|
targetFilter:'/target/filter',
|
||||||
|
//目标信息时延
|
||||||
|
targetDelay:'/target/delay',
|
||||||
|
taskOps:'/task/ops',
|
||||||
|
//任务创建
|
||||||
|
taskCreate:'/task/create',
|
||||||
|
taskDel:'/task/del',
|
||||||
|
//仪表盘——num
|
||||||
|
sysNum:'/sys/num',
|
||||||
|
//仪表盘-柱状图数据接口
|
||||||
|
sysNumDate:'/sys/num/date',
|
||||||
|
//仪表盘—系统操作日志
|
||||||
|
sysLog:'sys/log',
|
||||||
|
//系统管理——用户列表 **创建用户也是该接口区别为 获取是get 创建是post**
|
||||||
|
user:'/user/',
|
||||||
|
|
||||||
// 登录
|
// 登录
|
||||||
login: '/token', // 登录
|
login: '/token', // 登录
|
||||||
getMenus: '/api/user/menu', // 获取菜单
|
getMenus: '/api/user/menu', // 获取菜单
|
||||||
@@ -114,5 +144,11 @@ export default {
|
|||||||
asyncAddImage: '/api/async/image', // 异步新增镜像
|
asyncAddImage: '/api/async/image', // 异步新增镜像
|
||||||
asyncBuildImage: '/api/async/image/build', // 异步构建镜像
|
asyncBuildImage: '/api/async/image/build', // 异步构建镜像
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//系统管理
|
||||||
|
|
||||||
|
//系统介绍
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
@@ -1058,5 +1058,191 @@
|
|||||||
"赞比亚": "ZM",
|
"赞比亚": "ZM",
|
||||||
"扎伊尔": "ZR",
|
"扎伊尔": "ZR",
|
||||||
"津巴布韦": "ZW"
|
"津巴布韦": "ZW"
|
||||||
|
},
|
||||||
|
"countryEtoC":{
|
||||||
|
"AD": "安道尔共和国",
|
||||||
|
"AE" : "阿拉伯联合酋长国",
|
||||||
|
"AF": "阿富汗",
|
||||||
|
"AG": "安提瓜和巴布达",
|
||||||
|
"AI": "安圭拉岛",
|
||||||
|
"AL" : "阿尔巴尼亚",
|
||||||
|
"AM" : "阿美尼亚",
|
||||||
|
"" : "阿森松",
|
||||||
|
"AO" : "安哥拉",
|
||||||
|
"AR": "阿根廷",
|
||||||
|
"AT" : "奥地利",
|
||||||
|
"AU" : "澳大利亚",
|
||||||
|
"AZ" : "阿塞拜疆",
|
||||||
|
"BB" : "巴巴多斯",
|
||||||
|
"BD" : "孟加拉国",
|
||||||
|
"BE" : "比利时",
|
||||||
|
"BF" : "布基纳法索",
|
||||||
|
"BG" : "保加利亚",
|
||||||
|
"BH" : "巴林",
|
||||||
|
"BI" : "布隆迪",
|
||||||
|
"BJ" : "贝宁",
|
||||||
|
"BL" : "巴勒斯坦",
|
||||||
|
"BM" : "百慕大群岛",
|
||||||
|
"BN" : "文莱",
|
||||||
|
"BO" : "玻利维亚",
|
||||||
|
"BR" : "巴西",
|
||||||
|
"BS" : "巴哈马",
|
||||||
|
"BW" : "博茨瓦纳",
|
||||||
|
"BY" : "白俄罗斯",
|
||||||
|
"BZ" : "伯利兹",
|
||||||
|
"CA" : "加拿大",
|
||||||
|
"CF" : "中非共和国",
|
||||||
|
"CG" : "刚果",
|
||||||
|
"CH" : "瑞士",
|
||||||
|
"CK" : "库克群岛",
|
||||||
|
"CL" : "智利",
|
||||||
|
"CM" : "喀麦隆",
|
||||||
|
"CN" : "中国",
|
||||||
|
"CO" : "哥伦比亚",
|
||||||
|
"CR" : "哥斯达黎加",
|
||||||
|
"CZ" : "捷克",
|
||||||
|
"CU" : "古巴",
|
||||||
|
"CY" : "塞浦路斯",
|
||||||
|
"DE" : "德国",
|
||||||
|
"DJ" : "吉布提",
|
||||||
|
"DK" : "丹麦",
|
||||||
|
"DO" : "多米尼加共和国",
|
||||||
|
"DZ" : "阿尔及利亚",
|
||||||
|
"EC" : "厄瓜多尔",
|
||||||
|
"EE" : "爱沙尼亚",
|
||||||
|
"EG" : "埃及",
|
||||||
|
"ES" : "西班牙",
|
||||||
|
"ET" : "埃塞俄比亚",
|
||||||
|
"FI" : "芬兰",
|
||||||
|
"FJ" : "斐济",
|
||||||
|
"FR" : "法国",
|
||||||
|
"GA" : "加蓬",
|
||||||
|
"GB" : "英国",
|
||||||
|
"GD" : "格林纳达",
|
||||||
|
"GE" : "格鲁吉亚",
|
||||||
|
"GF" : "法属圭亚那",
|
||||||
|
"GH" : "加纳",
|
||||||
|
"GI" : "直布罗陀",
|
||||||
|
"GM" : "冈比亚",
|
||||||
|
"GN" : "几内亚",
|
||||||
|
"GR" : "希腊",
|
||||||
|
"GT" : "危地马拉",
|
||||||
|
"GU" : "关岛",
|
||||||
|
"GY" : "圭亚那",
|
||||||
|
"HK" : "中国香港",
|
||||||
|
"HN" : "洪都拉斯",
|
||||||
|
"HT" : "海地",
|
||||||
|
"HU" : "匈牙利",
|
||||||
|
"ID" : "印度尼西亚",
|
||||||
|
"IE" : "爱尔兰",
|
||||||
|
"IL" : "以色列",
|
||||||
|
"IN" : "印度",
|
||||||
|
"IQ" : "伊拉克",
|
||||||
|
"IR" : "伊朗",
|
||||||
|
"IS" : "冰岛",
|
||||||
|
"IT" : "意大利",
|
||||||
|
"JM" : "牙买加",
|
||||||
|
"JO" : "约旦",
|
||||||
|
"JP" : "日本",
|
||||||
|
"KE" : "肯尼亚",
|
||||||
|
"KG" : "吉尔吉斯坦",
|
||||||
|
"KH" : "柬埔寨",
|
||||||
|
"KP" : "朝鲜",
|
||||||
|
"KR" : "韩国",
|
||||||
|
"KT" : "科特迪瓦共和国",
|
||||||
|
"KW" : "科威特",
|
||||||
|
"KZ": "哈萨克斯坦",
|
||||||
|
"LA": "老挝",
|
||||||
|
"LB": "黎巴嫩",
|
||||||
|
"LC": "圣卢西亚",
|
||||||
|
"LI": "列支敦士登",
|
||||||
|
"LK": "斯里兰卡",
|
||||||
|
"LR": "利比里亚",
|
||||||
|
"LS": "莱索托",
|
||||||
|
"LT": "立陶宛",
|
||||||
|
"LU": "卢森堡",
|
||||||
|
"LV": "拉脱维亚",
|
||||||
|
"LY": "利比亚",
|
||||||
|
"MA": "摩洛哥",
|
||||||
|
"MC": "摩纳哥",
|
||||||
|
"MD": "摩尔多瓦",
|
||||||
|
"MG": "马达加斯加",
|
||||||
|
"ML": "马里",
|
||||||
|
"MM": "缅甸",
|
||||||
|
"MN": "蒙古",
|
||||||
|
"MO": "中国澳门",
|
||||||
|
"MS": "蒙特塞拉特岛",
|
||||||
|
"MT": "马耳他",
|
||||||
|
"MU": "毛里求斯",
|
||||||
|
"MV": "马尔代夫",
|
||||||
|
"MW": "马拉维",
|
||||||
|
"MX": "墨西哥",
|
||||||
|
"MY": "马来西亚",
|
||||||
|
"MZ": "莫桑比克",
|
||||||
|
"NA": "纳米比亚",
|
||||||
|
"NE": "尼日尔",
|
||||||
|
"NG": "尼日利亚",
|
||||||
|
"NI": "尼加拉瓜",
|
||||||
|
"NL": "荷兰",
|
||||||
|
"NO": "挪威",
|
||||||
|
"NP": "尼泊尔",
|
||||||
|
"NR": "瑙鲁",
|
||||||
|
"NZ": "新西兰",
|
||||||
|
"OM": "阿曼",
|
||||||
|
"PA": "巴拿马",
|
||||||
|
"PE": "秘鲁",
|
||||||
|
"PF": "法属玻利尼西亚",
|
||||||
|
"PG": "巴布亚新几内亚",
|
||||||
|
"PH": "菲律宾",
|
||||||
|
"PK": "巴基斯坦",
|
||||||
|
"PL": "波兰",
|
||||||
|
"PR": "波多黎各",
|
||||||
|
"PT": "葡萄牙",
|
||||||
|
"PY": "巴拉圭",
|
||||||
|
"QA": "卡塔尔",
|
||||||
|
"RO": "罗马尼亚",
|
||||||
|
"RU": "俄罗斯",
|
||||||
|
"SA": "沙特阿拉伯",
|
||||||
|
"SB": "所罗门群岛",
|
||||||
|
"SC": "塞舌尔",
|
||||||
|
"SD": "苏丹",
|
||||||
|
"SE": "瑞典",
|
||||||
|
"SG": "新加坡",
|
||||||
|
"SI": "斯洛文尼亚",
|
||||||
|
"SK": "斯洛伐克",
|
||||||
|
"SL": "塞拉利昂",
|
||||||
|
"SM": "圣马力诺",
|
||||||
|
"SN": "塞内加尔",
|
||||||
|
"SO": "索马里",
|
||||||
|
"SR": "苏里南",
|
||||||
|
"ST": "圣多美和普林西比",
|
||||||
|
"SV": "萨尔瓦多",
|
||||||
|
"SY": "叙利亚",
|
||||||
|
"SZ": "斯威士兰",
|
||||||
|
"TD": "乍得",
|
||||||
|
"TG": "多哥",
|
||||||
|
"TH": "泰国",
|
||||||
|
"TJ": "塔吉克斯坦",
|
||||||
|
"TM": "土库曼斯坦",
|
||||||
|
"TN": "突尼斯",
|
||||||
|
"TO": "汤加",
|
||||||
|
"TR": "土耳其",
|
||||||
|
"TT": "特立尼达和多巴哥",
|
||||||
|
"TW": "中国台湾",
|
||||||
|
"TZ": "坦桑尼亚",
|
||||||
|
"UA": "乌克兰",
|
||||||
|
"UG": "乌干达",
|
||||||
|
"US": "美国",
|
||||||
|
"UY": "乌拉圭",
|
||||||
|
"UZ": "乌兹别克斯坦",
|
||||||
|
"VC": "圣文森特岛",
|
||||||
|
"VE": "委内瑞拉",
|
||||||
|
"VN": "越南",
|
||||||
|
"YE": "也门",
|
||||||
|
"YU": "南斯拉夫",
|
||||||
|
"ZA": "南非",
|
||||||
|
"ZM": "赞比亚",
|
||||||
|
"ZR": "扎伊尔",
|
||||||
|
"ZW" : "津巴布韦"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -3,7 +3,9 @@
|
|||||||
<div class="headNew" >
|
<div class="headNew" >
|
||||||
<div class="headNewLeft" >
|
<div class="headNewLeft" >
|
||||||
<div class="headNewLeftText">
|
<div class="headNewLeftText">
|
||||||
<span>YYDNS</span>
|
<!-- <span>YYDNS</span>-->
|
||||||
|
<!-- <img src="../img/logyy.jpg">-->
|
||||||
|
<img src="../img/logyy_美图抠图20240424.png" style="width: 180px">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="headNewCenter" >
|
<div class="headNewCenter" >
|
||||||
@@ -315,7 +317,7 @@
|
|||||||
.headNew{
|
.headNew{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image:url('../img/header.svg');
|
/*background-image:url('../img/header.svg');*/
|
||||||
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
||||||
background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
|
background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
|
||||||
.headNewLeft{
|
.headNewLeft{
|
||||||
@@ -326,14 +328,17 @@
|
|||||||
width: 22%;
|
width: 22%;
|
||||||
height: 5%;
|
height: 5%;
|
||||||
float: left;
|
float: left;
|
||||||
background-image: url('../img/headerLeft.svg');
|
/*background-image: url('../img/headerLeft.svg');*/
|
||||||
background-repeat: no-repeat;
|
/*background-image: url('../img/logyy_美图抠图20240424.png');*/
|
||||||
background-size: 100% auto;
|
/*background-repeat: no-repeat;*/
|
||||||
|
/*background-size: 100% auto;*/
|
||||||
.headNewLeftText{
|
.headNewLeftText{
|
||||||
color: #ece9f8;
|
color: #ece9f8;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin-top: 3.1%;
|
/*margin-top: 3.1%;*/
|
||||||
margin-left: 35%;
|
margin-top: -8%;
|
||||||
|
/*margin-left: 35%;*/
|
||||||
|
margin-left: 10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.headNewCenter{
|
.headNewCenter{
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
<div :class="hit==='menuMBGZ'? 'NotesHit':'Notes'" v-on:click="updataHit('menuMBGZ')">
|
<div :class="hit==='menuMBGZ'? 'NotesHit':'Notes'" v-on:click="updataHit('menuMBGZ')">
|
||||||
<div class="nameIframe">
|
<div class="nameIframe">
|
||||||
<img src="../img/6.png">
|
<img src="../img/6.png">
|
||||||
<span>MBGZ</span>
|
<span>目标感知</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="hit==='menuTaskManagement'? 'NotesHit':'Notes'" @click="updataHit('menuTaskManagement')">
|
<div :class="hit==='menuTaskManagement'? 'NotesHit':'Notes'" @click="updataHit('menuTaskManagement')">
|
||||||
|
|||||||
@@ -10,6 +10,7 @@ Router.prototype.push = function push(location) {
|
|||||||
return originalPush.call(this, location).catch(err => err)
|
return originalPush.call(this, location).catch(err => err)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default new Router({
|
export default new Router({
|
||||||
// mode: 'history',
|
// mode: 'history',
|
||||||
base: process.env.BASE_URL,
|
base: process.env.BASE_URL,
|
||||||
@@ -67,8 +68,23 @@ export default new Router({
|
|||||||
title: '系统介绍',
|
title: '系统介绍',
|
||||||
component: () => import('@/views/menuSysIntroduce/index'),
|
component: () => import('@/views/menuSysIntroduce/index'),
|
||||||
meta: { requiresAuth: true } // 需要登录才能访问
|
meta: { requiresAuth: true } // 需要登录才能访问
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'menuTaskInfo',
|
||||||
|
name: 'menuTaskInfo',
|
||||||
|
title: '任务详情',
|
||||||
|
component: () => import('@/views/menuTaskInfo/index'),
|
||||||
|
meta: { requiresAuth: true } // 需要登录才能访问
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'menuMBZTGZ',
|
||||||
|
name: 'menuMBZTGZ',
|
||||||
|
title: '目标状态详情',
|
||||||
|
component: () => import('@/views/menuMBZTGZ/index'),
|
||||||
|
meta: { requiresAuth: true } // 需要登录才能访问
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
})
|
})
|
||||||
@@ -1,34 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<span style="color: #dfe6ec;font-size: 20px;float: left;margin-left: 3%;margin-top: 2%">已探测目标</span>
|
||||||
<div class="box" id="show-loading" v-loading="loading">
|
<div class="box" id="show-loading" v-loading="loading">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">镜像总数</div>
|
<div class="title">IPv6</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ imageData.total_image_count }}</span>
|
<span class="info-span">{{ target.v6dns }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">个</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">基础镜像</div>
|
<div class="title">DNSSEC</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ imageData.system_image_count }}</span>
|
<span class="info-span">{{ target.dnssec }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">个</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">内置镜像</div>
|
<div class="title">DoT</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ imageData.buildin_image_count }}</span>
|
<span class="info-span">{{ target.dot }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">个</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">自定义镜像</div>
|
<div class="title">DoH</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ imageData.define_image_count }}</span>
|
<span class="info-span">{{ target.doh }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">个</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -39,22 +44,32 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
imageData: {}
|
imageData: {},
|
||||||
|
target:{
|
||||||
|
dnssec:0,
|
||||||
|
doh:0,
|
||||||
|
dot:0,
|
||||||
|
v6dns:0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
// this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init () {
|
init () {
|
||||||
// this.imageData = getTargetsResponse?.result
|
// this.imageData = getTargetsResponse?.result
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.get(this.$http.api.getimageStatistics).then(res => {
|
this.$axios.get(this.$http.api.sysNum).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
if (res.code == 200) {
|
||||||
this.imageData = res?.result
|
this.target.dnssec=res?.target?.dnssec
|
||||||
|
this.target.doh=res?.target?.doh
|
||||||
|
this.target.dot=res?.target?.dot
|
||||||
|
this.target.v6dns=res?.target?.v6dns
|
||||||
|
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
@@ -69,7 +84,7 @@ export default {
|
|||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 80%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -79,7 +94,7 @@ export default {
|
|||||||
.title {
|
.title {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-family: PingFang HK;
|
font-family: PingFang HK;
|
||||||
font-size: 12px;
|
font-size: 18px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|||||||
@@ -1,240 +1,430 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="node-card">
|
<div class="node-card">
|
||||||
<div class="node-chart" id="node" v-loading="loading"></div>
|
<span style="font-size: 20px;float: left;margin-top: 1%;margin-left: 2%">系统运行日志</span>
|
||||||
<el-select class="range-select" v-model="target_id" placeholder="全部靶场" @change="changeRange">
|
<div class="project">
|
||||||
|
<div class="block">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="time1"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择开始时间"
|
||||||
|
align="right"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
@change="query">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<div class="block">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="time2"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择结束时间"
|
||||||
|
align="right"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
@change="query">
|
||||||
|
</el-date-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<el-select v-model="log_level" placeholder="日志等级筛选" clearable @change="query">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in rangeDict"
|
v-for="item in log_levels"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="tabs-container">
|
|
||||||
<el-tabs v-model="activeName" @tab-click="tabClick">
|
|
||||||
<el-tab-pane label="总量" name="total"></el-tab-pane>
|
|
||||||
<el-tab-pane label="已完成" name="complete"></el-tab-pane>
|
|
||||||
<el-tab-pane label="创建中" name="pending"></el-tab-pane>
|
|
||||||
<el-tab-pane label="创建失败" name="false"></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="project" @keyup.enter="query">
|
||||||
|
<el-input v-model="userAccount" placeholder="用户账号筛选" suffix icon="">
|
||||||
|
<template v-slot:suffix>
|
||||||
|
<div class="icon-group">
|
||||||
|
<img src="../../../img/inputl.png" alt="**">
|
||||||
|
<img src="../../../img/inputIcon.png" alt="*" @click="query">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="list" >
|
||||||
|
<el-table class="custom-table"
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="tableData"
|
||||||
|
height="100%"
|
||||||
|
style="width: 100%;"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
highlight-current-row
|
||||||
|
>
|
||||||
|
<el-table-column type="index" align="center" min-width="100">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<span>序号</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center"
|
||||||
|
prop="time"
|
||||||
|
label="时间"
|
||||||
|
min-width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center"
|
||||||
|
prop="level"
|
||||||
|
label="日志级别"
|
||||||
|
min-width="100">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="日志信息" min-width="300">
|
||||||
|
<template slot-scope="scope" >{{ scope.row.info.substr(0, 80)}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center"
|
||||||
|
prop="user"
|
||||||
|
label="用户账号"
|
||||||
|
min-width="100">
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column align="center"
|
||||||
|
prop="ip"
|
||||||
|
label="用户IP"
|
||||||
|
min-width="100">
|
||||||
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
import { Loading } from 'element-ui'
|
import { Loading } from 'element-ui'
|
||||||
import { getTargetsResponse } from './nodeMock.js'
|
import { getTargetsResponse } from './nodeMock.js'
|
||||||
export default {
|
export default {
|
||||||
name: 'NodeView',
|
name: 'NodeView',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
target_id: '',
|
tableData:[],
|
||||||
target_name: '',
|
total:0,
|
||||||
loading: false,
|
page:1,
|
||||||
nodeData: {},
|
size:10,
|
||||||
nodeDataX: [],
|
time1:'',
|
||||||
nodeDataY: [],
|
time2:'',
|
||||||
rangeDict: [],
|
log_level:"",
|
||||||
nodeChart: null,
|
userAccount:"",
|
||||||
activeName: 'total'
|
pickerOptions: {
|
||||||
|
shortcuts: [{
|
||||||
|
text: '今天',
|
||||||
|
onClick(picker) {
|
||||||
|
picker.$emit('pick', new Date());
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '昨天',
|
||||||
|
onClick(picker) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||||
|
picker.$emit('pick', date);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '一周前',
|
||||||
|
onClick(picker) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||||
|
picker.$emit('pick', date);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
|
||||||
|
log_levels:[
|
||||||
|
{
|
||||||
|
value:'ERROR',
|
||||||
|
label:'ERROR'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'INFO',
|
||||||
|
label:'INFO'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'WARNING',
|
||||||
|
label:'WARNING'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.query()
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.init()
|
// this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async init() {
|
handleSizeChange(val) {
|
||||||
await this.getRangeDict()
|
console.log(`每页 ${val} 条`);
|
||||||
await this.initData()
|
this.size=val
|
||||||
this.initEcharts()
|
this.query()
|
||||||
},
|
},
|
||||||
initData() {
|
handleCurrentChange(val) {
|
||||||
// this.nodeData = getTargetsResponse?.result
|
console.log(`当前页: ${val}`);
|
||||||
|
this.page=val
|
||||||
|
this.query()
|
||||||
|
},
|
||||||
|
query(){
|
||||||
|
let data={
|
||||||
|
"per_page":this.size,
|
||||||
|
"page":this.page,
|
||||||
|
"begin":this.time1.toString(),
|
||||||
|
"end":this.time2.toString(),
|
||||||
|
"level":this.log_level,
|
||||||
|
"user":this.userAccount,
|
||||||
|
}
|
||||||
|
// 使用 Object.entries() 来遍历对象的键值对，并过滤掉值为空的属性
|
||||||
|
const filteredData = {};
|
||||||
|
for (const [key, value] of Object.entries(data)) {
|
||||||
|
if (value !== "") {
|
||||||
|
filteredData[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$axios.get(this.$http.api.sysLog,filteredData).then(res=>{
|
||||||
|
console.log('getImages======',res)
|
||||||
|
if(res.code===200){
|
||||||
|
this.tableData=res?.log_data
|
||||||
|
// this.total=res?.total
|
||||||
|
this.total=100
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// async init() {
|
||||||
|
// await this.getRangeDict()
|
||||||
|
// await this.initData()
|
||||||
|
// this.initEcharts()
|
||||||
|
// },
|
||||||
|
// initData() {
|
||||||
|
// // this.nodeData = getTargetsResponse?.result
|
||||||
|
// // for (const key in this.nodeData) {
|
||||||
|
// // this.nodeDataX.push(key)
|
||||||
|
// // this.nodeDataY.push(this.nodeData[key])
|
||||||
|
// // }
|
||||||
|
//
|
||||||
|
// const reqParams = {}
|
||||||
|
// if (this.target_id) {
|
||||||
|
// reqParams.target_id = this.target_id
|
||||||
|
// }
|
||||||
|
// if (this.activeName !== 'total') {
|
||||||
|
// reqParams.status = this.activeName
|
||||||
|
// }
|
||||||
|
// this.loading = true
|
||||||
|
// return this.$axios.get(this.$http.api.getNodeStatistics, reqParams).then(res => {
|
||||||
|
// if (res.code == 200 || res.code == "OK") {
|
||||||
|
// this.nodeDataX = []
|
||||||
|
// this.nodeDataY = []
|
||||||
|
// this.nodeData = res?.result || {}
|
||||||
// for (const key in this.nodeData) {
|
// for (const key in this.nodeData) {
|
||||||
// this.nodeDataX.push(key)
|
// this.nodeDataX.push(key)
|
||||||
// this.nodeDataY.push(this.nodeData[key])
|
// this.nodeDataY.push(this.nodeData[key])
|
||||||
// }
|
// }
|
||||||
|
// }
|
||||||
const reqParams = {}
|
// }).catch(err => {
|
||||||
if (this.target_id) {
|
// console.log(err)
|
||||||
reqParams.target_id = this.target_id
|
// }).finally(() => {
|
||||||
}
|
// this.loading = false
|
||||||
if (this.activeName !== 'total') {
|
// })
|
||||||
reqParams.status = this.activeName
|
// },
|
||||||
}
|
|
||||||
this.loading = true
|
|
||||||
return this.$axios.get(this.$http.api.getNodeStatistics, reqParams).then(res => {
|
|
||||||
if (res.code == 200 || res.code == "OK") {
|
|
||||||
this.nodeDataX = []
|
|
||||||
this.nodeDataY = []
|
|
||||||
this.nodeData = res?.result || {}
|
|
||||||
for (const key in this.nodeData) {
|
|
||||||
this.nodeDataX.push(key)
|
|
||||||
this.nodeDataY.push(this.nodeData[key])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取靶场列表字典
|
// 获取靶场列表字典
|
||||||
getRangeDict() {
|
// getRangeDict() {
|
||||||
const reqParams = {
|
// const reqParams = {
|
||||||
page: 1,
|
// page: 1,
|
||||||
size: 99,
|
// size: 99,
|
||||||
}
|
// }
|
||||||
return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
|
// return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
// if (res.code == 200 || res.code == "OK") {
|
||||||
this.rangeDict = res?.result?.items.map(item => {
|
// this.rangeDict = res?.result?.items.map(item => {
|
||||||
return {
|
// return {
|
||||||
label: item.target_name,
|
// label: item.target_name,
|
||||||
value: item.id
|
// value: item.id
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
}).catch(err => {
|
// }).catch(err => {
|
||||||
console.log(err)
|
// console.log(err)
|
||||||
}).finally(() => {
|
// }).finally(() => {
|
||||||
this.rangeDict.unshift({label: '全部靶场', value: ''})
|
// this.rangeDict.unshift({label: '全部靶场', value: ''})
|
||||||
this.target_id = this.rangeDict[0].value
|
// this.target_id = this.rangeDict[0].value
|
||||||
this.target_name = this.rangeDict[0].label
|
// this.target_name = this.rangeDict[0].label
|
||||||
})
|
// })
|
||||||
},
|
// },
|
||||||
// 改变靶场
|
// 改变靶场
|
||||||
async changeRange(val) {
|
// async changeRange(val) {
|
||||||
this.target_name = this.rangeDict.find(item => item.value === val)?.label
|
// this.target_name = this.rangeDict.find(item => item.value === val)?.label
|
||||||
await this.initData()
|
// await this.initData()
|
||||||
this.refreshData()
|
// this.refreshData()
|
||||||
},
|
// },
|
||||||
// 改变靶场状态
|
// 改变靶场状态
|
||||||
async changeRangeStatus() {
|
// async changeRangeStatus() {
|
||||||
await this.initData()
|
// await this.initData()
|
||||||
this.refreshData()
|
// this.refreshData()
|
||||||
},
|
// },
|
||||||
// 刷新图标数据
|
// 刷新图标数据
|
||||||
refreshData(){
|
// refreshData(){
|
||||||
if(!this.nodeChart){
|
// if(!this.nodeChart){
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
//更新数据
|
// //更新数据
|
||||||
var option = this.nodeChart.getOption()
|
// var option = this.nodeChart.getOption()
|
||||||
option.title[0].text = `${this.target_name}节点统计`,
|
// option.title[0].text = `${this.target_name}节点统计`,
|
||||||
option.xAxis[0].data = this.nodeDataX
|
// option.xAxis[0].data = this.nodeDataX
|
||||||
option.series[0].data = this.nodeDataY
|
// option.series[0].data = this.nodeDataY
|
||||||
this.nodeChart.setOption(option)
|
// this.nodeChart.setOption(option)
|
||||||
},
|
// },
|
||||||
// 切换靶场状态
|
// 切换靶场状态
|
||||||
tabClick(tab, event) {
|
// tabClick(tab, event) {
|
||||||
this.changeRangeStatus()
|
// this.changeRangeStatus()
|
||||||
},
|
// },
|
||||||
//初始化节点柱状图
|
//初始化节点柱状图
|
||||||
initEcharts() {
|
// initEcharts() {
|
||||||
var chartDom = document.getElementById('node');
|
// var chartDom = document.getElementById('node');
|
||||||
this.nodeChart = echarts.init(chartDom);
|
// this.nodeChart = echarts.init(chartDom);
|
||||||
var option;
|
// var option;
|
||||||
|
//
|
||||||
option = {
|
// option = {
|
||||||
title: {
|
// title: {
|
||||||
text: `${this.target_name}节点统计`,
|
// text: `${this.target_name}节点统计`,
|
||||||
left: 'center',
|
// left: 'center',
|
||||||
top: '15',
|
// top: '15',
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
color: '#FFFFFF',
|
// color: '#FFFFFF',
|
||||||
fontSize: 16,
|
// fontSize: 16,
|
||||||
fontWeight: 500
|
// fontWeight: 500
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
// trigger: 'axis',
|
// // trigger: 'axis',
|
||||||
axisPointer: {
|
// axisPointer: {
|
||||||
// type: 'shadow'
|
// // type: 'shadow'
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
grid: {
|
// grid: {
|
||||||
top: '25%',
|
// top: '25%',
|
||||||
left: '3%',
|
// left: '3%',
|
||||||
right: '4%',
|
// right: '4%',
|
||||||
bottom: '8%',
|
// bottom: '8%',
|
||||||
containLabel: true
|
// containLabel: true
|
||||||
},
|
// },
|
||||||
xAxis: [
|
// xAxis: [
|
||||||
{
|
// {
|
||||||
type: 'category',
|
// type: 'category',
|
||||||
data: this.nodeDataX,
|
// data: this.nodeDataX,
|
||||||
axisTick: {
|
// axisTick: {
|
||||||
// alignWithLabel: true
|
// // alignWithLabel: true
|
||||||
show: false
|
// show: false
|
||||||
},
|
// },
|
||||||
axisLabel: {
|
// axisLabel: {
|
||||||
fontSize: '14',
|
// fontSize: '14',
|
||||||
color: 'rgba(255, 255, 255, 0.7)'
|
// color: 'rgba(255, 255, 255, 0.7)'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
yAxis: [
|
// yAxis: [
|
||||||
{
|
// {
|
||||||
type: 'value',
|
// type: 'value',
|
||||||
name: '靶场中各类节点数量',
|
// name: '靶场中各类节点数量',
|
||||||
nameTextStyle: {
|
// nameTextStyle: {
|
||||||
color: 'rgba(255, 255, 255, 0.7)',
|
// color: 'rgba(255, 255, 255, 0.7)',
|
||||||
padding: [0, 0, 0, 70]
|
// padding: [0, 0, 0, 70]
|
||||||
},
|
// },
|
||||||
axisLabel: {
|
// axisLabel: {
|
||||||
fontSize: '12',
|
// fontSize: '12',
|
||||||
color: 'rgba(255, 255, 255, 0.7)'
|
// color: 'rgba(255, 255, 255, 0.7)'
|
||||||
},
|
// },
|
||||||
splitLine: {
|
// splitLine: {
|
||||||
show: true,
|
// show: true,
|
||||||
lineStyle: {
|
// lineStyle: {
|
||||||
color: ['rgba(199, 199, 200, 0.1)'],
|
// color: ['rgba(199, 199, 200, 0.1)'],
|
||||||
width: 1,
|
// width: 1,
|
||||||
type: 'dashed'
|
// type: 'dashed'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
],
|
// ],
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
// name: 'Direct',
|
// // name: 'Direct',
|
||||||
type: 'bar',
|
// type: 'bar',
|
||||||
barWidth: '20%',
|
// barWidth: '20%',
|
||||||
data: this.nodeDataY,
|
// data: this.nodeDataY,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
normal: {
|
// normal: {
|
||||||
label: {
|
// label: {
|
||||||
show: true, // 是否显示
|
// show: true, // 是否显示
|
||||||
position: 'top', // 显示位置
|
// position: 'top', // 显示位置
|
||||||
color: '#FFFFFF',
|
// color: '#FFFFFF',
|
||||||
formatter: function (params) {
|
// formatter: function (params) {
|
||||||
// 核心部分 formatter 可以为字符串也可以是回调
|
// // 核心部分 formatter 可以为字符串也可以是回调
|
||||||
if (parseInt(params.value) === 0) {
|
// if (parseInt(params.value) === 0) {
|
||||||
return '';
|
// return '';
|
||||||
} else {
|
// } else {
|
||||||
return params.data.label;
|
// return params.data.label;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
|
// // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
{ offset: 0, color: '#3280D7' },
|
// { offset: 0, color: '#3280D7' },
|
||||||
{ offset: 1, color: '#4122E2' }
|
// { offset: 1, color: '#4122E2' }
|
||||||
])
|
// ])
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
};
|
// };
|
||||||
option && this.nodeChart.setOption(option);
|
// option && this.nodeChart.setOption(option);
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.list{
|
||||||
|
width: 95%;
|
||||||
|
height: 69%;
|
||||||
|
margin-left: 2.5%;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.project{
|
||||||
|
display: inline-block;
|
||||||
|
height: auto;
|
||||||
|
width: 10%;
|
||||||
|
margin-left: 0.5%;
|
||||||
|
margin-right: 3%;
|
||||||
|
margin-top: 1%;
|
||||||
|
margin-bottom: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
.node-card {
|
.node-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -1,20 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="source-card">
|
<div class="source-card">
|
||||||
<div class="source-chart" id="resource" v-loading="loading"></div>
|
<!-- <div class="source-chart" id="resource" v-loading="loading"></div>-->
|
||||||
<div class="tabs-container">
|
<ZhuZhuangTu3 :active="0" ref="zhudouble" :bing="zhudouble"></ZhuZhuangTu3>
|
||||||
<el-tabs v-model="activeName" @tab-click="tabClick">
|
<!-- <div class="tabs-container">-->
|
||||||
<el-tab-pane label="CPU" name="CPU"></el-tab-pane>
|
<!-- <el-tabs v-model="activeName" @tab-click="tabClick">-->
|
||||||
<el-tab-pane label="MEMEORY" name="MEMEORY"></el-tab-pane>
|
<!-- <el-tab-pane label="CPU" name="CPU"></el-tab-pane>-->
|
||||||
</el-tabs>
|
<!-- <el-tab-pane label="MEMEORY" name="MEMEORY"></el-tab-pane>-->
|
||||||
</div>
|
<!-- </el-tabs>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import ZhuZhuangTu3 from '../echarts/zhuzhuangtu3'
|
||||||
|
|
||||||
import { getTargetsResponse } from './sourceMock.js'
|
import { getTargetsResponse } from './sourceMock.js'
|
||||||
export default {
|
export default {
|
||||||
name: 'SourceView',
|
name: 'SourceView',
|
||||||
|
components: {
|
||||||
|
ZhuZhuangTu3,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -25,14 +33,22 @@ export default {
|
|||||||
memoryList: [],
|
memoryList: [],
|
||||||
activeName: 'CPU',
|
activeName: 'CPU',
|
||||||
sourceChart: null,
|
sourceChart: null,
|
||||||
rangeDict: []
|
rangeDict: [],
|
||||||
|
zhudouble:{
|
||||||
|
xdata:[],
|
||||||
|
ydata1:[], //ipv6
|
||||||
|
ydata2:[], //dnsses
|
||||||
|
ydata3:[], //dot
|
||||||
|
ydata4:[], //doh
|
||||||
|
ydata5:[], //总计
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.init()
|
this.init()
|
||||||
this.getRangeDict()
|
// this.getRangeDict()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
@@ -45,15 +61,26 @@ export default {
|
|||||||
// }
|
// }
|
||||||
// this.initEcharts()
|
// this.initEcharts()
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.get(this.$http.api.getSourceStatistics).then(res => {
|
this.$axios.get(this.$http.api.sysNumDate).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
if (res.code == 200) {
|
||||||
this.sourceData = res?.result || {}
|
this.zhudouble.ydata1=[];
|
||||||
for (const key in this.sourceData) {
|
this.zhudouble.ydata2=[];
|
||||||
this.sourceDataX.push(key)
|
this.zhudouble.ydata3=[];
|
||||||
this.sourceDataY.push(this.sourceData[key]['total_cpu'])
|
this.zhudouble.ydata4=[];
|
||||||
this.cpuList.push(this.sourceData[key]['total_cpu'])
|
this.zhudouble.ydata5=[];
|
||||||
this.memoryList.push(this.sourceData[key]['total_memory'])
|
this.zhudouble.xdata=[];
|
||||||
}
|
|
||||||
|
|
||||||
|
Object.keys(res.date_data).forEach(date => {
|
||||||
|
console.log(`Date: ${date}, dot value: ${res.date_data[date].dot}`);
|
||||||
|
this.zhudouble.xdata.push(date)
|
||||||
|
this.zhudouble.ydata1.push(res.date_data[date].v6dns)
|
||||||
|
this.zhudouble.ydata2.push(res.date_data[date].dnssec)
|
||||||
|
this.zhudouble.ydata3.push(res.date_data[date].dot)
|
||||||
|
this.zhudouble.ydata4.push(res.date_data[date].doh)
|
||||||
|
this.zhudouble.ydata5.push(res.date_data[date].v6dns+res.date_data[date].dnssec+res.date_data[date].dot+res.date_data[date].doh)
|
||||||
|
});
|
||||||
|
this.$refs.zhudouble.bingfn(this.zhudouble)
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
@@ -196,25 +223,25 @@ export default {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 获取靶场列表字典
|
// // 获取靶场列表字典
|
||||||
getRangeDict() {
|
// getRangeDict() {
|
||||||
const reqParams = {
|
// const reqParams = {
|
||||||
page: 1,
|
// page: 1,
|
||||||
size: 99,
|
// size: 99,
|
||||||
}
|
// }
|
||||||
return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
|
// return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
// if (res.code == 200 || res.code == "OK") {
|
||||||
this.rangeDict = res?.result?.items.map(item => {
|
// this.rangeDict = res?.result?.items.map(item => {
|
||||||
return {
|
// return {
|
||||||
label: item.target_name,
|
// label: item.target_name,
|
||||||
value: item.id
|
// value: item.id
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
}).catch(err => {
|
// }).catch(err => {
|
||||||
console.log(err)
|
// console.log(err)
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,33 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="box" v-loading="loading">
|
<div class="box" v-loading="loading">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">靶场数量</div>
|
<div class="title">已部署代理</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ targetData.total_target_count }}</span>
|
<span class="info-span">{{ agent_num }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">台</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">部署成功</div>
|
<div class="title">已执行任务</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ targetData.deploy_success_count }}</span>
|
<span class="info-span">{{ task_num }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">次</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="title">部署失败</div>
|
<div class="title">已运行时间</div>
|
||||||
<div>
|
<div>
|
||||||
<span class="info-span">{{ targetData.deploy_fail_count }}</span>
|
<span class="info-span">{{ workday }}</span>
|
||||||
<span class="unit-span">个</span>
|
<span class="unit-span">天</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="title">未部署</div>
|
|
||||||
<div>
|
|
||||||
<span class="info-span">{{ targetData.no_deploy_count }}</span>
|
|
||||||
<span class="unit-span">个</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="card">-->
|
||||||
|
<!-- <div class="title">未部署</div>-->
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <span class="info-span">{{ targetData.no_deploy_count }}</span>-->
|
||||||
|
<!-- <span class="unit-span">个</span>-->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -39,23 +39,29 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
targetData: {}
|
targetData: {},
|
||||||
|
//num
|
||||||
|
agent_num:0,
|
||||||
|
task_num:0,
|
||||||
|
workday:0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
// this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init()
|
// this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init () {
|
init () {
|
||||||
// this.targetData = getTargetsResponse?.result
|
// this.targetData = getTargetsResponse?.result
|
||||||
|
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.get(this.$http.api.getTargetStatistics).then(res => {
|
this.$axios.get(this.$http.api.sysNum).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
if (res.code == 200) {
|
||||||
this.targetData = res?.result
|
this.agent_num=res?.agent_num
|
||||||
|
this.task_num=res?.task_num
|
||||||
|
this.workday=res?.workday
|
||||||
}
|
}
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
@@ -80,7 +86,7 @@ export default {
|
|||||||
.title {
|
.title {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-family: PingFang HK;
|
font-family: PingFang HK;
|
||||||
font-size: 12px;
|
font-size: 18px;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|||||||
@@ -1,138 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="account-manage" ref="appRef">
|
|
||||||
<div class="show">
|
|
||||||
<div class="title">修改密码</div>
|
|
||||||
<div class="form-box">
|
|
||||||
<el-form
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
ref="accountForm"
|
|
||||||
label-position="right"
|
|
||||||
label-width="100px"
|
|
||||||
class="form-content"
|
|
||||||
>
|
|
||||||
<el-form-item label="原始密码" prop="old_password">
|
|
||||||
<el-input v-model="form.old_password" placeholder="请输入原始密码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="新密码" prop="new_password">
|
|
||||||
<el-input v-model="form.new_password" placeholder="请输入新密码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="确认新密码" prop="new_password_again">
|
|
||||||
<el-input v-model="form.new_password_again" placeholder="请输入新密码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button size="small">取消</el-button>
|
|
||||||
<el-button :loading="loading" size="small" type="primary" @click="onSubmit">确认</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
loading: false,
|
|
||||||
form: {
|
|
||||||
old_password: '',
|
|
||||||
new_password: '',
|
|
||||||
new_password_again: ''
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
old_password: [
|
|
||||||
{ required: true, message: '请输入原始密码', trigger: 'change' },
|
|
||||||
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
|
|
||||||
],
|
|
||||||
new_password: [
|
|
||||||
{ required: true, message: '请输入新密码', trigger: 'change' },
|
|
||||||
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
|
|
||||||
],
|
|
||||||
new_password_again: [
|
|
||||||
{ required: true, message: '请输入新密码', trigger: 'change' },
|
|
||||||
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'change' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
watch: {},
|
|
||||||
created() {},
|
|
||||||
methods:{
|
|
||||||
// 创建新密码
|
|
||||||
onSubmit() {
|
|
||||||
this.$refs.accountForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.editPwd()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
editPwd() {
|
|
||||||
this.loading = true
|
|
||||||
const url = this.$http.api.updatePwd
|
|
||||||
this.$axios.put(url, {}, this.form).then(res => {
|
|
||||||
if (res.code == 200 || res.code == "OK") {
|
|
||||||
this.resetForm()
|
|
||||||
this.$notify({
|
|
||||||
title: '修改密码成功',
|
|
||||||
type: 'success',
|
|
||||||
duration: 2500
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
}).finally(() => {
|
|
||||||
this.loading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
resetForm() {
|
|
||||||
this.form = {
|
|
||||||
old_password: '',
|
|
||||||
new_password: '',
|
|
||||||
new_password_again: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='less' scoped="scoped">
|
|
||||||
.account-manage{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
float: right;
|
|
||||||
position: relative; /* 确保相对定位生效 */
|
|
||||||
.show{
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
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%，高度自适应保持宽高比 */
|
|
||||||
.title {
|
|
||||||
font-family: PingFang HK;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 22px;
|
|
||||||
letter-spacing: 0px;
|
|
||||||
text-align: left;
|
|
||||||
padding: 30px 0 0 30px;
|
|
||||||
}
|
|
||||||
.form-box {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.form-content {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,32 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="range-manage" ref="appRef">
|
<div class="range-manage" ref="appRef">
|
||||||
<div class="show">
|
<div class="show">
|
||||||
<div class="head">
|
<Header
|
||||||
<span style="font-size: 16px;float: left;padding-top: 1%">镜像列表</span>
|
></Header>
|
||||||
<!-- <img src="../../img/customImages.png" style="height: 70% ;width: 10%;margin-right: 2%;color: #ffffff" @click="newlyPztj=true">-->
|
<div>
|
||||||
<img src="../../img/customImages.png" style="height: 70% ;width: 10%;margin-right: 2%;color: #ffffff" @click="customizationImage(null)">
|
<span style="font-size: 20px;margin-bottom: 1%;margin-top: 0.5%;float: left;margin-left: 3%;color: #00C0FF">至少需要一个代理才能创建任务,每个代理同时只执行一项任务</span>
|
||||||
<div class="input" @keyup.enter="updateAndQuery">
|
|
||||||
<el-input v-model="queryByImageName" placeholder="名称查询输入" suffix icon="">
|
|
||||||
<template v-slot:suffix>
|
|
||||||
<div class="icon-group">
|
|
||||||
<img src="../../img/inputl.png" alt="**">
|
|
||||||
<img src="../../img/inputIcon.png" alt="*" @click="updateAndQuery">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="project">
|
<div class="project">
|
||||||
<el-select v-model="selectImageStateValue" placeholder="全部镜像" @change="selectImageState()">
|
<el-select v-model="powerValue" placeholder="能力筛选" clearable @change="query">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in powerFilter"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<el-select v-model="stateValue" placeholder="状态筛选" clearable @change="query">
|
||||||
|
<el-option
|
||||||
|
v-for="item in stateFilter"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="project">
|
||||||
|
<el-select v-model="freeValue" placeholder="空闲筛选" clearable @change="query">
|
||||||
|
<el-option
|
||||||
|
v-for="item in freeFilter"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="list" >
|
<div class="list" >
|
||||||
<el-table class="custom-table"
|
<el-table class="custom-table"
|
||||||
@@ -44,70 +52,41 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center"
|
<el-table-column align="center"
|
||||||
prop="image_name"
|
prop="id"
|
||||||
label="镜像名称"
|
label="编号"
|
||||||
min-width="200">
|
min-width="200">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center"
|
<el-table-column align="center" label="IP地址" min-width="300">
|
||||||
prop="image_version"
|
<template slot-scope="scope">
|
||||||
label="镜像版本"
|
<!-- 在这个插槽中自定义单元格的渲染方式 -->
|
||||||
min-width="100">
|
<div style="white-space: pre-line;">
|
||||||
|
<!-- 使用 v-for 循环遍历每个 IP 地址，并使用换行符分隔 -->
|
||||||
|
<span v-for="(ip, index) in scope.row.ipaddr" :key="index">
|
||||||
|
{{ ip }}
|
||||||
|
<br> <!-- 在每个 IP 地址后面添加换行符 -->
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center"
|
<el-table-column align="center"
|
||||||
prop="image_type"
|
prop="atype"
|
||||||
label="镜像类别"
|
label="能力类型"
|
||||||
min-width="100">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
prop="publish_time"
|
|
||||||
label="推送时间"
|
|
||||||
min-width="200">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column align="center"
|
|
||||||
prop="image_size"
|
|
||||||
label="镜像大小"
|
|
||||||
min-width="150">
|
min-width="150">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center"
|
<el-table-column align="center" label="当前状态" min-width="100">
|
||||||
label="构建方式"
|
<template slot-scope="scope">{{ scope.row.status?"在线":"离线" }}</template>
|
||||||
min-width="130">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.define_image.length===0">
|
|
||||||
导入
|
|
||||||
</span>
|
|
||||||
<span v-if="scope.row.define_image.length>0">
|
|
||||||
{{scope.row.define_image[0].establish_mode}}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center"
|
<el-table-column align="center" label="是否空闲" min-width="100">
|
||||||
label="镜像状态"
|
<template slot-scope="scope">{{ scope.row.idle?"空闲":"执行中" }}</template>
|
||||||
min-width="130">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<span v-if="scope.row.define_image.length===0">
|
|
||||||
已构建
|
|
||||||
</span>
|
|
||||||
<span v-if="scope.row.define_image.length>0">
|
|
||||||
{{scope.row.define_image[0].has_build==='True'?scope.row.define_image[0].build_status==='True'?'已构建':'构建失败':'未构建'}}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|
||||||
<el-table-column align="center"
|
<el-table-column align="center"
|
||||||
label="操作"
|
label="操作"
|
||||||
min-width="380">
|
min-width="150">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
|
<el-button type="text" size="medium" style="{'color': '#409eff'}"
|
||||||
<el-button type="text" size="medium" :style="{'color': (scope.row.define_image.length===0) ? '#565e6e': '#409eff'}"
|
@click="getInfo(scope.row)">详情</el-button>
|
||||||
@click="scope.row.define_image.length===0?'':getInfo(scope.row)">查看详情</el-button>
|
<el-button type="text" size="medium" @click="agentdel(scope.row.id)">删除</el-button>
|
||||||
<el-button type="text" size="medium" :style="{'color': (scope.row.image_type==='system' || scope.row.image_type==='buildin') ? '#565e6e': '#409eff'}"
|
|
||||||
@click="(scope.row.image_type==='system' || scope.row.image_type==='buildin') ? '' : customizationImage(scope.row)">修改配置</el-button>
|
|
||||||
<el-button type="text" size="medium" :style="{'color': (scope.row.define_image.length===0
|
|
||||||
||(scope.row.define_image[0].has_build==='True'&&scope.row.define_image[0].build_status==='True')) ? '#565e6e': '#409eff'}"
|
|
||||||
@click="(scope.row.define_image.length===0
|
|
||||||
||((scope.row.define_image[0].has_build==='True'&&scope.row.define_image[0].build_status==='True')))?NobuildingImage():buildImage(scope.row.id)">
|
|
||||||
{{scope.row.define_image.length===0?'构建镜像':(scope.row.define_image[0].has_build==='True'&&scope.row.define_image[0].build_status==='False')?"重新构建":"构建镜像"}}
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" size="medium" @click="delImage(scope.row.id)">删除镜像</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -124,246 +103,68 @@
|
|||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
<div class="mask"></div>
|
<div class="mask"></div>
|
||||||
</div>
|
|
||||||
<div class="infoTar" v-if="infoType==='tar'">
|
|
||||||
<i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 6%" @click="infoType=''"></i>
|
|
||||||
<div class="infoTypography">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="cell">Tar包名称：{{infoType}}</div>
|
|
||||||
<div class="cell">上传时间：{{infoType}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="cell">Tar包大小：{{infoType}}</div>
|
|
||||||
<div class="cell">状态：{{infoType}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="cellA">上传者：{{infoType}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="cellA">描述：{{infoType}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="anType">
|
|
||||||
<div>
|
|
||||||
<el-button class="glBut" type="primary" @click="closeInfo()">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="infoDocker" v-if="infoType==='docker'">
|
|
||||||
<i class="el-icon-close" style="float: right; padding-right: 5%;padding-top: 2%" @click="closeInfo()"></i>
|
|
||||||
<div class="infoCode">
|
|
||||||
<Card>
|
|
||||||
<prism-editor class="my-editor" v-model="code" :highlight="highlighter" readonly :line-numbers="true"></prism-editor>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<div class="infoInfo">
|
|
||||||
<div>
|
|
||||||
<div class="infoText">
|
|
||||||
<!-- 状态：{{infoType}}-->
|
|
||||||
状态：
|
|
||||||
<template>
|
|
||||||
<span v-if="addImage.define_image.length===0">
|
|
||||||
已构建
|
|
||||||
</span>
|
|
||||||
<span v-if="addImage.define_image.length>0">
|
|
||||||
{{addImage.define_image[0].has_build==='True'?addImage.define_image[0].build_status==='True'?'已构建':'构建失败':'未构建'}}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="infoText">
|
|
||||||
上传者99：{{addImage.user_id}}
|
|
||||||
</div>
|
|
||||||
<div class="infoText">
|
|
||||||
上传时间：{{addImage.publish_time}}
|
|
||||||
</div>
|
|
||||||
<div class="infoText">
|
|
||||||
描述：{{addImage.image_description}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 135%">
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" @click="closeInfo()">关闭</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="popup" v-if="newlyPztj">
|
<div class="popup" v-if="newlyPztj">
|
||||||
<!-- 在此处指定弹窗的样式和内容 -->
|
<!-- 在此处指定弹窗的样式和内容 -->
|
||||||
<!-- <i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 2.8%" @click="newlyPztj=false"></i>-->
|
|
||||||
<i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 2.8%" @click="CustomizationImageFales()"></i>
|
<i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 2.8%" @click="CustomizationImageFales()"></i>
|
||||||
<div class="tag">
|
<span style="color: #f5f7f0;font-size: 20px;float: left;margin-left: 6%;margin-top: 1%">代理{{info.id}}详情</span>
|
||||||
<el-tag class="tags" :style="{'color': (tag==='基本配置') ? '#f8fdff': '#565e6e'}" @click="updateTag('基本配置'),tagStep=1">基本配置</el-tag>
|
<div class="jbpz">
|
||||||
<el-tag class="tags" :style="{'color': (tag==='镜像配置') ? '#f8fdff': '#565e6e'}" @click="updateTag('镜像配置'),tagStep=2">镜像配置</el-tag>
|
<template>
|
||||||
<el-tag class="tags" :style="{'color': (tag==='构建') ? '#f8fdff': '#565e6e'}" @click="updateTag('构建'),tagStep=3">构建</el-tag>
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
</div>
|
<el-col :span="20">当前状态</el-col>
|
||||||
<div class="jbpz" v-if="tagStep===1">
|
<el-col :span="20">{{info.status?'在线':'离线'}}</el-col>
|
||||||
<div class="srkType">
|
</el-row>
|
||||||
<span style="margin-right: 3%">镜像名称</span>
|
<el-divider content-position="center"></el-divider>
|
||||||
<el-input class="srk" v-model="addImage.image_name" placeholder="请输入内容"></el-input>
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
</div>
|
<el-col>编号</el-col>
|
||||||
<div class="srkType">
|
<el-col>{{info.id}}</el-col>
|
||||||
<span style="margin-right: 3%">镜像版本</span>
|
</el-row>
|
||||||
<el-input class="srk" v-model="addImage.image_version" placeholder="请输入内容"></el-input>
|
<el-divider content-position="center"></el-divider>
|
||||||
</div>
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
<div class="srkType">
|
<el-col>通信端口</el-col>
|
||||||
<span style="margin-right: 3%">镜像描述</span>
|
<el-col>{{info.port}}</el-col>
|
||||||
<el-input class="srk" v-model="addImage.image_description" placeholder="请输入内容"></el-input>
|
</el-row>
|
||||||
</div>
|
<el-divider content-position="center"></el-divider>
|
||||||
<div class="radioType">
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
<div style="margin-right: 25%">
|
<el-col>运行平台</el-col>
|
||||||
<span style="margin-right: 6%">拥有权</span>
|
<el-col>{{info.sys}}</el-col>
|
||||||
<el-radio v-model="addImage.attribute" label="private">私有</el-radio>
|
</el-row>
|
||||||
<el-radio v-model="addImage.attribute" label="public">公有</el-radio>
|
<el-divider content-position="center"></el-divider>
|
||||||
</div>
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
</div>
|
<el-col>IP地址</el-col>
|
||||||
<div class="anType">
|
<el-col>
|
||||||
<div>
|
<span v-for="i in info.ipaddr">
|
||||||
<el-button class="glBut" type="primary" @click="CustomizationImageFales()">取消</el-button>
|
{{i}}
|
||||||
<el-button class="glBut" type="primary" @click="tagStep+=1 , tag='镜像配置'">下一步</el-button>
|
<br>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
<!-- {{info.ipaddr}}-->
|
||||||
</div>
|
</el-col>
|
||||||
<div class="jbpz" v-if="tagStep===2" >
|
</el-row>
|
||||||
<!-- <div class="srkType">-->
|
<el-divider content-position="center"></el-divider>
|
||||||
<!-- <span style="margin-right: 3%">镜像名称</span>-->
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
<!-- <el-input class="srk" v-model="addImage.image_name" placeholder="请输入内容"></el-input>-->
|
<el-col>CPU核心数</el-col>
|
||||||
<!-- </div>-->
|
<el-col>{{info.cpu_num}}</el-col>
|
||||||
<!-- <div class="radioType">-->
|
</el-row>
|
||||||
<!-- <div style="margin-right: 15%">-->
|
<el-divider content-position="center"></el-divider>
|
||||||
<!-- <span style="margin-right: 5%">镜像构建方式</span>-->
|
|
||||||
<!-- <el-radio v-model="dockerOrTar" label="dockerfile">Dockerfile</el-radio>-->
|
|
||||||
<!-- <el-radio v-model="dockerOrTar" label="tar">Tar包导入</el-radio>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div class="tar" v-if="dockerOrTar==='tar'">
|
|
||||||
<span style="margin-right: 5%;margin-top: 4%">上传Tar包</span>
|
|
||||||
<el-upload
|
|
||||||
class="upload-demo"
|
|
||||||
:on-preview="handlePreview"
|
|
||||||
:on-remove="handleRemove"
|
|
||||||
:before-remove="beforeRemove"
|
|
||||||
multiple
|
|
||||||
:limit="1"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:file-list="fileList">
|
|
||||||
<div class="uploadBgImg">
|
|
||||||
<!-- 只能上传jpg/png文件，且不超过500kb-->
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
<div class="radioType" v-if="dockerOrTar==='dockerfile'">
|
|
||||||
<div style="margin-right: 15%;margin-top: 5%">
|
|
||||||
<!-- <span style="margin-right: 5%">代码形式</span>-->
|
|
||||||
<span style="margin-right: 5%">镜像构建方式</span>
|
|
||||||
<el-radio v-model="radioOwnership2" label="1">直接上传</el-radio>
|
|
||||||
<el-radio v-model="radioOwnership2" label="2">git拉取</el-radio>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tar" v-if="dockerOrTar==='dockerfile'&&radioOwnership2==='1'" style="margin-left: 36%">
|
|
||||||
<!-- <div class="uploadBgImg">-->
|
|
||||||
<input class="uploadBgImg" type="file" @change="onFileChange">
|
|
||||||
<!-- 只能上传jpg/png文件，且不超过500kb-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <el-upload-->
|
|
||||||
<!-- class="upload-demo"-->
|
|
||||||
<!-- :on-preview="handlePreview"-->
|
|
||||||
<!-- :on-remove="handleRemove"-->
|
|
||||||
<!-- :before-remove="beforeRemove"-->
|
|
||||||
<!-- multiple-->
|
|
||||||
<!-- :limit="1"-->
|
|
||||||
<!-- :on-exceed="handleExceed"-->
|
|
||||||
<!-- :file-list="fileList">-->
|
|
||||||
<!-- <div class="uploadBgImg">-->
|
|
||||||
<!-- <!– 只能上传jpg/png文件，且不超过500kb–>-->
|
|
||||||
|
|
||||||
<!-- </div>-->
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
<!-- </el-upload>-->
|
<el-col>系统内存</el-col>
|
||||||
</div>
|
<el-col>{{info.mem}}</el-col>
|
||||||
<div class="tar" v-if="dockerOrTar==='dockerfile'&&radioOwnership2==='1'" style="margin-left: 36%">
|
</el-row>
|
||||||
<span style="color: #00C0FF">仅支持zip tar.gz，且文件名不可包含特殊字符 '!@#)(' </span>
|
<el-divider content-position="center"></el-divider>
|
||||||
</div>
|
|
||||||
<div v-if="radioOwnership2==='2'&&dockerOrTar==='dockerfile'">
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">git地址</span>
|
|
||||||
<el-input class="srk" v-model="addImage.git_address" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">分支名</span>
|
|
||||||
<el-input class="srk" v-model="addImage.git_branch" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">git账号</span>
|
|
||||||
<el-input class="srk" v-model="addImage.git_account" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">git密码</span>
|
|
||||||
<el-input class="srk" v-model="addImage.git_password" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">启动命令</span>
|
|
||||||
<el-input class="srk" v-model="addImage.run_command" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="srkType">
|
|
||||||
<span style="margin-right: 3%">启动参数</span>
|
|
||||||
<el-input class="srk" v-model="addImage.run_args" placeholder="请输入内容"></el-input>
|
|
||||||
</div>
|
|
||||||
<div class="radioType" v-if="addImage.establish_mode==='git'">
|
|
||||||
<div style="margin-left: 1%">
|
|
||||||
<span style="margin-right: 5%">递增镜像版本号</span>
|
|
||||||
<el-radio v-model="addImage.version_operate" label="add">是</el-radio>
|
|
||||||
<el-radio v-model="addImage.version_operate">其他</el-radio>
|
|
||||||
<el-input style="width: 20%;margin-left: 2%;background-color: #0c295b;display: inline-block;border: none;"
|
|
||||||
v-model="addImage.image_version" placeholder="必须含有数字" v-if="addImage.version_operate!='add'"></el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dockerFile" v-if="radioOwnership2==='2'">
|
|
||||||
<el-upload
|
|
||||||
class="upload-demo"
|
|
||||||
:on-preview="handlePreview"
|
|
||||||
:on-remove="handleRemove"
|
|
||||||
:before-remove="beforeRemove"
|
|
||||||
multiple
|
|
||||||
:limit="1"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:file-list="fileList">
|
|
||||||
<div class="uploadBgImg">
|
|
||||||
<!-- 只能上传jpg/png文件，且不超过500kb-->
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
|
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>运行时间</el-col>
|
||||||
|
<el-col>{{info.start_time}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<footer class="anDiv">
|
||||||
|
<el-button class="glBut" type="primary" @click="CustomizationImageFales">关闭</el-button>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<div class="anType">
|
|
||||||
<div>
|
|
||||||
<el-button class="glBut" type="primary" @click="CustomizationImageFales()">取消</el-button>
|
|
||||||
<el-button class="glBut" type="primary" @click="tagStep-=1 , tag='基本配置'">上一步</el-button>
|
|
||||||
<el-button class="glBut" type="primary" @click="tagStep+=1 , tag='构建'">下一步</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="jbpz" v-if="tagStep===3">
|
|
||||||
<div style="width: 50%;float: left;margin-left: 10%">
|
|
||||||
<div style="margin-right: 10%">
|
|
||||||
<div><el-radio v-model="addImage.direct" :label="getLabel(true)" style="margin-top: 15%">直接构建</el-radio></div>
|
|
||||||
<div><el-radio v-model="addImage.direct" :label="getLabel(false)" style="margin-top: 15%">仅添加配置</el-radio></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="anType">
|
|
||||||
<div>
|
|
||||||
<el-button class="glBut" type="primary" @click="CustomizationImageFales()">取消</el-button>
|
|
||||||
<el-button class="glBut" type="primary" @click="tagStep-=1 , tag='镜像配置'">上一步</el-button>
|
|
||||||
<el-button class="glBut" type="primary" @click="image_id===0?addImageToBark():updateImageToBark()">确定</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -375,19 +176,85 @@
|
|||||||
import { highlight, languages } from 'prismjs/components/prism-core';
|
import { highlight, languages } from 'prismjs/components/prism-core';
|
||||||
import 'prismjs/components/prism-clike';
|
import 'prismjs/components/prism-clike';
|
||||||
import 'prismjs/components/prism-javascript';
|
import 'prismjs/components/prism-javascript';
|
||||||
// import 'prismjs/themes/prism-solarizedlight.css'; // 代码的其他样式风格
|
|
||||||
// import 'prismjs/themes/prism-coy.css';
|
|
||||||
// import 'prismjs/themes/prism-tomorrow.css';
|
|
||||||
import 'prismjs/themes/prism.css'; // 如果想代码换个样式风格，把这个注释了，上面的三个放开一个
|
import 'prismjs/themes/prism.css'; // 如果想代码换个样式风格，把这个注释了，上面的三个放开一个
|
||||||
|
import Header from './module/Header.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "imageMange",
|
name: "imageMange",
|
||||||
// props:['fTag','fInput','fFrom','FIsConfigQuery'],
|
// props:['fTag','fInput','fFrom','FIsConfigQuery'],
|
||||||
// components:{
|
// components:{
|
||||||
// router
|
// router
|
||||||
// },
|
// },
|
||||||
components: { PrismEditor },
|
components: { PrismEditor ,Header},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
infoTable: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "用户ID",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "微信昵称",
|
||||||
|
value:2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "会员名称",
|
||||||
|
value:3,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
info:[],
|
||||||
|
powerValue:'',
|
||||||
|
stateValue:'',
|
||||||
|
freeValue:'',
|
||||||
|
powerFilter:[
|
||||||
|
{
|
||||||
|
value:'全部',
|
||||||
|
label:'全部'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'渗透',
|
||||||
|
label:'渗透'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'状态感知',
|
||||||
|
label:'状态感知'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'参数感知',
|
||||||
|
label:'参数感知'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
stateFilter:[
|
||||||
|
{
|
||||||
|
value:'全部',
|
||||||
|
label:'全部'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'在线',
|
||||||
|
label:'在线'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'离线',
|
||||||
|
label:'离线'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
freeFilter:[
|
||||||
|
{
|
||||||
|
value:'全部',
|
||||||
|
label:'全部'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'空闲',
|
||||||
|
label:'空闲'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:'执行中',
|
||||||
|
label:'执行中'
|
||||||
|
},
|
||||||
|
],
|
||||||
file:'',
|
file:'',
|
||||||
image_id:0,
|
image_id:0,
|
||||||
addImage:{
|
addImage:{
|
||||||
@@ -427,7 +294,6 @@
|
|||||||
code: '/**\n* JS判断两个数组是否相等\n* @param {Array} arr1\n* @param {Array} arr2\n* @returns {boolean} 返回true 或 false\n*/\nfunction arrayEqual(arr1, arr2) {\n if (arr1 === arr2) return true;\n if (arr1.length != arr2.length) return false;\n for (var i = 0; i < arr1.length; ++i) {\n if (arr1[i] !== arr2[i]) return false;\n }\n return true;\n}',
|
code: '/**\n* JS判断两个数组是否相等\n* @param {Array} arr1\n* @param {Array} arr2\n* @returns {boolean} 返回true 或 false\n*/\nfunction arrayEqual(arr1, arr2) {\n if (arr1 === arr2) return true;\n if (arr1.length != arr2.length) return false;\n for (var i = 0; i < arr1.length; ++i) {\n if (arr1[i] !== arr2[i]) return false;\n }\n return true;\n}',
|
||||||
infoType:"",
|
infoType:"",
|
||||||
tag:"基本配置",
|
tag:"基本配置",
|
||||||
tagStep:1,
|
|
||||||
tableData:[],
|
tableData:[],
|
||||||
total:0,
|
total:0,
|
||||||
multipleSelection: [],
|
multipleSelection: [],
|
||||||
@@ -449,19 +315,6 @@
|
|||||||
radioOwnership2: '1',
|
radioOwnership2: '1',
|
||||||
radioUpdateImage: '2',
|
radioUpdateImage: '2',
|
||||||
radioHowToCreate: '1',
|
radioHowToCreate: '1',
|
||||||
options: [{
|
|
||||||
value: '',
|
|
||||||
label: '全部镜像'
|
|
||||||
}, {
|
|
||||||
value: 'system',
|
|
||||||
label: '系统'
|
|
||||||
}, {
|
|
||||||
value: 'buildin',
|
|
||||||
label: '内置'
|
|
||||||
}, {
|
|
||||||
value: 'define',
|
|
||||||
label: '自定义'
|
|
||||||
}],
|
|
||||||
delTimer: null,
|
delTimer: null,
|
||||||
counter: 0
|
counter: 0
|
||||||
|
|
||||||
@@ -472,7 +325,8 @@
|
|||||||
watch: {
|
watch: {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getImages()
|
// this.getImages()
|
||||||
|
this.query();
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
// if (this.pendingTimer) {
|
// if (this.pendingTimer) {
|
||||||
@@ -486,6 +340,50 @@
|
|||||||
this.counter = 0
|
this.counter = 0
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
formatIPs(row, column, cellValue) {
|
||||||
|
// let formattedIPs = cellValue.join(',\n');
|
||||||
|
// return formattedIPs;
|
||||||
|
// 使用 map 方法处理每个 IP 地址，然后连接成带有换行符的字符串
|
||||||
|
let formattedIPs = cellValue.map(ip => ip).join(',\n');
|
||||||
|
|
||||||
|
return formattedIPs;
|
||||||
|
|
||||||
|
},
|
||||||
|
query(){
|
||||||
|
let data={
|
||||||
|
"page":this.page,
|
||||||
|
"per_page":this.size,
|
||||||
|
"atype":this.powerValue==='参数感知'?'csgz':(this.powerValue==='状态感知'?'ztgz':(this.powerValue==='渗透'?'gjst':'all')),
|
||||||
|
"status":this.stateValue==='在线'?1:(this.stateValue==='离线'?0:2),
|
||||||
|
"idle":this.freeValue==='空闲'?1:(this.stateValue==='执行中'?0:2)
|
||||||
|
}
|
||||||
|
this.$axios.get(this.$http.api.agentQueryList,data).then(res=>{
|
||||||
|
if(res.code===200){
|
||||||
|
this.tableData=res.agent_data
|
||||||
|
this.total=res.total
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
agentdel(val){
|
||||||
|
let data={
|
||||||
|
"id":val.toString(),
|
||||||
|
}
|
||||||
|
this.$axios.post(this.$http.api.agentDel,data).then(res=>{
|
||||||
|
if(res.code===200){
|
||||||
|
this.$message.success(res.msg)
|
||||||
|
}else {
|
||||||
|
this.$message.error(res.msg)
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
onFileChange(event) {
|
onFileChange(event) {
|
||||||
this.file = event.target.files[0];
|
this.file = event.target.files[0];
|
||||||
},
|
},
|
||||||
@@ -502,9 +400,6 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
thereToOne(val){
|
thereToOne(val){
|
||||||
console.log("RRRRRRRRRRRRRRRRRRRRRRRRR")
|
|
||||||
console.log(val)
|
|
||||||
console.log("RRRRRRRRRRRRRRRRRRRRRRRRR")
|
|
||||||
if(val==='tar'){
|
if(val==='tar'){
|
||||||
this.dockerOrTar='tar'
|
this.dockerOrTar='tar'
|
||||||
}else {
|
}else {
|
||||||
@@ -525,30 +420,14 @@
|
|||||||
CustomizationImageFales(){
|
CustomizationImageFales(){
|
||||||
this.newlyPztj=false;
|
this.newlyPztj=false;
|
||||||
document.querySelector('.mask').style.display = 'none'
|
document.querySelector('.mask').style.display = 'none'
|
||||||
this.image_id=0
|
// this.image_id=0
|
||||||
this.addImage=this.barkImageParmer
|
// this.addImage=this.barkImageParmer
|
||||||
},
|
|
||||||
customizationImage(val){
|
|
||||||
this.tagStep=1;
|
|
||||||
this.tag="基本配置"
|
|
||||||
if(val!=null){
|
|
||||||
this.image_id=val.id
|
|
||||||
this.addImage=val
|
|
||||||
this.infoImage(this.image_id);
|
|
||||||
this.thereToOne(val.define_image[0].establish_mode)
|
|
||||||
}
|
|
||||||
this.newlyPztj=true;
|
|
||||||
document.querySelector('.mask').style.display = 'block'
|
|
||||||
},
|
|
||||||
getLabel(boolValue) {
|
|
||||||
return boolValue ? true: false;
|
|
||||||
},
|
},
|
||||||
buildImage(val){
|
buildImage(val){
|
||||||
let data={
|
let data={
|
||||||
"image_id":val,
|
"image_id":val,
|
||||||
}
|
}
|
||||||
this.$axios.get(this.$http.api.asyncBuildImage,data).then(res=>{
|
this.$axios.get(this.$http.api.asyncBuildImage,data).then(res=>{
|
||||||
console.log('getImages======',res)
|
|
||||||
if(res.code===200){
|
if(res.code===200){
|
||||||
this.CustomizationImageFales()
|
this.CustomizationImageFales()
|
||||||
|
|
||||||
@@ -578,7 +457,6 @@
|
|||||||
"image_id":val,
|
"image_id":val,
|
||||||
}
|
}
|
||||||
this.$axios.get(this.$http.api.infoImage,data).then(res=>{
|
this.$axios.get(this.$http.api.infoImage,data).then(res=>{
|
||||||
console.log('getImages======',res)
|
|
||||||
if(res.code===200){
|
if(res.code===200){
|
||||||
this.addImage.git_account=res.result.pipeline.git_account;
|
this.addImage.git_account=res.result.pipeline.git_account;
|
||||||
this.addImage.git_password=res.result.pipeline.git_password;
|
this.addImage.git_password=res.result.pipeline.git_password;
|
||||||
@@ -598,7 +476,6 @@
|
|||||||
"image_id":val,
|
"image_id":val,
|
||||||
}
|
}
|
||||||
this.$axios.delete(this.$http.api.delImage,data).then(res=>{
|
this.$axios.delete(this.$http.api.delImage,data).then(res=>{
|
||||||
console.log('getImages======',res)
|
|
||||||
if(res.code===200){
|
if(res.code===200){
|
||||||
this.image_id=0
|
this.image_id=0
|
||||||
this.getImages()
|
this.getImages()
|
||||||
@@ -630,7 +507,6 @@
|
|||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
this.$axios.put(this.$http.api.asyncUpdateImage, formData ,config).then(res=>{
|
this.$axios.put(this.$http.api.asyncUpdateImage, formData ,config).then(res=>{
|
||||||
console.log('getImages======',res)
|
|
||||||
if(res.code===200){
|
if(res.code===200){
|
||||||
this.CustomizationImageFales()
|
this.CustomizationImageFales()
|
||||||
|
|
||||||
@@ -707,59 +583,37 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
updateAndQuery(){
|
|
||||||
this.page=1;
|
|
||||||
this.getImages()
|
|
||||||
},
|
|
||||||
handleSizeChange(val) {
|
handleSizeChange(val) {
|
||||||
console.log(`每页 ${val} 条`);
|
console.log(`每页 ${val} 条`);
|
||||||
this.size=val
|
this.size=val
|
||||||
this.getImages()
|
this.query()
|
||||||
},
|
},
|
||||||
handleCurrentChange(val) {
|
handleCurrentChange(val) {
|
||||||
console.log(`当前页: ${val}`);
|
console.log(`当前页: ${val}`);
|
||||||
this.page=val
|
this.page=val
|
||||||
this.getImages()
|
this.query()
|
||||||
},
|
},
|
||||||
getImages(){
|
getImages(){
|
||||||
let data={
|
let data={
|
||||||
// "image_name":"da",
|
|
||||||
"image_type":this.selectImageStateValue,
|
|
||||||
"image_name":this.queryByImageName,
|
|
||||||
"image_state":this.selectImageStateValue,
|
|
||||||
"page":this.page,
|
|
||||||
"size":this.size
|
|
||||||
}
|
}
|
||||||
this.$axios.get(this.$http.api.getImages,data).then(res=>{
|
this.$axios.get(this.$http.api.agentQueryList,data).then(res=>{
|
||||||
console.log('getImages======',res)
|
console.log('getImages======',res)
|
||||||
if(res.code===200){
|
// if(res.code===200){
|
||||||
this.tableData=res.result.items
|
this.tableData=res.agent_data
|
||||||
this.total=res.result.total
|
this.total=100
|
||||||
}
|
// }
|
||||||
}).catch(err=>{
|
}).catch(err=>{
|
||||||
console.log(err)
|
console.log(err)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
selectImageState(){
|
|
||||||
this.page=1
|
|
||||||
console.log(this.selectImageStateValue)
|
|
||||||
this.getImages()
|
|
||||||
},
|
|
||||||
NobuildingImage(){
|
|
||||||
console.log("无需重新构建")
|
|
||||||
},
|
|
||||||
highlighter(code) {
|
highlighter(code) {
|
||||||
return highlight(code, languages.js)
|
return highlight(code, languages.js)
|
||||||
},
|
},
|
||||||
getInfo(info){
|
getInfo(val){
|
||||||
|
this.info=val
|
||||||
|
this.newlyPztj=true
|
||||||
document.querySelector('.mask').style.display = 'block'
|
document.querySelector('.mask').style.display = 'block'
|
||||||
this.addImage=info;
|
|
||||||
if(info.define_image[0].establish_mode==='tar'){
|
|
||||||
this.infoType='tar'
|
|
||||||
}else if(info.define_image[0].establish_mode==='git'
|
|
||||||
|| info.define_image[0].establish_mode==='code'){
|
|
||||||
this.infoType='docker'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
updateTag(val){
|
updateTag(val){
|
||||||
this.tag=val
|
this.tag=val
|
||||||
@@ -768,19 +622,15 @@
|
|||||||
this.multipleSelection = val;
|
this.multipleSelection = val;
|
||||||
},
|
},
|
||||||
handleRemove(file, fileList) {
|
handleRemove(file, fileList) {
|
||||||
console.log("111111111")
|
|
||||||
console.log(file, fileList);
|
console.log(file, fileList);
|
||||||
},
|
},
|
||||||
handlePreview(file) {
|
handlePreview(file) {
|
||||||
console.log("2222222222222")
|
|
||||||
console.log(file);
|
console.log(file);
|
||||||
},
|
},
|
||||||
handleExceed(files, fileList) {
|
handleExceed(files, fileList) {
|
||||||
console.log("3333333333333")
|
|
||||||
this.$notify.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
this.$notify.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||||
},
|
},
|
||||||
beforeRemove(file, fileList) {
|
beforeRemove(file, fileList) {
|
||||||
console.log("444444444444")
|
|
||||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||||
},
|
},
|
||||||
// 获取任务进度
|
// 获取任务进度
|
||||||
@@ -825,12 +675,42 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped="scoped">
|
<style lang='less' scoped="scoped">
|
||||||
|
.state{
|
||||||
|
display: inline-block;
|
||||||
|
height: auto;
|
||||||
|
width: 10%;
|
||||||
|
margin-left: 0.5%;
|
||||||
|
.custom-popper .el-select-dropdown {
|
||||||
|
max-height: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.project{
|
||||||
|
display: inline-block;
|
||||||
|
height: auto;
|
||||||
|
width: 10%;
|
||||||
|
margin-left: 0.5%;
|
||||||
|
margin-right: 3%;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
.custom-table {
|
.custom-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.my-editor {
|
.my-editor {
|
||||||
/*background: #fa3919;*/
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
/*color: #000;*/
|
/*color: #000;*/
|
||||||
color: #fafafa;
|
color: #fafafa;
|
||||||
@@ -843,9 +723,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.my-editor ::v-deep .prism-editor__textarea::selection{
|
.my-editor ::v-deep .prism-editor__textarea::selection{
|
||||||
/*background-color: #cce2ff !important;*/
|
|
||||||
background-color: #322dff !important;
|
background-color: #322dff !important;
|
||||||
/*color: #000 !important;*/
|
|
||||||
color: #ed1210 !important;
|
color: #ed1210 !important;
|
||||||
user-select:none;
|
user-select:none;
|
||||||
}
|
}
|
||||||
@@ -860,10 +738,9 @@
|
|||||||
}
|
}
|
||||||
.popup{
|
.popup{
|
||||||
z-index: 997;
|
z-index: 997;
|
||||||
width: 40%;
|
width: 43%;
|
||||||
height: 70%;
|
height: 75%;
|
||||||
position: absolute; /* 绝对定位 */
|
position: absolute; /* 绝对定位 */
|
||||||
/*position: relative;*/
|
|
||||||
top: 50%; /* 向下偏移50% */
|
top: 50%; /* 向下偏移50% */
|
||||||
left: 50%; /* 向右偏移50% */
|
left: 50%; /* 向右偏移50% */
|
||||||
transform: translate(-50%, -50%); /* 回移50% */
|
transform: translate(-50%, -50%); /* 回移50% */
|
||||||
@@ -882,12 +759,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.jbpz{
|
.jbpz{
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 15%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 70%;
|
||||||
|
text-align: center;
|
||||||
position:relative;
|
position:relative;
|
||||||
.project{
|
.project{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*float: left;*/
|
|
||||||
margin-top: 3%;
|
margin-top: 3%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-right: 10%;
|
padding-right: 10%;
|
||||||
@@ -949,16 +829,12 @@
|
|||||||
bottom:4%;
|
bottom:4%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
/*margin-bottom: 2%;*/
|
|
||||||
/*width: 100%;*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
.glBut{
|
.glBut{
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
/*margin-left: 10%;*/
|
|
||||||
background-color: rgba(24, 133, 234, 0.2);
|
background-color: rgba(24, 133, 234, 0.2);
|
||||||
color: #1b7cc4;
|
color: #1b7cc4;
|
||||||
}
|
}
|
||||||
@@ -969,8 +845,6 @@
|
|||||||
.range-manage{
|
.range-manage{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/*background-color: #010f4e;*/
|
|
||||||
/*background-color: rgba(255, 25, 49, 0.4);*/
|
|
||||||
float: right;
|
float: right;
|
||||||
position: relative; /* 确保相对定位生效 */
|
position: relative; /* 确保相对定位生效 */
|
||||||
.infoTar{
|
.infoTar{
|
||||||
@@ -994,16 +868,13 @@
|
|||||||
.container{
|
.container{
|
||||||
|
|
||||||
width: 85%;
|
width: 85%;
|
||||||
/*background-color: #af321e;*/
|
|
||||||
.row {
|
.row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.cell {
|
.cell {
|
||||||
float: left;
|
float: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
/*background-color: #2daf23;*/
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
/*border: 1px solid #ccc;*/
|
|
||||||
border: none;
|
border: none;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@@ -1013,9 +884,7 @@
|
|||||||
float: left;
|
float: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 51%;
|
width: 51%;
|
||||||
/*background-color: #2daf23;*/
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
/*border: 1px solid #ccc;*/
|
|
||||||
border: none;
|
border: none;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@@ -1174,8 +1043,7 @@
|
|||||||
}
|
}
|
||||||
.list{
|
.list{
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 84%;
|
height: 76%;
|
||||||
/*max-height: 84%;*/
|
|
||||||
margin-left: 2.5%;
|
margin-left: 2.5%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
@@ -1194,30 +1062,30 @@
|
|||||||
// scrollbar-width: none;
|
// scrollbar-width: none;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
.page{
|
/*.page{*/
|
||||||
width: 95%;
|
/* width: 95%;*/
|
||||||
height: 5%;
|
/* height: 5%;*/
|
||||||
margin-left: 2%;
|
/* margin-left: 2%;*/
|
||||||
/*background-color: #ec171d;*/
|
/* !*background-color: #ec171d;*!*/
|
||||||
padding-left: 35%;
|
/* padding-left: 35%;*/
|
||||||
padding-top: 0.9%;
|
/* padding-top: 0.9%;*/
|
||||||
.el-pagination {
|
/* .el-pagination {*/
|
||||||
transform: scale(1.5);
|
/* transform: scale(1.5);*/
|
||||||
}
|
|
||||||
.el-pagination .btn-next, .el-pagination .btn-prev {
|
|
||||||
background: #0b6f08 !important;
|
|
||||||
color: #00F1FF !important;
|
|
||||||
}
|
|
||||||
/*.el-pagination .number:not(.active) {*/
|
|
||||||
/* background-color: red !important;*/
|
|
||||||
/* color: white;*/
|
|
||||||
/* }*/
|
/* }*/
|
||||||
/*.el-pagination button:disabled{*/
|
/* .el-pagination .btn-next, .el-pagination .btn-prev {*/
|
||||||
/* background-color: #a10e0e;*/
|
/* background: #0b6f08 !important;*/
|
||||||
|
/* color: #00F1FF !important;*/
|
||||||
/* }*/
|
/* }*/
|
||||||
|
/* !*.el-pagination .number:not(.active) {*!*/
|
||||||
|
/* !* background-color: red !important;*!*/
|
||||||
|
/* !* color: white;*!*/
|
||||||
|
/* !*}*!*/
|
||||||
|
/* !*.el-pagination button:disabled{*!*/
|
||||||
|
/* !* background-color: #a10e0e;*!*/
|
||||||
|
/* !*}*!*/
|
||||||
|
|
||||||
|
|
||||||
}
|
/*}*/
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
.mask{
|
.mask{
|
||||||
position: fixed; /*将元素设置为固定定位*/
|
position: fixed; /*将元素设置为固定定位*/
|
||||||
|
|||||||
@@ -1,75 +1,90 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="range-config-manage" ref="appRef">
|
<div class="range-config-manage" ref="appRef">
|
||||||
<div class="show">
|
<div class="show">
|
||||||
<Header
|
<!-- <Header-->
|
||||||
></Header>
|
<!-- ></Header>-->
|
||||||
<div class="list" >
|
<div>
|
||||||
<el-table
|
<span style="font-size: 20px;margin-bottom: 1%;margin-top: 2%;float: left;margin-left: 3%;color: #00C0FF">能力指代不同渗透策略,代理将根据策略逻辑以及主控端下发的生成参数生成对应的载荷</span>
|
||||||
class="custom-table"
|
</div>
|
||||||
ref="multipleTable"
|
<div class="list" id="show-loading">
|
||||||
v-loading="loading"
|
<div class="single" v-for="rangeItem in rangeList" :key="rangeItem.target_name">
|
||||||
element-loading-text="加载中..."
|
<div class="title">
|
||||||
height="100%"
|
<el-tag type="success" style="margin-right: 2%">标签二</el-tag>
|
||||||
style="width: 100%;"
|
<el-tag>标签一</el-tag>
|
||||||
:data="tableData"
|
</div>
|
||||||
tooltip-effect="dark"
|
<div class="container">
|
||||||
highlight-current-row
|
<div class="row" >
|
||||||
>
|
<span style="float: left;margin-left: 2%;font-size: 20px;color: #efefef"> IPV6 DDOS</span>
|
||||||
<el-table-column
|
<div style="margin-left: auto;">
|
||||||
align="center"
|
<el-button size="mini" type="primary" @click="getInfo(rangeItem)">详情</el-button>
|
||||||
type="index"
|
</div>
|
||||||
label="序号"
|
</div>
|
||||||
width="150"/>
|
|
||||||
<el-table-column
|
</div>
|
||||||
align="center"
|
<div>
|
||||||
prop="country_name"
|
<span style="word-wrap: break-word;">
|
||||||
label="介绍名称"
|
lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkklllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
|
||||||
min-width="150"/>
|
</span>
|
||||||
<el-table-column
|
</div>
|
||||||
align="center"
|
</div>
|
||||||
prop="network_count"
|
|
||||||
label="网段数"
|
|
||||||
min-width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="used_ip_count"
|
|
||||||
label="已用ip数"
|
|
||||||
min-width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="unused_ip_count"
|
|
||||||
label="未用ip数"
|
|
||||||
min-width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="create_time"
|
|
||||||
label="创建时间"
|
|
||||||
min-width="150">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
{{ scope.row.create_time | formatTime }}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
label="操作"
|
|
||||||
min-width="200"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" size="medium" :loading="scope.row.delLoading" >详情</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
</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"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
<div class="mask"></div>
|
<div class="mask"></div>
|
||||||
|
<div class="popup" v-if="newlyPztj">
|
||||||
|
<!-- 在此处指定弹窗的样式和内容 -->
|
||||||
|
<i class="el-icon-close" style="float: right; padding-right: 7%;padding-top: 2.8%" @click="CustomizationImageFales()"></i>
|
||||||
|
<span style="color: #f5f7f0;font-size: 20px;float: left;margin-left: 6%;margin-top: 1%">详情999</span>
|
||||||
|
<div class="jbpz">
|
||||||
|
<template>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col :span="20">当前状态</el-col>
|
||||||
|
<el-col :span="20">离线</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>编号</el-col>
|
||||||
|
<el-col>999</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>通信端口</el-col>
|
||||||
|
<el-col>3706</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>运行平台</el-col>
|
||||||
|
<el-col>linux</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>IP地址</el-col>
|
||||||
|
<el-col>1.1.1.1</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>CPU核心数</el-col>
|
||||||
|
<el-col>9</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>系统内存</el-col>
|
||||||
|
<el-col>85G</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
|
||||||
|
<el-row style="display: flex; flex-direction: row;">
|
||||||
|
<el-col>运行时间</el-col>
|
||||||
|
<el-col>55天</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider content-position="center"></el-divider>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<footer class="anDiv">
|
||||||
|
<el-button class="glBut" type="primary" @click="CustomizationImageFales">关闭</el-button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<el-drawer
|
<el-drawer
|
||||||
title=""
|
title=""
|
||||||
:visible.sync="drawer"
|
:visible.sync="drawer"
|
||||||
@@ -85,13 +100,41 @@ export default {
|
|||||||
components:{ Header},
|
components:{ Header},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
newlyPztj:false,
|
||||||
|
info:{},
|
||||||
drawer: false,
|
drawer: false,
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
total: 0,
|
total: 0,
|
||||||
isAdd: false,
|
isAdd: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
tableData: []
|
tableData: [],
|
||||||
|
|
||||||
|
rangeList:[
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
{},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
@@ -99,12 +142,128 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
getInfo(val){
|
||||||
|
this.info=val
|
||||||
|
this.newlyPztj=true
|
||||||
|
document.querySelector('.mask').style.display = 'block'
|
||||||
|
},
|
||||||
|
CustomizationImageFales(){
|
||||||
|
this.newlyPztj=false;
|
||||||
|
document.querySelector('.mask').style.display = 'none'
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped="scoped">
|
<style lang='less' scoped="scoped">
|
||||||
|
.popup{
|
||||||
|
z-index: 997;
|
||||||
|
width: 43%;
|
||||||
|
height: 75%;
|
||||||
|
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%，高度自适应保持宽高比 */
|
||||||
|
.tag{
|
||||||
|
margin-left: 9%;
|
||||||
|
.tags{
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-top: 2%;
|
||||||
|
font-size: 23px;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #565e6e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jbpz{
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 15%;
|
||||||
|
height: 100%;
|
||||||
|
width: 70%;
|
||||||
|
text-align: center;
|
||||||
|
position:relative;
|
||||||
|
.project{
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3%;
|
||||||
|
text-align: center;
|
||||||
|
padding-right: 10%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tar{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 23%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
::v-deep .el-upload-list {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 300px !important;
|
||||||
|
padding-left: 20%;
|
||||||
|
}
|
||||||
|
.uploadBgImg{
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
background-image: url("../../img/shangchuan.png");
|
||||||
|
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
||||||
|
background-size: 100% auto; /* 宽度为100%，高度自适应保持宽高比 */
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10%;
|
||||||
|
padding-top: 2%;
|
||||||
|
font-size:0;
|
||||||
|
color: rgba(81, 84, 102, 0.84);
|
||||||
|
}
|
||||||
|
.uploadBgImg::file-selector-button{
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.srkType{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: center;
|
||||||
|
.srk{
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 2%;
|
||||||
|
background-color: #0c295b;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radioType{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.anType{
|
||||||
|
height: 10%;
|
||||||
|
position:absolute;
|
||||||
|
bottom:4%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
.glBut{
|
||||||
|
width: 90px;
|
||||||
|
height: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: rgba(24, 133, 234, 0.2);
|
||||||
|
color: #1b7cc4;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.custom-table {
|
.custom-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -134,20 +293,92 @@ export default {
|
|||||||
/*justify-content: center; !* 水平居中子元素 *!*/
|
/*justify-content: center; !* 水平居中子元素 *!*/
|
||||||
/*align-items: center; !* 垂直居中子元素 *!*/
|
/*align-items: center; !* 垂直居中子元素 *!*/
|
||||||
|
|
||||||
|
/*.list{*/
|
||||||
|
/* width: 95%;*/
|
||||||
|
/* height: 84%;*/
|
||||||
|
/* margin-left: 2.5%;*/
|
||||||
|
/* overflow-y: auto;*/
|
||||||
|
/* overflow-y: scroll;*/
|
||||||
|
/* overflow-x: hidden;*/
|
||||||
|
/* border: none;*/
|
||||||
|
/*}*/
|
||||||
|
/*.list::-webkit-scrollbar {*/
|
||||||
|
/* width: 0px; !* 隐藏滚动条 *!*/
|
||||||
|
/* height: 0px;*/
|
||||||
|
/* background-color: transparent; !* 让背景透明 *!*/
|
||||||
|
|
||||||
|
/*}*/
|
||||||
.list{
|
.list{
|
||||||
|
display:flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 84%;
|
height: 84%;
|
||||||
margin-left: 2.5%;
|
margin-left: 2.5%;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
|
||||||
.list::-webkit-scrollbar {
|
|
||||||
width: 0px; /* 隐藏滚动条 */
|
|
||||||
height: 0px;
|
|
||||||
background-color: transparent; /* 让背景透明 */
|
|
||||||
|
|
||||||
|
.single:hover{
|
||||||
|
border: 1px solid #159dd3;
|
||||||
|
}
|
||||||
|
.single{
|
||||||
|
width: 32%;
|
||||||
|
height: 25.5%;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(186, 208, 241, 0.10);
|
||||||
|
background: rgba(25, 33, 61, 0.40);
|
||||||
|
margin-left: 1.2%;
|
||||||
|
margin-bottom: 0.9%;
|
||||||
|
padding: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
.title{
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 10px 0 10px 0;
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
flex-grow: 1;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
border: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.small {
|
||||||
|
flex-basis: 33.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.large {
|
||||||
|
flex-basis: 66.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttons{
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.glBut{
|
||||||
|
width: 80px;
|
||||||
|
height: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
// margin-left: 2%;
|
||||||
|
background-color: rgba(14, 61, 138, 0.50);
|
||||||
|
color: #02DDEA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/* 隐藏火狐浏览器滚动条 */
|
/* 隐藏火狐浏览器滚动条 */
|
||||||
@-moz-document url-prefix() {
|
@-moz-document url-prefix() {
|
||||||
|
|||||||
@@ -1,18 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="target-select">
|
<div class="target-select">
|
||||||
<span style="font-size: 14px;float: left;padding-top: 1%">系统介绍页面</span>
|
<span style="font-size: 24px;float: left;padding-top: 1%">能力指代不同渗透策略,代理将根据策略逻辑以及主控端下发的生成参数生成对应的载荷</span>
|
||||||
</div>
|
|
||||||
<div class="input">
|
|
||||||
<el-input v-model="country_name" placeholder="查询" suffix icon="">
|
|
||||||
<template v-slot:suffix>
|
|
||||||
<div class="icon-group">
|
|
||||||
<img src="../../../img/inputl.png" alt="**">
|
|
||||||
<img src="../../../img/inputIcon.png" alt="*" @click="query">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="input">-->
|
||||||
|
<!-- <el-input v-model="country_name" placeholder="查询" suffix icon="">-->
|
||||||
|
<!-- <template v-slot:suffix>-->
|
||||||
|
<!-- <div class="icon-group">-->
|
||||||
|
<!-- <img src="../../../img/inputl.png" alt="**">-->
|
||||||
|
<!-- <img src="../../../img/inputIcon.png" alt="*" @click="query">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </template>-->
|
||||||
|
<!-- </el-input>-->
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,136 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="range-config-manage" ref="appRef">
|
|
||||||
<div class="show">
|
|
||||||
<Header
|
|
||||||
></Header>
|
|
||||||
<div class="list" >
|
|
||||||
<el-table
|
|
||||||
class="custom-table"
|
|
||||||
ref="multipleTable"
|
|
||||||
v-loading="loading"
|
|
||||||
element-loading-text="加载中..."
|
|
||||||
height="100%"
|
|
||||||
style="width: 100%;"
|
|
||||||
:data="tableData"
|
|
||||||
tooltip-effect="dark"
|
|
||||||
highlight-current-row
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
type="index"
|
|
||||||
label="序号"
|
|
||||||
width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="username"
|
|
||||||
label="名称"
|
|
||||||
min-width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
prop="role_name"
|
|
||||||
label="角色"
|
|
||||||
min-width="150"/>
|
|
||||||
<el-table-column
|
|
||||||
align="center"
|
|
||||||
label="操作"
|
|
||||||
min-width="200"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" size="small" :loading="scope.row.delLoading" >详情</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"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
<div class="mask"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Header from './module/Header.vue'
|
|
||||||
export default {
|
|
||||||
name: "RangeConfigManage",
|
|
||||||
components:{ Header },
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
created() {
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</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%，高度自适应保持宽高比 */
|
|
||||||
|
|
||||||
.list{
|
|
||||||
width: 95%;
|
|
||||||
height: 84%;
|
|
||||||
margin-left: 2.5%;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.list::-webkit-scrollbar {
|
|
||||||
width: 0px; /* 隐藏滚动条 */
|
|
||||||
height: 0px;
|
|
||||||
background-color: transparent; /* 让背景透明 */
|
|
||||||
|
|
||||||
}
|
|
||||||
/* 隐藏火狐浏览器滚动条 */
|
|
||||||
@-moz-document url-prefix() {
|
|
||||||
.trackSource {
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 遮罩层
|
|
||||||
.mask{
|
|
||||||
position: fixed; /*将元素设置为固定定位*/
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: rgba(0,0,0,0.5); /*通过rgba函数来控制遮罩层的透明度*/
|
|
||||||
display: none; /*将元素隐藏*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="head">
|
|
||||||
<div class="target-select">
|
|
||||||
<span style="font-size: 14px;float: left;padding-top: 1%">系统管理页面</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input">
|
|
||||||
<el-input v-model="username" placeholder="名称查询输入" suffix icon="" >
|
|
||||||
<template v-slot:suffix>
|
|
||||||
<div class="icon-group">
|
|
||||||
<img src="../../../img/inputl.png" alt="**">
|
|
||||||
<img src="../../../img/inputIcon.png" alt="*" @click="query">
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Header',
|
|
||||||
props: [],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
username: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
methods: {
|
|
||||||
// 新增
|
|
||||||
addUser() {
|
|
||||||
this.$emit('addUser')
|
|
||||||
},
|
|
||||||
// 查询
|
|
||||||
query() {
|
|
||||||
let params = {}
|
|
||||||
if (this.username !== '') {
|
|
||||||
params.username = this.username
|
|
||||||
}
|
|
||||||
this.$emit('query', params)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.head{
|
|
||||||
width: 95%;
|
|
||||||
height: 7%;
|
|
||||||
margin-top: 1%;
|
|
||||||
margin-left: 2.5%;
|
|
||||||
text-align: right;
|
|
||||||
.target-select{
|
|
||||||
font-size: 10px;
|
|
||||||
float: left;
|
|
||||||
margin-top: 0.5%;
|
|
||||||
display: inline-block;
|
|
||||||
height: 60%;
|
|
||||||
width: 10%;
|
|
||||||
margin-left: 0.5%;
|
|
||||||
}
|
|
||||||
.add-btn {
|
|
||||||
height: 70%;
|
|
||||||
width: 10%;
|
|
||||||
margin-right: 2%;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -4,6 +4,9 @@
|
|||||||
<Header
|
<Header
|
||||||
@addRole="addRole"
|
@addRole="addRole"
|
||||||
></Header>
|
></Header>
|
||||||
|
<div>
|
||||||
|
<span style="font-size: 20px;margin-bottom: 1%;margin-top: 0.5%;float: left;margin-left: 3%;color: #00C0FF">至少需要一个代理才能创建任务,每个代理同时只执行一项任务</span>
|
||||||
|
</div>
|
||||||
<div class="list" >
|
<div class="list" >
|
||||||
<el-table
|
<el-table
|
||||||
class="custom-table"
|
class="custom-table"
|
||||||
@@ -23,31 +26,38 @@
|
|||||||
width="150"/>
|
width="150"/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
prop="role_name"
|
prop="id"
|
||||||
label="角色"
|
label="任务编号"
|
||||||
width="200"/>
|
width="280"/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
prop="permissions"
|
prop="agent"
|
||||||
label="权限"
|
label="执行代理编号"
|
||||||
|
width="280"/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="status"
|
||||||
|
label="当前状态"
|
||||||
min-width="150">
|
min-width="150">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div class="permission-btn" v-for="permission in scope.row.permissions" :key="scope.row.id + '' + permission.id">
|
<el-tag type="info" v-if="scope.row.status==='stop'">暂停</el-tag>
|
||||||
<span v-loading="permission.delLoading">
|
<el-tag type="warning" v-if="scope.row.status==='working'">执行中</el-tag>
|
||||||
{{ permission.permission_name }}
|
<el-tag type="danger" v-if="scope.row.status==='finish'">已完成</el-tag>
|
||||||
</span>
|
|
||||||
<svg-icon icon-class="closeBtn" @click="delPermission(permission, scope.row.id)"></svg-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="create_time"
|
||||||
|
label="创建时间"
|
||||||
|
width="280"/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="操作"
|
label="操作"
|
||||||
width="200"
|
width="250"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button type="text" size="medium" @click="edit(scope.row)">修改权限</el-button>
|
<el-button type="text" size="medium" @click="taskInfo(scope.row)">详情</el-button>
|
||||||
<el-button type="text" size="small" :loading="scope.row.delLoading" @click="del(scope.row)">删除</el-button>
|
<el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -56,7 +66,7 @@
|
|||||||
background
|
background
|
||||||
:current-page="page"
|
:current-page="page"
|
||||||
:page-sizes="[10, 20, 30, 40]"
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
:page-size="10"
|
:page-size="20"
|
||||||
:total="total"
|
:total="total"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@@ -83,7 +93,7 @@ export default {
|
|||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10,
|
size: 20,
|
||||||
total: 0,
|
total: 0,
|
||||||
isAdd: false,
|
isAdd: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -97,25 +107,22 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
created() {
|
created() {
|
||||||
this.getPermissionDict()
|
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
init(params={}) {
|
init(params={}) {
|
||||||
// this.tableData = getTargetsResponse?.result?.items
|
|
||||||
// this.total = getTargetsResponse?.result?.total
|
|
||||||
|
|
||||||
// TODO: 暂时注释接口
|
// TODO: 暂时注释接口
|
||||||
const reqParams = {
|
const reqParams = {
|
||||||
page: this.page,
|
"page": this.page,
|
||||||
size: this.size,
|
"per_page": this.size,
|
||||||
...params
|
...params
|
||||||
}
|
}
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.get(this.$http.api.getRoleList, reqParams).then(res => {
|
this.$axios.get(this.$http.api.taskList, reqParams).then(res => {
|
||||||
if (res.code == 200 || res.code == "OK") {
|
// if (res.code == 200 || res.code == "OK") {
|
||||||
this.total = res?.result?.total
|
// this.total = res?.data?.total
|
||||||
this.tableData = res?.result?.items
|
this.total = 100
|
||||||
|
this.tableData = res?.data
|
||||||
this.tableData.map(item => {
|
this.tableData.map(item => {
|
||||||
item.permissions.map(permi => {
|
item.permissions.map(permi => {
|
||||||
this.$set(permi, 'delLoading', false)
|
this.$set(permi, 'delLoading', false)
|
||||||
@@ -123,7 +130,7 @@ export default {
|
|||||||
})
|
})
|
||||||
return item
|
return item
|
||||||
})
|
})
|
||||||
}
|
// }
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
@@ -136,7 +143,7 @@ export default {
|
|||||||
// 打开添加角色dialog
|
// 打开添加角色dialog
|
||||||
addRole() {
|
addRole() {
|
||||||
this.isAdd = true
|
this.isAdd = true
|
||||||
this.$refs.userForm.title = '新增角色'
|
// this.$refs.userForm.title = '新增角色'
|
||||||
document.querySelector('.mask').style.display = 'block'
|
document.querySelector('.mask').style.display = 'block'
|
||||||
this.$refs.userForm.visible = true
|
this.$refs.userForm.visible = true
|
||||||
},
|
},
|
||||||
@@ -160,18 +167,18 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 删除
|
// 删除
|
||||||
del(row) {
|
del(id) {
|
||||||
this.$confirm('此操作将永久删除该角色, 是否继续?', '确认删除', {
|
let data={
|
||||||
confirmButtonText: '确认删除',
|
"id":id,
|
||||||
cancelButtonText: '取消',
|
}
|
||||||
type: 'info'
|
this.$axios.post(this.$http.api.taskDel,data).then(res=>{
|
||||||
}).then(() => {
|
if(res.code===200){
|
||||||
this.delUser(row)
|
this.$message.success(res.msg)
|
||||||
}).catch(() => {
|
}else {
|
||||||
this.$notify({
|
this.$message.error(res.msg)
|
||||||
type: 'info',
|
}
|
||||||
message: '已取消删除'
|
}).catch(err=>{
|
||||||
})
|
console.log(err)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
delUser(row) {
|
delUser(row) {
|
||||||
@@ -192,16 +199,9 @@ export default {
|
|||||||
row.delLoading = false
|
row.delLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 修改
|
// 详情
|
||||||
edit(row) {
|
taskInfo(val) {
|
||||||
this.isAdd = false
|
this.$router.push({ path: 'menuTaskInfo', query: { row: val } });
|
||||||
this.$refs.userForm.title = '修改权限'
|
|
||||||
this.$refs.userForm.role_id = row.id
|
|
||||||
this.$refs.userForm.form.role_name = row.role_name
|
|
||||||
this.$refs.userForm.form.permissions = row.permissions.map(permission => permission.id)
|
|
||||||
this.getPermissionDict()
|
|
||||||
document.querySelector('.mask').style.display = 'block'
|
|
||||||
this.$refs.userForm.visible = true
|
|
||||||
},
|
},
|
||||||
// 获取权限字典
|
// 获取权限字典
|
||||||
getPermissionDict() {
|
getPermissionDict() {
|
||||||
@@ -241,6 +241,110 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='less' scoped="scoped">
|
<style lang='less' scoped="scoped">
|
||||||
|
.popup{
|
||||||
|
z-index: 997;
|
||||||
|
width: 40%;
|
||||||
|
height: 70%;
|
||||||
|
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%，高度自适应保持宽高比 */
|
||||||
|
.tag{
|
||||||
|
margin-left: 9%;
|
||||||
|
.tags{
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-top: 2%;
|
||||||
|
font-size: 23px;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #565e6e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jbpz{
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 23%;
|
||||||
|
height: 100%;
|
||||||
|
position:relative;
|
||||||
|
.project{
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3%;
|
||||||
|
text-align: center;
|
||||||
|
padding-right: 10%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.tar{
|
||||||
|
display: flex;
|
||||||
|
margin-left: 23%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
::v-deep .el-upload-list {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 300px !important;
|
||||||
|
padding-left: 20%;
|
||||||
|
}
|
||||||
|
.uploadBgImg{
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
background-image: url("../../img/shangchuan.png");
|
||||||
|
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
||||||
|
background-size: 100% auto; /* 宽度为100%，高度自适应保持宽高比 */
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10%;
|
||||||
|
padding-top: 2%;
|
||||||
|
font-size:0;
|
||||||
|
color: rgba(81, 84, 102, 0.84);
|
||||||
|
}
|
||||||
|
.uploadBgImg::file-selector-button{
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.srkType{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: center;
|
||||||
|
.srk{
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 2%;
|
||||||
|
background-color: #0c295b;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radioType{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
margin-top: 2%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.anType{
|
||||||
|
height: 10%;
|
||||||
|
position:absolute;
|
||||||
|
bottom:4%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
.glBut{
|
||||||
|
width: 90px;
|
||||||
|
height: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: rgba(24, 133, 234, 0.2);
|
||||||
|
color: #1b7cc4;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.custom-table {
|
.custom-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -280,7 +384,7 @@ export default {
|
|||||||
|
|
||||||
.list{
|
.list{
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 84%;
|
height: 77%;
|
||||||
margin-left: 2.5%;
|
margin-left: 2.5%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="target-select">
|
<div class="target-select">
|
||||||
<span style="font-size: 14px;float: left;padding-top: 1%">角色列表</span>
|
<span style="font-size: 30px;float: left;padding-top: 1%">任务列表</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="add-btn" src="../../../img/btn/addRoleBtn.svg" @click="addRole">
|
<!-- <img class="add-btn" src="../../../img/btn/addRoleBtn.svg" @click="addRole">-->
|
||||||
|
<el-row>
|
||||||
|
<el-button type="primary" plain @click="addRole">新增任务</el-button>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,8 @@
|
|||||||
class="user-dialog"
|
class="user-dialog"
|
||||||
v-if="visible"
|
v-if="visible"
|
||||||
>
|
>
|
||||||
<span class="dialog-title">{{ title }}</span>
|
<!-- <span class="dialog-title">{{ title }}</span>-->
|
||||||
|
<span class="dialog-title">任务创建</span>
|
||||||
<!-- 在此处指定弹窗的样式和内容 -->
|
<!-- 在此处指定弹窗的样式和内容 -->
|
||||||
<i class="el-icon-close" style="float: right; padding-right: 8%;padding-top: 3%" @click="close"></i>
|
<i class="el-icon-close" style="float: right; padding-right: 8%;padding-top: 3%" @click="close"></i>
|
||||||
<el-form
|
<el-form
|
||||||
@@ -13,29 +14,81 @@
|
|||||||
label-width="150px"
|
label-width="150px"
|
||||||
class="user-form"
|
class="user-form"
|
||||||
>
|
>
|
||||||
<el-row>
|
<el-row style="margin-left: 25%;margin-top: 8%">
|
||||||
<el-col :span="20">
|
<el-col :span="15">
|
||||||
<el-form-item label="角色名称" prop="role_name">
|
<el-form-item label="任务名称" prop="name">
|
||||||
<el-input v-model="form.role_name" :disabled="!isAdd" placeholder="请输入名称"></el-input>
|
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
<el-form-item label="任务目标" prop="ip">
|
||||||
</el-row>
|
<div style="display: flex;margin-right: 5px;">
|
||||||
<el-row>
|
<el-input v-model="form.ip" placeholder="请输入目标IP"></el-input>
|
||||||
<el-col :span="20">
|
<el-button type="primary" style="margin-left: 1%" @click="getTagsByIP(form.ip),agencyLabel=true">确认</el-button>
|
||||||
<el-form-item label="权限" prop="permissions">
|
</div>
|
||||||
<el-checkbox-group v-model="form.permissions" style="display: inline-block;">
|
|
||||||
<el-checkbox v-for="permission in permissionDict" :label="permission.value" :key="permission.value">
|
|
||||||
{{ permission.label }}
|
|
||||||
</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="目标信息" prop="role_id" v-if="agencyLabel && roleDict.length>0">
|
||||||
|
<el-tag class="el-tag_en" v-for="i in this.roleDict" style="margin-right: 1%">{{i}}</el-tag>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="执行代理" prop="agencyChange">
|
||||||
|
<el-select v-model="form.agencyChange" placeholder="代理选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in agencyChange"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="目标域名" prop="domain">
|
||||||
|
<el-input v-model="form.domain" placeholder="www.google.com"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="期望注入记录" prop="inject">
|
||||||
|
<el-input v-model="form.inject" placeholder="域名记录类型+域名记录"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="期望策略" prop="strategy">
|
||||||
|
<el-select v-model="form.strategy" placeholder="自动选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in strategy"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider content-position="center">附加选项</el-divider>
|
||||||
|
<el-form-item label="状态感知方式" prop="stateAwareMode">
|
||||||
|
<el-select v-model="form.stateAwareMode" placeholder="自动选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in stateAwareMode"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="策略切换时间" prop="switchoverTime">
|
||||||
|
<el-input v-model="form.switchoverTime" placeholder="单位：分钟"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="任务执行时限" prop="executeTime">
|
||||||
|
<el-input v-model="form.executeTime" placeholder="单位：分钟"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="运行配置" prop="operationalConfiguration">
|
||||||
|
<el-select v-model="form.operationalConfiguration" placeholder="运行配置选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in operationalConfiguration"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="submit-footer">
|
<div class="submit-footer" style="margin-top: 1%">
|
||||||
<div>
|
<div>
|
||||||
<el-button class="glBut" type="primary" @click="resetForm">重置</el-button>
|
<el-button class="glBut" type="primary" @click="resetForm">重置</el-button>
|
||||||
<el-button class="glBut but-color" type="primary" @click="submit" :loading="loading">{{isAdd ? '提交' : '确定'}}</el-button>
|
<el-button class="glBut but-color" type="primary" @click="submit" :loading="loading">确认创建</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -44,43 +97,108 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'UserForm',
|
name: 'UserForm',
|
||||||
props: ['isAdd', 'permissionDict'],
|
// props: ['isAdd', 'permissionDict'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
agencyLabel:false,
|
||||||
visible: false,
|
visible: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
title: '新增角色',
|
title: '任务创建',
|
||||||
form: {
|
form: {
|
||||||
role_name: '', // 角色名称
|
name:"", //代理名称
|
||||||
permissions: [] // 选中权限
|
ip:"", //任务目标
|
||||||
|
agencyChange:"", //执行代理
|
||||||
|
domain:"", //目标域名
|
||||||
|
inject:"", //期望注入记录
|
||||||
|
strategy:"",//策略
|
||||||
|
stateAwareMode:"",//状态感知方式
|
||||||
|
switchoverTime:"", //策略切换时限
|
||||||
|
executeTime:"", //任务执行时限
|
||||||
|
operationalConfiguration:"",//运行配置
|
||||||
},
|
},
|
||||||
role_id: '',
|
role_id: '',
|
||||||
rules: {
|
rules: {
|
||||||
role_name: [
|
name: [
|
||||||
{ required: true, message: '请输入角色名称', trigger: 'blur' }
|
// { required: true, message: '请输入任务名称', trigger: 'blur' },
|
||||||
|
{ message: '请输入任务名称', trigger: 'blur' },
|
||||||
|
{ max: 50, message: '任务名称长度不能超过50个字符', trigger: 'blur' }
|
||||||
],
|
],
|
||||||
permissions: [
|
permissions: [
|
||||||
{ required: true, message: '请选择权限', trigger: 'change' }
|
{ required: true, message: '请选择权限', trigger: 'change' }
|
||||||
|
],
|
||||||
|
|
||||||
|
},
|
||||||
|
roleDict:[],
|
||||||
|
strategy:[
|
||||||
|
{ value: 'auto', label: '自动选择', type: 'success' },
|
||||||
|
{ value: 'ddos', label: '拒绝服务', type: 'warning' },
|
||||||
|
{ value: 'sjqp', label: '数据欺骗', type: 'warning' },
|
||||||
|
],
|
||||||
|
agencyChange:[
|
||||||
|
{ value: '中国北京', label: '中国北京', type: 'success' },
|
||||||
|
{ value: '美国纽约', label: '美国纽约', type: 'warning' },
|
||||||
|
],
|
||||||
|
stateAwareMode:[
|
||||||
|
{ value: 'auto', label: '自动选择', type: 'success' },
|
||||||
|
{ value: 'tcp', label: 'TCP时延', type: 'warning' },
|
||||||
|
{ value: 'icmp', label: 'ICMP/v6', type: 'danger' },
|
||||||
|
{ value: 'dns', label: 'DNS解析时延', type: 'danger' },
|
||||||
|
{ value: 'record', label: '记录正确性验证', type: 'danger' },
|
||||||
|
],
|
||||||
|
operationalConfiguration:[
|
||||||
|
{ value: 'now', label: '立刻执行', type: 'success' },
|
||||||
|
{ value: 'man', label: '手动执行', type: 'warning' },
|
||||||
]
|
]
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getTagsByIP(val){
|
||||||
|
let data={
|
||||||
|
"ip":val?val:'1.1.1.1'
|
||||||
|
}
|
||||||
|
this.$axios.get(this.$http.api.targetQueryList,data).then(res=>{
|
||||||
|
if(res.code===200){
|
||||||
|
this.roleDict=res?.data[0]?.protect
|
||||||
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
close() {
|
close() {
|
||||||
this.resetForm()
|
this.resetForm()
|
||||||
document.querySelector('.mask').style.display = 'none'
|
document.querySelector('.mask').style.display = 'none'
|
||||||
this.visible = false
|
this.visible = false
|
||||||
},
|
},
|
||||||
submit() {
|
submit() {
|
||||||
this.$refs.userForm.validate((valid) => {
|
let data={
|
||||||
if (valid) {
|
"target":this.form.domain,
|
||||||
if (this.isAdd) {
|
"agent":this.form.agencyChange,
|
||||||
this.add()
|
"name":this.form.name,
|
||||||
|
"target_domain":"",
|
||||||
|
"target_rr":this.form.inject,
|
||||||
|
"policy_time":this.form.switchoverTime,
|
||||||
|
"run_time":this.form.executeTime,
|
||||||
|
"run_flag":this.form.operationalConfiguration,
|
||||||
|
"policy":this.form.strategy,
|
||||||
|
"scan":this.form.stateAwareMode,
|
||||||
|
}
|
||||||
|
console.log("EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE")
|
||||||
|
console.log(data)
|
||||||
|
console.log("EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE")
|
||||||
|
this.$axios.post(this.$http.api.taskCreate,data).then(res=>{
|
||||||
|
if(res.code===200){
|
||||||
|
this.$message.success('任务创建成功!')
|
||||||
}else {
|
}else {
|
||||||
this.edit()
|
this.$message.error(res.msg)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
add () {
|
add () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
@@ -123,9 +241,19 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
resetForm() {
|
resetForm() {
|
||||||
|
this.agencyLabel=false,
|
||||||
|
this.roleDict=[],
|
||||||
this.form = {
|
this.form = {
|
||||||
role_name: '', // 角色名称
|
name:"", //代理名称
|
||||||
permissions: [] // 选中权限
|
ip:"", //任务目标
|
||||||
|
agencyChange:"", //执行代理
|
||||||
|
domain:"", //目标域名
|
||||||
|
inject:"", //期望注入记录
|
||||||
|
strategy:"",//策略
|
||||||
|
stateAwareMode:"",//状态感知方式
|
||||||
|
switchoverTime:"", //策略切换时限
|
||||||
|
executeTime:"", //任务执行时限
|
||||||
|
operationalConfiguration:"",//运行配置
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -134,19 +262,20 @@ export default {
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.user-dialog{
|
.user-dialog{
|
||||||
width: 520px;
|
width: 963px;
|
||||||
height: 363px;
|
height: 863px;
|
||||||
position: absolute; /* 绝对定位 */
|
position: absolute; /* 绝对定位 */
|
||||||
top: 50%; /* 向下偏移50% */
|
top: 50%; /* 向下偏移50% */
|
||||||
left: 50%; /* 向右偏移50% */
|
left: 50%; /* 向右偏移50% */
|
||||||
transform: translate(-50%, -50%); /* 回移50% */
|
transform: translate(-50%, -50%); /* 回移50% */
|
||||||
background-image:url('../../../img/background/dialog520-363.svg');
|
/*background-image:url('../../../img/background/dialog520-363.svg');*/
|
||||||
|
background-image:url('../../../img/tjpz.svg');
|
||||||
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
background-repeat: no-repeat; /* 可选，防止图像重复 */
|
||||||
background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
|
background-size: 100% 100%; /* 宽度为100%，高度自适应保持宽高比 */
|
||||||
.dialog-title {
|
.dialog-title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 11px 0 11px 20px;
|
margin: 11px 0 11px 35px;
|
||||||
}
|
}
|
||||||
.user-form {
|
.user-form {
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
|
|||||||
Reference in New Issue
Block a user