fix：修改根据valuemapping判断时 动画给不上的问题 ，修改 再次点击同一节点的tab切换问题

feat：添加projec Title的显示

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

@@ -1022,6 +1022,10 @@ const cn = {
       fromArrow:"起点箭头",
       toArrow:"终点箭头",
       arrowColor:"箭头颜色",
+      fontSize:'字体大小',
+      fontColor:'字体颜色',
+      align:'对齐',
+      opacity:'透明度',
     },
   },
   date:{

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

@@ -1028,6 +1028,10 @@ const en = {
       fromArrow:"From arrow",
       toArrow:"To arrow",
       arrowColor:"Arrow color",
+      fontSize:'Font Size',
+      fontColor:'Font Color',
+      align:'Align',
+      opacity:'Opacity',
     },
   },
   date:{

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -820,6 +820,78 @@
                         @change="changeTopologyOpt"></el-input>
             </div>
           </div>
+
+          <div class="project-content-item half">
+            <label>{{$t('project.topology.fontSize')}}</label>
+            <div class="full pr10 h32">
+              <el-input-number
+                @focus="inputFocus"
+                @blur="inputBlur"
+                :precision="2"
+                controls-position="right"
+                size="small"
+                name="fontSize"
+                class="input"
+                v-model.number="topologyData.data.fontSize"
+                :readonly="readonly"
+                required
+                :min="10"
+                @change="changeTopologyOpt(topologyData.data.fontSize,'fontSize')"></el-input-number>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>{{$t('project.topology.fontColor')}}</label>
+            <div class="full pr10 h32">
+              <div class="color-show" @click="colorPickerClick('fontColor')">
+                <div class="color-show-left" :style="{background:topologyData.data.fontColor}"></div>
+                <span class="color-text"> {{topologyData.data.fontColor}}</span>
+                <span class="color-arrows">
+                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['fontColor']&&!$refs['fontColor'].showPicker"></i>
+                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['fontColor']&&$refs['fontColor'].showPicker"></i>
+                </span>
+              </div>
+              <div class="color-content" ref="color-content">
+                <el-color-picker
+                  v-model="topologyData.data.fontColor"
+                  ref="fontColor"
+                  @active-change="(val)=>changeTopologyOpt(val,'fontColor',true)"
+                >
+                </el-color-picker>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>{{$t('project.topology.align')}}</label>
+            <div class="full pr10 h32">
+              <el-radio-group v-model="topologyData.data.align" size="small" @change="changeTopologyOpt">
+                <el-radio-button label="left">left</el-radio-button>
+                <el-radio-button label="bottom">center</el-radio-button>
+                <el-radio-button label="right">right</el-radio-button>
+              </el-radio-group>
+            </div>
+          </div>
+
+          <div class="project-content-item half">
+            <label>{{$t('project.topology.opacity')}}</label>
+            <div class="full pr10 h32">
+              <el-input-number
+                @focus="inputFocus"
+                @blur="inputBlur"
+                :precision="2"
+                controls-position="right"
+                size="small"
+                name="fontSize"
+                class="input"
+                v-model.number="topologyData.data.opacity"
+                :readonly="readonly"
+                required
+                :step="0.2"
+                :min="0"
+                @change="changeTopologyOpt(topologyData.data.opacity,'opacity')"></el-input-number>
+            </div>
+          </div>
         </div>
 
         <div class="project-content-title">
@@ -858,82 +930,7 @@
             </div>
           </div>
 
-          <div class="project-content-item half">
+         <!-- <div class="project-content-item half">
-            <label>{{$t('project.topology.defaultLineWidth')}}</label>
-            <div class="full pr10 h32">
-              <el-input-number
-                @focus="inputFocus"
-                @blur="inputBlur"
-                :precision="2"
-                controls-position="right"
-                size="small"
-                name="x"
-                class="input"
-                v-model.number="topologyData.data.lineWidth"
-                required
-                :min="1"
-                @change="changeTopologyOpt(topologyData.data.lineWidth,'lineWidth')">
-              </el-input-number>
-            </div>
-          </div>
-
-          <div class="project-content-item half">
-            <label>{{$t('project.topology.grids')}}</label>
-            <div class="full pr10 h32">
-              <el-switch
-                v-model="topologyData.data.grid"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#ee9d3f"
-                @change="changeTopologyOpt(topologyData.data.grid,'grid')">
-              </el-switch>
-            </div>
-          </div>
-
-          <div class="project-content-item half">
-            <label>{{$t('project.topology.gridSize')}}</label>
-            <div class="full pr10 h32">
-              <el-input-number
-                @focus="inputFocus"
-                @blur="inputBlur"
-                :precision="2"
-                controls-position="right"
-                size="small"
-                name="x"
-                :min="0"
-                class="input"
-                v-model.number="topologyData.data.gridSize"
-                :readonly="readonly"
-                required
-                @change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
-            </div>
-          </div>
-
-          <div class="project-content-item half">
-            <label>{{$t('project.topology.gridColor')}}</label>
-            <div class="full pr10 h32">
-              <div class="color-show" @click="colorPickerClick('gridColor')">
-                <div class="color-show-left" :style="{background:topologyData.data.gridColor}"></div>
-                <span class="color-text"> {{topologyData.data.gridColor}}</span>
-                <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['gridColor']&&!$refs['gridColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['gridColor']&&$refs['gridColor'].showPicker"></i>
-                </span>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  v-model="topologyData.data.gridColor"
-                  ref="gridColor"
-                  @active-change="(val)=>changeTopologyOpt(val,'gridColor',true)"
-                >
-                </el-color-picker>
-              </div>
-
-
-            </div>
-          </div>
-
-          <div class="project-content-item half">
             <label>{{$t('project.topology.rule')}}</label>
             <div class="full pr10 h32">
               <el-switch
@@ -946,28 +943,6 @@
             </div>
           </div>
 
-          <div class="project-content-item half">
-            <label>{{$t('project.topology.ruleColor')}}</label>
-            <div class="full pr10 h32">
-              <div class="color-show" @click="colorPickerClick('ruleColor')">
-                <div class="color-show-left" :style="{background:topologyData.data.ruleColor}"></div>
-                <span class="color-text"> {{topologyData.data.ruleColor}}</span>
-                <span class="color-arrows">
-                  <i class="nz-icon nz-icon-arrow-down" v-if="$refs['ruleColor']&&!$refs['ruleColor'].showPicker"></i>
-                  <i class="nz-icon nz-icon-arrow-up" v-if="$refs['ruleColor']&&$refs['ruleColor'].showPicker"></i>
-                </span>
-              </div>
-              <div class="color-content" ref="color-content">
-                <el-color-picker
-                  v-model="topologyData.data.ruleColor"
-                  ref="ruleColor"
-                  @active-change="(val)=>changeTopologyOpt(val,'ruleColor',true)"
-                >
-                </el-color-picker>
-              </div>
-            </div>
-          </div>
-
           <div class="project-content-item half special-select">
             <label>{{$t('project.topology.defaultStartArrow')}}</label>
             <div class="full pr10 h32">
@@ -1066,7 +1041,7 @@
                 </el-option>
               </el-select>
             </div>
-          </div>
+          </div>-->
 
         </div>
 
@@ -1212,6 +1187,10 @@
             projectInfo:true,
             alertInfo:true,
             url:'',
+            fontSize:14,
+            align:'left',
+            fontColor:"#000000",
+            opacity:1,
           }
         },
         pen:{
@@ -1379,12 +1358,11 @@
     },
     created(){
       let dataOption=getTopology(this.index).data;
-      console.log(dataOption);
       if(!dataOption.data){
         dataOption.data={}
       }
       Object.keys(this.topologyData.data).forEach((key)=>{
-       if(key === 'projectInfo' || key === 'alertInfo'){
+        if(key === 'projectInfo' || key === 'alertInfo' || key==='fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity'){
          this.topologyData.data[key]=(JSON.stringify(dataOption.data[key])?dataOption.data[key]:this.topologyData.data[key]);
        } else {
          this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
@@ -1397,9 +1375,8 @@
       // this.topologyData.data.rule= !!dataOption.rule;
       // this.topologyData.data.projectInfo= !!dataOption.projectInfo;
       // this.topologyData.data.alertInfo= !!dataOption.alertInfo;
-      console.log(this.topologyData);
     },
-    updated(){
+    updated(n,o){
       if(!this.selection.pen){//没选中node line返回
         return;
       }
@@ -1455,7 +1432,6 @@
         })
       },
       tabClick(n){
-        console.log(n);
         if(this.selection.pen&&this.tab=='1'){
 
         }
@@ -1473,7 +1449,6 @@
         this.onChange()
       },
       onChange(value){
-        console.log(value,this.selection.pen.lineWidth)
         if(value==='lineWidth'){
           this.selection.pen.lineWidth=this.selection.pen.data.lineWidth;
         }
@@ -1538,8 +1513,6 @@
       colorPickerClickTable(ref,row){
         row.showColor=row.color.fill;
         row.showType='fill';
-        console.log(row);
-        console.log(this.$refs[ref]);
         this.$nextTick(()=>{
           this.$refs[ref][0].showPicker=true;
         })
@@ -1577,7 +1550,6 @@
             flag=true
           }
         })
-        console.log(obj,flag);
         if(flag){
           return
         }
@@ -1594,13 +1566,12 @@
           this.topologyData.data[key]=val;
         }
         Object.keys(this.topologyData.data).forEach((key1)=>{
-          if(key1 === 'projectInfo' || key1 === 'alertInfo'){
+          if(key1 === 'projectInfo' || key1 === 'alertInfo' || key1==='fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity'){
             getTopology(this.index).data.data[key1]=this.topologyData.data[key1];
           } else {
             getTopology(this.index).data[key1]=this.topologyData.data[key1];
           }
         });
-        // console.log(dataOption[key]);
         getTopology(this.index).render();
       },
       colorRGBtoHex(color){//获取颜色16进制数
@@ -1673,7 +1644,7 @@
         });
       },
       valueMappingValueChange(index,row){
-        console.log(index,row)
+
       },
       valueMappingDel(index,row){
         this.selection.pen.data.valueMapping.splice(index,1);
@@ -1682,7 +1653,6 @@
         });
       },
       inputFocus(e){
-        console.log(e.path[2].children[0],e.path[2].children[1]);
         e.path[2].children[0].setAttribute("tabindex","0");
         e.path[2].children[1].setAttribute("tabindex","1");
       },
