feat：新功能

1 dashboard模块：图表增加url类型（新增，预览，修改，删除，全屏，刷新），目前拖拽改变大小存在问题（prev及next相关问题）
fix：修改问题
1 webshell模块：resize时增加防抖处理了
2 explor模块：全屏不显示标题，下拉菜单只显示全屏

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

@@ -105,6 +105,16 @@
         :panel-id="filter.panelId"
         :chart-index="index"
         :editChartId="'editChartId' + item.id"></chart-table>
+
+        <chart-url v-if="item.type === 'url'" ref="editChart" :key="'inner' + item.id"
+                     @on-refresh-data="refreshChart"
+                     @on-search-data="searchData"
+                     @on-remove-chart-block="removeChart"
+                     @on-drag-chart="editChartForDrag"
+                     @on-edit-chart-block="editData"
+                     :panel-id="filter.panelId"
+                     :chart-index="index"
+                     :editChartId="'editChartId' + item.id"></chart-url>
       </div>
    </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
@@ -115,6 +125,7 @@ import axios from 'axios';
 import bus from '../../libs/bus';
 import lineChartBlock from './line-chart-block';
 import chartTable from './chart-table';
+import chartUrl from './chart-url';
 import draggable from 'vuedraggable'
 
 export default {
@@ -124,6 +135,7 @@ export default {
   components: {
     lineChartBlock,
     chartTable,
+    chartUrl,
     draggable,
   },
   data() {
@@ -489,6 +501,7 @@ export default {
           }else {
             this.dataList = this.dataTotalList;
           }
+          console.log('0000==========',this.dataList);
           this.$nextTick(() => {
             if (this.dataList.length > 0 && this.$refs.editChart) {
               this.$refs.editChart.forEach((item, i) => {
@@ -508,7 +521,12 @@ export default {
           if(oldDataListLen){
             realIndex += oldDataListLen;
           }
-          this.getChartData(item, realIndex);
+          let chartType = item.type;
+          if(chartType!=='url'){
+            this.getChartData(item, realIndex);
+          }else {
+            this.setSize(item.span, realIndex); // 设置该图表宽度
+          }
         });
       }
     },

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

@@ -0,0 +1,196 @@
+/* ---------edit-chart-move--------- */
+.clearfix:after{
+  display: block;
+  content: "";
+  clear: both;
+}
+.clearfix{
+  margin-bottom: 10px;
+}
+.loading-font{
+  color:#232f3e !important;
+}
+.dialog-tool {
+  margin-right: 40px;
+}
+.hidden{
+  visibility: hidden;
+}
+.visible{
+  visibility: visible;
+}
+.nz-chart-dropdown {
+  height: 147px;
+  li {
+    /*padding: 0 20px !important;*/
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
+.chart-url {
+  width: 100%;
+  height: 100%;//calc(100% - 40px);
+  // min-height: 500px;
+  position: relative;
+  background: #FFF;
+  border: 1px solid #d8dce1;
+  padding: 0px 0px;
+  margin-bottom: 10px;
+  padding-bottom: 3px;
+  .url-container{
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .vue-resizable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+    box-sizing: border-box;
+  }
+  .vue-resizable-handle:after {
+    border-right: 2px solid #555;
+    border-bottom: 2px solid #555;
+    content: "";
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 5px;
+    height: 5px;
+    /*border-right: 2px solid rgba(0,0,0,.4);
+    border-bottom: 2px solid rgba(0,0,0,.4);*/
+    box-sizing: inherit;
+  }
+  .chartTitle:hover {
+    background-color:#d8dce1;
+  }
+  .dragTitle{
+    background-color:#d8dce1;
+  }
+  .chartTitle {
+    text-align: center;
+    width: 100%;
+    line-height: 28px;
+    .nz-chart-top{
+      width:100%;
+    }
+    .el-dropdown-link {
+      cursor: move;
+    }
+    .el-icon-arrow-down {
+      font-size: 12px;
+    }
+    .chart-title {
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 26px;
+      color: #333;
+      margin: -3px 0 3px 3px;
+      display:flex;
+      justify-content:center;
+      align-items:center;
+      .chart-title-text{
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        cursor: pointer;
+      }
+      .chart-title-icon{
+        display: inline-block;
+        cursor: pointer;
+      }
+    }
+  }
+  .edit:after{
+    display: block;
+    content: "";
+    clear: both;
+  }
+
+  .button-panel-height{
+    height:26px;
+  }
+  .button-panel-height button{
+    height:26px;
+  }
+  .edit {
+    position: absolute;
+    right: 20px;
+    top: 17px;
+    z-index: 10;
+      /*background: $btn-light-background-color;
+      border-radius: 6px;;
+      border: 1px solid #ccc;
+    .set-icon {
+      display: inline-block;
+      cursor: pointer;
+      padding: 5px 15px;
+      border-right: 1px solid #ccc;
+      
+    }
+    .set-icon:hover{
+      background: $btn-light-background-color-hover;
+    }
+    .set-icon:last-child{
+      border-right: none !important;
+    }
+    .el-icon-refresh-right{
+      color: #F0BF84;
+    }
+    i{
+      font-size: 16px;
+      color: #000;
+    }
+    .list-icon {
+      float: left;
+    }
+    .show-icon {
+      cursor: pointer;
+      float: right;
+      font-size: 14px;
+    }*/
+  }
+  .chart-select {
+    position: absolute;
+    left: 40px;
+    top: 25px;
+    z-index: 10;
+    font-size: 14px;
+    .chart-select-btn {
+      margin-right: 10px;
+      cursor: pointer;
+      &.active {
+        color: #5aacff;
+      }
+    }
+  }
+  /*没有数据显示*/
+  .null {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 600;
+  }
+  .chart-table-col{
+    width: 100%;
+  }
+  .element-bottom-border {
+    border-bottom: 1px solid #dfe7f2;
+    margin-bottom:-20px;
+  }
+  .element-top-border {
+    padding-top: 10px;
+    border-top: 1px solid #dfe7f2;
+    margin-top:-25px;
+  }
+}

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

@@ -0,0 +1,374 @@
+<style lang="scss" scoped>
+@import './chart-url.scss';
+</style>
+<style>
+  .max-width-90{
+    max-width: 90px;
+  }
+</style>
+<template>
+    <div class="chart-url" :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @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" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+              <span class="chart-title-text">{{data.title}}</span>
+              <span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right"  :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="el-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>
+            </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
+                    style="z-index:5000;"
+            ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+        </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">{{data.title}}</span>
+            </div>
+            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
+                    style="z-index:5000;"
+            ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+
+            <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+    </div>
+</template>
+
+<script>
+import bus from '../../libs/bus';
+import chartDataFormat from './chartDataFormat'
+import loading from "../common/loading";
+
+export default {
+    name: 'chartUrl',
+  components: {
+    'loading': loading,
+  },
+    props: {
+        // 看板id
+        panelId: {
+            type: Number,
+            default: 0,
+        },
+        editChartId: {
+          type: String,
+          default: 'editChartId',
+        },
+        chartIndex:{
+          type: Number,
+          default: 0,
+        }
+    },
+    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
+            divFirstShow:false,
+        };
+    },
+    created() {
+    },
+    computed: {},
+    watch: {},
+    methods: {
+      showLoad(chartItem) {
+        this.data = chartItem;
+        console.log('=========',this.data);
+        this.panelIdInner = this.panelId;
+        //设置高度
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('chartUrlDiv'+this.chartIndex);
+          let height = chartItem.height;
+          if(height<this.minHeight){
+            height = this.minHeight;
+          }
+          chartBox.style.height = `${height-this.chartSpaceHeight}px`;
+          const urlBox = document.getElementById('urlContainer'+this.chartIndex);
+          urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
+        });
+        this.startLoading();
+        this.setLoadFrame();
+        this.divFirstShow = true;
+      },
+      setLoadFrame(){
+        let that = this;
+        this.$nextTick(() => {
+          let 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');
+
+        this.setLoadFrameFull();
+      },
+      dragResize:function(e){
+        console.log('========',this.data)
+        var diffWidth =20; //界面的宽度空白的地方的宽度
+        var chartBoxPadding = 22;
+        var targetDiv= document.getElementById('chartUrlDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
+        var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
+        var maxWidth = targetDivContainer.offsetWidth-diffWidth;
+        var minWidth = maxWidth/12;
+        var stepWidth = maxWidth/12;
+        var stepHeight = 10;
+
+        //得到点击时该容器的宽高：
+        var targetDivHeight=targetDiv.offsetHeight;
+        var targetDivWidth=targetDiv.offsetWidth;
+        var startY=e.clientY;
+        var startX=e.clientX;
+        var _this=this;
+
+        document.onmousemove=function(e){
+          e.preventDefault();
+          //得到鼠标拖动的宽高距离：取绝对值
+          var distY=Math.abs(e.clientY-startY);
+          var 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;
+          }
+          //调整表格大小
+            let containerHeight = parseInt(targetDiv.style.height);
+            let 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 tableBox = document.getElementById('urlContainer'+_this.chartIndex);
+            tableBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
+        }
+
+        document.onmouseup=function(){
+          document.onmousemove=null;
+          document.onmouseup = null;
+          let targetDivHeightNew = parseInt(targetDiv.style.height);
+          //let targetDivHeightNew = heightTmp
+          let targetDivWidthNew = parseInt(targetDiv.style.width);
+          //let targetDivWidthNew = widthTmp;
+
+          let diffHeight =  Math.abs(targetDivHeight-targetDivHeightNew);
+          if(targetDivHeight>targetDivHeightNew){
+            let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
+            targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
+          }
+          if(targetDivHeight<targetDivHeightNew){
+            let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
+            targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
+          }
+
+          var span = _this.data.span;
+          if(targetDivWidth>targetDivWidthNew){
+            span =  Math.floor((targetDivWidthNew*12)/maxWidth);
+            let 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);
+            let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
+            let finalWidth = spanUnit*stepWidth;
+            if(finalWidth>maxWidth || spanUnit===12){
+              targetDiv.style.width=maxWidth+'px';
+              span = 12;
+            }else {
+              targetDiv.style.width = finalWidth+'px';
+            }
+          }
+          //调整表格大小
+          let containerHeight = parseInt(targetDiv.style.height);
+          let 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 tableBox = document.getElementById('urlContainer'+_this.chartIndex);
+          tableBox.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),
+          }
+          console.log('========2',_this.data)
+          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
+            console.log('========3',_this.data)
+            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);
+              }
+            }
+          });
+
+        }
+      },
+        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].endLoading();
+          }
+        },
+        clearData(){
+        },
+
+
+        // 重新请求数据 刷新操作-local
+        refreshChart() {
+            this.dropdownMenuShow=false;
+            this.startLoading();
+            this.firstShow = false;
+            let 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;
+        },
+      setLoadFrameFull(){
+        let that = this;
+        this.$nextTick(() => {
+          let 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;
+        });
+      },
+    },
+    mounted() {
+        this.firstLoad = false;
+    },
+    beforeDestroy() {},
+};
+</script>

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

