NEZ-420 feat:新增text类型图表

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

@@ -119,6 +119,17 @@
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
 
+        <text-chart v-if="item.type === 'text'" :key="'inner' + item.id" :ref="'editChart'+item.id"
+                    @on-refresh-data="refreshChart"
+                    @on-remove-chart-block="removeChart"
+                    @on-duplicate-chart-block="duplicateChart"
+                    @on-drag-chart="editChartForDrag"
+                    @on-edit-chart-block="editData"
+                    :panel-id="filter.panelId"
+                    :chart-data="item"
+                    :chart-index="index"
+        ></text-chart>
+
         <chart-alert-list  :ref="'editChart'+item.id"
                            :panel-id="filter.panelId"
                           :chart-index="index"
@@ -149,6 +160,7 @@
   import draggable from 'vuedraggable'
   import chartDataFormat from "./chartDataFormat";
   import chartAlertList from './chart-alert-list'
+  import textChart from './text-chart'
   // import visNetwork from './visNetwork'
   export default {
     name: 'chartList',
@@ -167,6 +179,7 @@
       chartUrl,
       chartSingleStat,
       draggable,
+      textChart
       // visNetwork,
     },
     watch:{
@@ -361,9 +374,7 @@
         }
       },
       dragPosition:function(e){
-        console.log('===',e.clientY,e.clientX);
         let odiv=e;//目标元素e.target
-        console.log('odiv====',odiv);
         //var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
         //得到点击时该容器的：
         var startY=e.clientY;
@@ -374,12 +385,10 @@
         var distX=e.clientX-odiv.offsetTop;
         document.onmousemove=function(e){
           e.preventDefault();
-          console.log('===onmousemove',e.clientY,e.clientX);
           let left=e.clientX-distX;
           let top=e.clientY-distY;
           odiv.style.top=top+'px';
           odiv.style.left=left+'px';
-          console.log('odiv====',odiv);
         };
 
         document.onmouseup=function(){
@@ -403,7 +412,6 @@
           return
         }
         const newItems = [...this.dataList];
-        console.log(newItems);
         const src = newItems.indexOf(this.dragging);
         const dst = newItems.indexOf(item);
 
@@ -574,7 +582,6 @@
         }
         //endpoint单独处理
         if (param.from == "endpoint") {
-          console.log("endpoint");
           this.dataList = [];
           // this.dataList.push({
           //   id: -8,
@@ -763,6 +770,14 @@
                 this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
                   this.filter.panelId, this.filter,'',errorMsg);
               }
+            }else if(chartItem.type == 'text'){
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, null,
+                  panelId, filter, null, filterType);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, null,
+                  panelId, filter, null,'');
+              }
             }
           }
         }else {
@@ -799,6 +814,19 @@
           return;
         }
 
+        if(chartItem.type == 'text'){
+          if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                  this.filter.panelId, null, filterType);
+              } else {
+                this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+                  this.filter.panelId, null, '');
+              }
+            }
+          return;
+        }
+
         if (this.isModel) {
           this.modelStaticData(chartInfo, filterType);
         } else {
@@ -1098,9 +1126,11 @@
       },
       computeDistance:function(str){
         let span = document.querySelector(".temp-dom");
-        span.textContent = str;
+        if(span){
-        let txtWidth = parseFloat(window.getComputedStyle(span).width);
+          span.textContent = str;
-        return Number('-'+(txtWidth+5));
+          let txtWidth = parseFloat(window.getComputedStyle(span).width);
+          return Number('-'+(txtWidth+5));
+        }
       },
       modelStaticData(chartInfo, filterType) {
         let series = [];
@@ -1467,7 +1497,6 @@
           });
         });
         req.then(result => {
-          console.info(detail);
           this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, detail);
         }, err => {});
 

nezha-fronted/src/components/charts/chart.scss

@@ -474,7 +474,7 @@
       box-sizing: border-box;
     }
   }
-  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
+  .line-chart-block, .chart-table, .chart-single-stat, .chart-url,.chart-text, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
     height: 100%;
     position: relative;
     background-color: white;
@@ -605,3 +605,24 @@
   }
 
 }
+.chart-text{
+  width: 100%;
+}
+.rich-text-container .text-content{
+  padding: 10px;
+  width: calc(100% - 20px);
+  flex-grow: 1;
+  height: calc(100% - 28px);
+  white-space: pre-wrap;
+}
+.rich-text-screen-container{
+  height: 100%;
+
+}
+
+.rich-text-screen-container .text-content{
+  padding: 15px;
+  //border: 1px rgba(205,205,205,0.77);
+  //box-shadow:-1px 1px 9px -1px rgba(205,205,205,0.77);
+  height: calc(100% - 10px);
+}

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

