feat: panel 滚动超过 50px 显示分割线

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

@@ -313,7 +313,7 @@
            </button>
 
               <button @click="imgUpload" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                      v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                      v-has="'topo_icon_save'" :disabled="prevent_opt.save"
                       :class="{'nz-btn-disabled':prevent_opt.save}"
                       style="margin-right: 20px">
              {{$t('project.topology.save')}}
@@ -477,6 +477,8 @@ export default {
       penToolTipScale: 1,
       oldScale: 1,
       uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
       uploadPic: {
         name: '',
         unit: ''
@@ -1484,22 +1486,24 @@ export default {
     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'))
         return false
       }
-      // if (!isLt2M) {
-      //   this.$message.error( this_.$t('project.topology.imgSize'));
-      //   return false;
-      // }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        return false
+      }
       const isSize = new Promise(function (resolve, reject) {
-        const width = 100
-        const height = 100
+        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)
@@ -1545,17 +1549,20 @@ export default {
     upload () {
       const form = new FormData()
       form.append('file', this.file)
+      console.log(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 => {
         if (res.code == 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           this.uploadPicShow = false
-          this.dealImg(`monitor/project/topo/icon/${res.data.id}`).then((data) => {
+          this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data) => {
             const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
             if (group) {
               group.children.push({
@@ -1611,7 +1618,7 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2) => {
@@ -1655,7 +1662,7 @@ export default {
         const promiseArr = []
         imgidList.forEach((item, index) => {
           if (item.data.imageId) {
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}`))
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
           } else {
             promiseArr.push('')
           }

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

@@ -65,7 +65,7 @@
           </template>
         </div>
         <div id="tableList" class="table-list">
-          <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+          <div ref="dashboardScrollbar" style="height: calc(100% - 1px); overflow: auto;" :class="overScroll10?'border-t-1-de':'border-t-1-tr'">
             <div class="box-content">
               <chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="$CONSTANTS.fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime"  @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
             </div>
@@ -102,6 +102,7 @@ export default {
   name: 'panel',
   data () {
     return {
+      overScroll10: false,
       panelLock: true,
       showTopBtn: false, // top按钮
       visible: false,
@@ -571,6 +572,7 @@ export default {
       const _self = this
       this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
         _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
+        _self.overScroll10 = _self.scrollbarWrap.scrollTop > 50
         _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
@@ -783,6 +785,12 @@ export default {
 }
 </script>
 <style lang="scss">
+  .border-t-1-de{
+    border-top: 1px solid #dedede;
+  }
+  .border-t-1-tr{
+    border-top: 1px solid transparent;
+  }
   .panel {
     height: 100%;
     display: flex;