@@ -1772,6 +1742,9 @@
     .half.project-content-item {
       width: calc(50% - 15px);
       height: 64px;
+      label{
+        width: auto;
+      }
     }
 
     .project-content-item {

nezha-fronted/src/components/common/project/L5/services/canvas.js

@@ -312,6 +312,7 @@ export function myCubeAnchors(node) {//立方体锚点
 
 
 export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
+  node.animateType=animateType;
   if (node.animateType === 'custom') {
     return;
   }

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -2,10 +2,10 @@
   <div class="tooltip-box" style="display: flex;" v-if="isChart||chartData.tooltipShow">
     <span class="temp-dom"></span>
     <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
-      <line-chart-block v-if="isChart || chartData.type !== 'table'"
+      <line-chart-block v-show="isChart || chartData.type !== 'table'"
                         :key="'inner' + chartData.id"
                         :from="'project'"
-                        :ref="'editChart' + 0"
+                        :ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
                         :temp-dom="tempDom"
                         :panel-id="-1"
                         :is-lock="true"
@@ -13,17 +13,15 @@
                         :chartTitleShow="false"
                         :chart-data="chartData">
       </line-chart-block>
+      <chart-table  v-show="isChart || chartData.type === 'table'"
+                    :key="'inner' + 1"
+                    :from="'project'"
+                    ref="editCharttable"
+                    :is-lock="true"
+                    :panel-id="-1"
+                    :chart-data="chartData"
+                    :chart-index="0"></chart-table>
     </div>
-
-    <!--<chart-table  v-if="chartData.type === 'table'"-->
-                  <!--:ref="'editChart'+0"-->
-                  <!--:key="'inner' + 0"-->
-                  <!--:from="'project'"-->
-                  <!--:ref="'editChart' + 0"-->
-                  <!--:is-lock="true"-->
-                  <!--:panel-id="-1"-->
-                  <!--:chart-data="chartData"-->
-                  <!--:chart-index="0"></chart-table>-->
     <div class="tooltip-box-info" v-if="!isChart">
       <expression-info :chart-data="chartData" :filterTime="filterTime"/>
     </div>
@@ -33,6 +31,7 @@
 <script>
   import chart from '../../../page/dashboard/overview/chart';
   import lineChartBlock from '../../../charts/line-chart-block';
+  import chartTable from '../../../charts/chart-table';
   import bus from "../../../../libs/bus";
   import axios from 'axios';
   import ExpressionInfo from "../popData/expressionInfo";
@@ -41,6 +40,7 @@
     components:{
       ExpressionInfo,
       lineChartBlock,
+      chartTable,
     },
     props:{
       chartDataParent:{
@@ -56,7 +56,6 @@
       chartDataParent:{
         immediate: true,
         handler(n){
-          console.log(n);
           this.process(n)
         },
 
@@ -65,7 +64,7 @@
     data(){
 		  return{
         tempDom: {height: 400, width: ""},
-        chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
+        chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","url":"","nullType":"connected"},"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
         chartData:{},
         filter:{
           end_time:bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss'),
@@ -120,8 +119,8 @@
           const len = chartItem.elements.length;
           if (len === 0) {
             this.$nextTick(() => {
-              if (this.$refs['editChart' + chartItem.id]) {
+              if (this.$refs['editChart' + chartItem.type]) {
-                this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId, this.filter, []);
+                this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId, this.filter, []);
               }
             });
           } else {
@@ -151,7 +150,6 @@
             setTimeout(()=>{
               this.$nextTick(() => {
                 let res=chartItem.res;
-                console.log(res);
                 if (res.length > 0) {
                   let series = [];
                   let singleStatRlt = '';
@@ -168,17 +166,7 @@
                     if (response.status === 'success') {
                       errorMsg = "";
                       if (response.data.result) {
-                        // 循环处理每个elements下获取的数据列
+                        // 循环处理每个elements下获取的数据
-                        if (chartItem.type === 'singleStat') {
-                          if (response.data.result.length === 1) {
-                            let statistics = chartItem.param.statistics;
-                            if (response.data.result[0].values) {
-                              singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
-                            }
-                          } else if (response.data.result.length > 1) {
-                            singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
-                          }
-                        } else {
                         response.data.result.forEach((queryItem, resIndex) => {
                             let seriesItem = {
                               theData: {
@@ -198,11 +186,6 @@
                               metric_name: '',
                             };
 
-                            if (chartInfo.type === 'stackArea') {
-                              seriesItem.theData.type = 'line';
-                              seriesItem.theData.stack = chartInfo.title;
-                              seriesItem.theData.areaStyle = {"opacity": 0.3};
-                            }
                             if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
                               seriesItem.theData.markLine={
                                 silent: true,
@@ -238,7 +221,7 @@
                               return [item[0], [item[1][0], Number(item[1][1])]]
                             });
                             // 判断是否有数据, && tagsArr.length > 0
-                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id]) {
+                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
                               tagsArr.forEach((tag, i) => {
                                 if (tag !== '__name__') {
                                   host += `${tag}="${queryItem.metric[tag]}",`;
@@ -254,7 +237,7 @@
                                 host = chartItem.elements[innerPos].expression;
                               }
                               //处理legend别名
-                              let alias = this.$refs['editChart' + chartItem.id].dealLegendAlias(host, chartItem.elements[innerPos].legend);
+                              let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend);
                               if (!alias || alias === '') {
                                 alias = host;
                               }
@@ -288,21 +271,9 @@
                               });
                               series.push(seriesItem.theData);
                               seriesItem = null;
-                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                              // 无数据提示
-                              /*
-                              const currentInfo = chartItem.elements[innerPos];
-                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                              this.$message.warning({
-                                duration: 15,
-                                content: errorMsg,
-                                closable: true,
-                              });
-                              */
                             }
                           });
                       }
-                      }
                     } else {
                       if (response.msg) {
                         //this.$message.error(response.msg);
@@ -316,7 +287,7 @@
                       }
                     }
                   });
-                  if (this.$refs['editChart' + chartItem.id]) {
+                  if (this.$refs['editChart' + chartItem.type]) {
                     let chartData = {
                       chartItem: chartItem,
                       series: series,
@@ -329,61 +300,23 @@
                       errorMsg: errorMsg,
                     }
                     if (chartItem.type === 'table') {//表格
-                      if (filterType === 'showFullScreen') {//全屏查询
+                      this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,this.filter.panelId, this.filter, filterType, errorMsg);
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
-                          this.filter.panelId, this.filter, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, tableData,
-                          this.filter.panelId, this.filter, '', errorMsg);
-                      }
                     } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
                       if (series.length && chartItem.type === 4) {//曲线汇总
                         //series.push(sumData);//后续需要
                       }
-                      if (filterType === 'showFullScreen') {//全屏查询
+                      this.$refs['editChart' + chartItem.type].setData(chartItem, series,this.filter.panelId, this.filter, legend, '', errorMsg);
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, series,
-                          this.filter.panelId, this.filter, legend, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, series,
-                          this.filter.panelId, this.filter, legend, '', errorMsg);
-                      }
-                    } else if (chartItem.type === 'singleStat') {
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
-                          this.filter.panelId, this.filter, filterType, errorMsg);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, singleStatRlt,
-                          this.filter.panelId, this.filter, '', errorMsg);
-                      }
                     }
                   }
                 } else {
                   const type = chartItem.type;
-                  if (this.$refs['editChart' + chartItem.id] ) {
+                  if (this.$refs['editChart' + chartItem.type] ) {
                     if (type === 'table') {
-                      if (filterType === 'showFullScreen') {//table的全屏查询
+                      this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
                         this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
-                          this.filter);
-                      }
                     } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
-                      if (filterType === 'showFullScreen') {//table的全屏查询
+                      this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
                         this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, [], this.filter.panelId,
-                          this.filter);
-                      }
-                    } else if (chartItem.type === 'singleStat') {
-                      if (filterType === 'showFullScreen') {//全屏查询
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, '',
-                          this.filter.panelId, this.filter, filterType);
-                      } else {
-                        this.$refs['editChart' + chartItem.id].setData(chartItem, '',
-                          this.filter.panelId, this.filter);
-                      }
                     }
                   }
                 }

