gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-333 fix : 修改了一些样式和接口请求参数

Browse Source
This commit is contained in:
zhangxiaolong
2022-03-07 17:27:55 +08:00
parent 51c96fbc1e
commit 97a6e893c6
15 changed files with 123 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/components/views/chartHeader.scss
View File

@@ -1,9 +1,11 @@
.cn-chart-header-button { .cn-chart-header-button {
display: flex; display: flex;
button:first-of-type{
button:first-of-type {
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
} }
.cn-chart-header-button-all { .cn-chart-header-button-all {
border-color: #0091FF; border-color: #0091FF;
color: #0091FF; color: #0091FF;
@@ -55,5 +57,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: Roboto-Regular;
font-size: 12px;
font-weight: 400;
} }
} }

26
src/assets/css/components/views/charts/chartAlarmInfo.scss
View File

@@ -48,6 +48,9 @@
.cn-alarm-info-main-title { .cn-alarm-info-main-title {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
font-family: Roboto-Regular;
color: #333333;
font-weight: 400;
} }
.cn-alarm-info-bottom { .cn-alarm-info-bottom {
@@ -64,16 +67,20 @@
display: flex; display: flex;
margin-left: 20px; margin-left: 20px;
height: 14px; height: 14px;
.cn-icon-time2{
.cn-icon-time2 {
color: #8FA1BE; color: #8FA1BE;
width: 10px; width: 10px;
height: 10px; height: 10px;
font-size: 12px; font-size: 12px;
} }
.cn-alarm-info-bottom-time { .cn-alarm-info-bottom-time {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999; color: #999999;
line-height: 14px; line-height: 14px;
font-size: 12px; font-weight: 400;
} }
} }
@@ -82,16 +89,20 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.cn-icon-time2{
.cn-icon-time2 {
color: #8FA1BE; color: #8FA1BE;
width: 10px; width: 10px;
height: 10px; height: 10px;
font-size: 12px; font-size: 12px;
} }
.cn-alarm-info-bottom-time { .cn-alarm-info-bottom-time {
color: #999999; font-family: PingFangSC-Regular;
line-height: 14px;
font-size: 12px; font-size: 12px;
color: #999999;
line-height: 17px;
font-weight: 400;
} }
} }
@@ -117,6 +128,11 @@
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%; border-radius: 50%;
font-family: Roboto-Black;
font-size: 12px;
color: #666666;
line-height: 17px;
font-weight: 400;
} }
} }

2
src/utils/api.js
View File

@@ -97,7 +97,7 @@ export const api = {
listCount: '/interface/detection/performance/list/count', listCount: '/interface/detection/performance/list/count',
overviewBasic: '/interface/detection/performance/detail/overview/basic' overviewBasic: '/interface/detection/performance/detail/overview/basic'
} }
}, }
} }
/* panel */ /* panel */

24
src/views/charts/Chart.vue
View File

@@ -311,9 +311,9 @@ export default {
ChartTwoSituationStatistics, ChartTwoSituationStatistics,
ChartAlarmInfo ChartAlarmInfo
}, },
data(){ data () {
return{ return {
tabHandleClickType:'' tabHandleClickType: ''
} }
}, },
props: { props: {
@@ -329,7 +329,7 @@ export default {
isError: Boolean, isError: Boolean,
table: Object, table: Object,
orderPieTable: Object, orderPieTable: Object,
tabHandleClickType:String tabHandleClickType: String
}, },
computed: { computed: {
isNoData () { isNoData () {
@@ -353,7 +353,7 @@ export default {
} else { } else {
return getOption(this.chartInfo.type) return getOption(this.chartInfo.type)
} }
}, }
}, },
methods: { methods: {
resize () { resize () {
@@ -363,8 +363,8 @@ export default {
showLoading (show) { showLoading (show) {
this.$emit('showLoading', show) this.$emit('showLoading', show)
}, },
getAlarmInfo(url,extraParams){ getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
this.$emit('getChartData',url,extraParams) this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
}, },
initEchartsWithTable () { initEchartsWithTable () {
this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id] &&
@@ -381,9 +381,9 @@ export default {
deep: true, deep: true,
handler (n) {} handler (n) {}
}, },
tabHandleClickType:{ tabHandleClickType: {
deep:true, deep: true,
handler(n){ handler (n) {
this.tabHandleClickType = n this.tabHandleClickType = n
} }
} }
@@ -427,8 +427,8 @@ export default {
isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type), isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type), isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type),
isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type), isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
isAlarmInfo: isAlarmInfo(props.chartInfo.type), isAlarmInfo: isAlarmInfo(props.chartInfo.type)
} }
}, }
} }
</script> </script>