@@ -12,6 +12,11 @@
       visibility: visible;
     }
 </style>
+<style>
+  .char-url-preview html{
+
+  }
+</style>
 <template>
     <el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
                :visible.sync="screenModal"
@@ -21,7 +26,7 @@
                @opened="initDialog">
       <div slot="title">
         <span class="nz-dialog-title">{{chart.title}}</span>
-        <div class="float-right panel-calendar dialog-tool">
+        <div class="float-right panel-calendar dialog-tool"  v-if="chart.type!=='url'">
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
                           format="yyyy/MM/dd HH:mm"
                           @change="dateChange"
@@ -69,6 +74,14 @@
         </div>
       </template>
 
+      <template  v-if="chart.type==='url'">
+        <div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
+          <iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
+                  style="z-index:5000;"
+          ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+        </div>
+      </template>
+
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
 </template>
@@ -108,12 +121,6 @@
           xAxis: [],
           theData: [], // series数据组
         },
-        //panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        //chartName: '',
-        //firstLoad: false, // 是否第一次加载
-        //divFirstShow:false,
-        //highchartStore: null, // 保存图表数据
-        //echartStore:null,// 保存图表数据
         echartModalStore: null, // 全屏查看时数据
         chartType: 'line', // 图表类型
         screenModal: false,
