fix: 去除特殊列表动态绑定样式，修复Single-value页面图表展示错误问题

2022-01-20 15:50:09 +08:00
parent a6c5ee057d
commit 3d47a5af05
8 changed files with 84 additions and 99 deletions
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -817,7 +817,11 @@
                display: flex;
                flex-direction: column;
                max-width: 60%;
-                padding-right: 10px;
+                padding-left: 10px;
+
+                div:nth-of-type(1) {
+                  margin-bottom: 10px;
+                }

                .content__data {
                  padding-bottom: 7%;
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -1,4 +1,5 @@
 import { hasButton } from '@/permission'
+import {getMillisecond} from "@/utils/date-util";
 export default {
  data () {
    return {
@@ -51,8 +52,8 @@ export default {
    utcTimeToLocalhost (str) { // 系统设置的时区 到 utc 0
      return str
    },
-    parseMsDate (ms, format = 'YYYY-MM-DD HH:mm:ss') {
-      return this.dayJs.tz(parseFloat(ms)).format(format)
+    parseMsDate (time, format = 'YYYY-MM-DD HH:mm:ss') {
+      return this.dayJs.tz(getMillisecond(time)).format(format)
    }
  }
 }
--- a/src/views/charts/charts/ChartAppBasicInfo.vue
+++ b/src/views/charts/charts/ChartAppBasicInfo.vue
@@ -3,10 +3,10 @@
    <div class="cn-chart__body">
      <div style="display: flex; justify-content: space-between; width: 100%;">
        <el-descriptions :column="1" style="padding: 20px 30px;">
-          <el-descriptions-item :label="$t('overall.appName') + ':'">{{chartData ? chartData.name : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{chartData && chartData.allName ? chartData.allName : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.technology') + ':'">{{chartData && chartData.tech ? chartData.tech : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark') + ':'">{{chartData && chartData.description ? chartData.description : '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appName') + ':'">{{$_.get(chartData, "name") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "allName") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "tech") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "description") || '-'}}</el-descriptions-item>
        </el-descriptions>
        <div class="cn-chart__body-single">
          <div class="cn-chart__body-single-table">
@@ -18,7 +18,7 @@
                <span>{{$t('entities.category')}}</span>
              </div>
              <div>
-                <span>{{chartData ? detailData.category : '-'}}</span>
+                <span>{{$_.get(chartData, "category") || '-'}}</span>
              </div>
            </div>
          </div>
@@ -31,7 +31,7 @@
                <span>{{$t('entities.subcategory')}}</span>
              </div>
              <div>
-                <span>{{chartData ? detailData.subcategory : '-'}}</span>
+                <span>{{$_.get(chartData, "subcategory") || '-'}}</span>
              </div>
            </div>
          </div>
@@ -44,7 +44,7 @@
                <span>{{$t('entities.reputationLevel')}}</span>
              </div>
              <div>
-                <span>{{chartData ? detailData.risk : '-'}}</span>
+                <span>{{$_.get(chartData, "risk") || '-'}}</span>
              </div>
            </div>
          </div>
--- a/src/views/charts/charts/ChartCryptocurrencyEventList.vue
+++ b/src/views/charts/charts/ChartCryptocurrencyEventList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cn-chart__table eventList" :style="computePosition">
+  <div class="cn-chart__table eventList">
    <div class="cn-chart__body">
      <div class="crypto-eventList__record">
        <div class="record__table">
@@ -41,16 +41,6 @@ export default {
        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'}
      ]
    }
-  },
-  computed: {
-    computePosition() {
-      const gridColumn = `${this.chartInfo.x} / ${this.chartInfo.x + this.chartInfo.w}`
-      const gridRow = `${this.chartInfo.y} / ${this.chartInfo.y + this.chartInfo.h}`
-      return {
-        gridColumn,
-        gridRow
-      }
-    }
  }
 }
 </script>
--- a/src/views/charts/charts/ChartDomainDnsRecord.vue
+++ b/src/views/charts/charts/ChartDomainDnsRecord.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="cn-chart__dns-record" :style="computePosition">
+  <div class="cn-chart__dns-record">
    <div class="cn-chart__body">
      <div class="entity-detail__dns-record">
        <div class="dns-record__table">
          <div style="height: 100%; overflow: hidden auto;">
            <div class="dns-record__table-row dns-record__table-row--header">