@@ -59,7 +59,7 @@
         <span class="nz-dialog-title chart-title-text">{{chart.title}}</span>
         <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url' && chart.type !=='alertList'">
 
-          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
+          <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>
           <!--
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
@@ -161,6 +161,10 @@
 
       <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart"></chart-alert-list>
 
+      <template v-if="chart.type==='text'">
+          <div v-html="chart.param.text" id="chartTextPreview"></div>
+      </template>
+
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
 </template>
@@ -174,13 +178,14 @@
   import timePicker from '../common/timePicker'
   import chartAlertList from './chart-alert-list'
   import chartConfig from "../page/dashboard/overview/chartConfig";
-
+  import textChart from './text-chart'
   export default {
     name: 'chartPreview',
     components: {
       'loading': loading,
       'time-picker':timePicker,
       'chart-alert-list':chartAlertList,
+      'text-chart':textChart
     },
     props: {
       panelId:Number,
@@ -271,6 +276,8 @@
           chartContainerId = 'chartSingleStatPreview';
         }else if(chartType === 'alertList'){
           chartContainerId = 'chartAlertListPreview';
+        }else if(chartType == 'text'){
+          chartContainerId = 'chartTextPreview'
         }
 
         //设置高度 chart-table
@@ -312,13 +319,11 @@
             if (iframe.attachEvent) {
               iframe.attachEvent('onload', function () {
                 // iframe加载完毕以后执行操作
-                console.log('iframe已加载完毕');
                 that.$refs.loadingPreview.endLoading();
               })
             } else {
               iframe.onload = function () {
                 // iframe加载完毕以后执行操作
-                console.log('iframe已加载完毕');
                 that.$refs.loadingPreview.endLoading();
               }
             }
@@ -342,10 +347,10 @@
 
         }
         //后台获得数据
-        if(this.chart.type!=='url'){
+        if(this.chart.type!=='url'&&this.chart.type !=='text'){
           this.$refs.loadingPreview.startLoading();
           this.getChartData();
-        }else {
+        }else if(this.chart.type == 'url'){
           this.$refs.loadingPreview.startLoading();
           this.urlShow = true;
           this.setLoadFrame();

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

@@ -0,0 +1,90 @@
+<template>
+    <div >
+      <div :id="id" class="editor-core" ref="editor" style="height:350px;"></div>
+    </div>
+</template>
+
+<script>
+  import 'quill/dist/quill.snow.css'
+  import Quill from 'quill'
+  export default {
+    name: "richTextEditor",
+    props:{
+      editData:String
+    },
+    data(){
+      return {
+        id:'editor-'+this.guid(),
+        quill:null,
+        options:{
+          theme: 'snow',
+          modules:{
+            toolbar:[
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+              ['bold', 'italic', 'underline', 'strike'],
+              ['link'],
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+              [{ 'color': [] }, { 'background': [] }],
+              [{ 'align': [] }],
+            ]
+          }
+        },
+      }
+    },
+    created() {
+    },
+    methods:{
+      initEditor:function(){
+        let $self=this;
+        if(!this.quill){
+          this.quill = new Quill(this.$refs.editor, this.options);
+          this.quill.on('selection-change',function(range, oldRange, source){
+            let tooltip=$self.$el.querySelector('.ql-tooltip')
+            if(tooltip){
+              let left=tooltip.style.left;
+              if(left&&/\-\d+\.?\d+?px/.test(left)){
+                tooltip.style.left = '10px';
+              }
+            }
+          })
+          this.$nextTick(()=>{
+            this.$emit('after-init')
+          })
+        }
+      },
+      getHtml:function(){
+        let html=this.quill.root.innerHTML;
+        return html;
+      },
+      guid() {
+        function S4() {
+          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        }
+        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+      },
+    },
+    watch:{
+      editData:{
+        immediate:true,
+        handler(n,o){
+          this.$nextTick(()=>{
+            this.initEditor();
+            this.quill.clipboard.dangerouslyPasteHTML(null,this.editData,'api')
+          })
+        }
+      }
+    },
+    mounted() {
+      this.initEditor();
+    }
+  }
+</script>
+
+<style>
+  .ql-editor{
+    overflow: auto;
+  }
+  .ql-tooltip{
+
+  }
+</style>

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

@@ -0,0 +1,222 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<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">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+              <span class="chart-title-text">{{chartData.title}}</span>
+              <span class="chart-title-icon"><i class="nz-icon nz-icon-caret-bottom  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            </span>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+              <li  @click="refreshChart"  class="el-dropdown-menu__item">
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
+              <li  @click="editChart"  class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+              <li  @click="removeChart"  class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+              <li  @click="duplicate"  class="el-dropdown-menu__item">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</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" >
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.title}}</span>
+          </div>
+          <div class="rich-text-screen-container"  >
+            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" v-html="screenText" v-scrollBar></div>
+          </div>
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import bus from '../../libs/bus';
+  import {Loading} from 'element-ui';
+  import chartDataFormat from './chartDataFormat'
+  import loading from "../common/loading";
+  import timePicker from '../common/timePicker'
+
+  export default {
+    name: 'chartSingleStat',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker
+    },
+    props: {
+      chartData: {
+        type: Object
+      },
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      }
+    },
+    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: {},
+    methods: {
+      startResize(e) {
+        let 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].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;
+        const param = {id:this.data.id};
+        this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
+          if (response.code === 200) {
+            this.$message({
+              duration: 2000,
+              type: 'success',
+              message: this.$t("tip.duplicateSuccess")
+            });
+            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
+          }else {
+            if(response.msg){
+              this.$message.error(response.msg);
+            }else if(response.error){
+              this.$message.error(response.error);
+            }else {
+              this.$message.error(response);
+            }
+          }
+        });
+      },
+      // 全屏查看
+      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/language/cn.js