74
src/views/charts/ChartHeader.vue
View File

@@ -232,24 +232,24 @@ export default {
chartInfo: Object, chartInfo: Object,
errorInfo: { errorInfo: {
type: String, type: String,
default: '', default: ''
}, },
isError: { isError: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
table: Object, table: Object,
orderPieTable: Object, orderPieTable: Object
}, },
components: { components: {
ChartError, ChartError
}, },
data() { data () {
return { return {
chartTableColumnMapping, chartTableColumnMapping,
dropdownMenuShow: false, dropdownMenuShow: false,
errorText: '', errorText: '',
isFocus:false, isFocus: false,
isFocusAll: true, isFocusAll: true,
activeIpTable: { activeIpTable: {
// ActiveIpTable select // ActiveIpTable select
@@ -257,37 +257,37 @@ export default {
tableData: [ tableData: [
{ {
name: '192.168.20.21', name: '192.168.20.21',
num: 111, num: 111
}, },
{ {
name: '192.168.20.22', name: '192.168.20.22',
num: 345, num: 345
}, },
{ {
name: '192.168.20.23', name: '192.168.20.23',
num: 111, num: 111
}, },
{ {
name: '192.168.20.24', name: '192.168.20.24',
num: 345, num: 345
}, },
{ {
name: '192.168.20.25', name: '192.168.20.25',
num: 111, num: 111
}, },
{ {
name: '192.168.20.26', name: '192.168.20.26',
num: 345, num: 345
}, }
], // table的所有数据 ] // table的所有数据
}, }
} }
}, },
methods: { methods: {
refresh() { refresh () {
this.$emit('refresh') this.$emit('refresh')
}, },
timeRefreshChange() { timeRefreshChange () {
if (!this.$refs.dateTimeRange.isCustom) { if (!this.$refs.dateTimeRange.isCustom) {
const value = this.chartTimeFilter.dateRangeValue const value = this.chartTimeFilter.dateRangeValue
this.$refs.dateTimeRange.quickChange(value) this.$refs.dateTimeRange.quickChange(value)
@@ -295,56 +295,56 @@ export default {
this.$emit('refresh') this.$emit('refresh')
} }
}, },
reload(s, e, v) { reload (s, e, v) {
this.dateTimeRangeChange(s, e, v) this.dateTimeRangeChange(s, e, v)
}, },
groupShow() { groupShow () {
this.$emit('groupShow', this.chartInfo) this.$emit('groupShow', this.chartInfo)
}, },
dateTimeRangeChange(s, e, v) { dateTimeRangeChange (s, e, v) {
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v } this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
this.$emit('refresh', this.chartTimeFilter) this.$emit('refresh', this.chartTimeFilter)
}, },
tableLimitChange() { tableLimitChange () {
this.$emit('tableChange') this.$emit('tableChange')
}, },
activeIpTableLimitChange() { activeIpTableLimitChange () {
this.$emit('tableChange') this.$emit('tableChange')
}, },
orderPieTableChange() { orderPieTableChange () {
this.$emit('orderPieTableChange', this.orderPieTable) this.$emit('orderPieTableChange', this.orderPieTable)
}, },
tabHandleClick(item) { tabHandleClick (item) {
this.isFocus = item this.isFocus = item
this.isFocusAll = false this.isFocusAll = false
if(item === 'All'){ if (item === 'All') {
this.isFocusAll = true this.isFocusAll = true
}else{ } else {
this.isFocusAll = false this.isFocusAll = false
} }
this.$emit('tabHandleClick', item) this.$emit('tabHandleClick', item)
}, }
}, },
beforeCreate() { beforeCreate () {
this.$emit('tabHandleClick', 'All') this.$emit('tabHandleClick', 'All')
}, },
watch:{ watch: {
isFocus:{ isFocus: {
deep:true, deep: true,
handler(n){ handler (n) {
} }
} }
}, },
computed: { computed: {
showRefreshButton() { showRefreshButton () {
// 自己是group且父元素是block时，不显示刷新按钮 // 自己是group且父元素是block时，不显示刷新按钮
// TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮 // TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
const isGroupAndParentIsBlock = const isGroupAndParentIsBlock =
this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
return !isGroupAndParentIsBlock return !isGroupAndParentIsBlock
}, }
}, },
setup(props) { setup (props) {
const dateRangeValue = 60 const dateRangeValue = 60
const { startTime, endTime } = getNowTime(dateRangeValue) const { startTime, endTime } = getNowTime(dateRangeValue)
// entity详情内的chart时间工具不是公共的，需要单独定义 // entity详情内的chart时间工具不是公共的，需要单独定义
@@ -363,8 +363,8 @@ export default {
isActiveIpTable: isActiveIpTable(props.chartInfo.type), isActiveIpTable: isActiveIpTable(props.chartInfo.type),
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type), isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
isGroup: isGroup(props.chartInfo.type), isGroup: isGroup(props.chartInfo.type),
isAlarmInfo: isAlarmInfo(props.chartInfo.type), isAlarmInfo: isAlarmInfo(props.chartInfo.type)
} }
}, }
} }
</script> </script>

