feat: 增加记住密码功能和Data Recevice status Monitoring弹窗右侧图表根据容器大小自动resize功能

package.json

@@ -20,6 +20,7 @@
     "clipboard": "^2.0.4",
     "codemirror": "^5.46.0",
     "cron-parser": "^2.10.0",
+    "crypto-js": "^4.1.1",
     "dayjs": "^1.8.0",
     "dom-align": "1.12.0",
     "echarts": "^5.4.2",
@@ -41,6 +42,7 @@
     "vue-ls": "^3.2.0",
     "vue-photo-preview": "^1.1.3",
     "vue-print-nb-jeecg": "^1.0.12",
+    "vue-resize": "^1.0.1",
     "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vue-virtual-scroller": "^1.1.2",
@@ -53,6 +55,7 @@
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
+    "@types/crypto-js": "^4.1.1",
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-eslint": "^3.3.0",
     "@vue/cli-service": "^3.3.0",

src/components/CustomChart/index.vue

@@ -21,6 +21,11 @@ export default {
     this.chart = echarts.init(this.$refs.containerRef)
     this.chart.setOption(this.option)
   },
+  methods: {
+    resize() {
+      this.chart && this.chart.resize()
+    }
+  },
   watch : {
     option: {
       handler() {

src/main.js

@@ -63,6 +63,10 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 Vue.component('RecycleScroller', RecycleScroller)
 
+import 'vue-resize/dist/vue-resize.css'
+import VueResize from 'vue-resize'
+Vue.use(VueResize)
+
 Vue.prototype.rules = rules
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)

src/utils/safe.js

@@ -0,0 +1,23 @@
+import CryptoJS from "crypto-js";
+
+const key = CryptoJS.enc.Utf8.parse('6f4ff1fc2b53b9ee')
+const iv = CryptoJS.enc.Utf8.parse('jskey_1618823712')
+
+export function encrypt(data) {
+    const encrypted = CryptoJS.AES.encrypt(data, key, {
+        iv,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7
+    });
+    return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
+}
+
+export function decrypt(encryptedData) {
+    const encrypted = CryptoJS.AES.decrypt(encryptedData, key, {
+        iv,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7
+    });
+    return encrypted.toString(CryptoJS.enc.Utf8);
+}
+

src/views/stationOperation/components/MapPane.vue

@@ -233,7 +233,8 @@
         <!-- 右侧图表展示栏 -->
         <div class="data-receive-status-chart" :class="{ 'on-screen': !leftPaneShow }">
           <template v-if="showChart">
-            <RealTimeDataChart :list="statusList" :scale-settings="initialDataRecieveSettings" />
+            <RealTimeDataChart ref="realtimeChartRef" :list="statusList" :scale-settings="initialDataRecieveSettings" />
+            <resize-observer @notify="handleResize" />
           </template>
         </div>
         <!-- 右侧图表展示栏结束 -->
@@ -792,6 +793,10 @@ export default {
       } finally {
         this.isGettingStatusList = false
       }
+    },
+
+    handleResize() {
+      this.$refs.realtimeChartRef.resize()
     }
   },
   watch: {

src/views/stationOperation/components/RealTimeDataChart.vue

@@ -14,7 +14,7 @@
       </div>
     </div>
     <!-- 图例结束 -->
-    <custom-chart ref="customChart" :option="option" :height="list.length * 295"></custom-chart>
+    <custom-chart ref="customChartRef" :option="option" :height="list.length * 295"></custom-chart>
   </div>
 </template>
 
@@ -276,6 +276,10 @@ export default {
     handleLegendChange(legend) {
       legend.isShow = !legend.isShow
       this.initChartOption()
+    },
+
+    resize() {
+      this.$refs.customChartRef.resize()
     }
   },
   watch: {

src/views/user/Login.vue

@@ -32,7 +32,7 @@
     </div>
 
     <div style="position: fixed; z-index: -999;">
-      <img src="@/assets/images/login/login-btn-active.png" alt="">
+      <img src="@/assets/images/login/login-btn-active.png" alt="" />
     </div>
   </div>
 </template>
@@ -43,6 +43,7 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { timeFix } from '@/utils/util'
 import { getAction } from '@/api/manage'
 import { mapActions } from 'vuex'
+import { encrypt, decrypt } from '@/utils/safe'
 
 export default {
   data() {
@@ -62,22 +63,26 @@ export default {
           {
             required: true,
             message: 'Password Required'
-          },
+          }
         ],
         inputCode: [
           {
             required: true,
-            message: 'Captchar Required',
+            message: 'Captchar Required'
-          },
+          }
-        ],
+        ]
       },
-      currdatetime: '',
+      currdatetime: ''
     }
   },
   created() {
     Vue.ls.remove(ACCESS_TOKEN)
     this.getRouterData()
     this.handleChangeCheckCode()
+    const { username, password, rememberPwd } = this.getCredentials()
+    this.model.username = username
+    this.model.password = password
+    this.model.rememberPwd = rememberPwd !== 'false'
   },
   methods: {
     ...mapActions(['Login']),
@@ -97,7 +102,7 @@ export default {
       this.currdatetime = new Date().getTime()
       this.model.inputCode = ''
       getAction(`/sys/randomImage/${this.currdatetime}`)
-        .then((res) => {
+        .then(res => {
           if (res.success) {
             this.randCodeImage = res.result
             this.requestCodeSuccess = true
@@ -123,10 +128,17 @@ export default {
             username: this.model.username,
             password: this.model.password,
             captcha: this.model.inputCode,
-            checkKey: this.currdatetime,
+            checkKey: this.currdatetime
           }
           this.isSubmitting = true
           const res = await this.Login(loginParams)
+          // 记住密码
+          if (this.model.rememberPwd) {
+            this.saveCredentials(this.model.username, this.model.password, true)
+          } else {
+            this.clearCredentials()
+            localStorage.setItem('rememberPwd', false)
+          }
           this.loginSuccess()
         } catch (error) {
           if (error && error.code === 412) {
@@ -139,13 +151,30 @@ export default {
       }
     },
 
+    saveCredentials(username, password, rememberPwd) {
+      localStorage.setItem('username', username)
+      localStorage.setItem('password', encrypt(password))
+      localStorage.setItem('rememberPwd', rememberPwd)
+    },
+    getCredentials() {
+      const username = localStorage.getItem('username')
+      const pwd = localStorage.getItem('password')
+      const password = pwd ? decrypt(pwd) : undefined
+      const rememberPwd = localStorage.getItem('rememberPwd')
+      return { username, password, rememberPwd }
+    },
+    clearCredentials() {
+      localStorage.removeItem('username')
+      localStorage.removeItem('password')
+    },
+
     //登录失败
     requestFailed(err) {
       let description = ((err.response || {}).data || {}).message || err.message || 'Request Error'
       this.$notification['error']({
         message: 'Login Failed',
         description: description,
-        duration: 4,
+        duration: 4
       })
       //账户密码登录错误后更新验证码
       this.handleChangeCheckCode()
@@ -159,10 +188,10 @@ export default {
       })
       this.$notification.success({
         message: 'Welcome',
-        description: `${timeFix()}，Welcome Back`,
+        description: `${timeFix()}，Welcome Back`
       })
-    },
+    }
-  },
+  }
 }
 </script>
 <style lang="less" scoped>