Merge branch 'dev-3.3' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

.gitignore

@@ -0,0 +1,18 @@
+.DS_Store
+node_modules/
+/dist/
+/static/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+nezha-fronted/src/router/mergeTable.js
+nezha-fronted/src/components/page/dashboard/testData.js
+nezha-fronted/src/components/common/rightBox/tempRoghtBox.vue

nezha-fronted/README.md

@@ -32,5 +32,7 @@ specs 配置对应的测试用例 （https://docs.geedge.net/pages/viewpage.acti
 #思维导图
 https://docs.geedge.net/pages/viewpage.action?pageId=67209306
 
-
+#配置多入口
+dev  正常启动
+dev:html   导出为html
 

nezha-fronted/build/build.js

@@ -1,8 +1,7 @@
 'use strict'
 require('./check-versions')()
-
+const arg = process.argv.splice(2)[0]
-let arg = process.argv.splice(2)[0];
+process.env.NODE_ENV = 'production'
-process.env.NODE_ENV = arg == 'dev' ? 'development' : 'production'
 process.env.BUILD_MODE = arg
 const ora = require('ora')
 
@@ -12,7 +11,6 @@ const chalk = require('chalk')
 const webpack = require('webpack')
 const config = require('../config')
 const webpackConfig = require('./webpack.prod.conf')
-
 const spinner = ora('building for production...')
 spinner.start()
 

nezha-fronted/build/webpack.base.conf.js

@@ -3,15 +3,16 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
-
+const arg = process.env.BUILD_MODE
+const devStart = process.env.npm_lifecycle_event
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
-
+const baseConfig = {
-module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
-    app: './src/main.js'
+    app: './src/entrance/app/main.js',
+    exportHtml: './src/entrance/exportHtml/exportHtml.js'
   },
   output: {
     path: config.build.assetsRoot,
@@ -98,3 +99,48 @@ module.exports = {
     child_process: 'empty'
   }
 }
+if (arg === 'html' || devStart === 'dev:html') {
+  delete baseConfig.entry.app
+  baseConfig.module.rules.unshift({
+    include: [
+      resolve('src/entrance/app'),
+      resolve('src/components/common/alert'),
+      resolve('src/components/common/bottomBox'),
+      resolve('src/components/common/detailView'),
+      resolve('src/components/common/elSelect'),
+      resolve('src/components/common/filterSearch'),
+      resolve('src/components/common/globalSearch'),
+      resolve('src/components/common/honeycomb'),
+      resolve('src/components/common/myDatePicker'),
+      resolve('src/components/common/overView'),
+      resolve('src/components/common/popBox'),
+      resolve('src/components/common/project'),
+      resolve('src/components/common/rightBox'),
+      resolve('src/components/common/table'),
+      resolve('src/components/common/v-selectpagenew'),
+      resolve('src/components/page')
+    ],
+    loader: 'url-loader',
+    options: {
+      limit: 10,
+      generator: (content, mimetype, encoding, resourcePath) => {
+        return ''
+      }
+    }
+  })
+} else if (arg === 'app' || devStart === 'dev') {
+  delete baseConfig.entry.exportHtml
+  baseConfig.module.rules.unshift({
+    include: [
+      resolve('src/entrance/exportHtml')
+    ],
+    loader: 'url-loader',
+    options: {
+      limit: 10,
+      generator: (content, mimetype, encoding, resourcePath) => {
+        return ''
+      }
+    }
+  })
+}
+module.exports = { ...baseConfig }

nezha-fronted/build/webpack.dev.conf.js

@@ -12,8 +12,10 @@ const portfinder = require('portfinder')
 
 const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
-
+const devStart = process.env.npm_lifecycle_event
-const devWebpackConfig = merge(baseWebpackConfig, {
+const indexHtml = devStart === 'dev' ? 'src/entrance/app/index.html' : 'src/entrance/exportHtml/exportHtml.html'
+let devWebpackConfig = ''
+devWebpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },
@@ -25,8 +27,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, indexHtml) }
-      ],
+      ]
     },
     hot: true,
     inline: true,
@@ -38,12 +40,12 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     overlay: config.dev.errorOverlay
       ? { warnings: false, errors: true }
       : false,
-    publicPath: "/",
+    publicPath: '/',
     /* publicPath: config.dev.assetsPublicPath, */
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
-      poll: config.dev.poll,
+      poll: config.dev.poll
     }
   },
   plugins: [
@@ -57,8 +59,9 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     new HtmlWebpackPlugin({
       favicon: path.resolve(__dirname, '../src/assets/img/favicon.ico'),
       filename: 'index.html',
-      template: 'index.html',
+      template: indexHtml,
-      inject: true
+      inject: true,
+      chunks: devStart === 'dev' ? ['app'] : ['exportHtml']
     }),
     // copy custom static assets
     new CopyWebpackPlugin([
@@ -66,6 +69,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: ['.*']
       }
     ])
   ]
@@ -85,7 +93,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()

nezha-fronted/build/webpack.prod.conf.js

@@ -1,6 +1,6 @@
 'use strict'
 const path = require('path')
-
+const arg = process.env.BUILD_MODE
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
@@ -10,13 +10,13 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+// const ParallelUglifyPlugin = require('webpack-parallel-uglify-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 HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 const serverConfig = require('../static/config.json')// 引入根目录下的配置文件
 
 // const gitRevisionPlugin = new GitRevisionPlugin();
@@ -32,7 +32,9 @@ const createConfig = function(compilation){
   let cfgJson={baseUrl:"http://192.168.40.247:8080/nz-admin"};
   return JSON.stringify(cfgJson);
 } */
