NEZ-3174 notebook导出html

nezha-fronted/src/assets/css/components/page/notebook/notebook.scss

@@ -41,12 +41,14 @@
         margin-right: 10px;
       }
     }
+  }
+}
+
 .notebook-scrollWrap{
   width: 100%;
   height: 100%;
   overflow: hidden scroll;
   position: relative;
-    }
   .notebook-content{
     width: 100%;
     max-width: 1200px;
@@ -151,4 +153,3 @@
     }
   }
 }
-}

nezha-fronted/src/components/chart/chart.vue

@@ -70,6 +70,7 @@
         :globalVariables="globalVariables"
       ></chart-url>
       <chart-text
+        :from="from"
         :ref="'chart' + chartInfo.id"
         v-if="isText(chartInfo.type)"
         :chart-data="chartData"

nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue

@@ -134,7 +134,7 @@
       <chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
     </transition>
     <!-- 快照进度 -->
-    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
+    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible" api="dashboard"></snapshotProgress>
   </div>
 </template>
 

nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue

@@ -32,7 +32,7 @@
               <div @click="download('markdown')">{{$t('notebook.downloadAs',{format:'markdown'})}}</div>
             </el-dropdown-item>
             <el-dropdown-item v-has="'dashboard_view'">
-              <div @click="download('json')">{{$t('notebook.downloadNotebook')}} JSON</div>
+              <div @click="download('html')">{{$t('notebook.downloadAs',{format:'html'})}}</div>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -88,7 +88,7 @@
     </transition>
 
     <!-- 快照进度 -->
-    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
+    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible" api="notebook"></snapshotProgress>
   </div>
 </template>
 
@@ -245,6 +245,8 @@ export default {
       const index = this.$refs.notebookList.copyDataList.findIndex(item => item.id == chart.id)
       this.$refs.notebookList.copyDataList.splice(index, 1)
       this.$refs.notebookList.onScroll(this.scrollbarWrap.scrollTop)
+      this.chart = {}
+      this.$store.dispatch('clearPanel')
     },
     /* 图表相关操作--start */
     addChart (chart) {
@@ -278,6 +280,22 @@ export default {
         this.$refs.addChartModal.isStable = 'stable'
       })
     },
+    addText () {
+      const chart = {
+        name: '',
+        type: 'text',
+        unit: 2,
+        datasource: 'misc',
+        span: 12,
+        height: 4,
+        w: 12,
+        h: 4,
+        x: 0,
+        y: this.getMaxY(this.$refs.notebookList.copyDataList),
+        param: this.newChart('text')
+      }
+      this.createSuccess(chart)
+    },
     getMaxId (arr) { // 获取当前列表最大的id
       if (!arr.length) {
         return 1
@@ -446,13 +464,18 @@ export default {
               varValue: '',
               result: 'show'
             },
-            editorType: 'markdown'
+            editorType: 'markdown',
+            isEdit: true
           }
           break
       }
       return param
     },
     addChartBefore (chart) {
+      // if (chart.type === 'text') {
+      //   this.addText()
+      //   return false
+      // }
       this.$store.dispatch('dispatchEditChart', {
         chart: chart,
         type: 'add'
@@ -485,7 +508,8 @@ export default {
       this.$store.commit('setNotebookEdit', true)
     },
     download (type) {
-      console.log(type)
+      this.showPanel.format = type
+      this.snapshotVisible = true
     },
     // 获取数据,用在子页面
     getData () {

nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue

@@ -98,7 +98,7 @@
         </el-form-item>
       </div>
       <!--content-->
-      <div v-if="contentShow(chartConfig.type)" class="form__sub-title">
+      <div v-if="contentShow(chartConfig.type)&&from!=='notebook'" class="form__sub-title">
         <span>{{$t('dashboard.dashboard.chartForm.content')}}</span>
         <span style="cursor: pointer" v-if="isDiagram(chartConfig.type)"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
       </div>
@@ -130,7 +130,7 @@
         :isChart="true"
       />
       <!--text-->
-      <el-form-item v-if="isText(chartConfig.type)" :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
+      <el-form-item v-if="isText(chartConfig.type)&&from!=='notebook'" :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
         <markdownEditor v-if="chartConfig.param.editorType==='markdown'" :edit-data="chartConfig.param.text" @textChange="textChange"></markdownEditor>
         <rich-text-editor v-else ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
       </el-form-item>

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

@@ -75,7 +75,8 @@ export default {
     snapshotVisible: {
       type: Boolean,
       default: false
-    }
+    },
+    api: String
   },
   data () {
     return {
@@ -99,14 +100,18 @@ export default {
         }
       })
       const params = {
-        format: 'html',
+        format: this.showPanel.format || 'html',
-        dashboardId: this.showPanel.id,
         start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[0])),
-        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[1])),
+        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.searchTime[1]))
-        vars: vars
+      }
+      if (this.api === 'dashboard') {
+        params.dashboardId = this.showPanel.id
+        params.vars = vars
+      } else {
+        params.id = this.showPanel.id
       }
       // 创建任务
