完善悬浮提示功能

2022-08-02 14:41:13 +08:00
parent 8de6305811
commit 8c246b1295
12 changed files with 529 additions and 55 deletions
--- a/nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss
@@ -1,5 +1,7 @@
 .backups-table{
- 
+
+   
+
  .tit{
    color: $--color-info !important;
  }
@@ -40,7 +42,6 @@
        .table-operation-button {
          border: none;
          background-color: $--color-primary;
-          color: $--button-primary-color;
          display: flex;
          text-align: center;
          line-height: 22px;
@@ -78,3 +79,25 @@

 }

+.popover-css .week-item{
+  width: 35px;
+  height: 22px;
+  line-height: 22px;
+  opacity: 0.9;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 12px;
+  letter-spacing: 0;
+  font-weight: 400;
+  padding: 0 1px;
+  margin-left: 10px;
+  margin-bottom: 5px;
+  text-align: center;
+  background: $--background-color-base;
+  color: black;
+
+  .week-item:nth-child(1){
+    margin-left: 1px !important;
+}
+}
+
--- a/nezha-fronted/src/assets/css/font/iconfont.css
+++ b/nezha-fronted/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('iconfont.woff2?t=1654482769343') format('woff2'),
-       url('iconfont.woff?t=1654482769343') format('woff'),
-       url('iconfont.ttf?t=1654482769343') format('truetype');
+  src: url('iconfont.woff2?t=1659421606049') format('woff2'),
+       url('iconfont.woff?t=1659421606049') format('woff'),
+       url('iconfont.ttf?t=1659421606049') format('truetype');
 }

 .nz-icon {
@@ -13,6 +13,54 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.nz-icon-repeat:before {
+  content: "\e798";
+}
+
+.nz-icon-bubble:before {
+  content: "\e761";
+}
+
+.nz-icon-zhengfangxing:before {
+  content: "\e796";
+}
+
+.nz-icon-sort:before {
+  content: "\e797";
+}
+
+.nz-icon-mimakejian1:before {
+  content: "\e794";
+}
+
+.nz-icon-bukejian:before {
+  content: "\e795";
+}
+
+.nz-icon-zhixian:before {
+  content: "\e793";
+}
+
+.nz-icon-sanjiaoxing:before {
+  content: "\e790";
+}
+
+.nz-icon-xingxing:before {
+  content: "\e792";
+}
+
+.nz-icon-duobianxing:before {
+  content: "\e78f";
+}
+
+.nz-icon-diagnosis:before {
+  content: "\e78a";
+}
+
+.nz-icon-shengji:before {
+  content: "\e78b";
+}
+
 .nz-icon-moshiqiehuan:before {
  content: "\e783";
 }
--- a/nezha-fronted/src/assets/css/font/iconfont.js
+++ b/nezha-fronted/src/assets/css/font/iconfont.js
--- a/nezha-fronted/src/assets/css/font/iconfont.json
+++ b/nezha-fronted/src/assets/css/font/iconfont.json
@@ -5,6 +5,90 @@
  "css_prefix_text": "nz-icon-",
  "description": "",
  "glyphs": [
+    {
+      "icon_id": "30996596",
+      "name": "repeat",
+      "font_class": "repeat",
+      "unicode": "e798",
+      "unicode_decimal": 59288
+    },
+    {
+      "icon_id": "25495310",
+      "name": "气泡图",
+      "font_class": "bubble",
+      "unicode": "e761",
+      "unicode_decimal": 59233
+    },
+    {
+      "icon_id": "30875641",
+      "name": "正方形",
+      "font_class": "zhengfangxing",
+      "unicode": "e796",
+      "unicode_decimal": 59286
+    },
+    {
+      "icon_id": "30875648",
+      "name": "sort",
+      "font_class": "sort",
+      "unicode": "e797",
+      "unicode_decimal": 59287
+    },
+    {
+      "icon_id": "30874541",
+      "name": "密码可见",
+      "font_class": "mimakejian1",
+      "unicode": "e794",
+      "unicode_decimal": 59284
+    },
+    {
+      "icon_id": "30874542",
+      "name": "不可见",
+      "font_class": "bukejian",
+      "unicode": "e795",
+      "unicode_decimal": 59285
+    },
+    {
+      "icon_id": "30874378",
+      "name": "直线",
+      "font_class": "zhixian",
+      "unicode": "e793",
+      "unicode_decimal": 59283
+    },
+    {
+      "icon_id": "30871091",
+      "name": "三角形",
+      "font_class": "sanjiaoxing",
+      "unicode": "e790",
+      "unicode_decimal": 59280
+    },
+    {
+      "icon_id": "30871092",
+      "name": "星形",
+      "font_class": "xingxing",
+      "unicode": "e792",
+      "unicode_decimal": 59282
+    },
+    {
+      "icon_id": "30871089",
+      "name": "多边形",
+      "font_class": "duobianxing",
+      "unicode": "e78f",
+      "unicode_decimal": 59279
+    },
+    {
+      "icon_id": "30664219",
+      "name": "diagnosis",
+      "font_class": "diagnosis",
+      "unicode": "e78a",
+      "unicode_decimal": 59274
+    },
+    {
+      "icon_id": "30664220",
+      "name": "升级",
+      "font_class": "shengji",
+      "unicode": "e78b",
+      "unicode_decimal": 59275
+    },
    {
      "icon_id": "30102525",
      "name": "模式切换",
--- a/nezha-fronted/src/assets/css/font/iconfont.ttf
+++ b/nezha-fronted/src/assets/css/font/iconfont.ttf
--- a/nezha-fronted/src/assets/css/font/iconfont.woff
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff
--- a/nezha-fronted/src/assets/css/font/iconfont.woff2
+++ b/nezha-fronted/src/assets/css/font/iconfont.woff2
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
--- a/nezha-fronted/src/components/common/alert/alertBackup
+++ b/nezha-fronted/src/components/common/alert/alertBackup
@@ -0,0 +1,182 @@
+<template>
+    <div
+    :class="calcHeight(that.position, that)"
+    :style="calcPosition(that.position, that)"
+    class="backup-state-info"
+    ref="alertLabels"
+  >
+    <div class="start-time-title tit">
+        <span>
+            Start time
+        </span>
+      </div>
+    <div class="alert-label-header-title">
+      <i class="el-icon-s-cooperation"></i>
+         <span >
+          {{this.backupData[0].schedule.stime }}
+        </span>
+      </div>
+      <div class="repeat-evey-title tit">
+         <span>
+            Repeat evey
+        </span>
+      </div>
+         <div class="alert-label-header-title">
+          <i class="el-icon-s-cooperation"></i>
+         <span :class="this.backupData[0].schedule.type===1?'1 day':(this.backupData[0].schedule.type===3?'1 week:':'1 month')">
+          {{this.backupData[0].schedule.type }}
+        </span>
+      </div>
+      <!-- v-my-loading="loading"> -->
+      <!-- title -->
+      <!-- <div class="alert-label-header-title">
+        <span>
+            Version :
+        </span>
+        <span class="alert-label-header-text">
+            {{ that && that.version ? that.version : "--" }}
+        </span>
+      </div>
+      <div class="alert-label-box">
+        <span :class="that.auth ? 'green-bg' : 'red-bg'" class="active-icon"></span>
+        <span class="alert-label-value">Auth</span>
+      </div>
+       <div class="alert-label-box" v-if="that.prometheus">
+        <span :class="{'green-bg': that.prometheus == 'UP','red-bg': that.prometheus == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">Prometheus</span>
+      </div>
+       <div class="alert-label-box" v-if="that.cortex">
+        <span :class="{'green-bg': that.cortex == 'UP','red-bg': that.cortex == 'DOWN', 'gray-bg': that.cortex == 'UNAVAILABLE'}" class="active-icon"></span>
+        <span class="alert-label-value">Cortex</span>
+      </div>
+       <div class="alert-label-box" v-if="that.loki">
+        <span :class="{'green-bg': that.loki == 'UP','red-bg': that.loki == 'DOWN','gray-bg': that.loki == 'UNAVAILABLE'}" class="active-icon"></span>
+        <span class="alert-label-value">Loki</span>
+      </div>
+      <div class="alert-label-box" v-if="that.snmp_exporter">
+        <span :class="{'green-bg': that.snmp_exporter == 'UP','red-bg': that.snmp_exporter == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">SNMP exporter</span>
+      </div>
+      <div class="alert-label-box" v-if="that.blackbox_exporter">
+        <span :class="{'green-bg': that.blackbox_exporter == 'UP','red-bg': that.blackbox_exporter == 'DOWN'}" class="active-icon"></span>
+        <span class="alert-label-value">Blackbox exporter</span>
+      </div> -->
+  </div>
+</template>
+
+<script>
+import trendMixin from './trendMixins'
+import table from '@/components/common/mixin/table'
+
+export default {
+  name: 'alertBackup',
+  mixins: [trendMixin, table],
+  props: {
+    id: {},
+    type: {},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean,
+    backupData: Array
+  },
+  data () {
+    return {
+      loading: true,
+      heightList: 0,
+      boxWidth: 0
+    }
+  },
+  watch: {
+    that: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+      }
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
+          }
+          const dialogHeight = dialog.getBoundingClientRect()
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            // top: `${position.top - this.heightList - topOffSetView}px`
+            top: `${position.top - this.heightList - topOffSetView + position.height / 2}px`
+          }
+        } else {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            // top: `${position.top + topOffSet}px`
+            top: `${position.top + position.height / 2}px`
+          }
+        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView - position.width * 3.3 + 'px'
+        }
+        return labelPosition
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const elHeight =
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  mounted () {
+    console.log(this.backupData)
+    if (this.$refs.alertLabels) {
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+    } else {
+      this.heightList = 0
+      this.boxWidth = 0
+    }
+  }
+}
+</script>
+<style>
+</style>
--- a/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/backupsBox.vue
@@ -356,20 +356,43 @@ export default {
          // this.editBackup.stime = new Date(this.editBackup.stime).getTime()
          // offset = Number.parseInt(offset)
          // this.editBackup.stime -= offset * 60 * 60 * 1000
-          put('/sys/backup', {
-            state: Number(this.editBackup.state),
-            schedule: {
-              type: Number(this.editBackup.type),
-              stime: this.timezoneToUtcTimeStr(this.editBackup.stime, 'YYYY-MM-DD HH:mm:ss') || '',
-              repeat: Number(this.editBackup.repeat),
-              nums: this.editBackup.nums
-            },
-            retention: Number(this.editBackup.retention)
-          }).then((res) => {
-            if (res.code === 200) {
-              this.esc(true)
+          setTimeout(() => {
+            if (this.editBackup) {
+              this.$put('/sys/backup', {
+                state: Number(this.editBackup.state),
+                schedule: {
+                  type: Number(this.editBackup.type),
+                  stime: this.timezoneToUtcTimeStr(this.editBackup.stime, 'YYYY-MM-DD HH:mm:ss') || '',
+                  repeat: Number(this.editBackup.repeat),
+                  nums: this.editBackup.nums
+                },
+                retention: Number(this.editBackup.retention)
+              }).then((res) => {
+                if (res.code === 200) {
+                  this.esc(true)
+                  this.$forceUpdate()
+                }
+              })
+            } else {
+              this.$post('/sys/backup', {
+                state: Number(this.editBackup.state),
+                schedule: {
+                  type: Number(this.editBackup.type),
+                  stime: this.timezoneToUtcTimeStr(this.editBackup.stime, 'YYYY-MM-DD HH:mm:ss') || '',
+                  repeat: Number(this.editBackup.repeat),
+                  nums: this.editBackup.nums
+                },
+                retention: Number(this.editBackup.retention)
+              }).then((res) => {
+                if (res.code === 200) {
+                  this.esc(true)
+                  this.$forceUpdate()
+                }
+              })
            }
-          })
+          }, 400)
+        } else {
+          return false
        }
      })
    },
