feat：导出压缩包

2022-04-11 15:49:10 +08:00
parent 051f0a776c
commit 9dac000608
15 changed files with 97009 additions and 1241 deletions
--- a/nezha-fronted/build/webpack.dev.conf.js
+++ b/nezha-fronted/build/webpack.dev.conf.js
@@ -25,8 +25,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
-      ],
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }
+      ]
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
@@ -37,12 +37,12 @@ const devWebpackConfig = merge(baseWebpackConfig, {
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
-    publicPath: "/",
-    /*publicPath: config.dev.assetsPublicPath,*/
+    publicPath: '/',
+    /* publicPath: config.dev.assetsPublicPath, */
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
    }
  },
  plugins: [
@@ -64,6 +64,11 @@ const devWebpackConfig = merge(baseWebpackConfig, {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
+      },
+      {
+        from: path.resolve(__dirname, '../src/components/chart'),
+        to: 'components/chart',
+        ignore: ['.*']
      }
    ])
  ]
@@ -83,7 +88,7 @@ module.exports = new Promise((resolve, reject) => {
      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
        },
        onErrors: config.dev.notifyOnErrors
          ? utils.createNotifierCallback()
--- a/nezha-fronted/build/webpack.prod.conf.js
+++ b/nezha-fronted/build/webpack.prod.conf.js
@@ -13,24 +13,24 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const fileManagerPlugin = require('filemanager-webpack-plugin')
 const WebpackZipPlugin = require('webpack-zip-plugin')
 // const GitRevisionPlugin = require('git-revision-webpack-plugin')
-const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
-const WebpackShellPlugin = require('webpack-shell-plugin');
+const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
+const WebpackShellPlugin = require('webpack-shell-plugin')

-const serverConfig = require('../static/config.json')//引入根目录下的配置文件
+const serverConfig = require('../static/config.json')// 引入根目录下的配置文件

 // const gitRevisionPlugin = new GitRevisionPlugin();
-const createJson = function() {
+const createJson = function () {
  // serverConfig.version=config.build.version +"-"+gitRevisionPlugin.commithash();
-  serverConfig.version=config.build.version;
-  return JSON.stringify(serverConfig);
-};
+  serverConfig.version = config.build.version
+  return JSON.stringify(serverConfig)
+}

 const env = require('../config/prod.env')
-/*const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
+/* const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
 const createConfig = function(compilation){
  let cfgJson={baseUrl:"http://192.168.40.247:8080/nz-admin"};
  return JSON.stringify(cfgJson);
-}*/
+} */
 const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