-              <div class="dns-record__table-cell" style="min-width: 200px;">Type</div>
-              <div class="dns-record__table-cell" style="width: 100%;">Value</div>
-              <div class="dns-record__table-cell" style="width: 100%;">Country</div>
+              <div class="dns-record__table-cell" style="min-width: 200px;">{{ $t('overall.type') }}</div>
+              <div class="dns-record__table-cell" style="min-width: 200px;">{{ $t('overall.value') }}</div>
+              <div class="dns-record__table-cell" style="width: 100%;">{{ $t('overall.country') }}</div>
            </div>
            <div class="dns-record__table-row" v-for="(data, index) in chartDate" :key="index">
              <div class="dns-record__table-cell">{{$_.get(data, "type") || '-'}}</div>
@@ -37,16 +37,6 @@ export default {
        {type: '1', value: '2', country: 'h'}
      ]
    }
-  },
-  computed: {
-    computePosition() {
-      const gridColumn = `${this.chartInfo.x} / ${this.chartInfo.x + this.chartInfo.w}`
-      const gridRow = `${this.chartInfo.y} / ${this.chartInfo.y + this.chartInfo.h}`
-      return {
-        gridColumn,
-        gridRow
-      }
-    }
  }
 }
 </script>
--- a/src/views/charts/charts/ChartDomainWhois.vue
+++ b/src/views/charts/charts/ChartDomainWhois.vue
@@ -1,6 +1,6 @@
 <template>

-  <div class="cn-chart__whois" :style="computePosition">
+  <div class="cn-chart__whois">
    <div class="cn-chart__body">
      <div class="domain-detail-list">
        <div class="domain-detail-list__row">
@@ -39,16 +39,6 @@ export default {
    chartInfo: Object,
    chartData: [Array, Object],
    queryParams: Object
-  },
-  computed: {
-    computePosition() {
-      const gridColumn = `${this.chartInfo.x} / ${this.chartInfo.x + this.chartInfo.w}`
-      const gridRow = `${this.chartInfo.y} / ${this.chartInfo.y + this.chartInfo.h}`
-      return {
-        gridColumn,
-        gridRow
-      }
-    }
  }
 }
 </script>
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -81,7 +81,7 @@ export default {
      color: '',
      type: 0,
      chartOption: null,
-      chartEchartsDate: []
+      timer: null
    }
  },
  watch: {
@@ -158,14 +158,21 @@ export default {
              "avg": 1
            },
            "values": [
-              [1435781430781, "0"],
-              [1435781431782, "1"],
-              [1435781431783, "2"],
-              [1435781431784, "3"],
-              [1435781431785, "4"],
-              [1435781431786, "5"],
-              [1435781431787, "6"],
-              [1435781431788, "7"]
+              ["1642655880", "18"],
+              ["1642655940", "23"],
+              ["1642656000", "17"],
+              ["1642656060", "17"],
+              ["1642656120", "19"],
+              ["1642656180", "13"],
+              ["1642656240", "22"],
+              ["1642656300", "19"],
+              ["1642656360", "14"],
+              ["1642656420", "16"],
+              ["1642656480", "18"],
+              ["1642656540", "20"],
+              ["1642656600", "16"],
+              ["1642656660", "19"],
+              ["1642656720", "19"]
            ]
          }]
          // const result = response.data.result
@@ -173,7 +180,7 @@ export default {
            return {
              ...seriesTemplate,
              name: r.legend,
-              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
+              data: r.values.map(v => [Number(v[0]), Number(v[1]), chartParams.unitType]),
              lineStyle: {
                color: getChartColor[i]
              }
@@ -185,7 +192,10 @@ export default {
    }
  },
  mounted() {
-    this.chartSingleValueTotal()
+    this.$nextTick(() => this.timer = setTimeout(() => {this.chartSingleValueTotal()}))
+  },
+  deactivated() {
+    clearTimeout(this.timer)
  }
 }
 </script>