feat: 完善License相关功能，login页面下载功能完善

nezha-fronted/src/assets/css/components/common/login.scss

@@ -171,6 +171,10 @@
       height: 40px;
       width: auto;
       padding: 0 20px;
+      margin-bottom: 10px;
+    }
+    .download-btn.login-btn {
+      padding: 0 12px;
     }
   }
   .login-dialog-title{

nezha-fronted/src/assets/css/components/page/config/system.scss

@@ -334,6 +334,9 @@
       width: 100%;
       height: 42px;
     }
+    .license-left-header-red.license-left-header {
+      background-color: #EC7F66;
+    }
     .license-left-header {
       background: #00c398;
       display: flex;
@@ -343,8 +346,8 @@
         color: #fff;
       }
       i.nz-icon-import-failed1 {
-        border-radius: 100%;
+        background-color: #EC7F66;
-        color: #EC7F66;
+        color: #fff;
       }
       div:nth-of-type(1) {
         display: flex;
@@ -418,6 +421,7 @@
         font-weight: 500;
       }
       .license-left-boyd-value {
+        height: 22px;
         opacity: 0.6;
         font-family: Roboto-Black;
         font-size: 14px;

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=1639043279109') format('woff2'),
+  src: url('iconfont.woff2?t=1639385153414') format('woff2'),
-  url('iconfont.woff?t=1639043279109') format('woff'),
+  url('iconfont.woff?t=1639385153414') format('woff'),
-  url('iconfont.ttf?t=1639043279109') format('truetype');
+  url('iconfont.ttf?t=1639385153414') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-Upload1:before {
+  content: "\e75c";
+}
+
+.nz-icon-jiazai:before {
+  content: "\e758";
+}
+
+.nz-icon-huiche:before {
+  content: "\e756";
+}
+
+.nz-icon-xiangshang:before {
+  content: "\e759";
+}
+
+.nz-icon-xiangxia:before {
+  content: "\e75a";
+}
+
+.nz-icon-esc:before {
+  content: "\e75b";
+}
+
 .nz-icon-stack:before {
   content: "\e7c6";
 }

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=1639043279109') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1639385153414') format('woff2'),
-  url('./font/iconfont.woff?t=1639043279109') format('woff'),
+  url('./font/iconfont.woff?t=1639385153414') format('woff'),
-  url('./font/iconfont.ttf?t=1639043279109') format('truetype');
+  url('./font/iconfont.ttf?t=1639385153414') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-Upload1:before {
+  content: "\e75c";
+}
+
+.nz-icon-jiazai:before {
+  content: "\e758";
+}
+
+.nz-icon-huiche:before {
+  content: "\e756";
+}
+
+.nz-icon-xiangshang:before {
+  content: "\e759";
+}
+
+.nz-icon-xiangxia:before {
+  content: "\e75a";
+}
+
+.nz-icon-esc:before {
+  content: "\e75b";
+}
+
 .nz-icon-stack:before {
   content: "\e7c6";
 }

nezha-fronted/src/components/common/login.vue

@@ -28,7 +28,11 @@
         </div>
         <div class="login-license">
           <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
-          <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>
+<!--          <div v-if="!license.valid" class="license-info">INSTALLATION ID:&nbsp;{{license.token}}</div>-->
+          <div v-if="!license.valid" class="license-upload">
+<!--            <button type="button" class="login-btn" @click="downloadMib"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('license.dowLicense')}}</button>-->
+            <button type="button" class="login-btn download-btn" @click="downloadLogin"><span style="margin-right: 5px"><i class="nz-icon nz-icon-download1"></i></span>{{$t('license.download')}}</button>
+          </div>
           <div class="license-upload" v-if="!license.valid">
             <el-upload
               ref="upload"
@@ -265,6 +269,52 @@ export default {
         }
       })
     },
