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

src/assets/css/components/views/charts/panel.scss

@@ -285,7 +285,7 @@
                   font-size: 20px;
                 }
               }
-          }
+            }
             &.cn-chart__single-value--icon-right {
               display: flex;
               flex-direction: row-reverse;
@@ -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%;

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') {
+    parseMsDate (time, format = 'YYYY-MM-DD HH:mm:ss') {
-      return this.dayJs.tz(parseFloat(ms)).format(format)
+      return this.dayJs.tz(getMillisecond(time)).format(format)
     }
   }
 }

src/views/charts/Chart2.vue

@@ -5,68 +5,68 @@
     <template v-else>
 
       <chart-tabs
-          v-if="isTabs"
+        v-if="isTabs"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :query-params="queryParams"
+        :query-params="queryParams"
-          :entity="entity"
+        :entity="entity"
       ></chart-tabs>
 
       <chart-map
-          v-else-if="isMap && !isIpBasicInfo"
+        v-else-if="isMap && !isIpBasicInfo"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :chart-data="chartData"
+        :chart-data="chartData"
-          :query-params="queryParams"
+        :query-params="queryParams"
-          :entity="entity"
+        :entity="entity"
-          @showLoading="showLoading"
+        @showLoading="showLoading"
       ></chart-map>
 
       <chart-single-value
-          v-else-if="isSingleValue"
+        v-else-if="isSingleValue"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :chart-data="chartData"
+        :chart-data="chartData"
-          :query-params="queryParams"
+        :query-params="queryParams"
-          @showLoading="showLoading"
+        @showLoading="showLoading"
       ></chart-single-value>
 
       <chart-block
-          v-else-if="isBlock"
+        v-else-if="isBlock"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :chart-data="chartData"
+        :chart-data="chartData"
-          :entity="entity"
+        :entity="entity"
       ></chart-block>
 
       <ip-basic-info
-          v-else-if="isIpBasicInfo"
+        v-else-if="isIpBasicInfo"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :chart-data="chartData"
+        :chart-data="chartData"
-          :entity="entity"
+        :entity="entity"
       ></ip-basic-info>
 
       <chart-echart-line
-          v-else-if="isEchartsLine"
+        v-else-if="isEchartsLine"
-          :chart-info="chartInfo"
+        :chart-info="chartInfo"
-          :chart-data="chartData"
+        :chart-data="chartData"
-          :result-type="resultType"
+        :result-type="resultType"
-          :query-params="queryParams"
+        :query-params="queryParams"
-          @showLoading="showLoading"
+        @showLoading="showLoading"
       ></chart-echart-line>
 
       <chart-time-bar
-              v-else-if="isEchartsTimeBar"
+        v-else-if="isEchartsTimeBar"
-              :chart-info="chartInfo"
+        :chart-info="chartInfo"
-              :chart-data="chartData"
+        :chart-data="chartData"
-              :result-type="resultType"
+        :result-type="resultType"
-              :query-params="queryParams"
+        :query-params="queryParams"
-              @showLoading="showLoading"
+        @showLoading="showLoading"
       ></chart-time-bar>
 
       <chart-category-bar
-              v-else-if="isEchartsCategoryBar"
+        v-else-if="isEchartsCategoryBar"
-              :chart-info="chartInfo"
+        :chart-info="chartInfo"
-              :chart-data="chartData"
+        :chart-data="chartData"
-              :result-type="resultType"
+        :result-type="resultType"
-              :query-params="queryParams"
+        :query-params="queryParams"
-              @showLoading="showLoading"
+        @showLoading="showLoading"
       ></chart-category-bar>
 
       <chart-table

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.appName') + ':'">{{$_.get(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.appFullName') + ':'">{{$_.get(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.technology') + ':'">{{$_.get(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.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>

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>

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="min-width: 200px;">{{ $t('overall.type') }}</div>
-              <div class="dns-record__table-cell" style="width: 100%;">Value</div>
+              <div class="dns-record__table-cell" style="min-width: 200px;">{{ $t('overall.value') }}</div>
-              <div class="dns-record__table-cell" style="width: 100%;">Country</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>

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>

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"],
+              ["1642655880", "18"],
-              [1435781431782, "1"],
+              ["1642655940", "23"],
-              [1435781431783, "2"],
+              ["1642656000", "17"],
-              [1435781431784, "3"],
+              ["1642656060", "17"],
-              [1435781431785, "4"],
+              ["1642656120", "19"],
-              [1435781431786, "5"],
+              ["1642656180", "13"],
-              [1435781431787, "6"],
+              ["1642656240", "22"],
-              [1435781431788, "7"]
+              ["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>