feat:新增asset info chart(细节待优化)

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

@@ -0,0 +1,225 @@
+/* ---------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;
+}
+
+.chart-asset-info {
+  width: 100%;
+  height: 100%;//calc(100% - 40px);
+  position: relative;
+  background: #FFF;
+  border: 1px solid #d8dce1;
+  padding: 0px 0px;
+  margin-bottom: 10px;
+  padding-bottom: 3px;
+  .chart-info-container{
+    padding-left: 8px;
+    padding-right: 8px;
+    display:table;
+    text-align:center;
+    width:calc(100% - 16px);
+    .single-stat-content{
+      text-align:center;
+      vertical-align: middle;
+      display:table-cell;
+      font-size:30px;
+    }
+  }
+  .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;
+    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;
+
+  }
+  .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;
+  }
+  .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;
+  }
+}
+
+.asset-info-content{
+  width: 100%;
+  height: 100%;
+  .basic-container,.feature-container{
+    width: 100%;
+    //height: calc(50% - 4px);
+    box-sizing: border-box;
+  }
+  .basic-container .basic-title,.feature-container .feature-title{
+    height: 20px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap:nowrap;
+    padding: 0 5px 0 5px;
+    box-sizing: border-box;
+  }
+  .basic-container .basic-title:hover,.feature-container .feature-title:hover{
+    border: 1px solid #C0C4CC;
+  }
+
+  .basic-container .basic-content,.feature-container .feature-content{
+    height: calc(100% - 22px);
+    transition: all 2s;
+  }
+  .shrink{
+    height: 0px;
+    display: none;
+  }
+  .basic-container{
+    margin-bottom: 10px;
+  }
+  .feature-container{
+
+  }
+  .content-item{
+    width: 100%;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    position: relative;
+    .content-item-key{
+      display: inline-block;
+      //height: 25px;
+      //line-height: 25px;
+      position: absolute;
+      top: calc(50% - 12px);
+      z-index: 2001;
+      left: 0;
+      width: 30%;
+      text-align: right;
+    }
+    .content-item-value{
+      display: inline-block;
+      //height: 25px;
+      //line-height: 25px;
+      float: right;
+      width: 68%;
+      text-align: center;
+    }
+
+  }
+  .content-item:hover{
+    background-color: #F2F2F2;
+  }
+}

nezha-fronted/src/components/charts/chart-asset-info.vue

@@ -0,0 +1,428 @@
+<template>
+  <div class="chart-asset-info"  :id="'chartAssetInfoDiv'+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-popover
+        v-if="isError"
+        :close-delay=10
+        placement="top-start"
+        trigger="hover"
+        popper-class="chart-error-popper">
+        <div >{{errorContent}}</div>
+        <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+                <i class="nz-icon nz-icon-warning fa"></i>
+                <span class="panel-info-corner-inner"></span>
+            </span>
+      </el-popover>
+      <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+        <span class="chart-title-text">{{data.title}}</span>
+      </span>
+    </div>
+    <div class="mt-10 chart-info-container" v-cloak  v-show="firstShow" >
+      <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
+          <el-scrollbar style="height: 100%;" ref="scrollbar" class="el-scrollbar-large">
+            <div style="padding: 0 15px">
+              <div class="basic-container">
+                <div class="basic-title" @click="hideElement('basic')">
+                  <div>{{$t('asset.basicTitle')}}</div>
+                  <div><i :class="{'el-icon-caret-bottom':hideBasic,'el-icon-caret-top':!hideBasic}"></i></div>
+                </div>
+                <div class="basic-content" :class="{'shrink':hideBasic}">
+                  <template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
+                    <div v-for="(value,key,index) in assetInfos.Basic" :key="index" class="content-item" :class="{'bg-grey':index % 2 == 1}">
+                      <div class="content-item-key">{{replaceSplit(key)}}</div>
+                      <div class="content-item-value">{{value}}</div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+              <div class="feature-container">
+                <div class="feature-title" @click="hideElement('feature')" >
+                  <div>{{$t('asset.featureTitle')}}</div>
+                  <div><i :class="{'el-icon-caret-bottom':hideFeature,'el-icon-caret-top':!hideFeature}"></i></div>
+                </div>
+                <div class="feature-content" :class="{'shrink':hideFeature}">
+                  <div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1}">
+                    <div class="content-item-key" ><div style="vertical-align: middle">{{replaceSplit(key)}}</div></div>
+                    <template v-if="typeof value == 'string'">
+                      <div class="content-item-value">{{value}}</div>
+                    </template>
+                    <div v-if="Array.isArray(value) && value.length>0" class="content-item-value">
+                      <template v-if="typeof value[0] == 'string'">
+                        <div class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
+                      </template>
+                      <template v-else>
+                        <el-table
+                          class="overview-table"
+                          :data="value"
+                          tooltip-effect="light"
+                          height="100%"
+                          ref="dataTable"
+                        >
+                          <el-table-column
+                            :resizable="false"
+                            v-for="(item, index) in setLabels(value)"
+                            v-if="item.show"
+                            :key="`col-${index}`"
+                            :width="item.width"
+                            :label="item.label"
+                            min-width="90"
+                          >
+                            <template slot-scope="scope" :column="item">
+                              <template >
+                                <span v-html="scope.row[item.prop]"></span>
+                              </template>
+                            </template>
+                          </el-table-column>
+                        </el-table>
+                      </template>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+    </div>
+    <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+  </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: 'chartAssetInfo',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker
+    },
+    props: {
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      }
+    },
+    data() {
+      return {
+        data: {}, // 该图表信息,chartItem
+        unit:{},
+        isError:false,
+        errorContent:'',
+        assetInfos:{},
+        //toolbox: false,
+        loading:Object,
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+        },
+        hideBasic:false,
+        hideFeature: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,
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+      };
+    },
+    created() {
+    },
+    computed: {},
+    watch: {},
+    methods: {
+      setLabels:function(source){
+        let labels=[];
+        source.forEach(item=>{
+          labels=labels.concat(Object.keys(item))
+        })
+        labels=Array.from(new Set(labels));
+
+        labels=labels.map(item=>{
+          return{
+            label:this.replaceSplit(item),
+            prop:item,
+            show:true,
+          }
+        })
+
+        return labels;
+      },
+      hideElement:function(type){
+        if(type ==  'basic'){
+          this.hideBasic=!this.hideBasic;
+        }else{
+          this.hideFeature=!this.hideFeature
+        }
+        this.$nextTick(()=>{
+          this.$refs.scrollbar.update();
+        })
+      },
+      replaceSplit(key){
+        if(key){
+          return key.replace('$_$',' ')
+        }
+      },
+      dragResize:function(e){
+        var diffWidth =20; //界面的宽度空白的地方的宽度
+        var chartBoxPadding = 22;
+        var targetDiv= document.getElementById('chartAssetInfoDiv'+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 chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
+          chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
+        }
+
+        document.onmouseup=function(){
+          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;
+            //alert('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
+            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 chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
+          chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;
+
+          const modifyParams = {
+            id:_this.data.id,
+            span:span,
+            height:(containerHeight+_this.chartSpaceHeight),
+            prev:parseInt(_this.data.prev),
+            next:parseInt(_this.data.next),
+          }
+          targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
+          _this.$put('panel/'+  _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
+            if (response.code === 200) {
+              //更新当前图表数据
+              _this.data.span= span;
+              _this.data.height= containerHeight+_this.chartSpaceHeight;
+              _this.$emit('on-drag-chart', _this.data);
+            }else {
+              if(response.msg){
+                _this.$message.error(response.msg);
+              }else if(response.error){
+                _this.$message.error(response.error);
+              }else {
+                _this.$message.error(response);
+              }
+            }
+          });
+          document.onmousemove=null;
+          document.onmouseup = null;
+        }
+      },
+      startLoading(area){
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+      },
+      endLoading(area){
+        this.$refs['localLoading'+this.chartIndex].endLoading();
+      },
+      clearData(){
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('chartAssetInfoDiv'+this.chartIndex);
+          let height = Math.round(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 = {};
+      },
+
+      // 设置数据, filter区分
+      setData(chartItem, assetInfos, panelId, filter,area,errorMsg) {
+        if(errorMsg && errorMsg!==''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('chartAssetInfoDiv'+this.chartIndex);
+          let height = Math.round(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.divFirstShow = true;
+
+        this.firstShow = true; // 展示操作按键
+
+        this.panelIdInner = panelId;
+        this.data = chartItem;
+
+        this.assetInfos=assetInfos;
+        this.$nextTick(()=>{
+          this.$refs.scrollbar.update();
+        })
+        this.endLoading();
+      },
+    },
+    mounted() {
+      this.firstLoad = false;
+      this.$nextTick(()=>{
+        this.$refs.scrollbar.update();
+      })
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import './chart-asset-info';
+</style>
+<style>
+  .asset-info-content .el-scrollbar__view {
+    height: 100%;
+  }
+</style>

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

@@ -128,6 +128,13 @@
                      :panel-id="filter.panelId"
                      :chart-index="index"
                      :editChartId="'editChartId' + item.id"></chart-url>
+
+        <chart-asset-info v-if="item.type  === 'assetInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+                    @on-drag-chart="editChartForDrag"
+                    :panel-id="filter.panelId"
+                    :chart-index="index"
+                    :editChartId="'editChartId' + item.id"
+        ></chart-asset-info>
       </div>
    </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
@@ -140,14 +147,17 @@ import lineChartBlock from './line-chart-block';
 import chartTable from './chart-table';
 import chartUrl from './chart-url';
 import chartSingleStat from './chart-single-stat';
+import chartAssetInfo from './chart-asset-info'
 import draggable from 'vuedraggable'
 
 export default {
   name: 'chartList',
   props: {
-    isModel: {type: Boolean, default: false}
+    isModel: {type: Boolean, default: false},
+    additionalInfo:{}
   },
   components: {
+    chartAssetInfo,
     lineChartBlock,
     chartTable,
     chartUrl,
@@ -816,9 +826,13 @@ export default {
     getChartData(chartInfo, pos, filterType) {
       const chartItem = chartInfo;
       const index = pos; // 指标
-      const len = chartItem.elements.length;
       this.setSize(chartItem.span, index); // 设置该图表宽度
+      if(chartItem.type === 'assetInfo'){
+        this.getAssetInfoChartData(chartItem);
+        return;
+      }
       // 没有数据的设置提示信息暂无数据-针对每一个图
+      const len = chartItem.elements.length;
       if (len === 0) {
         this.$nextTick(() => {
           if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){
@@ -1088,6 +1102,53 @@ export default {
         });
       }
     },
+    getAssetInfoChartData(chartInfo){
+      this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
+      setTimeout(()=>{
+        if(this.additionalInfo){
+          let data={
+            Basic:{
+              sn:'assetInfo Test',
+              host:'192.168.40.42',
+              host1:'192.168.40.42',
+              host2:'192.168.40.42',
+              host3:'192.168.40.42',
+              host4:'192.168.40.42',
+              host5:'192.168.40.42',
+              host6:'192.168.40.42',
+              host7:'192.168.40.42',
+              host8:'192.168.40.42',
+              host9:'192.168.40.42',
+              host10:'192.168.40.42',
+              cpuNum:'8',
+              memery:'12GB',
+              memery$_$free:'3GB'
+            },
+            Feature:{
+              CPU:"Intel E500",
+              Memory:"256GB",
+              NetworkInterface:["eth0","eth1"],
+              Disk:[{
+                mount:"/",
+                total:"256GB",
+                free:"128GB",
+                usageRate:"50%"
+              }]
+            }
+          }
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+        }
+      },1000)
+
+      // this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
+      //   if(response.code == 200){
+      //     let data=response.data;
+      //     this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
+      //   }else{
+      //     this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
+      //   }
+      // })
+    },
     // 设置图表的宽度
     setSize(size, index) {
       this.$nextTick(() => {

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

@@ -369,17 +369,6 @@ export default {
           }
         });
       },
-        // 全屏查看
-        showAllScreen() {
-            this.dropdownMenuShow=false;
-            this.searchTime = [];
-            this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-            this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-            this.$refs.calendarPanel.setCustomTime(this.searchTime);
-
-            this.seriesItemScreen = this.seriesItem;
-            this.screenModal = true;
-        },
         // 设置数据, filter区分
         setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
           if(errorMsg && errorMsg!==''){

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

@@ -91,7 +91,7 @@
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
           <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
-                      ref="chartList" :is-model="from == 'model'"></chart-list>
+                      ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
         </div>
       </el-scrollbar>
     </div>

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

@@ -421,7 +421,9 @@ const cn = {
       reloginPasswordTip: "RELOGIN提示",
       userPwdIntroduce: "请指定用户名和密码提示以便TELNET登录过程可自动运行",
       reLoginPwdIntroduce: "请指定密码提示以便RELOGIN登录过程可自动运行",
-      exporter: "Exporter"
+      exporter: "Exporter",
+      basicTitle:'基础信息',
+      featureTitle:'特征'
     },
     editAssetTab: {
       title: "新增资产",

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

@@ -445,6 +445,8 @@ const en = {
       clickToCover:'Cover',//'覆盖'
       sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
       exporter:'Exporter',
+      basicTitle:'Basic info',
+      featureTitle:'Feature'
     },
     editAssetTab:{
       title:'New asset',//'新增资产'

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

@@ -1081,7 +1081,6 @@
             },
             //点击遮罩层
             zhezhao_click() {
-                console.log(111)
                 if(this.input_sreach!=''){
                   if(!this.searchMsg.zheze_none){
                     if (this.input_sreach!='') {