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

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

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

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

View File

@@ -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>

View File

@@ -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>

View File

@@ -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) {

View File

@@ -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>

View File

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

View File

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

View File

@@ -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
}
},

View File

@@ -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>

View File

@@ -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)

View File

@@ -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)

View File

@@ -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)

View File

@@ -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 {