-      const res = await this.$post('/visual/dashboard/snapshot/task', params)
+      const res = await this.$post(`/visual/${this.api}/snapshot/task`, params)
       if (res.code === 200) {
         // 定时获取运行时间
         this.timer = createWorker(() => {
@@ -124,7 +129,7 @@ export default {
       this.task = setInterval(async () => {
         if (this.process < 100) {
           try {
-            const res = await this.$get('/visual/dashboard/snapshot/result/' + this.tid)
+            const res = await this.$get(`/visual/${this.api}/snapshot/result/` + this.tid)
             this.total = res.data.taskId.total
             this.done = res.data.taskId.done
             this.process = parseFloat(res.data.taskId.process)
@@ -140,7 +145,7 @@ export default {
     downloadSnapshot () {
       let total = 10
       let loaded = 0
-      this.$get('/visual/dashboard/snapshot/download/' + this.tid, {}, {
+      this.$get(`/visual/${this.api}/snapshot/download/` + this.tid, {}, {
         onDownloadProgress: function (progressEvent) {
           // 处理原生进度事件
           total = progressEvent.total
@@ -165,13 +170,13 @@ export default {
         if (window.navigator.msSaveOrOpenBlob) {
           // 兼容ie11
           const blobObject = new Blob([res])
-          window.navigator.msSaveOrOpenBlob(blobObject, fileName + '.html')
+          window.navigator.msSaveOrOpenBlob(blobObject, fileName + '.' + (this.showPanel.format || 'html'))
         } else {
           const blob = new Blob([res])
           const link = document.createElement('a')
           const href = window.URL.createObjectURL(blob) // 下载链接
           link.href = href
-          link.download = fileName + '.html' // 下载后文件名
+          link.download = fileName + '.' + (this.showPanel.format || 'html') // 下载后文件名
           document.body.appendChild(link)
           link.click() // 点击下载
           document.body.removeChild(link) // 下载完成移除元素
@@ -217,7 +222,7 @@ export default {
   beforeDestroy () {
     this.clearTimer()
     if (this.tid) {
-      this.$get('/visual/dashboard/snapshot/cancel/' + this.tid)
+      this.$get(`/visual/${this.api}/snapshot/cancel/` + this.tid)
     }
   }
 }

nezha-fronted/src/components/page/dashboard/dashboard.vue

@@ -153,7 +153,7 @@
       <dashboardTempBox v-if="rightBox.dashboardTemp.show" :from="fromRoute.dashboard" @close="closeDashboardTempBox"></dashboardTempBox>
     </transition>
     <!-- 快照进度 -->
-    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible"></snapshotProgress>
+    <snapshotProgress v-if="snapshotVisible" :showPanel="showPanel" :searchTime="searchTime" :snapshotVisible.sync="snapshotVisible" api="dashboard"></snapshotProgress>
   </div>
 </template>
 

nezha-fronted/src/entrance/exportHtml/App.vue

@@ -13,8 +13,11 @@
 
             <div style="display: flex;flex-direction: column">
 <!--              <i class="nz-icon nz-icon-arrow-down"/>-->
-              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="!dataJson.type"> {{dataJson.dashboard.data.name}} </div>
+              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right">
-              <div style="font-size: 18px;font-weight: 600;color: #333;margin-bottom: 3px;text-align: right" v-if="dataJson.type"> Explore </div>
+                <span v-if="dataJson.type==='dashboard'">{{dataJson.dashboard.data.name}}</span>
+                <span v-else-if="dataJson.type==='notebook'">{{dataJson.notebook.data.name}}</span>
+                <span v-else>Explore</span>
+              </div>
               <span>  {{dateFormat(dataJson.start * 1000)}} - {{dateFormat(dataJson.end * 1000)}} ({{dataJson.timezone}})</span>
             </div>
           </div>
@@ -47,6 +50,22 @@
             >
             </exploreItem>
           </div>
+
+          <div v-if="dataJson.type==='notebook'" ref="scrollbar" class="notebook-scrollWrap" style='background: #fffffe; height: calc(100% - 72px);'>
+            <div class="notebook-content">
+              <notebook-list
+                ref="notebookList"
+                :from="'notebook'"
+                :data-list="dataJson.charts.data.list"
+                :dataJson = "dataJson.chartsData"
+                :is-export-html="true"
+                :time-range="searchTime"
+                :nowTimeType="nowTimeType"
+              >
+              </notebook-list>
+            </div>
+          </div>
+
         </div>
       </div>
 
@@ -58,6 +77,7 @@
 <script>
 import chartList from '@/components/chart/chartList.vue'
 import exploreItem from '@/components/page/dashboard/explore/exploreItemHtml'
+import notebookList from '@/components/page/notebook/notebookList.vue'
 import moment from 'moment-timezone'
 import { loadI18n } from '@/components/common/i18n'
 import i18nData from '@/entrance/exportHtml/i18nData'
@@ -74,7 +94,8 @@ export default {
   },
   components: {
     chartList: chartList,
-    exploreItem
+    exploreItem,
+    notebookList
   },
   created () {
     this.$i18n.locale = this.dataJson.language