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

fix: 服务质量折线图接口更改、满屏滚动修复

Browse Source
This commit is contained in:
chenjinsong
2022-04-19 13:11:26 +08:00
parent d3632a5b30
commit 78108f0e05
16 changed files with 146 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Login.vue
View File

@@ -43,9 +43,11 @@ import { post, get } from '@/utils/http'
import { useRouter } from 'vue-router'
import { storageKey } from '@/utils/constants'
import { api } from '@/utils/api'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
export default {
name: 'Login',
data () {
return {
@@ -89,12 +91,13 @@ export default {
}
}
).catch(e => {
console.error(e)
this.loading = false
this.blockOperation.query = false
this.$message.error(this.$t('tip.unknownError'))
})
},
appearance () {
queryAppearance () {
get(api.appearance).then(res => {
if (res.code === 200) {
this.appearanceOut(res.data)
@@ -103,21 +106,22 @@ export default {
},
appearanceOut (data) {
if (this.$_.isEmpty(localStorage.getItem(storageKey.language))) {
localStorage.setItem(storageKey.language, data.lang)
}
if (this.$_.isEmpty(localStorage.getItem(storageKey.sysTimezone))) {
localStorage.setItem(storageKey.sysTimezone, data.timezone)
localStorage.setItem(storageKey.language, data.lang || 'zh')
}
if (this.$_.isEmpty(localStorage.getItem(storageKey.theme))) {
localStorage.setItem(storageKey.theme, data.theme)
localStorage.setItem(storageKey.theme, data.theme || 'light')
}
if (this.$_.isEmpty(localStorage.getItem(storageKey.dateFormat))) {
localStorage.setItem(storageKey.sysTimezone, data.timezone)
window.$dayJs.tz.setDefault(data.timezone)
localStorage.setItem(storageKey.timezoneOffset, window.$dayJs.tz().utcOffset() / 60)
localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
localStorage.setItem(storageKey.dateFormat, data.dateFormat)
}
localStorage.setItem(storageKey.sysName, data.system_name)
localStorage.setItem(storageKey.sysLogo, data.system_logo)
}
},
mounted () {
this.appearance()
this.queryAppearance()
},
setup (props) {
const { currentRoute } = useRouter()

4
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -55,9 +55,9 @@
cursor: pointer;
}
&.overview__row--single-value {
flex-wrap: nowrap;
flex-wrap: wrap;
.cn-chart__single-value--detail-overview {
margin-right: 60px;
margin-right: 30px;
}
}
.row__label {

1
src/components/common/MyDatePicker/index.js
View File

@@ -3,7 +3,6 @@
Object.defineProperty(exports, '__esModule', { value: true })
const vue = require('vue')
const dayjs = require('dayjs')
const timePicker = require('../MytTimePicker')
const locale = require('element-plus/lib/locale')
const ElInput = require('element-plus/lib/el-input')

20
src/components/table/report/builtinReportTable.vue
View File

@@ -37,9 +37,12 @@
{{scope.row.startTime}}-{{scope.row.endTime}}
</template>
</span>
<span v-if="item.prop === 'type'">
<span v-else-if="item.prop === 'type'">
{{scope.row.reportTemp.name}}
</span>
<span v-else-if="item.prop === 'state'">
{{getJobStatus(scope.row.state)}}
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
@@ -52,7 +55,7 @@
<div class="table-operation-title">{{$t('overall.option')}}</div>
</template>
<template #default="scope">
<div class="table-operation-items">
<div class="table-operation-items" v-if="scope.row.state === 1">
<div class="table-operation-item--down" @click="tableOperation(['download', scope.row, 1])">
<loading :loading="loadingTableId === scope.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
@@ -112,6 +115,12 @@ export default {
prop: 'dataRange',
show: true,
minWidth: 110
}, {
label: this.$t('overall.status'),
prop: 'state',
show: true,
width: 120,
sortable: 'custom'
}
],
checkboxAll: false,
@@ -126,6 +135,13 @@ export default {
}
},
methods: {
getJobStatus (state) {
if (state === 0) {
return this.$t('overall.inProgress')
} else if (state === 1) {
return this.$t('overall.completed')
}
},
selectionChange (objs) {
this.$emit('selectionChange', objs)
this.checkboxIds = objs.map(item => { return item.id }).join(',')

2
src/components/table/settings/OperationLogTable.vue
View File

@@ -50,7 +50,7 @@
</template>
</span>
<span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
<span v-else-if="item.prop === 'ctime'">{{utcTimeToSysTime(scope.row[item.prop])}}</span>
<span v-else-if="item.prop === 'ctime'">{{dateFormatByAppearance(scope.row[item.prop])}}</span>
<template v-else-if="item.prop === 'params' || item.prop === 'response'">
<span>{{scope.row[item.prop]}}</span>
</template>

8
src/components/table/settings/UserTable.vue
View File

@@ -40,6 +40,14 @@
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'lastLoginTime'">
<template v-if="scope.row[item.prop]">
{{dateFormatByAppearance(scope.row[item.prop])}}
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'status'">
<el-switch
v-if="scope.row.id"

20
src/mixins/common.js
View File

@@ -1,5 +1,5 @@
import { hasButton } from '@/permission'
import { getMillisecond } from '@/utils/date-util'
import { dateFormatByAppearance } from '@/utils/date-util'
import { storageKey } from '@/utils/constants'
export default {
data () {
@@ -39,22 +39,8 @@ export default {
query: false
}
},
// 时间相关
utcTimeToSysTime (str) { // utc 0 到系统设置的时区
let date = ''
if (isNaN(str)) {
date = window.$dayJs(str).valueOf() + localStorage.getItem(storageKey.timezoneLocalOffset) * 60 * 60 * 1000
} else {
date = str
}
date = window.$dayJs.tz(date).format('YYYY-MM-DD HH:mm:ss')
return date
},
utcTimeToLocalhost (str) { // 系统设置的时区 到 utc 0
return str
},
parseMsDate (time, format = 'YYYY-MM-DD HH:mm:ss') {
return this.dayJs.tz(parseFloat(time)).format(format)
dateFormatByAppearance (date) {
return dateFormatByAppearance(date)
}
}
}

3
src/mixins/data-list.js
View File

@@ -1,11 +1,10 @@
import { tableSort } from '@/utils/tools'
import { defaultPageSize, fromRoute, position } from '@/utils/constants'
import { defaultPageSize, fromRoute, position, storageKey } from '@/utils/constants'
import { get, del } from '@/utils/http'
import { ref } from 'vue'
import pagination from '@/components/common/Pagination'
import axios from 'axios'
import { api } from '@/utils/api'
import { storageKey } from '@/utils/constants'
export default {
components: {

14
src/store/modules/user.js
View File

@@ -1,14 +1,10 @@
import { post } from '@/utils/http'
import router from '@/router'
import { sortByOrderNum, getWelcomeMenu } from '@/permission'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import { ElMessage } from 'element-plus' // dependent on utc plugin
import { storageKey } from '@/utils/constants'
import { api } from '@/utils/api'
dayjs.extend(utc)
const user = {
state () {
return {
@@ -46,16 +42,7 @@ const user = {
},
actions: {
loginSuccess (store, res) {
console.info(res)
window.$dayJs.tz.setDefault(res.data.timezone)
localStorage.setItem(storageKey.token, res.data.token)
localStorage.setItem(storageKey.sysName, res.data.systemName)
if (res.systemLogo) {
localStorage.setItem(storageKey.sysLogo, res.data.systemLogo)
}
localStorage.setItem(storageKey.sysTimezone, res.data.timezone)
localStorage.setItem(storageKey.timezoneOffset, dayjs.tz().utcOffset() / 60)
localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
post(api.permissions, { token: res.data.token }).then(res2 => {
const menuList = sortByOrderNum(res2.data.menus)
store.commit('setMenuList', menuList)
@@ -93,7 +80,6 @@ const user = {
})
},
logoutSuccess (store, res) {
localStorage.removeItem(storageKey.username)
localStorage.removeItem(storageKey.username)
localStorage.removeItem(storageKey.token)
}

4
src/utils/api.js
View File

@@ -116,7 +116,9 @@ export const api = {
listBasic: '/interface/detection/performance/list/basic',
listCount: '/interface/detection/performance/list/count',
overviewBasic: '/interface/detection/performance/detail/overview/basic',
metric: '/interface/detection/performance/detail/overview/metric'
dnsErrorMetric: '/interface/detection/performance/detail/overview/metric',
httpErrorMetric: '/interface/detection/performance/detail/overview/metric',
highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric'
}
},
// Dashboard

17
src/utils/date-util.js
View File

@@ -1,4 +1,5 @@
import _ from 'lodash'
import { storageKey } from '@/utils/constants'
// 获取初始化时间，默认最近一周
Date.prototype.setStart = function () {
this.setHours(0)
@@ -44,3 +45,19 @@ export function getNowTime (interval) {
export function rTime (date) {
return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm')
}
// 时间格式转换
export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
let d = date
// date不是数字，则视为时间字符串，例如2022-02-22 22:22
if (isNaN(date)) {
d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem('cn-timezone-local-offset'))
} else {
d = getMillisecond(date)
}
d = window.$dayJs(d).tz().format(format)
return d
}
// 时间格式转换，使用appearance的时间格式
export function dateFormatByAppearance (date) {
return dateFormat(date, localStorage.getItem(storageKey.dateFormat))
}

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

@@ -185,7 +185,7 @@ export default {
this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
},
wholeScreenScroll (e) {
if (this.scroll.prevent) {
if (this.scroll.prevent || !this.panel.params || !this.panel.params.wholeScreenScroll) {
return
}
this.scroll.prevent = true

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

@@ -20,11 +20,11 @@
</div>
<div class="domain-detail-list__row">
<div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
<div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "createTime")) || '-'}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "createTime")) || '-'}}</div>
</div>
<div class="domain-detail-list__row">
<div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
<div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "expirationTime")) || '-'}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "expirationTime")) || '-'}}</div>
</div>
</div>
</div>

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

