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

CN-90 fix: 色阶增加单位

Browse Source
This commit is contained in:
chenjinsong
2021-08-26 17:14:51 +08:00
parent 51db57d3a5
commit fa7a3b4a96
10 changed files with 205 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
build/webpack.config.js
View File

@@ -1,7 +1,9 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
@@ -66,6 +68,14 @@ const config = {
const plugins = [
new VueLoaderPlugin(),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 匹配文件名
threshold: 10240, // 对10K以上的数据进行压缩
minRatio: 0.8,
deleteOriginalAssets: false // 是否删除源文件
})/*,
new UglifyJsPlugin({
uglifyOptions: {
compress: {
@@ -76,7 +86,7 @@ const plugins = [
exclude: /manifest.+js/,
sourceMap: config.build.productionSourceMap,
parallel: true
})
})*/
// new BundleAnalyzerPlugin(),
]

1
package.json
View File

@@ -52,6 +52,7 @@
"@vue/compiler-sfc": "^3.0.0",
"@vue/component-compiler-utils": "^3.2.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^8.0.1",
"eslint": "^7.22.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",

16
src/Login.vue
View File

@@ -40,7 +40,6 @@
<script>
import { mapActions } from 'vuex'
import { post } from '@/utils/http'
import { ElMessage } from 'element-plus'
export default {
name: 'Login',
@@ -64,18 +63,19 @@ export default {
// }
post('sys/login', { username: this.username, pin: this.pin }).then(
res => {
if (res.code === 200 && res.msg == 'success') {
this.loading = true
this.blockOperation.query = true
if (res.code === 200) {
this.loginSuccess(res)
localStorage.setItem('cn-username', this.username)
} else if (res.code === 518005) {
this.$message.error(this.$t('tip.incorrectUsernameOrPassword'))
} else {
this.$message.error(this.$t('tip.unknownError'))
}
}
).finally(() => {
this.loading = false
this.blockOperation.query = false
ElMessage.error('密码错误')
}
}
)
})
}
}
}

2
src/components/charts/ChartError.vue
View File

@@ -23,7 +23,7 @@ export default {
name: 'ChartError',
props: {
isError: Boolean,
errorInfo:String
errorInfo: String
}
}
</script>

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

@@ -28,7 +28,7 @@ export default {
data () {
return {
errorContent: '出错了。。。',
isError: true,
isError: true
}
}
}

55
src/components/layout/Header.vue
View File