@@ -136,6 +143,7 @@
         //dropdownMenuShow:false,
         showLegend:true,
         tableShow:true,
+        urlShow:true,
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         //oldSearchTime:[],
         minHeight:200,
@@ -234,25 +242,19 @@
       show(chartInfo) {
         this.searchTime = [new Date().setHours(new Date().getHours()-1),new Date()];
         this.chart=chartInfo;
+
         let chartType= chartInfo.type;
         let chartContainerId = 'chartEchartPreview'
         if(chartType==='table'){
-          /*
-          for(let i=0;i<8;i++){
-            this.seriesItemScreen.push({//表格数据
-              // label: '',//label
-              // metric: '',//metric列
-              element:'',
-              time: '',//采集时间
-              value: '',//数值
-            });
-          }*/
           this.tableShow = false;
           chartContainerId = 'chartTablePreview';
         }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
           this.isGreyScreen=[];
           this.showLegend = false;
           chartContainerId = 'chartEchartPreview';
+        }else if(chartType==='url'){
+          this.urlShow = false;
+          chartContainerId = 'chartUrlPreview';
         }
 
         //设置高度 chart-table
@@ -275,6 +277,33 @@
         this.setSize(chartInfo.span); // 设置该图表宽度
 
         this.screenModal = true;
+
+      },
+      setLoadFrame(){
+        if(this.chart.type==='url'){
+          let that = this;
+          this.$nextTick(() => {
+            let iframeBox = document.querySelector('#chartUrlPreview');
+            let iframe = document.querySelector('#chartUrlFrame');
+
+            // 处理兼容行问题
+            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();
+              }
+            }
+console.log('=======',this.chart)
+            iframe.src = this.chart.param.url;
+          });
+        }
       },
       filterShowData(source,pageObj){
         return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
@@ -288,10 +317,18 @@
           if(this.echartModalStore){
             this.echartModalStore.clear();
           }
+        }else if(chartType==='url'){
+
         }
         //后台获得数据
-        this.$refs.loadingPreview.startLoading();
+        if(this.chart.type!=='url'){
-        this.getChartData();
+          this.$refs.loadingPreview.startLoading();
+          this.getChartData();
+        }else {
+          this.$refs.loadingPreview.startLoading();
+          this.urlShow = true;
+          this.setLoadFrame();
+        }
       },
       // 设置图表的宽度
       setSize(size) {
@@ -789,6 +826,12 @@
         this.seriesItemScreen = [];
         this.searchTime[0] = new Date().setHours(new Date().getHours()-1);
         this.searchTime[1] =new Date();
+
+        let iframe = document.querySelector('#chartUrlFrame');
+        if(iframe){
+          iframe.src="";
+        }
+
       },
       // 重新请求数据 刷新操作
       /*
@@ -955,6 +998,7 @@
       },
     },
     mounted() {
+
     },
     beforeDestroy() {
       this.clearChart();

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

@@ -61,6 +61,19 @@
     }
   }
 }
+.nz-chart-dropdown-one {
+  height: 36px;
+  li {
+    /*padding: 0 20px !important;*/
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
 .line-chart-block {
   height: 100%;
   //min-height: 0px;

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

@@ -38,12 +38,12 @@
             <el-dropdown-item @click.native="showAllScreen"  ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
           </el-dropdown-menu>
           -->
-        <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;" >
+        <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
-          <li  @click="refreshChart"  class="el-dropdown-menu__item">
+          <li v-show="!isExplore"  @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">
+          <li v-show="!isExplore" @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">
+          <li v-show="!isExplore" @click="removeChart"  class="el-dropdown-menu__item">
             <i class="el-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>
@@ -80,8 +80,9 @@
                width="90%"
                @close="screenModal = false"
                @opened="initDialog">
-      <div slot="title">
+      <div slot="title" >
-        <span class="nz-dialog-title">{{data.title}}</span>
+        <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
+        <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
         <div class="float-right panel-calendar dialog-tool">
           <el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
                           format="yyyy/MM/dd HH:mm"
@@ -144,6 +145,10 @@
         type: Boolean,
         default: true,
       },
+      isExplore:{
+        type:Boolean,
+        default:false,
+      }
     },
     data() {
       return {

nezha-fronted/src/components/cli/webSSH.vue

@@ -537,6 +537,29 @@
             if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
           }
         },
