NEZ-2271 feat：license 支持QR code 导出界面开发

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

@@ -147,4 +147,37 @@
       display: none;
     }
   }
+  .el-carousel__item{
+    text-align: center;
+  }
+  .nz-license-footer{
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 15px;
+   .el-pagination{
+      font-size: 14px;
+      .btn-prev, .btn-next{
+        color: #fff;
+        font-size: 14px;
+        margin: 0 5px;
+        border: none;
+        background-color: #CBCED1 !important;
+        border-radius: 50%;
+        height: 24px;
+        width: 24px;
+      }
+      .number {
+        font-size: 14px;
+        margin: 0px;
+        border: none;
+        background-color: transparent !important;
+      }
+      .number.active{
+        color: #FA901C;
+      }
+    }
+  }
+ .el-carousel__indicators.el-carousel__indicators--horizontal{
+    display: none;
+  }
 }

nezha-fronted/src/components/common/mixin/exportHtml.js

@@ -21,13 +21,9 @@ export default {
         end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[1])),
         vars: vars
       }
-      const loading = Loading.service({
+      this.$store.dispatch('dispatchHomeLoading', true)
-        lock: true,
-        customClass: 'export-pdf-mask',
-        background: 'rgba(0,0,0,.2)'
-      })
       this.$get('/visual/panel/snapshot', params, 'blob').then(res => {
-        loading.close()
+        this.$store.dispatch('dispatchHomeLoading', false)
         const self = this
         let fileName = name
         const resFileName = ''

nezha-fronted/src/components/layout/home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home" :class="mode">
+  <div class="home" :class="mode" v-my-loading="loading">
     <left-menu @refresh="refresh"></left-menu>
     <div ref="body" class="body">
       <Header></Header>
@@ -43,6 +43,9 @@ export default {
     // 查看模式
     mode () {
       return this.$store.state.panel.mode
+    },
+    loading () {
+      return this.$store.getters.getHomeLoading
     }
   },
   methods: {

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

@@ -47,9 +47,9 @@
         <div class="license-left-footer-download" @click="downloadLicense">
           <i class="nz-icon nz-icon-download"></i><span>{{$t('license.downloadID')}}</span>
         </div>
-<!--        <div class="license-left-footer-download" @click="openQrcode">-->
+        <div class="license-left-footer-download" @click="openQrcode" style="margin-left: 5px">
-<!--          <i class="nz-icon nz-icon-download"></i><span>{{$t('license.downloadID')}}</span>-->
+          <i class="nz-icon nz-icon-erweima"></i>
-<!--        </div>-->
+        </div>
         <el-upload
           ref="upload"
           accept=".xml"
@@ -92,17 +92,28 @@
         </el-table>
       </div>
     </div>
-    <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="qrCodeShow" @close="closeQrCode" :title="'xs'" class="nz-dialog overview" width="650px">
+    <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="qrCodeShow" @close="closeQrCode" :title="'QR code'" class="nz-dialog overview" width="650px">
-      <el-carousel arrow="always" :autoplay="false" :height="'550px'">
+      <el-carousel arrow="never" :autoplay="false" :height="'500px'" ref="carousel">
-        <el-carousel-item v-for="(item, index) in qrCodeArr" :key="index">
+        <el-carousel-item v-for="(item, index) in qrCodeArr" :key="index" :name="'qr-' + index">
 <!--            :logo-src="getSrc(index)"-->
           <vueQr
             :text="item"
             :size="2000"
+            :logo-src="getSrc(index)"
             :margin="50"
           />
         </el-carousel-item>
       </el-carousel>
+      <div class="nz-license-footer">
+        <el-pagination
+          @current-change="setActiveItem"
+          small
+          :page-size="1"
+          :current-page.sync="currentPage"
+          layout="prev, pager, next"
+          :total="qrCodeArr.length">
+        </el-pagination>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -142,7 +153,8 @@ export default {
       endItem: '',
       qrCodeShow: false,
       qrCodeArr: [],
-      totalQrCode: 10
+      totalQrCode: 10,
+      currentPage: 1
     }
   },
   methods: {
@@ -306,6 +318,10 @@ export default {
       // 把画布的内容转换为base64编码格式的图片
       const data = cas.toDataURL('image/png', 1)
       return data
+    },
+    setActiveItem (currentPage) {
+      console.log()
+      this.$refs.carousel.setActiveItem('qr-' + (currentPage - 1))
     }
   },
   computed: {
@@ -321,8 +337,6 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
-  /deep/ .el-carousel__item{
+
-    text-align: center;
-  }
 </style>

nezha-fronted/src/store/panel.js

@@ -26,7 +26,8 @@ const panel = {
     // 当前鼠标所在的图表id
     currentMousemove: 0,
     variablesArr: [],
-    timeBoxClass: ''
+    timeBoxClass: '',
+    homeLoading: false
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -97,6 +98,9 @@ const panel = {
     },
     setTimeBoxClass (state, value) {
       state.timeBoxClass = value
+    },
+    setHomeLoading (state, value) {
+      state.homeLoading = value
     }
   },
   getters: {
@@ -153,6 +157,9 @@ const panel = {
     },
     getTimeBoxClass (state, value) {
       return state.timeBoxClass
+    },
+    getHomeLoading (state, value) {
+      return state.homeLoading
     }
   },
   actions: {
@@ -197,7 +204,10 @@ const panel = {
     },
     dispatchTimeBoxClass (store, timeBoxClass) {
       store.commit('setTimeBoxClass', timeBoxClass)
-    }
+    },
+    dispatchHomeLoading (store, homeLoading) {
+      store.commit('setHomeLoading', homeLoading)
+    },
   }
 }
 export default panel