nezha-fronted/src/components/common/project/L5/topologyTopTool.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tool-top" id="tool-top">
-    <div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']"  @click="undo"> <i class="nz-icon nz-icon-revoke" /> </div>
+    <div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']"  @click="undo"> <i class="nz-icon nz-icon-revoke" :title="'撤销'"/> </div>
-    <div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-revoke1" /> </div>
+    <div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-revoke1"  :title="'重做'"/> </div>
     <!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
     <!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
     <!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
@@ -19,6 +19,7 @@
             popper-class="scale-number-popover"
            >
             <div class="scale-num-pop" style=" width: 91px;min-width: 91px">
+              <div>缩放级别</div>
               <div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
               <div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
               <div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
@@ -28,6 +29,26 @@
           <span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
         </span>
     </div>
+    <div  class="top-tool-item top-tool-item-switch">
+      <label>{{$t('project.topology.grids')}}</label>
+      <el-switch
+        v-model="option.grid"
+        :active-value="true"
+        :inactive-value="false"
+        active-color="#ee9d3f"
+        @change="changeOption('grid')">
+      </el-switch>
+    </div>
+    <div class="top-tool-item top-tool-item-switch">
+      <label>{{$t('project.topology.rule')}}</label>
+      <el-switch
+        v-model="option.rule"
+        :active-value="true"
+        :inactive-value="false"
+        active-color="#ee9d3f"
+        @change="changeOption('rule')">
+      </el-switch>
+    </div>
     <!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
 
   </div>
