CN-229 Cyptocurrency--挖矿事件统计新图表开发
CN-230 Cyptocurrency--矿机所属单位新图表开发
This commit is contained in:
hyx
@@ -11,7 +11,7 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
|
||||
'#73BFDE', '#3BA172', '#FC8452', '#9960B4',
|
||||
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
|
||||
'#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
|
||||
export const chartBarColor = [ '#0F8AB2', '#57CBAC']
|
||||
export const chartBarColor = ['#0F8AB2', '#57CBAC']
|
||||
export function getChartColor (index) {
|
||||
return chartColor[index % chartColor.length]
|
||||
}
|
||||
@@ -491,24 +491,24 @@ const categoryBar = {
|
||||
left: 10,
|
||||
right: 25,
|
||||
bottom: 20,
|
||||
containLabel:true
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false }
|
||||
},
|
||||
color:chartColor,
|
||||
color: chartColor,
|
||||
series: [{
|
||||
barWidth: 15,
|
||||
data: [],
|
||||
type: 'bar',
|
||||
label: { show: false},
|
||||
label: { show: false },
|
||||
barCategoryGap: '10%',
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
return getCharBartColor([params.dataIndex])
|
||||
},
|
||||
color: function (params) {
|
||||
return getCharBartColor([params.dataIndex])
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
@@ -532,10 +532,10 @@ const timeBar = {
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
//rotate: -40, //设置日期显示样式（倾斜度）
|
||||
formatter: function (value) {//在这里写你需要的时间格式
|
||||
var t_date = new Date(value);
|
||||
return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':');
|
||||
// rotate: -40, //设置日期显示样式（倾斜度）
|
||||
formatter: function (value) { // 在这里写你需要的时间格式
|
||||
const t_date = new Date(value)
|
||||
return [t_date.getMonth() + 1, t_date.getDate()].join('/') + ' ' + [t_date.getHours(), t_date.getMinutes()].join(':')
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -544,7 +544,7 @@ const timeBar = {
|
||||
left: 25,
|
||||
right: 25,
|
||||
bottom: 20,
|
||||
containLabel:true
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@@ -557,17 +557,17 @@ const timeBar = {
|
||||
},
|
||||
minInterval: 1
|
||||
},
|
||||
color:chartColor,
|
||||
color: chartColor,
|
||||
series: [{
|
||||
barWidth: 15,
|
||||
data: [],
|
||||
type: 'bar',
|
||||
label: { show: false},
|
||||
label: { show: false },
|
||||
barCategoryGap: '10%',
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
color: function (params) {
|
||||
return getCharBartColor([params.dataIndex])
|
||||
},
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
@@ -798,7 +798,7 @@ export function categoryHorizontalFormatter (params) {
|
||||
let str = '<div>'
|
||||
params.forEach((item, i) => {
|
||||
str += '<div class="cn-chart-tooltip-box">'
|
||||
str += item.data[1]+': ' + item.data[0]
|
||||
str += item.data[1] + ': ' + item.data[0]
|
||||
str += '</div>'
|
||||
})
|
||||
str += '</div>'
|
||||
@@ -808,7 +808,7 @@ export function categoryVerticalFormatter (params) {
|
||||
let str = '<div>'
|
||||
params.forEach((item, i) => {
|
||||
str += '<div class="cn-chart-tooltip-box">'
|
||||
str += item.data[0]+': ' + item.data[1]
|
||||
str += item.data[0] + ': ' + item.data[1]
|
||||
str += '</div>'
|
||||
})
|
||||
str += '</div>'
|
||||
|
||||
@@ -131,282 +131,282 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rightBoxMixin from '@/mixins/rightBox'
|
||||
import { get, post, put } from '@/utils/http'
|
||||
import { panelTypeAndRouteMapping } from '@/utils/constants'
|
||||
import { api } from '@/utils/api'
|
||||
import { VAceEditor } from 'vue3-ace-editor'
|
||||
import 'ace-builds/src-noconflict/mode-javascript'
|
||||
import 'ace-builds/src-noconflict/mode-json'
|
||||
import 'ace-builds/src-noconflict/theme-chrome'
|
||||
import rightBoxMixin from '@/mixins/rightBox'
|
||||
import { get, post, put } from '@/utils/http'
|
||||
import { panelTypeAndRouteMapping } from '@/utils/constants'
|
||||
import { api } from '@/utils/api'
|
||||
import { VAceEditor } from 'vue3-ace-editor'
|
||||
import 'ace-builds/src-noconflict/mode-javascript'
|
||||
import 'ace-builds/src-noconflict/mode-json'
|
||||
import 'ace-builds/src-noconflict/theme-chrome'
|
||||
|
||||
export default {
|
||||
name: 'ChartBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
loginName: localStorage.getItem('cn-username'),
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
chartData: [],
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'map-1',
|
||||
remark: '流量流向地图-连线'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'map-2',
|
||||
remark: '地图-色块'
|
||||
}, {
|
||||
value: 3,
|
||||
label: 'map-3',
|
||||
remark: '地图-点'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'map-4',
|
||||
remark: '地图-点'
|
||||
}, {
|
||||
value: 11,
|
||||
label: 'line-1',
|
||||
remark: '折线图-常规'
|
||||
},
|
||||
{
|
||||
value: 61,
|
||||
label: 'table-1',
|
||||
remark: '表格'
|
||||
}, {
|
||||
value: 62,
|
||||
label: 'table-2',
|
||||
remark: 'DNS记录'
|
||||
}, {
|
||||
value: 63,
|
||||
label: 'table-3',
|
||||
remark: '挖矿活跃ip'
|
||||
}, {
|
||||
value: 31,
|
||||
label: 'pie-1',
|
||||
remark: '饼图-带联动表格'
|
||||
}, {
|
||||
value: 51,
|
||||
label: 'singleValue-1',
|
||||
remark: '单值图'
|
||||
},
|
||||
{
|
||||
value: 91,
|
||||
label: 'tab-container',
|
||||
remark: 'tab标签(容器)'
|
||||
}, {
|
||||
value: 92,
|
||||
label: 'tab-item',
|
||||
remark: 'tab标签(标签页)'
|
||||
},
|
||||
{
|
||||
value: 93,
|
||||
label: 'title',
|
||||
remark: '标题'
|
||||
}, {
|
||||
value: 94,
|
||||
label: 'group',
|
||||
remark: '组'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: 'line-2',
|
||||
remark: '折线图-带统计'
|
||||
}, {
|
||||
value: 52,
|
||||
label: 'singleValue-2',
|
||||
remark: '详情单值图'
|
||||
},
|
||||
{
|
||||
value: 53,
|
||||
label: 'singleValue-3',
|
||||
remark: '单值图'
|
||||
}, {
|
||||
value: 13,
|
||||
label: 'line-3',
|
||||
remark: '折线图-堆叠面积'
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: 'bar-1',
|
||||
remark: '柱状图'
|
||||
}, {
|
||||
value: 22,
|
||||
label: 'bar-2',
|
||||
remark: '开放端口'
|
||||
}, {
|
||||
value: 23,
|
||||
label: 'bar-3',
|
||||
remark: '挖矿事件统计(time类型柱状图)'
|
||||
}, {
|
||||
value: 24,
|
||||
label: 'bar-4',
|
||||
remark: '矿机所属单位(category类型柱状图)'
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
label: 'pie-2',
|
||||
remark: '饼图-常规'
|
||||
}, {
|
||||
value: 33,
|
||||
label: 'pie-3',
|
||||
remark: '托管域名'
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
label: 'pie-4',
|
||||
remark: '相关域名'
|
||||
}, {
|
||||
value: 42,
|
||||
label: 'relation-2',
|
||||
remark: '关系图谱'
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
label: 'relation-3',
|
||||
remark: '访问链路图'
|
||||
},
|
||||
{
|
||||
value: 82,
|
||||
label: 'base-2',
|
||||
remark: 'APP基本信息'
|
||||
}, {
|
||||
value: 83,
|
||||
label: 'list-1',
|
||||
remark: 'Whois'
|
||||
},
|
||||
{
|
||||
value: 84,
|
||||
label: 'list-2',
|
||||
remark: 'DNS记录'
|
||||
},
|
||||
{
|
||||
value: 85,
|
||||
label: 'list-3',
|
||||
remark: '近期挖矿事件'
|
||||
}
|
||||
export default {
|
||||
name: 'ChartBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
loginName: localStorage.getItem('cn-username'),
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
mounted () {
|
||||
if (this.editObject.id) {
|
||||
this.getChartData(this.editObject.panelId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'editObject.panelId': function (newValue, oldValue) {
|
||||
this.editObject.pid = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser (username) {
|
||||
return localStorage.getItem('cn-username') === username
|
||||
},
|
||||
/* 密码失去焦点 检验确认密码 */
|
||||
pinBlur () {
|
||||
if (this.editObject.pin && this.editObject.pinChange) {
|
||||
this.$refs.chartForm.validateField('pinChange')
|
||||
rules2: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
chartData: [],
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'map-1',
|
||||
remark: '流量流向地图-连线'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'map-2',
|
||||
remark: '地图-色块'
|
||||
}, {
|
||||
value: 3,
|
||||
label: 'map-3',
|
||||
remark: '地图-点'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'map-4',
|
||||
remark: '地图-点'
|
||||
}, {
|
||||
value: 11,
|
||||
label: 'line-1',
|
||||
remark: '折线图-常规'
|
||||
},
|
||||
{
|
||||
value: 61,
|
||||
label: 'table-1',
|
||||
remark: '表格'
|
||||
}, {
|
||||
value: 62,
|
||||
label: 'table-2',
|
||||
remark: 'DNS记录'
|
||||
}, {
|
||||
value: 63,
|
||||
label: 'table-3',
|
||||
remark: '挖矿活跃ip'
|
||||
}, {
|
||||
value: 31,
|
||||
label: 'pie-1',
|
||||
remark: '饼图-带联动表格'
|
||||
}, {
|
||||
value: 51,
|
||||
label: 'singleValue-1',
|
||||
remark: '单值图'
|
||||
},
|
||||
{
|
||||
value: 91,
|
||||
label: 'tab-container',
|
||||
remark: 'tab标签(容器)'
|
||||
}, {
|
||||
value: 92,
|
||||
label: 'tab-item',
|
||||
remark: 'tab标签(标签页)'
|
||||
},
|
||||
{
|
||||
value: 93,
|
||||
label: 'title',
|
||||
remark: '标题'
|
||||
}, {
|
||||
value: 94,
|
||||
label: 'group',
|
||||
remark: '组'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: 'line-2',
|
||||
remark: '折线图-带统计'
|
||||
}, {
|
||||
value: 52,
|
||||
label: 'singleValue-2',
|
||||
remark: '详情单值图'
|
||||
},
|
||||
{
|
||||
value: 53,
|
||||
label: 'singleValue-3',
|
||||
remark: '单值图'
|
||||
}, {
|
||||
value: 13,
|
||||
label: 'line-3',
|
||||
remark: '折线图-堆叠面积'
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: 'bar-1',
|
||||
remark: '柱状图'
|
||||
}, {
|
||||
value: 22,
|
||||
label: 'bar-2',
|
||||
remark: '开放端口'
|
||||
}, {
|
||||
value: 23,
|
||||
label: 'bar-3',
|
||||
remark: '挖矿事件统计(time类型柱状图)'
|
||||
}, {
|
||||
value: 24,
|
||||
label: 'bar-4',
|
||||
remark: '矿机所属单位(category类型柱状图)'
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
label: 'pie-2',
|
||||
remark: '饼图-常规'
|
||||
}, {
|
||||
value: 33,
|
||||
label: 'pie-3',
|
||||
remark: '托管域名'
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
label: 'pie-4',
|
||||
remark: '相关域名'
|
||||
}, {
|
||||
value: 42,
|
||||
label: 'relation-2',
|
||||
remark: '关系图谱'
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
label: 'relation-3',
|
||||
remark: '访问链路图'
|
||||
},
|
||||
{
|
||||
value: 82,
|
||||
label: 'base-2',
|
||||
remark: 'APP基本信息'
|
||||
}, {
|
||||
value: 83,
|
||||
label: 'list-1',
|
||||
remark: 'Whois'
|
||||
},
|
||||
{
|
||||
value: 84,
|
||||
label: 'list-2',
|
||||
remark: 'DNS记录'
|
||||
},
|
||||
{
|
||||
value: 85,
|
||||
label: 'list-3',
|
||||
remark: '近期挖矿事件'
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
|
||||
this.$refs.chartForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editObject.id) {
|
||||
put(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
post(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async getChartData (value) {
|
||||
await get('/visual/chart?panelId=' + value).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data.list
|
||||
}
|
||||
})
|
||||
|
||||
// this.$set(this.editObject, 'pid', '')
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
mounted () {
|
||||
if (this.editObject.id) {
|
||||
this.getChartData(this.editObject.panelId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'editObject.panelId': function (newValue, oldValue) {
|
||||
this.editObject.pid = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser (username) {
|
||||
return localStorage.getItem('cn-username') === username
|
||||
},
|
||||
/* 密码失去焦点 检验确认密码 */
|
||||
pinBlur () {
|
||||
if (this.editObject.pin && this.editObject.pinChange) {
|
||||
this.$refs.chartForm.validateField('pinChange')
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
|
||||
this.$refs.chartForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editObject.id) {
|
||||
put(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
post(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async getChartData (value) {
|
||||
await get('/visual/chart?panelId=' + value).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.chartData = response.data.list
|
||||
}
|
||||
})
|
||||
|
||||
// this.$set(this.editObject, 'pid', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.my-editor {
|
||||
|
||||
Reference in New Issue
Block a user