增加自定义仪表盘

2022-10-11 20:12:06 +08:00
parent 7752d9465d
commit 1885161d67
21 changed files with 226 additions and 64 deletions
--- a/Web/syseye/package-lock.json
+++ b/Web/syseye/package-lock.json
@@ -5349,6 +5349,11 @@
        }
      }
    },
+    "js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
--- a/Web/syseye/package.json
+++ b/Web/syseye/package.json
@@ -14,6 +14,7 @@
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "echarts": "^5.3.3",
+    "js-base64": "^3.7.2",
    "quasar": "^2.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
--- a/Web/syseye/src/assets/b64.js
+++ b/Web/syseye/src/assets/b64.js
@@ -0,0 +1,117 @@
+/* eslint-disable camelcase */
+/* eslint-disable eqeqeq */
+/* eslint-disable no-useless-escape */
+// 1.加密解密方法使用：
+
+// 1.加密
+// var str = '124中文内容';
+// var base = new Base64();
+// var result = base.encode(str);
+// //document.write(result);
+
+// //2.解密
+// var result2 = base.decode(result);
+// document.write(result2);
+// //2.加密、解密算法封装：
+
+function Base64 () {
+  // private property
+  const _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+
+  // public method for encoding
+  this.encode = function (input) {
+    let output = ''
+    let chr1, chr2, chr3, enc1, enc2, enc3, enc4
+    let i = 0
+    input = _utf8_encode(input)
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++)
+      chr2 = input.charCodeAt(i++)
+      chr3 = input.charCodeAt(i++)
+      enc1 = chr1 >> 2
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
+      enc4 = chr3 & 63
+      if (isNaN(chr2)) {
+        enc3 = enc4 = 64
+      } else if (isNaN(chr3)) {
+        enc4 = 64
+      }
+      output = output +
+        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+        _keyStr.charAt(enc3) + _keyStr.charAt(enc4)
+    }
+    return output
+  }
+
+  // public method for decoding
+  this.decode = function (input) {
+    let output = ''
+    let chr1, chr2, chr3
+    let enc1, enc2, enc3, enc4
+    let i = 0
+    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '')
+    while (i < input.length) {
+      enc1 = _keyStr.indexOf(input.charAt(i++))
+      enc2 = _keyStr.indexOf(input.charAt(i++))
+      enc3 = _keyStr.indexOf(input.charAt(i++))
+      enc4 = _keyStr.indexOf(input.charAt(i++))
+      chr1 = (enc1 << 2) | (enc2 >> 4)
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
+      chr3 = ((enc3 & 3) << 6) | enc4
+      output = output + String.fromCharCode(chr1)
+      if (enc3 != 64) {
+        output = output + String.fromCharCode(chr2)
+      }
+      if (enc4 != 64) {
+        output = output + String.fromCharCode(chr3)
+      }
+    }
+    output = _utf8_decode(output)
+    return output
+  }
+
+  // private method for UTF-8 encoding
+  var _utf8_encode = function (string) {
+    string = string.replace(/\r\n/g, '\n')
+    let utftext = ''
+    for (let n = 0; n < string.length; n++) {
+      const c = string.charCodeAt(n)
+      if (c < 128) {
+        utftext += String.fromCharCode(c)
+      } else if ((c > 127) && (c < 2048)) {
+        utftext += String.fromCharCode((c >> 6) | 192)
+        utftext += String.fromCharCode((c & 63) | 128)
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224)
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128)
+        utftext += String.fromCharCode((c & 63) | 128)
+      }
+    }
+    return utftext
+  }
+  // private method for UTF-8 decoding
+  var _utf8_decode = function (utftext) {
+    let string = ''
+    let i = 0
+    let c = 0, c1 = 0, c2 = 0
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i)
+      if (c < 128) {
+        string += String.fromCharCode(c)
+        i++
+      } else if ((c > 191) && (c < 224)) {
+        c2 = utftext.charCodeAt(i + 1)
+        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63))
+        i += 2
+      } else {
+        c2 = utftext.charCodeAt(i + 1)
+        c1 = utftext.charCodeAt(i + 2)
+        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c1 & 63))
+        i += 3
+      }
+    }
+    return string
+  }
+}
+export default Base64
--- a/Web/syseye/src/layouts/MainLayout.vue
+++ b/Web/syseye/src/layouts/MainLayout.vue
@@ -1,22 +1,17 @@
 <template>
-<q-layout view="lHh Lpr lFf" style="background-color: rgb(239, 243, 246)">
+<q-layout view="lHh Lpr lFf" :style="`background-color: ${colors.background}`">
    <q-header elevated height-hint="98">
-        <q-toolbar class="text-white" style="background-color: rgb(210,61,42)">
+        <q-toolbar class="text-white" :style="`background-color: ${colors.toolbar}`">
            <q-toolbar-title> RmEye测试版v1.0.1.3 </q-toolbar-title>
-            <q-btn flat round dense icon="lightbulb">
-              <q-popup-proxy>
-                <q-banner>
-            <div class="q-pa-md row items-start q-gutter-md">
-              <q-color v-model="color1" @change="updateCookie" class="my-picker" />
-              <q-color v-model="color2" @change="updateCookie" class="my-picker" />
-              <q-color v-model="color3" @change="updateCookie" class="my-picker" />
-              <q-color v-model="color4" @change="updateCookie" class="my-picker" />
-            </div>
-                </q-banner>
-          </q-popup-proxy>
+            <q-btn flat dense icon="restore" label="重置颜色" @click="cleanUpCookie">
            </q-btn>