@@ -46,6 +67,8 @@
           fromArrow:'',
           toArrow:'triangleSolid',
           scale:100,
+          grid:false,
+          rule:false,
         },
         scaleNum:100,
         penLineType:[
@@ -88,7 +111,7 @@
         if(key==='scale'){
           this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
         }else{
-          this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
+          this.option[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.option[key]);
         }
       })
     },
@@ -96,6 +119,7 @@
       // todo 1清空后的 处理属性工具的默认值 2工具栏的移动 以及节点工具和属性工具的移动 3 结束箭头类型的方向
       changeOption(key){
         getTopology(this.index).data[key]=this.option[key];
+        getTopology(this.index).render();
       },
       undo(){//撤销
         getTopology(this.index).undo();
@@ -133,14 +157,16 @@
       clear(){
         let data={...getTopology(this.index).data};
         data.pens=[];
-        getTopology(this.index).open(data);
+        getTopology(this.index).open({});
       },
       toolShowChange(attr){
         this.$emit('toolShowChange',attr);
-      }
+      },
+      changeOpt(key,val){
 
       }
     }
+  }
 </script>
 <style lang="scss">
   .scale-number-popover{
@@ -242,6 +268,12 @@
         margin-right: 5px;
       }
   }
+  .top-tool-item-switch{
+    padding: 5px 11px;
+    label{
+      vertical-align: middle;
+    }
+  }
   .top-tool-item-disabled{
     color: #CECECE;
     opacity: 0.3;

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -5,63 +5,6 @@
 <template>
   <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
     <!--project主要信息-->
-    <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
-      <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
-        <div class="facade-top-title">
-          Project information
-        </div>
-        <div>
-          <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
-          <span><span class="label">Name :</span>{{projectInfo.name}}</span>
-        </div>
-        <div>
-          <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-        </div>
-        <!--<div>-->
-        <!--<span>-->
-        <!--<span class="label">Alert state :</span>-->
-        <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-        <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-        <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-        <!--</span>-->
-        <!--</div>-->
-        <div>
-          <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
-        </div>
-      </div>
-      <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
-        <div class="facade-top-title">
-          <span class="label" style="padding-left: 0;">Alert :</span>
-          {{projectInfo.total}}
-        </div>
-        <div class="facade-top-right-content">
-          <div>
-            <div class="content-P1-title">
-              {{returnSeverityLabel('P1')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[0] || 0}}
-            </div>
-          </div>
-          <div>
-            <div class="content-P2-title">
-              {{returnSeverityLabel('P2')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[1] || 0}}
-            </div>
-          </div>
-          <div style="margin-bottom: 20px;">
-            <div class="content-P3-title">
-              {{returnSeverityLabel('P3')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[2] || 0}}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
         <!--工具栏-->
@@ -131,6 +74,7 @@
                   </svg>
                 </div>
               </div>
+                <el-option :disabled="true" :value="false">默认连线类型</el-option>
                 <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
                   <div class="icon-item">
                     <svg>
@@ -174,7 +118,69 @@
            </button>
          </span>
       </div>
-      <span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
+      <div style="width: 100%;display: flex;justify-content: space-between">
+        <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
+          <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
+            <div class="facade-top-title">
+              Project information
+            </div>
+            <div>
+              <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
+              <span><span class="label">Name :</span>{{projectInfo.name}}</span>
+            </div>
+            <div>
+              <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+            </div>
+            <!--<div>-->
+            <!--<span>-->
+            <!--<span class="label">Alert state :</span>-->
+            <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
+            <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
+            <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
+            <!--</span>-->
+            <!--</div>-->
+            <div>
+              <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
+            </div>
+          </div>
+          <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
+            <div class="facade-top-title">
+              <span class="label" style="padding-left: 0;">Alert :</span>
+              {{projectInfo.total}}
+            </div>
+            <div class="facade-top-right-content">
+              <div>
+                <div class="content-P1-title">
+                  {{returnSeverityLabel('P1')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[0] || 0}}
+                </div>
+              </div>
+              <div>
+                <div class="content-P2-title">
+                  {{returnSeverityLabel('P2')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[1] || 0}}
+                </div>
+              </div>
+              <div style="margin-bottom: 20px;">
+                <div class="content-P3-title">
+                  {{returnSeverityLabel('P3')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[2] || 0}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
+
+
+
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
         >
@@ -185,6 +191,7 @@
                            ref="pickTime"></pick-time>
       </span>
       </div>
+    </div>
     <div class="page">
       <!--画布部分-->
       <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
@@ -364,6 +371,13 @@
           bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
           bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
         ],
+        topologyInfo:{
+          fontSize:14,
+          align:'left',
+          fontColor:"#000000",
+          opacity:1,
+          name:'',
+        },
         saveData:{},
         dataLength:0,
         editTopologyFlag:false,
@@ -445,6 +459,7 @@
         projectInfoShow:false,
         projectAlertShow:false,
         previewShow:false,
+        penId:undefined,
       };
     },
     components:{
@@ -634,7 +649,6 @@
                 getTopology(this.topologyIndex).centerView(50);
                 setTimeout(()=>{
                   getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                    console.log(item.animatePlay,123123123123123123123)
                    if(item.animatePlay){
                      item.stopAnimate();
                      setTimeout(()=>{
@@ -694,6 +708,7 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
+              this.objChange=false;
               if(this.fromOverView){
                 let flag=false;
 
@@ -712,9 +727,9 @@
                     flag=true
                   }
                 });
+                getTopology(this.topologyIndex).centerView(50);
                 setTimeout(()=>{
                   getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                    console.log(item.animatePlay,123123123123123123123)
                     if(item.animatePlay){
                       item.stopAnimate();
                       setTimeout(()=>{
@@ -757,9 +772,7 @@
           }
           this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
             let data=res.data.topo;
-            console.log(data,'topo')
             if(!res.data.topo || !data.pens){
-              console.log(123123123123);
               data={
                 bkColor:'#FFFFFF',
                 gridSize:10,
@@ -770,8 +783,16 @@
               this.projectInfoShow=true;
               this.projectAlertShow=true;
               this.saveData={...data};
+              this.topologyInfo.name=this.obj.name;
               resolve(data);
             }else{
+              this.topologyInfo={
+                fontSize:data.data.fontSize,
+                align:data.data.align,
+                fontColor:data.data.fontColor,
+                opacity:data.data.opacity,
+                name:data.name
+              }
               let timer=setInterval(()=>{
                 if(!this.imgInit){
                   return
@@ -802,7 +823,6 @@
                 }
 
                 Promise.all(promiseArr).then(res=>{
-                  console.log(res);
                   res.forEach((response,index)=>{
                     let item=data.pens[index];
                       if(item.type===0){
@@ -820,7 +840,6 @@
                           item.data.state.alert=true;
                         }
                         item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
-                        console.log(item.data);
                       }
                   });
                   self.saveData={...data};
@@ -854,7 +873,6 @@
             }
           })
         }
-        
         if(maxLevel!==0){
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -1036,7 +1054,6 @@
 
       //显示module的工具
       showNodeTools(index,pen){
-        console.log(pen);
         this.nodesArr.forEach((item,i)=>{
           item.data.show=i===index;
         })
@@ -1104,7 +1121,7 @@
       },
 
       onMessage(event,data,e){
-        console.log('onMessage',event,data);
+        // console.log('onMessage',event,data);
         // console.log(getTopology(this.topologyIndex))
         if(getTopology(this.topologyIndex)){
           this.cachesIndex=getTopology(this.topologyIndex).caches.index;
@@ -1141,8 +1158,8 @@
                 level:0,
                 base:true,
               }],
-              expressArr:[],
+              expressArr:[""],
-              legends:[],
+              legends:[""],
               tooltipShow:true,
               panelName:'topologyName',
               unit:2,
@@ -1175,8 +1192,8 @@
                 level:0,
                 base:true,
               }],
-              expressArr:[],
+              expressArr:[""],
-              legends:[],
+              legends:[""],
               tooltipShow:true,
               panelName:'topologyName',
               unit:2,
@@ -1188,7 +1205,6 @@
               url:'',
             };
             data.animateColor='#FA901C'
-            console.log(data);
           }
           if(data.type===0||data.type===1){
             data.lineWidth=data.data.lineWidth;
@@ -1247,8 +1263,11 @@
               };
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
+                  if(this.penId!==data.id){
                     this.$refs.CanvasProps.tab='1';
                   }
+                  this.penId=data.id;
+                }
               });
               break;
             case 'line':
@@ -1268,8 +1287,11 @@
               }
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
+                  if(this.penId!==data.id){
                     this.$refs.CanvasProps.tab='1';
                   }
+                  this.penId=data.id;
+                }
               });
               break;
             case 'multi':