@@ -189,8 +189,16 @@ export default {
const nowTime = getSecond(new Date())
this.searchStartTime = this.detection.startTime - allTime / 2
this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
get(api.detection.performanceEvent.metric, {
let url
if (this.detection.eventType === 'dns error') {
url = api.detection.performanceEvent.dnsErrorMetric
} else if (this.detection.eventType === 'http error') {
url = api.detection.performanceEvent.httpErrorMetric
} else if (this.detection.eventType === 'high dns response time') {
url = api.detection.performanceEvent.highDnsResponseTimeMetric
}
if (url) {
get(url, {
appName: this.detection.appName,
startTime: this.searchStartTime,
endTime: this.searchEndTime,
@@ -202,6 +210,9 @@ export default {
reject(response)
}
})
} else {
resolve()
}
} catch (e) {
reject(e)
}

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

@@ -99,6 +99,7 @@ import * as echarts from 'echarts'
import { markRaw } from 'vue'
import { metricOption } from '@/views/detections/options/detectionOptions'
import { sortBy, reverseSortBy } from '@/utils/tools'
import _ from 'lodash'
export default {
name: 'DetectionPerformanceEventDomainOverview',
props: {
@@ -178,7 +179,7 @@ export default {
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
console.error(error)
const chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
@@ -221,8 +222,16 @@ export default {
const nowTime = getSecond(new Date())
this.searchStartTime = this.detection.startTime - allTime / 2
this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
get(api.detection.performanceEvent.metric, {
let url
if (this.detection.eventType === 'dns error') {
url = api.detection.performanceEvent.dnsErrorMetric
} else if (this.detection.eventType === 'http error') {
url = api.detection.performanceEvent.httpErrorMetric
} else if (this.detection.eventType === 'high dns response time') {
url = api.detection.performanceEvent.highDnsResponseTimeMetric
}
if (url) {
get(url, {
domain: this.detection.domain,
startTime: this.searchStartTime,
endTime: this.searchEndTime,
@@ -234,6 +243,9 @@ export default {
reject(response)
}
})
} else {
resolve()
}
} catch (e) {
reject(e)
}

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

@@ -142,7 +142,7 @@ export default {
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
console.error(error)
const chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
@@ -186,7 +186,16 @@ export default {
const nowTime = getSecond(new Date())
this.searchStartTime = this.detection.startTime - allTime / 2
this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
get(api.detection.performanceEvent.metric, {
let url
if (this.detection.eventType === 'dns error') {
url = api.detection.performanceEvent.dnsErrorMetric
} else if (this.detection.eventType === 'http error') {
url = api.detection.performanceEvent.httpErrorMetric
} else if (this.detection.eventType === 'high dns response time') {
url = api.detection.performanceEvent.highDnsResponseTimeMetric
}
if (url) {
get(url, {
serverIp: this.detection.serverIp,
startTime: this.searchStartTime,
endTime: this.searchEndTime,
@@ -198,6 +207,9 @@ export default {
reject(response)
}
})
} else {
resolve()
}
} catch (e) {
reject(e)
}