--- a/nezha-fronted/src/components/common/table/settings/backupsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/backupsTable.vue
@@ -18,59 +18,60 @@
      <template slot-scope="scope" :column="item">
        <span v-if="item.prop === 'schedule'">
            <el-popover
-            placement="bottom"
+            popper-class="popover-css"
+            placement="bottom-start"
            trigger="hover"
            :open-delay="300"
            :width="215"
-            popper-class="popover-self"
          >
          <!--  -->

-          <div>
+          <div class="popver-box">
            <!-- Start time -->
-             <div style="margin-bottom: 5px !important;">
+             <div  class="popover-box-title">
              <span class="tit">
                 Start time
              </span>
             </div>
-             <div style="margin-bottom: 10px !important;">
-              <i class="el-icon-s-cooperation"></i>
-              <span>
+             <div class="popover-box-content">
+              <i class="nz-icon nz-icon-date" style="color: #FA901C;"></i>
+              <span class="popover-box-content-span">
              {{tableData[0].schedule.stime }}
              </span>
             </div>
             <!-- Repeat evey -->
              <div v-if="tableData[0].schedule.type===4?false:true">
-                      <div style="margin-bottom: 5px !important;" >
-                          <span class="tit" >
+                      <div>
+                          <span class="tit popover-box-title" >
                              Repeat evey
                          </span>
             </div>