4
src/views/charts/PanelChart.vue
View File

@@ -157,7 +157,7 @@ export default {
tableData: [], // table的所有数据 tableData: [], // table的所有数据
currentPageData: [] // table当前页的数据 currentPageData: [] // table当前页的数据
}, },
tabHandleClickType:'' tabHandleClickType: ''
} }
}, },
computed: { computed: {
@@ -321,7 +321,7 @@ export default {
this.emitter.emit('chart-pageNo') this.emitter.emit('chart-pageNo')
this.getChartData(null, {}, true, chartTimeFilter) this.getChartData(null, {}, true, chartTimeFilter)
}, },
tabHandleClick(value){ tabHandleClick (value) {
this.tabHandleClickType = value this.tabHandleClickType = value
}, },
showFullscreen (show) { showFullscreen (show) {

62
src/views/charts/charts/ChartAlarmInfo.vue
View File

@@ -101,8 +101,9 @@ export default {
chartInfo: Object, chartInfo: Object,
chartData: [Array, Object], chartData: [Array, Object],
tabHandleClickType: String, tabHandleClickType: String,
queryParams: Object
}, },
data() { data () {
return { return {
pageSizeForAlarm: 9, pageSizeForAlarm: 9,
eventSeverityColor: eventSeverityColor, eventSeverityColor: eventSeverityColor,
@@ -119,7 +120,7 @@ export default {
eventType: 'type1111111111111111111111111111111111', eventType: 'type1111111111111111111111111111111111',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 111111111111111112, endTime: 111111111111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -130,7 +131,7 @@ export default {
eventType: 'type111111111111111111111111111111111111', eventType: 'type111111111111111111111111111111111111',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -141,7 +142,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -152,7 +153,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -163,7 +164,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -174,7 +175,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -185,7 +186,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -196,7 +197,7 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, },
{ {
entityType: 'ip', entityType: 'ip',
@@ -207,30 +208,31 @@ export default {
eventType: 'type', eventType: 'type',
startTime: 1111111111, startTime: 1111111111,
durationMs: 60000, durationMs: 60000,
endTime: 1111111112, endTime: 1111111112
}, }
], ]
} }
}, },
watch: { watch: {
tabHandleClickType: { tabHandleClickType: {
deep: true, deep: true,
handler(n) { handler (n) {
this.getData(1, n) this.getData(1, n)
}, }
}, }
}, },
created() { created () {
this.getData(1, 'All') this.getData(1, 'All')
}, },
components: { components: {
ChartTablePagination, ChartTablePagination
}, },
methods: { methods: {
unitConvert, unitConvert,
getData(val, n) { getData (val, n) {
this.pageNo = val this.pageNo = val
const now = window.$dayJs.tz().valueOf() const now = window.$dayJs.tz().valueOf()
console.log(window.$dayJs.tz())
const extraParams = { const extraParams = {
pageNo: val, pageNo: val,
pageSize: this.pageSizeForAlarm, pageSize: this.pageSizeForAlarm,
@@ -239,31 +241,31 @@ export default {
? '' ? ''
: n : n
: this.tabHandleClickType === 'All' : this.tabHandleClickType === 'All'
? '' ? ''
: this.tabHandleClickType, : this.tabHandleClickType
} }
this.$emit('getAlarmInfo', null, extraParams) const query = {
const queryParams = { startTime: this.queryParams.startTime,
startTime: Math.floor(now / 1000 - 3600), endTime: this.queryParams.endTime,
endTime: Math.floor(now / 1000),
eventSeverity: eventSeverity:
this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType, this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
} }
this.$emit('getAlarmInfo', null, extraParams, false, { startTime: query.startTime, endTime: query.endTime })
get('/interface/dns/alarmInfoCount', { get('/interface/dns/alarmInfoCount', {
...queryParams, ...query
}).then((response) => { }).then((response) => {
if (response.code === 200) { if (response.code === 200) {
this.alarmInfoCount = response.data this.alarmInfoCount = response.data
} }
}) })
}, },
changeDate(value) { changeDate (value) {
return window.$dayJs.tz(value).format('YYYY-MM-DD HH:mm:ss') return window.$dayJs.tz(value).format('YYYY-MM-DD HH:mm:ss')
}, },
pageJump(val) { pageJump (val) {
this.getData(val) this.getData(val)
}, }
}, }
} }
</script> </script>

2
src/views/charts/charts/ChartMap.vue
View File

@@ -70,7 +70,7 @@ export default {
{ {
name: this.$t('dns.rootDomainServers'), name: this.$t('dns.rootDomainServers'),
value: 0 value: 0
}*/ } */
], ],
markerColors: [ markerColors: [
{ {

4
src/views/charts/charts/ChartOneSituationStatistics.vue
View File

@@ -22,7 +22,7 @@ export default {
name: 'ChartOneSituationStatistics', name: 'ChartOneSituationStatistics',
props: { props: {
chartInfo: Object, chartInfo: Object,
chartData: [Array, Object], chartData: [Array, Object]
}, }
} }
</script> </script>

4
src/views/charts/charts/ChartTablePagination.vue
View File

@@ -19,11 +19,11 @@ export default {
name: 'ChartTablePagination', name: 'ChartTablePagination',
props: { props: {
total: Number, total: Number,
pageSizeForAlarm:Number pageSizeForAlarm: Number
}, },
data () { data () {
return { return {
pageSize: this.pageSizeForAlarm?this.pageSizeForAlarm:chartTableDefaultPageSize, pageSize: this.pageSizeForAlarm ? this.pageSizeForAlarm : chartTableDefaultPageSize,
pageNo: 1 pageNo: 1
} }
}, },

6
src/views/charts/charts/ChartTwoSituationStatistics.vue
View File

@@ -28,9 +28,9 @@ export default {
name: 'ChartTwoSituationStatistics', name: 'ChartTwoSituationStatistics',
props: { props: {
chartInfo: Object, chartInfo: Object,
chartData: [Array, Object], chartData: [Array, Object]
}, },
data() { data () {
return { return {
// result: { // result: {
// doh: { // doh: {
@@ -43,6 +43,6 @@ export default {
// }, // },
// }, // },
} }
}, }
} }
</script> </script>

2
src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
View File

@@ -80,7 +80,7 @@ export default {
queryBasic () { queryBasic () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.appName,startTime: this.detection.startTime }).then(data => { getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.appName, startTime: this.detection.startTime }).then(data => {
resolve(data[0]) resolve(data[0])
}).catch(error => { }).catch(error => {
reject(error) reject(error)

2
src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
View File

@@ -84,7 +84,7 @@ export default {
queryBasic () { queryBasic () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
getData(api.detection.performanceEvent.overviewBasic, { appName: this.detection.appName,startTime: this.detection.startTime }).then(data => { getData(api.detection.performanceEvent.overviewBasic, { appName: this.detection.appName, startTime: this.detection.startTime }).then(data => {
resolve(data[0]) resolve(data[0])
}).catch(error => { }).catch(error => {
reject(error) reject(error)

2
src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
View File

@@ -72,7 +72,7 @@ export default {
queryBasic () { queryBasic () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp,startTime: this.detection.startTime }).then(data => { getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp, startTime: this.detection.startTime }).then(data => {
resolve(data[0]) resolve(data[0])
}).catch(error => { }).catch(error => {
reject(error) reject(error)

2
src/views/detections/overview/DetectionSecurityEventOverview.vue
View File

@@ -203,7 +203,7 @@ export default {
queryBasic () { queryBasic () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId,startTime: this.detection.startTime }).then(response => { get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId, startTime: this.detection.startTime }).then(response => {
if (response.code === 200) { if (response.code === 200) {
resolve(response.data.result[0]) resolve(response.data.result[0])
} else { } else {