NEZ-2721 fix： project topology 样式调整

nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss

@@ -104,6 +104,7 @@
     display: flex;
     justify-content: space-between;
     padding: 3px 10px;
+    cursor: pointer;
     .nz-icon-shuru {
       display: none;
     }
@@ -171,66 +172,6 @@
       box-sizing: border-box;
       border-radius: 2px;
     }
-    .image-select-box {
-      text-align: center;
-      width: 225px;
-      z-index: 1;
-      padding: 0px 0px 0px 0px;
-      position: absolute;
-      top: 26px;
-      background: $--background-color-empty;
-      border: 1px solid $--border-color-light;
-      border-radius: 4px;
-      left: 0;
-      .el-card {
-        border: none;
-      }
-      .el-card__body {
-        padding: 0;
-      }
-      .el-collapse-item {
-        margin-bottom: 2px;
-      }
-      .image-box-item {
-        flex-direction: column;
-        align-items: center;
-        display: inline-block;
-        position: relative;
-        width: 47px;
-        height: 47px;
-        margin: 0;
-        padding: 8px;
-        box-sizing: border-box;
-        border: 1px solid transparent;
-        .image-src{
-          width: 31px;
-          height: 31px;
-        }
-        .image-text {
-          width: 100%;
-          height: 20px;
-          line-height: 20px;
-          font-size: 12px;
-          text-align: center;
-        }
-        .delIcon{
-          position: absolute;
-          right: 0;
-          top: -5px;
-          display: none;
-        }
-      }
-      .image-box-item:hover {
-        border-color: $--color-primary;
-        .delIcon {
-          display: inline-block;
-          color: $--color-primary;
-        }
-      }
-      .upload-pic-box{
-        width: 100%;
-      }
-    }
   }
   .nz-color {
     .vc-input__input {
@@ -257,3 +198,165 @@
     margin-left: 10px;
   }
 }
+.image-select-box {
+  text-align: center;
+  width: 225px;
+  z-index: 1;
+  padding: 0px 0px 0px 0px;
+  background: $--background-color-empty;
+  border: none;
+  box-shadow: unset !important;
+  border-radius: 4px;
+  left: 0;
+  .el-card {
+    border: none;
+    box-shadow: unset !important;
+  }
+  .el-card__body {
+    padding: 0 10px;
+  }
+  .el-collapse-item {
+    margin-bottom: 2px;
+  }
+  .nz-collapse-header {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    padding: 0 0 0 8px;
+    .nz-collapse-header-content {
+      width: calc(100% - 130px);
+      flex-shrink: 0;
+      text-align: left;
+    }
+    .nz-icon-caret-right {
+      display: inline-block;
+      width: 30px;
+      flex-shrink: 0;
+      height: 100%;
+      line-height: 32px;
+    }
+    .nz-icon-caret-right {
+      color: #BEBEBE;
+      transition: all 0.3s;
+    }
+    .title-delete {
+      display: none;
+      width: 100px;
+      flex-shrink: 0;
+      text-align: right;
+    }
+    .title-all {
+      display: inline-block;
+      width: 100px;
+      flex-shrink: 0;
+      text-align: right;
+    }
+  }
+  .nz-collapse-header:hover,.nz-collapse-header.is-active  {
+    background: #F6F6F6;
+    color: $--color-primary;
+    .nz-icon-caret-right {
+      color: #BEBEBE;
+    }
+    .title-delete {
+      display: inline-block;
+    }
+    .title-all {
+      display: none;
+    }
+  }
+  .nz-collapse-header:hover {
+    background: #FFFFFF;
+  }
+  .nz-collapse-body {
+    padding: 5px;
+    box-sizing: border-box;
+    text-align: left;
+  }
+  .image-box-item {
+    flex-direction: column;
+    align-items: center;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+    width: 90px;
+    height: 90px;
+    margin: 5px;
+    padding: 10px;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    .image-src{
+      width: 50px;
+      height: 50px;
+    }
+    .image-text {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      font-size: 12px;
+      text-align: center;
+    }
+    .delIcon{
+      position: absolute;
+      right: 4px;
+      top: -1px;
+      display: none;
+    }
+  }
+  .image-box-item.is-select {
+    border-color: $--border-select-color;
+    .delIcon {
+      display: inline-block;
+      color: $--color-primary;
+    }
+  }
+  .image-box-item:hover {
+    border-color: $--border-select-color;
+    .delIcon {
+      display: inline-block;
+      color: $--color-primary;
+    }
+  }
+  .rotate90 {
+    display:inline-block;
+    transform: rotate(90deg);
+  }
+}
+.nz-select-img-dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  .el-icon-plus {
+    color: $--color-primary;
+    margin-right: 5px;
+  }
+}
+.nz-new-dialog{
+  .el-dialog__header{
+    padding: 16px 20px;
+    .el-dialog__title{
+      font-size: 14px;
+      font-weight: 600;
+    }
+    border-bottom: 1px solid $--border-color-light;
+  }
+  .el-dialog__body{
+    padding: 0;
+  }
+  .el-dialog__footer{
+    border-top: 1px solid $--border-color-light;
+    padding: 13px 20px;
+    margin-top: 0;
+  }
+}
+.is-fullscreen.nz-new-dialog.meta2d-preview {
+  overflow: hidden;
+  .el-dialog__body{
+    flex: 1;
+    .meta2d-project {
+      height: 100%;
+    }
+  }
+}

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

@@ -48,6 +48,15 @@ export function setTopology (key, value) {
     delete topologyCache[`topology${key}`]
   }
 }
+export function clearTopology () {
+  Object.keys(topologyCache).forEach(key => {
+    if (topologyCache[`topology${key}`]) {
+      topologyCache[`topology${key}`].destroy()
+      topologyCache[`topology${key}`] = null
+      delete topologyCache[`topology${key}`]
+    }
+  })
+}
 
 export function clearTopologyCache () {
   topologyCache = {}

nezha-fronted/src/components/common/mixin/beforeMeta2d.js

@@ -19,6 +19,7 @@ export default {
     reload () {
       if (this.currentProject.id) {
         this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
+
           if (res.data && res.data.topo) {
             this.topoData = res.data.topo || {}
             if (res.data.topo.topo) {

nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js

@@ -132,9 +132,11 @@ export default {
       const startTime = endTime - 60 * this.params.timeType * 1000
       this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
         this.clacTopoData(this.topoData, arr).then((data) => {
+          console.log(data)
           this.getModule()
-          getTopology(this.meta2dId).resize()
+          console.log(this.meta2dId, getTopology(this.meta2dId))
           getTopology(this.meta2dId).open(data)
+          getTopology(this.meta2dId).resize()
           getTopology(this.meta2dId).centerView()
           getTopology(this.meta2dId).lock(1)
           this.getNodesArr()

nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js

@@ -10,6 +10,10 @@ export default {
       getTopology(id).centerView()
     },
     initEdit (id) {
+      const endTime = new Date().getTime()
+      const startTime = endTime - 60 * this.params.timeType * 1000
+      const elements = getTopology(id).data().elements
+      this.getQueryValues(elements, startTime, endTime)
       bus.$emit('changeSelectPens', [])
       getTopology(id).inactive()
       getTopology(id).lock(0)

nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue

@@ -95,10 +95,10 @@
       <div style="display: flex;padding: 10px 0; justify-content: space-between">
         <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="addNode"
                 style="margin-right: 20px">
-          {{$t('add element')}}
+          {{$t('project.topology.addNode')}}
         </button>
         <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="selectPenArrId.length" style="margin-right: 20px" @click="clearSelection">
-          {{$t('Clear selection')}}
+          {{$t('project.topology.clearSelection')}}
         </button>
       </div>
     </div>

nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue

@@ -3,7 +3,7 @@
     <div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
     <div class="tools-left" v-if="editFlag">
       <topology-top-tool
-        v-if="editFlag&&toolShow&&!isPreview"
+        v-if="editFlag&&toolShow"
         :meta2dId="meta2dId"
         ref="topTool"
        >
@@ -27,16 +27,16 @@
       </button>
     </div>
     <div v-if="editFlag" class="top-tool-right float-right">
-      <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+      <button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
               style="margin-right: 20px"
       >
         {{$t('overall.preview')}}
       </button>
-      <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
+<!--      <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"-->
-              style="margin-right: 20px"
+<!--              style="margin-right: 20px"-->
-      >
+<!--      >-->
-        {{$t('project.topology.previewExit')}}
+<!--        {{$t('project.topology.previewExit')}}-->
-      </button>
+<!--      </button>-->
       <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
               :disabled="prevent_opt.save"
               :class="{'nz-btn-disabled':prevent_opt.save}"
@@ -56,12 +56,14 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com
 import { deepClone } from '@meta2d/core'
 import bus from '@/libs/bus'
 import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
+import meta2dMainOther from '@/components/common/project/meta2d/meta2dMain'
 
 export default {
   name: 'meta2dHeader',
   mixins: [topoUtil],
   components: {
-    topologyTopTool
+    topologyTopTool,
+    meta2dMainOther
   },
   props: {
     meta2dId: {},
@@ -78,9 +80,12 @@ export default {
   data () {
     return {
       topoScreenState: '',
-      isPreview: false,
       searchTime: bus.getTimezontDateRange(),
-      toolShow: true
+      toolShow: true,
+      topoData: {},
+      querysArray: {},
+      currentProject: {},
+      params: {}
     }
   },
   computed: {
@@ -156,26 +161,44 @@ export default {
       })
     },
     previewTopology () {
-      console.log(getTopology(this.meta2dId).data())
-      this.isPreview = true
       const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
-      const endTime = new Date().getTime()
+      const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
-      const startTime = endTime - 60 * 5 * 1000
+      const topoData = {
-      this.getQueryValues(elements, startTime, endTime).then(arr => {
+        ...getTopology(this.meta2dId).data()
-        this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
+      }
-          getTopology(this.meta2dId).resize()
+      topoData.elements = elements
-          getTopology(this.meta2dId).open(data)
+      topoData.timeType = timeType
-          getTopology(this.meta2dId).centerView()
+      const params = {
-          getTopology(this.meta2dId).lock(1)
+        topoData,
-        })
+        querysArray: topoData.elements || [],
-      })
+        params: {
+          timeType: topoData.timeType || 5
+        },
+        currentProject: {
+          id: this.project.id
+        },
+        show: true
+      }
+      bus.$emit('showMeta2dPreview', params)
+      // console.log(getTopology(this.meta2dId).data())
+      // const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      // const endTime = new Date().getTime()
+      // const startTime = endTime - 60 * 5 * 1000
+      // this.getQueryValues(elements, startTime, endTime).then(arr => {
+      //   this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
+      //     getTopology(this.meta2dId).resize()
+      //     getTopology(this.meta2dId).open(data)
+      //     getTopology(this.meta2dId).centerView()
+      //     getTopology(this.meta2dId).lock(1)
+      //   })
+      // })
     },
     previewExit () {
       if (this.$refs.topTool && this.$refs.topTool.option.map) {
         this.$refs.topTool.option.map = false
         getTopology(this.meta2dId).hideMap()
       }
-      this.isPreview = false
+      // this.isPreview = false
       getTopology(this.meta2dId).lock(0)
       getTopology(this.meta2dId).stopAnimate()
       if (getTopology(this.meta2dId).data().pens) {
@@ -188,12 +211,15 @@ export default {
       this.$emit('getNodesArr')
     },
     cancelTopology () {
-      this.isPreview = false
+      // this.isPreview = false
       this.$store.commit('setShowTopoScreen', this.topoScreenState)
       if (this.$refs.topTool && this.$refs.topTool.option.map) {
         getTopology(this.meta2dId).hideMap()
       }
       this.$emit('exitEdit', true)
+    },
+    reload () {
+
     }
   }
 }

nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue

@@ -2,6 +2,7 @@
   <div class="meta2d-box list-page" :class="editFlag ? 'topology-dialog' : ''" v-my-loading="meta2dLoading" ref="meta2dBox" v-clickoutside="showNodeTools">
     <meta2dHeader
       ref="header"
+      v-if="!isPreview"
       :meta2dId="meta2dId"
       :isChart="isChart"
       :project="project"
@@ -12,7 +13,7 @@
       @getNodesArr="getNodesArr"
     />
     <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
-      <div v-for="(item,index) in nodesArr" v-if="!editFlag&&!isPreview"
+      <div v-for="(item,index) in nodesArr" v-if="!editFlag"
            :key="index"
            v-show="(item.y + offsetY - 48 > -20) && (item.x + item.width/2 + offsetX - 24 > - 20)"
            :style="{position: 'absolute',top:item.y + offsetY - 48 + 'px',left:item.x + item.width/2 + offsetX - 24 +'px', 'z-index': 10}"
@@ -44,7 +45,7 @@
       <div :id="meta2dId" style="height: 100%;width: 100%"></div>
     </div>
     <meta2dProps
-      v-if="editFlag && !isPreview"
+      v-if="editFlag"
       ref="meta2dProps"
       :modules="modules"
       :selectPens.sync="selectPens"
@@ -53,11 +54,11 @@
       :meta2dId="meta2dId"
       @updatePens="updatePens"
     />
-    <div class="context-menu" v-if="contextmenu.left && editFlag && !isPreview" :style="this.contextmenu">
+    <div class="context-menu" v-if="contextmenu.left && editFlag " :style="this.contextmenu">
       <CanvasContextMenu :meta2dId="meta2dId" :selectPens.sync="selectPens"></CanvasContextMenu>
     </div>
     <div
-      v-show="position.show && (!editFlag || isPreview )"
+      v-show="position.show && (!editFlag)"
       @mouseleave="tooltipOut"
       @mouseenter="tooltipOver"
       style="position: absolute"
@@ -128,11 +129,12 @@ export default {
     querysArray: {},
     params: {},
     project: {},
+    isPreview: {
+      type: Boolean,
+      default: false
+    }
   },
   computed: {
-    isPreview () {
-      return this.$refs.header && this.$refs.header.isPreview
-    },
   },
   components: {
     meta2dHeader,
@@ -172,8 +174,8 @@ export default {
     }
   },
   beforeDestroy () {
-    getTopology(this.meta2dId).destroy()
+    // getTopology(this.meta2dId).destroy()
-    setTopology(this.meta2dId, null)
+    // setTopology(this.meta2dId, null)
     bus.$off('changeSelectPens', this.pensActive)
     this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
     this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)

nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue

@@ -1,42 +1,71 @@
 <template>
-  <div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
+  <div class="meta2d-image-box">
-    <div @click="selectBoxShow = !selectBoxShow" style="position: relative">
+    <div @click="changeSelectBoxShow(true)" style="position: relative">
       <div class="image-input">
         <span v-if="imageName">{{unit}} / {{imageName}}</span>
         <i class="el-icon-circle-close" style="position: absolute;top: 10px;right: 10px;font-size: 14px" @click.stop="selectImageChange({image: '', id: ''})"/>
       </div>
     </div>
-    <div class="image-select-box" v-if="selectBoxShow">
+<!--    <div class="image-select-box" v-if="selectBoxShow">-->
-<!--      <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
+<!--     -->
-<!--        <img  :src="item.image" class="imag-src"/>-->
+<!--    </div>-->
-<!--        <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
+    <!--selectImg-->
-<!--      </div>-->
+    <el-dialog
-      <div style="height: 350px"  v-my-loading="imgageLoading">
+      :title="$t('project.topology.image')"
-        <el-card shadow="hover" style="height:320px;width:100%;overflow-y: auto"
+      custom-class="nz-select-img-dialog nz-new-dialog"
+      :visible.sync="selectBoxShow"
+      width="auto"
+      :append-to-body="true"
+      :modal-append-to-body="false"
+      @close="changeSelectBoxShow(false)"
+      destroy-on-close
+    >
+      <div class="image-select-box" style="width: 650px;height:446px;margin-top: 10px"  v-my-loading="imgageLoading">
+        <el-card shadow="hover" style="height:446px;width:100%;overflow-y: auto"
                  class="project-topology-add-node">
-          <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
+          <div  v-for="(item, index) in tools" :key="index" class="collapse-box">
-            <el-collapse-item :title="item.group" :name="item.group">
+            <div :title="item.group" :name="item.group">
-              <template slot="title">
+              <div class="nz-collapse-header" :class="item.show ? 'is-active' : ''" @click.stop="selectGroup(item)">
-                <div style="display: flex;width: 100%;">
+                <span class="nz-icon-caret-right-box">
-                   <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
+                  <i class="nz-icon nz-icon-caret-right" :class="item.show ? 'rotate90': ''" />
-                </div>
+                </span>
-              </template>
+                <div class="text-ellipsis nz-collapse-header-content">{{item.group}}</div>
-              <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item">
+                <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')" />
-                <img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
+                <span class="title-all">{{item.children.length}}</span>
-<!--                <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
-                <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
               </div>
-            </el-collapse-item>
+              <transition name="el-zoom-in-top">
-          </el-collapse>
+                <div v-show="item.show" class="nz-collapse-body">
+                  <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item" :class="btn.id === selectImgId ? 'is-select':''">
+                    <img :src="baseUrl + btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
+                    <div class="img-text text-ellipsis" :title="btn.imageName">{{btn.imageName}}</div>
+                    <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
+                  </div>
+                </div>
+              </transition>
+            </div>
+          </div>
         </el-card>
-        <div class="upload-pic-box" @click="uploadPicChange">
+      </div>
+      <div slot="footer" class="nz-select-img-dialog-footer">
+        <button class="nz-btn nz-btn-size-normal nz-btn-style-light"  @click="uploadPicChange">
           <i class="el-icon-plus"></i>
           <span>
-                     {{ $t('overall.uploadCustomPicture') }}
+             {{ $t('overall.uploadCustomPicture') }}
-                  </span>
+          </span>
-        </div>
+        </button>
+        <span>
+          <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="changeSelectBoxShow(false)">
+             {{$t('overall.cancel')}}
+          </button>
+
+          <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="changImage" :disabled="prevent_opt.save"
+                      :class="{'nz-btn-disabled':prevent_opt.save}"
+                      style="">
+             {{$t('el.datepicker.confirm')}}
+          </button>
+        </span>
       </div>
-    </div>
+    </el-dialog>
     <!--Custom picture-->
     <el-dialog
       :title="title"
@@ -106,9 +135,6 @@
 </template>
 
 <script>
-import { dealImg, topologyImg } from '@/components/common/js/common'
-import { imageTemp } from '@/components/common/project/L5/services/canvas'
-
 export default {
   name: 'meta2dSelectImage',
   props: {
@@ -131,6 +157,8 @@ export default {
         name: '',
         unit: ''
       },
+      selectImgId: '',
+      selectImg: '',
       unit: '',
       imageName: '',
       baseUrl: '',
@@ -147,12 +175,6 @@ export default {
       this.$get('monitor/project/topo/icon').then(res => {
         this.imgageLoading = true
         this.tools = []
-        // res.data.list.forEach((item, index) => {
-        //   item.imageName = item.name
-        //   delete item.name
-        //   promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
-        //   imgArr.push({ ...item })
-        // })
         this.iconArray = [...res.data.list]
         this.iconArray.forEach((item, index) => {
           item.imageName = item.name
@@ -177,6 +199,7 @@ export default {
           } else {
             this.tools.push({
               group: item.unit,
+              show: false,
               children: [{
                 text: item.imageName,
                 imageName: item.imageName,
@@ -188,59 +211,42 @@ export default {
             })
           }
         })
-
+        const findItem = this.tools.find(group => group.group === this.unit)
+        if (findItem) {
+          findItem.show = true
+        }
         this.imgInit = true
         this.imgageLoading = false
-        // Promise.all(promiseArr).then((res2, header) => {
-        //   this.iconArray = [...res.data.list]
-        //   this.iconArray.forEach((item, index) => {
-        //     item.image = res2[index].data
-        //     if (this.imgId == item.id) {
-        //       this.unit = item.unit
-        //       this.imageName = item.imageName
-        //     } else if (this.selectImage === item.image) {
-        //       this.unit = item.unit
-        //       this.imageName = item.imageName
-        //     }
-        //     const group = this.tools.find(tool => tool.group === item.unit)
-        //     if (group) {
-        //       group.children.push({
-        //         text: item.imageName,
-        //         imageName: item.imageName,
-        //         image: res2[index].data,
-        //         imageId: item.id,
-        //         id: item.id,
-        //         unit: item.unit,
-        //       })
-        //     } else {
-        //       this.tools.push({
-        //         group: item.unit,
-        //         children: [{
-        //           text: item.imageName,
-        //           imageName: item.imageName,
-        //           image: res2[index].data,
-        //           imageId: item.id,
-        //           id: item.id,
-        //           unit: item.unit,
-        //         }]
-        //       })
-        //     }
-        //   })
-        //
-        //   this.imgInit = true
-        //   this.imgageLoading = false
-        //   imgArr = null
-        //   promiseArr = null
-        // })
       })
     },
-    changeSelectBoxShow () {
+    changeSelectBoxShow (flag) {
-      this.selectBoxShow = false
+      this.selectBoxShow = flag
+      this.selectImgId = this.imgId
+      const findItem = this.tools.find(group => {
+        group.show = false
+        return group.group === this.unit
+      })
+      if (findItem) {
+        findItem.show = true
+        findItem.children.forEach(item=>{
+          if (item.id === this.selectImgId) {
+            this.selectImg = item
+          }
+        })
+      }
+    },
+    selectGroup (item) {
+      item.show = !item.show
     },
     selectImageChange (item) {
-      this.unit = item.unit
+      this.selectImgId = item.id
-      this.imageName = item.imageName
+      this.selectImg = item
-      this.$emit('updateImage', item)
+    },
+    changImage () {
+      this.unit = this.selectImg.unit
+      this.imageName = this.selectImg.imageName
+      this.$emit('updateImage', this.selectImg)
+      this.changeSelectBoxShow(false)
     },
     tooltipDelete (item) {
       this.$confirm(this.$t('tip.confirmDelete'), {
@@ -380,37 +386,7 @@ export default {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
+          this.imageInit()
-            dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              this.iconArray.push({
-                ...iconInfo.data.list[0],
-                image: `/monitor/project/topo/icon/${res.data.id}/0`
-              })
-              if (group) {
-                group.children.push({
-                  text: res.data.imageName,
-                  imageName: res.data.imageName,
-                  image: `/monitor/project/topo/icon/${res.data.id}/0`,
-                  imageId: res.data.id,
-                  id: res.data.id,
-                  unit: this.uploadPic.unit
-                })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    text: res.data.imageName,
-                    imageName: res.data.imageName,
-                    image: `/monitor/project/topo/icon/${res.data.id}/0`,
-                    imageId: res.data.id,
-                    id: res.data.id,
-                    unit: this.uploadPic.unit
-                  }]
-                })
-              }
-            })
-          })
         } else {
           this.$message.error(res.msg)
         }
@@ -421,18 +397,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .image-box-item{
-
-  }
-.image-box-item {
-
-}
-  .image-box-item:hover {
-    border-color: #fa901c;
-    .delIcon {
-      display: inline-block;
-      color: #fa901c;
-    }
-  }
 
 </style>

nezha-fronted/src/components/page/monitor/project/project.vue

@@ -38,6 +38,28 @@
         ref="editEndpointBox">
       </edit-endpoint-box>
     </transition>
+    <el-dialog
+      :title="'123'"
+      :visible.sync="isPreview.show"
+      fullscreen
+      custom-class="nz-new-dialog meta2d-preview"
+      :append-to-body="true"
+      :modal-append-to-body="false"
+      @close="isPreview.show = false"
+      destroy-on-close
+    >
+      <div v-if="isPreview.show" style="width: 100%;height: 100%">
+        <meta2dMain
+          :meta2dId="'projectIdIsPreview'"
+          :is-preview="true"
+          :name="'preview'"
+          :topoData="isPreview.topoData"
+          :querysArray="isPreview.querysArray"
+          :project="isPreview.currentProject"
+          :params="isPreview.params"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -46,6 +68,7 @@ import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
 import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
 import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
+import { clearTopology } from '@/components/common/js/common'
 
 export default {
   name: 'project2',
@@ -62,6 +85,13 @@ export default {
         addEndpoint: { show: false },
         editEndpoint: { show: false }
       },
+      isPreview: {
+        show: false,
+        topoData: {},
+        querysArray: {},
+        currentProject: {},
+        params: {},
+      },
       /* 二级页面相关 */
       bottomBox: {
         endpoint: {}, // asset详情
@@ -556,6 +586,9 @@ export default {
       bus.$on('alert-message-change', () => {
         this.getEndpointTableData()
       })
+      bus.$on('showMeta2dPreview', (params) => {
+        this.isPreview = params
+      })
     },
     messageStyle (e) {
       if (e.column.label == 'Alerts' || e.column.label == this.$t('overall.alert')) {
@@ -668,6 +701,8 @@ export default {
     bus.$off('module-list-change')
     bus.$off('endpoint-list-change')
     bus.$off('alert-message-change')
+    bus.$off('showMeta2dPreview')
+    clearTopology()
     if (this.scrollbarWrap) {
       this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
     }