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

# Conflicts:
#	nezha-fronted/build/webpack.prod.conf.js
#	nezha-fronted/package-lock.json
#	nezha-fronted/src/components/page/dashboard/panel.vue

.gitlab-ci.yml

@@ -0,0 +1,99 @@
+# docker镜像
+image: git.mesalab.cn:7443/nezha/nz-build-env:1.3
+# 定义全局变量
+variables:
+  MINIO_HOST: 'http://192.168.44.36:2020/'
+  MINIO_USER: 'admin'
+  MINIO_PWD: "Nezha@02!"
+# 依赖的docker服务
+# services:
+#  - mariadb
+# - redis
+# 开始执行脚本前所需执行脚本
+before_script:
+  - echo "begin ci"
+# 脚本执行完后的钩子，执行所需脚本
+after_script:
+  - echo "end ci"
+# 该ci pipeline适合的场景
+stages:
+  - build
+  - test
+# maven setting /usr/share/maven/conf/settings.xml
+cache:
+  paths:
+    - /builds/nezha/nezha-fronted/nezha-fronted/node_modules/
+
+
+#  dev 分支
+dev_build:
+  # 所需执行的脚本
+  script:
+    - env | sort
+    - pwd 
+    - cd nezha-fronted
+
+    # 安装 npm 依赖文件
+    - echo "npm install ..."
+    - npm install --registry=http://registry.npmmirror.com
+    - echo "npm run build"
+    - npm run build
+
+    - cd /builds/nezha/nezha-fronted/nezha-fronted/dist 
+    - rm -rf nz-gui*.zip
+    - export FILE_NAME=nz-gui-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHORT_SHA.zip
+    # 生成 git log 日志文件
+    - sed -i 's+</body>+<a style="position:fixed;bottom:20px;left:40px;z-index:999;color:white;" target="_blank" href="./static/git-log.html">更新记录</a>\n</body>+g' ./index.html;
+    - echo "<pre>" > ./static/git-log.html
+    - "git log -100 --pretty=format:'%ad : %s' >> ./static/git-log.html"
+    - echo "</pre>" >> ./static/git-log.html
+    - zip -q -r $FILE_NAME ./*
+
+    # 将 dist zip 上传到 minio 
+    - mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
+    - mc cp $FILE_NAME nz/ci-cd/nz-gui/$FILE_NAME
+    - mc cp $FILE_NAME nz/ci-cd/nz-gui/nz-gui-$CI_COMMIT_REF_NAME-latest.zip
+  artifacts:
+    name: "nz-gui-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHORT_SHA"
+    when: on_success
+    paths:
+      - /builds/nezha/nezha-fronted/nezha-fronted/dist/nz-gui*.zip
+    expire_in: 1 day
+  # 在哪个分支上可用
+  only:
+    - /^dev-.*$/i
+  # 指定哪个ci runner跑该工作
+  tags:
+    - nezha
+
+
+# release build
+rel_build:
+  stage: build
+  # 所需执行的脚本
+  script:
+    - env | sort
+    - pwd 
+    - echo "npm install ..."
+    - cd nezha-fronted
+    - npm install --registry=http://registry.npmmirror.com
+    - echo "npm run build"
+    - npm run build
+    - cd /builds/nezha/nezha-fronted/nezha-fronted/dist
+    - mv nz-gui*.zip nz-gui-$CI_COMMIT_SHORT_SHA.zip
+    - md5sum nz-gui-$CI_COMMIT_SHORT_SHA.zip > nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
+    - mc alias set nz $MINIO_HOST $MINIO_USER $MINIO_PWD
+    - mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip
+    - mc cp nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt nz/release/nz-gui/nz-gui-$CI_COMMIT_SHORT_SHA.zip.md5sum.txt
+  artifacts:
+    name: "nz-gui-$CI_COMMIT_REF_NAME-$CI_COMMIT_SHORT_SHA"
+    when: on_success
+    paths:
+      - /builds/nezha/nezha-fronted/nezha-fronted/dist/nz-gui-$CI_COMMIT_SHORT_SHA.zip
+    expire_in: 1 week
+  # 在哪个分支上可用
+  only:
+    - /^rel-.*$/i
+  # 指定哪个ci runner跑该工作
+  tags:
+    - nezha

nezha-fronted/.babelrc

@@ -33,7 +33,8 @@
       ]
     },
     "test": {
-      "plugins": ["istanbul"]
+      "presets": ["env"],
+      "plugins": ["transform-es2015-modules-commonjs"]
     }
   }
 }

nezha-fronted/README.md

@@ -20,6 +20,17 @@ npm run build --report
 
 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
 
-使用
+#启动项目
 
 需要配置 config.json 为 {"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}
+
+#自动化测试
+npm run unit
+根目录下 /test/jest.conf.js collectCoverageFrom 变量配置需要测试报告的文件 （因为暂时不测所有 只能一个个引入）
+specs 配置对应的测试用例 （https://docs.geedge.net/pages/viewpage.action?pageId=58310079 参考匹配器）
+
+#思维导图
+https://docs.geedge.net/pages/viewpage.action?pageId=67209306
+
+
+

nezha-fronted/build/build.js

@@ -4,8 +4,8 @@ require('./check-versions')()
 let arg = process.argv.splice(2)[0];
 process.env.NODE_ENV = arg == 'dev' ? 'development' : 'production'
 process.env.BUILD_MODE = arg
-
 const ora = require('ora')
+
 const rm = require('rimraf')
 const path = require('path')
 const chalk = require('chalk')

nezha-fronted/build/script/buildEnd.sh

@@ -1,30 +0,0 @@
-#!/bin/bash
-
-BUILD_MODE=$1
-
-CUR_PATH=`pwd`
-echo 'cur path is '${CUR_PATH}
-DIST_PATH=$CUR_PATH/dist
-
-echo 'dist dir path is '${DIST_PATH}
-
-cp -f src/assets/img/explore-tab-logo.png $DIST_PATH/static
-
-cd $DIST_PATH
-
-if [[ 'all' == "${BUILD_MODE}" ]];then
-	echo 'build all to zip file ,now moving map picture to static dir...'
-	\cp -rf ../static/Tiles/ $DIST_PATH/static/
-fi
-echo 'start create zip...'
-
-#find ./ * -exec touch -t $(date +%Y%m%d0000.00) {} \;
-
-#find ./ * -exec touch -t 202104301200.00 {} \;
-
-zip -rX nz-gui.zip ./* >/dev/null
-
-MD5=$(md5sum nz-gui.zip |awk '{print $1}'|cut -c 1-8)
-mv nz-gui.zip nz-gui-${MD5}.zip
-
-echo 'package zip file is complate ,please check in '${DIST_PATH}

nezha-fronted/build/script/buildStart.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-echo 'clean dist dir ...'
-rm -rf dist

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

@@ -29,6 +29,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       ]
     },
     hot: true,
+    inline:true,
     contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
     host: HOST || config.dev.host,
@@ -54,6 +55,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
+      favicon: path.resolve(__dirname, '../src/assets/img/favicon.ico'),
       filename: 'index.html',
       template: 'index.html',
       inject: true

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

@@ -1,5 +1,6 @@
 'use strict'
 const path = require('path')
+
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
@@ -9,7 +10,7 @@ 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 UglifyJsPlugin = require('uglifyjs-webpack-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')
@@ -57,15 +58,18 @@ const webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new UglifyJsPlugin({
+    new ParallelUglifyPlugin({
-      uglifyOptions: {
+      cacheDir: '.cache/',
+      uglifyJS: {
+        output: {
+          comments: false
+        },
+        warnings: false,
         compress: {
-          warnings: false
+          drop_debugger: true,
+          drop_console: true
         }
-      },
+      }
-      exclude: /manifest.+js/,
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
     }),
     // extract css into its own file
     new ExtractTextPlugin({
@@ -87,6 +91,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     // 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: 'index.html',
       hash: false,
@@ -190,26 +195,57 @@ if (process.env.NODE_ENV == 'development') {
         }
       ]
     })
-
   )
 } else {
   webpackConfig.plugins.push(
+    new fileManagerPlugin({
+      onStart: [
+        {
+          delete: [path.join(__dirname, '../dist/')]
+        }
+      ],
+      onEnd: [
+        {
+          move: [
+            { source: path.join(__dirname, '../dist', '/static/config.json'), destination: path.join(__dirname, '../dist/config.json') }
+
+          ],
+          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'),
+            path.join(__dirname, '../.cache/')
+          ]
+        },
+        {
+          archive: [
+            { source: path.join(__dirname, '../dist'), destination: path.join(__dirname, '../dist', '/nz-gui.zip') }
+          ]
+        }
+      ]
+    }),
     // new WebpackZipPlugin({
     //   initialFile: './dist',
     //   endPath: './dist',
-    //   zipName: 'nz-gui.zip',
+    //   zipName: 'nz-gui.zip'
-    //   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;':'')
+    //   // 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({
+    // new WebpackShellPlugin({
-      onBuildStart: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildStart.sh'],
+    //   onBuildStart: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildStart.sh'],
-      onBuildEnd: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildEnd.sh ' + process.env.BUILD_MODE]
+    //   onBuildEnd: ['/bin/bash ' + path.join(__dirname, 'script') + '/buildEnd.sh ' + process.env.BUILD_MODE]
-    })
+    // })
     // new fileManagerPlugin({
-    //   onStart:[
+    //   onStart: [
     //     {
-    //       delete:[path.join(__dirname,'../dist/') ]
+    //       delete: [path.join(__dirname, '../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: '127.0.0.1', // can be overwritten by process.env.HOST
+    host: 'localhost', // 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/index.html

@@ -5,9 +5,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="data:;base64,=">
-  <link href="./static/explore-tab-logo.png" rel="icon" type="image/x-icon"/>
+  <link href="./favicon.ico" rel="icon" type="image/x-icon"/>
 
-  <title>Nezha</title>
+  <title>Network Zodiac</title>
   <style>
     * {
       margin: 0;

nezha-fronted/package.json

@@ -8,9 +8,17 @@
     "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",
     "start": "npm run dev",
     "build": "node build/build.js",
-    "lint": "eslint --fix --ext .js,.vue src"
+    "lint": "eslint --fix --ext .js,.vue src",
+    "unit": "jest --config test/unit/jest.conf.js --coverage"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^0.19.15",
+    "@codemirror/basic-setup": "^0.19.3",
+    "@codemirror/highlight": "^0.19.8",
+    "@codemirror/language": "^0.19.10",
+    "@codemirror/lint": "^0.19.6",
+    "@codemirror/state": "^0.19.9",
+    "@codemirror/view": "^0.19.48",
     "@johmun/vue-tags-input": "^2.1.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "@svgdotjs/svg.js": "^3.0.16",
@@ -23,6 +31,7 @@
     "@topology/layout": "^0.3.0",
     "@topology/sequence-diagram": "^0.3.0",
     "axios": "^0.19.0",
+    "codemirror-promql": "^0.19.0",
     "cytoscape": "^3.15.2",
     "d3": "^6.7.0",
     "d3-hexbin": "^0.2.2",
@@ -57,11 +66,15 @@
     "xterm": "^3.1.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.17.9",
+    "@vue/test-utils": "^1.0.0-beta.13",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.26.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
@@ -82,6 +95,9 @@
     "generate-asset-webpack-plugin": "^0.3.0",
     "git-revision-webpack-plugin": "^3.0.6",
     "html-webpack-plugin": "^2.30.1",
+    "jest": "^24.0.0",
+    "jest-serializer-vue": "^0.3.0",
+    "jest-transform-stub": "^2.0.0",
     "lodash": "^4.17.21",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
@@ -98,14 +114,16 @@
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-resource": "^1.5.1",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0",
+    "webpack-parallel-uglify-plugin": "1.1.4",
     "webpack-shell-plugin": "^0.5.0",
     "webpack-zip-plugin": "^0.1.6"
   },

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

@@ -29,7 +29,16 @@
   margin-top: 0;
   transform: translate(-50%, -50%);
 }
-
+.export-pdf-mask {
+  .el-loading-spinner {
+    .el-loading-text{
+      white-space: nowrap;
+      margin-left: 54px;
+      margin-top: 10px;
+      color: #f8f8f8;
+    }
+  }
+}
 /* 自定义的dropdown */
 .nz-dropdown {
   width: 90px;

nezha-fronted/src/assets/css/common/loading.scss

@@ -15,7 +15,8 @@
   width: 100%;
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255,255,255,0.9);
+  background-color: $--background-color-empty;
+  opacity: 0.8;
   margin: 0;
   top: 0;
   right: 0;

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -425,10 +425,10 @@
 }
 .chart-stat{
   width: 100%;
-  height: calc(100% - 20px);
+  height: 100%;
   display: flex;
   flex-wrap: wrap;
-  padding: 5px;
+  padding: 2px;
   box-sizing: border-box;
   flex-direction: row;
   align-items: center;
@@ -441,7 +441,7 @@
     word-break: break-all;
     border-radius: 2px;
     box-sizing: border-box;
-    padding: 2px;
+    //padding: 2px;
     overflow: hidden;
     color: $--color-text-regular;
     flex-grow: 1

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -1,38 +1,80 @@
-.chart-fullscreen.nz-dialog .panel-chart--fullscreen{
+.chart-fullscreen.nz-dialog .panel-chart--fullscreen {
-  .alert-message-info-header{
+  .alert-message-info-header {
-    border-bottom: 1px solid rgba(0,0,0,0.09);;
+    height: 72px;
-    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
-  }
-  .alert-message-info-box{
-    box-sizing: border-box;
     padding: 20px;
+    margin-top: 0;
+
+    .chart-header__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 600;
+      font-family: PingFangSC-Medium;
+      color: $--color-text-primary;
+
+      .alert-message-state {
+        display: block;
+        line-height: 20px;
+        margin-right: 15px;
+        font-size: 14px;
+        font-weight: normal;
+        color: $--color-text-label;
+        padding: 2px 8px;
+        border-radius: 4px; 
+      }
+    }
+
+  }
+
+  .alert-message-info-box {
+    box-sizing: border-box;
+    padding: 20px 20px 33px 30px;
     display: flex;
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    .info-box-left{
+
+    .info-box-left {
       width: 66%;
       min-width: 500px;
       min-height: 600px;
       margin-right: 20px;
       display: flex;
       flex-direction: column;
+
       .nz-chart {
         height: 36%;
         margin-bottom: 20px;
         border: 1px solid $--border-color-light;
         flex: none;
       }
-      .alert-message-info-tab{
+
-        height: 63%;
+      .alert-message-info-tab {
+        height: 61.8%;
         flex: 1;
+
+        .alert-label-header-title3 {
+          display: none;
+        }
+
+        .alert-rule-box {
+          margin-bottom: 25px;
+
+          .alert-rule-value {
+            padding-right: 30px;
+          }
+        }
+
         .el-tabs.el-tabs--card {
           height: 100%;
           display: flex;
           flex-direction: column;
-          .el-tabs__header{
+
+          .el-tabs__header {
             margin: 0;
-            .el-tabs__item{
+
+            .el-tabs__item {
               border: 1px solid $--border-color-light;
               border-radius: 2px;
               //border-bottom: none;
@@ -40,19 +82,24 @@
               background: $--background-color-base;
               color: $--color-text-regular;
             }
-            .el-tabs__item:hover{
+
+            .el-tabs__item:hover {
               color: $--color-warning;
               background: $--background-color-empty;
               border-bottom-color: $--background-color-empty;
             }
-            .el-tabs__item.is-active{
+
+            .el-tabs__item.is-active {
               color: $--color-warning;
               background: $--background-color-empty;
               border-bottom-color: $--background-color-empty;
             }
           }
-          .el-tabs__content{
+
-            padding: 20px;
+          .el-tabs__content {
+            // box-sizing:content-box;
+            // height: 100%;
+            padding: 25px 30px;
             flex: 1;
             border: 1px solid $--border-color-light;
             border-top: none;
@@ -61,72 +108,118 @@
         }
       }
     }
-    .info-box-right{
+
+    .info-box-right {
       flex: 1;
       height: 100%;
       border: 1px solid #E7EAED;
       border-radius: 2px;
       box-sizing: border-box;
       padding: 0px 20px 20px 0;
+
       .table-no-data {
         height: calc(100% - 80px);
       }
-      .time-line-header{
+
-        padding: 20px;
+      .time-line-header {
+        padding: 20px 20px 35px 20px;
         font-size: 16px;
         color: $--color-text-primary;
         font-weight: 600;
         display: flex;
         justify-content: space-between;
+
         .scope-icon-box {
           display: flex;
           flex: 1;
           justify-content: right;
         }
+
         .scope-box {
           cursor: pointer;
           color: $--background-color-disabled;
+
           .nz-icon {
-            margin-right: 5px;
+            margin-right: 20px;
-            color: $--background-color-disabled ;
+            color: $--background-color-disabled;
             font-weight: 400;
           }
         }
-        .scope-box.is-select{
+
+        .scope-box.is-select {
           color: $--color-monitor;
+
           .nz-icon {
             color: $--color-monitor;
           }
         }
-        #time-line-scope{
+
+        #time-line-scope {
           //float: right;
         }
       }
-      .el-timeline{
+
+      .el-timeline {
         height: calc(100% - 80px);
         overflow-y: auto;
         padding-top: 14px;
         padding-left: 40px;
         box-sizing: border-box;
-        .el-timeline-item{
+
-          padding-bottom: 24px;
+        .el-timeline-item {
+          padding-bottom: 20px;
+
+          .el-timeline-item__wrapper {
+            .el-timeline-item__timestamp.is-top {
+              top: -50px;
+            }
+
+            .el-timeline-item__content {
+              .nz-alert-tag.nz-alert-tag_info {
+                margin-right: 10px;
+              }
+
+
+
+              .nz-alert-tag_info {
+                .nz-alert-tag__label {
+                  padding-left: 10px;
+                  padding-right: 10px;
+                  text-align: center;
+                  line-height: 20px;
+                }
+
+                .nz-alert-tag__content {
+                  padding-left: 6px;
+                  padding-right: 6px;
+                  text-align: center;
+                  line-height: 20px;
+                }
+              }
+            }
+          }
         }
-        .has-time{
+
+        .has-time {
           padding-top: 36px;
-          .el-timeline-item__tail{
+
+          .el-timeline-item__tail {
             height: calc(100% + 14px);
             top: -14px;
           }
         }
-        .el-timeline-item.last .el-timeline-item__tail{
+
+        .el-timeline-item.last .el-timeline-item__tail {
           display: block;
           top: -100%;
         }
-        .el-timeline-item:last-child .el-timeline-item__tail.only{
+
+        .el-timeline-item:last-child .el-timeline-item__tail.only {
           display: block;
           top: -100%;
         }
-        .el-timeline-item__timestamp.is-top{
+
+        .el-timeline-item__timestamp.is-top {
           position: absolute;
           top: -40px;
           left: -20px;
@@ -137,21 +230,25 @@
           margin: 0;
           padding: 10px 0;
         }
+
         .el-timeline-item__node {
           z-index: 1;
         }
-        .time-line-item-header{
+
+        .time-line-item-header {
           font-size: 14px;
-          color: #333333;
+          color: $--color-text-primary;
           font-weight: 400;
         }
       }
-      .load-more-box{
+
+      .load-more-box {
         display: flex;
         justify-content: center;
         align-items: center;
       }
     }
+
     .table-no-data {
       width: 100%;
       height: 100%;
@@ -160,22 +257,27 @@
       align-items: center;
       justify-content: center;
     }
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       border: none;
     }
-    .info-box-header{
+
+    .info-box-header {
       height: 100%;
       overflow-y: auto;
     }
-    .info-box-title{
+
+    .info-box-title {
       font-size: 16px;
       color: $--color-text-primary;
       font-weight: 600;
       margin-bottom: 12px;
     }
-    .info-box-content{
+
+    .info-box-content {
       font-size: 14px;
-      color: #666666;
+      // color: #666666;
+      color: $--color-text-regular;
       font-weight: 400;
       width: 100%;
       margin-bottom: 40px;
@@ -183,3 +285,244 @@
   }
 }
 
+.el-dialog__body {
+  .alert-message-info-box {
+    .info-box-right {
+      #alert .name-labe {
+        display: none;
+      }
+      .el-timeline {
+        .el-timeline-item {
+          .el-timeline-item__wrapper {
+            .el-timeline-item__content {
+              .alert-message-summary {
+                margin: 10px 0 4px;
+                font-size: 14px;
+                font-weight: 400;
+                padding-left: 5px;
+              }
+
+              .alert-message-startAt {
+                font-size: 14px;
+                line-height: 20px;
+                font-weight: 400;
+                margin: 3px 0 5px;
+                padding-left: 5px;
+
+                span:nth-of-type(n) {
+                  color: $--color-text-secondary;
+                  margin-right: 5px;
+                }
+
+                span:nth-of-type(2n) {
+                  color: $--color-text-regular;
+                  margin-right: 15px;
+                }
+              }
+
+              .margin-b-10 {
+                .alert-message-state.gray-bg {
+                  margin-right: 5px;
+                  padding: 2px 8px;
+                }
+              }
+
+              .alert-message-labels {
+                display: flex;
+                flex-wrap: wrap;
+
+                .nz-alert-tag.nz-alert-tag_normal {
+                  display: inline-block;
+                  margin-right: 10px !important;
+                  display: flex;
+                  flex-direction: row;
+
+                  .nz-alert-tag__label {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+
+                  .nz-alert-tag__content {
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+                }
+
+                .nz-alert-tag.nz-alert-tag_info {
+                  display: inline-block;
+                  margin-right: 10px !important;
+
+                  .nz-alert-tag__label {
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+
+                  .nz-alert-tag__content {
+                    padding-left: 6px;
+                    padding-right: 6px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+                }
+              }
+
+            }
+          }
+        }
+      }
+    }
+
+    .info-box-left {
+      .alert .name-labe {
+        display: block;
+      }
+      .name-labe{
+        display: none;
+      }
+      .alert-message-info-tab {
+        .el-tabs.el-tabs--card.el-tabs--top {
+          .el-tabs__content {
+            #pane-alertRule{
+              .alert-rule-nfo{
+                .alert-rule-box{
+                  display: flex;
+                }
+              }
+            }
+            #pane-detail {
+              .info-box-header {
+                .info-box-content {
+                  display: flex;
+                  flex-wrap: wrap;
+
+                  .nz-alert-tag.nz-alert-tag_normal {
+                    display: inline-block;
+                    margin-right: 20px !important;
+                    display: flex;
+                    flex-direction: row;
+
+                    .nz-alert-tag__label {
+                      padding-left: 10px;
+                      padding-right: 10px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+
+                    .nz-alert-tag__content {
+                      padding-left: 6px;
+                      padding-right: 6px;
+                      color: $--color-text-primary;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+                  }
+
+                  .nz-alert-tag.nz-alert-tag_info {
+                    display: inline-block;
+                    margin-right: 20px !important;
+
+                    .nz-alert-tag__label {
+                      padding-left: 10px;
+                      padding-right: 10px;
+                      text-align: center;
+                      line-height: 20px;
+                    }
+
+                    .nz-alert-tag__content {
+                      padding-left: 6px;
+                      padding-right: 6px;
+                      text-align: center;
+                      line-height: 20px;
+                    }
+                  }
+                }
+              }
+            }
+
+            #pane-dc {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+                  display: flex;
+
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-asset {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+                  display: flex;
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-endpoint {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+                  display: flex;
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-module {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+                  display: flex;
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-project {
+              .alert-label-info {
+                .alert-label-box {
+                  margin-bottom: 25px;
+                  display: flex;
+                  .alert-label-title {
+                    margin-right: 30px;
+                  }
+                }
+              }
+            }
+
+            #pane-trbShot {
+              .editor-core.ql-container.ql-snow {
+                background-color: #23241E;
+                border-radius: 2px;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+

nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss

@@ -92,7 +92,7 @@
     color: #60BEFF;
     font-size: 13px
   }
-
+  
   .panel-dropdown-btn:hover {
     color: #409EFF;
   }
@@ -151,6 +151,18 @@
       background: $--background-color-empty;
     }
   }
+  .date-range-panel{
+    .el-button--primary{
+      color: $--color-text-label;
+      background-color: $--color-primary;
+      border-color: $--color-primary;
+    }
+    .el-button--primary:hover{
+      color: $--color-text-label;
+      background-color: $--color-primary;
+      border-color: $--color-primary;
+    }
+  }
 
   .nz-dashboard-dropdown {
     height: 300px;

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

@@ -0,0 +1 @@
+.login .model{height:100%;width:100%;background-color:rgba(130,130,135,0.4);position:absolute;top:0;left:0;z-index:1}.login .logo{z-index:2;width:392px}.login .logo img{width:100%}.login .login-main{z-index:2;background:rgba(106,106,106,0.5);border-radius:8px;padding:40px 50px 20px 50px}.login .login-box{z-index:2;width:392px}.login .login-box .login-label{font-size:22px;color:#FFFFFF;font-weight:500}.login .login-box .login-label-foot{font-size:14px;color:#DEDEDE;line-height:20px;font-weight:500;word-break:keep-all;width:90%}.login .login-box .login-input{padding:12px 0;height:46px;position:relative}.login .login-box .login-input .nz-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:white;font-size:20px}.login .login-box .login-input input{height:100%;width:calc(100% - 60px);background-color:rgba(0,0,0,0.55);padding-left:60px;font-size:20px;border:none;outline:none;color:white;border-radius:4px}.login .login-foot{padding-top:15px;display:flex;width:392px;justify-content:space-between;position:relative}.login .login-btn{color:white;border-radius:2px;background-color:#fba649;border:none;outline:none;height:44px;width:100%;cursor:pointer;font-size:14px;transition:all linear .2s}.login .login-btn .my-loading-box .my-loading{margin-top:-10px}.login .login-btn:not(.nz-btn-disabled):hover{background-color:#fcb160}.login .login-foot-lang{position:relative;cursor:pointer;background:rgba(0,0,0,0.25);border-radius:4px;padding:0 14px}.login .login-foot-lang .nz-icon:not(.nz-icon-arrow-up):not(.nz-icon-arrow-down){font-size:30px;color:white;margin-right:30px;line-height:45px}.login .login-foot-lang-list{position:absolute;height:25px;padding:12px;background-color:rgba(0,0,0,0.55);top:70px;right:0;border-radius:4px}.login .login-foot-lang-list .nz-icon{font-size:25px;color:white;cursor:pointer}.login .login-foot .el-loading-spinner{width:36px;height:36px}.login .login-foot-lang-list::before{content:" ";width:0;height:0;border-width:10px;border-style:solid;border-color:transparent transparent rgba(0,0,0,0.55) transparent;position:absolute;top:-20px;left:50%;transform:translateX(-50%)}.login .login-foot-buildOn{position:absolute;bottom:20px;z-index:100;left:50%;transform:translateX(-50%)}.login .login-foot-buildOn a{font-size:14px;color:#eee;text-shadow:1px 1px 3px #333;text-decoration:none}.login .nz-icon-arrow-down,.login .nz-icon-arrow-up{position:absolute;font-size:18px;color:white;top:50%;right:8px;transform:translateY(-50%)}.login .license-warn{color:#d92926;margin-top:22px;text-align:center;text-shadow:1px 1px 3px #ddd}.login .login-license{margin-top:27px;text-align:center;line-height:30px;display:flex;justify-content:space-between}.login .login-license .license-info{margin-bottom:10px;color:white;text-shadow:1px 1px 3px #333;white-space:nowrap}.login .login-license .login-btn{height:40px;width:auto;padding:0 20px;margin-bottom:10px}.login .login-license .download-btn.login-btn{padding:0 12px}.login .login-dialog-title{background:#F9F9F9;font-size:14px;color:#666666;letter-spacing:0;line-height:20px;font-weight:400;padding:10px;margin-bottom:10px;word-break:keep-all}.login .login-dialog-title2{background:rgba(246,248,250,0.9);border:1px solid #E7EAED;border-radius:2px;height:248px;padding:15px;position:relative}.login .login-dialog-title2 .copy-value-content{position:absolute;right:5px;top:5px;cursor:pointer}.login .login-dialog-title2 .login-dialog-recover{height:calc(100% - 30px);overflow-y:auto}.login .enter-code{font-size:14px;color:#666666;letter-spacing:0;font-weight:400;margin-bottom:10px}.login .qrCode-box{display:flex;align-items:center}.login .qrCode-content{padding:4px;margin-left:10px}.login .qrCode-text{width:60%;margin-left:10px;font-size:14px;color:#666666;letter-spacing:0;font-weight:400}.login .qrCode-authKey{background:#f6f8fa;border:1px solid #E7EAED;border-radius:2px;padding:5px 12px;font-size:14px;color:#333333;letter-spacing:0;font-weight:400;margin-top:12px}.login .footer .footer__btn{margin:0 15px;height:30px;min-width:74px;padding:0 15px;color:white;background-color:#FA901C;border:none;border-radius:4px;outline:none;box-sizing:border-box;font-size:14px;cursor:pointer;transition:background-color linear .2s, color linear .1s}.login .footer .footer__btn:hover:not(.footer__btn--disabled){background-color:#fba649}.login .footer .footer__btn--light{background-color:white;border:1px solid #DEDEDE;color:#333}.login .footer .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled){background-color:white;border-color:#fdc88e;color:#FA901C}.login .footer .footer__btn--disabled{opacity:.6;cursor:default}.login .nz-dialog .el-dialog__body{padding-bottom:0}.login .verify-link{font-family:Roboto-Black;font-size:14px;color:#3C92F1;letter-spacing:0;line-height:20px;font-weight:400;cursor:pointer}.login .verify-link:hover{border-bottom:1px solid  #3C92F1}.login .circle{display:inline-block;width:6px;height:6px;border-radius:50%;background:#CECECE;margin-right:10px}

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

@@ -20,7 +20,7 @@
     z-index: 2;
     background: rgba(106,106,106,0.5);
     border-radius: 8px;
-    padding: 55px 50px 0 50px;
+    padding: 40px 50px 20px 50px;
   }
   .login-box {
     z-index: 2;

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

@@ -8,7 +8,7 @@
   line-height: 40px;
   height: 40px;
   box-sizing: border-box;
-  border: 1px solid $--border-color-base;
+  border: 1px solid $--border-color-light;
   border-radius: $--border-radius-small;
 }
 .calendar.calendar--small {
@@ -58,7 +58,7 @@
   margin-left: 4px;
 }
 .panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
-  left: 85% !important;
+  left: 50% !important;
 }
 
 .panel-time-picker-popper .el-date-table td.today span {
@@ -73,3 +73,244 @@
   padding: 0 8px;
   color: #aaa;
 }
+.date-range-panel-bottom {
+  height: 44px;
+  line-height: 44px;
+  border-top: 1px solid rgba(0, 0, 0, 0.09);
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: $--color-text-regular;
+  .utc-str {
+    line-height: 44px;
+    text-align: right;
+    span{
+      font-size: 12px;
+      background: $--background-color-2;
+      padding: 6px 8px;
+    }
+  }
+}
+.date-range-refresh {
+  margin-left: 10px;
+}
+
+.date-time-range {
+  margin-right: 10px;
+}
+
+.date-range-item {
+  list-style-type: none;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.panel-time-picker-hidden {
+  visibility: hidden !important;
+  position: absolute;
+  top: 0;
+  left: -20px;
+}
+
+.date-range-text {
+  color: $--color-text-regular;
+  font-size: 14px;
+  // min-width: 150px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-around;
+  height: 30px;
+  background: $--background-color-empty;
+   //border: 1px solid $--border-color-light;
+  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+  border-radius: 2px;
+  line-height: 30px;
+  transition: width .3s;
+
+  .cn-icon {
+    font-size: 14px;
+  }
+
+  .cn-icon-arrow-down {
+    transition: all .3s;
+    display: inline-block;
+  }
+
+  .cn-icon-arrow-down-active {
+    transform: rotate(180deg);
+  }
+}
+
+.date-range-title {
+  font-size: 14px;
+  color: $--color-text-regular;
+  font-weight: 600;
+  padding: 14px 0 7px 8px;
+}
+
+.calendar-popover-text {
+  white-space: nowrap;
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.calendar-popover-text:first-of-type {
+  margin-left: 0;
+}
+
+.calendar-popover-text:last-of-type {
+  margin-right: 0;
+}
+
+.date-range-panel {
+  // height: 460px;
+  width: 500px;
+  background: $--background-color-empty;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  position: absolute;
+  right: 4%;
+  top: 50px;
+  z-index: 1;
+
+  .date-range-panel-content-left {
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+    .content-title {
+      font-size: 14px;
+      color: $--color-text-regular;
+      font-weight: 400;
+    }
+
+    .content-input {
+      width: 230px;
+      display: flex;
+      position: relative;
+      align-items: center;
+      margin-bottom: 12px;
+      .el-input{
+        width: auto;
+        flex: 1;
+        .el-input__inner{
+          border: 1px solid $--border-color-light;
+          border-radius: 2px;
+          width: 230px;
+          padding: 0 8px;
+          //height: 30px;
+          //line-height: 30px;
+          //outline: #169AFF;
+        }
+
+      }
+      .input-hint{
+        display: none;
+      }
+      .nz-icon-box{
+        height: 28px;
+        box-sizing: border-box;
+        background: $--background-color-2;
+        padding: 0 8px;
+        line-height: 25px;
+        border-radius: 2px;
+        color: $--color-text-regular;
+        border: 1px solid $--border-color-base;
+        margin-left: 4px;
+        .nz-icon{
+          font-size: 14px;
+        }
+        &:hover{
+          border-color: $--color-primary;
+           color: $--color-primary;
+        }
+      }
+      &.input-error{
+        .el-input{
+          .el-input__inner{
+            border: 1px solid $--color-danger;
+            //outline: $--color-danger;
+          }
+        }
+        .input-hint{
+          display: block;
+          color: $--color-danger;
+          position: absolute;
+          left: 0;
+          font-size: 14px;
+          bottom: -25px;
+        }
+      }
+    }
+
+    .date-range-history {
+      flex: 1;
+      overflow-y: auto;
+
+      .date-range-history-item {
+        padding: 5px 0;
+        font-size: 12px;
+        font-weight: 400;
+        cursor: pointer;
+      }
+
+      .date-range-history-item:hover {
+        /*font-weight: 600;*/
+        background: $--background-color-2;
+      }
+    }
+  }
+
+  .date-range-panel-content-right {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    ul {
+      flex: 1;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+
+      li {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: $--color-text-primary;
+        font-weight: 400;
+        padding: 0 10px;
+        cursor: pointer;
+      }
+
+      li:hover {
+        background: $--alert-rule-background-color;
+        color: $--color-text-primary;
+      }
+      li.activeLi :hover {
+        background: $--alert-rule-background-color;
+        color: $--color-primary !important;
+      }
+      li.activeLi {
+        background: $--alert-rule-background-color;
+        color: $--color-primary !important;
+        font-weight: 400;
+
+        .cn-icon-check {
+          color: #0091FF;
+          position: absolute;
+          right: 7px;
+        }
+      }
+
+    }
+  }
+}
+.el-date-range-picker.el-picker-panel__body__only {
+  width: 324px;
+}
+.el-date-range-picker__content.el-date-range-picker__content__only{
+  width: 100%;
+}

nezha-fronted/src/assets/css/components/layout/leftMenu.scss

@@ -84,17 +84,13 @@
       .logo {
         display: flex;
         box-sizing: border-box;
-
+        
-        img {
-          box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
-        }
-
         .system-name {
           padding-left: 5px;
           color: white;
           font-size: 12px;
           letter-spacing: 0;
-          line-height: 34px;
+          line-height: 28px;
           font-weight: 400;
         }
       }

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

@@ -18,7 +18,6 @@
 
     .header-logo {
       font-size: 0;
-      background-color: rgba(0, 0, 0, 0.9);
       border-radius: 2px;
     }
 

nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss

@@ -2,6 +2,14 @@
   position: relative;
   width: 100%;
   display: flex;
+  // #editor{
+  //   width: 100%;
+  //   border: 1px solid $--border-color-light;
+  // }
+  .no-close{
+    width: 100%;
+    border: 1px solid $--border-color-light;
+  }
   .no-resize{
     background: rgba(255,255,255,0);
     .el-textarea__inner {
@@ -152,4 +160,11 @@
     text-align: center;
     margin-bottom: 14px;
   }
+  .cm-line{
+    color: $--color-text-regular,
+
+  }
+  .el-col .el-col-24 .metric-selector-input-box{
+
+  }
 }

nezha-fronted/src/assets/css/components/page/tool/ping.scss

@@ -1,4 +1,38 @@
 .ping{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
   .choose{
     width: 50px !important;
     height: 36px !important;
@@ -37,9 +71,14 @@
       background: $--color-primary;
     }
   }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
   .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
     .empty{
       width: 100%;
       height: 100%;
@@ -47,7 +86,7 @@
       justify-content: center;
       align-items: center;
       .el-steps{
-        width: 620px;
+        width: 600px;
       }
       .el-step__icon{
         width: 64px;
@@ -77,6 +116,7 @@
     }
     .data-wrap{
       height: 100%;
+      overflow: hidden;
       .data-top{
         width: 100%;
         padding-left: 15px;
@@ -95,6 +135,7 @@
       }
       .data-bottom{
         height: calc(100% - 50px) !important;
+        overflow: hidden;
         .details{
           padding: 20px;
         }

nezha-fronted/src/assets/css/components/page/tool/trace.scss

@@ -1,4 +1,38 @@
 .trace{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
   .choose{
     width: 50px !important;
     height: 36px !important;
@@ -37,9 +71,14 @@
       background: $--color-primary;
     }
   }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
   .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
     .empty{
       width: 100%;
       height: 100%;
@@ -47,7 +86,7 @@
       justify-content: center;
       align-items: center;
       .el-steps{
-        width: 620px;
+        width: 600px;
       }
       .el-step__icon{
         width: 64px;
@@ -77,6 +116,7 @@
     }
     .data-wrap{
       height: 100%;
+      overflow: hidden;
       .data-top{
         width: 100%;
         padding-left: 15px;
@@ -95,6 +135,7 @@
       }
       .data-bottom{
         height: calc(100% - 50px) !important;
+        overflow: hidden;
         .details{
           padding: 20px;
         }

nezha-fronted/src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1647598587378') format('woff2'),
+  src: url('iconfont.woff2?t=1649732646689') format('woff2'),
-       url('iconfont.woff?t=1647598587378') format('woff'),
+       url('iconfont.woff?t=1649732646689') format('woff'),
-       url('iconfont.ttf?t=1647598587378') format('truetype');
+       url('iconfont.ttf?t=1649732646689') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-tool:before {
+  content: "\e76f";
+}
+
+.nz-icon-export-pdf:before {
+  content: "\e770";
+}
+
+.nz-icon-Router:before {
+  content: "\e766";
+}
+
+.nz-icon-Computer:before {
+  content: "\e767";
+}
+
+.nz-icon-a-Networkdevices:before {
+  content: "\e768";
+}
+
+.nz-icon-Other:before {
+  content: "\e769";
+}
+
+.nz-icon-a-Virtualmachine:before {
+  content: "\e76a";
+}
+
+.nz-icon-Switch:before {
+  content: "\e76b";
+}
+
+.nz-icon-Server:before {
+  content: "\e76c";
+}
+
+.nz-icon-ADC:before {
+  content: "\e76d";
+}
+
+.nz-icon-Firewall:before {
+  content: "\e76e";
+}
+
 .nz-icon-Topology:before {
   content: "\e763";
 }

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1647598587378') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1649732646689') format('woff2'),
-  url('./font/iconfont.woff?t=1647598587378') format('woff'),
+       url('./font/iconfont.woff?t=1649732646689') format('woff'),
-  url('./font/iconfont.ttf?t=1647598587378') format('truetype');
+       url('./font/iconfont.ttf?t=1649732646689') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-tool:before {
+  content: "\e76f";
+}
+
+.nz-icon-export-pdf:before {
+  content: "\e770";
+}
+
+.nz-icon-Router:before {
+  content: "\e766";
+}
+
+.nz-icon-Computer:before {
+  content: "\e767";
+}
+
+.nz-icon-a-Networkdevices:before {
+  content: "\e768";
+}
+
+.nz-icon-Other:before {
+  content: "\e769";
+}
+
+.nz-icon-a-Virtualmachine:before {
+  content: "\e76a";
+}
+
+.nz-icon-Switch:before {
+  content: "\e76b";
+}
+
+.nz-icon-Server:before {
+  content: "\e76c";
+}
+
+.nz-icon-ADC:before {
+  content: "\e76d";
+}
+
+.nz-icon-Firewall:before {
+  content: "\e76e";
+}
+
 .nz-icon-Topology:before {
   content: "\e763";
 }

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -32,9 +32,9 @@ $--left-menu-background-color-hover: $--left-menu-background-color-active;
 
 /* 3.字色 */
 // 标题字色(覆盖element-ui内置变量)
-$--color-text-primary: #333332;
+$--color-text-primary: #333333;
 // 普通字色(覆盖element-ui内置变量)
-$--color-text-regular: #666665;
+$--color-text-regular: #666666;
 // 次要字色(覆盖element-ui内置变量)
 $--color-text-secondary: #999998;
 // 链接字色
@@ -221,7 +221,7 @@ $--switch-background-color: #dcdfe6;
 $--project-input-background-color: $--color-text-disabled;
 
 /* alert rule */
-$--alert-rule-background-color: #f4f4f5;
+$--alert-rule-background-color: #f5f5f5;
 $--alert-rule-color: $--overview-icon-color;
 
 /* webSSH */

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

@@ -45,6 +45,7 @@
           ref="pickTime"
           style="height: 28px;"
           id="line-chart"
+          :sign="chartInfo.id"
           @unitChange="unitChange"
         ></pick-time>
       </span>

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

@@ -1,4 +1,5 @@
-<template>
+
+ <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>

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

@@ -119,8 +119,8 @@
 </template>
 
 <script>
-import bus from '../../libs/bus'
+import bus from '../../../libs/bus'
-import chartDataFormat from './chartDataFormat'
+import chartDataFormat from '../chartDataFormat'
 import chartDataList from '@/components/common/mixin/chartDataList'
 
 export default {

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

@@ -8,6 +8,7 @@
 <!--            <span class="project-name">{{item.name}}</span>-->
             <topology
               :fromOverView="true"
+              :from-chart="true"
               :obj="item"
               :ref="'topology' + index"
               :topologyIndexF="isFullscreen?('screen'+chartInfo.id+'-'+index):(chartInfo.id+'-'+index)"
@@ -46,7 +47,7 @@ export default {
       this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
-        const temp = []
+        let temp = []
         if (res.data.list.length === 0) {
           this.topologyLoading = false
         }
@@ -64,7 +65,8 @@ export default {
           res2.forEach(item => {
             temp.push(item)
           })
-          this.allProject = temp
+          this.allProject = JSON.parse(JSON.stringify(temp))
+          temp = null
           this.topologyLoading = false
         })
       })
@@ -98,7 +100,7 @@ export default {
     }
   },
   mounted () {
-    this.queryAllProjectData()
+
   }
 }
 </script>

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

@@ -25,9 +25,10 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
+import bus from "@/libs/bus";
 
 export default {
   name: 'chart-bar',
@@ -107,6 +108,13 @@ export default {
           }
         }
       }
+      chartOption.yAxis.axisLabel.formatter = function (val, index) {
+        const value = formatScientificNotation(val, 6)
+        let chartUnit = self.chartInfo.unit
+        chartUnit = chartUnit || 2
+        const unit = chartDataFormat.getUnit(chartUnit)
+        return unit.compute(value, index, -1, 2)
+      }
       chartOption.tooltip.formatter = this.formatterFunc
       chartOption.tooltip.position = this.tooltipPosition
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */

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

@@ -23,7 +23,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import * as echarts from 'echarts'
 import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'

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

@@ -22,7 +22,7 @@ import chartFormat from '@/components/chart/chartFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import '@svgdotjs/svg.panzoom.js'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'chartHexagonD3',
   mixins: [chartMixin, chartFormat],

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

@@ -93,7 +93,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { dealLegendAlias, formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 import axios from 'axios'

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

@@ -16,12 +16,7 @@ import axios from 'axios'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
-import * as echarts from 'echarts'
-import chartConfig from '@/components/page/dashboard/overview/chartConfig'
-// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 
-let tooltipEndpointChart
-let tooltipPrometheusChart
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
   name: 'chartMap',
@@ -61,7 +56,6 @@ export default {
       }, 500)
     },
     loadMapConfig () {
-      const vm = this
       return new Promise(resolve => {
         const DefaultIcon = L.icon({
           iconUrl: icon,
@@ -85,13 +79,13 @@ export default {
               maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
             }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
             map.createPane('myPane', document.querySelector('.my-pane-' + this.chartId))
-            map.on('tooltipopen', function (param) {
+            // map.on('tooltipopen', function (param) {
-              // setTimeout(() => {
+            //   // setTimeout(() => {
-              //   vm.initTooltipChart(param)
+            //   //   vm.initTooltipChart(param)
-              // }, 100)
+            //   // }, 100)
-            })
+            // })
-            map.on('tooltipclose', function (param) {
+            // map.on('tooltipclose', function (param) {
-            })
+            // })
             this.map = map
 
             L.tileLayer(

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

@@ -24,7 +24,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 

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

@@ -11,7 +11,7 @@
         background:item.mapping ? item.mapping.color.bac : (statData.length===1 ? '' : colorList[index]),
         height:item.height+'px',
         width:item.width + 'px',
-        fontSize: item.height > item.width ? (14 * (item.width/60)+ 'px') : (14 * (item.height/60)+ 'px')
+        fontSize: setFontSize(item)
       }"
     >
       <span v-if="chartInfo.param.text==='all'">
@@ -50,7 +50,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { initColor } from '@/components/chart/chart/tools'
 // import fontWidth from '@/components/chart/chart/options/fontWidth'
@@ -63,7 +63,7 @@ export default {
       statData: [],
       boxWidth: 0,
       boxHeight: 0,
-      boxPadding: 5,
+      boxPadding: 2,
       statTimer: null,
       tooltip: {
         x: 0,
@@ -73,6 +73,7 @@ export default {
         show: false
       },
       fontSize: 12,
+      minFontSzie: 12,
       defaultUnit: 60 // 根据stat的长宽取 需要的字体 = (取最短的边 / defaultUnit) * fontSize 因为 需要的字体/fontSize = 实际宽 / defaultUnit
     }
   },
@@ -212,6 +213,11 @@ export default {
           this.renderStat(layout)
         })
       }, 50)
+    },
+    setFontSize (item) {
+      let fontSize = item.height > item.width ? (14 * (item.width / 60)) : (14 * (item.height / 60))
+      fontSize = fontSize > 12 ? fontSize : this.minFontSzie
+      return fontSize + 'px'
     }
   },
   mounted () {

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

@@ -45,7 +45,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import { getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import lodash from 'lodash'
 export default {
   name: 'chart-table',

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

@@ -23,7 +23,7 @@ import * as echarts from 'echarts'
 import moment from 'moment-timezone'
 import bus from '@/libs/bus'
 import { formatScientificNotation } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
 import { chartLegendPlacement } from '@/components/common/js/constants'
 import { getChart, setChart } from '@/components/common/js/common'
@@ -86,6 +86,7 @@ export default {
       }
       this.legends = []
       this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
+      chartOption.color = this.colorList
       if (!this.series.length) {
         this.isNoData = true
         this.$emit('chartIsNoData', this.isNoData)

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

@@ -25,7 +25,7 @@ import { chartLegendPlacement } from '@/components/common/js/constants'
 import * as echarts from 'echarts'
 import { getChart, setChart } from '@/components/common/js/common'
 import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
 

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

@@ -42,7 +42,7 @@
 <script>
 import lodash from 'lodash'
 import { getChart } from '@/components/common/js/common'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import { statisticsList } from '@/components/common/js/constants'
 export default {
   name: 'chartLegend',

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

@@ -200,13 +200,13 @@
 <script>
 import axios from 'axios'
 import * as echarts from 'echarts'
-import bus from '../../libs/bus'
+import bus from '../../../libs/bus'
-import loading from '../common/loading'
+import loading from '../../common/loading'
-import chartDataFormat from './chartDataFormat'
+import chartDataFormat from '../chartDataFormat'
-import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
+import { randomcolor } from '../../common/js/radomcolor/randomcolor.js'
-import chartConfig from '../page/dashboard/overview/chartConfig'
+import chartConfig from '../../page/dashboard/overview/chartConfig'
-import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common'
+import { getChart, setChart, lineChartMove, getMousePoint } from '../../common/js/common'
-import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../common/js/tools'
+import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias } from '../../common/js/tools'
 import moment from 'moment-timezone'
 import chartDataList from '@/components/common/mixin/chartDataList'
 

nezha-fronted/src/components/chart/chart/options/chartBar.js

@@ -43,7 +43,12 @@ const chartBarOption = {
     }
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      show: true,
+      fontSize: 10
+      // formatter: 动态生成
+    }
   },
   series: [
     {

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

@@ -73,7 +73,7 @@
               <i class="el-icon-copy-document" style="font-size: 16px;"></i>
               <span>{{$t('dashboard.duplicate')}}</span>
             </li>
-            <li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'main_edit'" class="el-dropdown-menu__item" @click="$emit('sync')">
+            <li v-if="from !== this.$CONSTANTS.fromRoute.chartTemp && chartInfo.pid" v-has="'main_edit'" class="el-dropdown-menu__item" @click="sync">
               <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>
               <span>{{$t('overall.syncChart')}}</span>
             </li>

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

@@ -43,18 +43,25 @@ export default {
         chart: this.chartInfo,
         type: 'edit'
       })
+      this.dropdownMenuShow = false
     },
     removeChart () {
       this.$store.dispatch('dispatchDelChart', {
         chart: this.chartInfo,
         type: 'delete'
       })
+      this.dropdownMenuShow = false
     },
     duplicate () {
       this.$store.dispatch('dispatchEditChart', {
         chart: this.chartInfo,
         type: 'duplicate'
       })
+      this.dropdownMenuShow = false
+    },
+    sync () {
+      this.$emit('sync')
+      this.dropdownMenuShow = false
     },
     clickos () {
       this.dropdownMenuShow = false

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

@@ -222,7 +222,7 @@ export default {
       // this.$refs['chart' + i][0].resize()
     },
     showFullscreen (show, chartInfo) {
-      this.fullscreen.chartInfo = chartInfo
+      this.fullscreen.chartInfo = JSON.parse(JSON.stringify(chartInfo))
       this.fullscreen.visible = show
     },
     changeGroupHeight (copyList, group, flag) {
@@ -430,7 +430,7 @@ export default {
   watch: {
     dataList: {
       deep: true,
-      handler (n, o) {
+      handler (n) {
         this.gridLayoutShow = false
         this.firstInit = true
         this.gridLayoutLoading = true
@@ -439,11 +439,11 @@ export default {
           const position = getLayoutPosition(n)
           this.$store.commit('setChartLastPosition', position)
         }
-        const tempList = n.map(item => {
+        let tempList = n.map(item => {
           let param = ''
           let height = ''
           if (item.param) {
-            param = item.param
+            param = JSON.parse(JSON.stringify(item.param))
             // try {
             //   param = JSON.parse(item.param)
             // } catch (e) {
@@ -488,6 +488,7 @@ export default {
         }
         this.$nextTick(() => {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
+          tempList = null
           setTimeout(() => {
             this.gridLayoutShow = true
             if (!this.isGroup) {

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

@@ -110,20 +110,21 @@ export default {
       if (data.metric.__name__) {
         legend += '}'
       }
-      // if (!legend && chartInfo.elements) {
+      if (!legend && chartInfo.elements) {
-      //   // legend = chartInfo.elements[expressionIndex].expression
+        legend = chartInfo.elements[expressionIndex].expression
-      //   legend = ''
+        //  legend = ''
-      // }
+      }
       // 处理legend别名
       alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
       if (!alias) {
-        alias = chartInfo.elements[expressionIndex].expression
+        alias = chartInfo.elements[expressionIndex].expression || ''
       }
       if (alias == 'Previous ') {
         alias += chartInfo.elements[expressionIndex].expression
       }
       // proj_status_
-      const name = alias + '-' + dataIndex
+      const legendIndex = expressionIndex + 'and' + dataIndex
+      const name = alias + '-' + legendIndex
 
       // 若需要统计，处理统计数据
       const statisticsTypes = chartInfo.param.legend ? chartInfo.param.legend.values : ''
@@ -161,7 +162,9 @@ export default {
         return labelValue
       } else {
         if (!aliasExpression) {
-          return ''
+          return legend
+          // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+          // return result
         }
         return aliasExpression
       }
@@ -293,8 +296,8 @@ export default {
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {
-    getChart(this.chartId) && getChart(this.chartId).dispose()
+    // getChart(this.chartId) && getChart(this.chartId).dispose()
-    setChart(this.chartId, null)
+    // setChart(this.chartId, null)
+    getChart(this.chartId) && setChart(this.chartId, null)
   }
 }
- 

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

@@ -65,7 +65,7 @@ import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools
 import { chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
-import chartTempData from '@/components/charts/chartTempData'
+import chartTempData from '@/components/chart/chartTempData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 
@@ -99,7 +99,8 @@ export default {
       showAllData: false,
       allDataLength: 0,
       severityData: this.$store.getters.severityData,
-      severityDataWeight: this.$store.getters.severityDataWeight
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      isExportData: false
     }
   },
   computed: {
@@ -161,6 +162,9 @@ export default {
     query (elements, startTime, endTime, step, params) {
       this.isError = false
       this.allDataLength = 0
+      if (this.isExportData) {
+        this.chartData = this.chartInfo.chartData
+      }
       try {
         switch (this.chartInfo.datasource) {
           case 'metrics':
@@ -262,7 +266,7 @@ export default {
                   }
                 }
               })
-              this.chartData = chartData
+              this.chartData = JSON.parse(JSON.stringify(chartData))
               if (this.chartInfo.type === 'log') {
                 this.logChartDataFormat()
               }
@@ -306,6 +310,7 @@ export default {
             }
             const chartData = []
             const params = {
+              t: this.chartInfo.id,
               q: encodeURIComponent(JSON.stringify(q)),
               stat: startTime,
               end: endTime,
@@ -318,9 +323,19 @@ export default {
                 chartData.push({ error: res.msg || res.error || res })
                 this.isError = true
               }
-              this.chartData = chartData
+              this.chartData = JSON.parse(JSON.stringify(chartData))
               this.loading = false
             })
+            // this.sendAjax('/stat', params).then(res => {
+            //   if (res.code === 200) {
+            //     chartData.push(res.data.result)
+            //   } else {
+            //     chartData.push({ error: res.msg || res.error || res })
+            //     this.isError = true
+            //   }
+            //   this.chartData = chartData
+            //   this.loading = false
+            // })
             break
           }
           case 'misc': {
@@ -330,7 +345,7 @@ export default {
             })
             if (this.chartInfo.type === 'hexagon') {
               this.getHexagonFigureData().then(res => {
-                this.chartData = res
+                this.chartData = JSON.parse(JSON.stringify(res))
               }).finally(() => {
                 this.loading = false
               })
@@ -384,7 +399,7 @@ export default {
               res.data.links.forEach(item => {
                 item.id = item.source + '-' + item.target
               })
-              this.chartData = [res.data]
+              this.chartData = JSON.parse(JSON.stringify([res.data]))
             })
             break
           }
@@ -526,6 +541,41 @@ export default {
         color = '#23bf9a'
       }
       return color
+    },
+    sendAjax (url, params) {
+      // 构造表单数据
+      return new Promise(resolve => {
+        let nowUrl = url
+        Object.keys(params).forEach((key, index) => {
+          if (index == 0) {
+            nowUrl += '?' + key + '=' + params[key]
+          } else {
+            nowUrl += '&' + key + '=' + params[key]
+          }
+        })
+        const formData = new FormData()
+        formData.append('username', 'johndoe')
+        formData.append('id', 123456)
+        // 创建xhr对象
+        const xhr = new XMLHttpRequest()
+        // 设置xhr请求的超时时间
+        xhr.timeout = 3000
+        // 设置响应返回的数据格式
+        xhr.responseType = ''
+        // 创建一个 post 请求，采用异步
+        xhr.open('get', 'http://192.168.44.100/' + nowUrl, true)
+        xhr.setRequestHeader('Authorization', localStorage.getItem('nz-token'))
+        // 注册相关事件回调处理函数
+        xhr.onload = function (e) {
+          if (this.status == 200 || this.status == 304) {
+            // alert(this.responseText)
+            resolve(JSON.parse(this.responseText))
+          }
+        }
+        xhr.onerror = function (e) { console.log(e) }
+        // 发送数据
+        xhr.send()
+      })
     }
   },
   watch: {

nezha-fronted/src/components/charts/charLlist和chart-list-group的区别.md

@@ -1,10 +0,0 @@
-
-``` bash
-# list
-向下传递 index
-
-# groupList
-是 chart type=’group‘ 的子组件
-向下传递的是处理过后的 chartIndex
-```
-

nezha-fronted/src/components/charts/chart-bar-statistics.vue

@@ -1,807 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' ref="legendArea" v-show="firstShow">
-          <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
-            <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
-              <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                <br/><!--bgColorList[index]-->
-              </div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import loading from '../common/loading'
-import * as echarts from 'echarts'
-import { getChart, setChart, getMousePoint } from '../common/js/common'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import { randomcolor } from '../common/js/radomcolor/randomcolor'
-import { chartResizeTool, formatScientificNotation } from '@/components/common/js/tools'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'pieChart', // 饼图 或者 柱状图的统计
-  components: {
-    loading: loading
-  },
-  props: {
-    tempDom: Object,
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      pieData: [],
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-      legend: [],
-      legendScreen: [],
-      isGrey: [],
-      isGreyScreen: [],
-      echart: null,
-      echartScreen: null,
-      bgColorList: [],
-      stableFilter: {},
-      option: {
-        title: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          top: 30,
-          left: 10,
-          right: 30,
-          containLabel: true,
-          bottom: 20// 156
-        },
-        tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(221,228,237,1)',
-          borderColor: 'rgba(255,255,255,0)',
-          textStyle: {
-            color: '#000'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          extraCssText: 'z-index:1000;'
-        },
-        series: null,
-        stepWidth: null,
-        chartDot: 2
-      }
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
-        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
-        if (height < this.$chartResizeTool.minHeight) {
-          height = this.$chartResizeTool.minHeight
-        }
-        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
-      })
-      this.clearData()
-      this.firstShow = false
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.divFirstShow = true
-    },
-    clearData () {
-      if (getChart(this.chartIndex)) {
-        getChart(this.chartIndex).clear()
-        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-      }
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      const id = this.data.id
-      this.clearChart()
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.seriePieChart = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      if (getChart(this.chartIndex)) {
-        const divHeight = this.$refs.legendArea.offsetHeight
-        getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-      }
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
-      this.data = chartItem
-      if (chartItem.type === 'bar') {
-        this.option.xAxis = {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          showAllSymbol: false,
-          axisPointer: { // y轴上显示指针对应的值
-            show: false
-          },
-          axisLabel: {
-            margin: 8,
-            formatter (params) {
-              const dataLength = seriesItem.length || 1
-              const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
-              const length = Math.ceil((chartWidth) / 16)
-              let val = ''
-              if (params.length > length) {
-                val = params.substr(0, length) + '...'
-                return val
-              } else {
-                return params
-              }
-            }
-          }
-        }
-        const maxValueCopies = this.getMaxValue(seriesItem, chartItem)
-        let dot = this.chartDot = maxValueCopies.dot || 2
-        const maxValue = maxValueCopies.maxValue
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        this.option.yAxis = {
-          type: 'value',
-          // maxInterval:{},
-          // 去掉y轴--start
-          minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-          maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(seriesItem.length / 5),
-          // 去掉y轴--end
-          axisLabel: {
-            show: true,
-            fontSize: 10,
-            formatter (val, index) {
-              const value = formatScientificNotation(val, 2)
-              // const flag = JSON.stringify(value).length > JSON.stringify(chartDataFormat.Interval(maxValue, copies, unit.type)).length
-              if (chartDataFormat.Interval(maxValue, copies, unit.type, 'min') < 1 && dot < 2) {
-                dot = 2
-              }
-              if (dot == 0) {
-                dot = 1
-              }
-              return unit.compute(value, index, -1, dot)
-            }
-          }
-          // boundaryGap:[0,0.2]
-        }
-        const nweSeriesItem = []
-        seriesItem[0].data.forEach((item, index) => {
-          const obj = { ...seriesItem[0] }
-          const legendShow = legend[index].alias ? legend[index].alias : legend[index].name
-          obj.name = legend[index].name
-          obj.data = [[legendShow, item.value]]
-          obj.stack = true
-          if (chartItem.param.threshold) {
-            obj.markLine = {
-              silent: true,
-              symbol: ['circle', 'circle'],
-              label: {
-                distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
-                formatter (params) {
-                  return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
-                }
-              },
-              lineStyle: {
-                color: '#d64f40',
-                width: 2,
-                type: 'dotted'
-              },
-              data: [{
-                yAxis: Number(chartItem.param.threshold)
-              }]
-            }
-          }
-          nweSeriesItem.push(obj)
-        })
-        seriesItem = nweSeriesItem
-      }
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || seriesItem.data.length < 1) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-      this.legend = legend
-      this.legendScreen = legend
-      legend && this.setColor(legend.length)
-      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-
-      this.$set(this.option, 'color', this.bgColorList)
-      this.pieData = seriesItem
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('screen')
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('local')
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    },
-    computeDistance (str) {
-      const span = document.querySelector('.temp-dom')
-      span.textContent = str
-      const txtWidth = parseFloat(window.getComputedStyle(span).width)
-      return Number('-' + (txtWidth + 5))
-    },
-    formatLegend (chartWidth, name) {
-      if (!name) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    initChart (type) {
-      this.option.series = this.pieData
-      this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
-      if (type == 'local') {
-        this.initLocal()
-      } else {
-        this.initScreen()
-      }
-    },
-    initLocal () {
-      const self = this
-      const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
-      if (!this.echart) {
-        this.echart = echarts.init(dom)
-        setChart(this.chartIndex, this.echart)
-      }
-      if (this.legend) {
-        this.isGrey = []
-        this.legend.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGrey.push(false)
-          return legend
-        })
-      }
-
-      this.$nextTick(() => {
-        const vm = this
-        setTimeout(function () {
-          const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
-          if (!self.chartData.height) {
-            getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          } else {
-            getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          }
-          self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            const windowWidth = window.innerWidth// 窗口宽度
-            const windowHeight = window.innerHeight// 窗口高度
-            const windowMouse = getMousePoint()
-            // 提示框位置
-            let x = 0
-            let y = 0
-            // 当前鼠标位置
-            const pointX = point[0]
-            const pointY = point[1]
-            // 外层div大小
-            const viewWidth = size.viewSize[0]
-            // const viewHeight = size.viewSize[1]
-            // 提示框大小
-            const boxWidth = size.contentSize[0]
-            const boxHeight = size.contentSize[1]
-            if (!self.screenModal) { // 本地显示
-              const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
-              if (chartDom) {
-                // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
-                const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
-
-                const parent = document.getElementById('tableList')
-                // const parClientHeight = parent.clientHeight// 可视高度
-                const parClientWidth = parent.clientWidth// 可视宽度
-                // const parScrollTop = parent.scrollTop
-                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 10
-                } else {
-                  x = pointX - boxWidth
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              } else { // preview page
-                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 15
-                } else {
-                  x = pointX - boxWidth - 15
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              }
-            } else {
-              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-                x = pointX + 10
-              } else {
-                x = pointX - boxWidth
-              }
-              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                y = pointY + 15
-              } else {
-                y = pointY - boxHeight - 10
-              }
-              return [x, y]
-            }
-          })
-          if (self.pieData[0]) {
-            if (self.pieData[0].data.length > 0) {
-              getChart(self.chartIndex).clear()
-              getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-              self.noData = false
-            } else {
-              self.noData = true
-              self.option = chartConfig.getOption('noData')
-              getChart(self.chartIndex).clear()
-              getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-            }
-          }
-          self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
-          self.firstShow = true // 展示操作按键
-        }, 100)
-      })
-    },
-    initScreen () {
-      const self = this
-      const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
-      if (!this.echartScreen) {
-        this.echartScreen = echarts.init(dom)
-      }
-      if (this.legendScreen) {
-        this.isGreyScreen = []
-        this.legendScreen = this.legendScreen.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGreyScreen.push(false)
-          return legend
-        })
-      }
-      if (self.echartScreen) {
-        self.echartScreen.clear()
-        self.showLegend = true
-        self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-      }
-      this.$nextTick(() => {
-        const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-        const divHeight = legendDiv.offsetHeight
-        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-        self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-        self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-        setTimeout(function () {
-          self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          if (self.pieData[0].data.length > 0) {
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-          }
-          self.echartScreen.on('finished', function () {
-            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-            const divHeight = legendDiv.offsetHeight
-            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-            self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-            self.echartScreen.off('finished')
-          })
-        }, 100)
-      })
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGrey.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-      const curIsGrey = this.isGrey[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = getChart(this.chartIndex)
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGrey = this.isGrey.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGrey = this.isGrey.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGrey, index, !this.isGrey[index])
-        }
-      }
-    },
-    clickScreenLegend (legendName, index) {
-      /* 点击legend
-          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-          * 3.否则只改变被点击的legend状态
-          * */
-      let highlightNum = 0 // 高亮数量
-      this.isGreyScreen.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = this.echartScreen
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGreyScreen = this.isGreyScreen.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-        }
-      }
-    },
-    setColor (colorNum) {
-      this.bgColorList = [
-        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
-        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
-        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
-        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
-        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
-      ]
-      for (let i = 0; i < colorNum - 19; i++) {
-        this.bgColorList.push(randomcolor())
-      }
-    },
-    formatterFunc (params, ticket, callback) {
-      const chartInfo = this.chartData
-      return `
-                <div>
-                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
-                        <div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.seriesIndex].alias}</div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value[1], null, -1, this.chartDot ? this.chartDot : 2)}</div>
-                        </div>
-                    </div>
-                </div>
-               `
-    },
-    getMaxValue (dataArg, chartInfo) {
-      let maxValue = 0
-      let minValue = 0
-      if (chartInfo.unit && dataArg.length > 0) {
-        maxValue = 0
-        minValue = 0
-        for (let j = 0; j < dataArg.length; j++) {
-          for (let i = 0; i < dataArg[j].data.length; i++) {
-            if (!isNaN(dataArg[j].data[i].value)) {
-              maxValue = (maxValue < Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : maxValue)
-              minValue = (minValue > Number(dataArg[j].data[i].value) ? Number(dataArg[j].data[i].value) : minValue)
-            }
-          }
-        }
-      }
-      const chartUnit = chartInfo.unit ? chartInfo.unit : 2
-      const unit = chartDataFormat.getUnit(chartUnit)
-      minValue = minValue > 0 ? 0 : minValue
-      maxValue = maxValue - minValue
-      maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)
-      let oldValue = maxValue
-      let dot = 0
-      if (maxValue == 1) {
-        dot++
-      }
-      if (oldValue > 10) {
-        while (oldValue > 10) {
-          oldValue = oldValue / 10
-        }
-      } else if (oldValue < 1 && maxValue !== 0) {
-        while (oldValue < 1 && oldValue > 0) {
-          oldValue = oldValue * 10
-          dot++
-        }
-        maxValue = Math.floor(oldValue) / Math.pow(10, dot)
-        dot++
-      }
-      const copies = chartDataFormat.copies(oldValue, unit.type)
-      let oldDot = 2
-      if (maxValue <= 1) {
-        oldDot = dot > 6 ? 6 : dot
-      }
-      return {
-        maxValue,
-        dot,
-        copies,
-        minValue,
-        unit,
-        oldDot
-      }
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

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

@@ -1,562 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box" ref="resizeBox">
-      <div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
-        <loading :ref="'localLoading' + chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :id="'chartTitle' + chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay="10"
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div>{{errorContent}}</div>
-            <span slot="reference" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.name}}</span></span>
-
-        </div>
-        <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
-          <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
-            <div v-for="(item, index) in detail" :key="index" class="chart-sub">
-              <template v-if="isNotEmptyTab(item)">
-                <div class="chart-sub-title" @click="hideElement(index)">
-                  <span v-if="data.from !== fromRoute.endpoint"><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) === -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
-                  <span>{{item.title}}</span>
-                </div>
-                <el-collapse-transition>
-                  <div v-show="show.indexOf(index) > -1" class="chart-sub-content">
-                    <template v-for="(value, key, i) in item.data">
-                      <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
-                      <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{assetKey[key]}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{assetKey[key]}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span v-if="key === 'name'">{{value}}</span>
-                          <span v-else-if="key === 'type'">{{value}}</span>
-                          <span v-else-if="key === 'state'">{{value}}</span>
-                          <span v-else-if="key === 'brand'">{{value}}</span>
-                          <span v-else-if="key === 'alert'" class="as-button"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'endpoint'" class="as-button"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;{{value}}</span>
-                          <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
-                            <template v-if="value && value.length > 0">
-                              <nz-alert-tag v-for="(tagItem, tagIndex) in value" :key="tagItem.id" :cursor-point="false"
-                                            :label="tagItem.name"
-                                            style="margin: 5px 5px 0 0; vertical-align: middle;"
-                                            type="normal">
-                                <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
-                                  <span class="content-text">{{tagItem.value.join(',')}}</span>
-                                </div>
-                              </nz-alert-tag>
-                            </template>
-                            <template v-else>-</template>
-                          </div>
-                          <template v-else-if="key === 'cabinet'">
-                            <span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
-                            <span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span>
-                            <span v-else></span>
-                          </template>
-                          <template v-else-if="key === 'pingRtt'">
-                            <div :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}" class="active-icon"></div>
-                            <span>{{value ? value + 'ms' : ''}}</span>
-                          </template>
-                          <template v-else-if="assetKey[key]">
-                            <span v-if="key!=='pingLastReply'" class="content-text">{{value ? value : "&nbsp;"}}</span>
-                            <span v-else class="content-text">{{value ? timeFormat(value): "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-                      <!-- endpoint-detail、asset、model的assetInfo的feature-->
-                      <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'attribute'" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{key}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
-                        </div>
-
-                        <div :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}" class="content-item-value item-tip">
-                          <template v-if="Array.isArray(value) && value.length>0">
-                            <template v-if="typeof value[0] == 'string'">
-                              <div v-for="(_item, _index) in value" :key="_index" class="item-value-sub">{{_item}}</div>
-                            </template>
-                            <template v-else>
-                              <el-table
-                                ref="dataTable"
-                                :data="value"
-                                class="nz-table asset-info-table"
-                                height="100%"
-                                tooltip-effect="light"
-                              >
-                                <el-table-column
-                                  v-for="(_item, _index) in setLabels(value)"
-                                  v-if="_item.show"
-                                  :key="`col-${_index}`"
-                                  :label="_item.label"
-                                  :resizable="true"
-                                >
-                                  <template slot-scope="scope" :column="_item">
-                                    <template >
-                                      <span v-html="scope.row[_item.prop]"></span>
-                                    </template>
-                                  </template>
-                                </el-table-column>
-                              </el-table>
-                            </template>
-
-                          </template>
-                          <template v-else-if="key">
-                            <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-
-                      <!-- endpoint-detail的endpointInfo的endpoint详情-->
-                      <div v-else-if="data.from === fromRoute.endpoint && data.type === 'endpointInfo'" :key="i" class="content-item">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                          <span class="content-text">{{endpointKey[key]}}</span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointKey[key]}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span v-if="key === 'alert'"><i :class=" value > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'asset'"><i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'module'"><i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>&nbsp;&nbsp;{{value}}</span>
-                          <span v-else-if="key === 'state'">
-                            <span style="width: auto">
-                              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
-                              <span v-if="value[0].state === 0">
-                                <span class="active-icon red-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[0].state === 1">
-                                <span class="active-icon green-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[0].state">
-                                <span class="active-icon gray-bg inline-block"></span>
-                              </span>
-                            </span>
-                            <span style="width: auto">
-                              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-                              <span v-if="value[1].state === 0">
-                                <span class="active-icon red-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[1].state === 1">
-                                <span class="active-icon green-bg inline-block"></span>
-                              </span>
-                              <span v-else-if="value[1].state">
-                                <span class="active-icon gray-bg inline-block"></span>
-                              </span>
-                            </span>
-                          </span>
-                          <template v-else-if="endpointKey[key]">
-                            <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
-                            <div :class="itemTip(`value-${index}`, key, i, ready)" class="item-tip-hide item-tip-value el-popover">{{value}}</div>
-                          </template>
-                        </div>
-                      </div>
-
-                      <!-- alertRule-detail的详情-->
-                      <div v-else-if="data.from == fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
-                        <div :id="`key-${index}-${i}`" class="content-item-key item-tip">
-                        <span class="content-text">
-                          <span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
-                          <span>{{key}}</span>
-                          <!--<span v-if="item.data._module_[key]">{{Object.keys(item.data._module_[key]).length-1}}个module</span>-->
-                        </span>
-                          <div :class="itemTip(`key-${index}`, key, i, ready)" class="item-tip-hide item-tip-key el-popover">{{key}}</div>
-                        </div>
-                        <div :id="`value-${index}-${i}`" class="content-item-value item-tip">
-                          <span class="content-text">{{value ? value : "&nbsp;"}}</span>
-                        </div>
-                        <!-- module -->
-                        <el-collapse-transition>
-                          <div v-show="deepShow.indexOf(`deep-${index}-${i}`) > -1" class="chart-third-content">
-                            <template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
-                              <div v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'" :key="fi" class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)">
-                                <div :id="`key-${index}-${i}-${ti}-${fi}`" class="content-item-key item-tip deep">
-                                <span class="content-text">
-                                  <span><i v-if="module._endpoint_[moduleName]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
-                                  <span>{{moduleName}}</span>
-                                  <!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
-                                </span>
-                                  <div :class="itemTip(`key-${index}-${i}-${ti}`, moduleName, fi, ready)" class="item-tip-hide item-tip-key el-popover">{{moduleName}}</div>
-                                </div>
-                                <div :id="`value-${index}-${i}-${ti}-${fi}`" class="content-item-value item-tip deep">
-                                  <span class="content-text">{{moduleNum ? moduleNum : "&nbsp;"}}</span>
-                                </div>
-                                <!-- endpoint -->
-                                <el-collapse-transition>
-                                  <div v-show="deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1" class="chart-forth-content">
-                                    <template v-for="(endpoint, eModuleName, si) in module._endpoint_" v-if="eModuleName == moduleName">
-                                      <div v-for="(endpointNum, endpointName, ei) in endpoint" :key="ei" class="content-item" @click.stop>
-                                        <div :id="`key-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-key item-tip deepp">
-                                        <span class="content-text">
-                                          <span>{{endpointName}}</span>
-                                        </span>
-                                          <div :class="itemTip(`key-${index}-${i}-${ti}-${fi}-${si}`, endpointName, ei, ready)" class="item-tip-hide item-tip-key el-popover">{{endpointName}}</div>
-                                        </div>
-                                        <div :id="`value-${index}-${i}-${ti}-${fi}-${si}-${ei}`" class="content-item-value item-tip deepp">
-                                          <span class="content-text">{{endpointNum ? endpointNum : "&nbsp;"}}</span>
-                                        </div>
-                                      </div>
-                                    </template>
-                                  </div>
-                                </el-collapse-transition>
-                              </div>
-                            </template>
-                          </div>
-                        </el-collapse-transition>
-                      </div>
-                    </template>
-                  </div>
-                </el-collapse-transition>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-      <span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
-    </div>
-    <!--preview -->
-    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartPreview from './chartPreview'
-import * as echarts from 'echarts'
-import nzAlertTag from '../page/alert/nzAlertTag'
-import bus from '../../libs/bus'
-import { fromRoute } from '@/components/common/js/constants'
-export default {
-  name: 'chartDetail',
-  components: {
-    loading: loading,
-    'chart-preview': chartPreview,
-    'nz-alert-tag': nzAlertTag
-  },
-  props: {
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      fromRoute,
-      ready: false,
-      data: {}, // 该图表信息,chartItem
-      detail: [], // 展示的详情
-      unit: {},
-      show: [0], // 控制展开/隐藏
-      deepShow: [], // 控制二级/三级的展开/隐藏
-      isError: false,
-      errorContent: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-
-      assetKey: {
-        // host: this.$t('asset.host'),
-        id: 'Id',
-        name: this.$t('overall.name'),
-        manageIp: this.$t('overall.manageIp'),
-        type: this.$t('overall.type'),
-        // assetType: this.$t('asset.assetType'),
-        // sn: this.$t('asset.device'),
-        state: this.$t('asset.assetState'),
-        pingRtt: this.$t('asset.assetPing'),
-        dataCenter: this.$t('asset.dataCenter'),
-        cabinet: this.$t('asset.cabinet'),
-        brand: this.$t('asset.brand'),
-        model: this.$t('asset.model'),
-        tags: this.$t('overall.labels'),
-        alert: this.$t('asset.alerts'),
-        endpoint: this.$t('asset.modules')
-        // vendor: this.$t('asset.vendor'),
-        // purchaseDate: this.$t('asset.procurementDate'),
-        // principal: this.$t('asset.principal'),
-        // tel: this.$t('asset.principalTel'),
-        // pingStatus: this.$t('asset.assetPing'),
-        // pingLastReply: this.$t('asset.lastReply'),
-
-      },
-      projectKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        remark: this.$t('overall.remark'),
-        alertStat: this.$t('project.chart.alertStat')
-      },
-      moduleKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        type: this.$t('overall.type'),
-        remark: this.$t('overall.remark'),
-        endpointStat: this.$t('project.chart.endpointStat'),
-        alertStat: this.$t('project.chart.alertStat')
-      },
-      endpointKey: {
-        id: 'ID',
-        name: this.$t('overall.name'),
-        // type: this.$t('overall.type'),
-        project: this.$t('overall.project'),
-        module: this.$t('project.module.module'),
-        asset: this.$t('overall.asset'),
-        alert: this.$t('project.endpoint.alerts'),
-        state: this.$t('project.endpoint.state')
-      }
-    }
-  },
-  computed: {
-    itemTip () {
-      return function (type, content, index, ready) {
-        const className = 'item-tip-show'
-        this.$nextTick(() => {
-          if (ready) {
-            const cellDom = document.querySelector(`#${type}-${index}`)
-            const spanDom = document.querySelector(`#${type}-${index} .content-text`)
-            if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
-              document.querySelector(`#${type}-${index}>.el-popover`).classList.add(className)
-            } else {
-              document.querySelector(`#${type}-${index}>.el-popover`).classList.remove(className)
-            }
-          }
-        })
-        return ''
-      }
-    },
-    isNotEmptyTab () {
-      return function (item) {
-        return item.data && Object.keys(item.data).length > 0
-      }
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    setLabels: function (source) {
-      let labels = Object.keys(source[0])
-      labels = labels.map(item => {
-        return {
-          label: this.replaceSplit(item),
-          prop: item,
-          show: true
-        }
-      })
-      return labels
-    },
-    replaceSplit (key) {
-      if (key) {
-        return key.replace(/\$_\$/g, ' ')
-      }
-    },
-    hideElement (index) {
-      if (this.data.from === fromRoute.endpoint) {
-        return
-      }
-      if (this.show.indexOf(index) > -1) {
-        this.show.splice(this.show.indexOf(index), 1)
-      } else {
-        this.show.push(index)
-      }
-    },
-    showDeep (index) {
-      if (this.deepShow.indexOf(index) > -1) {
-        this.deepShow.splice(this.deepShow.indexOf(index), 1)
-      } else {
-        this.deepShow.push(index)
-      }
-    },
-    startLoading (area) {
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-    },
-    endLoading (area) {
-      this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-    },
-    preview () {
-      this.$refs.chartsPreview.show(this.data)
-    },
-    resize () {
-      const container = document.querySelector('#chartInfoDiv' + this.chartIndex)
-      container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight}px)`
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        this.resize()
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clearChart () {
-      this.data = {}
-    },
-
-    // 设置数据, filter区分
-    setData (chartItem, detail, panelId, filter, area, errorMsg) {
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.detail = detail
-      // console.info(this.data, this.detail)
-      /* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
-        this.$nextTick(() => {
-          this.initChart(this.detail[0].data.stateSeries)
-        })
-      } */
-      this.endLoading()
-    },
-    initChart (series) {
-      series.forEach((item) => {
-        item.areaStyle = {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [{
-              offset: 0, color: 'rgb(35,191,154)' // 0% 处的颜色
-            }, {
-              offset: 1, color: 'rgb(255, 255, 255)' // 100% 处的颜色
-            }],
-            global: false
-          }
-        }
-      })
-      const option = {
-        title: { show: false },
-        grid: { top: 20, bottom: 20 },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-          extraCssText: 'z-index:3100;',
-          position: [100, 1],
-          textStyle: {
-            fontSize: 12
-          },
-          padding: 3,
-          formatter: function (param) {
-            let time = param[0].data[0]
-            time = bus.computeTimezone(time)
-            const date = new Date(time)
-            let hour = date.getHours()
-            hour = hour > 9 ? hour : '0' + hour // 加0补充为两位数字
-            let minute = date.getMinutes()
-            minute = minute > 9 ? minute : '0' + minute // 如果分钟小于10,则在前面加0补充为两位数字
-
-            let value = param[0].data[1]
-            if (value == '1') {
-              value = 'up'
-            } else {
-              value = 'down'
-            }
-            return [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/') + ' ' + [hour, minute].join(':') + '\n' + value
-          }
-        },
-        legend: { show: false },
-        xAxis: {
-          show: false,
-          type: 'time'
-        },
-        yAxis: {
-          type: 'value',
-          show: false
-        },
-        useUTC: false, // 使用本地时间
-        visualMap: {
-          show: false,
-          pieces: [{
-            gt: -0.5,
-            lt: 0.5,
-            color: '#d64f40'
-          }, {
-            gt: 0.6,
-            lt: 1.5,
-            color: '#50d050'
-          }]
-        },
-        series: series
-      }
-      const chart = echarts.init(document.querySelector('#littleChart'))
-      chart && chart.setOption(option)// 创建图表
-    },
-    timeFormat (val) {
-      return this.utcTimeToTimezoneStr(val)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-    setTimeout(() => {
-      this.ready = true
-    }, 300)
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>
-<style>
-.colorFA901C{
-  color: #fa901c;
-}
-.endpoint-cell-left{
-  margin-right: 5px;
-}
-</style>

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

@@ -1,313 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-group" ref="resizeBox">
-      <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">
-                <span @click="showListChange">
-                  <i class="nz-icon nz-icon-arrow-down" :class="showList?'':'is-active'"/>
-                </span>
-                {{chartData.name}}
-                <span v-show="!showList" class="collapse-content">({{chartData.children.length}} charts)</span>
-              </span>
-              <span class="chart-title-icon"    :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">
-                  <i class="nz-icon nz-icon-plus"></i>
-                </span>
-<!--                 <span  @click="showAllScreen" class="" :title="$t('dashboard.screen')">-->
-<!--                  <i class="nz-icon nz-icon-maxview"></i>-->
-<!--                 </span>-->
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-
-              </span>
-<!--              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">-->
-<!--                <span  v-has="'main_edit'" :title="$t('dashboard.panel.createChartTitle')" class="" @click="addGroupItemChart">-->
-<!--                  <i class="nz-icon nz-icon-plus"></i>-->
-<!--                </span>-->
-<!--              </span>-->
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" v-if="from !== 'chartTemp'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-<!--              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">-->
-<!--                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>-->
-            </ul>
-          </el-dropdown>
-
-        </div>
-        <el-collapse-transition>
-          <div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="showList">
-            <chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter"  :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-duplicate-group-chart="duplicateGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem" @on-remove-group-chart="removeGroupItem" :groupId="chartData.id"></chart-list-group>
-          </div>
-        </el-collapse-transition>
-        <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
-          <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
-        </div>
-      </div>
-<!--      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>-->
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartListGroup from './chart-list-group'
-export default {
-  name: 'chartGroup',
-  components: {
-    loading: loading,
-    chartListGroup
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false },
-    filter: {},
-    panelLock: { type: Boolean, default: false },
-    dataList: {}
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      unit: {},
-
-      images: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      minHeight: 200,
-      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight: 38, // title-height:28,magrin-bottom:10
-      paddingBottom: 6,
-      divFirstShow: false,
-      showStatic: false,
-      showList: true
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.chartData, e)
-    },
-    resize (chartItem) {
-      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
-      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    setData (chartItem) {
-      this.data = chartItem
-    },
-    showLoad (chartItem) {
-      this.data = chartItem
-      this.panelIdInner = this.panelId
-      // 设置高度
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-    },
-    setStaticContent: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading()
-      })
-    },
-    setLoadFrame () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          }
-        }
-        iframe.src = that.data.param.url
-      })
-    },
-    initDialog () {
-      this.startLoading('screen')
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContentFull()
-      } else {
-        this.showStatic = false
-        this.setLoadFrameFull()
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    clearChart () {
-      this.data = {}
-    },
-    screenRefreshChart () {
-      ('urlContainerFull' + this.chartIndex).window.location.reload()
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      // this.startLoading()
-      this.firstShow = false
-      this.$refs.listGroup.refresh()
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    editGroupItem (chart) {
-      chart.isGroup = true
-      this.$emit('on-edit-group-chart', chart)
-    },
-    duplicateGroupItem (chart) {
-      chart.isGroup = true
-      this.$emit('on-duplicate-group-chart', chart)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    removeGroupItem (chart) {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-group-chart', chart)
-    },
-    // 删除group 下的该图表
-    removeChartGroup (chart) {
-      this.$emit('on-remove-group-chart', chart)
-    },
-    addGroupItemChart () {
-      this.$emit('on-add-group-item-chart', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    moveGroupItem (groupList) {
-      this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
-    },
-    setLoadFrameFull () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
-
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            that.endLoading('screen')
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            that.endLoading('screen')
-          }
-        }
-
-        iframe.src = this.data.param.url
-      })
-    },
-    setStaticContentFull: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading('screen')
-      })
-    },
-    showListChange () {
-      this.showList = !this.showList
-      if (this.showList) {
-        this.$nextTick(() => {
-          this.$refs.listGroup.resize()
-        })
-      }
-      const scrollbarWrap = document.getElementById('dashboardScrollbar')
-      this.$emit('loadChartData', scrollbarWrap.scrollTop)
-    }
-  },
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-    if (this.chartData.param) {
-      this.showList = !this.chartData.param.collapse
-    }
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

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

@@ -1,658 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-echarts" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" style="display: flex;justify-content: center"></div>
-        <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' ref="legendArea" v-show="firstShow">
-          <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
-            <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
-              <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
-                <br/><!--bgColorList[index]-->
-              </div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import loading from '../common/loading'
-import * as echarts from 'echarts'
-import { getChart, setChart, getMousePoint } from '../common/js/common'
-import chartConfig from '../page/dashboard/overview/chartConfig'
-import { randomcolor } from '../common/js/radomcolor/randomcolor'
-import chartDataList from '@/components/common/mixin/chartDataList'
-import { chartResizeTool } from '@/components/common/js/tools'
-export default {
-  name: 'pieChart',
-  components: {
-    loading: loading
-  },
-  props: {
-    tempDom: Object,
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      pieData: [],
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: [],
-      legend: [],
-      legendScreen: [],
-      isGrey: [],
-      isGreyScreen: [],
-      echart: null,
-      echartScreen: null,
-      bgColorList: [],
-      stableFilter: {},
-      option: {
-        title: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          left: 'center',
-          top: 'middle'
-        },
-        tooltip: {
-          trigger: 'item',
-          backgroundColor: 'rgba(221,228,237,1)',
-          borderColor: 'rgba(255,255,255,0)',
-          textStyle: {
-            color: '#000'
-          },
-          axisPointer: {
-            snap: false,
-            animation: false
-          },
-          extraCssText: 'z-index:1000;'
-        },
-        series: null,
-        stepWidth: null
-      }
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e, this.chartIndex)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartPieChart' + this.chartIndex)
-        let height = Math.floor(chartItem.height / this.$chartResizeTool.stepHeight) * this.$chartResizeTool.stepHeight// 图表高度四舍五入
-        if (height < this.$chartResizeTool.minHeight) {
-          height = this.$chartResizeTool.minHeight
-        }
-        chartBox.style.height = `${height - this.$chartResizeTool.chartBlankHeight}px`
-      })
-      this.clearData()
-      this.firstShow = false
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.divFirstShow = true
-    },
-    clearData () {
-      if (getChart(this.chartIndex)) {
-        getChart(this.chartIndex).clear()
-        // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
-      }
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      const id = this.data.id
-      this.clearChart()
-      this.$refs['localLoading' + this.chartIndex].startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.seriePieChart = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      if (getChart(this.chartIndex)) {
-        const divHeight = this.$refs.legendArea.offsetHeight
-        getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
-      }
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || seriesItem.data.length < 1) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-      this.legend = legend
-      this.legendScreen = legend
-      legend && this.setColor(legend.length)
-      legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
-
-      this.$set(this.option, 'color', this.bgColorList)
-      this.pieData = seriesItem
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('screen')
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        this.initChart('local')
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    },
-    formatLegend (chartWidth, name) {
-      if (!name) {
-        return ''
-      }
-      // 计算宽度
-      const span = document.querySelector('.temp-dom')
-      span.textContent = name
-      const txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width
-      if (txtWidth < chartWidth) {
-        return name
-      } else {
-        const charNum = `${(chartWidth - 100) / (txtWidth / name.length)}`
-        return name.slice(0, charNum) + '...'
-      }
-    },
-    initChart: function (type) {
-      this.option.series = this.pieData
-      this.stepWidth = document.getElementById('listContainer').offsetWidth / 12
-      if (type == 'local') {
-        this.initLocal()
-      } else {
-        this.initScreen()
-      }
-    },
-    initLocal: function () {
-      const self = this
-      const dom = document.getElementById('pie-chart-local-' + this.chartIndex)
-      if (!this.echart) {
-        this.echart = echarts.init(dom)
-        setChart(this.chartIndex, this.echart)
-      }
-      if (this.legend) {
-        this.isGrey = []
-        this.legend.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGrey.push(false)
-          return legend
-        })
-      }
-
-      this.$nextTick(() => {
-        const vm = this
-        setTimeout(function () {
-          const divHeight = self.$refs.legendArea ? self.$refs.legendArea.offsetHeight : 20
-          if (!self.chartData.height) {
-            getChart(self.chartIndex).resize({ height: (400 - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          } else {
-            getChart(self.chartIndex).resize({ height: (self.chartData.height * vm.stepWidth - divHeight - self.$chartResizeTool.titleHeight - self.$chartResizeTool.chartBlankHeight) })
-          }
-          self.option.tooltip && self.$set(self.option.tooltip, 'formatter', self.formatterFunc)
-          self.option.tooltip && self.$set(self.option.tooltip, 'position', function (point, params, dom, rect, size) {
-            dom.style.transform = 'translateZ(0)'
-            const windowWidth = window.innerWidth// 窗口宽度
-            const windowHeight = window.innerHeight// 窗口高度
-            const windowMouse = getMousePoint()
-            // 提示框位置
-            let x = 0
-            let y = 0
-            // 当前鼠标位置
-            const pointX = point[0]
-            const pointY = point[1]
-            // 外层div大小
-            const viewWidth = size.viewSize[0]
-            // const viewHeight = size.viewSize[1]
-            // 提示框大小
-            const boxWidth = size.contentSize[0]
-            const boxHeight = size.contentSize[1]
-            if (!self.screenModal) { // 本地显示
-              const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
-              if (chartDom) {
-                // const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
-                const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
-
-                const parent = document.getElementById('tableList')
-                // const parClientHeight = parent.clientHeight// 可视高度
-                const parClientWidth = parent.clientWidth// 可视宽度
-                // const parScrollTop = parent.scrollTop
-                if ((parClientWidth - pointX - parleft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 10
-                } else {
-                  x = pointX - boxWidth
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              } else { // preview page
-                if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-                  x = pointX + 15
-                } else {
-                  x = pointX - boxWidth - 15
-                }
-                if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                  y = pointY + 15
-                } else {
-                  y = pointY - boxHeight - 10
-                }
-                return [x, y]
-              }
-            } else {
-              if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
-                x = pointX + 10
-              } else {
-                x = pointX - boxWidth
-              }
-              if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-                y = pointY + 15
-              } else {
-                y = pointY - boxHeight - 10
-              }
-              return [x, y]
-            }
-          })
-          if (self.pieData[0].data.length > 0) {
-            getChart(self.chartIndex).clear()
-            getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            getChart(self.chartIndex).clear()
-            getChart(self.chartIndex) && getChart(self.chartIndex).setOption(self.option)// 创建图表
-          }
-
-          self.$refs['localLoading' + self.chartIndex] && self.$refs['localLoading' + self.chartIndex].endLoading()
-          self.firstShow = true // 展示操作按键
-        }, 100)
-      })
-    },
-    initScreen: function () {
-      const self = this
-      const dom = document.getElementById('pie-chart-screen-' + this.chartIndex)
-      if (!this.echartScreen) {
-        this.echartScreen = echarts.init(dom)
-      }
-      if (this.legendScreen) {
-        this.isGreyScreen = []
-        this.legendScreen = this.legendScreen.map((item, i) => {
-          const legend = {
-            name: item.name,
-            alias: item.alias,
-            color: item.color,
-            showText: this.formatLegend(dom.clientWidth, item.name)
-          }
-          self.isGreyScreen.push(false)
-          return legend
-        })
-      }
-      if (self.echartScreen) {
-        self.echartScreen.clear()
-        self.showLegend = true
-        self.$refs['localLoadingScreen' + self.chartIndex].endLoading()
-      }
-      this.$nextTick(() => {
-        const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-        const divHeight = legendDiv.offsetHeight
-        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-        const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-        self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-        self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-        setTimeout(function () {
-          if (self.pieData[0].data.length > 0) {
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-            self.noData = false
-          } else {
-            self.noData = true
-            self.option = chartConfig.getOption('noData')
-            self.echartScreen && self.echartScreen.setOption(self.option)// 显示全屏界面
-          }
-          self.echartScreen.on('finished', function () {
-            const legendDiv = document.getElementById('screenLegendArea' + self.chartIndex)
-            const divHeight = legendDiv.offsetHeight
-            const screenHeight = document.documentElement.clientHeight || document.body.clientHeight
-            const sumHeight = Math.floor(screenHeight * 0.99 * 0.8)// margin-top:1vh; dailog:80%
-            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`
-            self.echartScreen.resize({ height: (sumHeight - divHeight - 58) })// 图表的高度
-            self.echartScreen.off('finished')
-          })
-        }, 100)
-      })
-    },
-    clickLegend (legendName, index) {
-      /* 点击legend
-        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-        * 3.否则只改变被点击的legend状态
-        * */
-      let highlightNum = 0 // 高亮数量
-      this.isGrey.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的
-      const curIsGrey = this.isGrey[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = getChart(this.chartIndex)
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGrey = this.isGrey.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGrey = this.isGrey.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGrey, index, !this.isGrey[index])
-        }
-      }
-    },
-    clickScreenLegend (legendName, index) {
-      /* 点击legend
-        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
-        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
-        * 3.否则只改变被点击的legend状态
-        * */
-      let highlightNum = 0 // 高亮数量
-      this.isGreyScreen.forEach(g => {
-        if (!g) {
-          highlightNum++
-        }
-      })
-      const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的
-      const curIsGrey = this.isGreyScreen[index] // 当前legend的状态
-      const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
-
-      const echart = this.echartScreen
-      if (echart) {
-        if (!hasGrey) { // 1.除当前legend外全置灰
-          echart.dispatchAction({
-            type: 'legendInverseSelect'
-          })
-          echart.dispatchAction({
-            type: 'legendSelect',
-            name: legendName
-          })
-          this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index)
-        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
-          echart.dispatchAction({
-            type: 'legendAllSelect'
-          })
-          this.isGreyScreen = this.isGreyScreen.map(() => false)
-        } else {
-          const type = curIsGrey ? 'legendSelect' : 'legendUnSelect'
-          echart.dispatchAction({
-            type: type,
-            name: legendName
-          })
-          this.$set(this.isGreyScreen, index, !this.isGreyScreen[index])
-        }
-      }
-    },
-    setColor (colorNum) {
-      this.bgColorList = [
-        '#FF5200', '#3685FF', '#FF8D00', '#00DCA2',
-        '#954Eff', '#FFCB01', '#f65A96', '#00BFD0',
-        '#FF8BEA', '#4D7693', '#72577C', '#99D750',
-        '#DD8270', '#C475EE', '#7E83FB', '#7EB090',
-        '#FF9094', '#00CCF5', '#CF6684', '#4E55FF'
-      ]
-      for (let i = 0; i < colorNum - 19; i++) {
-        this.bgColorList.push(randomcolor())
-      }
-    },
-    formatterFunc: function (params, ticket, callback) {
-      const chartInfo = this.chartData
-      return `
-                <div>
-                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
-                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${this.legend[params.dataIndex].alias}</div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>value</div>
-                            <div>${chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value, null, -1, 2)}</div>
-                        </div>
-                        <div style="font-size:12px;display:flex;justify-content: space-between;">
-                            <div>percent</div>
-                            <div>${params.percent}%</div>
-                        </div>
-                    </div>
-                </div>
-               `
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -1,482 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-single-stat"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            :close-delay=10
-            placement="top-start"
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon" :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
-            {{serieSingleStat}}
-            <div class="chart-no-data" v-show="noData">No Data</div>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
-            </div>
-          </div>
-          <div class="single-stat-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" :style="{color:mapping?mapping.color.text:'',background:mapping?mapping.color.bac:''}" class="single-stat-content">
-              {{serieSingleStat}}
-              <div class="chart-no-data" v-show="noData">No Data</div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDataFormat from './chartDataFormat'
-import chartDataList from '@/components/common/mixin/chartDataList'
-
-export default {
-  name: 'chartSingleStat',
-  mixins: [chartDataList, chartDataList],
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      isError: false,
-      errorContent: '',
-      seriesItem: [], // 保存信息
-      seriesItemScreen: [], // 全屏数据
-      serieSingleStat: '',
-      mapping: '', // 满足valueMapping时 mapping的值
-      images: '',
-      loading: Object,
-      items: {
-        metric_name: [], // 每条数据列名称
-        xAxis: [],
-        theData: [] // series数据组
-      },
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      // 查询数据使用
-      filter: {
-        start_time: '',
-        end_time: ''
-      },
-      stableFilter: {},
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], // 全屏显示的时间
-      oldSearchTime: []
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    dragResize: function (e) {
-      const diffWidth = 20 // 界面的宽度空白的地方的宽度
-      const chartBoxPadding = 22
-      const targetDiv = document.getElementById('chartSingleStatDiv' + this.chartIndex) // e.target.parentNode.parentNode;.children[0]
-      const targetDivContainer = document.getElementById('listContainer') // e.target.parentNode.parentNode;.children[0]
-      const maxWidth = targetDivContainer.offsetWidth - diffWidth
-      const minWidth = maxWidth / 12
-      const stepWidth = maxWidth / 12
-      const stepHeight = 10
-
-      // 得到点击时该容器的宽高：
-      const targetDivHeight = targetDiv.offsetHeight
-      const targetDivWidth = targetDiv.offsetWidth
-      const startY = e.clientY
-      const startX = e.clientX
-      const _this = this
-
-      document.onmousemove = function (e) {
-        e.preventDefault()
-        // 得到鼠标拖动的宽高距离：取绝对值
-        const distY = Math.abs(e.clientY - startY)
-        const distX = Math.abs(e.clientX - startX)
-
-        // 往上方拖动：
-        if (e.clientY < startY) {
-          targetDiv.style.height = targetDivHeight - distY + 'px'
-          // heightTmp = targetDivHeight-distY;
-        }
-        if (e.clientX < startX) {
-          targetDiv.style.width = targetDivWidth - distX + 'px'
-          // widthTmp = targetDivWidth-distX;
-        }
-        // 往下方拖动：
-        if (e.clientY > startY) {
-          targetDiv.style.height = (targetDivHeight + distY) + 'px'
-          // heightTmp = targetDivHeight+distY;
-        }
-        if (e.clientX > startX) {
-          targetDiv.style.width = (targetDivWidth + distX) + 'px'
-          // widthTmp = targetDivWidth+distX;
-        }
-
-        if (parseInt(targetDiv.style.height) <= _this.minHeight) {
-          targetDiv.style.height = _this.minHeight + 'px'
-          // heightTmp = _this.minHeight;
-        }
-
-        if (parseInt(targetDiv.style.width) >= maxWidth) {
-          targetDiv.style.width = maxWidth + 'px'
-          // widthTmp = maxWidth;
-        }
-        if (parseInt(targetDiv.style.width) <= minWidth) {
-          targetDiv.style.width = minWidth + 'px'
-          // widthTmp = minWidth;
-        }
-        // 调整表格大小
-        const containerHeight = parseInt(targetDiv.style.height)
-        const containerWidth = parseInt(targetDiv.style.width)
-        const chartBox = document.getElementsByClassName('chartBox')
-        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
-        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-        // 表格的高度
-        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
-        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`// -75-32+25
-      }
-
-      document.onmouseup = function () {
-        const targetDivHeightNew = parseInt(targetDiv.style.height)
-        // let targetDivHeightNew = heightTmp
-        const targetDivWidthNew = parseInt(targetDiv.style.width)
-        // let targetDivWidthNew = widthTmp;
-
-        const diffHeight = Math.abs(targetDivHeight - targetDivHeightNew)
-        if (targetDivHeight > targetDivHeightNew) {
-          const finalDiffHeight = Math.floor(diffHeight / stepHeight) * stepHeight
-          // alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
-          targetDiv.style.height = (targetDivHeight - finalDiffHeight) + 'px'
-        }
-        if (targetDivHeight < targetDivHeightNew) {
-          const finalDiffHeight = Math.ceil(diffHeight / stepHeight) * stepHeight
-          targetDiv.style.height = (targetDivHeight + finalDiffHeight) + 'px'
-        }
-
-        let span = _this.data.span
-        if (targetDivWidth > targetDivWidthNew) {
-          span = Math.floor((targetDivWidthNew * 12) / maxWidth)
-          const finalWidth = Math.floor((targetDivWidthNew * 12) / maxWidth) * stepWidth
-          if ((finalWidth) < minWidth) {
-            targetDiv.style.width = minWidth + 'px'
-            span = 1
-          } else {
-            targetDiv.style.width = finalWidth + 'px'
-          }
-        }
-        if (targetDivWidth < targetDivWidthNew) {
-          span = Math.ceil((targetDivWidthNew * 12) / maxWidth)
-          const spanUnit = Math.ceil((targetDivWidthNew * 12) / maxWidth)
-          const finalWidth = spanUnit * stepWidth
-          if (finalWidth > maxWidth || spanUnit === 12) {
-            targetDiv.style.width = maxWidth + 'px'
-            span = 12
-          } else {
-            targetDiv.style.width = finalWidth + 'px'
-          }
-        }
-        // 调整表格大小
-        const containerHeight = parseInt(targetDiv.style.height)
-        const containerWidth = parseInt(targetDiv.style.width)
-
-        const chartBox = document.getElementsByClassName('chartBox')
-        chartBox[_this.chartIndex].style.width = (containerWidth + chartBoxPadding) + 'px'
-        // chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
-        // 表格的高度
-        const chartSingleStatBox = document.getElementById('chartContainer' + _this.chartIndex)
-        chartSingleStatBox.style.height = `${containerHeight - _this.titleHeight}px`
-
-        const modifyParams = {
-          id: _this.data.id,
-          span: span,
-          height: (containerHeight + _this.chartSpaceHeight),
-          prev: parseInt(_this.data.prev),
-          next: parseInt(_this.data.next)
-        }
-        targetDiv.style.height = (Math.floor((containerHeight + _this.chartSpaceHeight) / 10) * 10 - _this.chartSpaceHeight) + 'px'// 图表实际渲染高度，采用个位数字四舍五入
-        _this.$put('panel/' + _this.panelIdInner + '/charts/modify', modifyParams).then(response => {
-          if (response.code === 200) {
-            // 更新当前图表数据
-            _this.data.span = span
-            _this.data.height = containerHeight + _this.chartSpaceHeight
-            _this.$emit('on-drag-chart', _this.data)
-          } else {
-            if (response.msg) {
-              _this.$message.error(response.msg)
-            } else if (response.error) {
-              _this.$message.error(response.error)
-            } else {
-              _this.$message.error(response)
-            }
-          }
-        })
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    screenRefreshChart () {
-      this.$refs.calendarPanel.timeChange(this.$refs.calendarPanel.nowTimeType, 'chart')
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    // 全屏时间条件查询
-    dateChange (time) {
-      this.seriesItemScreen = []
-      this.serieSingleStat = ''
-      this.startLoading('screen')
-      this.$emit('on-search-data', this.data.id, this.searchTime)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.searchTime = []
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-
-      this.seriesItemScreen = this.seriesItem
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .single-stat-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area, errorMsg) {
-      if (filter) {
-        this.stableFilter = filter
-      }
-      if (errorMsg && errorMsg !== '') {
-        this.isError = true
-        this.errorContent = errorMsg
-      } else {
-        this.isError = false
-        this.errorContent = ''
-      }
-      if (seriesItem || (typeof seriesItem === 'number' && seriesItem == 0) || (typeof seriesItem === 'string' && seriesItem != '')) { // 0 为false
-        this.noData = false
-      } else {
-        this.noData = true
-      }
-
-      if (area === 'showFullScreen') { // 全屏按时间查询
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        if (Number(seriesItem)) {
-          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
-            const type = chartItem.param.valueMapping.type
-            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
-            let mapping
-            if (type == 'value') {
-              mapping = mappings.find(item => { return item.value == singleStatTmp })
-            } else {
-              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
-            }
-            this.mapping = mapping
-            if (this.mapping && !this.mapping.color) {
-              this.mapping.color = { bac: '#fff', text: '#000' }
-            }
-            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          } else {
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          }
-        } else {
-          this.serieSingleStat = seriesItem
-        }
-        this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-        this.searchTime[1] = filter.end_time
-        this.endLoading('screen')
-      } else {
-        this.$nextTick(() => {
-          this.resize(chartItem)
-        })
-        this.divFirstShow = true
-
-        this.firstShow = true // 展示操作按键
-
-        this.panelIdInner = panelId
-        this.data = chartItem
-        this.unit = chartDataFormat.getUnit(this.data.unit)
-        if (Number(seriesItem)) {
-          const singleStatTmp = parseFloat(Number(seriesItem).toFixed(2))// parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-          if (chartItem.param.valueMapping && chartItem.param.valueMapping.type) {
-            const type = chartItem.param.valueMapping.type
-            const mappings = chartItem.param.valueMapping.mapping ? chartItem.param.valueMapping.mapping : []
-            let mapping
-            if (type == 'value') {
-              mapping = mappings.find(item => { return item.value == singleStatTmp })
-            } else {
-              mapping = mappings.find(item => { return item.from <= singleStatTmp && item.to >= singleStatTmp })
-            }
-            this.mapping = mapping
-            if (this.mapping && !this.mapping.color) {
-              this.mapping.color = { bac: '#fff', text: '#000' }
-            }
-            this.serieSingleStat = mapping ? mapping.text.replace('{{value}}', singleStatTmp).replace('{{name}}', chartItem.elements[0].legend) : chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          } else {
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(singleStatTmp, null, 2)
-          }
-        } else {
-          this.serieSingleStat = seriesItem
-        }
-        if (filter) { // 保存数据,用于同步时间
-          this.searchTime[0] = filter.start_time// 将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time
-          this.oldSearchTime[0] = this.searchTime[0]
-          this.oldSearchTime[1] = this.searchTime[1]
-        }
-        this.endLoading()
-      }
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

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

@@ -1,290 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-url" ref="resizeBox">
-      <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-
-        </div>
-        <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
-          <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
-                  style="z-index:5000;padding-bottom:6px;"
-          ></iframe>
-        </div>
-        <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
-          <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
-          <div slot="title">
-            <span class="nz-dialog-title">{{chartData.name}}</span>
-          </div>
-          <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
-                  style="z-index:5000;padding-bottom:6px;"
-          ></iframe>
-          <div style="position: absolute;width: 100%; top:calc(50% - 100px);text-align: center;" v-if="showStatic">
-            <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import chartDataList from '@/components/common/mixin/chartDataList'
-
-export default {
-  name: 'chartUrl',
-  components: {
-    loading: loading
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      unit: {},
-
-      images: '',
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      minHeight: 200,
-      chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
-      titleHeight: 38, // title-height:28,magrin-bottom:10
-      paddingBottom: 6,
-      divFirstShow: false,
-      showStatic: false
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.chartData, e)
-    },
-    resize (chartItem) {
-      const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
-      chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    showLoad (chartItem) {
-      this.data = chartItem
-      this.panelIdInner = this.panelId
-      // 设置高度
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.startLoading()
-
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContent()
-      } else {
-        this.showStatic = false
-        this.setLoadFrame()
-      }
-      this.divFirstShow = true
-    },
-    setStaticContent: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainer' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading()
-      })
-    },
-    setLoadFrame () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading()
-          }
-        }
-        iframe.src = that.data.param.url
-      })
-    },
-    initDialog () {
-      this.startLoading('screen')
-      if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
-        this.showStatic = true
-        this.setStaticContentFull()
-      } else {
-        this.showStatic = false
-        this.setLoadFrameFull()
-      }
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    clearChart () {
-      this.data = {}
-    },
-    screenRefreshChart () {
-      ('urlContainerFull' + this.chartIndex).window.location.reload()
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      const iframe = document.querySelector('#urlContainer' + this.chartIndex)
-      iframe.src = ''
-      iframe.src = this.data.param.url
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    setLoadFrameFull () {
-      const that = this
-      this.$nextTick(() => {
-        const iframe = document.querySelector('#urlContainerFull' + this.chartIndex)
-
-        // 处理兼容行问题
-        if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading('screen')
-          })
-        } else {
-          iframe.onload = function () {
-            // iframe加载完毕以后执行操作
-            that.firstShow = true
-            // console.log('iframe已加载完毕');
-            that.endLoading('screen')
-          }
-        }
-
-        iframe.src = this.data.param.url
-      })
-    },
-    setStaticContentFull: function () {
-      const that = this
-      this.$nextTick(() => {
-        const staticDiv = document.querySelector('#staticContainerFull' + this.chartIndex)
-        staticDiv.innerHTML = `<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
-        that.firstShow = true
-        that.endLoading('screen')
-      })
-    }
-  },
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

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

@@ -1,225 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-          </div>
-          <div class="rich-text-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <diagram :topoData="data.param.topo" :fromChart="true" :isScreen="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import diagram from '@/components/common/ChartDiagram/diagram'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'diagram-chart',
-  components: {
-    loading: loading,
-    diagram
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {
-        param: {
-          topo: {}
-        }
-      }, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-      this.$refs.diagram.winResize()
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.endLoading()
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/charts/logs.vue

@@ -1,731 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'logsDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-popover
-            v-if="isError"
-            placement="top-start"
-            :close-delay=10
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference" class="panel-info-corner panel-info-corner--error">
-              <i class="nz-icon nz-icon-warning fa"></i>
-              <span class="panel-info-corner-inner"></span>
-           </span>
-          </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content" >
-            <div v-if="showTab.length==2" class="show-tab-icon">
-              <i class="nz-icon nz-icon-link-chart" :class="showTabActive == '1'?'is-active-icon':''" @click="showTabActive = '1'"/>
-              <i class="nz-icon nz-icon-logs" :class="showTabActive == '2'?'is-active-icon':''" @click="showTabActive = '2'"/>
-            </div>
-            <div v-show="showTab.indexOf('1') > -1 && showTabActive == '1'" name="1" title="Graph" style="height: 100%">
-              <div class="chart-room" style="height: 100%">
-                <chart ref="logChart" :unit="chartUnit"></chart>
-              </div>
-            </div>
-            <div v-show="showTab.indexOf('2') > -1 && showTabActive == '2'" name="2" title="Logs" class="logs-box">
-              <log-tab ref="logDetail" v-show="!noData" :log-data="logData" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-              <div class="chart-no-data" v-show="noData">No Data</div>
-            </div>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog"
-                   :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="90%"
-                   @close="screenModal = false;screenLegendListMore=[]"
-                   style="margin-top: 1vh !important;"
-                   @opened="initDialog"
-                   @closed="closeDialog"
-                   :modal-append-to-body="false"
-        >
-          <el-popover
-            v-if="isError"
-            placement="top-start"
-            :close-delay=10
-            trigger="hover"
-            popper-class="chart-error-popper">
-            <div >{{errorContent}}</div>
-            <span slot="reference"  class="panel-info-corner panel-info-corner--error">
-                <i class="nz-icon nz-icon-warning fa-model" ></i>
-                <span class="panel-info-corner-inner"></span>
-            </span>
-          </el-popover>
-          <div slot="title" >
-            <span class="nz-dialog-title">{{chartData.name}}</span>
-            <div class="float-right panel-calendar dialog-tool">
-              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
-            </div>
-          </div>
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="logs-content"  >
-            <div v-if="showTabScreen.length==2" class="show-tab-icon">
-              <i class="nz-icon nz-icon-link-chart" :class="showTabScreenActive == '1'?'is-active-icon':''" @click="showTabScreenActive = '1'"/>
-              <i class="nz-icon nz-icon-logs" :class="showTabScreenActive == '2'?'is-active-icon':''" @click="showTabScreenActive = '2'"/>
-            </div>
-            <div v-show="showTabScreen.indexOf('1') > -1 && showTabScreenActive == '1'" name="1" title="Graph" style="height: 100%">
-              <div class="chart-room" style="height: 100%">
-                <chart ref="logChartScreen" :unit="chartUnit"></chart>
-              </div>
-            </div>
-            <div v-show="showTabScreen.indexOf('2') > -1 && showTabScreenActive == '2'" name="2" title="Logs" class="logs-box">
-              <log-tab ref="logDetailScreen" v-show="!noDataScreen" :log-data="logDataScreen" :showSwitch="false" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
-              <div class="chart-no-data" v-show="noDataScreen">No Data</div>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import axios from 'axios'
-import chart from '@/components/page/dashboard/overview/chart'
-import logTab from '@/components/page/dashboard/explore/logTab'
-import bus from '@/libs/bus'
-import logsTempData from '@/components/charts/logsTempData'
-import { fromRoute } from '@/components/common/js/constants'
-import { dealLegendAlias } from '@/components/common/js/tools'
-export default {
-  name: 'logs',
-  components: {
-    loading: loading,
-    chart,
-    logTab
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    startTime: {},
-    endTime: {},
-    isLock: { type: Boolean, default: false }
-  },
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      noDataScreen: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false,
-      showTab: ['1', '2'],
-      showTabActive: '1',
-      showTabScreen: ['1', '2'],
-      showTabScreenActive: '1',
-      chartUnit: 2,
-      logData: [],
-      logDataScreen: [],
-      tabIndex: 1,
-      isError: false,
-      errorContent: '',
-      seriesItem: '',
-      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      oldSearchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
-      filter: {},
-      stableFilter: {}
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('logsDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      // 初始化同步时间
-      this.filter.start_time = this.stableFilter.start_time
-      this.filter.end_time = this.stableFilter.end_time
-      // this.searchTime = this.oldSearchTime;
-      this.$set(this.searchTime, 0, this.oldSearchTime[0])
-      this.$set(this.searchTime, 1, this.oldSearchTime[1])
-      this.screenModal = true
-      this.isGreyScreen = []
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
-      this.seriesItemScreen = this.seriesItem
-      this.showTabScreenActive = '1'
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#logsDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      if (filter) { // 保存数据,用于同步时间
-        this.stableFilter = filter
-        this.searchTime[0] = filter.start_time
-        this.searchTime[1] = filter.end_time
-        this.oldSearchTime[0] = this.searchTime[0]
-        this.oldSearchTime[1] = this.searchTime[1]
-      }
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.chartUnit = chartItem.unit
-      this.endLoading()
-      this.queryLogData(this.data.param.limit)
-    },
-    queryLogData (limit) { // log的chart和table是一个请求
-      if (!limit) {
-        limit = this.data.param.limit || 1000
-      }
-      this.expressions = this.chartData.elements.map(elements => elements.expression)
-      if (this.expressions.length > 0) {
-        const requestArr = []
-        this.expressions.forEach((item, index) => {
-          if (item != '' && this.from.trim() != fromRoute.chartTemp) {
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.startTime) + '&end=' + this.$stringTimeParseToUnix(this.endTime) + '&limit=' + limit))
-          } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
-            requestArr.push(logsTempData[index % 2])
-          }
-        })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
-        }
-        axios.all(requestArr).then(res => {
-          const errorRowIndex = []
-          res.forEach((r, i) => {
-            if (typeof r === 'string') {
-              errorRowIndex.push(i)
-            }
-          })
-          if (errorRowIndex.length > 0) {
-            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
-            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
-          }
-          if (res.length > 0) {
-            const logData = res.map(r => r.data)
-            const hasGraph = logData.some(d => d.resultType === 'matrix')
-            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTab.indexOf('1')
-            if (hasGraph) {
-              if (graphTabIndex === -1) {
-                this.showTab.push('1')
-              }
-            } else {
-              if (graphTabIndex > -1) {
-                this.showTab.splice(graphTabIndex, 1)
-              }
-            }
-            const logTabIndex = this.showTab.indexOf('2')
-            if (hasLog) {
-              if (logTabIndex === -1) {
-                this.showTab.push('2')
-              }
-              this.noData = true
-              logData.forEach(item => {
-                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
-                  this.noData = false
-                }
-              })
-            } else {
-              if (logTabIndex > -1) {
-                this.showTab.splice(logTabIndex, 1)
-              }
-            }
-            this.showTabActive = this.showTab[0]
-            this.$nextTick(() => {
-              if (this.$refs.logDetail) {
-                this.$refs.logDetail.time = this.chartData.param.time
-                this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
-                this.$refs.logDetail.operations.descending = this.chartData.param.descending
-              }
-              logData.forEach((item, index) => {
-                item.result.forEach(result => {
-                  result.elements = this.chartData.elements[index]
-                })
-              })
-              this.logData = logData
-              this.logDataScreen = logData
-              hasGraph && this.loadLogGraph()
-            })
-          }
-        }).catch(e => {
-          this.isError = true
-          this.errorContent = this.$t('terminallog.statusItem.unknownError')
-          this.$message.error(this.$t('terminallog.statusItem.unknownError'))
-        })
-      }
-    },
-    queryLogDataScreen (limit) { // log的chart和table是一个请求
-      if (!limit) {
-        limit = this.data.param.limit || 1000
-      }
-      this.expressions = this.chartData.elements.map(elements => elements.expression)
-      if (this.expressions.length > 0) {
-        const requestArr = []
-        this.expressions.forEach((item, index) => {
-          if (item != '' && this.from.trim() != fromRoute.chartTemp) {
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(this.searchTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.searchTime[1]) + '&limit=' + limit))
-          } else if (item != '' && this.from.trim() == fromRoute.chartTemp) {
-            requestArr.push(logsTempData[index % 2])
-          }
-        })
-        if (requestArr.length > 0) {
-          this.showIntroduce = false
-          this.saveDisabled = false
-        }
-        axios.all(requestArr).then(res => {
-          this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-          const errorRowIndex = []
-          res.forEach((r, i) => {
-            if (typeof r === 'string') {
-              errorRowIndex.push(i)
-            }
-          })
-          if (errorRowIndex.length > 0) {
-            this.$message.error(this.$t('tip.errorInRow') + ': ' + errorRowIndex.map(e => e + 1).join(' ,'))
-            res = res.filter((r, i) => errorRowIndex.indexOf(i) === -1)
-          }
-          if (res.length > 0) {
-            const logData = res.map(r => r.data)
-            const hasGraph = logData.some(d => d.resultType === 'matrix')
-            const hasLog = logData.some(d => d.resultType === 'streamsFormat')
-            const graphTabIndex = this.showTabScreen.indexOf('1')
-            if (hasGraph) {
-              if (graphTabIndex === -1) {
-                this.showTabScreen.push('1')
-              }
-            } else {
-              if (graphTabIndex > -1) {
-                this.showTabScreen.splice(graphTabIndex, 1)
-              }
-            }
-            const logTabIndex = this.showTabScreen.indexOf('2')
-            if (hasLog) {
-              if (logTabIndex === -1) {
-                this.showTabScreen.push('2')
-              }
-              this.noDataScreen = true
-              logData.forEach(item => {
-                if (item.resultType === 'streamsFormat' && item.result.length > 0) {
-                  this.noDataScreen = false
-                }
-              })
-            } else {
-              if (logTabIndex > -1) {
-                this.showTabScreen.splice(logTabIndex, 1)
-              }
-            }
-            this.showTabScreenActive = this.showTabScreen[0]
-            this.$nextTick(() => {
-              if (this.$refs.logDetail) {
-                this.$refs.logDetail.time = this.chartData.param.time
-                this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines
-                this.$refs.logDetail.operations.descending = this.chartData.param.descending
-              }
-              logData.forEach((item, index) => {
-                item.result.forEach(result => {
-                  result.elements = this.chartData.elements[index]
-                })
-              })
-              this.logDataScreen = logData
-              hasGraph && this.loadLogGraphScreen()
-            })
-          }
-        }).catch(e => {
-          this.isError = true
-          this.errorContent = this.$t('terminallog.statusItem.unknownError')
-          // this.$message.error(this.$t('terminallog.statusItem.unknownError'))
-        })
-      }
-    },
-    loadLogGraph () {
-      const graphData = this.logData.filter(l => l.resultType === 'matrix')
-      if (graphData && graphData.length > 0) {
-        this.$refs.logChart.startLoading()
-        const queryExpression = []
-        let series = []
-        const legend = []
-        this.expressions.forEach((item, index) => {
-          if (item !== '') {
-            queryExpression.push(item)
-          }
-        })
-        this.logData.forEach((response, index) => {
-          if (response.resultType === 'matrix') {
-            const data = response.result
-            if (!data || data.length < 1) {
-              return
-            }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-                type: 'line'
-              }
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              let host = ''// up,
-              let alias = ''
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.keys(result.metric)
-                if (metric.__name__) {
-                  host = `${metric.__name__}{`// up,
-                }
-                metric.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${result.metric[tag]}",`
-                  }
-                })
-                if (host.endsWith(',')) {
-                  host = host.substr(0, host.length - 1)
-                }
-                if (metric.__name__) {
-                  host += '}'
-                }
-                // 处理legend别名
-                alias = dealLegendAlias(host, this.chartData.elements[index].legend)
-                if (!alias || alias === '') {
-                  alias = host
-                }
-              } else {
-                alias = queryExpression[index]
-              }
-              seriesItem.name = alias + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-            })
-          }
-        })
-        this.$refs.logChart.setLegend(legend)
-        this.$refs.logChart.setRandomColors(series.length)
-        if (!series.length) {
-          series = ''
-        }
-        this.$refs.logChart.setSeries(series)
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.logChart.endLoading()
-        })
-      }
-    },
-    loadLogGraphScreen () {
-      const graphData = this.logDataScreen.filter(l => l.resultType === 'matrix')
-      if (graphData && graphData.length > 0) {
-        this.$refs.logChartScreen.startLoading()
-        const queryExpression = []
-        let series = []
-        const legend = []
-        this.expressions.forEach((item, index) => {
-          if (item !== '') {
-            queryExpression.push(item)
-          }
-        })
-        this.logDataScreen.forEach((response, index) => {
-          if (response.resultType === 'matrix') {
-            const data = response.result
-            if (!data || data.length < 1) {
-              return
-            }
-            data.forEach((result, i) => {
-              const seriesItem = {
-                name: '',
-                symbol: 'emptyCircle', // 去掉点
-                symbolSize: [2, 2],
-                showSymbol: false,
-                smooth: 0.2, // 曲线变平滑
-                data: [],
-                lineStyle: {
-                  width: 1,
-                  opacity: 0.9
-                },
-                type: 'line'
-              }
-              seriesItem.data = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              let host = ''// up,
-              let alias = ''
-              if (result.metric && Object.keys(result.metric).length > 0) {
-                const metric = Object.keys(result.metric)
-                if (metric.__name__) {
-                  host = `${metric.__name__}{`// up,
-                }
-                metric.forEach((tag, i) => {
-                  if (tag !== '__name__') {
-                    host += `${tag}="${result.metric[tag]}",`
-                  }
-                })
-                if (host.endsWith(',')) {
-                  host = host.substr(0, host.length - 1)
-                }
-                if (metric.__name__) {
-                  host += '}'
-                }
-                // 处理legend别名
-                alias = dealLegendAlias(host, this.chartData.elements[index].legend)
-                if (!alias || alias === '') {
-                  alias = host
-                }
-              } else {
-                alias = queryExpression[index]
-              }
-              seriesItem.name = alias + '-' + index
-              series.push(seriesItem)
-              legend.push({ name: seriesItem.name, alias: alias, isGray: false })
-            })
-          }
-        })
-        this.$refs.logChartScreen.setLegend(legend)
-        this.$refs.logChartScreen.setRandomColors(series.length)
-        if (!series.length) {
-          series = ''
-        }
-        this.$refs.logChartScreen.setSeries(series)
-        this.defaultChartVisible = true
-        this.$nextTick(() => {
-          this.$refs.logChartScreen.endLoading()
-          this.$refs.logChartScreen.resize()
-        })
-      }
-    },
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.expressionChange()
-      })
-    },
-    exportLog ({ limit, descending }) {
-      const params = {
-        logql: this.expressions,
-        start: this.$stringTimeParseToUnix(this.filterTime[0]),
-        end: this.$stringTimeParseToUnix(this.filterTime[1]),
-        direction: descending ? 'backward' : 'forward',
-        limit
-      }
-      axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
-        if (window.navigator.msSaveOrOpenBlob) {
-          // 兼容ie11
-          const blobObject = new Blob([res.data])
-          window.navigator.msSaveOrOpenBlob(blobObject, 'log')
-        } else {
-          const url = URL.createObjectURL(new Blob([res.data]))
-          const a = document.createElement('a')
-          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
-          a.href = url
-          a.download = 'log'
-          a.target = '_blank'
-          a.click()
-          a.remove() // 将a标签移除
-        }
-      }, error => {
-        const $self = this
-        const reader = new FileReader()
-        reader.onload = function (event) {
-          const responseText = reader.result
-          const exception = JSON.parse(responseText)
-          if (exception.message) {
-            $self.$message.error(exception.message)
-          } else {
-            console.error(error)
-          }
-        }
-        reader.readAsText(error.response.data)
-      })
-    },
-    dateChange (time) {
-      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
-      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
-      // this.echartModalStore.clear()
-      this.showLegend = false
-      this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      this.queryLogDataScreen()
-    },
-    initDialog () {
-      this.queryLogDataScreen(this.data.param.limit)
-    },
-    closeDialog () {}
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>
-<style scoped>
-  .chartTitle{
-    position: relative;
-    z-index: 1;
-  }
-  .logs-content{
-    width: calc(100% - 20px);
-    height: calc(100% - 20px);
-    padding: 10px;
-    position: relative;
-  }
-  .show-tab-icon{
-    position: absolute;
-    top: 0;
-    left: 10px;
-    display: block;
-    z-index: 10;
-  }
-  .show-tab-icon .nz-icon{
-    cursor: pointer;
-    padding: 0 5px;
-  }
-  .show-tab-icon .nz-icon.is-active-icon{
-    color: #BDE3FD;
-  }
-  .chart-no-data{
-    width: calc(100% - 30px);
-  }
-  .log-detail .log-table .nz-table2 {
-    padding: 0;
-  }
-  .logs-box{
-    overflow-y: auto;height: calc(100% - 15px);margin-top: 10px
-  }
-</style>

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

@@ -1,222 +0,0 @@
-<template>
-  <div class="nz-chart-resize">
-    <div class="resize-shadow" ref="resizeShadow"></div>
-    <div class="resize-box resize-box-single" ref="resizeBox">
-      <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
-        <loading  :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
-            <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title">
-<!--              <span class="chart-title-text">{{chartData.name}}</span>-->
-              <span class="chart-title-text" v-on:mouseover="changeActive()" v-on:mouseout="removeActive()">{{chartData.name}}</span>
-              <transition  name="el-fade-in-linear">
-                <span v-show="chartDataList" class="chart-title-pit" >{{chartData.name}}</span>
-              </transition>
-              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
-                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
-                     <i class="nz-icon nz-icon-info-normal"></i>
-                  </el-tooltip>
-                </span>
-                <span  v-has="'main_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
-                  <i class="nz-icon nz-icon-replay"></i>
-                </span>
-                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
-                  <i class="nz-icon nz-icon-maxview"></i>
-                 </span>
-                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
-              </span>
-            </span>
-            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
-              <li  @click="editChart" class="el-dropdown-menu__item">
-                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
-              <li  v-has="'main_delete'" class="el-dropdown-menu__item" @click="removeChart">
-                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
-              <li  v-has="'main_add'" class="el-dropdown-menu__item" @click="duplicate">
-                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'main_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
-                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
-            </ul>
-          </el-dropdown>
-        </div>
-        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
-              <div style="height: 100%;" v-html="text" ></div>
-            </el-scrollbar>
-          </div>
-        </div>
-        <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
-                   :visible.sync="screenModal"
-                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
-          <div slot="title">
-            <span class="nz-dialog-title">{{data.name}}</span>
-          </div>
-          <div class="rich-text-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
-                <div style="height: 100%;" v-html="screenText" ></div>
-              </el-scrollbar>
-            </div>
-          </div>
-          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
-        </el-dialog>
-      </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-import loading from '../common/loading'
-import 'quill/dist/quill.snow.css'
-import chartDataList from '@/components/common/mixin/chartDataList'
-export default {
-  name: 'chartSingleStat',
-  components: {
-    loading: loading
-  },
-  props: {
-    chartData: {
-      type: Object
-    },
-    // 看板id
-    panelId: {
-      type: Number,
-      default: 0
-    },
-    editChartId: {
-      type: String,
-      default: 'editChartId'
-    },
-    chartIndex: {
-      type: Number,
-      default: 0
-    },
-    from: { type: String },
-    isLock: { type: Boolean, default: false }
-  },
-  mixins: [chartDataList],
-  data () {
-    return {
-      data: {}, // 该图表信息,chartItem
-      noData: false,
-      unit: {},
-      text: '', // 保存信息
-      screenText: '', // 全屏数据
-      loading: Object,
-      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-      firstLoad: false, // 是否第一次加载
-      screenModal: false,
-      firstShow: false, // 默认不显示操作按钮,
-      caretShow: false,
-      dragTitleShow: false,
-      dropdownMenuShow: false,
-      divFirstShow: false
-    }
-  },
-  created () {
-  },
-  computed: {},
-  watch: {
-    dropdownMenuShow (n) {
-      this.$emit('dropmenu-change', n)
-    }
-  },
-  methods: {
-    startResize (e) {
-      const vm = this
-      this.$chartResizeTool.start(vm, this.data, e)
-    },
-    startLoading (area) {
-      if (area === 'screen') {
-        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
-      } else {
-        // this.showLoading = true;
-        this.$refs['localLoading' + this.chartIndex].startLoading()
-      }
-    },
-    endLoading (area) {
-      if (area === 'screen') {
-        // this.showLoadingScreen = false;
-        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
-      } else {
-        // this.showLoading = false;
-        this.$refs['localLoading' + this.chartIndex] && this.$refs['localLoading' + this.chartIndex].endLoading()
-      }
-    },
-    showLoad (chartItem) {
-      this.$nextTick(() => {
-        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
-        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-        chartBox.style.height = `${height - this.chartSpaceHeight}px`
-        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
-        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
-      })
-      this.startLoading()
-      this.divFirstShow = true
-    },
-    // 重新请求数据 刷新操作-local
-    refreshChart () {
-      this.dropdownMenuShow = false
-      this.startLoading()
-      this.firstShow = false
-      this.$emit('on-refresh-data', this.data.id)
-    },
-    // 编辑图表
-    editChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-edit-chart-block', this.data.id)
-    },
-    // 删除该图表
-    removeChart () {
-      this.dropdownMenuShow = false
-      this.$emit('on-remove-chart-block', this.data.id)
-    },
-    clickos () {
-      this.dropdownMenuShow = false
-    },
-    clearChart () {
-      this.data = {}
-    },
-    duplicate () {
-      this.dropdownMenuShow = false
-      this.$emit('on-duplicate-chart-block', this.data.id)
-    },
-    // 全屏查看
-    showAllScreen () {
-      this.dropdownMenuShow = false
-      this.screenModal = true
-    },
-    resize (chartItem) {
-      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
-    },
-    // 设置数据, filter区分
-    setData (chartItem, seriesItem, panelId, filter, area) {
-      this.$nextTick(() => {
-        this.resize(chartItem)
-      })
-      this.divFirstShow = true
-
-      this.firstShow = true // 展示操作按键
-
-      this.panelIdInner = panelId
-      this.data = chartItem
-      this.text = chartItem.param.text
-      this.screenText = chartItem.param.text
-      this.endLoading()
-    }
-  },
-  mounted () {
-    this.firstLoad = false
-  },
-  beforeDestroy () {
-    this.clearChart()
-  }
-}
-</script>