+
+        debounce(operate, delay) {
+          let time = null
+          let timer = null
+          let newTime = null
+          function task() {
+            newTime = +new Date()
+            if(newTime - time < delay){
+              timer = setTimeout(task, delay)
+            }else {
+              operate()
+              timer = null
+            }
+            time = newTime
+          }
+          return function () {
+            // 更新时间戳
+            time = +new Date()
+            if(!timer){
+              timer = setTimeout(task, delay)
+            }
+          }
+        },
         windowChange(){
           //alert('winChange');
           if(this.editableTabs&&this.editableTabs.length>0){
@@ -576,7 +599,8 @@
       }
     },
     created() {
-      window.addEventListener('resize',this.windowChange);
+      //window.addEventListener('resize',this.windowChange);
+      window.addEventListener('resize',this.debounce(this.windowChange, 1000),false);
     },
     mounted() {
 

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

@@ -0,0 +1,150 @@
+<style scoped lang="scss">
+  .loading-font{
+    color:#232f3e !important;
+  }
+  .calendar{
+
+  }
+  .nz-dashboard-dropdown-bg {
+    background: $global-text-color-active;
+    color: #fff;
+  }
+  .calendar-dropdown-title {
+    line-height:24px;
+    padding-left:5px;
+    margin-left:0px;
+    margin-top: 3px;
+    text-align:left;
+    border-radius:4px;
+    width:140px;
+    height:24px;
+    border:solid 1px  #d8dce1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+  .el-dropdown-link {
+    cursor: pointer;
+  }
+  .calendar-popover{
+    line-height:22px;
+    text-align:center;
+  }
+  .el-popper{
+
+  }
+</style>
+<template>
+  <div class="calendar top-tools">
+    <el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
+      <el-popover
+        placement="bottom-end"
+        width="80"
+        trigger="hover">
+        <el-row  :gutter="10" class="calendar-popover">
+          <el-col :span="24">{{searchTime[0]}}</el-col>
+        </el-row>
+        <el-row  :gutter="10" class="calendar-popover">
+          <el-col :span="24">to</el-col>
+        </el-row>
+        <el-row  :gutter="10" class="calendar-popover">
+          <el-col :span="24">{{searchTime[1]}}</el-col>
+        </el-row>
+        <el-row  :gutter="10" class="el-dropdown-link" slot="reference">
+          <el-col :span="3" ><i class="el-icon-time"></i></el-col>
+          <el-col :span="16" class="panel-list-title" >{{showTime.text}}</el-col>
+          <el-col :span="5" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
+        </el-row>
+      </el-popover>
+      <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
+        <el-dropdown-item>{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>
+        <el-dropdown-item v-for="item in timeData" :key="item.id+1"
+                          :class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
+          {{item.text}}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import bus from '../../libs/bus';
+
+export default {
+  name: "calendar",
+  props: {
+  },
+  data() {
+    return {
+      searchTime:[
+        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 15),'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
+      ],
+      showTime: {
+        id: 1,
+        text: this.$t("dashboard.panel.lastFiveMin"),
+      },
+      timeData: [
+        {
+          id:1,
+          text:this.$t("dashboard.panel.lastFiveMin"),
+        },
+        {
+          id:2,
+          text:this.$t("dashboard.panel.lastFifteenMin"),
+        },
+        {
+          id:3,
+          text:this.$t("dashboard.panel.lastThirtyMin"),
+        },
+        {
+          id:4,
+          text:this.$t("dashboard.panel.lastOneHour"),
+        },
+        {
+          id:5,
+          text:this.$t("dashboard.panel.lastThreeHour"),
+        },
+        {
+          id:6,
+          text:this.$t("dashboard.panel.lastSixHour"),
+        },
+        {
+          id:7,
+          text:this.$t("dashboard.panel.lastTwelveHour"),
+        },
+        {
+          id:8,
+          text:this.$t("dashboard.panel.lastTwentyFourHour"),
+        },
+        {
+          id:9,
+          text:this.$t("dashboard.panel.lastTwoDay"),
+        },
+        {
+          id:10,
+          text:this.$t("dashboard.panel.lastSevenDay"),
+        },
+        {
+          id:11,
+          text:this.$t("dashboard.panel.lastThirtyDay"),
+        }
+      ],
+    };
+  },
+  methods: {
+    timeChange(val) {
+      if (!val) {
+        //this.toAdd();
+        return false;
+      }
+      this.showTime = val;
+      //this.showPanel = val
+      //this.filter.panelId = this.showPanel.id;
+      //this.$emit('on-remove-chart-block', this.searchTime);
+    },
+  }
+};
+</script>
+
+

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

@@ -82,6 +82,7 @@ const cn = {
         chartId:"ID",
         chartName:"图表名称",
         type:"类型",
+        url:"Url",
         typeVal:{
           line:{
             label:"曲线图"
@@ -91,7 +92,13 @@ const cn = {
           },
           table:{
             label:"表格"
-          }
+          },
+          stackArea:{
+            label:"面积图"
+          },
+          url:{
+            label:"Url"
+          },
         },
         width:"宽",
         high:"高",
@@ -115,6 +122,18 @@ const cn = {
       recOneMonth:'最近1月',
       curMonth:'本月',
       lastMonth:'上月',
+      customTimeRange:'Custom time range',
+      lastFiveMin:'最近5分钟',
+      lastFifteenMin:'最近15分钟',
+      lastThirtyMin:'最近30分钟',
+      lastOneHour:'最近1小时',
+      lastThreeHour:'最近3小时',
+      lastSixHour:'最近6小时',
+      lastTwelveHour:'最近12小时',
+      lastTwentyFourHour:'最近24小时',
+      lastTwo:'最近2天',
+      lastSevenDay:'最近7天',
+      lastThirtyDay:'最近30天',
       refreshInterval:{
         never:'从不',
         oneMinute:'1分钟',

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

@@ -71,8 +71,7 @@ const en = {
       failedDetail:'Failed Detail'
     },
     reset:'Reset',
-    submit:'Submit',
+    submit:'Submit'
-    noData:'No data',
   },
   pageSize: '/page',
   webshell:{
@@ -117,6 +116,7 @@ const en = {
         chartName:"Chart Name",
         type:"Type",
         unit:"Unit",
+        url:"Url",
         legend:'Legend',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
         typeVal:{
@@ -131,6 +131,9 @@ const en = {
           },
           stackArea:{
             label:"Stack Area"
+          },
+          url:{
+            label:"Url"
           }
         },
         width:'Width', //"宽"
@@ -157,6 +160,18 @@ const en = {
       recOneMonth:'Last 1 month',//'最近1月'
       curMonth:'This month',//'本月'
       lastMonth:'Last month',//'上月'
+      customTimeRange:'Custom time range',
+      lastFiveMin:'Last 5 minutes',
+      lastFifteenMin:'Last 15 minutes',
+      lastThirtyMin:'Last 30 minutes',
+      lastOneHour:'Last 1 hour',
+      lastThreeHour:'Last 3 hours',
+      lastSixHour:'Last 6 hours',
+      lastTwelveHour:'Last 12 hours',
+      lastTwentyFourHour:'Last 24 hours',
+      lastTwoDay:'Last 2 days',
+      lastSevenDay:'Last 7 days',
+      lastThirtyDay:'Last 30 days',
       refreshInterval:{
         never:'Never', //'从不'
         oneMinute:'1 minute', // 1 minute
@@ -284,7 +299,6 @@ const en = {
     assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?',//Related endpoints and alerts will be removed, are you sure you want to delete this asset?
     yes: 'Yes', //"是"
     no: "No",//No
-    success: "Success",
     deleteSuccess: 'Delete success',//"删除成功"
     saveSuccess: 'Save success', //"保存成功"
     coverSuccess: 'Override success',//'覆盖成功'
@@ -574,12 +588,8 @@ const en = {
       username: 'User',
       operation: 'Operation',
       type: 'Type',
-      createDate: 'Date',
+      createDate: 'CreateDate',
-      ip: "IP",
+      ip: "IP"
-      userId: "UserId",
-      operaId: "OperaId",
-      time: "time(ms)",
-      params: "Params"
     },
     mib:{
       mib:'SNMP mib',
@@ -591,12 +601,11 @@ const en = {
       models:'Models',
       modelTip:'please select models',
       createMib:'Create Mib',
-      mibFiles:'Mib Files',
+      mibFile:'Mib File',
       uploadTip:'please upload mib file',
       requiredMibFile:'mib file is required',
       vendor:'Vendor',
       type:'Type',
-      mibBrowser: 'Mib browser',
     },
     system:{
       system:'System',

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

@@ -75,34 +75,34 @@
         <el-scrollbar class="right-box-form-box" ref="scrollbar">
           <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
             <el-form-item :label="$t('dashboard.panel.title')" prop="panel">
-                <el-autocomplete
+              <el-autocomplete
-                  :fetch-suggestions="panelSuggestion"
+                :fetch-suggestions="panelSuggestion"
-                  v-model.trim="panelName2"
+                v-model.trim="panelName2"
-                  placeholder=""
+                placeholder=""
-                  size="small"
+                size="small"
-                  value-key="name"
+                value-key="name"
-                  v-if="!chart.id"
+                v-if="!chart.id"
-                  popper-class="chart-box-autocomplete no-style-class"
+                popper-class="chart-box-autocomplete no-style-class"
-                >
+              >
-                </el-autocomplete>
+              </el-autocomplete>
-                <el-input size="small" v-if="chart.id" readonly="readonly" :value="panelName2"></el-input>
+              <el-input size="small" v-if="chart.id" readonly="readonly" :value="panelName2"></el-input>
-                <!--<el-select popper-class="chart-box-dropdown"
+              <!--<el-select popper-class="chart-box-dropdown"
-                           v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
+                         v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
-                  <el-option v-for="item in panelData" :key="item.id" :label="item.name"
+                <el-option v-for="item in panelData" :key="item.id" :label="item.name"
-                             :value="item.id" :id="'chart-box-panel-'+item.id">
+                           :value="item.id" :id="'chart-box-panel-'+item.id">
-                    <span class="config-dropdown-label-txt">{{item.name}}</span>
+                  <span class="config-dropdown-label-txt">{{item.name}}</span>
-                    <div class="config-dropdown-label-icons">
+                  <div class="config-dropdown-label-icons">
-                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
+                  <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
-                          :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
+                        :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
-                      <span class="config-dropdown-btn" @click.stop="editPanel(item)"
+                    <span class="config-dropdown-btn" @click.stop="editPanel(item)"
-                            :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
+                          :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
-                    </div>
+                  </div>
-                  </el-option>
+                </el-option>
-                </el-select>
+              </el-select>
 
-                <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
+              <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
-                  <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+                <i class="el-icon-plus" id="chart-box-panel-plus"></i>
-                </div>-->
+              </div>-->
 
             </el-form-item>
             <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
@@ -120,7 +120,7 @@
               <el-col :span="10" style="margin-left:-7px;">
                 <div class="grid-content ">
                   <el-form-item prop="type">
-                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
+                    <el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
                       <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
                         <span class="panel-dropdown-label-txt" >{{item.name}}</span>
                       </el-option>
@@ -128,10 +128,10 @@
                   </el-form-item>
                 </div>
               </el-col>
-              <el-col :span="2" style="margin-left: 7px">
+              <el-col v-show="!isUrl" :span="2" style="margin-left: 7px">
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
               </el-col>
-              <el-col :span="10">
+              <el-col v-show="!isUrl" :span="10">
                 <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"
                              :options="unitOptions"
                              :props="{ expandTrigger: 'hover' }"
@@ -183,10 +183,14 @@
               </el-col>
             </el-row>
 
-            <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
+            <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
-            <div class="line-100"></div>
+              <el-input size="small" maxlength="64" show-word-limit v-model="chart.param.url"></el-input>
+            </el-form-item>
 
-            <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
+            <div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
+            <div v-if="!isUrl" class="line-100"></div>
+
+            <el-row v-if="!isUrl" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
               <chart-metric ref="chartTag"
                             :pointer="index"
                             :metric-list="metricList"
@@ -200,7 +204,7 @@
 
             </el-row>
 
-            <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
+            <button v-if="!isUrl" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
               <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
             </button>
 
@@ -250,6 +254,9 @@
           span:12,
           height:'400',
           unit:2,
+          param:{
+            url:''
+          },
           elements:{
             id: '',
             expression: '',
@@ -258,9 +265,13 @@
           },
           panel: ''
         },
+        isUrl:false,
         rules: {
           title: [
             {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
+          ],
+          url: [
+            {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
           ]
         },
         chartTypeList: [
@@ -279,6 +290,10 @@
           {
             id:'stackArea',
             name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
+          },
+          {
+            id:'url',
+            name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
           }
         ],
         elements: [1], // 指标部分 tarNum
@@ -311,6 +326,7 @@
     methods: {
       show(show) {
         this.rightBox.show = show;
+        this.isUrl = false;
       },
       clickos() {
         this.esc();
@@ -452,12 +468,12 @@
         if (this.subCount === this.elements.length) {
           this.subCount = 0;
           // 保存完成,进行删除操作
-          console.log('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+          //('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-          console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          //console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
           this.elements.splice(this.deleteIndex, 1);
           this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
           bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
-          console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),'  elementTarget='+JSON.stringify(this.elementTarget),'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          //console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),'  elementTarget='+JSON.stringify(this.elementTarget),'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
 
           this.$nextTick(() => {
             this.$refs.chartTag.forEach((item, index) => {
@@ -522,7 +538,12 @@
               this.$emit("reloadOnlyPanel");
               this.$store.commit('panelListChange', true);
             } else {
-              this.$message.error(response.msg);
+              if(response.msg){
+                this.$message.error(response.msg);
+              }else {
+                this.$message.error(response);
+              }
+
             }
           });
         }
@@ -541,7 +562,11 @@
                 let panel = this.panelData.find(p => p.id === this.panelId);
                 this.$emit('on-create-success', 'create', response.data,params, panel);
               } else {
-                this.$message.error(response.msg);
+                if(response.msg){
+                  this.$message.error(response.msg);
+                }else {
+                  this.$message.error(response);
+                }
               }
             });
             clearInterval(interval);
@@ -555,7 +580,6 @@
       },
       // 更新图表
       updateCharts(params) {
-        console.log('))))))))))))=',params)
         this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
           if (response2.code === 200) {
             this.esc();
@@ -564,7 +588,11 @@
             this.panelName2 = '';
             this.$emit('on-create-success', 'update', response2.data, params);
           } else {
-            this.$message.error(response2.msg);
+            if(response2.msg){
+              this.$message.error(response2.msg);
+            }else {
+              this.$message.error(response2);
+            }
           }
         });
       },
@@ -626,19 +654,41 @@
       },
       confirmAdd() {
         this.elementTarget = []; // 初始化清空参数
-        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
+        if(this.chart.type!=='url'){
-          // 触发每个tag组件内部进行校验
+          this.$refs.chartTag.forEach((item, index) => {//循环指标列表
-          item.saveTarget(index);
+            // 触发每个tag组件内部进行校验
-        });
+            item.saveTarget(index);
-        this.$refs.chartForm.validate();
+          });
+        }else {
+          this.$refs.chartForm.validate((valid) => {
+            const params = {
+              title: this.chart.title,//this.chart
+              span: this.chart.span,
+              height: this.chart.height,
+              type: this.chart.type,
+              unit:this.chart.unit,
+              param:{
+                url:this.chart.param.url,
+              }
+            };
+
+            if (valid) {
+              params.elements = [];
+              if (this.isedit) {
+                params.id = this.chart.id;
+                this.updateCharts(params);
+              } else {
+                this.addCharts(params);
+              }
+            }
+          });
+        }
       },
       // 获取metric列表
       getSuggestMetric() {
         //this.$get('/prom/api/v1/label/__name__/values').then(response => {
         this.$get('/module?pageSize=-1').then(response => {
-          console.log('---response---',response);
           if (response.code === 200) {
-            console.log('---response200---',response);
             this.metricList = response.data.list;
             const cascaderMap = new Map();
             this.metricList.forEach((item,index) => {
@@ -682,7 +732,6 @@
             });
 
             this.metricCascaderList = metricCascaderArr;
-            console.log('---response200metricCascaderList---',this.metricCascaderList);
           }else {
             this.metricList = [];
             this.metricCascaderList = [];
@@ -714,7 +763,6 @@
 
           } else {
             this.$nextTick(() => {
-              console.log('1_+_+_+_+_+_+',JSON.stringify(elementInfo.elements[0]));
               this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
             });
           }
@@ -742,20 +790,26 @@
         this.chart.height = data.height+'';
         this.chart.type = data.type;
         this.chart.unit=data.unit;
-        //this.getSuggestMetric();//获得指标列表
+        if(this.chart.type==='url'){
-        // 指标
+          this.chart.param.url = data.param.url;
-        this.elements = [];
+          this.isUrl = true;
-        bus.chartAddInfo.metricTarget = [];
+          this.elements = [1];
-        data.elements.forEach((item, index) => {
+        }else{
-          this.elements.push(index);
+          //this.getSuggestMetric();//获得指标列表
-        });
+          // 指标
-        this.$nextTick(() => {
+          this.elements = [];
-          const cSet = this.$refs.chartTag;
+          bus.chartAddInfo.metricTarget = [];
-          // 派发charttag数据
+          data.elements.forEach((item, index) => {
-          cSet.forEach((item, index) => {
+            this.elements.push(index);
-            item.setMdata(data.elements[index]);
           });
-        });
+          this.$nextTick(() => {
+            const cSet = this.$refs.chartTag;
+            // 派发charttag数据
+            cSet.forEach((item, index) => {
+              item.setMdata(data.elements[index]);
+            });
+          });
+        }
       },
 
       // 初始化信息
@@ -797,7 +851,15 @@
       unitSelected:function(value){
         this.chart.unit=value[value.length-1];
       },
-
+      chartTypeChange(){
+        let chartType = this.chart.type;
+        this.chart.param.url='';
+        if(chartType==='url'){
+          this.isUrl = true;
+        }else {
+          this.isUrl = false;
+        }
+      },
       /*panel搜索建议*/
       panelSuggestion(queryString, callback) {
         let data = [];
@@ -818,11 +880,41 @@
       preview(){
         //验证图表数据是否合法？？，合法了再显示预览窗口
         this.elementTarget = []; // 初始化清空参数
-        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
+        if(this.chart.type!=='url'){
-          // 触发每个tag组件内部进行校验
+          this.$refs.chartTag.forEach((item, index) => {//循环指标列表
-          item.saveTarget(index,'preview');
+            // 触发每个tag组件内部进行校验
-        });
+            item.saveTarget(index,'preview');
-        this.$refs.chartForm.validate();
+          });
+        }else {
+          this.$refs.chartForm.validate((valid) => {
+            const params = {
+              title: this.chart.title,//this.chart
+              span: this.chart.span,
+              height: this.chart.height,
+              type: this.chart.type,
+              unit:this.chart.unit,
+              param:{
+                url:this.chart.param.url,
+              }
+            };
+
+            if (valid) {
+              if (this.isedit) {
+                params.id = this.chart.id;
+              }
+              this.$refs.chartsPreview.show(params);
+              /*
+                if (this.isedit) {
+                  params.id = this.chart.id;
+                  this.updateCharts(params);
+                } else {
+                  this.addCharts(params);
+                }
+              */
+            }
+          });
+        }
+        //this.$refs.chartForm.validate();
       },
       //preview--end
 
@@ -854,6 +946,7 @@
           item.clearSelectedTagList();
         });
       }
+      this.isUrl = false;
     },
   }
 </script>

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

@@ -343,7 +343,6 @@ export default {
               let module = node.data.label;
               let metricArr = [];
               let metricArrTmp = [];
-              console.log('success=3',project,module,_this.metricCascaderList);
 
               let metricLabelValMap = new Map();
               let projectItem = _this.metricAllData.get(project);
@@ -363,10 +362,8 @@ export default {
                   };
                   metricArr.push(childOption);
                 });
-                console.log('success=111',metricArr);
                 resolve(metricArr);
               }else {
-                console.log('success=222');
                 _this.metricCascaderList.map((item, index) => {
                   if(item.label===project){//选择的project
                     item.children.map((innerItem, innerIndex) => {
@@ -375,7 +372,6 @@ export default {
                           // 当二级分类的的child为空时才请求一次数据
                           let match = '{project="'+project+'",module="'+module+'"}';
                           _this.$get('/prom/api/v1/series?match[]='+match).then(res => {
-                            console.log('success=5',res)
                             if (res.status === 'success') {
                               res.data.forEach((tag, i) => {
                                 let metricName = tag.__name__;
@@ -432,12 +428,10 @@ export default {
                               });
                               resolve(metricArr);
                             }else {
-                              console.log('success=999')
                               resolve([]);
                             }
                           })
                         }else {//已经加载过了
-                          console.log('success=78')
                           resolve([]);
                         }
                       }
@@ -474,11 +468,11 @@ export default {
     },
     // 第三步,将数据重新赋值,sub-save-ok回调
     setSubdata(index) {
-      console.log('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+      //('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-      console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
+      //console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
       this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
-      console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
+      //console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
-      console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
+      //console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
       if(this.elementInfo.type==='expert'){
         //alert('metric第三步，expert');
         // 当该项expression为空时，重置一下
@@ -497,36 +491,29 @@ export default {
       }
     },
     clearSelectedTagList(){
-      console.log('--------clear selected')
       this.elementInfo.selectedTagList.forEach((selectItem)=>{
         selectItem.value = [];//清空值，再进行赋值
       });
     },
     convertLabelValueCascadeVal(){
-      //把级联选择label及value，转换为selectedTagList里的value？？？？？？
+      //把级联选择label及value，转换为selectedTagList里的value
       this.clearSelectedTagList();
-      console.log('*** this.labelValueCascaderVal***',JSON.stringify(this.labelValueCascaderVal))
       this.labelValueCascaderVal.forEach((item)=>{//[label,value]
         let casLabel = item[0];
         let casValue = item[1];
-        console.log('*** this.elementInfo.selectedTagList***',JSON.stringify(this.elementInfo.selectedTagList))
         this.elementInfo.selectedTagList.forEach((selectItem)=>{
           let selectLabel = selectItem.name;
           let selectValue = selectItem.value;
-          console.log('111',selectLabel,casLabel)
           if(selectLabel===casLabel){
-            console.log('222',selectValue.indexOf(casValue),selectValue,casValue)
             if(selectValue.indexOf(casValue)===-1){
               selectValue.push(casValue);
             }
           }
         });
-        console.log('*** this.elementInfo.selectedTagList***end',JSON.stringify(this.elementInfo.selectedTagList))
       });
     },
     // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
     saveTarget(pointer,optType) {
-      console.log(this.pointer,pointer,'this.labelValueCascaderVal=====',JSON.stringify(this.labelValueCascaderVal));
       if (this.pointer === pointer) {
         this.$refs.elementInfo.validate((valid) => {
           if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
@@ -536,7 +523,6 @@ export default {
             if(this.elementInfo.type==='normal' && this.elementInfo.metric instanceof Array){
               this.elementInfo.metric = this.elementInfo.metric[2];
             }
-            console.log('+++++++',JSON.stringify(this.labelValueCascaderVal));
             this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里
             this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
           }
@@ -785,7 +771,6 @@ export default {
         }
         this.labelValueCascaderOptions.push(labelOption);
 
-        console.log('++++item.val.length',item.value);
         if(item.value.length>0){
           item.value.forEach((valueItem)=>{
             let labelVal = [];
@@ -795,8 +780,6 @@ export default {
           });
         }
       });
-      console.log('++++val',this.labelValueCascaderVal);
-      console.log('++++22',this.labelValueCascaderOptions);
     },
     changeTag(){
       this.$emit('on-change-condition');
@@ -806,7 +789,6 @@ export default {
     },
     // 选择metric
     selectMetric() {
-      console.log('---setMetricToLabelValue---start')
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
         this.getSuggestTags(this.elementInfo.metric);
         this.setLabelValueCascader();
@@ -858,14 +840,12 @@ export default {
     },
     // 获取tags列表
     getSuggestTags(metricArr) {
-      console.log('---getSuggestTags---start',this.metricLabelValInfo)
       let metric = metricArr[2];
       let proTmp = metricArr[0];
       let project = proTmp.substring(0, proTmp.length - 4);
       let module = metricArr[1];
       this.elementInfo.selectedTagList = [];
       if(this.metricLabelValInfo.has(metric)){
-        console.log('---metricLabelValInfo--has---start')
         let tagListTmp = [];
         tagListTmp = [...this.metricLabelValInfo.get(metric)];
         tagListTmp.forEach((selectItem)=>{
@@ -988,7 +968,6 @@ export default {
           });
           //排序label顺序
           this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
-          console.log('11111111111111');
           this.setLabelValueCascader();
         }
       }else {
@@ -1062,7 +1041,6 @@ export default {
             });
 
             this.elementInfo.selectedTagList = [];
-            console.log('---response---start',this.metricLabelValInfo)
             if(this.metricLabelValInfo.has(metric)){
               let tagListTmp = [];
               tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
@@ -1133,7 +1111,6 @@ export default {
 
     // 编辑已有图表状态时，先填充数据
     setMdata(data) {
-      console.log('-------data******',JSON.stringify(data))
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
       //this.pointer =
@@ -1344,7 +1321,6 @@ export default {
     bus.$on('clear_history', () => {
       this.clearHistory();
     });
-    console.log('@#$%%',this.metricCascaderList);
     //this.metricCascaderList = [...this.metricCascaderListTmp];
   },
   beforeDestroy() {

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

@@ -33,10 +33,10 @@
               <div class="box-content" >
                 <el-row :gutter="20"  class="row-width" style="height: calc(100% - 65px);">
                   <el-col :span="10" >
-                      <metric-set :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam"  @reloadPanel="getPanelData"></metric-set>
+                      <metric-set  :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam"  @reloadPanel="getPanelData"></metric-set>
                   </el-col>
-                  <el-col :span="0.5"><div>&nbsp;</div></el-col>
+                  <el-col :span="0.5" ><div>&nbsp;</div></el-col>
-                  <el-col :span="13" class="chart-preview-area">
+                  <el-col :span="13" class="chart-preview-area" >
                     <el-date-picker size="mini" ref="calendar"
                                     format="yyyy/MM/dd HH:mm"
                                     @change="dateChange"
@@ -53,6 +53,7 @@
                       <div class="chartBox">
                         <line-chart-block
                           :show-setting="false"
+                          :isExplore="true"
                           ref="editChartSingle"
                           @on-refresh-data="refreshChart"
                           @on-remove-chart-block="removeChart"

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

@@ -46,10 +46,13 @@
                               :start-placeholder="$t('dashboard.panel.startTime')"
                               :end-placeholder="$t('dashboard.panel.endTime')" align="right">
               </el-date-picker>
+              <!--
+              <calendar ref="calendarPanel" class="nz-dashboard-picker"></calendar>
+              -->
             </div>
           </div>
 
-          <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20">
+          <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
             <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
               <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
@@ -85,7 +88,7 @@
                         ref="chartList"></chart-list>
           </div>
         </el-scrollbar>
-       </div>
+      </div>
       <button class="to-top" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
     </div>
 
@@ -98,6 +101,7 @@
   import ChartBox from "./chartBox";
   import ChartList from '../../charts/chart-list';
   import bus from '../../../libs/bus';
+  //import calendar from '../../common/calendar'
 
   export default {
     name: "panel",
@@ -267,7 +271,8 @@
     },
     components: {
       'chart-box': ChartBox,
-      'chart-list': ChartList
+      'chart-list': ChartList,
+      //'calendar':calendar
     },
     methods: {
       //刷新
@@ -366,14 +371,14 @@
                 type: 'success',
                 message: this.$t("tip.deleteSuccess")
               });
-                let chartList=this.$refs.chartList.dataList;
+              let chartList=this.$refs.chartList.dataList;
-                for (let i =0;i< chartList.length;i++){
+              for (let i =0;i< chartList.length;i++){
-                  if(chartList[i].id === data.id){
+                if(chartList[i].id === data.id){
-                    chartList.splice(i,1);
+                  chartList.splice(i,1);
-                    break;
+                  break;
-                  }
                 }
-                // this.getTableData(); //删除相关图表后，刷新面板数据
+              }
+              // this.getTableData(); //删除相关图表后，刷新面板数据
             } else {
               this.$message.error(response.msg);
             }