+            <q-popup-proxy>
+                <q-banner>
+                    <q-color v-model="colors.toolbar" @change="updateCookie(colors.toolbar)" class="my-picker" />
+                </q-banner>
+            </q-popup-proxy>
        </q-toolbar>
-        <q-toolbar style="font-size: 16px;background-color:rgb(47,43,48);">
+        <q-toolbar :style="`font-size: 16px;background-color: ${colors.layout}`">
            <q-breadcrumbs active-color="white">
                <q-breadcrumbs-el label="仪表盘" icon="dashboard" to="/page/dashboard" />
                <q-breadcrumbs-el label="未处理威胁列表" icon="report" to="#" @click="routerToThreatList(0);" />
@@ -24,6 +19,12 @@
                <q-breadcrumbs-el label="已忽略威胁列表" icon="texture" to="#" @click="routerToThreatList(2);" />
                <q-breadcrumbs-el label="白名单列表" icon="list" to="#" @click="routerToWhiteList();" />
            </q-breadcrumbs>
+
+                <q-popup-proxy>
+                    <q-banner>
+                        <q-color v-model="colors.layout" @change="updateCookie(colors.layout)" class="my-picker" />
+                    </q-banner>
+                </q-popup-proxy>
        </q-toolbar>
    </q-header>
    <template v-if="isInPlugin == false">
@@ -40,12 +41,16 @@
 </template>

 <script>
+import Base64 from '../assets/b64.js'
+
 import {
  defineComponent
 } from 'vue'
 import HtmlPanel from '../components/Html.vue' // 根据实际路径导入
 import axios from 'axios'
-import { Cookies } from 'quasar'
+import {
+  Cookies
+} from 'quasar'
 export default defineComponent({
  components: {
    HtmlPanel
@@ -61,12 +66,25 @@ export default defineComponent({
      miniState: true,
      plugin: [],
      isInPlugin: false,
-      PluginUrl: ''
+      PluginUrl: '',
+      colors: {
+        layout: 'rgb(47,43,48)',
+        toolbar: 'rgb(210,61,42)',
+        background: 'rgb(239, 243, 246)'
+      }
    }
  },
  methods: {
-    updateCookie (value) {
-      Cookies.set('color', { color: [this.color1, this.color2, this.color3, this.color4] })
+    updateCookie (selectItem) {
+      const b64Obj = new Base64()
+      Cookies.set('custom_banner', b64Obj.encode(JSON.stringify(this.colors)))
+    },
+    cleanUpCookie () {
+      Cookies.remove('custom_threat_item')
+      Cookies.remove('custom_banner')
+
+      // refesh
+      window.location.reload()
    },
    routerToWhiteList () {
      this.isInPlugin = false
@@ -100,6 +118,11 @@ export default defineComponent({
  },
  mounted () {
    this.getPluginsMenu()
+    const coockieCustomBanner = Cookies.get('custom_banner')
+    if (coockieCustomBanner) {
+      const b64Obj = new Base64()
+      this.colors = JSON.parse(b64Obj.decode(coockieCustomBanner))
+    }
  }
 })
 </script>
--- a/Web/syseye/src/pages/Dashboard.vue
+++ b/Web/syseye/src/pages/Dashboard.vue
@@ -14,7 +14,17 @@
                  item.value
                }}</q-item-label>
                                <q-item-label>{{ item.title }}</q-item-label>
+                                <q-popup-proxy>
+                                <q-banner>
+                                    <q-color v-model="item.color1" @change="updateCookie(Threatitems[index].color1)" class="my-picker" />
+                                </q-banner>
+                            </q-popup-proxy>
                            </q-item-section>
+                            <q-popup-proxy>
+                                <q-banner>
+                                    <q-color v-model="item.color2" @change="updateCookie(Threatitems[index].color2)" class="my-picker" />
+                                </q-banner>
+                            </q-popup-proxy>
                        </q-item>
                    </div>
                </div>
@@ -50,11 +60,15 @@
 </template>

 <script>
+import Base64 from '../assets/b64.js'
+
 import {
  defineComponent
 } from 'vue'
 import axios from 'axios'
-import { Cookies } from 'quasar'
+import {
+  Cookies
+} from 'quasar'
 import * as echarts from 'echarts'
 export default defineComponent({
  name: 'Dashboard',
@@ -101,6 +115,10 @@ export default defineComponent({
    }
  },
  methods: {
+    updateCookie (selectItem) {
+      const b64Obj = new Base64()
+      Cookies.set('custom_threat_item', b64Obj.encode(JSON.stringify(this.Threatitems)))
+    },
    get_threatStatistics () {
      axios
        .get('/api/v1/get/threat_statistics', {
@@ -191,13 +209,11 @@ export default defineComponent({
    setInterval(() => {
      this.get_threatStatistics()
    }, 10000)
-    const colors = Cookies.get('color')
-    if (colors.color) {
-      this.Threatitems.map((item, index) => {
-        item.color1 = colors.color[index]
-        item.color2 = colors.color[index]
-        return item
-      })
+    const cookieCustomThreatItem = Cookies.get('custom_threat_item')
+    if (cookieCustomThreatItem) {
+      const b64Obj = new Base64()
+
+      this.Threatitems = JSON.parse(b64Obj.decode(cookieCustomThreatItem))
    }
  }
 })