-             <div style="margin-bottom: 10px !important;" >
-              <i class="el-icon-s-cooperation"></i>
-              <span>
+             <div  class="popover-box-content">
+              <i class="nz-icon nz-icon-repeat" style="color: #FA901C;"></i>
+              <span class="popover-box-content-span">
                    {{tableData[0].schedule.type===1?'1 time':(tableData[0].schedule.type===2?'1 day':(tableData[0].schedule.type===3?'1 week':'1 month')) }}
              </span>
             </div>
              </div>
             <!--  Week on -->
             <div v-show="tableData[0].schedule.type===3?true:false">
-              <span class="tit" style="margin-bottom: 5px !important;">
+              <span class="tit popover-box-title">
                Week on
              </span>
-               <div >
+               <div  class="popover-box-content">
                <i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
-                 <span style="margin-bottom: 10px !important;" v-html="weekFun(tableData[0].schedule.nums)"></span>
+                 <div v-html="weekFun(tableData[0].schedule.nums)">
+                 </div>
             </div>
             </div>
             <!-- month -->
              <div v-show="tableData[0].schedule.type===4?true:false">
-              <span class="tit" style="margin-bottom: 5px !important;">
+              <span class="tit popover-box-title">
                Every day
              </span>
-              <div >
+              <div class="popover-box-content">
                 <i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