-const webpackConfig = merge(baseWebpackConfig, {
+let webpackConfig = {}
+if (arg === 'html') {
+  webpackConfig = merge(baseWebpackConfig, {
     module: {
       rules: utils.styleLoaders({
         sourceMap: config.build.productionSourceMap,
@@ -58,19 +60,19 @@ const webpackConfig = merge(baseWebpackConfig, {
       new webpack.DefinePlugin({
         'process.env': env
       }),
-    new ParallelUglifyPlugin({
+      // new ParallelUglifyPlugin({
-      cacheDir: '.cache/',
+      //   cacheDir: '.cache/',
-      uglifyJS: {
+      //   uglifyJS: {
-        output: {
+      //     output: {
-          comments: false
+      //       comments: false
-        },
+      //     },
-        warnings: false,
+      //     warnings: false,
-        compress: {
+      //     compress: {
-          drop_debugger: true,
+      //       drop_debugger: true,
-          drop_console: true
+      //       drop_console: true
-        }
+      //     }
-      }
+      //   }
-    }),
+      // }),
       // extract css into its own file
       new ExtractTextPlugin({
         filename: utils.assetsPath('css/[name].[contenthash].css'),
@@ -93,9 +95,150 @@ const webpackConfig = merge(baseWebpackConfig, {
       new HtmlWebpackPlugin({
         favicon: path.resolve(__dirname, '../src/assets/img/favicon.ico'),
         filename: config.build.index,
-      template: 'index.html',
+        template: 'src/entrance/exportHtml/exportHtml.html',
+        inlineSource: '.(js|css)$', // embed all javascript and css inline
         hash: false,
         inject: true,
+        // minify: {
+        //   removeComments: true,
+        //   collapseWhitespace: true,
+        //   removeAttributeQuotes: true
+        //   // more options:
+        //   // https://github.com/kangax/html-minifier#options-quick-reference
+        // },
+        minify: { // 压缩html
+          collapseWhitespace: true, // 折叠空白区域
+          keepClosingSlash: true, // 保持闭合间隙
+          removeComments: true, // 移除注释
+          removeRedundantAttributes: true, // 删除冗余属性
+          removeScriptTypeAttributes: true, // 删除Script脚本类型属性
+          removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性
+          useShortDoctype: true, // 使用短文档类型
+          preserveLineBreaks: true, // 保留换行符
+          minifyCSS: true, // 压缩文内css
+          minifyJS: true // 压缩文内js
+        },
+        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+        chunksSortMode: 'dependency',
+        chunks: ['exportHtml'],
+        excludeChunks: ['app']
+      }),
+      new HtmlWebpackInlineSourcePlugin(),
+      new GenerateAssetPlugin({
+        filename: 'static/config.json',
+        fn: (compilation, cb) => {
+          cb(null, createJson())
+        }
+      }),
+      // keep module.id stable when vendor modules does not change
+      new webpack.HashedModuleIdsPlugin(),
+      // enable scope hoisting
+      new webpack.optimize.ModuleConcatenationPlugin(),
+      // split vendor js into its own file
+      // new webpack.optimize.CommonsChunkPlugin({
+      //   name: 'vendor',
+      //   minChunks (module) {
+      //     // any required modules inside node_modules are extracted to vendor
+      //     return (
+      //       module.resource &&
+      //       /\.js$/.test(module.resource) &&
+      //       module.resource.indexOf(
+      //         path.join(__dirname, '../node_modules')
+      //       ) === 0
+      //     )
+      //   }
+      // }),
+      // extract webpack runtime and module manifest to its own file in order to
+      // prevent vendor hash from being updated whenever app bundle is updated
+      // new webpack.optimize.CommonsChunkPlugin({
+      //   name: 'manifest',
+      //   minChunks: Infinity
+      // }),
+      // This instance extracts shared chunks from code splitted chunks and bundles them
+      // in a separate chunk, similar to the vendor chunk
+      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+      // new webpack.optimize.CommonsChunkPlugin({
+      //   name: 'entrance',
+      //   async: 'vendor-async',
+      //   children: true,
+      //   minChunks: 3
+      // }),
+
+      // copy custom static assets
+      new CopyWebpackPlugin([
+        {
+          from: path.resolve(__dirname, '../static'),
+          to: config.build.assetsSubDirectory,
+          ignore: ['*']
+        }
+      ])
+    ]
+  })
+} else if (arg === 'app') {
+  webpackConfig = merge(baseWebpackConfig, {
+    module: {
+      rules: utils.styleLoaders({
+        sourceMap: config.build.productionSourceMap,
+        extract: true,
+        usePostCSS: true
+      })
+    },
+    devtool: config.build.productionSourceMap ? config.build.devtool : false,
+    output: {
+      path: config.build.assetsRoot,
+      filename: utils.assetsPath('js/[name].[chunkhash].js'),
+      chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
+    },
+    plugins: [
+      /* 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
+      }),
+      // new ParallelUglifyPlugin({
+      //   cacheDir: '.cache/',
+      //   uglifyJS: {
+      //     output: {
+      //       comments: false
+      //     },
+      //     warnings: false,
+      //     compress: {
+      //       drop_debugger: true,
+      //       drop_console: true
+      //     }
+      //   }
+      // }),
+      // extract css into its own file
+      new ExtractTextPlugin({
+        filename: utils.assetsPath('css/[name].[contenthash].css'),
+        // Setting the following option to `false` will not extract CSS from codesplit chunks.
+        // 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
+      }),
+      // Compress extracted CSS. We are using this plugin so that possible
+      // duplicated CSS from different components can be deduped.
+      new OptimizeCSSPlugin({
+        cssProcessorOptions: config.build.productionSourceMap
+          ? { safe: true, map: { inline: false } }
+          : { safe: true }
+      }),
+      // generate dist index.html with correct asset hash for caching.
+      // you can customize output by editing /index.html
+      // see https://github.com/ampedandwired/html-webpack-plugin
+      new HtmlWebpackPlugin({
+        favicon: path.resolve(__dirname, '../src/assets/img/favicon.ico'),
+        filename: config.build.index,
+        template: 'src/entrance/app/index.html',
+        hash: true,
+        inject: true,
         minify: {
           removeComments: true,
           collapseWhitespace: true,
@@ -104,7 +247,8 @@ const webpackConfig = merge(baseWebpackConfig, {
           // https://github.com/kangax/html-minifier#options-quick-reference
         },
         // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+        chunksSortMode: 'dependency',
+        excludeChunks: ['exportHtml']
       }),
       new GenerateAssetPlugin({
         filename: 'static/config.json',
@@ -156,7 +300,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       ])
     ]
   })
-
+}
 if (process.env.NODE_ENV == 'development') {
   webpackConfig.plugins.push(
     new fileManagerPlugin({
@@ -224,7 +368,7 @@ if (process.env.NODE_ENV == 'development') {
           ]
         }
       ]
-    }),
+    })
     // new WebpackZipPlugin({
     //   initialFile: './dist',
     //   endPath: './dist',

nezha-fronted/config/index.js

@@ -20,7 +20,7 @@ module.exports = {
     },
     // Various Dev Server settings
     // host: '0.0.0.0', // can be overwritten by process.env.HOST
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

nezha-fronted/package-lock.json

@@ -588,9 +588,9 @@
       }
     },
     "@codemirror/fold": {
-      "version": "0.19.4",
+      "version": "0.19.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.4.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/fold/-/fold-0.19.3.tgz",
-      "integrity": "sha512-0SNSkRSOa6gymD6GauHa3sxiysjPhUC0SRVyTlvL52o0gz9GHdc8kNqNQskm3fBtGGOiSriGwF/kAsajRiGhVw==",
+      "integrity": "sha512-8hT+Eq2G68mL0yPRvSD2ewhnLQAX6sbUJmtGVKFcj8oAXtfpYCX8LIcfXsuI19Qs7gZkOSpqZvn+KKj8IhZoAw==",
       "requires": {
         "@codemirror/gutter": "^0.19.0",
         "@codemirror/language": "^0.19.0",
@@ -2147,9 +2147,9 @@
           }
         },
         "is-buffer": {
-          "version": "2.0.5",
+          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
-          "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ=="
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         }
       }
     },
@@ -8382,6 +8382,22 @@
         "find-index": "^0.1.1"
       }
     },
+    "global": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/global/-/global-2.0.7.tgz",
+      "integrity": "sha1-1DqcPR7HkV9kXY4OsKxgAQ6eBs0=",
+      "requires": {
+        "min-document": "~0.2.2",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
@@ -8756,6 +8772,16 @@
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
       "dev": true
     },
+    "html-webpack-inline-source-plugin": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.10.tgz",
+      "integrity": "sha512-0ZNU57u7283vrXSF5a4VDnVOMWiSwypKIp1z/XfXWoVHLA1r3Xmyxx5+Lz+mnthz/UvxL1OAf41w5UIF68Jngw==",
+      "requires": {
+        "escape-string-regexp": "^1.0.5",
+        "slash": "^1.0.0",
+        "source-map-url": "^0.4.0"
+      }
+    },
     "html-webpack-plugin": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
@@ -8949,6 +8975,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",
@@ -9032,6 +9063,11 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "insert-css": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-0.0.0.tgz",
+      "integrity": "sha1-IwS/pviTq+y4/5yo2cdgXZTPKRE="
+    },
     "internal-ip": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-1.2.0.tgz",
@@ -10801,6 +10837,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
+    },
     "jspdf": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
@@ -10848,6 +10889,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",
@@ -10942,6 +10994,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",
@@ -11450,6 +11510,14 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
+    "min-document": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-0.2.8.tgz",
+      "integrity": "sha1-82IM9WA2ERVcuUFtCrVXaxbVPeM=",
+      "requires": {
+        "tape": "~1.0.2"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -12430,8 +12498,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
-      "dev": true
     },
     "parallel-transform": {
       "version": "1.2.0",
@@ -15030,6 +15097,24 @@
         }
       }
     },
+    "preload": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/preload/-/preload-0.1.0.tgz",
+      "integrity": "sha1-QAvt7o4p3BVSlV/z3r0EX0BCEwE=",
+      "requires": {
+        "inherits": "~2.0.1",
+        "insert-css": "0.0.0",
+        "once": "~1.2.0",
+        "xhr": "~1.2.3"
+      },
+      "dependencies": {
+        "once": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.2.0.tgz",
+          "integrity": "sha1-3hkFxjavh0qPuoYtmqvd0fkgRhw="
+        }
+      }
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -16359,6 +16444,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",
@@ -16496,8 +16586,7 @@
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
-      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
-      "dev": true
     },
     "slice-ansi": {
       "version": "4.0.0",
@@ -16744,8 +16833,7 @@
     "source-map-url": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
-      "dev": true
     },
     "spdx-correct": {
       "version": "3.1.0",
@@ -17383,6 +17471,29 @@
       "integrity": "sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==",
       "dev": true
     },
+    "tape": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tape/-/tape-1.0.4.tgz",
+      "integrity": "sha1-4ujlxt0/AP3CpeRRT2L8Ih5Z+cQ=",
+      "requires": {
+        "deep-equal": "~0.0.0",
+        "defined": "~0.0.0",
+        "jsonify": "~0.0.0",
+        "through": "~2.3.4"
+      },
+      "dependencies": {
+        "deep-equal": {
+          "version": "0.0.0",
+          "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-0.0.0.tgz",
+          "integrity": "sha1-mWedO70EcVb81FDT0B7rkGhpHoM="
+        },
+        "defined": {
+          "version": "0.0.0",
+          "resolved": "https://registry.npmjs.org/defined/-/defined-0.0.0.tgz",
+          "integrity": "sha1-817qfXBekzuvE7LwOz+D2SFAOz4="
+        }
+      }
+    },
     "tar": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
@@ -17636,6 +17747,11 @@
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
       "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -19441,6 +19557,22 @@
       "resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-2.3.0.tgz",
       "integrity": "sha512-AGb3oZxoktHHk1i1TD/v6aQyUbJUqMNuBp1zMFuNBCT8HjP7OD+C1X/8m14jzxOC1YeXfoHwwYmGDUMgqZnsFg=="
     },
+    "xhr": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-1.2.4.tgz",
+      "integrity": "sha1-/MpGT80XIjmobSsePTTRK3EsNIo=",
+      "requires": {
+        "global": "~2.0.7",
+        "once": "~1.1.1"
+      },
+      "dependencies": {
+        "once": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.1.1.tgz",
+          "integrity": "sha1-nbV0kzzLCMOnYU0VQDLAnqbzOec="
+        }
+      }
+    },
     "xlsx": {
       "version": "0.15.6",
       "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.15.6.tgz",

nezha-fronted/package.json

@@ -6,8 +6,10 @@
   "private": true,
   "scripts": {
     "dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
+    "dev:html": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "node build/build.js",
+    "build": "node build/build.js app",
+    "build:html": "node build/build.js html",
     "lint": "eslint --fix --ext .js,.vue src",
     "unit": "jest --config test/unit/jest.conf.js --coverage"
   },
@@ -39,13 +41,16 @@
     "echarts": "^5.2.2",
     "element-ui": "^2.15.3",
     "file-saver": "^2.0.2",
+    "html-webpack-inline-source-plugin": "0.0.10",
     "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",
     "node-sass": "^4.14.1",
     "pl-table": "^2.5.8",
+    "preload": "^0.1.0",
     "qrcodejs2": "0.0.2",
     "quill": "^1.3.7",
     "v-selectpage": "^2.1.4",

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

@@ -2,7 +2,7 @@
  <template>
   <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
     <loading :loading="loading"></loading>
-    <chart-no-data  v-if="isNoData || isError || chartChildrenData"></chart-no-data>
+    <chart-no-data  v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
     <template v-else>
       <chart-time-series
         v-if="isTimeSeries(chartInfo.type)"
@@ -257,6 +257,10 @@ export default {
     showHeader: {
       type: Boolean,
       default: true
+    },
+    isExportHtml: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

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

@@ -32,7 +32,7 @@
       {{chartInfo.name}}
       <span v-show="chartInfo.param.collapse" class="collapse-content">({{chartData ? chartData.length : 0}} charts)</span>
     </div>
-    <div class="chart-header__tools" v-if="chartInfo.type !== 'endpointInfo' && chartInfo.type !== 'assetInfo'">
+    <div class="chart-header__tools" v-if="chartInfo.type !== 'endpointInfo' && chartInfo.type !== 'assetInfo' && !isExportHtml">
       <span v-if="chartInfo.param.link" class="chart-header__tool" @click="openUrl">
        <i class="nz-icon nz-icon-more-app tool__icon"></i>
       </span>

nezha-fronted/src/components/chart/chartHeaderMixin.js

@@ -22,6 +22,10 @@ export default {
     allDataLength: {
       type: Number,
       default: 0
+    },
+    isExportHtml: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

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

@@ -49,6 +49,8 @@
           :from="from"
           :time-range="timeRange"
           @groupShow="groupShow"
+          :isExportHtml="isExportHtml"
+          :dataJson="dataJson"
           :chart-detail-info="chartDetailInfo"
           @refreshPanel="refreshPanel"
           @showFullscreen="showFullscreen"
@@ -79,6 +81,7 @@
         :filter="filter"
         :is-fullscreen="true"
         @groupShow="groupShow"
+        :dataJson="dataJson"
         :panelLock="panelLock"
         :time-range="timeRange"
         @showFullscreen="showFullscreen"
@@ -106,7 +109,17 @@ export default {
     isGroup: Boolean,
     groupInfo: {},
     from: String,
-    dataList: Array // 看板中所有图表信息
+    dataList: Array, // 看板中所有图表信息
+    isExportHtml: {
+      type: Boolean,
+      default: false
+    },
+    dataJson: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
   },
   components: {
     GridLayout: GridLayout,
@@ -422,12 +435,18 @@ export default {
       this.$store.commit('setChartListId', `chartList${this.timestamp}`)
       window.addEventListener('resize', this.resize)
     }
+    if (this.isExportHtml) {
+      setTimeout(() => {
+        this.onScroll(999999)
+      }, 500)
+    }
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.resize)
   },
   watch: {
     dataList: {
+      immediate: true,
       deep: true,
       handler (n) {
         this.gridLayoutShow = false

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

@@ -5,6 +5,7 @@
     <chart-header
       v-if="!isFullscreen&&showHeader"
       :is-group="isGroup(chartInfo.type)"
+      :isExportHtml="isExportHtml"
       :isError="isError"
       :chartData="chartData"
       :chart-info="chartInfo"
@@ -42,6 +43,7 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :panelLock="panelLock"
+      :isExportHtml="isExportHtml"
       :filter="filter"
       :from="from"
       @refreshLogs="refreshLogs"
@@ -87,6 +89,13 @@ export default {
     showHeader: {
       type: Boolean,
       default: true
+    },
+    isExportHtml: {
+      type: Boolean,
+      default: false
+    },
+    dataJson: {
+      type: Object
     }
   },
   data () {
@@ -99,8 +108,8 @@ export default {
       showAllData: false,
       allDataLength: 0,
       severityData: this.$store.getters.severityData,
-      severityDataWeight: this.$store.getters.severityDataWeight,
+      severityDataWeight: this.$store.getters.severityDataWeight
-      isExportData: false
+      // isExportData: false
     }
   },
   computed: {
@@ -157,14 +166,16 @@ export default {
       startTime = this.$stringTimeParseToUnix(startTime)
       endTime = this.$stringTimeParseToUnix(endTime)
       const elements = this.chartInfo.elements || []
+      if (this.isExportHtml) {
+        this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params)
+        return
+      }
       this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
     },
     query (elements, startTime, endTime, step, params) {
       this.isError = false
       this.allDataLength = 0
-      if (this.isExportData) {
+      // this.chartData = this.chartInfo.chartData
-        this.chartData = this.chartInfo.chartData
-      }
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':
@@ -408,6 +419,95 @@ export default {
         this.loading = false
       }
     },
+    queryData (elements, startTime, endTime, step, params) {
+      this.isError = false
+      this.allDataLength = 0
+      // this.chartData = this.chartInfo.chartData
+      try {
+        switch (this.chartInfo.datasource) {
+          case 'metrics':
+          case 'logs': {
+            this.chartData = []
+            elements.forEach((element,index) => {
+              this.chartData.push(this.dataJson[this.chartInfo.id + '_' + index].data.result)
+            })
+            break
+          }
+          case 'system': {
+            this.chartData = []
+            this.chartData.push(this.dataJson[this.chartInfo.id + '_' + 0])
+          }
+          case 'misc': {
+            this.loading = false
+            setTimeout(() => {
+              this.loading = false
+            })
+            if (this.chartInfo.type === 'hexagon') {
+              this.getHexagonFigureData().then(res => {
+                this.chartData = JSON.parse(JSON.stringify(res))
+              }).finally(() => {
+                this.loading = false
+              })
+            }
+            if (this.chartInfo.type === 'diagram') {
+              this.chartData = [this.chartInfo.param.topo]
+              if (!this.chartInfo.param.topo || !this.chartInfo.param.topo.pens.length) {
+                this.chartData = []
+              } else {
+                this.chartData = [this.chartInfo.param.topo]
+              }
+            }
+            if (this.chartInfo.type === 'group') {
+              this.chartData = lodash.get(this, 'chartInfo.children', [])
+              this.loading = false
+              this.groupInit()
+            }
+            if (this.chartInfo.type === 'topology') {
+              this.chartData = ['topology']
+            }
+            if (this.chartInfo.type === 'map') {
+              this.chartData = ['map']
+            }
+            break
+          }
+          case 'topology': {
+            this.loading = true
+            const params = {
+              type: this.chartInfo.linkType,
+              id: this.chartInfo.id
+            }
+            this.$get('/stat/rel', params).then(res => {
+              this.loading = false
+              const parentId = this.chartInfo.linkType + '-' + this.chartInfo.id
+              res.data.nodes.forEach(item => {
+                item.parentId = [parentId]
+                item.highlight = true
+                item.x = 0
+                item.y = 0
+                if (item.id === parentId) {
+                  item.hasChildren = true
+                  item.parentId = []
+                  item.fx = 0
+                  item.fy = 0
+                } else {
+                  item.hasChildren = false
+                }
+                item.radius = this.getRadius(item) // 需要计算 分三级
+                item.color = this.getColor(item) // 需要计算 分三级
+              })
+              res.data.links.forEach(item => {
+                item.id = item.source + '-' + item.target
+              })
+              this.chartData = JSON.parse(JSON.stringify([res.data]))
+            })
+            break
+          }
+        }
+        this.loading = false
+      } catch (e) {
+        this.loading = false
+      }
+    },
     getHexagonFigureData () {
       return new Promise(resolve => {
         this.$get('stat/alertMessage/topN', { size: 48, dimension: 'module' }).then(response => {

nezha-fronted/src/components/common/js/validate.js

@@ -1,4 +1,4 @@
-import vm from '../../../main'
+import vm from '../../../entrance/app/main'
 import lodash from 'lodash'
 
 // ipv4 ip校验

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)
+      })
+    }
+  }
+}

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

@@ -1,5 +1,4 @@
 import bus from '@/libs/bus'
-import { hasButton } from '@/permission'
 import i18n from '@/components/common/i18n'
 export default {
   methods: {
@@ -34,9 +33,6 @@ export default {
     timeFormate (time) {
       return bus.timeFormate(time)
     },
-    hasButton (code) {
-      return hasButton(this.$store.getters.buttonList, code)
-    },
     numberWithEConvent (num) {
       if (num) {
         if ((('' + num).indexOf('E') !== -1) || (('' + num).indexOf('e') !== -1)) {

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -587,7 +587,7 @@ import pipelineSelect from './pipelineSelect'
 import selectWalk from '../popBox/selectWalk'
 import editRigthBox from '../mixin/editRigthBox'
 import VueTagsInput from '@johmun/vue-tags-input'
-import vm from '@/main'
+import vm from '@/entrance/app/main'
 
 export default {
   name: 'editEndpointBoxNew',

nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue

@@ -44,7 +44,7 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
-import vm from '../../../main'
+import vm from '../../../entrance/app/main'
 
 export default {
   name: 'ipDetailsBox',

nezha-fronted/src/components/common/rightBox/ipamBox.vue

@@ -82,7 +82,7 @@
 
 <script>
 import editRigthBox from '../mixin/editRigthBox'
-import vm from '../../../main'
+import vm from '../../../entrance/app/main'
 
 export default {
   name: 'ipamBox',

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -270,7 +270,7 @@ export default {
             label: 'summary',
             disabled: false
           }, {
-            name: this.$t('overall.labels'),
+            name: this.$t('alert.list.labels'),
             type: 'input',
             label: 'labels',
             disabled: false

nezha-fronted/src/components/page/config/licenseGen.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import vm from '../../../main'
+import vm from '../../../entrance/app/main'
 
 export default {
   name: 'licenseGen',

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

@@ -1,6 +1,6 @@
 <script>
 import bus from '../../../../libs/bus'
-import vm from '../../../../main'
+import vm from '../../../../entrance/app/main'
 window.onload = function () {
   commonOption.toolbox.feature.dataZoom.title.zoom = vm.$i18n.t('overall.toolBox.zoom')
   commonOption.toolbox.feature.dataZoom.title.back = vm.$i18n.t('overall.toolBox.back')

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

@@ -77,9 +77,10 @@
                   <el-dropdown-item v-has="'main_add'">
                     <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
                   </el-dropdown-item>
-<!--                  <el-dropdown-item v-has="'main_add'">-->
+                  <el-dropdown-item v-has="'main_add'">
-<!--                    <div id="chart-htmltoData" @click="exportData"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>-->
+<!--                    <div id="chart-export-html" @click="exportHtml"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>-->
-<!--                  </el-dropdown-item>-->
+                    <div id="chart-export-html" @click="exportData"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
+                  </el-dropdown-item>
                 </template>
               </top-tool-more-options>
             </div>
@@ -94,6 +95,7 @@
                 :panelId="showPanel.id"
                 :class="{'show-top':showTopBtn}"
                 :data-list="dataList"
+                :is-export-html="false"
                 :nowTimeType="nowTimeType"
                 :from="fromRoute.panel"
                 :time-range="searchTime"
@@ -151,12 +153,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 FileSaver from 'file-saver'
 // import chartData from './testData'
-
 export default {
   name: 'panel',
-  mixins: [routerPathParams, htmlToPdfMixin],
+  mixins: [routerPathParams, htmlToPdfMixin, exportHtmlMixin],
   data () {
     return {
       fromRoute,
@@ -882,21 +884,37 @@ export default {
             this.dataList.forEach(item => {
               if (item.type === 'group') {
                 item.chartData = [item.children]
+                item.loaded = false
               }
               if (item.type === 'group' && !item.param.collapse) {
                 item.children.forEach(child => {
                   child.chartData = this.$refs.chartList.$refs['chart' + item.id][0].$refs.chart.$refs['chart' + item.id].$refs.chartList.$refs['chart' + child.id][0].chartData
+                  item.loaded = false
                 })
               } else {
                 item.chartData = this.$refs.chartList.$refs['chart' + item.id][0].chartData
+                item.loaded = false
               }
             })
             const data = JSON.stringify(this.dataList)
             const blob = new Blob([data], { type: '' })
             FileSaver.saveAs(blob, 'ceshi.json')
+            // const a = document.createElement('a')
+            // const url = window.URL.createObjectURL(
+            //   new Blob([this.gethtml()], {
+            //     type: ''
+            //   })
+            // )
+            // a.href = url
+            // a.download = 'file.html'
+            // a.click()
+            // window.URL.revokeObjectURL(url)
           }, 2000)
         }
       }, 200)
+    },
+    gethtml () {
+
     }
   },
   created () {

nezha-fronted/src/entrance/app/main.js

@@ -4,29 +4,29 @@ import 'xterm/dist/xterm.css'
 import '@/assets/css/main.scss'
 import '@/assets/css/font/iconfont.js'
 import ElementUI from 'element-ui'
-import i18n from './components/common/i18n'
+import i18n from '@/components/common/i18n'
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import store from './store/index'
+import store from '@/store/index'
 import App from './App'
-import router from './router'
+import router from '@/router'
 import VueResource from 'vue-resource'
 import axios from 'axios'
-import { hasPermission, hasButton } from './permission'
+import { hasPermission, hasButton } from '@/permission'
 import loadsh from 'lodash'
 import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
 
-import { post, get, put, del } from './http.js'
+import { post, get, put, del } from '@/http.js'
-import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading } from './components/common/js/tools.js'
+import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading } from '@/components/common/js/tools.js'
-import * as tools from './components/common/js/tools.js'
+import * as tools from '@/components/common/js/tools.js'
-import * as constants from './components/common/js/constants.js'
+import * as constants from '@/components/common/js/constants.js'
 
-import Pagination from './components/common/pagination' // 引入全局分页组件
+import Pagination from '@/components/common/pagination' // 引入全局分页组件
-import searchInput from './components/common/searchInput' // 搜索框组件
+import searchInput from '@/components/common/searchInput' // 搜索框组件
-import elementSet from './components/common/elementSet' // 自定义表头组件
+import elementSet from '@/components/common/elementSet' // 自定义表头组件
-import MyElSelect from './components/common/elSelect/MyElSelect'
+import MyElSelect from '@/components/common/elSelect/MyElSelect'
 import chartList from '@/components/chart/chartList.vue' // 全局引入 chartList 组件 防止 chart-group爆粗
 
 import loading from '@/components/common/loading'
@@ -114,7 +114,12 @@ Vue.mixin({
       return this.$route.path
     }
   },
-  ...mainMixin
+  methods: {
+    hasButton (code) {
+      return hasButton(this.$store.getters.buttonList, code)
+    },
+    ...mainMixin.methods
+  }
 })
 
 Vue.config.productionTip = false

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

@@ -0,0 +1,93 @@
+<template>
+  <div id="entrance" class="theme-light body container list-page" style="height: 100%">
+    <div class="main-list">
+      <div id="tableList" class="table-list" style='overflow-y: unset'>
+        <div class="table-list-box">
+          <div style="display: flex;justify-content: space-between;padding: 0 20px;box-sizing: border-box;align-items: center">
+            <span style="font-size: 16px;font-weight: 600;color: #333"> {{dataJson.panel.name}} </span>
+
+            <span>
+              {{timeFormate(dataJson.start)}} - {{timeFormate(dataJson.start)}}
+            </span>
+          </div>
+          <div  id="dashboardScrollbar" class="box-content"  ref="dashboardScrollbar" style='overflow-y: auto'>
+            <chartList
+              ref="chartList"
+              name="panel"
+              :panelId="'export'"
+              :class="{'show-top': true}"
+              :data-list="dataJson.charts.data.list"
+              :dataJson = "dataJson.chartsData"
+              :is-export-html="true"
+              :nowTimeType="nowTimeType"
+              :from="'panel'"
+              :time-range="searchTime"
+              @edit-chart="editChart"
+              @on-refresh-time="refreshTime"
+              @on-remove-chart="delChart"
+              @on-add-group-item-chart="addGroupItem"
+              @refreshPanel="refreshPanel"
+              :loading="chartListLoading"
+            />
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <span class="temp-dom"></span>
+  </div>
+</template>
+
+<script>
+import chartList from '@/components/chart/chartList.vue'
+import { loadI18n } from '@/components/common/i18n'
+import i18nData from '@/entrance/exportHtml/i18nData'
+const dataJson = window.dataJson || {
+  panel: { id: 1487, name: 'Overview', createBy: 1, type: 'dashboard', link: 0, pid: 0, weight: 0, buildIn: 1, seq: 'v3.2-buildin', children: [], parent: null, chartNum: 18 },
+  language: 'en',
+  start: 1651833659000,
+  end: 1651833659000,
+  charts: { msg: 'success', code: 200, data: { total: 1, pageSize: -1, pages: 1, pageNo: 1, list: [{ id: 10341, name: 'Last Slave', panelId: 675, groupId: 0, span: 4.0, height: 4.0, updateBy: 106, updateAt: '2022-04-26 01:53:21', type: 'line', unit: 30, weight: 0, param: { stack: 0, thresholds: [{ color: '#06a041' }], thresholdShow: true, legend: { values: [], show: true, placement: 'bottom' }, enable: { thresholds: false, legend: true, valueMapping: false }, link: '', valueMapping: [], nullType: 'null' }, pid: null, buildIn: 0, remark: '', seq: null, x: 0.0, y: 12.0, elements: [{ id: 16051, chartId: 10341, expression: 'redis_rdb_last_save_timestamp_seconds', type: 'expert', legend: '', buildIn: 0, seq: null, name: 'A', state: 1 }], sync: null, panel: { id: 675, name: 'NZ Mariadb', createBy: null, type: null, link: null, pid: null, weight: null, buildIn: null, seq: null, children: null, parent: null, chartNum: null }, group: { id: 0, name: null, panelId: null, groupId: null, span: null, height: null, updateBy: null, updateAt: null, type: null, unit: null, weight: null, param: null, pid: null, buildIn: null, remark: null, seq: null, x: null, y: null, elements: null, sync: null, panel: null, group: null, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: null }, children: null, chartNums: null, asset: null, varType: null, varId: null, varName: null, datasource: 'metrics' }] }, time: '2022-05-05 07:26:03' },
+  chartsData: {
+    '10341_0': { data: { result: [{ metric: { endpoint: '7400-192.168.40.165-MCN0-MAAT', module_id: '293', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '25', module: 'MCN0-MAAT', endpoint_id: '253', project: '7400', datacenter: 'xin_xi_gang_DC', asset_id: '29', asset: '7400-192.168.40.165', datacenter_id: '4' }, values: [[1651735328, '1651735257'], [1651735343, '1651735257'], [1651735358, '1651735257'], [1651735373, '1651735257'], [1651735388, '1651735257'], [1651735403, '1651735257'], [1651735418, '1651735257'], [1651735433, '1651735257'], [1651735448, '1651735257'], [1651735463, '1651735257'], [1651735478, '1651735257'], [1651735493, '1651735257'], [1651735508, '1651735257'], [1651735523, '1651735257'], [1651735538, '1651735257'], [1651735553, '1651735257'], [1651735568, '1651735257'], [1651735583, '1651735257'], [1651735598, '1651735257'], [1651735613, '1651735257'], [1651735628, '1651735257']] }, { metric: { endpoint: 'CM-Sync-Redis-Bifang-CM-Server', module_id: '173', nz_agent_id: '73', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '433', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '127', asset: 'Bifang-CM-Server', datacenter_id: '4' }, values: [[1651735328, '1651735396'], [1651735343, '1651735396'], [1651735358, '1651735396'], [1651735373, '1651735396'], [1651735388, '1651735396'], [1651735403, '1651735396'], [1651735418, '1651735396'], [1651735433, '1651735396'], [1651735448, '1651735396'], [1651735463, '1651735396'], [1651735478, '1651735396'], [1651735493, '1651735396'], [1651735508, '1651735396'], [1651735523, '1651735396'], [1651735538, '1651735396'], [1651735553, '1651735396'], [1651735568, '1651735396'], [1651735583, '1651735396'], [1651735598, '1651735396'], [1651735613, '1651735396'], [1651735628, '1651735396']] }, { metric: { endpoint: 'CM-Sync-Redis-Bifang-CM-Server1', module_id: '173', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '435', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '129', asset: 'Bifang-CM-Server1', datacenter_id: '4' }, values: [[1651735328, '1651735396'], [1651735343, '1651735396'], [1651735358, '1651735396'], [1651735373, '1651735396'], [1651735388, '1651735396'], [1651735403, '1651735396'], [1651735418, '1651735396'], [1651735433, '1651735396'], [1651735448, '1651735396'], [1651735463, '1651735396'], [1651735478, '1651735396'], [1651735493, '1651735396'], [1651735508, '1651735396'], [1651735523, '1651735396'], [1651735538, '1651735396'], [1651735553, '1651735396'], [1651735568, '1651735396'], [1651735583, '1651735396'], [1651735598, '1651735396'], [1651735613, '1651735396'], [1651735628, '1651735396']] }, { metric: { endpoint: 'CM-Redis-192.168.44.18', module_id: '173', nz_agent_id: '75', __name__: 'redis_rdb_last_save_timestamp_seconds', project_id: '19', module: 'CM-Sync-Redis', endpoint_id: '57', project: 'Bifang-CM', datacenter: 'xin_xi_gang_DC', asset_id: '11', asset: 'Bifang-CM-Server2', datacenter_id: '4' }, values: [[1651735328, '1651735371'], [1651735343, '1651735371'], [1651735358, '1651735371'], [1651735373, '1651735371'], [1651735388, '1651735371'], [1651735403, '1651735371'], [1651735418, '1651735371'], [1651735433, '1651735371'], [1651735448, '1651735371'], [1651735463, '1651735371'], [1651735478, '1651735371'], [1651735493, '1651735371'], [1651735508, '1651735371'], [1651735523, '1651735371'], [1651735538, '1651735371'], [1651735553, '1651735371'], [1651735568, '1651735371'], [1651735583, '1651735371'], [1651735598, '1651735371'], [1651735613, '1651735371'], [1651735628, '1651735371']] }], resultType: 'matrix' }, status: 'success' },
+    '1_1': { data: { result: [], resultType: 'matrix' }, status: 'success' },
+    '[id]_[index]': {}
+  }
+}
+export default {
+  name: 'Entrance',
+  data () {
+    return {
+      dataJson: dataJson,
+      searchTime: ['29/04/2022 10:00:54', '29/04/2022 11:00:54'],
+      nowTimeType: { start_time: '[native Date Fri Apr 29 2022 10:00:54 GMT+0800 (中国标准时间)]', end_time: '[native Date Fri Apr 29 2022 11:00:54 GMT+0800 (中国标准时间)]' }
+    }
+  },
+  components: {
+    chartList: chartList
+  },
+  created () {
+    loadI18n(i18nData)
+  },
+  methods: {
+    editChart () {},
+    refreshTime () {},
+    delChart () {},
+    addGroupItem () {},
+    chartListLoading () {},
+    refreshPanel () {}
+  }
+}
+</script>
+
+<style>
+  #entrance {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: left;
+    color: #2c3e50;
+    margin-top: 10px;
+    padding-bottom: 20px;
+  }
+</style>

nezha-fronted/src/entrance/exportHtml/exportHtml.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="data:;base64,=">
+  <link href="./favicon.ico" rel="icon" type="image/x-icon"/>
+
+  <title>Network Zodiac</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    @media only screen and (min-width: 10px) and (min-height: 10px){
+      html {
+        font-size: 10px;
+      }
+    }
+    @media only screen and (min-width: 1020px) and (min-height: 560px){
+      html {
+        font-size: 12px;
+      }
+    }
+    @media only screen and (min-width: 1360px) and (min-height: 650px){
+      html {
+        font-size: 14px;
+      }
+    }
+    @media only screen and (min-width: 1700px) and (min-height: 800px){
+      html {
+        font-size: 16px;
+      }
+    }
+  </style>
+</head>
+
+<body class="theme-light">
+<div id="entrance"></div>
+</body>
+
+</html>

nezha-fronted/src/entrance/exportHtml/exportHtml.js

@@ -0,0 +1,136 @@
+// import '@/assets/stylus/index.scss'
+// import 'element-ui/lib/theme-chalk/index.css'
+// import 'xterm/dist/xterm.css'
+import '@/assets/css/main.scss'
+// import '@/assets/css/font/iconfont.js'
+import ElementUI from 'element-ui'
+import i18n from '@/components/common/i18n'
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+import store from '@/store/exportHtml'
+import App from './App.vue'
+import router from '@/router/exportHtmlRouter'
+import VueResource from 'vue-resource'
+import axios from 'axios'
+// import { hasPermission } from '@/permission'
+import loadsh from 'lodash'
+
+import { post, get, put, del } from '@/http.js'
+import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading } from '@/components/common/js/tools.js'
+import * as tools from '@/components/common/js/tools.js'
+import * as constants from '@/components/common/js/constants.js'
+
+import chartList from '@/components/chart/chartList.vue' // 全局引入 chartList 组件 防止 chart-group爆粗
+
+import pickTime from '@/components/common/pickTime'
+import nzDataList from '@/components/common/table/nzDataList'
+import mainMixin from '@/components/common/mixin/mainMixinFun'
+Vue.component('pick-time', pickTime)
+Vue.component('nzDataList', nzDataList)
+Vue.component('chartList', chartList)
+
+Vue.prototype.$axios = axios
+Vue.prototype.$post = post
+Vue.prototype.$get = get
+Vue.prototype.$put = put
+Vue.prototype.$delete = del
+Vue.prototype.$loadsh = loadsh
+Vue.prototype.$CONSTANTS = constants
+Vue.prototype.$TOOLS = tools
+Vue.prototype.$bottomBoxWindow = bottomBoxWindow // 底部上滑框控制
+Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix
+Vue.prototype.$unixTimeParseToString = unixTimeParseToString
+Vue.prototype.$chartResizeTool = chartResizeTool
+Vue.prototype.$tableSet = tableSet
+Vue.prototype.$tableHeight = { // 列表页表格的高度
+  normal: 'calc(100% - 48px)', // 常规高度，特例在下方定义
+  assetList: 'calc(100% - 57px)',
+  profile: 'calc(100% - 78px)',
+  openSubList: { // 打开二级列表后的高度
+    mainList: 'calc(100% - 60px)',
+    subList: 'calc(100% - 25px)',
+    subListFromAsset: 'calc(100% - 45px)',
+    toTopBtnTop: 'calc(50% - 11px)'
+  },
+  toTopBtnTop: 'calc(100% - 73px)',
+  noPagination: 'calc(100% - 60px)' // 特例：没有翻页组件
+}
+
+Vue.mixin({
+  data: function () {
+    return {
+      prevent_opt: {
+        save: false,
+        import: false,
+        duplicate: false,
+        delete: false,
+        refresh: false,
+        query: false
+      }
+    }
+  },
+  computed: {
+    timeFormatMain () {
+      return this.$store.getters.getTimeFormatMain
+    },
+    getMenuList () {
+      return this.$store.state.user.menuList
+    },
+    getButtonList () {
+      return this.$store.state.buttonList
+    },
+    $routePath () {
+      return this.$route.path
+    }
+  },
+  ...mainMixin
+})
+
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(Vuex)
+Vue.use(VueResource)
+const hasPermission = {
+  install (Vue, options) {
+    Vue.directive('has', {
+      inserted: (el, binding, vnode) => {}
+    })
+  }
+}
+Vue.use(hasPermission)
+
+/* 指令 */
+Vue.directive('cancel', cancelWithChange)
+Vue.directive('clickoutside', clickoutside)
+Vue.directive('myLoading', myLoading)
+window.resizing = false
+window.vm = new Vue({
+  el: '#entrance',
+  router,
+  i18n,
+  store,
+  components: { App },
+  template: '<App/>',
+  mounted () {
+    // store.commit()
+  }
+})
+
+export default window.vm
+
+const orignalSetItem = localStorage.setItem
+localStorage.setItem = function (key, value) {
+  const setItemEvent = new Event('setItemEvent')
+  setItemEvent.key = key
+  setItemEvent.value = value
+  window.dispatchEvent(setItemEvent)
+  orignalSetItem.apply(this, arguments)
+}
+
+/* 重写组件内容 */
+/* const elUi = require("element-ui");
+const pl = require("pl-table");
+//去掉el-table表头右侧的滚动条预留空间
+elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
+pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;}; */

nezha-fronted/src/permission.js

@@ -11,6 +11,10 @@ Vue.use(VueResource)
 const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance', '/i18n'] // 免登陆白名单
 const permissionWhiteList = ['/profile', '/menu', ...loginWhiteList] // 权限白名单
 router.beforeEach((to, from, next) => {
+  if (window.entrance) {
+    next()
+    return
+  }
   if (store.getters.getNowPath !== to.path && store.getters.getNowPath !== '/login') {
     requestsArr.forEach(xhr => xhr.cancel())
   }

nezha-fronted/src/router/exportHtmlRouter/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      component: resolve => require(['@/components/layout/home'], resolve)
+    }
+  ]
+})

nezha-fronted/src/router/index.js

@@ -1,8 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-
 Vue.use(Router)
-
+console.log('router1')
 export default new Router({
   routes: [
     {
@@ -11,19 +10,19 @@ export default new Router({
     },
     {
       path: '/login',
-      component: resolve => require(['../components/common/login.vue'], resolve)
+      component: resolve => require(['@/components/common/login'], resolve)
     },
     {
       path: '/setup',
-      component: resolve => require(['../components/page/config/setup.vue'], resolve)
+      component: resolve => require(['@/components/page/config/setup'], resolve)
     },
     {
       path: '/',
-      component: resolve => require(['../components/layout/home.vue'], resolve),
+      component: resolve => require(['@/components/layout/home'], resolve),
       children: [
         {
           path: '/panel',
-          component: resolve => require(['../components/page/dashboard/panel.vue'], resolve)
+          component: resolve => require(['@/components/page/dashboard/panel'], resolve)
         },
         {
           path: '/explore',
@@ -31,88 +30,88 @@ export default new Router({
         },
         {
           path: '/overview',
-          component: resolve => require(['../components/page/dashboard/overview/overview.vue'], resolve)
+          component: resolve => require(['@/components/page/dashboard/overview/overview'], resolve)
         },
         {
           path: '/project',
-          component: resolve => require(['../components/page/monitor/project/index.vue'], resolve)
+          component: resolve => require(['@/components/page/monitor/project/index'], resolve)
         },
         {
           path: '/module',
           name: '/module',
-          component: resolve => require(['../components/page/monitor/module/moduleList.vue'], resolve)
+          component: resolve => require(['@/components/page/monitor/module/moduleList'], resolve)
         },
         {
           path: '/endpoint',
-          component: resolve => require(['../components/page/monitor/endpoint/endpointList.vue'], resolve)
+          component: resolve => require(['@/components/page/monitor/endpoint/endpointList'], resolve)
         },
         {
           path: '/asset',
-          component: resolve => require(['../components/page/asset/asset.vue'], resolve)
+          component: resolve => require(['@/components/page/asset/asset'], resolve)
         },
         {
           path: '/user',
-          component: resolve => require(['../components/page/config/user.vue'], resolve)
+          component: resolve => require(['@/components/page/config/user'], resolve)
         },
         {
           path: '/menu',
-          component: resolve => require(['../components/page/config/menus.vue'], resolve)
+          component: resolve => require(['@/components/page/config/menus'], resolve)
         },
         {
           path: '/roles',
-          component: resolve => require(['../components/page/config/roles.vue'], resolve)
+          component: resolve => require(['@/components/page/config/roles'], resolve)
         },
         {
           path: '/agent',
-          component: resolve => require(['../components/page/config/agent.vue'], resolve)
+          component: resolve => require(['@/components/page/config/agent'], resolve)
         },
         {
           path: '/assetType',
-          component: resolve => require(['../components/page/config/assetType.vue'], resolve)
+          component: resolve => require(['@/components/page/config/assetType'], resolve)
         },
         {
           path: '/assetState',
-          component: resolve => require(['../components/page/config/assetState.vue'], resolve)
+          component: resolve => require(['@/components/page/config/assetState'], resolve)
         },
         {
           path: '/assetLabel',
-          component: resolve => require(['../components/page/config/assetMeta.vue'], resolve)
+          component: resolve => require(['@/components/page/config/assetMeta'], resolve)
         },
         {
           path: '/dc',
-          component: resolve => require(['../components/page/config/dc.vue'], resolve)
+          component: resolve => require(['@/components/page/config/dc'], resolve)
         },
         {
           path: '/model',
-          component: resolve => require(['../components/page/config/model.vue'], resolve)
+          component: resolve => require(['@/components/page/config/model'], resolve)
         },
         {
           path: '/terminalLog',
-          component: resolve => require(['../components/page/config/terminalLog.vue'], resolve)
+          component: resolve => require(['@/components/page/config/terminalLog'], resolve)
         },
         {
           path: '/operationLog',
-          component: resolve => require(['../components/page/config/operationLog.vue'], resolve)
+          component: resolve => require(['@/components/page/config/operationLog'], resolve)
         },
         {
           path: '/about',
-          component: resolve => require(['../components/page/config/about.vue'], resolve)
+          component: resolve => require(['@/components/page/config/about'], resolve)
         },
         {
           path: '/ipam',
-          component: resolve => require(['../components/page/config/ipam.vue'], resolve)
+          component: resolve => require(['@/components/page/config/ipam'], resolve)
         },
         {
           path: '/license/gen',
-          component: resolve => require(['../components/page/config/licenseGen.vue'], resolve)
+          component: resolve => require(['@/components/page/config/licenseGen'], resolve)
         },
         {
           path: '/profile',
-          component: resolve => require(['../components/page/config/profile.vue'], resolve)
+          component: resolve => require(['@/components/page/config/profile'], resolve)
         },
         {
           path: '/mib/:tab',
-          component: resolve => require(['../components/page/config/snmp.vue'], resolve)
+          component: resolve => require(['@/components/page/config/snmp'], resolve)
         },
         // {
         //   path: '/snmp',
@@ -120,55 +119,55 @@ export default new Router({
         // },
         {
           path: '/mib',
-          component: resolve => require(['../components/page/config/mib.vue'], resolve)
+          component: resolve => require(['@/components/page/config/mib'], resolve)
         },
         {
           path: '/mibBrowser',
-          component: resolve => require(['../components/page/config/mibBrowser.vue'], resolve)
+          component: resolve => require(['@/components/page/config/mibBrowser'], resolve)
         },
         {
           path: '/credentials',
-          component: resolve => require(['../components/page/config/credentials.vue'], resolve)
+          component: resolve => require(['@/components/page/config/credentials'], resolve)
         },
         {
           path: '/system',
-          component: resolve => require(['../components/page/config/basic.vue'], resolve)
+          component: resolve => require(['@/components/page/config/basic'], resolve)
         },
         {
           path: '/notification',
-          component: resolve => require(['../components/page/config/system/notifyMethodTab.vue'], resolve)
+          component: resolve => require(['@/components/page/config/system/notifyMethodTab'], resolve)
         },
         {
           path: '/apiKey',
-          component: resolve => require(['../components/page/config/system/apiKeyTab.vue'], resolve)
+          component: resolve => require(['@/components/page/config/system/apiKeyTab'], resolve)
         },
         {
           path: '/license',
-          component: resolve => require(['../components/page/config/system/license.vue'], resolve)
+          component: resolve => require(['@/components/page/config/system/license'], resolve)
         },
         {
           path: '/link',
-          component: resolve => require(['../components/page/config/system/linkTab.vue'], resolve)
+          component: resolve => require(['@/components/page/config/system/linkTab'], resolve)
         },
         {
           path: '/appearance',
-          component: resolve => require(['../components/page/config/basic.vue'], resolve)
+          component: resolve => require(['@/components/page/config/basic'], resolve)
         },
         {
           path: '/email',
-          component: resolve => require(['../components/page/config/email.vue'], resolve)
+          component: resolve => require(['@/components/page/config/email'], resolve)
         },
         {
           path: '/ldap',
-          component: resolve => require(['../components/page/config/ldap.vue'], resolve)
+          component: resolve => require(['@/components/page/config/ldap'], resolve)
         },
         {
           path: '/monitor',
-          component: resolve => require(['../components/page/config/monitor.vue'], resolve)
+          component: resolve => require(['@/components/page/config/monitor'], resolve)
         },
         {
           path: '/terminal',
-          component: resolve => require(['../components/page/config/terminal.vue'], resolve)
+          component: resolve => require(['@/components/page/config/terminal'], resolve)
         },
         {
           path: '/i18n',
@@ -176,35 +175,35 @@ export default new Router({
         },
         {
           path: '/alertMessage',
-          component: resolve => require(['../components/page/alert/alertMessage.vue'], resolve)
+          component: resolve => require(['@/components/page/alert/alertMessage'], resolve)
         },
         {
           path: '/alertRule',
-          component: resolve => require(['../components/page/alert/alertRule.vue'], resolve)
+          component: resolve => require(['@/components/page/alert/alertRule'], resolve)
         },
         {
           path: '/alertSilence',
-          component: resolve => require(['../components/page/alert/alertSilence.vue'], resolve)
+          component: resolve => require(['@/components/page/alert/alertSilence'], resolve)
         },
         {
           path: '/exprTemp',
-          component: resolve => require(['../components/page/config/template/exprTemp.vue'], resolve)
+          component: resolve => require(['@/components/page/config/template/exprTemp'], resolve)
         },
         {
           path: '/chartTemp',
-          component: resolve => require(['../components/page/config/template/chartTemp.vue'], resolve)
+          component: resolve => require(['@/components/page/config/template/chartTemp'], resolve)
         },
         {
           path: '/backup',
-          component: resolve => require(['../components/page/config/backups.vue'], resolve)
+          component: resolve => require(['@/components/page/config/backups'], resolve)
         },
         {
           path: '/ping',
-          component: resolve => require(['../components/page/tool/ping.vue'], resolve)
+          component: resolve => require(['@/components/page/tool/ping'], resolve)
         },
         {
           path: '/trace',
-          component: resolve => require(['../components/page/tool/trace.vue'], resolve)
+          component: resolve => require(['@/components/page/tool/trace'], resolve)
         }
       ]
     }

nezha-fronted/src/store/exportHtml.js

@@ -0,0 +1,214 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import panel from './panel'
+// import topology from './topology'
+
+Vue.use(Vuex)
+const store = new Vuex.Store({
+  modules: {
+    panel
+  },
+  state: {
+    /* 监听对象变化，用于顶部菜单与底部内容的同步 */
+    currentProject: { id: '', name: '', remark: '' },
+    currentDc: null,
+    projectListChange: 0,
+    reloadFacade: true, // 重新加载project
+    showPanel: {
+      id: 0,
+      name: '',
+      type: 'dashboard'
+    },
+    consoleShow: false, // 是否显示console窗口
+    consoleCount: 0, // 当前console窗口数
+    isAddConsole: false, // 是否增加窗口
+    consoleParam: {}, // 新开console窗口参数
+    linkData: [], // 导航数据
+    projectFilter: {
+      panelId: 0,
+      start_time: '',
+      end_time: '',
+      searchName: ''
+    },
+    idcArr: [],
+    overViewProject: {},
+    dcDataRefresh: false,
+    showTopoScreen: false,
+    logo: '',
+    isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
+    metricsList: [],
+    langList: [],
+    i18nReady: false,
+    timeFormatMain: localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss',
+    globalShow: false,
+    globalSearchId: '',
+    isRouteLive: true,
+    nowPath: ''
+  },
+  getters: {
+    getGlobalSearchId (state) {
+      return state.globalSearchId
+    },
+    getTimeFormatMain (state) {
+      return state.timeFormatMain
+    },
+    getGlobalShow (state) {
+      return state.globalShow
+    },
+    getLinkData (state) {
+      return state.linkData
+    },
+    getProjectFilter (state) {
+      return state.projectFilter
+    },
+    getReloadFacade (state) {
+      return state.reloadFacade
+    },
+    getIdcArr (state) {
+      return state.idcArr
+    },
+    getOverViewProject (state) {
+      return state.overViewProject
+    },
+    getDcDataRefresh (state) {
+      return state.dcDataRefresh
+    },
+    getCurrentProject (state) {
+      return state.currentProject
+    },
+    getShowTopoScreen (state) {
+      return state.showTopoScreen
+    },
+    getLogo (state) {
+      return state.logo
+    },
+    getIsShrink (state) {
+      return state.isShrink
+    },
+    getMetricsList (state) {
+      return state.metricsList
+    },
+    getLangList (state) {
+      return state.langList
+    },
+    getIsRouteLive (state) {
+      return state.isRouteLive
+    },
+    getNowPath (state) {
+      return state.nowPath
+    },
+    i18nIsReady (state) {
+      return state.i18nReady
+    }
+  },
+  mutations: {
+    /* 监听对象变化，用于顶部菜单与底部内容的同步 */
+    projectListChange (state) {
+      state.projectListChange++
+    },
+    currentProjectChange (state, project) {
+      state.currentProject = project
+    },
+    setGlobalSearchId (state, id) {
+      state.globalSearchId = id
+    },
+    panelShowPanelChange (state, panel) { // 用来panel页控制初始panel的
+      state.showPanel.id = panel.id
+      state.showPanel.name = panel.name
+    },
+
+    openConsole (state) { // 打开console，如果当前窗口数为0，则默认新建一个console
+      state.consoleShow = true
+    },
+    addConsole (state, data) { // 打开console，并新建一个console
+      state.consoleShow = true
+      state.isAddConsole = true
+      state.consoleParam = data
+      setTimeout(() => {
+        state.isAddConsole = false
+      }, 100)
+    },
+    addConsoleNum (state) {
+      state.consoleCount++
+    },
+    removeConsole (state) { // 移除一个console，如果是最后一个，则关闭窗口，否则不关闭窗口
+      state.consoleCount--
+      if (state.consoleCount === 0) {
+        state.consoleShow = false
+      }
+    },
+    closeConsole (state) { // 关闭console窗口
+      state.consoleShow = false
+      state.consoleCount = 0
+      state.consoleParam = {}
+    },
+    minConsole (state) { // 最小化窗口
+      state.consoleShow = false
+    },
+    setLinkData (state, data) {
+      state.linkData = data
+    },
+    setProjectFilter (state, data) {
+      state.projectFilter = data
+    },
+    setReloadFacade (state) {
+      state.reloadFacade = false
+      setTimeout(() => {
+        state.reloadFacade = true
+      })
+    },
+    setIdcArr (state, data) {
+      state.idcArr = data
+    },
+    setCurrentDc (state, data) {
+      state.currentDc = data
+    },
+    setOverViewProject (state, data) {
+      state.overViewProject = data
+    },
+    setDcDataRefresh (state) {
+      state.dcDataRefresh = true
+      setTimeout(() => {
+        state.dcDataRefresh = false
+      }, 100)
+    },
+    setShowTopoScreen (state, boolean) {
+      state.showTopoScreen = boolean
+    },
+    setLogo (state, logo) {
+      state.logo = logo
+    },
+    isShrink (state) {
+      state.isShrink = !state.isShrink
+      localStorage.setItem('nz-left-menu-shrink', state.isShrink)
+    },
+    setMetricsList (state, metricsList) {
+      state.metricsList = [...metricsList]
+    },
+    setLangList (state, langList) {
+      state.langList = langList
+    },
+    setTimeFormatMain (state, timeFormat) {
+      state.timeFormatMain = timeFormat
+    },
+    setGlobalShow (state, globalShow) {
+      state.globalShow = globalShow
+    },
+    setIsRouteLive (state) {
+      state.isRouteLive = false
+      setTimeout(() => {
+        state.isRouteLive = true
+      })
+    },
+    setNowPath (state, path) {
+      state.nowPath = path
+    },
+    i18nReady (state, ready) {
+      state.i18nReady = ready
+    }
+  },
+  actions: {
+  }
+})
+
+export default store

nezha-fronted/src/ts.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
+<script>
+  const nums = 34567
+function sun () {
+    let flag = true
+
+}
+</script>

nezha-fronted/static/config.json

@@ -1,2 +1,2 @@
-{"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}
+{"baseUrl":"/", "version": "21.04"}