@@ -153,6 +153,9 @@ const cn = {
           },
           alertList:{
             label:"告警列表"
+          },
+          text:{
+            label:"文本"
           }
         },
         statisticsVal:{
@@ -188,7 +191,8 @@ const cn = {
           value:'Value',
           range:'Range',
         },
-        legendValue:'Legend option'
+        legendValue:'Legend option',
+        content:'内容'
       },
       chartTableColumn: {
         metric: "指标",

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

@@ -162,6 +162,9 @@ const en = {
           },
           alertList:{
             label:"Alert list"
+          },
+          text:{
+            label:'Text'
           }
         },
         statisticsVal:{
@@ -194,7 +197,8 @@ const en = {
           value:'Value',
           range:'Range',
         },
-        legendValue:'Legend option'
+        legendValue:'Legend option',
+        content:'Content'
       },
       chartTableColumn:{
         metric:'Metric', //'指标'
@@ -513,7 +517,7 @@ const en = {
       lastReply:'Ping last reply',
       modules: 'Endpoint',//'组件'
       alerts: 'Alerts',//'告警信息'
-      dataCenter: 'DC',//DC
+      dataCenter: 'Data Center',//DC
       cabinet: 'Cabinet',//'机柜'
       model: 'Model',//'型号'
       vendor: 'Vendor',//'厂商'

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

@@ -112,7 +112,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item">
+        <el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item" v-show="editChart.type !='text'">
           <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"  style="width: 100%"
                        :options="unitOptions"
                        :props="{ expandTrigger: 'hover',emitPath:false }"
@@ -169,7 +169,7 @@
           <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
         </el-form-item>
 
-        <div v-if="!isUrl&&!isAlert" class="right-box-sub-title" style="margin-bottom: 20px">
+        <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'" class="right-box-sub-title" style="margin-bottom: 20px">
           <span>{{$t('alert.config.expr')}}</span>
           <span v-if="!isSingleStat" style="height: 19px;display: inline-block;line-height: 1;" class="float-right" @click="addExpression">
             <span class="create-square-box">
@@ -177,6 +177,9 @@
             </span>
           </span>
         </div>
+        <div v-if="editChart.type == 'text'" class="right-box-sub-title" style="margin-bottom: 20px">
+          <span>{{$t('dashboard.panel.chartForm.content')}}</span>
+        </div>
         <div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
         <div v-if="!isUrl" style="width: 100%"></div>
 
@@ -184,7 +187,7 @@
           <alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
         </el-row>
 
-        <el-row v-if="!isUrl &&!isAlert" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+        <el-row v-if="!isUrl &&!isAlert && editChart.type != 'text'" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
           <promql-input
             :ref="'promql-'+(index-1)"
             :id="promqlKeys[index-1]"
@@ -288,6 +291,9 @@
             </template>
           </div>
         </template>
+        <template v-if="editChart.type=='text'&&textShow">
+          <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
+        </template>
 
       </el-form>
     </el-scrollbar>
@@ -318,6 +324,7 @@
   import alertChartParam from "./alertChartParam";
   import promqlInput from "./explore/promqlInput";
   import {nzNumber} from "../../common/js/validate";
+  import richTextEditor from "../../charts/richTextEditor";
   var rz = {
     methods: {
       rz(e) {
@@ -390,10 +397,15 @@
             id:'alertList',
             name:this.$t("dashboard.panel.chartForm.typeVal.alertList.label")
           },
+          {
+            id:'text',
+            name:this.$t("dashboard.panel.chartForm.typeVal.text.label")
+          },
           {
             id:'url',
             name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
           },
+
         ],
         elements: [1], // 指标部分 tarNum
         elementTarget: [], // 本地保存数据
@@ -427,7 +439,8 @@
         },
         heightSuggestions:['300','400','500','600'],
         unitOptions:chartDataFormat.unitOptions(),
-        sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}]
+        sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
+        textShow:false
       }
     },
     components:{
@@ -435,11 +448,17 @@
       'chart-preview':chartPreview,
       'alert-chart-param':alertChartParam,
       'promql-input': promqlInput,
+      'rich-text-editor':richTextEditor
     },
     mounted() {
       this.$nextTick(() => {
         this.initElements();
+
       });
+
+      setTimeout(()=>{
+        this.textShow=true;
+      },300)
     },
     methods: {
       clickOutside() {
@@ -817,7 +836,7 @@
       },
       confirmAdd() {
         this.elementTarget = []; // 初始化清空参数
-        if(this.editChart.type!=='url'){
+        if(this.editChart.type!=='url'&&this.editChart.type != 'text'){
           /*if(this.editChart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam();
           }else{
@@ -847,29 +866,54 @@
             this.addCharts();
           }
         }else {
-          this.$refs.chartForm.validate((valid) => {
+          if(this.editChart.type == 'url'){
-            const params = {
+            this.$refs.chartForm.validate((valid) => {
-              title: this.editChart.title,//this.editChart
+              const params = {
-              span: this.editChart.span,
+                title: this.editChart.title,//this.editChart
-              height: this.editChart.height,
+                span: this.editChart.span,
-              type: this.editChart.type,
+                height: this.editChart.height,
-              unit:this.editChart.unit,
+                type: this.editChart.type,
-              param:{
+                unit:this.editChart.unit,
-                url:this.editChart.param.url,
+                param:{
-              },
+                  url:this.editChart.param.url,
-              sync: this.editChart.sync
+                },
-            };
+                sync: this.editChart.sync
+              };
 
-            if (valid) {
+              if (valid) {
-              params.elements = [];
+                params.elements = [];
-              if (this.isedit) {
+                if (this.isedit) {
-                params.id = this.editChart.id;
+                  params.id = this.editChart.id;
-                this.updateCharts(params);
+                  this.updateCharts(params);
-              } else {
+                } else {
-                this.addCharts(params);
+                  this.addCharts(params);
+                }
               }
-            }
+            });
-          });
+          }else{
+            this.$refs.chartForm.validate((valid) => {
+              const params = {
+                title: this.editChart.title,//this.editChart
+                span: this.editChart.span,
+                height: this.editChart.height,
+                type: this.editChart.type,
+                param:{
+                  text:this.$refs.richTextEditor.getHtml()
+                },
+                sync: this.editChart.sync
+              };
+
+              if (valid) {
+                params.elements = [];
+                if (this.isedit) {
+                  params.id = this.editChart.id;
+                  this.updateCharts(params);
+                } else {
+                  this.addCharts(params);
+                }
+              }
+            });
+          }
         }
       },
       // 获取metric列表
@@ -1166,7 +1210,7 @@
         //验证图表数据是否合法？？，合法了再显示预览窗口
         this.elementTarget = []; // 初始化清空参数
         this.alertParams={};
-        if(this.editChart.type!=='url'){
+        if(this.editChart.type!=='url'&&this.editChart.type!=='text'){
           if(this.editChart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam('preview');
           }else{
@@ -1217,7 +1261,7 @@
               }
             });
           }
-        }else {
+        }else if(this.editChart.type=='url'){
           this.$refs.chartForm.validate((valid) => {
             const params = {
               title: this.editChart.title,//this.editChart
@@ -1230,6 +1274,26 @@
               }
             };
 
+            if (valid) {
+              if (this.isedit) {
+                params.id = this.editChart.id;
+              }
+              this.$refs.chartsPreview.show(params);
+            }
+          });
+        }else{
+          this.$refs.chartForm.validate((valid) => {
+            const params = {
+              title: this.editChart.title,//this.editChart
+              span: this.editChart.span,
+              height: this.editChart.height,
+              type: this.editChart.type,
+              unit:this.editChart.unit,
+              param:{
+                text:this.$refs.richTextEditor.getHtml()
+              }
+            };
+
             if (valid) {
               if (this.isedit) {
                 params.id = this.editChart.id;
@@ -1277,7 +1341,7 @@
       },
       delMapping:function(index){
         this.editChart.param.valueMapping.mapping.splice(index,1)
-      }
+      },
     },
     created() {
       this.getSuggestMetric();

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

@@ -335,7 +335,11 @@
         return new Promise(resolve => {
           this.$get('/healthy').then(response=>{
             if(response.code==200){
-              this.system_server_time=this.utcTimeToTimezone(response.time)
+              if(response.time){
+                this.system_server_time=this.utcTimeToTimezone(response.time)
+              }else{
+                this.system_server_time=bus.computeTimezone(new Date().getTime())
+              }
             }else{
               this.system_server_time=bus.computeTimezone(new Date().getTime())
             }