style：黑色主题下的样式调整

2022-07-06 17:35:45 +08:00
parent fe520b728b
commit 716ff64eb3
8 changed files with 179 additions and 154 deletions
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -374,3 +374,13 @@
 .meta-option-box {
  color: $--color-text-regular;
 }
+.el-range-input{
+  background: $--background-color-empty;
+}
+.ql-toolbar {
+  line-height: 22px;
+  .ql-picker-options{
+    background-color: $--background-color-empty;
+    color: $--color-text-primary;
+  }
+}
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -568,3 +568,11 @@
  overflow: auto;
  background-color: $--table-body-background-color;
 }
+.el-checkbox.is-disabled{
+  line-height: 1;
+  height: 16px;
+}
+.el-checkbox__input.is-disabled{
+  line-height: 1;
+  height: 16px;
+}
--- a/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
@@ -215,16 +215,16 @@
      font-weight: 600;
      text-transform: Capitalize;
    }
-    .pipeline-option {
-      i {
-        color: $--color-text-regular;
-      }
-    }
  }
  .el-input-group__append {
    background-color: $--border-color-light;
  }
 }
+.pipeline-option {
+  i {
+    color: $--color-text-regular;
+  }
+}
 .sub-label {
  padding-right: 15px;
  font-size: 14px;
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -607,10 +607,10 @@
 </template>

 <script>
-import trendMixin from "./trendMixins";
+import trendMixin from './trendMixins'

 export default {
-  name: "alertLabel",
+  name: 'alertLabel',
  mixins: [trendMixin],
  props: {
    id: {},
@@ -618,63 +618,63 @@ export default {
    // labelLoading:{},
    that: {},
    detailList: Boolean,
-    alertTableDialog: Boolean,
+    alertTableDialog: Boolean
  },
-  data() {
+  data () {
    return {
      alertLabelData: null,
      loading: true,
      heightList: 0,
      boxWidth: 0,
      severityDataWeight: this.$store.getters.severityDataWeight,
-      alertColor: "#23bf9a",
-    };
+      alertColor: '#23bf9a'
+    }
  },
  watch: {
    id: {
      immediate: true,
      deep: true,
-      handler(n) {
-        this.init();
-      },
+      handler (n) {
+        this.init()
+      }
    },
    that: {
      immediate: true,
      deep: true,
-      handler(n) {},
+      handler (n) {}
    },
    LRTriangle: {
      immediate: true,
      deep: true,
-      handler(n) {},
-    },
+      handler (n) {}
+    }
  },
  computed: {
-    calcPosition() {
+    calcPosition () {
      return function (position) {
        const clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
-            : document.documentElement.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;
+            : 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,
-        };
+          right: 0
+        }
        if (this.alertTableDialog) {
          let dialog = document.querySelector(
-            "#dialog-alert-massage .el-dialog"
-          );
+            '#dialog-alert-massage .el-dialog'
+          )
          if (!dialog) {
-            dialog = document.querySelector("#viewGraphDialog .el-dialog");
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
          }
          const dialogHeight = dialog.getBoundingClientRect()
          leftOffSet = leftOffSet - 3 * dialogHeight.x
@@ -685,190 +685,190 @@ export default {
        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}px`
+          }
        } else {
          labelPosition = {
            left: `${position.left + position.width + leftOffSet}px`,
-            top: `${position.top + topOffSet}px`,
-          };
+            top: `${position.top + topOffSet}px`
+          }
        }
        if (position.left > clientWidth / 2) {
-          delete labelPosition.left;
+          delete labelPosition.left

          labelPosition.right =
-            clientWidth - position.left - leftOffSetView + "px";
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        return labelPosition
      }
-        return labelPosition;
-      };
    },
-    calcHeight() {
-      const self = this;
+    calcHeight () {
+      const self = this
      return function (position) {
        const clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
-            : document.documentElement.clientHeight;
+            : document.documentElement.clientHeight
        const elHeight =
-          self.type === "asset" ? 318 : self.type === "project" ? 70 : 70;
+          self.type === 'asset' ? 318 : self.type === 'project' ? 70 : 70
        if (position.top + elHeight > clientHeight) {
-          return "alert-labelUp";
+          return 'alert-labelUp'
        } else {
-          return "alert-label";
+          return 'alert-label'
+        }
+      }
    }
-      };
-    },
  },
  methods: {
-    init() {
-      this.loading = true;
-      if (this.type === "asset") {
-        this.$get("asset/asset/" + this.id).then((res) => {
-          if (res.msg === "success") {
-            this.loading = false;
-            this.alertLabelData = res.data;
-            this.alertColor = this.returnColor(res.data.alert);
+    init () {
+      this.loading = true
+      if (this.type === 'asset') {
+        this.$get('asset/asset/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
          }
-        });
+        })
      }
-      if (this.type === "project") {
-        this.$get("monitor/project/" + this.id).then((res) => {
-          if (res.msg === "success") {
-            this.loading = false;
-            this.alertLabelData = res.data;
-            this.alertColor = this.returnColor(res.data.alert);
+      if (this.type === 'project') {
+        this.$get('monitor/project/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
          }
-        });
+        })
      }
-      if (this.type === "module") {
-        this.$get("monitor/module/" + this.id).then((res) => {
-          if (res.msg === "success") {
-            this.loading = false;
-            this.alertLabelData = res.data;
-            this.alertColor = this.returnColor(res.data.alert);
+      if (this.type === 'module') {
+        this.$get('monitor/module/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
          }
-        });
+        })
      }
-      if (this.type === "endpoint") {
-        this.$get("monitor/endpoint/" + this.id).then((res) => {
-          if (res.msg === "success") {
-            this.loading = false;
-            this.alertLabelData = res.data;
-            this.alertColor = this.returnColor(res.data.alert);
+      if (this.type === 'endpoint') {
+        this.$get('monitor/endpoint/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
          }
-        });
+        })
      }
-      if (this.type === "dc") {
-        this.$get("dc/" + this.id).then((res) => {
-          if (res.msg === "success") {
-            this.loading = false;
-            this.alertLabelData = res.data;
-            this.alertColor = this.returnColor(res.data.alert);
+      if (this.type === 'dc') {
+        this.$get('dc/' + this.id).then((res) => {
+          if (res.msg === 'success') {
+            this.loading = false
+            this.alertLabelData = res.data
+            this.alertColor = this.returnColor(res.data.alert)
          } else {
-            this.$message.error(res.msg);
+            this.$message.error(res.msg)
          }
-        });
+        })
      }
-      const weekDays = this.getWeeksTime();
+      const weekDays = this.getWeeksTime()
      if (this.trendTimer) {
-        clearTimeout(this.trendTimer);
-        this.trendTimer = null;
+        clearTimeout(this.trendTimer)
+        this.trendTimer = null
      }
      this.trendTimer = setTimeout(() => {
-        this.trendLoading = true;
+        this.trendLoading = true
        const params = {
-          type: "total",
-          dimension: "priority",
-          step: "d",
-        };
-        params[this.type + "Id"] = this.id;
-        this.$get("/stat/alertMessage/trend", params).then((res) => {
+          type: 'total',
+          dimension: 'priority',
+          step: 'd'
+        }
+        params[this.type + 'Id'] = this.id
+        this.$get('/stat/alertMessage/trend', params).then((res) => {
          if (!res.data) {
-            return;
+            return
          }
          const alertDaysData = res.data.result
            ? res.data.result[0].values
-            : [];
-          const newWeekDays = JSON.parse(JSON.stringify(weekDays));
+            : []
+          const newWeekDays = JSON.parse(JSON.stringify(weekDays))
          alertDaysData.forEach((item) => {
            item.values.forEach((time) => {
-              const findItem = newWeekDays.find((days) => days.time == time[0]);
+              const findItem = newWeekDays.find((days) => days.time == time[0])
              if (findItem) {
-                findItem[item.metric.priority] = time[1];
+                findItem[item.metric.priority] = time[1]
              }
-            });
-          });
+            })
+          })
          setTimeout(() => {
-            this.alertDaysData = newWeekDays;
-            this.trendLoading = false;
-          });
-        });
-      });
+            this.alertDaysData = newWeekDays
+            this.trendLoading = false
+          })
+        })
+      })
    },
-    alertActiveStr() {
-      return this.$t("overall.active");
+    alertActiveStr () {
+      return this.$t('overall.active')
    },
-    alertStateStr(num) {
+    alertStateStr (num) {
      if (num == 1) {
-        return this.$t("asset.inStock");
+        return this.$t('asset.inStock')
      } else {
-        return this.$t("asset.notInStock");
+        return this.$t('asset.notInStock')
      }
    },
-    selectIcon(type) {
+    selectIcon (type) {
      switch (type) {
-        case "asset":
-          return "nz-icon-overview-project";
-        case "dc":
-          return "nz-icon-Datacenter2";
-        case "project":
-          return "nz-icon-project";
-        case "module":
-          return "nz-icon-overview-module";
-        case "endpoint":
-          return "nz-icon-overview-endpoint";
-        case "alertrule":
-          return "nz-icon-Alertrule";
+        case 'asset':
+          return 'nz-icon-overview-project'
+        case 'dc':
+          return 'nz-icon-Datacenter2'
+        case 'project':
+          return 'nz-icon-project'
+        case 'module':
+          return 'nz-icon-overview-module'
+        case 'endpoint':
+          return 'nz-icon-overview-endpoint'
+        case 'alertrule':
+          return 'nz-icon-Alertrule'
      }
-      return "nz-icon-module5";
+      return 'nz-icon-module5'
    },
-    returnColor(obj) {
-      let color = "";
+    returnColor (obj) {
+      let color = ''
      if (!obj) {
-        return "#23bf9a";
+        return '#23bf9a'
      } else {
        this.severityDataWeight.forEach((severity) => {
-          const num = obj.find((alert) => alert.priority === severity.name);
+          const num = obj.find((alert) => alert.priority === severity.name)
          if (num && !color && num.num > 0) {
-            color = severity.color;
+            color = severity.color
          }
-        });
+        })
        if (!color) {
-          color = "#23bf9a";
+          color = '#23bf9a'
+        }
+        return color
      }
-        return color;
    }
  },
-  },
-  mounted() {
+  mounted () {
    if (this.$refs.alertLabels) {
-      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height;
-      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width;
+      this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+      this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
    } else {
-      this.heightList = 0;
-      this.boxWidth = 0;
+      this.heightList = 0
+      this.boxWidth = 0
    }
  },
-  beforeDestroy() {},
-};
+  beforeDestroy () {}
+}
 </script>
 <style>
 </style>
--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -15,7 +15,8 @@ export default {
    // labelLoading:{},
    that: {},
    detailList: Boolean,
-    alertTableDialog: Boolean
+    alertTableDialog: Boolean,
+    isTopoInfo: Boolean
  },
  data () {
    return {
@@ -31,9 +32,10 @@ export default {
        const leftOffSetView = this.detailList ? -80 : 10
        const leftOffSet = this.detailList ? -80 : 10
        const topOffSet = this.detailList ? 60 : 22
+        const topoOffset = this.isTopoInfo ? 155 : 0
        if (position.top + this.heightList > clientHeight) {
          return {
-            left: `${position.left + position.width + leftOffSet}px`,
+            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
            top: `${position.top - this.heightList + topOffSet}px`
          }
        } else if (this.alertTableDialog) {
@@ -47,7 +49,7 @@ export default {
          }
        } else {
          return {
-            left: `${position.left + position.width + leftOffSetView}px`,
+            left: `${position.left + position.width + leftOffSetView - topoOffset}px`,
            top: `${position.top}px`
          }
        }
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -15,6 +15,7 @@
        <template  v-slot:default="slotProps">
          <endpoint-table
            style="height: 100%"
+            :isTopoInfo="true"
            ref="dataTable"
            :orderByFa="orderBy"
            v-my-loading="tools.loading"
--- a/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/snmpCredentialBox.vue
@@ -153,11 +153,11 @@ export default {
        if (valid) {
          if (this.editCredential.type === 3) {
            if (this.editCredential.config.authProtocol && !this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authNoPriv'
+              this.editCredential.config.securityLevel = 'authNoPriv'
            } else if (this.editCredential.config.authProtocol && this.editCredential.config.privProtocol) {
-              this.editCredential.securityLevel = 'authPriv'
+              this.editCredential.config.securityLevel = 'authPriv'
            } else {
-              this.editCredential.securityLevel = 'noAuthNoPriv'
+              this.editCredential.config.securityLevel = 'noAuthNoPriv'
            }
          }
          const param = JSON.parse(JSON.stringify(this.editCredential))
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -139,7 +139,7 @@
             <span class="active-icon gray-bg inline-block"></span>
           </span>
         </span>
-            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'" :isTopoInfo="isTopoInfo">
              <div name="default">
                <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
              </div>
@@ -213,6 +213,10 @@ export default {
      type: Boolean,
      default: true
    },
+    isTopoInfo: {
+      type: Boolean,
+      default: false
+    },
    endpointTab: Boolean,
    loading: Boolean
  },