@@ -46,13 +46,13 @@ const webpackConfig = merge(baseWebpackConfig, {
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
  },
  plugins: [
-    /*new GenerateAssetPlugin({
+    /* new GenerateAssetPlugin({
      filename: 'config.json',
      fn: (compilation, cb) => {
        cb(null, createConfig(compilation));
      },
      extraFiles: []
-    }),*/
+    }), */
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
@@ -74,7 +74,7 @@ const webpackConfig = merge(baseWebpackConfig, {
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
+      allChunks: true
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
@@ -89,7 +89,7 @@ const webpackConfig = merge(baseWebpackConfig, {
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
-      hash:false,
+      hash: false,
      inject: true,
      minify: {
        removeComments: true,
@@ -104,8 +104,8 @@ const webpackConfig = merge(baseWebpackConfig, {
    new GenerateAssetPlugin({
      filename: 'static/config.json',
      fn: (compilation, cb) => {
-        cb(null, createJson());
-      },
+        cb(null, createJson())
+      }
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
@@ -147,47 +147,52 @@ const webpackConfig = merge(baseWebpackConfig, {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['*']
+      },
+      {
+        from: path.resolve(__dirname, '../src/components/chart'),
+        to: 'components',
+        ignore: ['.*']
      }
-    ]),
+    ])
  ]
 })

-if(process.env.NODE_ENV == 'development'){
+if (process.env.NODE_ENV == 'development') {
  webpackConfig.plugins.push(
    new fileManagerPlugin({
-      onStart:[
+      onStart: [
        {
-          delete:[path.join(__dirname,'../dist/') ]
+          delete: [path.join(__dirname, '../dist/')]
        }
      ],
      onEnd: [
        {
-          move:[
-            { source: path.join(__dirname,'../dist','/static/config.json'), destination: path.join(__dirname,'../dist/config.json') },
+          move: [
+            { source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') }

          ],
-          mkdir:[
-            path.join(__dirname,'../dist','/static')
+          mkdir: [
+            path.join(__dirname, '../dist', '/static')
          ],
-          copy:[
-            { source: path.join(__dirname,'../dist','/config.json'), destination: path.join(__dirname,'../dist','/static/config.json') }
-          ],
-        },
-        {
-          delete:[
-            path.join(__dirname,'../dist','/config.json')
+          copy: [
+            { source: path.join(__dirname, '../dist', '/config.json'), destination: path.join(__dirname, '../dist', '/static/config.json') }
          ]
        },
        {
-          archive:[
-            { source: path.join(__dirname,'../dist'), destination: path.join(__dirname,'../dist','/nz-gui.zip') }
+          delete: [
+            path.join(__dirname, '../dist', '/config.json')
+          ]
+        },
+        {
+          archive: [
+            { source: path.join(__dirname, '../dist'), destination: path.join(__dirname, '../dist', '/nz-gui.zip') }
          ]
        }
      ]
-    }),
+    })

  )
-}else{
+} else {
  webpackConfig.plugins.push(
    // new WebpackZipPlugin({
    //   initialFile: './dist',
@@ -196,9 +201,9 @@ if(process.env.NODE_ENV == 'development'){
    //   behindShell: 'cd '+path.join(__dirname,'../dist/')+";md5=`md5sum nz-gui.zip |awk '{print $1}'|cut -c 1-8`;mv nz-gui.zip nz-gui-${md5}.zip;"+(process.env.BUILD_MODE=='all'?'mkdir -p ./dist/static;echo "start add map picture to zip file,it will take a few moment,please wait...";cp -r ../static/Tiles dist/static/;zip -gr nz-gui-${md5}.zip dist/static/Tiles>/dev/null;rm -rf dist;':'')
    // }),
    new WebpackShellPlugin({
-      onBuildStart: ['/bin/bash '+path.join(__dirname,'script')+'/buildStart.sh'],
-      onBuildEnd: ['/bin/bash '+path.join(__dirname,'script')+'/buildEnd.sh '+process.env.BUILD_MODE]
-    }),
+      onBuildStart: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildStart.sh'],
+      onBuildEnd: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildEnd.sh ' + process.env.BUILD_MODE]
+    })
    // new fileManagerPlugin({
    //   onStart:[
    //     {
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -7138,6 +7138,11 @@
      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
      "dev": true
    },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
    "import-cwd": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7802,6 +7807,17 @@
        "verror": "1.10.0"
      }
    },
+    "jszip": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.9.1.tgz",
+      "integrity": "sha512-H9A60xPqJ1CuC4Ka6qxzXZeU8aNmgOeP5IFqwJbQQwtu2EUYxota3LdsiZWplF7Wgd9tkAd0mdu36nceSaPuYw==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      }
+    },
    "keyv": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -7884,6 +7900,14 @@
        "type-check": "~0.4.0"
      }
    },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
    "load-json-file": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -9292,8 +9316,7 @@
    "pako": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
-      "dev": true
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
    },
    "parallel-transform": {
      "version": "1.2.0",
@@ -13012,6 +13035,11 @@
      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
    },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+    },
    "set-value": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -32,6 +32,7 @@
    "file-saver": "^2.0.2",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
+    "jszip": "^3.9.1",
    "leaflet": "^1.7.1",
    "moment-timezone": "^0.5.33",
    "mqtt": "4.2.6",
