NEZ-1422 feat： system--license 开发

2021-12-10 18:12:37 +08:00
parent 7200f390c8
commit 64bac4d7e1
13 changed files with 512 additions and 10 deletions
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -310,3 +310,149 @@
  font-size: 12px;
  line-height: 20px;
 }
+
+/* license */
+.system {
+  .license {
+    display: flex;
+    justify-content: flex-start;
+    margin-left: 10px;
+    .license-left,.license-right {
+      background: $--background-color-empty;
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      width: 700px;
+      height: 370px;
+      margin: 10px;
+    }
+    .license-left {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    .license-left-header,.license-right-header {
+      width: 100%;
+      height: 42px;
+    }
+    .license-left-header {
+      background: #00c398;
+      display: flex;
+      justify-content: space-between;
+      i.nz-icon-import-success {
+        background-color: #23bf9a;
+        color: #fff;
+      }
+      i.nz-icon-import-failed1 {
+        border-radius: 100%;
+        color: #EC7F66;
+      }
+      div:nth-of-type(1) {
+        display: flex;
+        justify-content: flex-start;
+      }
+      .license-left-header-icon,div:nth-of-type(2) {
+        line-height: 42px;
+        font-family: Roboto-Black;
+        font-size: 14px;
+        color: #fff;
+        letter-spacing: 0;
+        font-weight: 400;
+        i {
+          font-size: 23px;
+        }
+      }
+      .license-left-header-icon {
+        margin: 0 10px 0 15px;
+      }
+      div:nth-of-type(2) {
+        margin-right: 20px;
+        font-size: 14px;
+      }
+    }
+    .license-right-header {
+      background: $--license-left-title-background-color;
+      .license-right-header-title {
+        font-family: Roboto-Black;
+        font-size: 14px;
+        color: $--license-left-title-color;
+        letter-spacing: 0;
+        font-weight: 400;
+        line-height: 42px;
+        margin-left: 20px;
+      }
+    }
+    .license-right-table {
+      height: calc(100% - 50px);
+      padding: 15px 30px;
+      position: relative;
+      box-sizing: border-box;
+      flex: auto;
+      width: 100%;
+      .el-table {
+        width: 100%;
+        height: 100%;
+        .el-table__body-wrapper {
+          overflow-y: auto;
+          height: calc(100% - 49px);
+          background-color: $--background-color-empty;
+        }
+        tr {
+          background-color: $--background-color-empty;
+          td,th.is-leaf {
+            border-bottom: 1px solid $--border-color-light;
+          }
+        }
+      }
+      .el-table::before {
+        padding: 0 20px;
+      }
+    }
+    .license-left-body {
+      margin-left: 40px;
+      min-height: 280px;
+      .license-left-boyd-title {
+        font-family: Roboto-Medium;
+        font-size: 14px;
+        color: $--color-text-regular;
+        letter-spacing: 0;
+        font-weight: 500;
+      }
+      .license-left-boyd-value {
+        opacity: 0.6;
+        font-family: Roboto-Black;
+        font-size: 14px;
+        color: $--color-text-secondary;
+        letter-spacing: 0;
+        line-height: 22px;
+        font-weight: 400;
+        margin: 15px 0 25px 10px;
+      }
+    }
+    .license-left-footer {
+      margin: 0 0 15px 40px;
+      display: flex;
+      justify-content: flex-start;
+      .license-left-footer-download,.license-left-footer-upload {
+        span {
+          color: $--color-text-secondary;
+          opacity: 0.6;
+          font-family: Roboto-Regular;
+          font-size: 14px;
+          letter-spacing: 0;
+          font-weight: 400;
+        }
+        i {
+          color: $--license-left-icon-color;
+          font-size: 18px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .license-left-footer-upload {
+      margin-left: 40px;
+      .el-upload-list.el-upload-list--text {
+        display: none;
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/assets/css/font/iconfont.css
+++ b/nezha-fronted/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1635753657003') format('woff2'),
-       url('iconfont.woff?t=1635753657003') format('woff'),
-       url('iconfont.ttf?t=1635753657003') format('truetype');
+  src: url('iconfont.woff2?t=1639043279109') format('woff2'),
+  url('iconfont.woff?t=1639043279109') format('woff'),
+  url('iconfont.ttf?t=1639043279109') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-stack:before {
+  content: "\e7c6";
+}
+
 .nz-icon-import-failed:before {
  content: "\e757";
 }
--- a/nezha-fronted/src/assets/css/font/iconfont.ttf
+++ b/nezha-fronted/src/assets/css/font/iconfont.ttf
--- a/nezha-fronted/src/assets/css/font/iconfont.woff
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff
--- a/nezha-fronted/src/assets/css/font/iconfont.woff2
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff2
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1635753657003') format('woff2'),
-  url('./font/iconfont.woff?t=1635753657003') format('woff'),
-  url('./font/iconfont.ttf?t=1635753657003') format('truetype');
+  src: url('./font/iconfont.woff2?t=1639043279109') format('woff2'),
+  url('./font/iconfont.woff?t=1639043279109') format('woff'),
+  url('./font/iconfont.ttf?t=1639043279109') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-stack:before {
+  content: "\e7c6";
+}
+
 .nz-icon-import-failed:before {
  content: "\e757";
 }
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -187,6 +187,9 @@ $--overview-border-color: $--background-color-empty;

 /* system */
 $--system-input-background-color: #C0C4CC;
+$--license-left-title-background-color: $--background-color-1;
+$--license-left-title-color: $--color-text-primary;
+$--license-left-icon-color: $--color-text-regular;

 /* profile */
 $--profile-span-color: $--time-picker-hover-color;
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -184,6 +184,9 @@ $--overview-border-color: #E5EAEF;

 /* system */
 $--system-input-background-color: $--background-color-empty;
+$--license-left-title-background-color: $--background-color-base;
+$--license-left-title-color: #666666;
+$--license-left-icon-color: $--overview-icon-color;

 /* profile */
 $--profile-span-color: $--color-text-link;
@@ -193,7 +196,7 @@ $--profile-2FA-background-color: $--profile-span-background-color;
 $--profile-2FA-color: $--color-text-link;

 /* guide */
-$--guide-border-color: #18171D;
+$--guide-border-color: $--license-left-icon-color;
 $--guide-icon-border-color: #666666;
 $--guide-icon-color: $--guide-icon-border-color;

--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -257,7 +257,7 @@ export default {
    upload () {
      const form = new FormData()
      form.append('file', this.uploadFile.file.raw)
-      this.$post('/sys/license/upload', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+      this.$post('/sys/license/upload', form).then(res => {
        if (res.code == 200) {
          this.licenseStat()
        } else {
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -368,6 +368,9 @@
          </el-form>
        </div>
      </el-tab-pane>
+      <el-tab-pane :label="$t('config.system.license.license')" name="license">
+        <license v-if="activeTab === 'license'"></license>
+      </el-tab-pane>
    </el-tabs>
  </div>
 </template>
@@ -381,9 +384,10 @@ import notifyMethod from './system/notifyMethodTab'
 import linkTab from './system/linkTab'
 import apiKeyTab from './system/apiKeyTab'
 import moment from 'moment-timezone'
+import License from './system/license'
 export default {
  name: 'system',
-  components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab },
+  components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab, License },
  data () {
    return {
      imageFormatErr: false,
@@ -608,7 +612,7 @@ export default {
        console.error('type is required')
        return
      }
-      if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey') {
+      if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey' || type == 'license') {
        return
      }
      this.$get('/sys/config/' + type).then(response => {
--- a/nezha-fronted/src/components/page/config/system/license.vue
+++ b/nezha-fronted/src/components/page/config/system/license.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="license">
+    <div class="license-left">
+      <div class="license-left-header">
+        <div>
+         <div class="license-left-header-icon">
+           <!-- 上传 -->
+           <i v-if="UploadedSuccessfully" class="nz-icon nz-icon-import-success"></i>
+           <i v-else-if="uploadFailed" class="nz-icon nz-icon-import-failed1"></i>
+           <!-- 导入 -->
+           <i v-else-if="downloadSuccessful" class="nz-icon nz-icon-import-success"></i>
+           <i v-else-if="downloadFailed" class="nz-icon nz-icon-import-failed1"></i>
+         </div>
+          <div>{{$t('license.nzTitleValue')}}</div>
+        </div>
+        <div>{{$t('license.active')}}</div>
+      </div>
+      <div class="license-left-body">
+        <div>
+          <div class="license-left-boyd-title" style="margin-top: 25px">{{$t('license.id')}}</div>
+          <div class="license-left-boyd-value">{{ licenseList.id }}</div>
+        </div>
+        <div>
+          <div class="license-left-boyd-title">{{$t('license.proDate')}}</div>
+          <div class="license-left-boyd-value">{{formatDate(licenseList.production_date)}}</div>
+        </div>
+        <div>
+          <div class="license-left-boyd-title">{{$t('license.expDate')}}</div>
+          <div class="license-left-boyd-value" style="margin: 15px" v-for="(item,index) in expData" :key="index">
+            <template v-if="item.license.license_type === 'expiration' && item.id === '20001'">{{formatDate(item.license.exp_date)}}</template>
+          </div>
+        </div>
+      </div>
+      <div class="license-left-footer">
+        <div class="license-left-footer-download">
+          <i @click="downloadMib()" class="nz-icon nz-icon-download"></i><span>{{$t('license.downloadID')}}</span>
+        </div>
+        <el-upload
+          ref="upload"
+          accept=".xml"
+          action=""
+          class="license-left-footer-upload"
+          :file-list="uploadFileList"
+          :auto-upload="false"
+          :on-change="handleChange"
+        >
+          <i class="nz-icon nz-icon-upload"></i><span>{{$t('license.uploadLicense')}}</span>
+        </el-upload>
+      </div>
+    </div>
+    <div class="license-right">
+      <div class="license-right-header">
+        <div class="license-right-header-title">{{$t('license.devices')}}&nbsp;({{tableData.length}})</div>
+      </div>
+      <div class="license-right-table">
+        <el-table :data="tableData">
+          <el-table-column v-for="(item, index) in tableTitle" :key="index">
+            <template slot="header">
+              <span class="data-column__span">{{item.label}} <i class="nz-icon nz-icon-label" v-if="item.type==='label'"/></span>
+            </template>
+            <template slot-scope="scope" :column="item">
+              <template v-if="item.prop === 'devicesName'">
+                <span>{{scope.row.host}}</span>
+              </template>
+              <template v-if="item.prop === 'status'">
+                <div v-if="scope.row.status === 0">
+                  <div class="active-icon green-bg inline-block"></div> {{ $t('license.active') }}
+                </div>
+                <div v-else-if="scope.row.status !== 0">
+                  <div class="active-icon red-bg inline-block"></div> {{ $t('license.inactive') }}
+                </div>
+              </template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import licenseData from '@/components/page/config/system/licenseData'
+import statusDate from '@/components/page/config/system/statusDate'
+
+export default {
+  name: 'license',
+  mixins: [licenseData, statusDate],
+  data () {
+    return {
+      licenseList: {},
+      url: '/sys/license/detail',
+      tableData: [],
+      tableTitle: [
+        {
+          label: this.$t('license.devicesName'),
+          prop: 'devicesName'
+        },
+        {
+          label: this.$t('license.status'),
+          prop: 'status'
+        }
+      ],
+      expData: [],
+      uploadFileList: [],
+      uploadFile: { file: '' },
+      UploadedSuccessfully: true, // 上传成功
+      uploadFailed: false, // 上传失败
+      downloadSuccessful: false, // 下载成功
+      downloadFailed: false // 下载失败
+    }
+  },
+  methods: {
+    licenseGetData () {
+      this.$get('/sys/license/detail').then(res => {
+        if (res.code === 200) {
+          this.licenseList = res.data.license.hasp
+          console.log(res)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    formatDate (date) {
+      const dateTime = new Date()
+      dateTime.setTime(date * 1000)
+      const year = dateTime.getFullYear()
+      const month = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1
+      const day = dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
+      const hour = dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours()
+      const minute = dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes()
+      const second = dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
+      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
+    },
+    licenseGetStatus () {
+      this.$get('/sys/license/status', { scope: 'all' }).then(res => {
+        if (res.code === 200) {
+          this.tableData = res.data.list
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleChange (file, fileList) {
+      if (fileList.length > 0) {
+        this.uploadFileList = [fileList[fileList.length - 1]]
+      }
+      this.uploadFile.file = this.uploadFileList[0]
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.uploadFile.file.raw)
+      this.$post('/sys/license/upload', form).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.UploadedSuccessfully = true
+        } else {
+          this.$message.error(res.msg)
+          this.uploadFailed = true
+        }
+      })
+    },
+    downloadMib () {
+      this.$get('/sys/license/token').then(res => {
+        if (res.code === 200) {
+          console.log(res)
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.downloadSuccessful = true
+        } else {
+          this.$message.error(res.msg)
+          this.downloadFailed = true
+        }
+      })
+    }
+  },
+  mounted () {
+    this.licenseGetData()
+    this.licenseGetStatus()
+  }
+}
+</script>
--- a/nezha-fronted/src/components/page/config/system/licenseData.js
+++ b/nezha-fronted/src/components/page/config/system/licenseData.js
@@ -0,0 +1,83 @@
+const licenseData = {
+  msg: 'success',
+  code: 200,
+  data: {
+    license: {
+      hasp: {
+        product: {
+          name: 'nezha20001',
+          id: '200'
+        },
+        configuration: {
+          'haspsl-adminmode': ''
+        },
+        production_date: '1638954836',
+        updatecounter: '0',
+        clone_protected: 'true',
+        license_manager: {
+          host_fingerprint: 'MXhJSdc5YrZMz7VoMEobABA1CUoB0CVhHDFbRkvOiOmX4BIA+RYKADAQIAGYLaN1jtjVqVGPBkDQ0gpZDdjAopbROkcsbCASBiE4oCsABKYlSAzgaJ0jZmsWcbNRMBRAM1YTshRIxGDOEbNlVOTBo27pLICQaVkKAASUF4jZMlr/QkmULPEEQLksEoAVWJhEbBmtczQkwrgHcQoAqAIVahpCFqGM1jliNswdkGPFCAETYBAtC5ieEw==',
+          ip: '127.0.0.1',
+          uptime: '800731',
+          hostname: 'desktop-it1fcdr',
+          name: 'desktop-it1fcdr',
+          time: '1639048095',
+          osversion: 'Build 19043',
+          osname: 'Windows 10 Enterprise',
+          architecture: 'Intel64 Family 6 Model 142 Stepping 11'
+        },
+        type: 'HASP-SL',
+        parentid: '0',
+        feature: [{
+          concurrency: {
+            count: 'station',
+            seats: 'unlimited',
+            export: 'network,display,local'
+          },
+          license: {
+            license_type: 'perpetual'
+          },
+          usable: 'true',
+          name: '',
+          id: '0',
+          locked: 'true'
+        }, {
+          concurrency: {
+            count: 'station',
+            seats: 'unlimited',
+            export: 'local'
+          },
+          license: {
+            license_type: 'expiration',
+            exp_date: '1639094399'
+          },
+          usable: 'true',
+          name: 'nezha',
+          id: '20001',
+          locked: 'true'
+        }, {
+          concurrency: {
+            count: 'station',
+            seats: 'unlimited',
+            export: '1'
+          },
+          license: {
+            license_type: 'trial',
+            exp_date: '16390943911111111'
+          },
+          usable: 'true',
+          name: 'nezha1',
+          id: '200011',
+          locked: 'true'
+        }],
+        vendor: {
+          name: 'DEMOMA - evaluation',
+          id: '37515'
+        },
+        disabled: 'false',
+        id: '551949053204697990'
+      }
+    }
+  },
+  time: '2021-12-08 10:20:15'
+}
+export default licenseData
--- a/nezha-fronted/src/components/page/config/system/statusDate.js
+++ b/nezha-fronted/src/components/page/config/system/statusDate.js
@@ -0,0 +1,74 @@
+const statusData = {
+  msg: 'success',
+  code: 200,
+  data: {
+    list: [
+      {
+        id: 1,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 0
+      }, {
+        id: 2,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 1
+      }, {
+        id: 3,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 0
+      }, {
+        id: 4,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 2
+      }, {
+        id: 5,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 2
+      }, {
+        id: 6,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 2
+      }, {
+        id: 7,
+        serverid: '868113b2-bfa7-4534-89ce-962d2781895c',
+        component: 'nz-web',
+        host: '192.168.36.162',
+        port: 80,
+        protocol: 'http',
+        utime: 1638958830021,
+        status: 2
+      }
+    ]
+  },
+  time: '2021-12-08 10:20:40'
+}
+export default statusData