CN-90 fix: 色阶增加单位

build/webpack.config.js

@@ -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(),
 ]
 

package.json

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

src/Login.vue

@@ -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') {
+          if (res.code === 200) {
-            this.loading = true
-            this.blockOperation.query = true
             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('密码错误')
+      })
-          }
-        }
-      )
     }
   }
 }

src/components/charts/ChartMap.vue

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

src/components/layout/Header.vue

@@ -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="提示"
+    <el-dialog v-model="showChangePin"
-               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-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
-                <el-input v-model="changePassForm.oldPass" type="password"></el-input>
+                <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-form-item :label="$t('overall.newPassword')" prop="newPwd">
-              <el-input v-model="changePassForm.newPass" type="password"></el-input>
+              <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-form-item :label="$t('overall.confirmNewPassword')" prop="newPwd2">
-              <el-input v-model="changePassForm.newPass2" type="password"></el-input>
+              <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 @click="showChangePin = false">{{$t('overall.cancel')}}</el-button>
-      <el-button type="primary" @click="submit">确认更改密码</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) => {
+    const passwordComparison = (rule, value, callback) => {
-      if (value === '') {
+      if (value !== this.changePassForm.newPwd) {
-        callback(new Error('请再次输入密码'))
+        callback(new Error(this.$t('validate.passwordConsistent')))
-      } else if (value !== this.changePassForm.newPass) {
-        callback(new Error('两次输入密码不一致!'))
       } else {
         callback()
       }
@@ -141,14 +137,14 @@ export default {
       ],
       from: '', // entity类型
       changePassForm: {
-        oldPass: '',
+        oldPwd: '',
-        newPass: '',
+        newPwd: '',
-        newPass2: ''
+        newPwd2: ''
       },
       changePassFormRules: {
-        oldPass: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+        oldPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        newPass: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+        newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
-        newPass2: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { validator: passwordYN, 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({
+              this.$message.success('Success')
-                message: '密码修改成功',
-                type: 'success'
-              })
               this.showChangePin = false
-            } else if (res.msg == 'user oldpwd error') {
+            } else if (res.code === 518005) {
-              ElMessage.error('密码错误')
+              this.$message.error('密码错误')
             }
           })
         } else {

src/components/table/CnDataList.vue

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

src/utils/tools.js

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

src/views/charts/Chart.vue

@@ -267,7 +267,7 @@ export default {
       noData: false, // 查询结果为空
       throttle: null, // 节流器
       isError: false, // 接口响应是否报错
-      errorInfo:"",//接口具体错误信息
+      errorInfo: ''// 接口具体错误信息
 
     }
   },
@@ -309,9 +309,9 @@ export default {
               if (response.code === 200) {
                 this.singleValue.value = response.data.result
               } else {
-                  this.isError = true;
+                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}`)
@@ -332,9 +332,9 @@ export default {
                       }
                     })
                   } else {
-                      this.isError = true;
+                    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 sumData = []
-              const value = r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions
+            data.forEach(r => {
-              return {
+              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: Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
-                value: value || 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;
+          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)
@@ -629,9 +684,9 @@ export default {
             this.chartOption.grid.left = 75
           }
         } else {
-            this.isError = true;
+          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(() => {
@@ -747,9 +802,9 @@ export default {
             }
           })
         } else {
-            this.isError = true;
+          this.isError = true
-            this.noData = 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(() => {
@@ -806,16 +861,16 @@ export default {
               if (response2.code === 200) {
                 this.pieTableData = response2.data.result
               } else {
-                  this.isError = true;
+                this.isError = true
                 this.noData = true
-                  this.errorInfo = response.msg||response.message||'Unknown';
+                this.errorInfo = response.msg || response.message || 'Unknown'
               }
             })
           }
         } else {
-            this.isError = true;
+          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)
@@ -885,9 +940,9 @@ export default {
           this.table.tableColumns = this.getTableTitle(response.data.result)
           this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
         } else {
-            this.isError = true;
+          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)