CN-333 fix : 修改了一些样式和接口请求参数
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
.cn-chart-header-button {
|
||||
display: flex;
|
||||
button:first-of-type{
|
||||
|
||||
button:first-of-type {
|
||||
border-radius: 2px 0 0 2px;
|
||||
|
||||
}
|
||||
|
||||
.cn-chart-header-button-all {
|
||||
border-color: #0091FF;
|
||||
color: #0091FF;
|
||||
@@ -55,5 +57,8 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@@ -48,6 +48,9 @@
|
||||
.cn-alarm-info-main-title {
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: Roboto-Regular;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.cn-alarm-info-bottom {
|
||||
@@ -64,16 +67,20 @@
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
height: 14px;
|
||||
.cn-icon-time2{
|
||||
|
||||
.cn-icon-time2 {
|
||||
color: #8FA1BE;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cn-alarm-info-bottom-time {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,16 +89,20 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.cn-icon-time2{
|
||||
|
||||
.cn-icon-time2 {
|
||||
color: #8FA1BE;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cn-alarm-info-bottom-time {
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,6 +128,11 @@
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
font-family: Roboto-Black;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 17px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ export const api = {
|
||||
listCount: '/interface/detection/performance/list/count',
|
||||
overviewBasic: '/interface/detection/performance/detail/overview/basic'
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/* panel */
|
||||
|
||||
@@ -311,9 +311,9 @@ export default {
|
||||
ChartTwoSituationStatistics,
|
||||
ChartAlarmInfo
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
tabHandleClickType:''
|
||||
data () {
|
||||
return {
|
||||
tabHandleClickType: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -329,7 +329,7 @@ export default {
|
||||
isError: Boolean,
|
||||
table: Object,
|
||||
orderPieTable: Object,
|
||||
tabHandleClickType:String
|
||||
tabHandleClickType: String
|
||||
},
|
||||
computed: {
|
||||
isNoData () {
|
||||
@@ -353,7 +353,7 @@ export default {
|
||||
} else {
|
||||
return getOption(this.chartInfo.type)
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resize () {
|
||||
@@ -363,8 +363,8 @@ export default {
|
||||
showLoading (show) {
|
||||
this.$emit('showLoading', show)
|
||||
},
|
||||
getAlarmInfo(url,extraParams){
|
||||
this.$emit('getChartData',url,extraParams)
|
||||
getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
|
||||
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
|
||||
},
|
||||
initEchartsWithTable () {
|
||||
this.$refs['chart' + this.chartInfo.id] &&
|
||||
@@ -381,9 +381,9 @@ export default {
|
||||
deep: true,
|
||||
handler (n) {}
|
||||
},
|
||||
tabHandleClickType:{
|
||||
deep:true,
|
||||
handler(n){
|
||||
tabHandleClickType: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.tabHandleClickType = n
|
||||
}
|
||||
}
|
||||
@@ -427,8 +427,8 @@ export default {
|
||||
isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
|
||||
isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type),
|
||||
isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -232,24 +232,24 @@ export default {
|
||||
chartInfo: Object,
|
||||
errorInfo: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: ''
|
||||
},
|
||||
isError: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
table: Object,
|
||||
orderPieTable: Object,
|
||||
orderPieTable: Object
|
||||
},
|
||||
components: {
|
||||
ChartError,
|
||||
ChartError
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
chartTableColumnMapping,
|
||||
dropdownMenuShow: false,
|
||||
errorText: '',
|
||||
isFocus:false,
|
||||
isFocus: false,
|
||||
isFocusAll: true,
|
||||
activeIpTable: {
|
||||
// ActiveIpTable select
|
||||
@@ -257,37 +257,37 @@ export default {
|
||||
tableData: [
|
||||
{
|
||||
name: '192.168.20.21',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.22',
|
||||
num: 345,
|
||||
num: 345
|
||||
},
|
||||
{
|
||||
name: '192.168.20.23',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.24',
|
||||
num: 345,
|
||||
num: 345
|
||||
},
|
||||
{
|
||||
name: '192.168.20.25',
|
||||
num: 111,
|
||||
num: 111
|
||||
},
|
||||
{
|
||||
name: '192.168.20.26',
|
||||
num: 345,
|
||||
},
|
||||
], // table的所有数据
|
||||
},
|
||||
num: 345
|
||||
}
|
||||
] // table的所有数据
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
refresh () {
|
||||
this.$emit('refresh')
|
||||
},
|
||||
timeRefreshChange() {
|
||||
timeRefreshChange () {
|
||||
if (!this.$refs.dateTimeRange.isCustom) {
|
||||
const value = this.chartTimeFilter.dateRangeValue
|
||||
this.$refs.dateTimeRange.quickChange(value)
|
||||
@@ -295,56 +295,56 @@ export default {
|
||||
this.$emit('refresh')
|
||||
}
|
||||
},
|
||||
reload(s, e, v) {
|
||||
reload (s, e, v) {
|
||||
this.dateTimeRangeChange(s, e, v)
|
||||
},
|
||||
groupShow() {
|
||||
groupShow () {
|
||||
this.$emit('groupShow', this.chartInfo)
|
||||
},
|
||||
dateTimeRangeChange(s, e, v) {
|
||||
dateTimeRangeChange (s, e, v) {
|
||||
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
|
||||
this.$emit('refresh', this.chartTimeFilter)
|
||||
},
|
||||
tableLimitChange() {
|
||||
tableLimitChange () {
|
||||
this.$emit('tableChange')
|
||||
},
|
||||
activeIpTableLimitChange() {
|
||||
activeIpTableLimitChange () {
|
||||
this.$emit('tableChange')
|
||||
},
|
||||
orderPieTableChange() {
|
||||
orderPieTableChange () {
|
||||
this.$emit('orderPieTableChange', this.orderPieTable)
|
||||
},
|
||||
tabHandleClick(item) {
|
||||
tabHandleClick (item) {
|
||||
this.isFocus = item
|
||||
this.isFocusAll = false
|
||||
if(item === 'All'){
|
||||
if (item === 'All') {
|
||||
this.isFocusAll = true
|
||||
}else{
|
||||
} else {
|
||||
this.isFocusAll = false
|
||||
}
|
||||
this.$emit('tabHandleClick', item)
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
beforeCreate () {
|
||||
this.$emit('tabHandleClick', 'All')
|
||||
},
|
||||
watch:{
|
||||
isFocus:{
|
||||
deep:true,
|
||||
handler(n){
|
||||
watch: {
|
||||
isFocus: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showRefreshButton() {
|
||||
showRefreshButton () {
|
||||
// 自己是group且父元素是block时,不显示刷新按钮
|
||||
// TODO 父元素是block,且只有自己一个子元素时,不显示刷新按钮
|
||||
const isGroupAndParentIsBlock =
|
||||
this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
|
||||
return !isGroupAndParentIsBlock
|
||||
}
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
setup (props) {
|
||||
const dateRangeValue = 60
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
// entity详情内的chart时间工具不是公共的,需要单独定义
|
||||
@@ -363,8 +363,8 @@ export default {
|
||||
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
|
||||
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
|
||||
isGroup: isGroup(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type),
|
||||
isAlarmInfo: isAlarmInfo(props.chartInfo.type)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -157,7 +157,7 @@ export default {
|
||||
tableData: [], // table的所有数据
|
||||
currentPageData: [] // table当前页的数据
|
||||
},
|
||||
tabHandleClickType:''
|
||||
tabHandleClickType: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -321,7 +321,7 @@ export default {
|
||||
this.emitter.emit('chart-pageNo')
|
||||
this.getChartData(null, {}, true, chartTimeFilter)
|
||||
},
|
||||
tabHandleClick(value){
|
||||
tabHandleClick (value) {
|
||||
this.tabHandleClickType = value
|
||||
},
|
||||
showFullscreen (show) {
|
||||
|
||||
@@ -101,8 +101,9 @@ export default {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
tabHandleClickType: String,
|
||||
queryParams: Object
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
pageSizeForAlarm: 9,
|
||||
eventSeverityColor: eventSeverityColor,
|
||||
@@ -119,7 +120,7 @@ export default {
|
||||
eventType: 'type1111111111111111111111111111111111',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 111111111111111112,
|
||||
endTime: 111111111111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -130,7 +131,7 @@ export default {
|
||||
eventType: 'type111111111111111111111111111111111111',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -141,7 +142,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -152,7 +153,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -163,7 +164,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -174,7 +175,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -185,7 +186,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -196,7 +197,7 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
endTime: 1111111112
|
||||
},
|
||||
{
|
||||
entityType: 'ip',
|
||||
@@ -207,30 +208,31 @@ export default {
|
||||
eventType: 'type',
|
||||
startTime: 1111111111,
|
||||
durationMs: 60000,
|
||||
endTime: 1111111112,
|
||||
},
|
||||
],
|
||||
endTime: 1111111112
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabHandleClickType: {
|
||||
deep: true,
|
||||
handler(n) {
|
||||
handler (n) {
|
||||
this.getData(1, n)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
created () {
|
||||
this.getData(1, 'All')
|
||||
},
|
||||
components: {
|
||||
ChartTablePagination,
|
||||
ChartTablePagination
|
||||
},
|
||||
methods: {
|
||||
unitConvert,
|
||||
getData(val, n) {
|
||||
getData (val, n) {
|
||||
this.pageNo = val
|
||||
const now = window.$dayJs.tz().valueOf()
|
||||
console.log(window.$dayJs.tz())
|
||||
const extraParams = {
|
||||
pageNo: val,
|
||||
pageSize: this.pageSizeForAlarm,
|
||||
@@ -240,30 +242,30 @@ export default {
|
||||
: n
|
||||
: this.tabHandleClickType === 'All'
|
||||
? ''
|
||||
: this.tabHandleClickType,
|
||||
: this.tabHandleClickType
|
||||
}
|
||||
this.$emit('getAlarmInfo', null, extraParams)
|
||||
const queryParams = {
|
||||
startTime: Math.floor(now / 1000 - 3600),
|
||||
endTime: Math.floor(now / 1000),
|
||||
const query = {
|
||||
startTime: this.queryParams.startTime,
|
||||
endTime: this.queryParams.endTime,
|
||||
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', {
|
||||
...queryParams,
|
||||
...query
|
||||
}).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.alarmInfoCount = response.data
|
||||
}
|
||||
})
|
||||
},
|
||||
changeDate(value) {
|
||||
changeDate (value) {
|
||||
return window.$dayJs.tz(value).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
pageJump(val) {
|
||||
pageJump (val) {
|
||||
this.getData(val)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
{
|
||||
name: this.$t('dns.rootDomainServers'),
|
||||
value: 0
|
||||
}*/
|
||||
} */
|
||||
],
|
||||
markerColors: [
|
||||
{
|
||||
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
name: 'ChartOneSituationStatistics',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
},
|
||||
chartData: [Array, Object]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,11 +19,11 @@ export default {
|
||||
name: 'ChartTablePagination',
|
||||
props: {
|
||||
total: Number,
|
||||
pageSizeForAlarm:Number
|
||||
pageSizeForAlarm: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pageSize: this.pageSizeForAlarm?this.pageSizeForAlarm:chartTableDefaultPageSize,
|
||||
pageSize: this.pageSizeForAlarm ? this.pageSizeForAlarm : chartTableDefaultPageSize,
|
||||
pageNo: 1
|
||||
}
|
||||
},
|
||||
|
||||
@@ -28,9 +28,9 @@ export default {
|
||||
name: 'ChartTwoSituationStatistics',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
chartData: [Array, Object]
|
||||
},
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
// result: {
|
||||
// doh: {
|
||||
@@ -43,6 +43,6 @@ export default {
|
||||
// },
|
||||
// },
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
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])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
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])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
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])
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
|
||||
@@ -203,7 +203,7 @@ export default {
|
||||
queryBasic () {
|
||||
return new Promise((resolve, reject) => {
|
||||
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) {
|
||||
resolve(response.data.result[0])
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user