nezha-fronted/src/components/common/alert/alertDaysInfo.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="alert-days-info">
-<!--    {{timestampStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
+<!--    {{utcTimeToTimezoneStr(item.time, 'YYYY-MM-DD')}} {{item.P1+' '+item.P2+' '+item.P3}}-->
     <div v-for="item in alertDaysData" :key="item.time" :style="showPriority(item)" @mouseenter="tooltipHover(item,true, $event)" @mouseleave="tooltipHover(item,false, $event)">
       <div v-if="item.tooltipShow" class="alert-days-info-tooltip" :style="{left: item.position.left + 'px',top:item.position.top + 'px'}">
-        <div class="tooltip-title severity-time">{{timestampStr(item.time, dateFormatStr)}}</div>
+        <div class="tooltip-title severity-time">{{utcTimeToTimezoneStr(item.time, dateFormatStr)}}</div>
         <div v-for="(severity,index) in severityDataWeight" :key="index" class="severity-info">
           <div class="severity-block" :style="{background: severity.color}"></div>
           <div class="severity-name">{{severity.name}}</div>

nezha-fronted/src/components/common/alert/alertLabel3.vue

@@ -0,0 +1,874 @@
+<template>
+  <div
+    :class="calcHeight(that.position, that)"
+    :style="calcPosition(that.position, that)"
+    class="alert-label__border"
+    ref="alertLabels"
+  >
+    <div class="alert-label-header-title3">
+      <div
+        class="alert-label-header-circle"
+        :style="`background: ${alertColor}`"
+      >
+        <i class="nz-icon" :class="selectIcon(type)"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+      </div>
+    </div>
+    <div
+      class="alert-label-info"
+      v-if="type === 'asset'"
+      v-my-loading="loading"
+    >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
+      </div>
+       <!-- <div class="alert-label-box name-labe">
+        <div class="alert-label-title">Name</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
+      </div> -->
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.manageIp") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.manageIp
+              ? alertLabelData.manageIp
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.type") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.type && alertLabelData.type.name
+              ? alertLabelData.type.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.state && alertLabelData.state.name
+              ? alertLabelData.state.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Ping</div>
+        <div class="alert-label-value">
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 1,
+              'red-bg':
+                alertLabelData &&
+                alertLabelData.pingInfo &&
+                alertLabelData.pingInfo.status === 0,
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData">{{
+            alertLabelData &&
+            alertLabelData.pingInfo &&
+            alertLabelData.pingInfo.rtt
+              ? alertLabelData.pingInfo.rtt + "ms"
+              : ""
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.dc") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.dc && alertLabelData.dc.name
+              ? alertLabelData.dc.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.cabinet &&
+            alertLabelData.cabinet.name
+              ? alertLabelData.cabinet.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.brand") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.brand && alertLabelData.brand.name
+              ? alertLabelData.brand.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.model") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.model && alertLabelData.model.name
+              ? alertLabelData.model.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'module'"
+      v-my-loading="loading"
+    >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.Name ? alertLabelData.Name : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.project") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.project &&
+            alertLabelData.project.name
+              ? alertLabelData.project.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("asset.endpoint") }}</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'project'"
+      v-my-loading="loading"
+    >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.module") }}</div>
+        <div class="alert-label-value">
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.moduleNum
+              ? alertLabelData.moduleNum
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">Endpoint</div>
+        <div class="alert-label-value">
+          <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.endpointNum
+              ? alertLabelData.endpointNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />
+          <span>{{
+            alertLabelData && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.remark") }}</div>
+        <div class="alert-label-value alert-label-remark">
+          {{
+            alertLabelData && alertLabelData.remark
+              ? alertLabelData.remark
+              : "--"
+          }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="alert-label-info"
+      v-if="type === 'endpoint'"
+      v-my-loading="loading"
+    >
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.project") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData &&
+            alertLabelData.project &&
+            alertLabelData.project.name
+              ? alertLabelData.project.name
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.module") }}</div>
+        <div class="alert-label-value">
+          <i
+            style="cursor: pointer"
+            class="nz-icon nz-icon-overview-module monitorColor"
+          />&nbsp;
+          <span>{{
+            alertLabelData &&
+            alertLabelData.module &&
+            alertLabelData.module.name
+              ? alertLabelData.module.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          ></i
+          >&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.asset.name
+              ? alertLabelData.asset.name
+              : "--"
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value">
+          <span style="width: auto">
+            <span class="endpoint-cell-left"
+              ><i class="nz-icon nz-icon-Metrics active" />
+              {{ $t("project.endpoint.metrics") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[0].state === 0"
+            >
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[0].state === 1
+              "
+            >
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <span style="width: auto">
+            <span class="endpoint-cell-left" style="margin-left: 10px"
+              ><i class="nz-icon nz-icon-logs active" />
+              {{ $t("project.endpoint.logs") }}
+            </span>
+            <span
+              v-if="alertLabelData && alertLabelData.configs[1].state === 0"
+            >
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span
+              v-else-if="
+                alertLabelData && alertLabelData.configs[1].state === 1
+              "
+            >
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="alertLabelData && alertLabelData.configs[1].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="alert-label-info" v-if="type === 'dc'" v-my-loading="loading">
+      <div class="alert-label-box">
+        <div class="alert-label-title">ID</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.id ? alertLabelData.id : "--" }}
+        </div>
+      </div>
+       <div class="alert-label-box name-labe">
+        <div class="alert-label-title">{{$t('overall.name')}}</div>
+        <div class="alert-label-value">
+          {{ alertLabelData && alertLabelData.name ? alertLabelData.name : "--" }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.location") }}</div>
+        <div class="alert-label-value">
+          {{
+            alertLabelData && alertLabelData.location && alertLabelData.location
+              ? alertLabelData.location
+              : "--"
+          }}
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.cabinet") }}</div>
+        <div class="alert-label-value">
+          <i
+            v-if="alertLabelData"
+            class="nz-icon nz-icon-cabinet monitorColor"
+            :class="
+              alertLabelData && alertLabelData.cabinetNum > 0
+                ? 'color23BF9A'
+                : 'colorEF7458'
+            "
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.cabinetNum
+              ? alertLabelData.cabinetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.asset") }}</div>
+        <div class="alert-label-value">
+          <i
+            class="nz-icon nz-icon-overview-project monitorColor color23BF9A"
+          />&nbsp;
+          <span>{{
+            alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum
+              ? alertLabelData.assetNum
+              : 0
+          }}</span>
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.alert") }}</div>
+        <div class="alert-label-value" v-if="alertLabelData">
+          <i
+            :class="alertLabelData.alertNum ? 'red' : 'green'"
+            class="nz-icon nz-icon-overview-alert vertical-align-top;"
+            @mouseenter="tooltipHover('', true, $event)"
+            @mouseleave="tooltipHover('', false, $event)"
+          ></i>
+          <div
+            v-if="alertNumtooltipShow"
+            class="alert-days-info-tooltip"
+            :style="{ left: position.left + 'px', top: position.top + 'px' }"
+          >
+            <div class="tooltip-title">
+              {{ $t("project.topology.alert") }}({{ $t("asset.pingActive") }})
+            </div>
+            <div class="severity-info" style="justify-content: space-between">
+              <div class="severity-name">{{ $t("overall.result.total") }}</div>
+              <div class="severity-value">{{ alertLabelData.alertNum }}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-label-box">
+        <div class="alert-label-title">{{ $t("overall.state") }}</div>
+        <div class="alert-label-value" style="margin-left: 3px">
+          <div
+            v-if="alertLabelData"
+            :class="{
+              'green-bg': alertLabelData && alertLabelData.state === 'ON',
+              'red-bg': alertLabelData && alertLabelData.state === 'OFF',
+            }"
+            class="active-icon"
+          ></div>
+          <span v-if="alertLabelData && alertLabelData.state === 'ON'">{{
+            $t("overall.enabled")
+          }}</span>
+          <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{
+            $t("overall.disabled")
+          }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import trendMixin from './trendMixins'
+
+export default {
+  name: 'alertLabel',
+  mixins: [trendMixin],
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0,
+      boxWidth: 0,
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
+    }
+  },
+  watch: {
+    id: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    },
+    that: {
+      immediate: true,
+      deep: true,
+      handler (n) {}
+    },
+    LRTriangle: {
+      immediate: true,
+      deep: true,
+      handler (n) {}
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
+          }
+          const dialogHeight = dialog.getBoundingClientRect()
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList - topOffSetView}px`
+          }
+        } else {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top + topOffSet}px`
+          }
+        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        return labelPosition
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const elHeight =
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.loading = true
+      if (this.type === 'asset') {
+        this.$get('asset/asset/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'project') {
+        this.$get('monitor/project/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'module') {
+        this.$get('monitor/module/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'endpoint') {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      if (this.type === 'dc') {
+        this.$get('dc/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }
+      const weekDays = this.getWeeksTime()
+      if (this.trendTimer) {
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
+      }
+      this.trendTimer = setTimeout(() => {
+        this.trendLoading = true
+        const params = {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
+          if (!res.data) {
+            return
+          }
+          const alertDaysData = res.data.result
+            ? res.data.result[0].values
+            : []
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+          alertDaysData.forEach((item) => {
+            item.values.forEach((time) => {
+              const findItem = newWeekDays.find((days) => days.time == time[0])
+              if (findItem) {
+                findItem[item.metric.priority] = time[1]
+              }
+            })
+          })
+          setTimeout(() => {
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
+    },
+    alertActiveStr () {
+      return this.$t('overall.active')
+    },
+    alertStateStr (num) {
+      if (num == 1) {
+        return this.$t('asset.inStock')
+      } else {
+        return this.$t('asset.notInStock')
+      }
+    },
+    selectIcon (type) {
+      switch (type) {
+        case 'asset':
+          return 'nz-icon-overview-project'
+        case 'dc':
+          return 'nz-icon-Datacenter2'
+        case 'project':
+          return 'nz-icon-project'
+        case 'module':
+          return 'nz-icon-overview-module'
+        case 'endpoint':
+          return 'nz-icon-overview-endpoint'
+        case 'alertrule':
+          return 'nz-icon-Alertrule'
+      }
+      return 'nz-icon-module5'
+    },
+    returnColor (obj) {
+      let color = ''
+      if (!obj) {
+        return '#23bf9a'
+      } else {
+        this.severityDataWeight.forEach((severity) => {
+          const num = obj.find((alert) => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
+    }
+  },
+  mounted () {
+    if (this.$refs.alertLabels) {
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+    } else {
+      this.heightList = 0
+      this.boxWidth = 0
+    }
+  },
+  beforeDestroy () {}
+}
+</script>
+<style>
+</style>

nezha-fronted/src/components/common/alert/alertMessageInfo.vue

@@ -56,10 +56,10 @@
 import ChartScreenHeader from '@/components/chart/ChartScreenHeader'
 import chart from '@/components/chart/chart'
 import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from '@/components/chart/chart/tools'
-import {alertMessage as alertMessageConstant, chartType, fromRoute} from '@/components/common/js/constants'
+import { alertMessage as alertMessageConstant, chartType, fromRoute } from '@/components/common/js/constants'
 import bus from '@/libs/bus'
 import axios from 'axios'
-import chartTempData from '@/components/charts/chartTempData'
+import chartTempData from '@/components/chart/chartTempData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 import alertMessageInfoTab from '@/components/common/alert/alertMessageInfoTab'

nezha-fronted/src/components/common/alert/alertMessageInfoDetail.vue

@@ -30,6 +30,7 @@
       :id="alertLabelId"
       :that="alertLabelObj"
       :type="alertLabelType"
+      :alertTableDialog="true"
     ></alertLabel>
   </div>
 </template>

nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue

@@ -8,12 +8,14 @@
         <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
           <alertLabel
+            class="alert"
             v-if="item.key !=='alertRule'"
             :id="infoData[item.key].id"
             :that="findData2(item.key)"
             :alertTableDialog="true"
             :type="item.key"/>
           <alertRuleInfo
+            class="alert"
             v-else
             :id="infoData[item.key].id"
             :severity-data="severityData"
@@ -38,8 +40,8 @@
 <script>
 import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDetail'
 import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
-import alertLabel from '@/components/common/alert/alertLabel'
+import alertLabel from '@/components/common/alert/alertLabel3'
-import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
+import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
 // import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageInfoTab',
@@ -151,6 +153,7 @@ export default {
 }
 </script>
 
+
 <style scoped>
 
 </style>

nezha-fronted/src/components/common/alert/alertMessageInfoTimeLine.vue

@@ -1,51 +1,96 @@
 <template>
-  <div style="height: 100%;width: 100%">
+  <div style="height: 100%; width: 100%" id="alert" class="message-time-line">
     <div class="time-line-header">
-      <span>{{$t('alert.relatedAlerts')}}</span>
+      <span>{{ $t("alert.relatedAlerts") }}</span>
       <div class="scope-icon-box">
-        <div class="scope-box" v-for="item in scopeList" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)" :title="item.label">
+        <div
+          class="scope-box"
+          v-for="item in scopeList"
+          :class="item.isSelect ? 'is-select' : ''"
+          :key="item.type"
+          @click="scopeChange(item)"
+          :title="item.label"
+        >
           <i class="nz-icon" :class="selectIcon(item)" />
         </div>
       </div>
     </div>
     <el-timeline v-my-loading="loading" v-if="!noData && timeLineData.length">
       <el-timeline-item
-        v-for="(item,index) in timeLineData"
+        v-for="(item, index) in timeLineData"
         :key="item.id"
         :class="{
-          'only': timeLineData.length === 1 ,
+          only: timeLineData.length === 1,
           'has-time': item.startAt,
-          'last': index === timeLineData.length-1 && index !==0
+          last: index === timeLineData.length - 1 && index !== 0,
         }"
         :color="item.severity.color"
-        :timestamp="item.startAt?item.startAt: ''"
+        :timestamp="item.startAt ? item.startAt : ''"
-        placement="top">
+        placement="top"
-        <div >
+      >
-          <div class='margin-b-10'>
+        <div>
-            <span slot="title-icon" v-if="item['state']" style="margin-left: 5px" class="alert-message-state" :class="{'gray-bg': item['state'] == 3, 'red-bg': item['state'] == 1,'yellow-bg': item['state'] == 2}">{{$t(stateOptions.find(state=>state.value == item['state']).label)}}</span>
+          <div class="margin-b-10">
-            <span class="time-line-item-header"> {{item.alertRule.name}}</span>
-          </div>
-          <div>
-          <span v-for="(label, i) in labelsSort(JSON.parse(item.labels))" :key="i">
             <span
-              @mouseenter="labelHover(item, label.label, true, true, $event)"
+              slot="title-icon"
-              @mouseleave="labelHover(item, label.label, false, true,)">
+              v-if="item['state']"
-              <nz-alert-tag
+              style="margin-left: 5px"
-                v-if="label.label !== 'alertname' && label.label !== 'severity'" :key="label.label" :cursor-point="tagType(label.label) !== 'info'"
+              class="alert-message-state"
-                :label="label.label"
+              :class="{
-                :type="tagType(label.label)"
+                'gray-bg': item['state'] == 3,
-                style="margin: 5px 0 5px 5px;"
+                'red-bg': item['state'] == 1,
+                'yellow-bg': item['state'] == 2,
+              }"
+              >{{
+                $t(
+                  stateOptions.find((state) => state.value == item["state"])
+                    .label
+                )
+              }}</span
+            >
+            <span class="time-line-item-header">
+              {{ item.alertRule.name }}</span
+            >
+          </div>
+          <div class="alert-message-summary">{{ item.summary }}</div>
+          <div class="alert-message-startAt">
+            <span>Start time:</span>
+            <span>{{utcTimeToTimezoneStr(item.startTime)}}</span>
+            <span>Duration:</span>
+            <span>{{getDuration(item)}}</span>
+          </div>
+          <div class="alert-message-labels">
+            <span
+              v-for="(label, i) in labelsSort(JSON.parse(item.labels))"
+              :key="i"
+            >
+              <span
+                @mouseenter="labelHover(item, label.label, true, true, $event)"
+                @mouseleave="labelHover(item, label.label, false, true)"
               >
-               {{label.value}}
+                <nz-alert-tag
-              </nz-alert-tag>
+                  v-if="
+                    label.label !== 'alertname' && label.label !== 'severity'
+                  "
+                  :key="label.label"
+                  :cursor-point="tagType(label.label) !== 'info'"
+                  :label="label.label"
+                  :type="tagType(label.label)"
+                  style="margin: 5px 0 5px 5px"
+                >
+                  {{ label.value }}
+                </nz-alert-tag>
+              </span>
             </span>
-          </span>
           </div>
         </div>
       </el-timeline-item>
-      <div  v-if="timeLineData.length >= total" style="text-align: center">{{$t('overall.noMoreData')}}</div>
+      <div v-if="timeLineData.length >= total" style="text-align: center">
+        {{ $t("overall.noMoreData") }}
+      </div>
       <div v-else class="load-more-box">
-        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}</el-button>
+        <el-button size="small" @click="getTimeLineData()" :loading="loading">{{
+          $t("overall.loadMore")
+        }}</el-button>
       </div>
     </el-timeline>
     <div class="table-no-data" v-else>
@@ -65,178 +110,225 @@
 </template>
 
 <script>
-import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
+import { alertMessage as alertMessageConstant } from "@/components/common/js/constants";
-import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
+import alertMessageLabelMixin from "@/components/common/alert/alertMessageLabelMixin";
-import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import alertLabelMixin from "@/components/common/mixin/alertLabelMixin";
-
+import { calcDurationByStringTimeB } from '@/components/common/js/tools.js'
 export default {
-  name: 'alertMessageInfoTimeLine',
+  name: "alertMessageInfoTimeLine",
   props: {
     infoData: {
-      type: Object
+      type: Object,
     },
-    time: {}
+    time: {},
   },
   mixins: [alertMessageLabelMixin, alertLabelMixin],
   computed: {
-    severityData () {
+    severityData() {
-      return this.$store.getters.severityData
+      return this.$store.getters.severityData;
+    },
+    getDuration () {
+      return function (record) {
+        if (record.endAt) {
+          return calcDurationByStringTimeB(record.startTime, record.endAt)
+        }
+        return calcDurationByStringTimeB(record.startTime, this.nowTime)
+      }
     }
   },
   watch: {
     time: {
       immediate: true,
       deep: true,
-      handler (n) {
+      handler(n) {
         if (n && n.length) {
-          this.pageNo = 1
+          this.pageNo = 1;
-          this.getTimeLineData()
+          this.lastDataTime = ''
+          this.getTimeLineData();
         }
-      }
+      },
-    }
+    },
   },
-  data () {
+  data() {
     return {
       pageNo: 1,
       pageSize: 20,
-      scope: ['asset', 'datacenter', 'project', 'module', 'endpoint', 'alertrule', 'hash'],
+      scope: [
+        "asset",
+        "datacenter",
+        "project",
+        "module",
+        "endpoint",
+        "alertrule",
+        "hash",
+      ],
       timeLineData: [],
-      lastDataTime: '',
+      lastDataTime: "",
       loading: false,
-      dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
+      dateFormatStr: localStorage.getItem("nz-default-dateFormat")
+        ? localStorage.getItem("nz-default-dateFormat")
+        : "YYYY-MM-DD HH:ss:mm",
       noData: false,
       stateOptions: alertMessageConstant.states,
-      scopeList: [{
+      scopeList: [
-        key: 'asset',
+        {
-        isSelect: true,
+          key: "asset",
-        label: this.$t('overall.asset')
+          isSelect: true,
-      }, {
+          label: this.$t("overall.asset"),
-        key: 'datacenter',
+        },
-        isSelect: true,
+        {
-        label: this.$t('overall.dc')
+          key: "datacenter",
-      }, {
+          isSelect: true,
-        key: 'project',
+          label: this.$t("overall.dc"),
-        isSelect: true,
+        },
-        label: this.$t('overall.project')
+        {
-      }, {
+          key: "project",
-        key: 'module',
+          isSelect: true,
-        isSelect: true,
+          label: this.$t("overall.project"),
-        label: this.$t('overall.module')
+        },
-      }, {
+        {
-        key: 'endpoint',
+          key: "module",
-        isSelect: true,
+          isSelect: true,
-        label: this.$t('overall.endpoint')
+          label: this.$t("overall.module"),
-      },
+        },
-      {
+        {
-        key: 'alertrule',
+          key: "endpoint",
-        isSelect: true,
+          isSelect: true,
-        label: this.$t('alert.alertRule')
+          label: this.$t("overall.endpoint"),
-      }, {
+        },
-        key: 'hash',
+        {
-        isSelect: true,
+          key: "alertrule",
-        label: this.$t('overall.hash')
+          isSelect: true,
-      }
+          label: this.$t("alert.alertRule"),
+        },
+        {
+          key: "hash",
+          isSelect: true,
+          label: this.$t("overall.hash"),
+        },
       ],
       total: 20,
-      scopeChangeTimer: null
+      scopeChangeTimer: null,
-    }
+    };
   },
-  mounted () {
+  mounted() {
     // this.getTimeLineData(1)
-    const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
+    const dateFormatStr = localStorage.getItem("nz-default-dateFormat");
     if (dateFormatStr) {
-      this.dateFormatStr = dateFormatStr.split(' ')[0]
+      this.dateFormatStr = dateFormatStr.split(" ")[0];
     } else {
-      this.dateFormatStr = 'YYYY-MM-DD'
+      this.dateFormatStr = "YYYY-MM-DD";
     }
   },
   methods: {
-    getTimeLineData () {
+    getTimeLineData() {
-      this.noData = false
+      this.noData = false;
-      this.loading = true
+      this.loading = true;
       const params = {
         pageNo: this.pageNo,
         pageSize: this.pageSize,
-        scope: this.scopeList.filter(item => item.isSelect).map(item => item.key).join(','),
+        scope: this.scopeList
+          .filter((item) => item.isSelect)
+          .map((item) => item.key)
+          .join(","),
         id: this.infoData.id,
-        state: '',
+        state: "",
-        startAt: this.timezoneToUtcTimeStr(this.time[0] * 1000, 'YYYY-MM-DD HH:mm:ss'),
+        startAt: this.timezoneToUtcTimeStr(
-        endAt: this.timezoneToUtcTimeStr(this.time[1] * 1000, 'YYYY-MM-DD HH:mm:ss'),
+          this.time[0] * 1000,
-        orderBy: '-startAt'
+          "YYYY-MM-DD HH:mm:ss"
-      }
+        ),
-      this.$get('/alert/message/rel', params).then(res => {
+        endAt: this.timezoneToUtcTimeStr(
-        this.loading = false
+          this.time[1] * 1000,
-        if (res.code === 200) {
+          "YYYY-MM-DD HH:mm:ss"
-          this.total = res.data.total
+        ),
-          if (this.pageNo == 1) {
+        orderBy: "-startAt",
-            this.timeLineData = res.data.list
+      };
+      this.$get("/alert/message/rel", params)
+        .then((res) => {
+          this.loading = false;
+          if (res.code === 200) {
+            this.total = res.data.total;
+            if (this.pageNo == 1) {
+              this.timeLineData = res.data.list;
+            } else {
+              this.timeLineData.push(...res.data.list);
+            }
+            this.disposeTime(this.pageNo);
+            this.noData = false;
+            this.pageNo++;
           } else {
-            this.timeLineData.push(...res.data.list)
+            this.noData = true;
           }
-          this.disposeTime(this.pageNo)
+        })
-          this.noData = false
+        .catch(() => {
-          this.pageNo++
+          this.loading = false;
-        } else {
+          this.noData = true;
-          this.noData = true
+        });
-        }
-      }).catch(() => {
-        this.loading = false
-        this.noData = true
-      })
     },
-    disposeTime (pageNo) {
+    disposeTime(pageNo) {
-      let i = (pageNo - 1) * this.pageSize
+      let i = (pageNo - 1) * this.pageSize;
       for (i; i < this.timeLineData.length; i++) {
-        const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
+        const lastDataTime = this.utcTimeToTimezoneStr(
-        this.timeLineData[i].color = '#fa8'
+          this.timeLineData[i].startAt,
+          this.dateFormatStr
+        );
+        this.timeLineData[i].color = "#fa8";
+        this.timeLineData[i].startTime = this.timeLineData[i].startAt;
         if (this.lastDataTime !== lastDataTime) {
-          this.lastDataTime = lastDataTime
+          this.lastDataTime = lastDataTime;
-          this.timeLineData[i].startAt = lastDataTime
+          this.timeLineData[i].startAt = lastDataTime;
         } else {
-          this.timeLineData[i].startAt = ''
+          this.timeLineData[i].startAt = "";
         }
       }
     },
-    selectIcon (item) {
+    selectIcon(item) {
       switch (item.key) {
-        case 'asset' : return 'nz-icon-overview-project'
+        case "asset":
-        case 'datacenter' : return 'nz-icon-Datacenter2'
+          return "nz-icon-overview-project";
-        case 'project' : return 'nz-icon-project'
+        case "datacenter":
-        case 'module' : return 'nz-icon-overview-module'
+          return "nz-icon-Datacenter2";
-        case 'endpoint' : return 'nz-icon-overview-endpoint'
+        case "project":
-        case 'alertrule' : return 'nz-icon-Alertrule'
+          return "nz-icon-project";
-        case 'hash' : return 'nz-icon-module5'
+        case "module":
+          return "nz-icon-overview-module";
+        case "endpoint":
+          return "nz-icon-overview-endpoint";
+        case "alertrule":
+          return "nz-icon-Alertrule";
+        case "hash":
+          return "nz-icon-module5";
       }
-      return 'nz-icon-module5'
+      return "nz-icon-module5";
     },
-    scopeChange (scope) {
+    scopeChange(scope) {
       if (this.scopeChangeTimer) {
-        clearInterval(this.scopeChangeTimer)
+        clearInterval(this.scopeChangeTimer);
-        this.scopeChangeTimer = null
+        this.scopeChangeTimer = null;
       }
-      this.loading = true
+      this.loading = true;
-      const isSelectArr = this.scopeList.filter(item => item.isSelect)
+      const isSelectArr = this.scopeList.filter((item) => item.isSelect);
       if (isSelectArr.length === this.scopeList.length) {
-        this.scopeList.forEach(item => {
+        this.scopeList.forEach((item) => {
-          item.isSelect = false
+          item.isSelect = false;
-        })
+        });
-        scope.isSelect = !scope.isSelect
+        scope.isSelect = !scope.isSelect;
       } else if (isSelectArr.length === 1 && isSelectArr[0].key === scope.key) {
-        this.scopeList.forEach(item => {
+        this.scopeList.forEach((item) => {
-          item.isSelect = true
+          item.isSelect = true;
-        })
+        });
       } else {
-        scope.isSelect = !scope.isSelect
+        scope.isSelect = !scope.isSelect;
       }
       this.scopeChangeTimer = setTimeout(() => {
-        this.pageNo = 1
+        this.pageNo = 1;
-        this.getTimeLineData()
+        this.lastDataTime = ''
-      }, 100)
+        this.getTimeLineData();
-    }
+      }, 100);
-  }
+    },
-}
+  },
+};
 </script>
 
 <style scoped>
-
 </style>

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -8,11 +8,15 @@
         {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
       </div>
     </div>
-    <div class="alert-rule-info" >
+    <div class="alert-rule-nfo" >
       <div class="alert-rule-box">
         <div class="alert-rule-title">ID</div>
         <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
       </div>
+      <div class="alert-rule-box name-labe">
+        <div class="alert-rule-title">{{$t('overall.name')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
+      </div>
 <!--      <div class="alert-rule-box">-->
 <!--        <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
 <!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
@@ -77,7 +81,7 @@
 </template>
 
 <script>
-import chartDataFormat from '../../charts/chartDataFormat'
+import chartDataFormat from '../../chart/chartDataFormat'
 import trendMixins from '@/components/common/alert/trendMixins'
 export default {
   name: 'alert-rule-info',
@@ -149,7 +153,6 @@ export default {
       })
     },
     returnColor (obj) {
-      console.log(obj,  this.severityDataWeight)
       let color = ''
       if (!obj) {
         color = '#23bf9a'

nezha-fronted/src/components/common/alert/alertRuleInfo2.vue

@@ -0,0 +1,221 @@
+<template>
+  <div :style="calcPosition(that.position,that)" class="alert-label__border alert-label" v-my-loading="loading" ref="alertLabels">
+    <div class="alert-label-header-title3">
+      <div class="alert-label-header-circle" :style="`background: ${alertColor}`">
+        <i  class="nz-icon nz-icon-Alertrule"></i>
+      </div>
+      <div class="alert-label-header-name">
+        {{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
+      </div>
+    </div>
+    <div class="alert-rule-nfo" >
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">ID</div>
+        <div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
+      </div>
+      <div class="alert-rule-box name-labe">
+        <div class="alert-rule-title">{{$t('overall.name')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
+      </div>
+<!--      <div class="alert-rule-box">-->
+<!--        <div class="alert-rule-title">{{$t('alert.name')}}</div>-->
+<!--        <div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '&#45;&#45;'}}</div>-->
+<!--      </div>-->
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.type')}}</div>
+        <div class="alert-rule-value">
+          <span v-if="alertRuleData.type === 1">
+            {{$t('project.metrics.metrics')}}
+          </span>
+          <span v-else-if="alertRuleData.type === 2">
+            {{$t('overall.logs')}}
+          </span>
+          <span v-else-if="alertRuleData.type === 3">SNMP trap</span>
+          <span v-else>--</span>
+        </div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.severity')}}</div>
+        <div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
+        <div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
+        <div class="alert-rule-value" v-if="alertRuleData">
+          <i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert vertical-align-top;"  @mouseenter="tooltipHover('',true, $event)" @mouseleave="tooltipHover('',false, $event)"></i>
+          <div v-if="alertNumtooltipShow" class="alert-days-info-tooltip" :style="{left: position.left + 'px',top:position.top + 'px'}">
+            <div class="tooltip-title">{{$t('project.topology.alert')}}({{$t('asset.pingActive')}})</div>
+            <div class="severity-info" style='justify-content: space-between'>
+              <div class="severity-name">{{$t('overall.result.total')}}</div>
+              <div class="severity-value">{{alertRuleData.alertNum}}</div>
+            </div>
+          </div>
+          <alertDaysInfo
+            v-show="!trendLoading"
+            :alertDaysData="alertDaysData"
+          />
+        </div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
+        <div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
+      </div>
+      <div class="alert-rule-box">
+        <div class="alert-rule-title">{{$t('alert.state')}}</div>
+        <div class="alert-rule-value" style="margin-left: 3px">
+          <div v-if="alertRuleData.state === 1">
+            <i class="active-icon green-bg inline-block"></i>
+            {{ $t('overall.enabled') }}
+          </div>
+          <div v-else-if="alertRuleData.state === 0">
+            <i class="active-icon gray-bg inline-block"></i>
+            {{ $t('overall.disabled') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartDataFormat from '../../chart/chartDataFormat'
+import trendMixins from '@/components/common/alert/trendMixins'
+export default {
+  name: 'alert-rule-info',
+  mixins: [trendMixins],
+  props: {
+    id: {},
+    messageLoad: {},
+    detailList: Boolean,
+    that: {},
+    severityData: Array
+  },
+  data () {
+    return {
+      loading: true,
+      alertRuleData: '',
+      severityColor: '',
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      alertColor: '#23bf9a'
+    }
+  },
+  components: {
+
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        if (!position) {
+          return {
+            left: '0px',
+            top: '0px'
+          }
+        }
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        // const windowWidth = window.innerWidth
+        const boxHeight = this.$refs.alertLabels ? this.$refs.alertLabels.offsetHeight : 231
+        const windowHeight = window.innerHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        if (position.top > windowHeight / 2) {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top - boxHeight}px`
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top}px`
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    formatThreshold (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
+    },
+    trbShotShow () {
+      this.$emit('showText')
+    },
+    severityDataColor () {
+      this.severityData.forEach(item => {
+        if (this.alertRuleData.severityId === item.id) {
+          this.severityColor = item.color
+        }
+      })
+    },
+    returnColor (obj) {
+      let color = ''
+      if (!obj) {
+        color = '#23bf9a'
+        return color
+      } else {
+        this.severityDataWeight.forEach(severity => {
+          const num = obj.find(alert => alert.priority === severity.name)
+          if (num && !color && num.num > 0) {
+            color = severity.color
+          }
+        })
+        if (!color) {
+          color = '#23bf9a'
+        }
+        return color
+      }
+    }
+  },
+  mounted () {
+    this.$get('/alert/rule/' + this.id).then((res) => {
+      if (res.msg === 'success') {
+        this.loading = false
+        this.alertRuleData = res.data
+        this.severityDataColor()
+        this.alertColor = this.returnColor(res.data.alert)
+        const weekDays = this.getWeeksTime()
+        if (this.trendTimer) {
+          clearTimeout(this.trendTimer)
+          this.trendTimer = null
+        }
+        this.trendTimer = setTimeout(() => {
+          this.trendLoading = true
+          const params = {
+            type: 'total',
+            dimension: 'priority',
+            step: 'd'
+          }
+          params['rule' + 'Id'] = this.id
+          this.$get('/stat/alertMessage/trend', params).then((res) => {
+            if (!res.data) {
+              return
+            }
+            const alertDaysData = res.data.result ? res.data.result[0].values : []
+            const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+            alertDaysData.forEach(item => {
+              item.values.forEach(time => {
+                const findItem = newWeekDays.find(days => days.time == time[0])
+                if (findItem) {
+                  findItem[item.metric.priority] = time[1]
+                }
+              })
+            })
+            setTimeout(() => {
+              this.alertDaysData = newWeekDays
+              this.trendLoading = false
+            })
+          })
+        })
+      } else {
+        this.$message.error(res.msg)
+      }
+    })
+  }
+}
+
+</script>

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

@@ -38,9 +38,9 @@
         <terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-tab>
         <!-- asset列表的3个 -->
         <panel-tab-new @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
-        <alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
+        <alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
         <endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
-        <log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
+        <log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
         <assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessageSub" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
         <!--module列表的tab-->
         <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
@@ -48,9 +48,9 @@
         <panel-tab-new @getTableData="getTableData" :paramsType="'module'" v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--endpoint列表的tab-->
         <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
-        <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'Metrics'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
+        <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'Metrics'"  v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
-        <log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
+        <log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" :sign="sign+'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
-        <alertMessageTabNew  v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
+        <alertMessageTabNew  v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" :sign="sign+'alert'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
         <!--chartTemp的Tab-->
         <panel-tab-new @getTableData="getTableData"  :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
         <!--alertRule Tab-->
@@ -118,7 +118,8 @@ export default {
     obj: Object, // 关联的实体对象
     from: String, // 来自哪个页面
     tabList: Array, // 动态页签列表
-    targetTab: String // 展示哪个页签
+    targetTab: String, // 展示哪个页签
+    sign:[Number,String], //pickTime历史记录的唯一标识
   },
   watch: {
     obj: {

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

@@ -18,7 +18,7 @@
         <el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
-        <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false" :sign="sign"></pick-time>
       </template>
       <template v-slot>
         <alertMessageTable
@@ -126,7 +126,7 @@ import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
 import axios from 'axios'
 import bus from '@/libs/bus'
 import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import chart from '@/components/page/dashboard/overview/chart'
 import { alertMessage as alertMessageConstant, fromRoute } from '@/components/common/js/constants'
 import alertSilenceBox from '@/components/common/rightBox/alertSilenceBox'
@@ -149,7 +149,8 @@ export default {
     alertMessageInfo
   },
   props: {
-    from: String
+    from: String,
+    sign:[Number,String]
   },
   watch: {
     obj: {

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

@@ -27,7 +27,7 @@
           </el-option>
         </el-select>
       </el-input>
-      <pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
+      <pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :sign="sign" :use-chart-unit="false" :use-refresh="false">
         <template slot="added-text">{{$t('overall.query')}}</template>
       </pick-time>
     </template>
@@ -54,12 +54,15 @@ export default {
     nzBottomDataList,
     logTab
   },
+  props: {
+    sign:[Number,String]
+  },
   data () {
     return {
       logData: null,
       filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), this.timeFormatMain),
+        bus.timeFormate(bus.getOffsetTimezoneData(-1)),
-        bus.timeFormate(bus.getOffsetTimezoneData(), this.timeFormatMain)
+        bus.timeFormate(bus.getOffsetTimezoneData())
       ],
       expressions: [''],
       matchSymbol: '|=',
@@ -72,8 +75,8 @@ export default {
     exportLog ({ limit, descending }) {
       const params = {
         logql: this.expressions,
-        start: this.$stringTimeParseToUnix(this.filterTime[0]),
+        start: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])),
-        end: this.$stringTimeParseToUnix(this.filterTime[1]),
+        end: this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])),
         direction: descending ? 'backward' : 'forward',
         limit
       }
@@ -115,7 +118,9 @@ export default {
           if (item != '') {
             let expr = item
             this.matchContent && (expr = `${item} ${this.matchSymbol} "${this.matchContent}"`)
-            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&limit=' + limit))
+            const statTime = bus.formateTimeToTime(this.filterTime[0])
+            const endTime = bus.formateTimeToTime(this.filterTime[1])
+            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(expr) + '&start=' + this.$stringTimeParseToUnix(statTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&limit=' + limit))
           }
         })
         axios.all(requestArr).then(res => {

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

@@ -13,7 +13,7 @@
       <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
       <template v-slot:top-tool-right>
         <div v-if="from === fromRoute.asset" style="display: flex">
-          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
+          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
           <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
                   type="button" @click="addChart">
             <i class="nz-icon-create-square nz-icon"></i>
@@ -41,11 +41,14 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
         <div v-else-if="from === fromRoute.endpoint" style="display: flex">
-          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
+          <pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
           <button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
             <i class="nz-icon nz-icon-create-square"></i>
           </button>
@@ -72,6 +75,9 @@
               <el-dropdown-item v-has="'main_edit'">
                 <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
               </el-dropdown-item>
+              <el-dropdown-item v-has="'main_edit'">
+                <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-export-pdf"></i>{{ $t('overall.downloadToPdf') }}</div>
+              </el-dropdown-item>
             </template>
           </top-tool-more-options>
         </div>
@@ -146,9 +152,10 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
 export default {
   name: 'panelTabNew',
-  mixins: [subDataListMixin, detailViewRightMixin],
+  mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin],
   props: {
     from: String,
     obj: Object,
@@ -156,7 +163,8 @@ export default {
     paramsType: {
       type: String,
       default: 'dashboard'
-    }
+    },
+    sign:[Number,String]
   },
   computed: {
     chartRightBoxShow () {
@@ -172,6 +180,8 @@ export default {
   data () {
     return {
       fromRoute,
+      pdfId: 'pdfDom',
+      htmlTitle: 'panel',
       panelTabLoading: false,
       showTopBtn: false, // top按钮
       visible: false,
@@ -279,8 +289,8 @@ export default {
       this.getData(this.filter)
     },
     refreshTime (st, et) {
-      const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm')
+      const startTime = bus.timeFormate(st)
-      const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm')
+      const endTime = bus.timeFormate(et)
       this.searchTime = [startTime, endTime]
     },
     panelReloadForDel () {
@@ -485,8 +495,8 @@ export default {
         const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
         this.setSearchTime(nowTimeType.type, nowTimeType.value)
-        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
+        this.filter.start_time = bus.timeFormate(this.searchTime[0])
-        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
+        this.filter.end_time = bus.timeFormate(this.searchTime[1])
         this.filter.panelId = this.showPanel.id
         this.getData(this.filter)
         this.$store.dispatch('dispatchPanelTime', {
@@ -498,20 +508,20 @@ export default {
     /* 时间条件查询--end */
     setSearchTime (type, val) { // 设置searchTime
       if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'm')
       } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'h')
       } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
         this.$set(this.searchTime, 0, startTime)
         this.$set(this.searchTime, 1, endTime)
         this.$set(this.searchTime, 2, val + 'd')
@@ -724,6 +734,42 @@ export default {
       if (type === 'duplicate') {
         this.editChart(chartInfo, true)
       }
+    },
+    htmlToPdf () {
+      const dom = document.getElementsByClassName(this.pdfId)[0]
+      this.htmlTitle = this.obj.name || 'pdf'
+      if (dom) {
+        // dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
+        this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
+        let flag = true
+        this.showScreenLoading(true)
+        let timer = setInterval(() => {
+          flag = true
+          this.$refs.chartList.copyDataList.forEach(chart => {
+            if (chart.type !== 'group') {
+              flag = flag && chart.loaded
+            } else if (chart.collapse) {
+              chart.children.forEach(groupChart => {
+                flag = flag && groupChart.loaded
+              })
+            }
+          })
+          if (flag) {
+            clearInterval(timer)
+            timer = null
+            setTimeout(() => {
+              document.body.style.height = 'auto'
+              // document.getElementsByTagName('html')[0].style.overflow = 'visible'
+              const position = dom.getBoundingClientRect()
+              this.getPdf(dom, -1 * position.left, -1 * position.top,this.searchTime)
+              // this.getPdf(dom, 0, 0)
+            }, 2000)
+          }
+        }, 200)
+      } else {
+        this.showScreenLoading(false)
+      }
     }
   },
   mounted () {

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

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import chartDataFormat from '../charts/chartDataFormat'
+import chartDataFormat from '../chart/chartDataFormat'
 export default {
   name: 'chartUnit',
   model: {

nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue

@@ -108,7 +108,7 @@ export default {
           label: this.$t('project.endpoint.state'),
           prop: 'state',
           show: true,
-          minWidth: 200,
+          minWidth: 200
         }
         // {
         //   label: this.$t('project.endpoint.status'),

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -200,7 +200,7 @@ export default {
           endpointTabTitle: [
             { prop: 'panelTab', name: this.$t('overall.detail') },
             { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
-            { prop: 'endpointQuery', name: this.$t('project.metrics.metrics')  },
+            { prop: 'endpointQuery', name: this.$t('project.metrics.metrics') },
             { prop: 'log', name: this.$t('overall.logs') }
           ]
         },

nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue

@@ -91,7 +91,7 @@
 
 <script>
 import lodash from 'lodash'
-import chartDataFormat from '@/components/charts/chartDataFormat'
+import chartDataFormat from '@/components/chart/chartDataFormat'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
 export default {
   name: 'searchItemInfo',

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

@@ -34,6 +34,7 @@ export function getHexagon (key) {
 const topologyCache = {}
 
 export function getTopology (key) {
+  // console.log(topologyCache, 'topologyCache')
   return topologyCache[`topology${key}`]
 }
 
@@ -41,6 +42,18 @@ export function setTopology (key, value) {
   topologyCache[`topology${key}`] = value
 }
 
+// const topologyImgList = localStorage.getItem('nz-imgList') ? JSON.parse(localStorage.getItem('nz-imgList')) : {}
+
+export function getTopologyImg (key) {
+  // console.log(topologyCache, 'topologyCache')
+  // console.log(localStorage.getItem('nz-img-' + key), !localStorage.getItem('nz-img-' + key))
+  return localStorage.getItem('nz-img-' + key)
+}
+
+export function setTopologyImg (key, img) {
+  localStorage.setItem('nz-img-' + key, img)
+}
+
 export function setHexagon (key, value) {
   hexagonCache[`hexagon${key}`] = value
 }

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

@@ -0,0 +1,26 @@
+/* 处理legend的别名 */
+export function dealLegendAlias (legend, aliasExpression) {
+  if (/\{\{.+\}\}/.test(aliasExpression)) {
+    const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
+      const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+      // if (!legend) {
+      //   return label
+      // }
+      const reg = new RegExp(label + '=".+?"')
+      let value = null
+      if (reg.test(legend)) {
+        const find = legend.match(reg)[0]
+        value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+      }
+      return value || ''
+    })
+    return labelValue
+  } else {
+    if (!aliasExpression) {
+      return legend
+      // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+      // return result
+    }
+    return aliasExpression
+  }
+}

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

@@ -4,7 +4,7 @@ import { Loading } from 'element-ui' // 此处根据你实际使用的框架的l
 let loading
 export default {
   install (Vue, options) {
-    Vue.prototype.getPdf = function (dom, x, y) { // 传入需要导出的 dom
+    Vue.prototype.getPdf = function (dom, x, y, time) { // 传入需要导出的 dom
       const title = this.htmlTitle || 'pdf'
       // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
       // 只下载id为pdfDom的内容
@@ -21,6 +21,7 @@ export default {
       }).then(function (canvas) {
         loading.close()
         document.body.style.height = '100%'
+        document.getElementsByClassName('left-menu')[0].style.height = '100%'
         document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         const contentWidth = canvas.width
         const contentHeight = canvas.height
@@ -30,35 +31,53 @@ export default {
         // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
         const imgWidth = 595.28
         const imgHeight = 592.28 / contentWidth * contentHeight
-        const pageData = canvas.toDataURL('image/jpeg', 1.0)
+        // canvas.paddingTop = '30px'
-        const PDF = new JsPDF('', 'pt', 'a4')
+        const pageDataImg = canvas.toDataURL('image/jpeg', 1.0)
-        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+        const img = new Image()
-        // 当内容未超过pdf一页显示的范围，无需分页
+        img.src = pageDataImg
-        if (leftHeight < pageHeight) {
+        img.onload = function () {
-          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          const canvasBox = document.createElement('canvas')
-        } else {
+          canvasBox.setAttribute('width', contentWidth + 30 + '')
-          while (leftHeight > 0) {
+          canvasBox.setAttribute('height', contentHeight + '')
-            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+          const ctx = canvasBox.getContext('2d')
-            leftHeight -= pageHeight
+          ctx.fillStyle = '#fff'
-            position -= 841.89
+          ctx.fillRect(0, 0, contentWidth + 30, contentHeight)
-            if (leftHeight > 0) {
+          ctx.font = '12pt Roboto-Regular'
-              PDF.addPage()
+          ctx.strokeStyle = '#333333'
+          ctx.fillStyle = '#333333'
+          ctx.fillText(time[0] + ' - ' + time[1], 10, 24)
+          ctx.drawImage(this, 0, 30, contentWidth, contentHeight)
+          const pageData = canvasBox.toDataURL('image/jpeg', 1.0)
+          const PDF = new JsPDF('', 'pt', 'a4')
+          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+          // 当内容未超过pdf一页显示的范围，无需分页
+          if (leftHeight < pageHeight) {
+            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
+          } else {
+            while (leftHeight > 0) {
+              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+              leftHeight -= pageHeight
+              position -= 841.89
+              if (leftHeight > 0) {
+                PDF.addPage()
+              }
             }
           }
+          PDF.save(title + '.pdf')
         }
-        PDF.save(title + '.pdf')
       })
     }
     Vue.prototype.showScreenLoading = function (flag) {
       if (flag) {
         loading = Loading.service({
           lock: true,
+          customClass: 'export-pdf-mask',
           text: this.$t('overall.downloadProgress') + 'pdf...',
           background: 'rgba(0,0,0,.3)'
         })
       } else {
         if (loading) {
-          loading.close()
+          // loading.close()
           document.body.style.height = '100%'
           document.getElementsByTagName('html')[0].style.overflow = 'hidden'
         }

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

@@ -4,7 +4,7 @@ import i18n from '../i18n'
 import bus from '@/libs/bus'
 import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown','no-close'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind (el, binding, vnode) {

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

@@ -200,14 +200,12 @@ export function arrLength (rule, value, callback) { // 校验数组
   }
 }
 export function datePicker (rule, value, callback) { // 校验时间选择
-  if(value[0]&&value[1]){
+  if (value[0] && value[1]) {
     callback()
-  }else{
+  } else {
     callback(new Error(vm.$t('validate.required')))
   }
-   
+}
-  }
-
 
 export function sysObjectIdInput (rule, value, callback) {
   const sysId = /^(\d{1,9}\.){0,}[\d]+$/
@@ -223,3 +221,10 @@ export function sysObjectIdInput (rule, value, callback) {
 export function longAndLat (rule, value, callback) { // 校验经纬度
 
 }
+export function dataValidate () {
+  // const time = '([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$'
+  // const YMD = '/((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))'
+  // const DMY = '/((^(3[01]|[12][0-9]|0[1-9])(\\/)(10|12|0[13578])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(30|[12][0-9]|0[1-9])(\\/)(11|0[469])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(2[0-8]|1[0-9]|0[1-9])(\\/)(02)(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(29)(\\/)(02)(\\/)([2468][048]00)$)|(^(29)(\\/)(02)(\\/)([3579][26]00)$)|(^(29)(\\/)(02)(\\/)([1][89][0][48])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][0][48])$)|(^(29)(\\/)(02)(\\/)([1][89][2468][048])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][2468][048])$)|(^(29)(\\/)(02)(\\/)([1][89][13579][26])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][13579][26])$))/'
+  // const MDY =
+}
+

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

@@ -23,7 +23,7 @@
           {{$t('login.verifyContent')}}
         </div>
         <div class="login-foot">
-          <button  v-if="!verifyShow" id="login" v-my-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">Login</button>
+          <button  v-if="!verifyShow" id="login" v-my-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
           <button  v-if="verifyShow" id="verify" v-my-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="verify">{{$t("login.verify")}}</button>
         </div>
         <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
@@ -132,10 +132,10 @@ export default {
         token: '',
         valid: true
       },
+      lang: this.$store.getters.getLanguage || 'en',
       uploadFileList: [],
       uploadFile: { file: '', path: '', uuid: '' },
       loading: false,
-      lang: 'en', // en/cn
       verifyShow: false,
       theme: 1,
       authBindShow: false,
@@ -373,6 +373,11 @@ export default {
       })
     }
   },
+  watch: {
+    lang (n) {
+      this.$i18n.locale = this.lang
+    }
+  },
   mounted () {
     this.$i18n.locale = this.lang
     document.getElementById('usernameInput').focus()