summaryrefslogtreecommitdiff
path: root/src/views/menuMBZTGZ/module
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/menuMBZTGZ/module')
-rw-r--r--src/views/menuMBZTGZ/module/node.vue321
-rw-r--r--src/views/menuMBZTGZ/module/source.vue6
-rw-r--r--src/views/menuMBZTGZ/module/target.vue210
3 files changed, 53 insertions, 484 deletions
diff --git a/src/views/menuMBZTGZ/module/node.vue b/src/views/menuMBZTGZ/module/node.vue
index c887413..f0fc4ec 100644
--- a/src/views/menuMBZTGZ/module/node.vue
+++ b/src/views/menuMBZTGZ/module/node.vue
@@ -4,7 +4,7 @@
<div class="list" >
<el-table class="custom-table"
ref="multipleTable"
- :data="tableData"
+ :data="nodes"
height="100%"
style="width: 100%;"
tooltip-effect="dark"
@@ -16,42 +16,39 @@
</template>
</el-table-column>
<el-table-column align="center"
- prop="time"
- label="时间"
+ prop="Id"
+ label="ID"
min-width="100">
</el-table-column>
<el-table-column align="center"
- prop="level"
- label="日志级别"
+ prop="Ip"
+ label="IP地址"
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="用户账号"
+ prop="Name"
+ label="节点名称"
min-width="100">
</el-table-column>
<el-table-column align="center"
- prop="ip"
- label="用户IP"
+ prop="Loc"
+ label="节点位置"
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>-->
+ <!-- <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>
</template>
@@ -64,285 +61,27 @@ export default {
name: 'NodeView',
data() {
return {
- tableData:[],
- total:0,
- page:1,
- size:10,
- time1:'',
- time2:'',
- log_level:"",
- userAccount:"",
- 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'
- },
- ],
-
-
+ nodes:[]
}
},
+ props:['taskid'],
created() {
this.query()
},
- mounted(){
- // this.init()
- },
methods: {
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`);
- this.size=val
- this.query()
- },
- handleCurrentChange(val) {
- 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,
+ const reqParams = {
+ "taskid": this.taskid,
}
- // 使用 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=>{
+ this.loading = true
+ this.$axios.get(this.$http.api.targetNodes, reqParams).then(res => {
+ this.nodes = res.nodes
+ console.log("Node Page Nodes: ", this.nodes)
+ }).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) {
- // this.nodeDataX.push(key)
- // this.nodeDataY.push(this.nodeData[key])
- // }
- // }
- // }).catch(err => {
- // console.log(err)
- // }).finally(() => {
- // this.loading = false
- // })
- // },
- // 获取靶场列表字典
- // getRangeDict() {
- // const reqParams = {
- // page: 1,
- // size: 99,
- // }
- // return this.$axios.get(this.$http.api.getTargets, reqParams).then(res => {
- // if (res.code == 200 || res.code == "OK") {
- // this.rangeDict = res?.result?.items.map(item => {
- // return {
- // label: item.target_name,
- // value: item.id
- // }
- // })
- // }
- // }).catch(err => {
- // console.log(err)
- // }).finally(() => {
- // this.rangeDict.unshift({label: '全部靶场', value: ''})
- // this.target_id = this.rangeDict[0].value
- // this.target_name = this.rangeDict[0].label
- // })
- // },
- // 改变靶场
- // async changeRange(val) {
- // this.target_name = this.rangeDict.find(item => item.value === val)?.label
- // await this.initData()
- // this.refreshData()
- // },
- // 改变靶场状态
- // async changeRangeStatus() {
- // await this.initData()
- // this.refreshData()
- // },
- // 刷新图标数据
- // refreshData(){
- // if(!this.nodeChart){
- // return
- // }
- // //更新数据
- // var option = this.nodeChart.getOption()
- // option.title[0].text = `${this.target_name}节点统计`,
- // option.xAxis[0].data = this.nodeDataX
- // option.series[0].data = this.nodeDataY
- // this.nodeChart.setOption(option)
- // },
- // 切换靶场状态
- // tabClick(tab, event) {
- // this.changeRangeStatus()
- // },
- //初始化节点柱状图
- // initEcharts() {
- // var chartDom = document.getElementById('node');
- // this.nodeChart = echarts.init(chartDom);
- // var option;
- //
- // option = {
- // title: {
- // text: `${this.target_name}节点统计`,
- // left: 'center',
- // top: '15',
- // textStyle: {
- // color: '#FFFFFF',
- // fontSize: 16,
- // fontWeight: 500
- // }
- // },
- // tooltip: {
- // // trigger: 'axis',
- // axisPointer: {
- // // type: 'shadow'
- // }
- // },
- // grid: {
- // top: '25%',
- // left: '3%',
- // right: '4%',
- // bottom: '8%',
- // containLabel: true
- // },
- // xAxis: [
- // {
- // type: 'category',
- // data: this.nodeDataX,
- // axisTick: {
- // // alignWithLabel: true
- // show: false
- // },
- // axisLabel: {
- // fontSize: '14',
- // color: 'rgba(255, 255, 255, 0.7)'
- // }
- // }
- // ],
- // yAxis: [
- // {
- // type: 'value',
- // name: '靶场中各类节点数量',
- // nameTextStyle: {
- // color: 'rgba(255, 255, 255, 0.7)',
- // padding: [0, 0, 0, 70]
- // },
- // axisLabel: {
- // fontSize: '12',
- // color: 'rgba(255, 255, 255, 0.7)'
- // },
- // splitLine: {
- // show: true,
- // lineStyle: {
- // color: ['rgba(199, 199, 200, 0.1)'],
- // width: 1,
- // type: 'dashed'
- // }
- // }
- // }
- // ],
- // series: [
- // {
- // // name: 'Direct',
- // type: 'bar',
- // barWidth: '20%',
- // data: this.nodeDataY,
- // itemStyle: {
- // normal: {
- // label: {
- // show: true, // 是否显示
- // position: 'top', // 显示位置
- // color: '#FFFFFF',
- // formatter: function (params) {
- // // 核心部分 formatter 可以为字符串也可以是回调
- // if (parseInt(params.value) === 0) {
- // return '';
- // } else {
- // return params.data.label;
- // }
- // }
- // },
- // // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- // { offset: 0, color: '#3280D7' },
- // { offset: 1, color: '#4122E2' }
- // ])
- // }
- // }
- // }
- // ]
- // };
- // option && this.nodeChart.setOption(option);
- // }
}
}
</script>
diff --git a/src/views/menuMBZTGZ/module/source.vue b/src/views/menuMBZTGZ/module/source.vue
index 1ce7437..e6688bd 100644
--- a/src/views/menuMBZTGZ/module/source.vue
+++ b/src/views/menuMBZTGZ/module/source.vue
@@ -25,6 +25,7 @@ export default {
// required: true,
default: function() {
return {
+ taskid:'',
target:'',
type: '',
}
@@ -69,21 +70,24 @@ export default {
// this.getRangeDict()
},
methods: {
+ // 获取数据
querydelay(){
const reqParams = {
"target": this.left1data.target,
+ "taskid": this.left1data.taskid,
"type": this.left1data.type,
}
this.loading = true
this.$axios.get(this.$http.api.targetDelay, reqParams).then(res => {
if (res.code == 200) {
+ this.zhudouble.xdata = []
+ this.zhudouble.ydata1 = []
for (let i = 0; i <res.delay_data.length>10?10:res.delay_data.length ; i++) {
this.zhudouble.xdata.push(res.delay_data[i].Id);
this.zhudouble.ydata1.push(res.delay_data[i].CurrDelay);
}
}
this.$refs.zhudouble.bingfn(this.zhudouble)
-
}).catch(err => {
console.log(err)
}).finally(() => {
diff --git a/src/views/menuMBZTGZ/module/target.vue b/src/views/menuMBZTGZ/module/target.vue
index f304fdc..313ce07 100644
--- a/src/views/menuMBZTGZ/module/target.vue
+++ b/src/views/menuMBZTGZ/module/target.vue
@@ -1,30 +1,20 @@
<template>
<div class="source-card">
- <!-- <div class="source-chart" id="resource" v-loading="loading"></div>-->
- <ZhuZhuangTu_jbs :active="0" ref="zhudouble" :bing="zhudouble"></ZhuZhuangTu_jbs>
- <!-- <div class="tabs-container">-->
- <!-- <el-tabs v-model="activeName" @tab-click="tabClick">-->
- <!-- <el-tab-pane label="CPU" name="CPU"></el-tab-pane>-->
- <!-- <el-tab-pane label="MEMEORY" name="MEMEORY"></el-tab-pane>-->
- <!-- </el-tabs>-->
-
-
- <!-- </div>-->
+ <NodeWordMap :nodes="nodes"></NodeWordMap>
</div>
</template>
<script>
- import * as echarts from 'echarts';
- import ZhuZhuangTu_jbs from '../echarts/zhuzhuangtu_jbs'
+ import NodeWordMap from '../echarts/nodewordmap'
- import { getTargetsResponse } from './sourceMock.js'
export default {
+ name: 'TargetView',
props: {
left1data: {
type: Object,
- // required: true,
default: function() {
return {
+ taskid:'',
target:'',
type: '',
}
@@ -40,196 +30,32 @@
deep: true
}
},
- name: 'SourceView',
- components: {
- ZhuZhuangTu_jbs,
- },
+ components: { NodeWordMap },
data() {
return {
- loading: false,
- sourceData: {},
- sourceDataX: [],
- sourceDataY: [],
- cpuList: [],
- memoryList: [],
- activeName: 'CPU',
- sourceChart: null,
- rangeDict: [],
- zhudouble:{
- data:[
- ['延时', '节点'],
- ],
- },
+ nodes:[]
}
},
- created() {
- },
- mounted(){
- this.init()
- // this.getRangeDict()
- },
methods: {
- init() {
+ querydelay() {
const reqParams = {
- "target": this.left1data.target,
- "type": this.left1data.type,
+ "taskid": this.left1data.taskid,
}
- console.log("GGGGGGGGGGGGGGGGGGGG")
- console.log(reqParams)
- console.log("GGGGGGGGGGGGGGGGGGGG")
this.loading = true
- this.$axios.get(this.$http.api.targetDelay,reqParams).then(res => {
- if (res.code == 200) {
- for (let i = 0; i <res.delay_data.length>10?10:res.delay_data.length ; i++) {
- let A=[];
- A.push(res.delay_data[i].CurrDelay);
- A.push(res.delay_data[i].Id);
- this.zhudouble.data.push(A);
- }
- this.$refs.zhudouble.bingfn(this.zhudouble)
- }
+ this.$axios.get(this.$http.api.targetNodes, reqParams).then(res => {
+ this.nodes = res.nodes
+ // console.log("Nodes: ", this.nodes)
}).catch(err => {
console.log(err)
- }).finally(() => {
- this.loading = false
- this.initEcharts()
})
},
- initEcharts() {
- let that = this
- var chartDom = document.getElementById('resource');
- this.sourceChart = echarts.init(chartDom);
- var option;
-
- option = {
- title: {
- text: '靶场资源使用排序',
- left: '10',
- top: '15',
- textStyle: {
- color: '#FFFFFF',
- fontSize: 16,
- fontWeight: 500
- }
- },
- tooltip: {
- // trigger: 'axis',
- axisPointer: {
- // type: 'shadow'
- }
- },
- grid: {
- top: '25%',
- left: '3%',
- right: '4%',
- bottom: '8%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: this.sourceDataX,
- axisTick: {
- // alignWithLabel: true
- show: false
- },
- axisLabel: {
- fontSize: '14',
- color: 'rgba(255, 255, 255, 0.7)'
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- axisLabel: {
- fontSize: '12',
- color: 'rgba(255, 255, 255, 0.7)',
- formatter: function(value) {
- return value + ' (mcore)'
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: ['rgba(199, 199, 200, 0.1)'],
- width: 1,
- type: 'dashed'
- },
- }
- }
- ],
- series: [
- {
- // name: 'Direct',
- type: 'bar',
- barWidth: '20%',
- data: this.sourceDataY,
- itemStyle: {
- normal: {
- label: {
- show: true, // 是否显示
- position: 'top', // 显示位置
- color: '#FFFFFF',
- formatter: function (params) {
- // 核心部分 formatter 可以为字符串也可以是回调
- if (parseInt(params.value) === 0) {
- return '';
- } else {
- return params.data.label;
- }
- }
- },
- // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#01FFFF' },
- { offset: 1, color: '#2160B8' }
- ])
- }
- }
- }
- ]
- };
- option && this.sourceChart.setOption(option);
- //点击事件
- this.sourceChart.on('click', function(params) {
- const target_name = params.name
- const target_id = that.rangeDict.find(item => item.label === target_name)?.value
- that.$store.commit('globalAttrs/setCheckMenu', 'rangeConfigManage')
- that.$store.commit('range/setTargetId', target_id)
- });
- },
- // 刷新图标数据
- refreshData(data, tabName){
- if(!this.sourceChart){
- return
- }
- //更新数据
- var option = this.sourceChart.getOption()
- option.series[0].data = data
- option.yAxis[0].axisLabel.formatter = function(value) {
- if (tabName === 'MEMEORY') {
- return value + ' (Mi)'
- } else {
- return value + ' (mcore)'
- }
- }
- this.sourceChart.setOption(option)
- },
- tabClick(tab, event) {
- switch (tab.name) {
- case 'CPU':
- this.refreshData(this.cpuList, 'CPU')
- break;
- case 'MEMEORY':
- this.refreshData(this.memoryList, 'MEMEORY')
- break;
- default:
- this.refreshData(this.cpuList, 'CPU')
- break;
- }
- },
- }
+ },
+ created() {
+ },
+ mounted(){
+ this.querydelay()
+ console.log("**********target mounted")
+ },
}
</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-30 21:09:09 +0000