@@ -1284,6 +1306,7 @@
               };
               break;
             case 'space':
+              this.penId=undefined;
               this.props={
                 node:null,
                 line:null,
@@ -1321,7 +1344,6 @@
               }
               break;
             case 'resize':
-              console.log(this.topologyIndexF);
               let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
               this.toolShow.attrCord=[domRect.width-350,0];
               this.toolShow.height=domRect.height;
@@ -1577,6 +1599,7 @@
           getTopology(this.topologyIndex).lock(0);
           getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
             item.stopAnimate();
+            item.animateType=item.data.animateType;
             if(item.type===0){
               item.fillStyle=item.data.fillStyle;
               item.strokeStyle=item.data.strokeStyle;
@@ -1631,8 +1654,12 @@
         });
         if(flag){
           this.editTopologyFlag=false;
+          topologyData.rule=false;
+          topologyData.grid=false;
+          topologyData.gridSize=10;
           topologyData.pens.forEach(item=>{
             item.animatePlay=item.data.animatePlay;
+            item.data.animateType=item.animateType;
             if(item.type===0&&JSON.stringify(item.data.imageId)){
               item.image="";
               item.animateFrames=[];
@@ -1700,7 +1727,9 @@
         data.pens.forEach((item)=>{
           item.animatePlay=item.data.animatePlay;
         });
-        this.topoPrevData=data;
+        this.topoPrevData=JSON.parse(JSON.stringify(data));
+        this.topoPrevData.rule=false;
+        this.topoPrevData.grid=false;
         this.previewShow=true;
       },
       /*tools 方法*/
@@ -1739,12 +1768,10 @@
         }
       },
       previewBeforeClose(done){
-        console.log(123123123123);
         this.$emit('changeTopologyIndexF');
         done();
       },
       selpopIs(pen,state){//判断是否有图表
-        console.log(pen,state)
         let flag=true;
         if(state.id==='other'){
           flag=false;
@@ -1755,7 +1782,6 @@
         return flag
       },
       modelPopError(pen,state){
-        console.log(pen,state)
         return false;
         if(item.id==='asset'&&this.activeModelItem.assetError){
           return true;
@@ -2072,16 +2098,13 @@
   .facade-top{
     min-height: 138px;
     display: flex;
-    margin: 12px 0;
+    margin: 4px 0;
     height: calc(16% - 40px);
     font-size: 12px;
-    position: absolute;
-    top: 5px;
-    left: 15px;
     z-index: 10;
+    padding-left: 15px;
   }
   .facade-top > div{
-    height: calc(100% - 40px);
     width: 18%;
     min-width: 315px;
     background: #FFFFFF;
@@ -2275,7 +2298,7 @@
   }
 
   .special-select /deep/ .el-select-dropdown {
-    width: 75px !important;
+    width: 130px !important;
 
     .el-select-dropdown__item {
       padding: 0 0 0 10px;

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -5,63 +5,6 @@
 <template>
   <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
     <!--project主要信息-->
-    <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
-      <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
-        <div class="facade-top-title">
-          Project information
-        </div>
-        <div>
-          <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
-          <span><span class="label">Name :</span>{{projectInfo.name}}</span>
-        </div>
-        <div>
-          <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-        </div>
-        <!--<div>-->
-        <!--<span>-->
-        <!--<span class="label">Alert state :</span>-->
-        <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-        <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-        <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-        <!--</span>-->
-        <!--</div>-->
-        <div>
-          <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
-        </div>
-      </div>
-      <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
-        <div class="facade-top-title">
-          <span class="label" style="padding-left: 0;">Alert :</span>
-          {{projectInfo.total}}
-        </div>
-        <div class="facade-top-right-content">
-          <div>
-            <div class="content-P1-title">
-              {{returnSeverityLabel('P1')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[0] || 0}}
-            </div>
-          </div>
-          <div>
-            <div class="content-P2-title">
-              {{returnSeverityLabel('P2')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[1] || 0}}
-            </div>
-          </div>
-          <div style="margin-bottom: 20px;">
-            <div class="content-P3-title">
-              {{returnSeverityLabel('P3')}}
-            </div>
-            <div>
-              {{projectInfo.alertStat[2] || 0}}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
       <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
         <!--工具栏-->
@@ -131,6 +74,7 @@
                   </svg>
                 </div>
               </div>
+                <el-option :disabled="true" :value="false">默认连线类型</el-option>
                 <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
                   <div class="icon-item">
                     <svg>
@@ -174,7 +118,69 @@
            </button>
          </span>
       </div>
-      <span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
+      <div style="width: 100%;display: flex;justify-content: space-between">
+        <div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
+          <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
+            <div class="facade-top-title">
+              Project information
+            </div>
+            <div>
+              <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
+              <span><span class="label">Name :</span>{{projectInfo.name}}</span>
+            </div>
+            <div>
+              <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+            </div>
+            <!--<div>-->
+            <!--<span>-->
+            <!--<span class="label">Alert state :</span>-->
+            <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
+            <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
+            <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
+            <!--</span>-->
+            <!--</div>-->
+            <div>
+              <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
+            </div>
+          </div>
+          <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
+            <div class="facade-top-title">
+              <span class="label" style="padding-left: 0;">Alert :</span>
+              {{projectInfo.total}}
+            </div>
+            <div class="facade-top-right-content">
+              <div>
+                <div class="content-P1-title">
+                  {{returnSeverityLabel('P1')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[0] || 0}}
+                </div>
+              </div>
+              <div>
+                <div class="content-P2-title">
+                  {{returnSeverityLabel('P2')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[1] || 0}}
+                </div>
+              </div>
+              <div style="margin-bottom: 20px;">
+                <div class="content-P3-title">
+                  {{returnSeverityLabel('P3')}}
+                </div>
+                <div>
+                  {{projectInfo.alertStat[2] || 0}}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.type,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag">
+
+
+
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
                 style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
         >
@@ -185,6 +191,7 @@
                            ref="pickTime"></pick-time>
       </span>
       </div>
+    </div>
     <div class="page">
       <!--画布部分-->
       <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
@@ -364,6 +371,13 @@
           bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
           bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
         ],
+        topologyInfo:{
+          fontSize:14,
+          align:'left',
+          fontColor:"#000000",
+          opacity:1,
+          name:'',
+        },
         saveData:{},
         dataLength:0,
         editTopologyFlag:false,
@@ -445,6 +459,7 @@
         projectInfoShow:false,
         projectAlertShow:false,
         previewShow:false,
+        penId:undefined,
       };
     },
     components:{
@@ -634,7 +649,6 @@
                 getTopology(this.topologyIndex).centerView(50);
                 setTimeout(()=>{
                   getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                    console.log(item.animatePlay,123123123123123123123)
                     if(item.animatePlay){
                       item.stopAnimate();
                       setTimeout(()=>{
@@ -694,6 +708,7 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
+              this.objChange=false;
               if(this.fromOverView){
                 let flag=false;
 
@@ -712,9 +727,9 @@
                     flag=true
                   }
                 });
+                getTopology(this.topologyIndex).centerView(50);
                 setTimeout(()=>{
                   getTopology(this.topologyIndex).data.pens.forEach(item=>{
-                    console.log(item.animatePlay,123123123123123123123)
                     if(item.animatePlay){
                       item.stopAnimate();
                       setTimeout(()=>{
@@ -757,9 +772,7 @@
           }
           this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
             let data=res.data.topo;
-            console.log(data,'topo')
             if(!res.data.topo || !data.pens){
-              console.log(123123123123);
               data={
                 bkColor:'#FFFFFF',
                 gridSize:10,
@@ -770,8 +783,16 @@
               this.projectInfoShow=true;
               this.projectAlertShow=true;
               this.saveData={...data};
+              this.topologyInfo.name=this.obj.name;
               resolve(data);
             }else{
+              this.topologyInfo={
+                fontSize:data.data.fontSize,
+                align:data.data.align,
+                fontColor:data.data.fontColor,
+                opacity:data.data.opacity,
+                name:data.name
+              }
               let timer=setInterval(()=>{
                 if(!this.imgInit){
                   return
@@ -802,7 +823,6 @@
                 }
 
                 Promise.all(promiseArr).then(res=>{
-                  console.log(res);
                   res.forEach((response,index)=>{
                     let item=data.pens[index];
                     if(item.type===0){
@@ -820,7 +840,6 @@
                         item.data.state.alert=true;
                       }
                       item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
-                      console.log(item.data);
                     }
                   });
                   self.saveData={...data};
@@ -854,7 +873,6 @@
             }
           })
         }
-
         if(maxLevel!==0){
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -1036,7 +1054,6 @@
 
       //显示module的工具
       showNodeTools(index,pen){
-        console.log(pen);
         this.nodesArr.forEach((item,i)=>{
           item.data.show=i===index;
         })
@@ -1104,7 +1121,7 @@
       },
 
       onMessage(event,data,e){
-        console.log('onMessage',event,data);
+        // console.log('onMessage',event,data);
         // console.log(getTopology(this.topologyIndex))
         if(getTopology(this.topologyIndex)){
           this.cachesIndex=getTopology(this.topologyIndex).caches.index;
@@ -1141,8 +1158,8 @@
                 level:0,
                 base:true,
               }],
-              expressArr:[],
+              expressArr:[""],
-              legends:[],
+              legends:[""],
               tooltipShow:true,
               panelName:'topologyName',
               unit:2,
@@ -1175,8 +1192,8 @@
                 level:0,
                 base:true,
               }],
-              expressArr:[],
+              expressArr:[""],
-              legends:[],
+              legends:[""],
               tooltipShow:true,
               panelName:'topologyName',
               unit:2,
@@ -1188,7 +1205,6 @@
               url:'',
             };
             data.animateColor='#FA901C'
-            console.log(data);
           }
           if(data.type===0||data.type===1){
             data.lineWidth=data.data.lineWidth;
@@ -1247,8 +1263,11 @@
               };
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
+                  if(this.penId!==data.id){
                     this.$refs.CanvasProps.tab='1';
                   }
+                  this.penId=data.id;
+                }
               });
               break;
             case 'line':
@@ -1268,8 +1287,11 @@
               }
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
+                  if(this.penId!==data.id){
                     this.$refs.CanvasProps.tab='1';
                   }
+                  this.penId=data.id;
+                }
               });
               break;
             case 'multi':
@@ -1284,6 +1306,7 @@
               };
               break;
             case 'space':
+              this.penId=undefined;
               this.props={
                 node:null,
                 line:null,
@@ -1321,7 +1344,6 @@
               }
               break;
             case 'resize':
-              console.log(this.topologyIndexF);
               let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
               this.toolShow.attrCord=[domRect.width-350,0];
               this.toolShow.height=domRect.height;
@@ -1577,6 +1599,7 @@
           getTopology(this.topologyIndex).lock(0);
           getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
             item.stopAnimate();
+            item.animateType=item.data.animateType;
             if(item.type===0){
               item.fillStyle=item.data.fillStyle;
               item.strokeStyle=item.data.strokeStyle;
@@ -1631,8 +1654,12 @@
         });
         if(flag){
           this.editTopologyFlag=false;
+          topologyData.rule=false;
+          topologyData.grid=false;
+          topologyData.gridSize=10;
           topologyData.pens.forEach(item=>{
             item.animatePlay=item.data.animatePlay;
+            item.data.animateType=item.animateType;
             if(item.type===0&&JSON.stringify(item.data.imageId)){
               item.image="";
               item.animateFrames=[];
@@ -1700,7 +1727,9 @@
         data.pens.forEach((item)=>{
           item.animatePlay=item.data.animatePlay;
         });
-        this.topoPrevData=data;
+        this.topoPrevData=JSON.parse(JSON.stringify(data));
+        this.topoPrevData.rule=false;
+        this.topoPrevData.grid=false;
         this.previewShow=true;
       },
       /*tools 方法*/
@@ -1739,12 +1768,10 @@
         }
       },
       previewBeforeClose(done){
-        console.log(123123123123);
         this.$emit('changeTopologyIndexF');
         done();
       },
       selpopIs(pen,state){//判断是否有图表
-        console.log(pen,state)
         let flag=true;
         if(state.id==='other'){
           flag=false;
@@ -1755,7 +1782,6 @@
         return flag
       },
       modelPopError(pen,state){
-        console.log(pen,state)
         return false;
         if(item.id==='asset'&&this.activeModelItem.assetError){
           return true;
@@ -2072,16 +2098,13 @@
   .facade-top{
     min-height: 138px;
     display: flex;
-    margin: 12px 0;
+    margin: 4px 0;
     height: calc(16% - 40px);
     font-size: 12px;
-    position: absolute;
-    top: 5px;
-    left: 15px;
     z-index: 10;
+    padding-left: 15px;
   }
   .facade-top > div{
-    height: calc(100% - 40px);
     width: 18%;
     min-width: 315px;
     background: #FFFFFF;
@@ -2275,7 +2298,7 @@
   }
 
   .special-select /deep/ .el-select-dropdown {
-    width: 75px !important;
+    width: 130px !important;
 
     .el-select-dropdown__item {
       padding: 0 0 0 10px;