-                <span style="margin-bottom: 10px !important;" v-html="monthFun(tableData[0].schedule.nums)"></span>
+                <span v-html="monthFun(tableData[0].schedule.nums)"></span>
              </div>
             </div>
          </div>
@@ -153,7 +154,6 @@ export default {
  },
  data () {
    return {
-      backupData: this.tableData,
      alertLabelShow: false,
      alertLabelObj: {},
      agent: agent,
@@ -283,6 +283,9 @@ export default {
        }, {
          value: 30,
          label: this.$t('31')
+        }, {
+          value: -1,
+          label: this.$t('Last')
        }
      ]
      // tableData: [
@@ -326,13 +329,13 @@ export default {
    // 月
    monthFun (monthArr) {
      if (monthArr) {
-        console.log(monthArr, 66)
+        // console.log(monthArr, 66)
        let str = ''
        monthArr.forEach((item, index) => {
-          console.log(item)
+          // console.log(item)
          if (!item) return
          str += `<span class="week-item">${this.monthList[item - 1].label}</span>`
-          console.log(str, 11)
+          // console.log(str, 11)
        })
        return str
      }
@@ -394,14 +397,36 @@ export default {
    },
    edit () {
      this.$emit('edit', this.tableData[0])
-      console.log(this.tableData[0].schedule.nums)
+      // console.log(this.tableData[0].schedule.nums)
      // console.log(this.customTableTitle)
    }
  },

  watch: {
+
  }
 }
 </script>
-<style lang='' scoped>
+<style lang='scss' >
+ // popver样式
+  .popover-css .popver-box{
+
+    padding: 5px !important;
+
+    .popover-box-title{
+        color: rgba(220, 220, 220, 0.514);
+      }
+
+    .popover-box-content{
+      margin-top: 5px !important;
+      margin-bottom: 10px !important;
+      color: black;
+      display: flex;
+       .popover-box-content-span{
+        margin-left: 15px !important;
+
+    }
+
+    }
+  }
 </style>
--- a/nezha-fronted/src/components/page/config/backups.vue
+++ b/nezha-fronted/src/components/page/config/backups.vue
@@ -130,6 +130,8 @@ export default {
              for (const i in res.data.schedule) {
                this.tableData[0].schedule[i] = res.data.schedule[i]
              }
+            } else {
+              this.tableData[0] = []
            }
          }
        })
@@ -144,15 +146,17 @@ export default {
        this.$get('/sys/backup').then((res) => {
          if (res.code === 200) {
            if (res.data) {
-              this.tableData[0].retention = res.data.retention
-              this.tableData[0].state = res.data.state == 1
-              for (const i in res.data.schedule) {
-                this.tableData[0].schedule[i] = res.data.schedule[i]
-              }
+              this.$set(this.tableData[0], 'schedule', res.data.schedule)
+              this.$set(this.tableData[0], 'retention', res.data.retention)
+              this.$set(this.tableData[0], 'state', res.data.state)
+              // this.tableData[0].retention = res.data.retention
+              // this.tableData[0].state = res.data.state == 1
+              // for (const i in res.data.schedule) {
+              //   this.tableData[0].schedule[i] = res.data.schedule[i]
+              // }
            }
          }
        })
-
        this.$get('/sys/backup/list').then((res) => {
          if (res.code === 200) {
            if (res.data) {
@@ -165,8 +169,6 @@ export default {
          if (res.code === 200) {
            if (res.data) {
              this.tableData2 = res.data
-            } else {
-              this.tableData2 = []
            }
          }
        })