--- a/nezha-fronted/src/components/chart/chart/options/graph.js
+++ b/nezha-fronted/src/components/chart/chart/options/graph.js
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -106,7 +106,8 @@ export default {
    isGroup: Boolean,
    groupInfo: {},
    from: String,
-    dataList: Array // 看板中所有图表信息
+    dataList: Array, // 看板中所有图表信息
+    isExportHtml: false
  },
  components: {
    GridLayout: GridLayout,
--- a/nezha-fronted/src/components/chart/panelTemp/js/axios.js
+++ b/nezha-fronted/src/components/chart/panelTemp/js/axios.js
--- a/nezha-fronted/src/components/chart/panelTemp/js/echarts.js
+++ b/nezha-fronted/src/components/chart/panelTemp/js/echarts.js
--- a/nezha-fronted/src/components/chart/panelTemp/js/httpVueLoader.js
+++ b/nezha-fronted/src/components/chart/panelTemp/js/httpVueLoader.js
@@ -0,0 +1,386 @@
+(function umd (root, factory) {
+  if (typeof module === 'object' && typeof exports === 'object') { module.exports = factory() } else if (typeof define === 'function' && define.amd) { define([], factory) } else { root.httpVueLoader = factory() }
+})(this, function factory () {
+  'use strict'
+
+  let scopeIndex = 0
+
+  StyleContext.prototype = {
+
+    withBase: function (callback) {
+      let tmpBaseElt
+      if (this.component.baseURI) {
+        // firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
+        tmpBaseElt = document.createElement('base')
+        tmpBaseElt.href = this.component.baseURI
+
+        const headElt = this.component.getHead()
+        headElt.insertBefore(tmpBaseElt, headElt.firstChild)
+      }
+
+      callback.call(this)
+
+      if (tmpBaseElt) { this.component.getHead().removeChild(tmpBaseElt) }
+    },
+
+    scopeStyles: function (styleElt, scopeName) {
+      function process () {
+        const sheet = styleElt.sheet
+        const rules = sheet.cssRules
+
+        for (let i = 0; i < rules.length; ++i) {
+          const rule = rules[i]
+          if (rule.type !== 1) { continue }
+
+          var scopedSelectors = []
+
+          rule.selectorText.split(/\s*,\s*/).forEach(function (sel) {
+            scopedSelectors.push(scopeName + ' ' + sel)
+            const segments = sel.match(/([^ :]+)(.+)?/)
+            scopedSelectors.push(segments[1] + scopeName + (segments[2] || ''))
+          })
+
+          const scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length)
+          sheet.deleteRule(i)
+          sheet.insertRule(scopedRule, i)
+        }
+      }
+
+      try {
+        // firefox may fail sheet.cssRules with InvalidAccessError
+        process()
+      } catch (ex) {
+        if (ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR) {
+          styleElt.sheet.disabled = true
+          styleElt.addEventListener('load', function onStyleLoaded () {
+            styleElt.removeEventListener('load', onStyleLoaded)
+
+            // firefox need this timeout otherwise we have to use document.importNode(style, true)
+            setTimeout(function () {
+              process()
+              styleElt.sheet.disabled = false
+            })
+          })
+          return
+        }
+
+        throw ex
+      }
+    },
+
+    compile: function () {
+      const hasTemplate = this.template !== null
+
+      const scoped = this.elt.hasAttribute('scoped')
+
+      if (scoped) {
+        // no template, no scopable style needed
+        if (!hasTemplate) { return }
+
+        // firefox does not tolerate this attribute
+        this.elt.removeAttribute('scoped')
+      }
+
+      this.withBase(function () {
+        this.component.getHead().appendChild(this.elt)
+      })
+
+      if (scoped) { this.scopeStyles(this.elt, '[' + this.component.getScopeId() + ']') }
+
+      return Promise.resolve()
+    },
+
+    getContent: function () {
+      return this.elt.textContent
+    },
+
+    setContent: function (content) {
+      this.withBase(function () {
+        this.elt.textContent = content
+      })
+    }
+  }
+
+  function StyleContext (component, elt) {
+    this.component = component
+    this.elt = elt
+  }
+
+  ScriptContext.prototype = {
+
+    getContent: function () {
+      return this.elt.textContent
+    },
+
+    setContent: function (content) {
+      this.elt.textContent = content
+    },
+
+    compile: function (module) {
+      const childModuleRequire = function (childURL) {
+        return httpVueLoader.require(resolveURL(this.component.baseURI, childURL))
+      }.bind(this)
+
+      const childLoader = function (childURL, childName) {
+        return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName)
+      }.bind(this)
+
+      try {
+        Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module)
+      } catch (ex) {
+        if (!('lineNumber' in ex)) {
+          return Promise.reject(ex)
+        }
+        const vueFileData = responseText.replace(/\r?\n/g, '\n')
+        const lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1
+        throw new (ex.constructor)(ex.message, url, lineNumber)
+      }
+
+      return Promise.resolve(this.module.exports)
+        .then(httpVueLoader.scriptExportsHandler.bind(this))
+        .then(function (exports) {
+          this.module.exports = exports
+        }.bind(this))
+    }
+  }
+
+  function ScriptContext (component, elt) {
+    this.component = component
+    this.elt = elt
+    this.module = { exports: {} }
+  }
+
+  TemplateContext.prototype = {
+
+    getContent: function () {
+      return this.elt.innerHTML
+    },
+
+    setContent: function (content) {
+      this.elt.innerHTML = content
+    },
+
+    getRootElt: function () {
+      let tplElt = this.elt.content || this.elt
+
+      if ('firstElementChild' in tplElt) { return tplElt.firstElementChild }
+
+      for (tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling) {
+        if (tplElt.nodeType === Node.ELEMENT_NODE) { return tplElt }
+      }
+
+      return null
+    },
+
+    compile: function () {
+      return Promise.resolve()
+    }
+  }
+
+  function TemplateContext (component, elt) {
+    this.component = component
+    this.elt = elt
+  }
+
+  Component.prototype = {
+
+    getHead: function () {
+      return document.head || document.getElementsByTagName('head')[0]
+    },
+
+    getScopeId: function () {
+      if (this._scopeId === '') {
+        this._scopeId = 'data-s-' + (scopeIndex++).toString(36)
+        this.template.getRootElt().setAttribute(this._scopeId, '')
+      }
+      return this._scopeId
+    },
+
+    load: function (componentURL) {
+      return httpVueLoader.httpRequest(componentURL)
+        .then(function (responseText) {
+          this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/') + 1)
+          const doc = document.implementation.createHTMLDocument('')
+
+          // IE requires the <base> to come with <style>
+          doc.body.innerHTML = (this.baseURI ? '<base href="' + this.baseURI + '">' : '') + responseText
+
+          for (let it = doc.body.firstChild; it; it = it.nextSibling) {
+            switch (it.nodeName) {
+              case 'TEMPLATE':
+                this.template = new TemplateContext(this, it)
+                break
+              case 'SCRIPT':
+                this.script = new ScriptContext(this, it)
+                break
+              case 'STYLE':
+                this.styles.push(new StyleContext(this, it))
+                break
+            }
+          }
+
+          return this
+        }.bind(this))
+    },
+
+    _normalizeSection: function (eltCx) {
+      let p
+
+      if (eltCx === null || !eltCx.elt.hasAttribute('src')) {
+        p = Promise.resolve(null)
+      } else {
+        p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
+          .then(function (content) {
+            eltCx.elt.removeAttribute('src')
+            return content
+          })
+      }
+
+      return p
+        .then(function (content) {
+          if (eltCx !== null && eltCx.elt.hasAttribute('lang')) {
+            const lang = eltCx.elt.getAttribute('lang')
+            eltCx.elt.removeAttribute('lang')
+            return httpVueLoader.langProcessor[lang.toLowerCase()].call(this, content === null ? eltCx.getContent() : content)
+          }
+          return content
+        }.bind(this))
+        .then(function (content) {
+          if (content !== null) { eltCx.setContent(content) }
+        })
+    },
+
+    normalize: function () {
+      return Promise.all(Array.prototype.concat(
+        this._normalizeSection(this.template),
+        this._normalizeSection(this.script),
+        this.styles.map(this._normalizeSection)
+      ))
+        .then(function () {
+          return this
+        }.bind(this))
+    },
+
+    compile: function () {
+      return Promise.all(Array.prototype.concat(
+        this.template && this.template.compile(),
+        this.script && this.script.compile(),
+        this.styles.map(function (style) { return style.compile() })
+      ))
+        .then(function () {
+          return this
+        }.bind(this))
+    }
+  }
+
+  function Component (name) {
+    this.name = name
+    this.template = null
+    this.script = null
+    this.styles = []
+    this._scopeId = ''
+  }
+
+  function identity (value) {
+    return value
+  }
+
+  function parseComponentURL (url) {
+    const comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/)
+    return {
+      name: comp[2],
+      url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
+    }
+  }
+
+  function resolveURL (baseURL, url) {
+    if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
+      return baseURL + url
+    }
+    return url
+  }
+
+  httpVueLoader.load = function (url, name) {
+    return function () {
+      return new Component(name).load(url)
+        .then(function (component) {
+          return component.normalize()
+        })
+        .then(function (component) {
+          return component.compile()
+        })
+        .then(function (component) {
+          const exports = component.script !== null ? component.script.module.exports : {}
+
+          if (component.template !== null) { exports.template = component.template.getContent() }
+
+          if (exports.name === undefined) {
+            if (component.name !== undefined) { exports.name = component.name }
+          }
+
+          exports._baseURI = component.baseURI
+
+          return exports
+        })
+    }
+  }
+
+  httpVueLoader.register = function (Vue, url) {
+    const comp = parseComponentURL(url)
+    Vue.component(comp.name, httpVueLoader.load(comp.url))
+  }
+
+  httpVueLoader.install = function (Vue) {
+    Vue.mixin({
+
+      beforeCreate: function () {
+        const components = this.$options.components
+
+        for (const componentName in components) {
+          if (typeof (components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:') {
+            const comp = parseComponentURL(components[componentName].substr(4))
+
+            const componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url
+
+            if (isNaN(componentName)) { components[componentName] = httpVueLoader.load(componentURL, componentName) } else { components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name)) }
+          }
+        }
+      }
+    })
+  }
+
+  httpVueLoader.require = function (moduleName) {
+    return window[moduleName]
+  }
+
+  httpVueLoader.httpRequest = function (url) {
+    return new Promise(function (resolve, reject) {
+      const xhr = new XMLHttpRequest()
+      xhr.open('GET', url)
+            		xhr.responseType = 'text'
+
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.responseText) } else { reject(xhr.status) }
+        }
+      }
+
+      xhr.send(null)
+    })
+  }
+
+  httpVueLoader.langProcessor = {
+    html: identity,
+    js: identity,
+    css: identity
+  }
+
+  httpVueLoader.scriptExportsHandler = identity
+
+  function httpVueLoader (url, name) {
+    const comp = parseComponentURL(url)
+    return httpVueLoader.load(comp.url, name)
+  }
+
+  return httpVueLoader
+})
--- a/nezha-fronted/src/components/chart/panelTemp/js/vue.js
+++ b/nezha-fronted/src/components/chart/panelTemp/js/vue.js
--- a/nezha-fronted/src/components/chart/panelTemp/js/vuex.js
+++ b/nezha-fronted/src/components/chart/panelTemp/js/vuex.js
--- a/nezha-fronted/src/components/chart/panelTemp/jsData.json
+++ b/nezha-fronted/src/components/chart/panelTemp/jsData.json
@@ -0,0 +1,60 @@
+{
+  "data": [
+    "panelTemp/js/vue.js",
+    "panelTemp/js/echarts.js",
+    "panelTemp/js/httpVueLoader.js",
+    "chart.vue",
+    "chartDetail.vue",
+    "chartFormat.js",
+    "chartHeader.vue",
+    "chartHeaderMixin.js",
+    "chartList.vue",
+    "chartMixin.js",
+    "ChartScreenHeader.vue",
+    "defaultLineData.js",
+    "defaultLogData.js",
+    "defaultTableData.js",
+    "logsData.js",
+    "panelChart.vue",
+    "tempGroup.js",
+    "chart/chartAssetInfo.vue",
+    "chart/chartAutotopology.vue",
+    "chart/chartBar.vue",
+    "chart/chartClock.vue",
+    "chart/chartDiagram.vue",
+    "chart/chartEndpointInfo.vue",
+    "chart/chartGauge.vue",
+    "chart/chartGroup.vue",
+    "chart/chartHexagonD3.vue",
+    "chart/chartLog.vue",
+    "chart/chartMap.vue",
+    "chart/chartNoData.vue",
+    "chart/chartPie.vue",
+    "chart/chartStat.vue",
+    "chart/chartTable.vue",
+    "chart/chartText.vue",
+    "chart/chartTimeSeries.vue",
+    "chart/chartTopology.vue",
+    "chart/chartTreemap.vue",
+    "chart/chartUrl.vue",
+    "chart/legend.vue",
+    "chart/tools.js",
+    "chart/grid/aspectRatio.js",
+    "chart/grid/CustomDragElement.vue",
+    "chart/grid/DOM.js",
+    "chart/grid/draggableUtils.js",
+    "chart/grid/GridItem.vue",
+    "chart/grid/GridLayout.vue",
+    "chart/grid/index.js",
+    "chart/grid/responsiveUtils.js",
+    "chart/grid/TestElement.vue",
+    "chart/grid/utils.js",
+    "chart/options/chartBar.js",
+    "chart/options/chartClock.js",
+    "chart/options/chartGauge.js",
+    "chart/options/chartHexagonD3.js",
+    "chart/options/chartPie.js",
+    "chart/options/chartTimeSeries.js",
+    "chart/options/chartTreemap.js"
+  ]
+}
--- a/nezha-fronted/src/components/common/mixin/exportHtml.js
+++ b/nezha-fronted/src/components/common/mixin/exportHtml.js
@@ -0,0 +1,92 @@
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
+import Vue from 'vue'
+export default {
+  data () {
+    return {
+      fileName: 'panel'
+    }
+  },
+  methods: {
+    exportHtml () {
+      // 创建一个JSZIP实例
+      const zip = new JSZip()
+      // 在zip压缩包中创建一个文件夹，用来放相关依赖
+      const panel = zip.folder('panel')
+      const packages = panel.folder('packages')
+      const fileArr = []
+      let filename = []
+      // 引入含有html字符串的js文件，构造html文件
+      this.returnHtml().then((modules) => {
+        panel.file('index.html', modules)
+        Vue.http.get('components/chart/panelTemp/jsData.json').then((res) => {
+          filename = res.body.data
+          for (const i in res.body.data) {
+            fileArr.push(Vue.http.get(`components/chart/${res.body.data[i]}`))
+          }
+          Promise.all(fileArr).then((contents) => {
+            for (const i in contents) {
+              packages.file(filename[i], contents[i].data)
+            }
+            // console.log(chartList)
+            // packages.file('vue/chartList.vue', chartList)
+            zip.generateAsync({
+              type: 'blob'
+            }).then((content) => {
+              // 此处采用file-saver的saveAs方法和直接创建a标签下载的效果是一样的，只是saveAs写起来更简便写
+              saveAs(content, `${this.fileName}.zip`)
+            })
+          })
+        })
+      })
+    },
+    returnHtml (data) {
+      data = [{
+        id: 1
+      }]
+      let str = ''
+      str += `<!DOCTYPE html>
+              <html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <title>Panel</title>
+                </head>
+                <script src="./packages/panelTemp/js/vue.js"></script>
+                <script src="./packages/panelTemp/js/echarts.js"></script>
+                <script src="./packages/panelTemp/js/httpVueLoader.js"></script>
+                <body>
+                  <div id="app">
+                  <div>
+                    <chartList
+                        :data-list="dataList"
+                        :isExportHtml="true"
+                    ></chartList>
+                  </div>
+                    {{message}}
+                  </div>
+                </body>
+                <script type="text/javascript">
+                var app = new Vue({
+                  el: '#app',
+                  components:{
+                      chartList: httpVueLoader('/packages/chartList.vue')
+                  },
+                  data: {
+                    message: 'Hello Vue!',
+                    dataList: ${JSON.stringify(data)}
+                  },
+                  mounted () {
+                    // axios.get('./data.json').then(res=>{
+                    //   console.log(res)
+                    // })
+                  }
+                })
+              </script>
+              </html>
+                `
+      return new Promise(resolve => {
+        resolve(str)
+      })
+    }
+  }
+}
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -77,6 +77,9 @@
                  <el-dropdown-item v-has="'main_add'">
                    <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
                  </el-dropdown-item>
+                  <el-dropdown-item v-has="'main_add'">
+                    <div id="chart-export-html" @click="exportHtml"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+                  </el-dropdown-item>
                </template>
              </top-tool-more-options>
            </div>
@@ -163,11 +166,12 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { lineChartMove } from '@/components/common/js/common'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
+import exportHtmlMixin from '@/components/common/mixin/exportHtml'
 // import chartData from './testData'

 export default {
  name: 'panel',
-  mixins: [routerPathParams, htmlToPdfMixin],
+  mixins: [routerPathParams, htmlToPdfMixin, exportHtmlMixin],
  data () {
    return {
      fromRoute,
@@ -832,7 +836,7 @@ export default {
      this.panelReloadOnlyPanel()
    },
    htmlToPdf () {
-      let dom = document.getElementsByClassName(this.pdfId)[0]
+      const dom = document.getElementsByClassName(this.pdfId)[0]
      if (dom) {
        // dom = dom.getElementsByClassName('vue-grid-layout')[0]
        this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight