fix：修改 topo tooltip 样式不正确的问题

2023-02-24 10:33:49 +08:00
parent 5bc8a34a2e
commit e0003db022
5 changed files with 246 additions and 17 deletions
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -194,6 +194,7 @@ export default {
      pen.visible = pen.visible || true
      pen.locked = pen.locked || 0
      pen.isBottom = true
+      pen.autoPlay = true
    },
    pensActive (pens, e) { // 选中节点
      this.selectPens = pens
--- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
@@ -138,6 +138,7 @@ export default {
          data.pens = []
        }
        data.pens.forEach(pen => {
+          pen.isBottom = false
          if (pen.isNz) {
            if (pen.data.legend && pen.data.enable.valueMapping) {
              const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
@@ -129,7 +129,7 @@
            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('border')"/>
          </div>
          <div v-show="elements.border" class="form-row-content">
-            <div class="form-row-item ">
+            <div class="form-row-item special-meta2d-select">
              <div class="form-row-key">
                {{$t('overall.type')}}
              </div>
@@ -401,7 +401,7 @@
            <i class="nz-icon nz-icon-arrow-down" @click="updateShow('line')"/>
          </div>
          <div v-show="elements.line" class="form-row-content">
-            <div class="form-row-item">
+            <div class="form-row-item special-meta2d-select">
              <div class="form-row-key">
                {{$t('project.topology.style')}}
              </div>
@@ -1222,6 +1222,7 @@ export default {
        uid: getUUID()
      }
      this.pen.data.valueMapping.push(obj)
+      this.change('data.valueMapping')
    },
    copyMapping (index) {
      const temp = lodash.cloneDeep(this.pen.data.valueMapping[index])
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
@@ -38,6 +38,69 @@
        </div>
      </div>
    </div>
+    <!--Custom picture-->
+    <el-dialog
+      :title="title"
+      :visible.sync="uploadPicShow"
+      width="auto"
+      @close="uploadPicShow = false"
+      destroy-on-close>
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
+        <el-col :span="20">
+          <el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
+        </el-col>
+      </el-row>
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
+        <el-col :span="20">
+          <el-autocomplete
+            popper-class="right-box-select-top right-public-box-dropdown-top"
+            :maxlength="64" show-word-limit
+            class="inline-input"
+            v-model="uploadPic.unit"
+            :fetch-suggestions="querySearch"
+            size="small"
+          ></el-autocomplete>
+        </el-col>
+      </el-row>
+
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label"> </el-col>
+        <el-col :span="20">
+          <div class="upload-body">
+            <el-upload
+              drag
+              class="upload-demo"
+              action=" "
+              :show-file-list="true"
+              :on-change="beforeAvatarUpload"
+              :auto-upload="false"
+              accept=".jpg,.png"
+              :limit="1"
+              :id="'upload-pic-show'">
+              <!--<div slot="tip" class="el-upload__tip" >{{$t('overall.importTipImg')}}</div>-->
+              <i class="nz-icon nz-icon-upload"></i>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            </el-upload>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="upload-pic-row" style="text-align: center">
+            <span>
+               <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
+             {{$t('project.topology.exit')}}
+           </button>
+
+              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload" :disabled="prevent_opt.save"
+                      :class="{'nz-btn-disabled':prevent_opt.save}"
+                      style="">
+             {{$t('overall.save')}}
+           </button>
+            </span>
+      </div>
+
+    </el-dialog>
  </div>
 </template>

@@ -57,7 +120,14 @@ export default {
      iconArray: [],
      selectBoxShow: false,
      imageNull: '',
-      activeNames: []
+      activeNames: [],
+      uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
+      uploadPic: {
+        name: '',
+        unit: ''
+      },
    }
  },
  mounted () {
@@ -158,8 +228,152 @@ export default {
      })
    },
    uploadPicChange () {
-
+      this.unitArr = []
+      this.tools.forEach((item, index) => {
+        if (index > 0) {
+          this.unitArr.push({
+            value: item.group
+          })
        }
+      })
+      this.uploadPic.name = ''
+      this.uploadPic.unit = ''
+      this.file = null
+      this.uploadPicShow = true
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.unitArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    beforeAvatarUpload (file, fileList) {
+      const this_ = this
+      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+      const isLt2M = (file.size / 1024 / 1024) < 2
+      if (!isJPG) {
+        this.$message.error(this_.$t('project.topology.imgFormat'))
+        fileList = fileList.splice(fileList.length - 1, 1)
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        fileList = fileList.splice(fileList.length - 1, 1)
+        return false
+      }
+      new Promise(function (resolve, reject) {
+        const width = 0
+        const height = 0
+        const _URL = window.URL || window.webkitURL
+        const img = new Image()
+        img.onload = function () {
+          const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
+          valid ? resolve() : reject()
+        }
+        img.src = _URL.createObjectURL(file.raw)
+      }).then(() => {
+        if (isJPG) {
+          this.file = file.raw
+        }
+        return file.raw
+      }, () => {
+        this.$message.error(this_.$t('project.topology.imgMeasure'))
+        return Promise.reject()
+      })
+      return false
+    },
+    imgUpload () {
+      const this_ = this
+      if (!this.imageSave) {
+        this.imageSave = true
+      }
+      if (!this.uploadPic.unit) {
+        this.$message({
+          message: this_.$t('project.topology.unitError'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.file) {
+        this.$message({
+          message: this_.$t('project.topology.imgError'),
+          type: 'error'
+        })
+        return
+      }
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.file)
+      if (this.uploadPic.name) {
+        form.append('name', this.uploadPic.name)
+      } else {
+        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+      }
+      form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
+      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        this.imageSave = false
+        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 => {
+            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: data.data
+              })
+              if (group) {
+                group.children.push({
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data.data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit,
+                    rect: {
+                      width: data.width,
+                      height: data.height
+                    }
+                  }
+                })
+              } else {
+                this.tools.push({
+                  group: this.uploadPic.unit,
+                  children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: res.data.imageName,
+                      image: data.data,
+                      imageId: res.data.id,
+                      unit: this.uploadPic.unit,
+                      rect: {
+                        width: data.width,
+                        height: data.height
+                      }
+                    }
+                  }]
+                })
+              }
+            })
+          })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="tooltip-box" style="width: 400px;height: 300px">
-    <div v-if="params.titleShow && params.title">{{params.title}}</div>
+  <div class="tooltip-box" style="width: 400px;height: 300px;display: flex;flex-direction: column">
+    <div v-if="params.titleShow && params.title" style="margin-bottom: 5px">{{params.title}}</div>

    <div
      v-if="params.chartType === 'text'"
@@ -9,6 +9,7 @@
    </div>
    <panelChart
      v-else
+      style="flex: 1"
      ref="panelChart"
      :chart-info="chartInfo"
      :show-header="false"
@@ -56,17 +57,27 @@ export default {
        const obj = {}
        this.params.legends.forEach(item => {
          const findItem = this.queryValues.find(query => query.name === item.legend && query.parent === item.parent)
-          if (findItem) {
+          // if (findItem) {
+          //   // chartData.push([findItem])
+          //   if (obj[findItem.elements.name]) {
+          //     chartData[obj[findItem.elements.name].index].push(findItem)
+          //   } else {
          //     chartData.push([findItem])
-            if (obj[findItem.elements.name]) {
-              chartData[obj[findItem.elements.name].index].push(findItem)
-            } else {
+          //     obj[findItem.elements.name] = {
+          //       index: chartData.length - 1
+          //     }
+          //     elements.push(findItem.elements)
+          //   }
+          // }
+          if (findItem) {
            chartData.push([findItem])
-              obj[findItem.elements.name] = {
-                index: chartData.length - 1
+            const element = {
+              ...findItem.elements
            }
-              elements.push(findItem.elements)
+            if (item.alias) {
+              element.legend = item.alias
            }
+            elements.push(element)
          }
        })
        if (chartData.length && this.$refs.panelChart) {
@@ -75,6 +86,7 @@ export default {
          this.$refs.panelChart.loading = false
          this.$nextTick(() => {
            this.$refs.panelChart.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
+            this.$refs.panelChart.$refs.chart.$refs['chart' + this.chartInfo.id].resize()
          })
        }
      }