summaryrefslogtreecommitdiff
path: root/src/views/menuMBZTGZ
diff options
context:
space:
mode:
authorll <[email protected]>2024-07-11 20:41:37 +0800
committerll <[email protected]>2024-07-11 20:41:37 +0800
commitbafa736c04845e103d7e3747a8152b410d1628fb (patch)
tree032d00938963b7cb21ff5c57e4f08723b521ae41 /src/views/menuMBZTGZ
parentac8bc7f895baa346cdb498e1b8be41ce66130afd (diff)
Initial commitHEADmain
Diffstat (limited to 'src/views/menuMBZTGZ')
-rw-r--r--src/views/menuMBZTGZ/echarts/nodewordmap.vue75
-rw-r--r--src/views/menuMBZTGZ/echarts/zhuzhuangtu3.vue96
-rw-r--r--src/views/menuMBZTGZ/echarts/zhuzhuangtu_jbs.vue419
-rw-r--r--src/views/menuMBZTGZ/index.vue24
-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
7 files changed, 235 insertions, 916 deletions
diff --git a/src/views/menuMBZTGZ/echarts/nodewordmap.vue b/src/views/menuMBZTGZ/echarts/nodewordmap.vue
new file mode 100644
index 0000000..4225683
--- /dev/null
+++ b/src/views/menuMBZTGZ/echarts/nodewordmap.vue
@@ -0,0 +1,75 @@
+<template>
+ <div style="width: 100%;height: 100%;">
+ <div style="width: 100%;height: 10%"><span style="margin-top: 1%;font-size: 20px;margin-left: 2%;float: left">节点分布</span></div>
+ <div ref="worldmap" style="width: 100%;height: 90%"></div>
+ </div>
+</template>
+
+<script>
+ import * as echarts from 'echarts';
+
+ const worldJson = require("../../../api/world_v2.json")
+ export default {
+ name: "WorldMap",
+ props: {
+ nodes:{
+ type: Array,
+ },
+ },
+ watch: {
+ nodes: {
+ deep: true,
+ handler(val) {
+ console.log(val)
+ this.drawMap(val)
+ }
+ }
+ },
+ methods: {
+ // 调整节点信息格式
+ getInfo(){
+ return this.nodes.map(node => {
+ return [node.Lng, node.Lat]
+ })
+ },
+ // 绘制世界地图
+ drawMap(){
+ // 初始化myChart
+ var myChart = echarts.init(this.$refs.worldmap)
+ // 注册可用的地图
+ echarts.registerMap('world', worldJson)
+ var option = {
+ tooltip: {
+ show: true
+ },
+ geo: {
+ tooltip: {
+ show: true
+ },
+ map: 'world', // 使用registerMap注册的地图名称
+ roam: true, // 开启鼠标缩放和平移漫游
+ },
+ series: {
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ itemStyle: {
+ color: '#b02a02'
+ },
+ encode: {
+ tooltip: 2
+ },
+ data: this.getInfo()
+ }
+ }
+ myChart.setOption(option)
+ },
+ },
+ mounted(){
+ this.drawMap()
+ },
+ }
+
+</script>
+
+<style scoped="scoped">
+</style> \ No newline at end of file
diff --git a/src/views/menuMBZTGZ/echarts/zhuzhuangtu3.vue b/src/views/menuMBZTGZ/echarts/zhuzhuangtu3.vue
index 70862ed..b612c91 100644
--- a/src/views/menuMBZTGZ/echarts/zhuzhuangtu3.vue
+++ b/src/views/menuMBZTGZ/echarts/zhuzhuangtu3.vue
@@ -62,6 +62,100 @@
myChart1.clear()
myChart1.off('mouseover')
+
+ var option = {
+ // dataset: {
+ // source: data.xdata
+ // },
+ grid: {
+ left: '5%',
+ right: '5%',
+ bottom: '5%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: data.xdata,
+ // data: ["2024-1-1","2024-1-2","2024-1-3","2024-1-4","2024-1-5","2024-1-6","2024-1-7"],
+ axisLine:{
+ lineStyle:{
+ color:'#f6fbfd'
+ }
+ },
+ axisLabel:{
+ interval:0,
+ show: true
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ // 使用 formatter 函数设置内容和样式
+ formatter: function(params) {
+ var result = '<div style="text-align:left;">'; // 左对齐样式
+ result += params[0].name + '<br>'; // 添加横坐标名称
+
+ params.forEach(function(item) {
+ result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br>'; // 添加数据项
+ });
+
+ result += '</div>';
+ return result;
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '时延(ms)',
+ position: 'left', // 显示在左侧
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "rgb(255,16,18)",
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#f4f2fd'
+ }
+ }
+ },
+ ],
+ visualMap: {
+ orient: 'horizontal', // 组件布局方向
+ top: '1%',
+ right: '5%', // 组件位置
+ min:0,
+ max:800, // 映射数据范围
+ // text: ['High Score', 'Low Score'],
+ dimension: 1, // 映射数据的维度
+ inRange: {
+ color: ['#11da11', '#E15457']
+ }
+ },
+ series: [
+ {
+ name:'时延',
+ barWidth: 20, //柱子宽度
+ data:data.ydata1,
+ // data:[45,89,56,58,66,12,96],
+ color:["#2386bf"], //自定义颜色
+ type: 'bar',
+ label:{
+ show:true,
+ position:'top',
+ formatter:function (params) {
+ return params.value;
+ }
+ }
+
+ },
+ ],
+ }
+
+ /*
var option = {
animation:false, //动态展示
grid: {
@@ -87,6 +181,7 @@
interval:0,
show: true
}
+
},
tooltip: {
@@ -267,6 +362,7 @@
//
// ]
};
+ */
diff --git a/src/views/menuMBZTGZ/echarts/zhuzhuangtu_jbs.vue b/src/views/menuMBZTGZ/echarts/zhuzhuangtu_jbs.vue
deleted file mode 100644
index 5d1667f..0000000
--- a/src/views/menuMBZTGZ/echarts/zhuzhuangtu_jbs.vue
+++ /dev/null
@@ -1,419 +0,0 @@
-<template>
- <div style="width: 100%;height: 100%;">
- <div style="width: 100%;height: 10%"><span style="margin-top: 1%;font-size: 20px;margin-left: 2%;float: left">时延报警</span></div>
- <div ref="bingbox" style="width: 100%;height: 90%"></div>
- </div>
-</template>
-
-<script>
- import * as echarts from 'echarts';
- var myChart1=null
- export default {
- props:{
- bing:{
- type:Object,
- default: function() {
- return {
- data:[],
- // signdata: [],
- // title:"",
- // bingtype:'',
- // AreaName:[],
- }
- }
- },
- active:{
- type:Number,
- default: function() {
- return {
- active:""
- }
- }
- }
- },
- watch: {
- bing: {
- deep: true,
- handler(val) {
- console.log(val)
- this.bingfn(val)
- }
- },
- },
- data(){
- return {
-
- }
- },
- methods:{
- bingfn(data){
- console.log(data)
- let that = this
- //当前视口宽度
- let nowClientWidth = document.documentElement.clientWidth;
- // 换算方法
- let nowSize = function (val, initWidth = 1920) {
- return val * (nowClientWidth / initWidth);
- };
- if (myChart1 != null) {
- myChart1.clear()//销毁
- }
- myChart1= echarts.init(this.$refs.bingbox)
- myChart1.clear()
- myChart1.off('mouseover')
-
- // var option = {
- // animation:false, //动态展示
- // grid: {
- // left: '5%',
- // right: '5%',
- // bottom: '5%',
- // containLabel: true
- // },
- // xAxis: {
- // type: 'category',
- // data: data.xdata,
- // // data: ["2024-1-1","2024-1-2","2024-1-3","2024-1-4","2024-1-5","2024-1-6","2024-1-7"],
- // axisLine:{
- // lineStyle:{
- // color:'#f6fbfd'
- // }
- // },
- // axisLabel:{
- // interval:0,
- // show: true
- // }
- //
- // },
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // type: 'shadow'
- // },
- // // 使用 formatter 函数设置内容和样式
- // formatter: function(params) {
- // var result = '<div style="text-align:left;">'; // 左对齐样式
- // result += params[0].name + '<br>'; // 添加横坐标名称
- //
- // params.forEach(function(item) {
- // result += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br>'; // 添加数据项
- // });
- //
- // result += '</div>';
- // return result;
- // }
- // },
- // yAxis: [
- // {
- // type: 'value',
- // name: '分类统计(个)', // 水量单位
- // position: 'left', // 显示在左侧
- // splitLine: {
- // show: false,
- // lineStyle: {
- // color: "rgb(255,16,18)",
- // }
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#f4f2fd'
- // }
- // }
- // },
- // {
- // type: 'value',
- // name: '总量统计(个)', // 数量单位
- // position: 'right', // 显示在右侧
- // splitLine: {
- // show: false,
- // lineStyle: {
- // color: "rgb(255,16,18)",
- // }
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#f4be6a'
- // }
- // }
- // }
- // ],
- // series: [
- // {
- // name:'IPv6',
- // barWidth: 20, //柱子宽度
- // data:data.ydata1,
- // // data:[45,89,56,58,66,12,96],
- // color:["#2386bf"], //自定义颜色
- // type: 'bar',
- // label:{
- // show:true,
- // position:'top',
- // formatter:function (params) {
- // return params.value;
- // }
- // }
- //
- // },
- // {
- // name:'DNS',
- // barWidth: 20, //柱子宽度
- // data:data.ydata2,
- // // data:[450,890,560,580,660,155,85],
- // color:["#434ff4"], //自定义颜色
- // type: 'bar',
- // label:{
- // show:true,
- // position:'top',
- // formatter:function (params) {
- // return params.value;
- // }
- // }
- //
- // },
- // {
- // name:'DoT',
- // barWidth: 20, //柱子宽度
- // data:data.ydata3,
- // // data:[150,290,560,380,660,105,815],
- // color:["rgba(58,76,222,0.89)"], //自定义颜色
- // type: 'bar',
- // label:{
- // show:true,
- // position:'top',
- // formatter:function (params) {
- // return params.value;
- // }
- // }
- //
- // },
- // {
- // name:'DoH',
- // barWidth: 20, //柱子宽度
- // data:data.ydata4,
- // // data:[650,790,560,180,660,15,85],
- // color:["#117cf4"], //自定义颜色
- // type: 'bar',
- // label:{
- // show:true,
- // position:'top',
- // formatter:function (params) {
- // return params.value;
- // }
- // }
- //
- // }
- // ,
- // {
- // name:'总量',
- // barWidth: 20, //柱子宽度
- // data:data.ydata5,
- // // data:[1120,7090,5660,1800,6060,105,805],
- // color:["#f4be6a"], //自定义颜色
- // type: 'line',
- // yAxisIndex: 1,
- // label:{
- // show:true,
- // position:'top',
- // formatter:function (params) {
- // return params.value;
- // }
- // }
- //
- // }
- // ],
- // graphic: [
- // {
- // type:'group',
- // left:'center',
- // top:25,
- // children:[
- // {
- // type: 'rect',
- // shape: {
- // width: 20,
- // height: 20
- // },
- // style: {
- // fill: '#2386bf' // 设置第一个色块的颜色
- // },
- // z: 100
- // },
- // {
- // type: 'text',
- // left: 25,
- // style: {
- // text: 'IPv6', // 设置第一个色块的含义
- // fill: '#2386bf',
- // fontSize: 12
- // },
- // z: 100
- // },
- // ////////////////
- // {
- // type: 'rect',
- // left: 75,
- // shape: {
- // width: 20,
- // height: 20
- // },
- // style: {
- // fill: '#434ff4' // 设置第二个色块的颜色
- // },
- // z: 100
- // },
- // {
- // type: 'text',
- // left: 100,
- // style: {
- // text: 'DNS', // 设置第二个色块的含义
- // fill: '#434ff4',
- // fontSize: 12
- // },
- // z: 100
- // },
- // ///////////////
- // {
- // type: 'rect',
- // left:150 ,
- // shape: {
- // width: 20,
- // height: 20
- // },
- // style: {
- // fill: 'rgba(58,76,222,0.89)' // 设置第二个色块的颜色
- // },
- // z: 100
- // },
- // {
- // type: 'text',
- // left: 175,
- // style: {
- // text: 'DoT', // 设置第二个色块的含义
- // fill: 'rgba(58,76,222,0.89)',
- // fontSize: 12
- // },
- // z: 100
- // },
- // /////////////////////////////////
- // {
- // type: 'rect',
- // left: 225,
- // shape: {
- // width: 20,
- // height: 20
- // },
- // style: {
- // fill: '#117cf4' // 设置第二个色块的颜色
- // },
- // z: 100
- // },
- // {
- // type: 'text',
- // left: 250,
- // style: {
- // text: 'DoH', // 设置第二个色块的含义
- // fill: '#117cf4',
- // fontSize: 12
- // },
- // z: 100
- // },
- // // //////////////////////////////
- // // {
- // // type: 'rect',
- // // left: 300,
- // // shape: {
- // // width: 20,
- // // height: 20
- // // },
- // // style: {
- // // fill: '#f4be6a' // 设置第二个色块的颜色
- // // },
- // // z: 100
- // // },
- // // {
- // // type: 'text',
- // // left: 325,
- // // style: {
- // // text: '五线', // 设置第二个色块的含义
- // // fill: '#f4be6a',
- // // fontSize: 12
- // // },
- // // z: 100
- // // }
- // ]
- // }
- //
- // ]
- // };
-
- var option = {
- dataset: {
- source:data.data
- // source: [
- // ['延时', '节点'],
- // [89.3, 'Matcha Latte'],
- // [57.1, 'Milk Tea'],
- // [74.4, 'Cheese Cocoa'],
- // [50.1, 'Cheese Brownie'],
- // [89.7, 'Matcha Cocoa'],
- // [68.1, 'Tea'],
- // [19.6, 'Orange Juice'],
- // [10.6, 'Lemon Juice'],
- // [32.7, 'Walnut Brownie']
- // ]
- },
- grid: {containLabel: true},
- xAxis: {name: 'amount'},
- yAxis: {type: 'category'},
- visualMap: {
- orient: 'horizontal',
- left: 'center',
- min: 0,
- max: 50,
- text: ['High Score', 'Low Score'],
- // Map the score column to color
- dimension: 0,
- inRange: {
- color: ['#11da11', '#E15457']
- }
- },
- series: [
- {
- type: 'bar',
- encode: {
- // Map the "amount" column to X axis.
- x: 'score',
- // Map the "product" column to Y axis
- y: 'product'
- }
- }
- ]
- };
-
-
-
-
-
-
-
-
- myChart1.setOption(option,true)
- window.addEventListener("resize", () => {
- myChart1.resize();
- });
- }
- },
- beforeDestroy() {
- myChart1.clear()
- },
- destroyed() {
- myChart1.clear()
- },
- mounted(){
- // this.bingfn(this.bing)
- },
- }
-</script>
-
-<style scoped="scoped">
-</style>
diff --git a/src/views/menuMBZTGZ/index.vue b/src/views/menuMBZTGZ/index.vue
index fed0fda..9617be7 100644
--- a/src/views/menuMBZTGZ/index.vue
+++ b/src/views/menuMBZTGZ/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="home" ref="appRef">
<div class="show">
- <div><span style="float: left;font-size: 20px;margin-left: 2%;color: #00C0FF;margin-top: 1%">{{"目标IP:"+parentLevelRow.target}}</span></div>
+ <div><span style="float: left;font-size: 20px;margin-left: 2%;color: #00C0FF;margin-top: 1%">{{"目标IP: "+parentLevelRow.target}}</span></div>
<div class="tag">
<el-tag class="tags" :style="{'color': (tag==='目标时延') ? '#f8fdff': '#565e6e'}" @click="updateTag('目标时延')">目标时延:</el-tag>
<el-tag class="tags1" :style="{'color': (tag1==='ICMP/v6延时') ? '#f8fdff': '#565e6e'}" @click="updateTag1('ICMP/v6延时')">ICMP/v6延时</el-tag>
@@ -12,10 +12,9 @@
<div v-if="tag==='应答内容'" class="answer">
<div style="display: flex;margin-right: 5px;">
<span style="margin-right: 2%;font-size: 25px;width: 15%">目标域名:</span>
- <el-input v-model="input" placeholder="请输入目标IP"></el-input>
+ <el-input v-model="input" placeholder="请输入目标域名"></el-input>
</div>
<el-button type="primary" style="margin-top: 2%;margin-bottom: 10%">查询</el-button>
-
</div>
<div class="top" v-if="tag==='目标时延'">
<div class="top-left">
@@ -52,7 +51,7 @@
</div>
<!-- <TargetView class="top-right"/>-->
</div>
- <NodeView class="bottom" v-if="tag==='目标时延'"></NodeView>
+ <NodeView class="bottom" v-if="tag==='目标时延'" :taskid=parentLevelRow.id></NodeView>
</div>
</div>
</template>
@@ -62,21 +61,20 @@ import TargetView from './module/target.vue'
import ImageView from './module/image.vue'
import SourceView from './module/source.vue'
import NodeView from './module/node.vue'
+
export default {
- name: 'home',
+ name: 'menuMBZTGZ',
components: { TargetView, ImageView, SourceView, NodeView },
created() {
this.parentLevelRow = this.$route.query.row;
this.input=this.parentLevelRow.target_domain;
-
-
+ this.left1data.taskid = this.parentLevelRow.id;
+ this.left1data.target = this.parentLevelRow.target;
},
// mounted() {
// this.$router.push('/range/home')
// },
methods:{
-
-
updateTag(val){
if(val==='目标时延'){
this.tag=val
@@ -85,14 +83,13 @@ export default {
this.tag=val
this.tag1=""
}
-
},
updateTag1(val){
this.tag1=val;
this.tag='目标时延';
this.left1data.type=this.changePeram(val);
- this.left1data.target=this.parentLevelRow.target;
-
+ this.left1data.target=this.parentLevelRow.target; // 任务目标IP
+ this.left1data.taskid=this.parentLevelRow.id; // 任务id
},
changePeram(val){
switch (val) {
@@ -114,7 +111,8 @@ export default {
data() {
return {
left1data:{
- target:'1.1.1.1',
+ taskid:'',
+ target:'',
type:'icmp',
},
leftYdata:[],
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 23:57:17 +0000