+    downloadLogin () {
+      this.$get('/sys/license/token').then(res => {
+        const fileName = 'Login' + '-' + this.getTimeString() + '.xml'
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
+        } else {
+          const url = URL.createObjectURL(new Blob([res]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
     bindQRCode: function (text) {
       text = text || 'https://www.baidu.com'
       if (!this.QRCode) {

nezha-fronted/src/components/page/config/system/license.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="license">
     <div class="license-left">
-      <div class="license-left-header">
+      <div class="license-left-header" :class="{'license-left-header-red':active !== 0}">
         <div>
          <div class="license-left-header-icon">
-           <!-- 上传 -->
+           <!-- 是否激活 -->
-           <i v-if="UploadedSuccessfully" class="nz-icon nz-icon-import-success"></i>
+           <i v-if="active === 0" class="nz-icon nz-icon-import-success"></i>
-           <i v-else-if="uploadFailed" class="nz-icon nz-icon-import-failed1"></i>
+           <i v-else 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 v-if="active === 0">{{$t('license.active')}}</div>
+        <div v-else>{{$t('license.inactive')}}</div>
       </div>
       <div class="license-left-body">
         <div>
@@ -26,14 +24,17 @@
         </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">
+          <div class="license-left-boyd-value" style="margin: 15px">
-            <template v-if="item.license.license_type === 'expiration' && item.id === '20001'">{{formatDate(item.license.exp_date)}}</template>
+            <span v-if="expData.id === '20001' && expData.license.license_type === 'expiration'">{{formatDate(expData.license.exp_date)}}</span>
+            <span v-else-if="expData.id === '20001' && expData.license.license_type === 'perpetual'">{{$t('license.permanent')}}</span>
+<!--            <span v-else-if="expData.id === '20001' && expData.license.license_type === 'trial'">{{$t('license.validPeriod')}}: {{formatDate(time_start)}} ~ {{ formatDate(end_time(time_start + total_time))}}</span>-->
+<!--            <span>{{$t('license.validPeriod')}} : {{formatDate(expData.license.time_start)}} ~ {{formatDate(expData.license.end_time)}}</span>-->
           </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>
+          <i @click="downloadLicense" class="nz-icon nz-icon-download"></i><span>{{$t('license.downloadID')}}</span>
         </div>
         <el-upload
           ref="upload"
@@ -44,13 +45,13 @@
           :auto-upload="false"
           :on-change="handleChange"
         >
-          <i class="nz-icon nz-icon-upload"></i><span>{{$t('license.uploadLicense')}}</span>
+          <i class="nz-icon nz-icon-Upload1"></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 class="license-right-header-title">{{$t('license.devices')}}&nbsp;({{tableData ? tableData.length : 0}})</div>
       </div>
       <div class="license-right-table">
         <el-table :data="tableData">
@@ -60,7 +61,7 @@
             </template>
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop === 'devicesName'">
-                <span>{{scope.row.host}}</span>
+                <span>{{getLicense(scope.row)}}</span>
               </template>
               <template v-if="item.prop === 'status'">
                 <div v-if="scope.row.status === 0">
@@ -79,12 +80,11 @@
 </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],
+  mixins: [statusDate],
   data () {
     return {
       licenseList: {},
@@ -100,13 +100,10 @@ export default {
           prop: 'status'
         }
       ],
-      expData: [],
+      expData: {},
       uploadFileList: [],
       uploadFile: { file: '' },
-      UploadedSuccessfully: true, // 上传成功
+      active: ''
-      uploadFailed: false, // 上传失败
-      downloadSuccessful: false, // 下载成功
-      downloadFailed: false // 下载失败
     }
   },
   methods: {
@@ -114,7 +111,12 @@ export default {
       this.$get('/sys/license/detail').then(res => {
         if (res.code === 200) {
           this.licenseList = res.data.license.hasp
-          console.log(res)
+          this.licenseList.feature.map(e => {
+            if (e.id === '20001') {
+              this.expData = e
+              // this.expData.license.end_time = this.expData.license.time_start * 1 + this.expData.license.total_time * 1
+            }
+          })
         } else {
           this.$message.error(res.msg)
         }
@@ -131,8 +133,31 @@ export default {
       const second = dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
       return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
     },
+    getTimeString () {
+      const split = '-'
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = this.formatNum(date.getMonth() + 1)
+      const day = this.formatNum(date.getDate())
+      const hours = this.formatNum(date.getHours())
+      const minutes = this.formatNum(date.getMinutes())
+      const seconds = this.formatNum(date.getSeconds())
+      return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds
+    },
+    formatNum (num) {
+      return num > 9 ? num : '0' + num
+    },
     licenseGetStatus () {
+      this.$get('/sys/license/status').then(res => {
+        if (res.code === 200) {
+          this.active = res.data.status
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
       this.$get('/sys/license/status', { scope: 'all' }).then(res => {
+        res = statusDate
+        return this.tableData = res.data.list
         if (res.code === 200) {
           this.tableData = res.data.list
         } else {
@@ -152,27 +177,52 @@ export default {
       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') })
+          return ''
-          this.UploadedSuccessfully = true
         } else {
           this.$message.error(res.msg)
-          this.uploadFailed = true
         }
       })
     },
-    downloadMib () {
+    downloadLicense () {
       this.$get('/sys/license/token').then(res => {
-        if (res.code === 200) {
+        const fileName = this.licenseList.id + '-' + this.getTimeString() + '.xml'
-          console.log(res)
+        if (window.navigator.msSaveOrOpenBlob) {
-          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          // 兼容ie11
-          this.downloadSuccessful = true
+          const blobObject = new Blob([res])
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
         } else {
-          this.$message.error(res.msg)
+          const url = URL.createObjectURL(new Blob([res]))
-          this.downloadFailed = true
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = fileName
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
         }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
       })
     }
   },
+  computed: {
+    getLicense () {
+      return function (data) {
+        return `${data.host}:${data.port}`
+      }
+    }
+  },
   mounted () {
     this.licenseGetData()
     this.licenseGetStatus()