NEZ-805 fix ：diagram 图表bug

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -317,7 +317,7 @@ import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
   canvasRegister,
-  imageTemp,
+  imageTemp2,
   myShape,
   myAnchors,
   myIconRect2,
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect2, myTextRect2)
+registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {
@@ -616,6 +616,7 @@ export default {
           })
           Promise.all(promiseArr).then((res) => {
             getTopology(this.topologyIndex).open(data)
+            console.log(data)
             getTopology(this.topologyIndex).lock(1)
             this.objChange = false
             let flag = false
@@ -1016,6 +1017,7 @@ export default {
     /* topology 方法 */
     onDrag (event, node) {
       this.dragFlag = false
+      node.data.text = ''
       setTimeout(() => {
         this.dragFlag = true
       }, 100)
@@ -1486,9 +1488,9 @@ export default {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
-                ...imageTemp,
+                ...imageTemp2,
                 data: {
-                  ...imageTemp.data,
+                  ...imageTemp2.data,
                   text: res.data.imageName,
                   image: data,
                   imageId: res.data.id,
@@ -1499,9 +1501,9 @@ export default {
               this.tools.push({
                 group: this.uploadPic.unit,
                 children: [{
-                  ...imageTemp,
+                  ...imageTemp2,
                   data: {
-                    ...imageTemp.data,
+                    ...imageTemp2.data,
                     text: res.data.imageName,
                     image: data,
                     imageId: res.data.id,
@@ -1575,9 +1577,9 @@ export default {
               const group = this.tools.find(tool => tool.group === item.unit)
               if (group) {
                 group.children.push({
-                  ...imageTemp,
+                  ...imageTemp2,
                   data: {
-                    ...imageTemp.data,
+                    ...imageTemp2.data,
                     text: item.imageName,
                     image: res2[index],
                     imageId: item.id,
@@ -1588,9 +1590,9 @@ export default {
                 this.tools.push({
                   group: item.unit,
                   children: [{
-                    ...imageTemp,
+                    ...imageTemp2,
                     data: {
-                      ...imageTemp.data,
+                      ...imageTemp2.data,
                       text: item.imageName,
                       image: res2[index],
                       imageId: item.id,
@@ -1900,7 +1902,7 @@ export default {
     nodeDefaultWidth (nodeName) {
       switch (nodeName) {
         case 'myCube':
-        case 'rectangleImg':
+        case 'rectangleImg2':
           return 0
         default:
           return 1
@@ -2144,534 +2146,5 @@ export default {
   }
 </style>
 <style lang="scss" scoped>
-  /deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+  @import "../project/topology.scss";
-    transform: rotate(90deg);
-    color: #FA901C;
-  }
-  /deep/ .el-collapse-item .title-delete{
-    display: none;
-  }
-  /deep/ .el-collapse-item .nz-icon-caret-right{
-    transition: transform .3s;
-    color: #BEBEBE;
-    margin-right: 5px;
-  }
-  /deep/ .el-collapse-item:hover{
-    .el-collapse-item__header{
-      color: #FA901C;
-    }
-    .nz-icon-caret-right{
-      color: #FA901C;
-    }
-    .title-delete{
-      display: block;
-      color: #FA901C;
-    }
-  }
-  .project-box{
-    @keyframes model-error-animation {
-      0% {
-        transform: scale(0.7);
-      }
-      50% {
-        transform: scale(1);
-      }
-      100% {
-        transform: scale(0.7);
-      }
-    }
-
-    @keyframes model-icon-animation {
-      0% {
-        transform: scale(1.2) translateX(1px);
-      }
-      50% {
-        transform: scale(0.9) translateX(0px);
-      }
-      100% {
-        transform: scale(1.2) translateX(1px);
-      }
-    }
-
-    .nz-icon-shuidi {
-      position: absolute;
-      font-size: 48px;
-      color: rgba(190, 233, 222, 0.45);
-      border-radius: 50%;
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-    }
-
-    .model-error.nz-icon-shuidi {
-      color: #FADED7;
-      animation: model-error-animation .6s infinite ease-in-out;
-      animation-direction: normal;
-    }
-
-    .model-error-active.nz-icon-shuidi {
-      color: #FADED7;
-    }
-
-    .nz-icon-model {
-      color: #23BF9A;
-      position: absolute;
-      top: -4px;
-      left: 15px;
-      font-size: 18px;
-      line-height: 48px;
-    }
-
-    .model-error .nz-icon-model {
-      color: #EC7F66;
-      animation: model-icon-animation .6s infinite ease-in-out;
-      animation-direction: normal;
-    }
-
-    .model-error-active .nz-icon-model {
-      color: #EC7F66;
-    }
-
-    .scaleTool-enter-active {
-      animation: scaleTool-in .15s;
-    }
-
-    .scaleTool-leave-active {
-      animation: scaleTool-in .15s reverse;
-    }
-
-    @keyframes scaleTool-in {
-      from {
-        top: 0px;
-        left: 0px;
-        transform: scale(0.5);
-      }
-    }
-
-    .moduleIdRect{
-      /*border: 4px dashed #FA901C;*/
-    }
-    .module-rect-top{
-      border-top: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-right{
-      border-right: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-bottom{
-      border-bottom: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-left{
-      border-left: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-
-    .network-pop .nz-icon-hexagonBorder{
-      position: absolute;
-      font-size: 48px;
-      color: #84d5c2;
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-    }
-
-    .network-pop .nz-icon-hexagonBorder:hover {
-      transform: scale(1.1);
-      color: #4BB49B;
-    }
-
-    .network-pop .nz-icon-hexagonBorder.error-model-stat {
-      color: #F5BAAC;
-    }
-
-    .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
-      color: #EC7F66;
-    }
-
-    .network-pop .nz-icon-liubianxing {
-      color: #e2f3ef;
-      font-size: 44px;
-      position: absolute;
-      top: 1px;
-      left: 2px;
-      transform: scale(0.95);
-      z-index: 0;
-    }
-
-    .network-pop .error-model-stat .nz-icon-liubianxing {
-      color: #FADED7;
-    }
-
-    .network-pop .nz-icon.noMove {
-      position: absolute;
-      left: 14px;
-      font-size: 20px;
-      color: #27c09c;
-    }
-
-    .network-pop .error-model-stat .nz-icon.noMove {
-      color: #EC7F66;
-    }
-
-    .network-pop .no-selPop {
-      color: #999 !important;
-    }
-
-    .network-pop .no-selPop .nz-icon-liubianxing {
-      color: rgb(218, 218, 218);
-    }
-
-    .network-pop .no-selPop .nz-icon-chart {
-      color: #999;
-    }
-
-    .network-info {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      z-index: 1;
-    }
-
-    .facade-top{
-      min-height: 138px;
-      display: flex;
-      margin: 4px 0;
-      height: calc(16% - 40px);
-      font-size: 12px;
-      z-index: 10;
-      padding-left: 15px;
-    }
-    .facade-top > div{
-      width: 18%;
-      min-width: 315px;
-      background: #FFFFFF;
-      margin-right: 9px;
-      padding: 20px;
-      border: 1px solid #FFFFFF;
-      box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
-    }
-    .facade-top-title{
-      font-size: 16px;
-      color: #333333;
-      font-weight: bold;
-      padding: 5px 0;
-    }
-    .facade-top-left{
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-    }
-    .special.label{
-      margin-left: 30px;
-    }
-    .facade-top .facade-top-right{
-      width: auto;
-      min-width: 100px;
-    }
-    .facade-top-right-content{
-      display: flex;
-      justify-content: space-around;
-      justify-items: center;
-      flex-direction: column;
-      height: calc(100% - 30px);
-      align-items:flex-start;
-    }
-    .facade-top-right-content > div{
-      min-width: 84px;
-      height: 22px;
-      display: flex;
-      justify-content: space-between;
-      color: #fff;
-      text-align: center;
-      margin-bottom: 5px;
-      line-height: 22px;
-    }
-    .facade-top-right-content > div > div:last-child{
-      text-align: center;
-      border-radius: 0 4px 4px 0;
-      flex: 1;
-      height: calc(100% - 2px);
-      padding: 0 8px;
-      min-width: 40px;
-    }
-    .content-P1-title{
-      background: #F2866E;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P1-title + div{
-      border: 1px solid #F4907A;
-      font-size: 12px;
-      color: #F4907A;
-    }
-
-    .content-P2-title{
-      background: #F89984;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P2-title + div{
-      border: 1px solid #F9A28F;
-      font-size: 12px;
-      color: #F9A28F;
-    }
-
-    .content-P3-title{
-      background: #F7BA78;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P3-title + div{
-      border: 1px solid #F7BA78;
-      font-size: 12px;
-      color: #F7BA78;
-    }
-
-    .right-content-P1{
-      border: 1px solid ;
-    }
-    .align--center{
-      text-align: center;
-    }
-  }
-  .project-topology-tool {
-    display: inline-flex;
-    height: 30px;
-  }
-
-  .el-dropdown-title {
-    background: #FFFFFF;
-    border: 1px solid $--primary-border-color;
-    border-radius: 2px;
-    width: 66px;
-    height: 28px;
-    display: inline-block;
-    line-height: 28px;
-
-    .icon-cube {
-      margin-left: 15px;
-    }
-  }
-
-  .project-box {
-    width: 100%;
-    position: relative;
-    border-radius: 2px;
-    overflow: visible;
-    background: #fff;
-    .pickTime{
-      margin-right: 10px;
-    }
-    .project-title {
-      height: 55px;
-      padding-bottom: 0px;
-    }
-
-    .drag-header {
-      cursor: move;
-      background: #1a1a1a;
-      color: #fff;
-    }
-
-    .left-bottom {
-      position: absolute;
-      left: 10px;
-      bottom: 10px;
-    }
-  }
-
-  .page {
-    display: flex;
-    height: calc(100% - 1px);
-    width: 100%;
-    /*
-        height: calc(100% - 65px);
-        width: calc(100% - 10px);
-        margin: 5px;
-    */
-    position: relative;
-
-    .tools {
-      width: 300px;
-      height: calc(100% - 1px);
-      border: none;
-      position: absolute;
-      z-index: 1 !important;
-      left: 20px;
-      background-color: #f9f9f9;
-
-      .title {
-        float: left;
-      }
-    }
-
-    .full {
-      flex: 1;
-      overflow: unset !important;
-    }
-
-    .props {
-      width: 500px;
-      height: 100%;
-      border: none;
-      position: absolute;
-      z-index: 1 !important;
-      right: 0;
-      top: 0;
-      background: #FFFFFF;
-      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
-      border-radius: 0px;
-    }
-  }
-  .overview-page{
-    height: 100%;
-  }
-  .special-select svg {
-    width: 75px;
-    height: 30px;
-  }
-
-  .special-select .el-select.el-select--small {
-    width: 100%;
-  }
-
-  .special-select /deep/ .el-select-dropdown {
-    width: 130px !important;
-
-    .el-select-dropdown__item {
-      padding: 0 0 0 10px;
-    }
-  }
-
-  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
-    border: 1px solid #DCDFE6;
-    height: 28px;
-  }
-
-  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
-    display: none;
-  }
-
-  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
-    height: 28px;
-    line-height: 28px;
-    color: #899FB7;
-    width: 100%;
-  }
-
-  .special-select /deep/ .el-input__prefix > div {
-    width: 100%;
-    height: 100%;
-  }
-
-  .upload-pic-row{
-    width: 420px;
-    margin-bottom: 10px;
-    .upload-pic-label{
-      text-align: right;
-      font-size: 14px;
-      color: #666666;
-      letter-spacing: 0;
-      font-weight: 400;
-      height: 30px;
-      line-height: 30px;
-      padding-right: 8px;
-    }
-    /deep/ .el-upload--text{
-      width: 100%;
-      .el-upload-dragger{
-        width: 100%;
-      }
-    }
-  }
-  .upload-pic-box{
-    width: 284px;
-    height: 30px;
-    text-align: center;
-    font-size: 14px;
-    color: #666666;
-    font-weight: 400;
-    line-height: 30px;
-    cursor: pointer;
-    .el-icon-plus{
-      color: #FA901C;
-    }
-  }
-  .top-tool-btn{
-    height: 32px;
-    width: 32px;
-    border: 1px solid $--primary-border-color;
-    outline: none;
-    border-radius: 2px;
-    background-color: #F9F9F9;
-    -webkit-transition: background-color linear .1s;
-    transition: background-color linear .1s;
-    padding: 0;
-  }
-  .top-tool-btn:hover{
-    background-color: #fff;
-  }
-  .top-tool-btn:focus{
-    background-color: #fff;
-    border-color: #FBCEA4;
-  }
-  .top-tool-btn:focus .nz-icon{
-    color: #FBCEA4;
-  }
-  .right-bottom-zoom{
-    position: absolute;
-    bottom: 30px;
-    right: 40px;
-    height: 90px;
-    width: 35px;
-    border: 1px solid #E7EAED;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-    display: flex;
-    flex-direction: column;
-    .zoom-option{
-      width: 100%;
-      height: 50%;
-      opacity: 0.42;
-      background: #FFF;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-    .zoom-option:hover{
-      cursor: pointer;
-    }
-  }
-  .from-overview{
-    padding:0 !important;
-    width: calc(100% - 2px);
-    height: calc(100% - 2px) !important;
-    .nz-table2{
-      padding: 0 !important;
-      height: 100%;
-    }
-  }
-  .from-project{
-    padding: 0 !important;
-    .nz-table2{
-      padding: 0;
-      box-sizing: content-box;
-      height: calc(100% - 30px);
-      border: none;
-    }
-  }
-  /deep/ .el-collapse-item__arrow{
-    display: none;
-  }
-  .h100{
-    height: calc(100% - 30px) !important;
-  }
-  .context-menu {
-    position: fixed;
-    z-index: 10;
-  }
 </style>

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

@@ -50,6 +50,7 @@
             </el-form-item>
           </el-row>
           <!--metric-->
+          <transition name="el-zoom-in-top">
             <div v-show="selection.pen.data.valueMappingShow">
             <el-row :key="index" class="element-item form-row-item" style=""
                     v-for="(item,index) in selection.pen.data.expressArr">
@@ -168,9 +169,9 @@
               <i class="nz-icon nz-icon-plus"></i>
             </div>
           </div>
-
+          </transition>
           <!--tooltip-->
-          <el-row class="form-row-title">
+          <el-row class="form-row-title" :style="{'margin-top': '10px'}">
             {{$t('dashboard.panel.chartForm.tooltip')}}
             <el-form-item class="float-right" prop="type" style="height: 100%;">
               <el-switch
@@ -181,7 +182,7 @@
               />
             </el-form-item>
           </el-row>
-
+          <transition name="el-zoom-in-top">
             <div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
             <!--title-->
             <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
@@ -201,16 +202,6 @@
               >
               </el-cascader>
             </el-form-item>
-<!--            &lt;!&ndash;displayChart&ndash;&gt;-->
-<!--            <el-form-item :label="$t('dashboard.panel.chartForm.displayChart')" class="half-form-item" prop="type">-->
-<!--              <el-switch-->
-<!--                v-model="selection.pen.data.displayChart"-->
-<!--                :active-value="true"-->
-<!--                :inactive-value="false"-->
-<!--                active-color="#ee9d3f"-->
-<!--              />-->
-<!--            </el-form-item>-->
-            <!--chart type-->
             <el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
               <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
                          size="mini"
@@ -221,7 +212,7 @@
               </el-select>
             </el-form-item>
             <!--value mapping-->
-            <el-row :key="index" class="element-item form-row-item" style=""
+            <el-row :key="index" class="element-item form-row-item" style="width: calc(100% - 60px);"
                     v-for="(item,index) in selection.pen.data.expressAllArr">
               <promql-input
                 :expression-list="selection.pen.data.expressAllArr"
@@ -253,7 +244,8 @@
                 </template>
               </el-row>
               <div class="nz-icon-minus-position">
-              <span class="nz-icon-minus-medium">
+              <span class="nz-icon-minus-medium" style="box-sizing: border-box;
+    padding: 10px;">
                 <i @click="removeExpression(index)" class="nz-icon nz-icon-minus"></i>
           </span>
                 <span class="nz-icon-copy">
@@ -265,7 +257,7 @@
               <i class="nz-icon nz-icon-plus"></i>
             </div>
           </div>
-
+          </transition>
 <!--          &lt;!&ndash;link&ndash;&gt;-->
 <!--          <el-row class="form-row-title">-->
 <!--            {{$t('project.topology.link')}}-->
@@ -628,7 +620,7 @@
                     v-model.number="selection.pen.data.lineWidth"
                     :readonly="readonly"
                     required
-                    :min="selection.pen.type?1:(selection.pen.name==='rectangleImg' ||selection.pen.name==='myCube'?0:1)"
+                    :min="selection.pen.type?1:(selection.pen.name==='rectangleImg2' || selection.pen.name==='rectangleImg' || selection.pen.name==='myCube' ?0:1)"
                     @change="onChange('lineWidth')"></el-input-number>
                 </div>
               </div>
@@ -717,6 +709,72 @@
         </div>
       </el-tab-pane>
     </el-tabs>
+<!--    选中多个-->
+    <div v-else-if="selection.pens" class="">
+      <el-collapse v-model="activeNames">
+        <!--对齐方式-->
+        <el-collapse-item title="对齐" name="1" v-if="selection.pens">
+          <label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
+            <i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
+               @click="onNodesAlign(item.value)"></i>
+          </label>
+        </el-collapse-item>
+        <!--排版-->
+        <el-collapse-item title="排版" name="2" v-if="selection.pens">
+          <div class="mt10">
+            <div class="flex middle mb10">
+              <label>最大宽度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>节点宽度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>节点高度：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>水平个数：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"
+                                 v-model.number="layout.maxCount"
+                                 title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>水平间距：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle mb10">
+              <label>垂直间距：</label>
+              <div class="full pr10">
+                <el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
+                                 v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>
+              </div>
+            </div>
+            <div class="flex middle">
+              <label></label>
+              <div class="full pr10">
+                <button class="button primary" @click="onLayout">开始排版</button>
+              </div>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
     <!-- 选中为空 -->
     <div v-else style="height: 100%">
       <div class="project-title">
@@ -1265,7 +1323,7 @@ export default {
     selection: {
       handler () {
         // this.loading = false
-        if (this.selection.pen && this.selection.pen.data && !this.selection.pen.data.expressAllArr) {
+        if (this.selection.pen && this.selection.pen.data && (!this.selection.pen.data.expressAllArr || this.selection.pen.data.expressAllArr.length===0)) {
           this.selection.pen.data.expressAllArr = ['']
           this.selection.pen.data.legendsAll = ['']
         }
@@ -1943,7 +2001,7 @@ export default {
 
     /deep/ .el-collapse-item__header {
       padding: 0 10px;
-      background-color: #F9F9F9;
+      background-color: #eeeeee;
       height: 32px;
       font-size: 14px;
       color: #333333;

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

@@ -216,6 +216,53 @@ export const imageTemp = {
     fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
   }
 }
+export const imageTemp2 = {
+  name: 'rectangleImg2',
+  icon: 'icon-image',
+  data: {
+    type: 0,
+    rect: {
+      x: 922,
+      y: 406,
+      width: 100,
+      height: 100
+    },
+    imageRatio: true,
+    lineWidth: 0,
+    rotate: 0,
+    offsetRotate: 0,
+    globalAlpha: 1,
+    dash: 0,
+    strokeStyle: '#000000',
+    animatePos: 0,
+    name: 'rectangleImg2',
+    lineDashOffset: 0,
+    text: '',
+    textOffsetX: 0,
+    textOffsetY: 0,
+    visible: true,
+    zRotate: 0,
+    animateDuration: 0,
+    animateFrames: [],
+    animateFrame: 0,
+    borderRadius: 0,
+    icon: '',
+    image: '',
+    imageAlign: 'center',
+    bkType: 0,
+    gradientAngle: 0,
+    gradientRadius: 0.01,
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingLeftNum: 5,
+    paddingRightNum: 5,
+    paddingTopNum: 5,
+    paddingBottomNum: 5,
+    fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
+  }
+}
 /* 自定义图片组件 */
 export function myShape (ctx, node) { // 自定义图片组件
   ctx.beginPath()
@@ -252,13 +299,13 @@ export function myIconRect2 (node) {
   node.fullIconRect = node.rect
 }
 export function myTextRect2 (node) {
-  node.data.text = ''
+  // node.textRect = new Rect(
-  node.textRect = new Rect(
+  //   node.rect.x + node.paddingLeft,
-    node.rect.x + node.paddingLeft,
+  //   node.rect.y + node.rect.height + 10,
-    node.rect.y + node.rect.height - 20 - node.paddingBottom,
+  //   node.rect.width - (node.paddingLeft + node.paddingRight),
-    0,
+  //   20
-    0
+  // )
-  )
+  node.textRect = {}
   node.fullTextRect = node.rect
 }
 /* 自定义图片组件 */

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

@@ -16,7 +16,7 @@
             width="111"
             trigger="click"
             class="scale-number-box"
-            popper-class="scale-number-popover"
+            popper-class="scale-number-popover no-style-class"
            >
             <div class="scale-num-pop" style=" width: 91px;min-width: 91px">
               <div>缩放级别</div>
@@ -106,7 +106,7 @@ export default {
     }
   },
   mounted () {
-    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
+    const dataOption = getTopology(this.index).data
     Object.keys(this.option).forEach(key => {
       if (key === 'scale') {
         this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)

nezha-fronted/src/components/common/project/topology.scss

@@ -0,0 +1,543 @@
+/deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+  transform: rotate(90deg);
+  color: #FA901C;
+}
+/deep/ .el-collapse-item .title-delete{
+  display: none;
+}
+/deep/ .el-collapse-item .nz-icon-caret-right{
+  transition: transform .3s;
+  color: #BEBEBE;
+  margin-right: 5px;
+}
+/deep/ .el-collapse-item:hover{
+  .el-collapse-item__header{
+    color: #FA901C;
+  }
+  .nz-icon-caret-right{
+    color: #FA901C;
+  }
+  .title-delete{
+    display: block;
+    color: #FA901C;
+  }
+}
+.edit-topologyLine{
+  background: rgba(196,196,196,0.4) !important;
+  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.27);
+}
+.project-box{
+  @keyframes model-error-animation {
+    0% {
+      transform: scale(0.7);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.7);
+    }
+  }
+
+  @keyframes model-icon-animation {
+    0% {
+      transform: scale(1.2) translateX(1px);
+    }
+    50% {
+      transform: scale(0.9) translateX(0px);
+    }
+    100% {
+      transform: scale(1.2) translateX(1px);
+    }
+  }
+
+  .nz-icon-shuidi {
+    position: absolute;
+    font-size: 48px;
+    color: rgba(190, 233, 222, 0.45);
+    border-radius: 50%;
+    height: 48px;
+    width: 48px;
+    line-height: 48px;
+  }
+
+  .model-error.nz-icon-shuidi {
+    color: #FADED7;
+    animation: model-error-animation .6s infinite ease-in-out;
+    animation-direction: normal;
+  }
+
+  .model-error-active.nz-icon-shuidi {
+    color: #FADED7;
+  }
+
+  .nz-icon-model {
+    color: #23BF9A;
+    position: absolute;
+    top: -4px;
+    left: 15px;
+    font-size: 18px;
+    line-height: 48px;
+  }
+
+  .model-error .nz-icon-model {
+    color: #EC7F66;
+    animation: model-icon-animation .6s infinite ease-in-out;
+    animation-direction: normal;
+  }
+
+  .model-error-active .nz-icon-model {
+    color: #EC7F66;
+  }
+
+  .scaleTool-enter-active {
+    animation: scaleTool-in .15s;
+  }
+
+  .scaleTool-leave-active {
+    animation: scaleTool-in .15s reverse;
+  }
+
+  @keyframes scaleTool-in {
+    from {
+      top: 0px;
+      left: 0px;
+      transform: scale(0.5);
+    }
+  }
+
+  .moduleIdRect{
+    /*border: 4px dashed #FA901C;*/
+  }
+  .module-rect-top{
+    border-top: 4px dashed #ff8c0a;
+    position: absolute;
+  }
+  .module-rect-right{
+    border-right: 4px dashed #ff8c0a;
+    position: absolute;
+  }
+  .module-rect-bottom{
+    border-bottom: 4px dashed #ff8c0a;
+    position: absolute;
+  }
+  .module-rect-left{
+    border-left: 4px dashed #ff8c0a;
+    position: absolute;
+  }
+
+  .network-pop .nz-icon-hexagonBorder{
+    position: absolute;
+    font-size: 48px;
+    color: #84d5c2;
+    height: 48px;
+    width: 48px;
+    line-height: 48px;
+  }
+
+  .network-pop .nz-icon-hexagonBorder:hover {
+    transform: scale(1.1);
+    color: #4BB49B;
+  }
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat {
+    color: #F5BAAC;
+  }
+
+  .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
+    color: #EC7F66;
+  }
+
+  .network-pop .nz-icon-liubianxing {
+    color: #e2f3ef;
+    font-size: 44px;
+    position: absolute;
+    top: 1px;
+    left: 2px;
+    transform: scale(0.95);
+    z-index: 0;
+  }
+
+  .network-pop .error-model-stat .nz-icon-liubianxing {
+    color: #FADED7;
+  }
+
+  .network-pop .nz-icon.noMove {
+    position: absolute;
+    left: 14px;
+    font-size: 20px;
+    color: #27c09c;
+  }
+
+  .network-pop .error-model-stat .nz-icon.noMove {
+    color: #EC7F66;
+  }
+
+  .network-pop .no-selPop {
+    color: #999 !important;
+  }
+
+  .network-pop .no-selPop .nz-icon-liubianxing {
+    color: rgb(218, 218, 218);
+  }
+
+  .network-pop .no-selPop .nz-icon-chart {
+    color: #999;
+  }
+
+  .network-info {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    z-index: 1;
+  }
+
+  .facade-top{
+    min-height: 138px;
+    display: flex;
+    margin: 4px 0;
+    height: calc(16% - 40px);
+    font-size: 12px;
+    z-index: 10;
+    padding-left: 15px;
+  }
+  .facade-top > div{
+    width: 18%;
+    min-width: 315px;
+    background: #FFFFFF;
+    margin-right: 9px;
+    padding: 20px;
+    border: 1px solid #FFFFFF;
+    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .facade-top-title{
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  .facade-top-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .special.label{
+    margin-left: 30px;
+  }
+  .facade-top .facade-top-right{
+    width: auto;
+    min-width: 100px;
+  }
+  .facade-top-right-content{
+    display: flex;
+    justify-content: space-around;
+    justify-items: center;
+    flex-direction: column;
+    height: calc(100% - 30px);
+    align-items:flex-start;
+  }
+  .facade-top-right-content > div{
+    min-width: 84px;
+    height: 22px;
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 5px;
+    line-height: 22px;
+  }
+  .facade-top-right-content > div > div:last-child{
+    text-align: center;
+    border-radius: 0 4px 4px 0;
+    flex: 1;
+    height: calc(100% - 2px);
+    padding: 0 8px;
+    min-width: 40px;
+  }
+  .content-P1-title{
+    background: #F2866E;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P1-title + div{
+    border: 1px solid #F4907A;
+    font-size: 12px;
+    color: #F4907A;
+  }
+
+  .content-P2-title{
+    background: #F89984;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P2-title + div{
+    border: 1px solid #F9A28F;
+    font-size: 12px;
+    color: #F9A28F;
+  }
+
+  .content-P3-title{
+    background: #F7BA78;
+    border-radius: 4px 0 0 4px;
+    width: 40px;
+    height: 100%;
+  }
+  .content-P3-title + div{
+    border: 1px solid #F7BA78;
+    font-size: 12px;
+    color: #F7BA78;
+  }
+
+  .right-content-P1{
+    border: 1px solid ;
+  }
+  .align--center{
+    text-align: center;
+  }
+}
+.project-topology-tool {
+  display: inline-flex;
+  height: 30px;
+}
+
+.el-dropdown-title {
+  background: #FFFFFF;
+  border: 1px solid $--primary-border-color;
+  border-radius: 2px;
+  width: 66px;
+  height: 28px;
+  display: inline-block;
+  line-height: 28px;
+
+  .icon-cube {
+    margin-left: 15px;
+  }
+}
+
+.project-box {
+  width: 100%;
+  position: relative;
+  border-radius: 2px;
+  overflow: visible;
+  background: #fff;
+  .pickTime{
+    margin-right: 10px;
+  }
+  .project-title {
+    height: 55px;
+    padding-bottom: 0px;
+  }
+
+  .drag-header {
+    cursor: move;
+    background: #1a1a1a;
+    color: #fff;
+  }
+
+  .left-bottom {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+  }
+}
+
+.page {
+  display: flex;
+  height: calc(100% - 1px);
+  width: 100%;
+  /*
+      height: calc(100% - 65px);
+      width: calc(100% - 10px);
+      margin: 5px;
+  */
+  position: relative;
+
+  .tools {
+    width: 300px;
+    height: calc(100% - 1px);
+    border: none;
+    position: absolute;
+    z-index: 1 !important;
+    left: 20px;
+    background-color: #f9f9f9;
+
+    .title {
+      float: left;
+    }
+  }
+
+  .full {
+    flex: 1;
+    overflow: unset !important;
+  }
+
+  .props {
+    width: 500px;
+    height: 100%;
+    border: none;
+    position: absolute;
+    z-index: 1 !important;
+    right: 0;
+    top: 0;
+    background: #FFFFFF;
+    box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
+    border-radius: 0px;
+  }
+}
+.overview-page{
+  height: 100%;
+}
+.special-select svg {
+  width: 75px;
+  height: 30px;
+}
+
+.special-select .el-select.el-select--small {
+  width: 100%;
+}
+
+.special-select /deep/ .el-select-dropdown {
+  width: 130px !important;
+
+  .el-select-dropdown__item {
+    padding: 0 0 0 10px;
+  }
+}
+
+.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
+  border: 1px solid #DCDFE6;
+  height: 28px;
+}
+
+.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
+  display: none;
+}
+
+.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
+  height: 28px;
+  line-height: 28px;
+  color: #899FB7;
+  width: 100%;
+}
+
+.special-select /deep/ .el-input__prefix > div {
+  width: 100%;
+  height: 100%;
+}
+
+.upload-pic-row{
+  width: 420px;
+  margin-bottom: 10px;
+  .upload-pic-label{
+    text-align: right;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight: 400;
+    height: 30px;
+    line-height: 30px;
+    padding-right: 8px;
+  }
+  /deep/ .el-upload--text{
+    width: 100%;
+    .el-upload-dragger{
+      width: 100%;
+    }
+  }
+}
+.upload-pic-box{
+  width: 284px;
+  height: 30px;
+  text-align: center;
+  font-size: 14px;
+  color: #666666;
+  font-weight: 400;
+  line-height: 30px;
+  cursor: pointer;
+  .el-icon-plus{
+    color: #FA901C;
+  }
+}
+.top-tool-btn{
+  height: 32px;
+  width: 32px;
+  border: 1px solid $--primary-border-color;
+  outline: none;
+  border-radius: 2px;
+  background-color: #F9F9F9;
+  -webkit-transition: background-color linear .1s;
+  transition: background-color linear .1s;
+  padding: 0;
+}
+.top-tool-btn:hover{
+  background-color: #fff;
+}
+.top-tool-btn:focus{
+  background-color: #fff;
+  border-color: #FBCEA4;
+}
+.top-tool-btn:focus .nz-icon{
+  color: #FBCEA4;
+}
+.right-bottom-zoom{
+  position: absolute;
+  bottom: 30px;
+  right: 40px;
+  height: 90px;
+  width: 35px;
+  border: 1px solid #E7EAED;
+  box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  display: flex;
+  flex-direction: column;
+  .zoom-option{
+    width: 100%;
+    height: 50%;
+    opacity: 0.42;
+    background: #FFF;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+  .zoom-option:hover{
+    cursor: pointer;
+  }
+}
+.from-overview{
+  padding:0 !important;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px) !important;
+  .nz-table2{
+    padding: 0 !important;
+    height: 100%;
+  }
+}
+.from-project{
+  padding: 0 !important;
+  .nz-table2{
+    padding: 0;
+    box-sizing: content-box;
+    height: calc(100% - 30px);
+    border: none;
+  }
+}
+/deep/ .el-collapse-item__arrow{
+  display: none;
+}
+.h100{
+  height: calc(100% - 30px) !important;
+}
+.context-menu {
+  position: fixed;
+  z-index: 10;
+}
+.right-bottom-zoom{
+  display: none;
+}
+
+.project-box:hover {
+  .right-bottom-zoom{
+    display: flex;
+  }
+}

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

@@ -260,23 +260,6 @@
                   @close="popDataShowUpdate('',true)">alert
       </alertTable>
     </transition>
-    <!--preview-->
-    <el-dialog
-      :visible.sync="previewShow"
-      :width="'80%'"
-      :before-close="previewBeforeClose"
-    >
-      <div style="width: calc(80vw - 40px);height: 80vh">
-        <topologyPrev
-          v-if="previewShow"
-          :obj="obj"
-          :topoPrevDataS="topoPrevData"
-          :fromOverView="false"
-          :fromPrev="true"
-          :topologyIndexF="1">
-        </topologyPrev>
-      </div>
-    </el-dialog>
     <!--Custom picture-->
     <el-dialog
       :title="title"
@@ -371,7 +354,6 @@ import endpointTable from './popData/endpointTable'
 import topoTooltip from './L5/topoTooltip'
 import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
-import topologyPrev from './topologyPrev'
 // 注册到画布
 registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
@@ -517,7 +499,6 @@ export default {
     assetTable,
     endpointTable,
     topoTooltip,
-    topologyPrev,
     CanvasContextMenu
   },
   props: {
@@ -819,7 +800,6 @@ export default {
               if (!this.imgInit) {
                 return
               }
-              clearInterval(timer)
               const promiseArr = []
               const self = this
               for (let i = 0; i < data.pens.length; i++) {
@@ -878,6 +858,7 @@ export default {
                 })
                 self.saveData = { ...data }
                 resolve(data)
+                clearInterval(timer)
               })
             }, 100)
           }
@@ -2313,527 +2294,5 @@ export default {
   }
 </style>
 <style lang="scss" scoped>
-  /deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+  @import "../project/topology.scss";
-    transform: rotate(90deg);
-    color: #FA901C;
-  }
-  /deep/ .el-collapse-item .title-delete{
-    display: none;
-  }
-  /deep/ .el-collapse-item .nz-icon-caret-right{
-    transition: transform .3s;
-    color: #BEBEBE;
-    margin-right: 5px;
-  }
-  /deep/ .el-collapse-item:hover{
-    .el-collapse-item__header{
-      color: #FA901C;
-    }
-    .nz-icon-caret-right{
-      color: #FA901C;
-    }
-    .title-delete{
-      display: block;
-      color: #FA901C;
-    }
-  }
-  .project-box{
-    @keyframes model-error-animation {
-      0% {
-        transform: scale(0.7);
-      }
-      50% {
-        transform: scale(1);
-      }
-      100% {
-        transform: scale(0.7);
-      }
-    }
-
-    @keyframes model-icon-animation {
-      0% {
-        transform: scale(1.2) translateX(1px);
-      }
-      50% {
-        transform: scale(0.9) translateX(0px);
-      }
-      100% {
-        transform: scale(1.2) translateX(1px);
-      }
-    }
-
-    .nz-icon-shuidi {
-      position: absolute;
-      font-size: 48px;
-      color: rgba(190, 233, 222, 0.45);
-      border-radius: 50%;
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-    }
-
-    .model-error.nz-icon-shuidi {
-      color: #FADED7;
-      animation: model-error-animation .6s infinite ease-in-out;
-      animation-direction: normal;
-    }
-
-    .model-error-active.nz-icon-shuidi {
-      color: #FADED7;
-    }
-
-    .nz-icon-model {
-      color: #23BF9A;
-      position: absolute;
-      top: -4px;
-      left: 15px;
-      font-size: 18px;
-      line-height: 48px;
-    }
-
-    .model-error .nz-icon-model {
-      color: #EC7F66;
-      animation: model-icon-animation .6s infinite ease-in-out;
-      animation-direction: normal;
-    }
-
-    .model-error-active .nz-icon-model {
-      color: #EC7F66;
-    }
-
-    .scaleTool-enter-active {
-      animation: scaleTool-in .15s;
-    }
-
-    .scaleTool-leave-active {
-      animation: scaleTool-in .15s reverse;
-    }
-
-    @keyframes scaleTool-in {
-      from {
-        top: 0px;
-        left: 0px;
-        transform: scale(0.5);
-      }
-    }
-
-    .moduleIdRect{
-      /*border: 4px dashed #FA901C;*/
-    }
-    .module-rect-top{
-      border-top: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-right{
-      border-right: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-bottom{
-      border-bottom: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-    .module-rect-left{
-      border-left: 4px dashed #ff8c0a;
-      position: absolute;
-    }
-
-    .network-pop .nz-icon-hexagonBorder{
-      position: absolute;
-      font-size: 48px;
-      color: #84d5c2;
-      height: 48px;
-      width: 48px;
-      line-height: 48px;
-    }
-
-    .network-pop .nz-icon-hexagonBorder:hover {
-      transform: scale(1.1);
-      color: #4BB49B;
-    }
-
-    .network-pop .nz-icon-hexagonBorder.error-model-stat {
-      color: #F5BAAC;
-    }
-
-    .network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
-      color: #EC7F66;
-    }
-
-    .network-pop .nz-icon-liubianxing {
-      color: #e2f3ef;
-      font-size: 44px;
-      position: absolute;
-      top: 1px;
-      left: 2px;
-      transform: scale(0.95);
-      z-index: 0;
-    }
-
-    .network-pop .error-model-stat .nz-icon-liubianxing {
-      color: #FADED7;
-    }
-
-    .network-pop .nz-icon.noMove {
-      position: absolute;
-      left: 14px;
-      font-size: 20px;
-      color: #27c09c;
-    }
-
-    .network-pop .error-model-stat .nz-icon.noMove {
-      color: #EC7F66;
-    }
-
-    .network-pop .no-selPop {
-      color: #999 !important;
-    }
-
-    .network-pop .no-selPop .nz-icon-liubianxing {
-      color: rgb(218, 218, 218);
-    }
-
-    .network-pop .no-selPop .nz-icon-chart {
-      color: #999;
-    }
-
-    .network-info {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      z-index: 1;
-    }
-
-    .facade-top{
-      min-height: 138px;
-      display: flex;
-      margin: 4px 0;
-      height: calc(16% - 40px);
-      font-size: 12px;
-      z-index: 10;
-      padding-left: 15px;
-    }
-    .facade-top > div{
-      width: 18%;
-      min-width: 315px;
-      background: #FFFFFF;
-      margin-right: 9px;
-      padding: 20px;
-      border: 1px solid #FFFFFF;
-      box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
-    }
-    .facade-top-title{
-      font-size: 16px;
-      color: #333333;
-      font-weight: bold;
-      padding: 5px 0;
-    }
-    .facade-top-left{
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-    }
-    .special.label{
-      margin-left: 30px;
-    }
-    .facade-top .facade-top-right{
-      width: auto;
-      min-width: 100px;
-    }
-    .facade-top-right-content{
-      display: flex;
-      justify-content: space-around;
-      justify-items: center;
-      flex-direction: column;
-      height: calc(100% - 30px);
-      align-items:flex-start;
-    }
-    .facade-top-right-content > div{
-      min-width: 84px;
-      height: 22px;
-      display: flex;
-      justify-content: space-between;
-      color: #fff;
-      text-align: center;
-      margin-bottom: 5px;
-      line-height: 22px;
-    }
-    .facade-top-right-content > div > div:last-child{
-      text-align: center;
-      border-radius: 0 4px 4px 0;
-      flex: 1;
-      height: calc(100% - 2px);
-      padding: 0 8px;
-      min-width: 40px;
-    }
-    .content-P1-title{
-      background: #F2866E;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P1-title + div{
-      border: 1px solid #F4907A;
-      font-size: 12px;
-      color: #F4907A;
-    }
-
-    .content-P2-title{
-      background: #F89984;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P2-title + div{
-      border: 1px solid #F9A28F;
-      font-size: 12px;
-      color: #F9A28F;
-    }
-
-    .content-P3-title{
-      background: #F7BA78;
-      border-radius: 4px 0 0 4px;
-      width: 40px;
-      height: 100%;
-    }
-    .content-P3-title + div{
-      border: 1px solid #F7BA78;
-      font-size: 12px;
-      color: #F7BA78;
-    }
-
-    .right-content-P1{
-      border: 1px solid ;
-    }
-    .align--center{
-      text-align: center;
-    }
-  }
-  .project-topology-tool {
-    display: inline-flex;
-    height: 30px;
-  }
-
-  .el-dropdown-title {
-    background: #FFFFFF;
-    border: 1px solid $--primary-border-color;
-    border-radius: 2px;
-    width: 66px;
-    height: 28px;
-    display: inline-block;
-    line-height: 28px;
-
-    .icon-cube {
-      margin-left: 15px;
-    }
-  }
-
-  .project-box {
-    width: 100%;
-    position: relative;
-    border-radius: 2px;
-    overflow: visible;
-    background: #fff;
-    .pickTime{
-      margin-right: 10px;
-    }
-    .project-title {
-      height: 55px;
-      padding-bottom: 0px;
-    }
-
-    .drag-header {
-      cursor: move;
-      background: #1a1a1a;
-      color: #fff;
-    }
-
-    .left-bottom {
-      position: absolute;
-      left: 10px;
-      bottom: 10px;
-    }
-  }
-
-  .page {
-    display: flex;
-    height: calc(100% - 1px);
-    width: 100%;
-/*
-    height: calc(100% - 65px);
-    width: calc(100% - 10px);
-    margin: 5px;
-*/
-    position: relative;
-
-    .tools {
-      width: 300px;
-      height: calc(100% - 1px);
-      border: none;
-      position: absolute;
-      z-index: 1 !important;
-      left: 20px;
-      background-color: #f9f9f9;
-
-      .title {
-        float: left;
-      }
-    }
-
-    .full {
-      flex: 1;
-      overflow: unset !important;
-    }
-
-    .props {
-      width: 500px;
-      height: 100%;
-      border: none;
-      position: absolute;
-      z-index: 1 !important;
-      right: 0;
-      top: 0;
-      background: #FFFFFF;
-      box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
-      border-radius: 0px;
-    }
-  }
-  .overview-page{
-    height: 100%;
-  }
-  .special-select svg {
-    width: 75px;
-    height: 30px;
-  }
-
-  .special-select .el-select.el-select--small {
-    width: 100%;
-  }
-
-  .special-select /deep/ .el-select-dropdown {
-    width: 130px !important;
-
-    .el-select-dropdown__item {
-      padding: 0 0 0 10px;
-    }
-  }
-
-  .special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
-    border: 1px solid #DCDFE6;
-    height: 28px;
-  }
-
-  .special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
-    display: none;
-  }
-
-  .special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
-    height: 28px;
-    line-height: 28px;
-    color: #899FB7;
-    width: 100%;
-  }
-
-  .special-select /deep/ .el-input__prefix > div {
-    width: 100%;
-    height: 100%;
-  }
-
-  .upload-pic-row{
-    width: 420px;
-    margin-bottom: 10px;
-    .upload-pic-label{
-      text-align: right;
-      font-size: 14px;
-      color: #666666;
-      letter-spacing: 0;
-      font-weight: 400;
-      height: 30px;
-      line-height: 30px;
-      padding-right: 8px;
-    }
-    /deep/ .el-upload--text{
-      width: 100%;
-      .el-upload-dragger{
-        width: 100%;
-      }
-    }
-  }
-  .upload-pic-box{
-    width: 284px;
-    height: 30px;
-    text-align: center;
-    font-size: 14px;
-    color: #666666;
-    font-weight: 400;
-    line-height: 30px;
-    cursor: pointer;
-    .el-icon-plus{
-      color: #FA901C;
-    }
-  }
-  .top-tool-btn{
-    height: 32px;
-    width: 32px;
-    border: 1px solid $--primary-border-color;
-    outline: none;
-    border-radius: 2px;
-    background-color: #F9F9F9;
-    -webkit-transition: background-color linear .1s;
-    transition: background-color linear .1s;
-    padding: 0;
-  }
-  .top-tool-btn:hover{
-    background-color: #fff;
-  }
-  .top-tool-btn:focus{
-    background-color: #fff;
-    border-color: #FBCEA4;
-  }
-  .top-tool-btn:focus .nz-icon{
-    color: #FBCEA4;
-  }
-  .right-bottom-zoom{
-    position: absolute;
-    bottom: 30px;
-    right: 40px;
-    height: 90px;
-    width: 35px;
-    border: 1px solid #E7EAED;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-    .zoom-option{
-      width: 100%;
-      height: 50%;
-      opacity: 0.42;
-      background: #FFF;
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-    .zoom-option:hover{
-      cursor: pointer;
-    }
-  }
-  .from-overview{
-    padding:0 !important;
-    width: calc(100% - 2px);
-    height: calc(100% - 2px) !important;
-    .nz-table2{
-      padding: 0 !important;
-      height: 100%;
-    }
-  }
-  .from-project{
-    padding-left: 0;
-    .nz-table2{
-      padding: 0 5px 10px 5px;
-      box-sizing: content-box;
-    }
-  }
-  /deep/ .el-collapse-item__arrow{
-    display: none;
-  }
-  .context-menu {
-    position: fixed;
-    z-index: 10;
-  }
 </style>

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

@@ -279,13 +279,13 @@
               </el-cascader>
             </el-form-item>
             <!--Align-->
-            <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item--half-width" prop="unit">
+            <!--<el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item&#45;&#45;half-width" prop="unit">
               <el-select id="chart-box-statistics" v-model="editChart.param.align" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
                 <el-option v-for="item in alignList" :key="item.value" :label="item.label" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{item.label}}</span>
                 </el-option>
               </el-select>
-            </el-form-item>
+            </el-form-item>-->
             <!--lock-->
             <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="unit">
               <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"/", "version": "21.04"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}