@@ -38,43 +38,42 @@
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<div id="header-to-changepin" @click="showPinDialog">Change pin</div>
<div id="header-to-changepin" @click="showPinDialog">{{$t('overall.changePin')}}</div>
</el-dropdown-item>
<el-dropdown-item>
<div id="header-to-logout" @click="logout">Sign out</div>
<div id="header-to-logout" @click="logout">{{$t('overall.logout')}}</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <change-password :cur-user="username" :show-dialog="showChangePin" @click="showPinDialog" @dialogClosed="dialogClosed"></change-password>-->
<el-dialog title="提示"
v-model="showChangePin"
<el-dialog v-model="showChangePin"
width="30%"
:before-close="handleClose">
<el-form :rules="changePassFormRules" :model="changePassForm" ref="changePassForm">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="旧密码" prop="oldPass">
<el-input v-model="changePassForm.oldPass" type="password"></el-input>
<el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
<el-input v-model="changePassForm.oldPwd" type="password"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="新密码" prop="newPass">
<el-input v-model="changePassForm.newPass" type="password"></el-input>
<el-form-item :label="$t('overall.newPassword')" prop="newPwd">
<el-input v-model="changePassForm.newPwd" type="password"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="确认新密码" prop="newPass2">
<el-input v-model="changePassForm.newPass2" type="password"></el-input>
<el-form-item :label="$t('overall.confirmNewPassword')" prop="newPwd2">
<el-input v-model="changePassForm.newPwd2" type="password"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showChangePin = false">取 消</el-button>
<el-button type="primary" @click="submit">确认更改密码</el-button>
<el-button @click="showChangePin = false">{{$t('overall.cancel')}}</el-button>
<el-button type="primary" @click="submit">{{$t('overall.update')}}</el-button>
</span>
</template>
</el-dialog>
@@ -85,15 +84,12 @@
import { useRoute } from 'vue-router'
import { get, put } from '@/utils/http'
import { entityType, storageKey } from '@/utils/constants'
import { ElMessage } from 'element-plus'
export default {
name: 'Header',
data () {
const passwordYN = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.changePassForm.newPass) {
callback(new Error('两次输入密码不一致!'))
const passwordComparison = (rule, value, callback) => {
if (value !== this.changePassForm.newPwd) {
callback(new Error(this.$t('validate.passwordConsistent')))
} else {
callback()
}
@@ -141,14 +137,14 @@ export default {
],
from: '', // entity类型
changePassForm: {
oldPass: '',
newPass: '',
newPass2: ''
oldPwd: '',
newPwd: '',
newPwd2: ''
},
changePassFormRules: {
oldPass: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
newPass: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
newPass2: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { validator: passwordYN, trigger: 'blur' }]
oldPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
newPwd2: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: passwordComparison, trigger: 'blur' }]
}
}
},
@@ -231,15 +227,12 @@ export default {
submit () {
this.$refs.changePassForm.validate((valid) => {
if (valid) {
put('sys/user/pin', { oldPin: this.changePassForm.oldPass, newPin: this.changePassForm.newPass }).then(res => {
put('sys/user/pin', { oldPin: this.changePassForm.oldPwd, newPin: this.changePassForm.newPwd }).then(res => {
if (res.code === 200) {
ElMessage.success({
message: '密码修改成功',
type: 'success'
})
this.$message.success('Success')
this.showChangePin = false
} else if (res.msg == 'user oldpwd error') {
ElMessage.error('密码错误')
} else if (res.code === 518005) {
this.$message.error('密码错误')
}
})
} else {

2
src/components/table/CnDataList.vue
View File

@@ -82,7 +82,7 @@ export default {
},
data () {
return {
keyWord:"",
keyWord: '',
fromRoute: fromRoute,
tools: {
showCustomTableTitle: false // 自定义列弹框是否显示

8
src/utils/tools.js
View File

@@ -392,12 +392,16 @@ export function replaceUrlPlaceholder (url, params) {
_.forIn(params, (value, key) => {
url = url.replace('{{' + key + '}}', value)
})
return doubleQuotationToSingle(url)
return url
}
// 双引号替换为单引号
export function doubleQuotationToSingle (content) {
return content.replace(/\"/g, "'")
}
// 双引号加斜杠转义
export function doubleQuotationEscape (content) {
return content.replace(/\"/g, '\\\"')
}
// 下划线转换驼峰
export function lineToHump (name) {
return name.replace(/\_(\w)/g, function (all, letter) {
@@ -458,5 +462,3 @@ function JSONParse (data) {
return firstParse
}
}

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

@@ -266,8 +266,8 @@ export default {
loading: true,
noData: false, // 查询结果为空
throttle: null, // 节流器
isError:false,//接口响应是否报错
errorInfo:"",//接口具体错误信息
isError: false, // 接口响应是否报错
errorInfo: ''// 接口具体错误信息
}
},
@@ -308,10 +308,10 @@ export default {
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.singleValue.value = response.data.result
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
if (this.isSingleValueWithEcharts) { // 带曲线的单值图
const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -331,10 +331,10 @@ export default {
}
}
})
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -372,21 +372,55 @@ export default {
getTitle (r) {
let title = ''
if (r.establishLatency || r.httpResponseLatency || r.sslConLatency) {
title = `: ${unitConvert(r.establishLatency || r.httpResponseLatency || r.sslConLatency, unitTypes.time).join(' ')}`
title += `: ${unitConvert(r.establishLatency || r.httpResponseLatency || r.sslConLatency, unitTypes.time).join(' ')}`
}
if (r.sequenceGapLossPercent || r.pktRetransPercent) {
const d = unitConvert(r.sequenceGapLossPercent || r.pktRetransPercent, unitTypes.number)
title = d[0] === '0.00' ? ': 0' : `: ${d.join(' ')} %`
title += d[0] === '0.00' ? ': 0' : `: ${d.join(' ')} %`
}
if (r.sessions) {
title = `\nSessions: ${unitConvert(r.sessions, unitTypes.number).join(' ')}`
title += `\nSessions: ${unitConvert(r.sessions, unitTypes.number).join(' ')}`
}
if (r.packets) {
title += `\nPackets: ${unitConvert(r.packets, unitTypes.number).join(' ')}`
}
if (r.bytes) {
title = `\nBytes: ${unitConvert(r.bytes, unitTypes.byte).join(' ')}`
title += `\nBytes: ${unitConvert(r.bytes, unitTypes.byte).join(' ')}`
}
title = title || ': 0'
return title
},
getTitle2 (item, valueColumn) {
let title = ''
switch (valueColumn) {
case 'sessions': {
title = `\nSessions: ${unitConvert(item.value, unitTypes.number).join(' ')}`
break
}
case 'packets': {
title = `\nPackets: ${unitConvert(item.value, unitTypes.number).join(' ')}`
break
}
case 'bytes': {
title = `\nBytes: ${unitConvert(item.value, unitTypes.byte).join(' ')}`
break
}
case 'establishLatency':
case 'httpResponseLatency':
case 'sslConLatency': {
const result = unitConvert(item.value, unitTypes.time)
title = `: ${result[0] === 0 ? 0 : result.join(' ')}`
break
}
case 'sequenceGapLossPercent':
case 'pktRetransPercent': {
title = `: ${unitConvert(item.value, unitTypes.number).join(' ')}`
break
}
default: break
}
return title
},
changeTab (tab) {
this.activeTab = tab.paneName
},
@@ -482,12 +516,22 @@ export default {
})
imageSeries.data = pointData
} else if (this.isMapBlock) {
const seriesData = data.map(r => {
const value = r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions
return {
const sumData = []
data.forEach(r => {
const hit = sumData.find(s => s.id === r.serverId)
if (hit) {
hit.value += Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
} else {
sumData.push({
id: r.serverId,
title: this.getTitle(r),
value: value || 0
value: Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
})
}
})
const seriesData = sumData.map(r => {
return {
...r,
title: this.getTitle2(r, chartParams.valueColumn)
}
})
polygonSeries.data = [...seriesData]
@@ -513,15 +557,26 @@ export default {
heatLegend.marginLeft = 15
heatLegend.valign = 'bottom'
const minRange = heatLegend.valueAxis.axisRanges.create()
minRange.value = heatLegend.minValue
minRange.label.text = minRange.value === 0 ? 0 : unitConvert(heatLegend.minValue, chartParams.unitType).join(' ')
const maxRange = heatLegend.valueAxis.axisRanges.create()
maxRange.value = heatLegend.maxValue
maxRange.label.text = maxRange.value === 0 ? 0 : unitConvert(heatLegend.maxValue, chartParams.unitType).join(' ')
heatLegend.valueAxis.renderer.labels.template.adapter.add('text', function (labelText) {
return ''
})
const polygonTemplate = polygonSeries.mapPolygons.template
polygonTemplate.tooltipText = '{name}{title}'
polygonTemplate.nonScalingStroke = true
polygonTemplate.strokeWidth = 0.5
}
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
@@ -628,10 +683,10 @@ export default {
}
this.chartOption.grid.left = 75
}
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -746,10 +801,10 @@ export default {
}
}
})
}else {
this.isError = true;
this.noData = true;
this.errorInfo = response.msg||response.message||'Unknown';
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg || response.message || 'Unknown'
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -805,17 +860,17 @@ export default {
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
if (response2.code === 200) {
this.pieTableData = response2.data.result
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
})
}
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
@@ -884,10 +939,10 @@ export default {
this.table.tableData = response.data.result
this.table.tableColumns = this.getTableTitle(response.data.result)
this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
}else {
this.isError = true;
} else {
this.isError = true
this.noData = true
this.errorInfo = response.msg||response.message||'Unknown';
this.errorInfo = response.msg || response.message || 'Unknown'
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)