CN-229 Cyptocurrency--挖矿事件统计新图表开发

CN-230 Cyptocurrency--矿机所属单位新图表开发
2021-12-13 10:16:41 +08:00
parent 88b3cf1351
commit cbcd837031
4 changed files with 796 additions and 269 deletions
--- a/src/components/charts/ChartTableActiveIp.vue
+++ b/src/components/charts/ChartTableActiveIp.vue
@@ -22,8 +22,8 @@
      >
        <el-table-column>
          <template #default="{ row }">
-              <div class="header__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
-             <div class="content__name" >
+              <div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
+             <div class="active-ip__content" >
               {{row['name']}}
             </div>
          </template>
@@ -85,7 +85,7 @@ export default {

 <style>

-  .header__icon {
+  .active-ip__icon {
    overflow: hidden;
    position: absolute;
    top: 8px;
@@ -103,7 +103,7 @@ export default {
  .ip-green {
    color: #23BF9A;
  }
-  .content__name {
+  .active-ip__content {
    position: absolute;
    top: 7px;
    left: 35px;
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -11,9 +11,13 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
  '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
+export const chartBarColor = [ '#0F8AB2', '#57CBAC']
 export function getChartColor (index) {
  return chartColor[index % chartColor.length]
 }
+export function getCharBartColor (index) {
+  return chartBarColor[index % chartBarColor.length]
+}
 const line = {
  tooltip: {
    appendToBody: true,
@@ -464,11 +468,116 @@ const ipOpenPortBar = {
    barCategoryGap: '10%'
  }]
 }
+const categoryBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: categoryVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'category',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  grid: {
+    top: 20,
+    left: 10,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+        color:  function(params) {
+          return getCharBartColor([params.dataIndex])
+        },
+    }
+  }]
+}
+
+const timeBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: timeVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'time',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      interval: 0,
+      //rotate: -40, //设置日期显示样式（倾斜度）
+      formatter: function (value) {//在这里写你需要的时间格式
+        var t_date = new Date(value);
+        return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':');
+      }
+    }
+  },
+  grid: {
+    top: 20,
+    left: 25,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      formatter: function (value, index, a, b) {
+        return unitConvert(value, unitTypes.number).join(' ')
+      }
+    },
+    minInterval: 1
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+      color:  function(params) {
+        return getCharBartColor([params.dataIndex])
+      },
+    }
+  }]
+}
 const typeOptionMappings = [
  { value: 11, option: line }, // 常规折线图
  { value: 12, option: lineWithStatistics }, // 带统计表格的折线图
  { value: 13, option: lineStack }, // 折线堆叠图
  { value: 22, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
+  { value: 23, option: timeBar }, // 矿机所属单位
+  { value: 24, option: categoryBar }, // 挖矿事件统计
  { value: 31, option: pieWithTable }, // 常规折线图
  { value: 33, option: ipHostedDomain }, // ip详情--托管域名
  { value: 34, option: ipHostedDomain }, // app详情--相关域名
@@ -499,6 +608,14 @@ export function getTypeCategory (type) {
    return typeCategory.TABS
  }
 }
+/* 柱状图:挖矿事件统计(time类型柱状图) */
+export function isEchartsTimeBar (type) {
+  return type == 23
+}
+/* 柱状图:矿机所属单位(category类型柱状图) */
+export function isEchartsCategoryBar (type) {
+  return type == 24
+}
 /* 饼图柱状图等 */
 export function isEcharts (type) {
  return type >= 11 && type <= 50
@@ -631,3 +748,69 @@ function axiosFormatter (params) {
  str += '</div>'
  return str
 }
+
+export function timeVerticalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[1], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+
+export function timeHorizontalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[1]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[0], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+export function categoryHorizontalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.data[1]+': ' + item.data[0]
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+export function categoryVerticalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.data[0]+': ' + item.data[1]
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
--- a/src/components/rightBox/settings/ChartBox.vue
+++ b/src/components/rightBox/settings/ChartBox.vue
@@ -54,13 +54,13 @@
                       size="small"
                       @change="getChartData">

-                <el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('cyptocurrency.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
-                <el-option :key="panelTypeAndRouteMapping.appEntityDetail" :label="$t('entities.appEntityDetail')" :value="panelTypeAndRouteMapping.appEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('overall.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
+              <el-option :key="panelTypeAndRouteMapping.appEntityDetail" :label="$t('entities.appEntityDetail')" :value="panelTypeAndRouteMapping.appEntityDetail"></el-option>

            </el-select>
          </el-form-item>
@@ -131,269 +131,282 @@
 </template>

 <script>
-import rightBoxMixin from '@/mixins/rightBox'
-import { get, post, put } from '@/utils/http'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api } from '@/utils/api'
-import { VAceEditor } from 'vue3-ace-editor'
-import 'ace-builds/src-noconflict/mode-javascript'
-import 'ace-builds/src-noconflict/mode-json'
-import 'ace-builds/src-noconflict/theme-chrome'
+  import rightBoxMixin from '@/mixins/rightBox'
+  import { get, post, put } from '@/utils/http'
+  import { panelTypeAndRouteMapping } from '@/utils/constants'
+  import { api } from '@/utils/api'
+  import { VAceEditor } from 'vue3-ace-editor'
+  import 'ace-builds/src-noconflict/mode-javascript'
+  import 'ace-builds/src-noconflict/mode-json'
+  import 'ace-builds/src-noconflict/theme-chrome'

-export default {
-  name: 'ChartBox',
-  mixins: [rightBoxMixin],
-  components: {
-    VAceEditor
-  },
-  data () {
-    return {
-      url: api.chart,
-      loginName: localStorage.getItem('cn-username'),
-      panelTypeAndRouteMapping: panelTypeAndRouteMapping,
-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        type: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        panel_id: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        x: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        y: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        w: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        h: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
-      rules2: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        type: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        panel_id: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        x: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        y: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        w: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        h: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
-      chartData: [],
-      options: [
-        {
-          value: 1,
-          label: 'map-1',
-          remark: '流量流向地图-连线'
-        },
-        {
-          value: 2,
-          label: 'map-2',
-          remark: '地图-色块'
-        }, {
-          value: 3,
-          label: 'map-3',
-          remark: '地图-点'
-        },
-        {
-          value: 4,
-          label: 'map-4',
-          remark: '地图-点'
-        }, {
-          value: 11,
-          label: 'line-1',
-          remark: '折线图-常规'
-        },
-        {
-          value: 61,
-          label: 'table-1',
-          remark: '表格'
-        }, {
-          value: 62,
-          label: 'table-2',
-          remark: 'DNS记录'
-        }, {
-          value: 63,
-          label: 'table-3',
-          remark: '挖矿活跃ip'
-        }, {
-          value: 31,
-          label: 'pie-1',
-          remark: '饼图-带联动表格'
-        }, {
-          value: 51,
-          label: 'singleValue-1',
-          remark: '单值图'
-        },
-        {
-          value: 91,
-          label: 'tab-container',
-          remark: 'tab标签(容器)'
-        }, {
-          value: 92,
-          label: 'tab-item',
-          remark: 'tab标签(标签页)'
-        },
-        {
-          value: 93,
-          label: 'title',
-          remark: '标题'
-        }, {
-          value: 94,
-          label: 'group',
-          remark: '组'
-        },
-        {
-          value: 12,
-          label: 'line-2',
-          remark: '折线图-带统计'
-        }, {
-          value: 52,
-          label: 'singleValue-2',
-          remark: '详情单值图'
-        },
-        {
-          value: 53,
-          label: 'singleValue-3',
-          remark: '单值图'
-        }, {
-          value: 13,
-          label: 'line-3',
-          remark: '折线图-堆叠面积'
-        },
-        {
-          value: 21,
-          label: 'bar-1',
-          remark: '柱状图'
-        }, {
-          value: 22,
-          label: 'bar-2',
-          remark: '开放端口'
-        },
-        {
-          value: 32,
-          label: 'pie-2',
-          remark: '饼图-常规'
-        }, {
-          value: 33,
-          label: 'pie-3',
-          remark: '托管域名'
-        },
-        {
-          value: 34,
-          label: 'pie-4',
-          remark: '相关域名'
-        }, {
-          value: 42,
-          label: 'relation-2',
-          remark: '关系图谱'
-        },
-        {
-          value: 43,
-          label: 'relation-3',
-          remark: '访问链路图'
-        },
-        {
-          value: 82,
-          label: 'base-2',
-          remark: 'APP基本信息'
-        }, {
-          value: 83,
-          label: 'list-1',
-          remark: 'Whois'
-        },
-        {
-          value: 84,
-          label: 'list-2',
-          remark: 'DNS记录'
-        }
-      ]
-    }
-  },
-  setup () {
-  },
-  mounted () {
-    if (this.editObject.id) {
-      this.getChartData(this.editObject.panelId)
-    }
-  },
-  watch: {
-    'editObject.panelId': function (newValue, oldValue) {
-      this.editObject.pid = ''
-    }
-  },
-  methods: {
-    isCurrentUser (username) {
-      return localStorage.getItem('cn-username') === username
+  export default {
+    name: 'ChartBox',
+    mixins: [rightBoxMixin],
+    components: {
+      VAceEditor
    },
-    /* 密码失去焦点 检验确认密码 */
-    pinBlur () {
-      if (this.editObject.pin && this.editObject.pinChange) {
-        this.$refs.chartForm.validateField('pinChange')
+    data () {
+      return {
+        url: api.chart,
+        loginName: localStorage.getItem('cn-username'),
+        panelTypeAndRouteMapping: panelTypeAndRouteMapping,
+        rules: { // 表单校验规则
+          name: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          type: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          panel_id: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          x: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          y: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          w: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          h: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ]
+        },
+        rules2: { // 表单校验规则
+          name: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          type: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          panel_id: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          x: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          y: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          w: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ],
+          h: [
+            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          ]
+        },
+        chartData: [],
+        options: [
+          {
+            value: 1,
+            label: 'map-1',
+            remark: '流量流向地图-连线'
+          },
+          {
+            value: 2,
+            label: 'map-2',
+            remark: '地图-色块'
+          }, {
+            value: 3,
+            label: 'map-3',
+            remark: '地图-点'
+          },
+          {
+            value: 4,
+            label: 'map-4',
+            remark: '地图-点'
+          }, {
+            value: 11,
+            label: 'line-1',
+            remark: '折线图-常规'
+          },
+          {
+            value: 61,
+            label: 'table-1',
+            remark: '表格'
+          }, {
+            value: 62,
+            label: 'table-2',
+            remark: 'DNS记录'
+          }, {
+            value: 63,
+            label: 'table-3',
+            remark: '挖矿活跃ip'
+          }, {
+            value: 31,
+            label: 'pie-1',
+            remark: '饼图-带联动表格'
+          }, {
+            value: 51,
+            label: 'singleValue-1',
+            remark: '单值图'
+          },
+          {
+            value: 91,
+            label: 'tab-container',
+            remark: 'tab标签(容器)'
+          }, {
+            value: 92,
+            label: 'tab-item',
+            remark: 'tab标签(标签页)'
+          },
+          {
+            value: 93,
+            label: 'title',
+            remark: '标题'
+          }, {
+            value: 94,
+            label: 'group',
+            remark: '组'
+          },
+          {
+            value: 12,
+            label: 'line-2',
+            remark: '折线图-带统计'
+          }, {
+            value: 52,
+            label: 'singleValue-2',
+            remark: '详情单值图'
+          },
+          {
+            value: 53,
+            label: 'singleValue-3',
+            remark: '单值图'
+          }, {
+            value: 13,
+            label: 'line-3',
+            remark: '折线图-堆叠面积'
+          },
+          {
+            value: 21,
+            label: 'bar-1',
+            remark: '柱状图'
+          }, {
+            value: 22,
+            label: 'bar-2',
+            remark: '开放端口'
+          }, {
+            value: 23,
+            label: 'bar-3',
+            remark: '挖矿事件统计(time类型柱状图)'
+          }, {
+            value: 24,
+            label: 'bar-4',
+            remark: '矿机所属单位(category类型柱状图)'
+          },
+          {
+            value: 32,
+            label: 'pie-2',
+            remark: '饼图-常规'
+          }, {
+            value: 33,
+            label: 'pie-3',
+            remark: '托管域名'
+          },
+          {
+            value: 34,
+            label: 'pie-4',
+            remark: '相关域名'
+          }, {
+            value: 42,
+            label: 'relation-2',
+            remark: '关系图谱'
+          },
+          {
+            value: 43,
+            label: 'relation-3',
+            remark: '访问链路图'
+          },
+          {
+            value: 82,
+            label: 'base-2',
+            remark: 'APP基本信息'
+          }, {
+            value: 83,
+            label: 'list-1',
+            remark: 'Whois'
+          },
+          {
+            value: 84,
+            label: 'list-2',
+            remark: 'DNS记录'
+          },
+          {
+            value: 85,
+            label: 'list-3',
+            remark: '近期挖矿事件'
+          }
+        ]
      }
    },
-    save () {
-      if (this.blockOperation.save) { return }
-      this.blockOperation.save = true
-
-      this.$refs.chartForm.validate((valid) => {
-        if (valid) {
-          if (this.editObject.id) {
-            put(this.url, this.editObject).then(res => {
-              this.blockOperation.save = false
-              if (res.code === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
-          } else {
-            post(this.url, this.editObject).then(res => {
-              this.blockOperation.save = false
-              if (res.code === 200) {
-                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-                this.esc(true)
-              } else {
-                this.$message.error(res.msg)
-              }
-            })
-          }
-        } else {
-          this.blockOperation.save = false
-          return false
-        }
-      })
+    setup () {
    },
-    async getChartData (value) {
-      await get('/visual/chart?panelId=' + value).then(response => {
-        if (response.code === 200) {
-          this.chartData = response.data.list
+    mounted () {
+      if (this.editObject.id) {
+        this.getChartData(this.editObject.panelId)
+      }
+    },
+    watch: {
+      'editObject.panelId': function (newValue, oldValue) {
+        this.editObject.pid = ''
+      }
+    },
+    methods: {
+      isCurrentUser (username) {
+        return localStorage.getItem('cn-username') === username
+      },
+      /* 密码失去焦点 检验确认密码 */
+      pinBlur () {
+        if (this.editObject.pin && this.editObject.pinChange) {
+          this.$refs.chartForm.validateField('pinChange')
        }
-      })
+      },
+      save () {
+        if (this.blockOperation.save) { return }
+        this.blockOperation.save = true

-      // this.$set(this.editObject, 'pid', '')
+        this.$refs.chartForm.validate((valid) => {
+          if (valid) {
+            if (this.editObject.id) {
+              put(this.url, this.editObject).then(res => {
+                this.blockOperation.save = false
+                if (res.code === 200) {
+                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                  this.esc(true)
+                } else {
+                  this.$message.error(res.msg)
+                }
+              })
+            } else {
+              post(this.url, this.editObject).then(res => {
+                this.blockOperation.save = false
+                if (res.code === 200) {
+                  this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                  this.esc(true)
+                } else {
+                  this.$message.error(res.msg)
+                }
+              })
+            }
+          } else {
+            this.blockOperation.save = false
+            return false
+          }
+        })
+      },
+      async getChartData (value) {
+        await get('/visual/chart?panelId=' + value).then(response => {
+          if (response.code === 200) {
+            this.chartData = response.data.list
+          }
+        })
+
+        // this.$set(this.editObject, 'pid', '')
+      }
    }
  }
-}
 </script>
 <style lang="scss">
  .my-editor {