From c5278a00d12b9547eed3176b962be274ce7b7fda Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 19 Jan 2022 20:11:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?CN-273=20feat:=20=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84-=E7=89=B9=E6=AE=8A=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts/panel.scss    | 197 +++++++++++++++++-
 src/views/charts/Chart2.vue                   |  61 +++++-
 .../charts/charts/ChartActiveIpTable.vue      |  13 ++
 src/views/charts/charts/ChartAppBasicInfo.vue | 103 +++++++++
 .../charts/ChartCryptocurrencyEventList.vue   |  56 +++++
 .../charts/charts/ChartDomainDnsRecord.vue    |  52 +++++
 src/views/charts/charts/ChartDomainWhois.vue  |  54 +++++
 7 files changed, 527 insertions(+), 9 deletions(-)
 create mode 100644 src/views/charts/charts/ChartActiveIpTable.vue
 create mode 100644 src/views/charts/charts/ChartAppBasicInfo.vue
 create mode 100644 src/views/charts/charts/ChartCryptocurrencyEventList.vue
 create mode 100644 src/views/charts/charts/ChartDomainDnsRecord.vue
 create mode 100644 src/views/charts/charts/ChartDomainWhois.vue

diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 928bf107..23ee3507 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -499,7 +499,7 @@
               height: calc(100% - 40px);
             }
           }
-          &>.cn-chart__table, {
+          &>.cn-chart__table,{
             .cn-chart__header {
               border-bottom: 1px solid $--content-right-background-color;
               .header__operations {
@@ -750,6 +750,201 @@
               margin-left: 10px;
             }
           }
+          &>.cn-chart__app-basic {
+            display: flex;
+            flex-direction: column;
+            .cn-chart__body {
+              flex: auto;
+              display: flex;
+              .el-descriptions {
+                padding-top: 30px;
+              }
+              &>.el-descriptions {
+                flex: 0 0 350px;
+                padding: 30px 36px;
+              }
+              .chart-location {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                padding: 0 20px 20px 0;
+              }
+              .el-descriptions__content {
+                color: #3976CB;
+              }
+            }
+            .cn-chart__body-single {
+              display: flex;
+              .cn-chart__body-single-table {
+                display: flex;
+                width: 250px;
+                align-items: center;
+              }
+              .single-value-icon__box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex: 0 0 40%;
+              }
+              .single-value__icon {
+                 display: flex;
+                 justify-content: center;
+                 width: 72px;
+                 height: 72px;
+                 background-color: $--chart-single-value-icon-background-color;
+                 border-radius: 50%;
+
+                 i {
+                   display: flex;
+                   align-items: center;
+                   font-size: 28px;
+                   color: $--color-primary;
+                 }
+               }
+              .single-value-color-g.single-value__icon {
+                background-color: limegreen;
+                i {
+                  color: green;
+                }
+              }
+              .single-value-color-y.single-value__icon {
+                background-color: yellow;
+                i {
+                  color: darkorange;
+                }
+              }
+              .single-value__content {
+                display: flex;
+                flex-direction: column;
+                max-width: 60%;
+                padding-right: 10px;
+
+                .content__data {
+                  padding-bottom: 7%;
+                  font-size: 24px;
+                  color: #333333;
+                  font-weight: bold;
+                }
+                .content__title {
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  font-size: 16px;
+                  color: #666666;
+                }
+                &.single-value__content--with-chart {
+                  .content__title {
+                    border-bottom: 1px solid $--content-right-background-color;
+                  }
+                }
+                .single-value__unit {
+                  font-weight: normal;
+                  padding-left: 10px;
+                  color: #666;
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+          &>.cn-chart__dns-record {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            .cn-chart__body {
+              flex: auto;
+              display: flex;
+              height: 100%;
+              width: 100%;
+              .el-descriptions {
+                padding-top: 30px;
+              }
+              &>.el-descriptions {
+                flex: 0 0 350px;
+                padding: 30px 36px;
+              }
+              .chart-location {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                padding: 0 20px 20px 0;
+              }
+              .el-descriptions__content {
+                color: #3976CB;
+              }
+            }
+          }
+          .cn-chart__table.eventList {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            .cn-chart__body {
+              flex: auto;
+              display: flex;
+              height: 100%;
+              width: 100%;
+              .el-descriptions {
+                padding-top: 30px;
+              }
+              &>.el-descriptions {
+                flex: 0 0 350px;
+                padding: 30px 36px;
+              }
+              .chart-location {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                padding: 0 20px 20px 0;
+              }
+              .el-descriptions__content {
+                color: #3976CB;
+              }
+              .crypto-eventList__record {
+                display: flex;
+                height: 100%;
+                width: 100%;
+
+                .record__table {
+                  display: table;
+                  height: 100%;
+                  width: 100%;
+
+                  .record__table-row {
+                    display: table-row;
+                    font-size: 14px;
+                    color: #333333;
+                  }
+                  .record__table-row.record__table-row--header {
+                    padding: 13px 30px 0;
+                    height: 40px;
+                    color: #6B717B;
+                  }
+                  .record__table-cell {
+                    display: table-cell;
+                    vertical-align: middle;
+                    padding-left: 10px;
+                    padding-top: 15px;
+                    padding-bottom: 0;
+
+                    .record_second{
+                      color:#7e8088;
+                      font-size:12px;
+                    }
+
+                    .circle-red {
+                      color: #EC7F66;
+                      font-size: 28px;
+                    }
+
+                  }
+                  .record__table-cell:first-of-type {
+                    padding-left:30px;
+                  }
+                }
+              }
+            }
+          }
         }
         .chart__legend {
           width: calc(100% - 40px);
diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 0d209b7a..e96b3f80 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -60,20 +60,56 @@
         @showLoading="showLoading"
       ></chart-table>
 
+      <chart-active-ip-table
+          v-else-if="isActiveIpTable"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :query-params="queryParams"
+      ></chart-active-ip-table>
+
+      <chart-app-basic-info
+        v-else-if="isAppBasicInfo"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
+      ></chart-app-basic-info>
+
+      <chart-domain-whois
+        v-else-if="isDomainWhois"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
+      ></chart-domain-whois>
+
+      <chart-domain-dns-record
+          v-else-if="isDomainDnsRecord"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :query-params="queryParams"
+      ></chart-domain-dns-record>
+
+      <chart-cryptocurrency-event-list
+          v-else-if="isCryptocurrencyEventList"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :query-params="queryParams"
+      ></chart-cryptocurrency-event-list>
+
     </template>
   </div>
 </template>
 
 <script>
 import Loading from '@/components/common/Loading'
-import ChartNoData from './charts/ChartNoData'
-import ChartTabs from './charts/ChartTabs'
-import ChartMap from './charts/ChartMap'
-import ChartSingleValue from './charts/ChartSingleValue'
-import ChartBlock from './charts/ChartBlock'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import ChartTabs from '@/views/charts/charts/ChartTabs'
+import ChartMap from '@/views/charts/charts/ChartMap'
+import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
+import ChartBlock from '@/views/charts/charts/ChartBlock'
 import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
-import ChartEchartLine from './charts/ChartEchartLine'
-import ChartTable from "./charts/ChartTable";
+import ChartEchartLine from '@/views/charts/charts/ChartEchartLine'
+import ChartTable from "@/views/charts/charts/ChartTable";
+import ChartActiveIpTable from "@/views/charts/charts/ChartActiveIpTable";
 import {
   isEcharts,
   isEchartsLine,
@@ -106,10 +142,19 @@ import {
   isBlock
 } from './charts/tools'
 import _ from 'lodash'
+import ChartAppBasicInfo from "@/views/charts/charts/ChartAppBasicInfo";
+import ChartDomainWhois from "@/views/charts/charts/ChartDomainWhois";
+import ChartDomainDnsRecord from "@/views/charts/charts/ChartDomainDnsRecord";
+import ChartCryptocurrencyEventList from "@/views/charts/charts/ChartCryptocurrencyEventList";
 
 export default {
   name: 'chart',
   components: {
+    ChartCryptocurrencyEventList,
+    ChartDomainDnsRecord,
+    ChartDomainWhois,
+    ChartAppBasicInfo,
+    ChartActiveIpTable,
     ChartTable,
     IpBasicInfo,
     ChartSingleValue,
@@ -135,7 +180,7 @@ export default {
   },
   computed: {
     isNoData () {
-      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs
+      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList
     },
     chartOption () {
       if (this.customChartOption) {
diff --git a/src/views/charts/charts/ChartActiveIpTable.vue b/src/views/charts/charts/ChartActiveIpTable.vue
new file mode 100644
index 00000000..1d6a6697
--- /dev/null
+++ b/src/views/charts/charts/ChartActiveIpTable.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>1</div>
+</template>
+
+<script>
+export default {
+  name: "ChartActiveIpTable"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/charts/charts/ChartAppBasicInfo.vue b/src/views/charts/charts/ChartAppBasicInfo.vue
new file mode 100644
index 00000000..dd2f73fe
--- /dev/null
+++ b/src/views/charts/charts/ChartAppBasicInfo.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="cn-chart__app-basic" :style="computePosition">
+    <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>
+        <div class="cn-chart__body-single">
+          <div class="cn-chart__body-single-table">
+            <div class="single-value-icon__box">
+              <div class="single-value__icon"><i class="cn-icon cn-icon-category"></i></div>
+            </div>
+            <div class="single-value__content">
+              <div>
+                <span>{{$t('entities.category')}}</span>
+              </div>
+              <div>
+                <span>{{chartData ? detailData.category : '-'}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="cn-chart__body-single-table">
+            <div class="single-value-icon__box">
+              <div class="single-value__icon single-value-color-g"><i class="cn-icon cn-icon-sub-category"></i></div>
+            </div>
+            <div class="single-value__content">
+              <div>
+                <span>{{$t('entities.subcategory')}}</span>
+              </div>
+              <div>
+                <span>{{chartData ? detailData.subcategory : '-'}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="cn-chart__body-single-table">
+            <div class="single-value-icon__box">
+              <div class="single-value__icon single-value-color-y"><i class="cn-icon cn-icon-credit"></i></div>
+            </div>
+            <div class="single-value__content">
+              <div>
+                <span>{{$t('entities.reputationLevel')}}</span>
+              </div>
+              <div>
+                <span>{{chartData ? detailData.risk : '-'}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChartSingleValue from "@/views/charts/charts/ChartSingleValue";
+import {isIpBasicInfo} from "@/views/charts/charts/tools";
+export default {
+  name: "ChartAppBasicInfo",
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    queryParams: Object
+  },
+  components: {
+    ChartSingleValue
+  },
+  data () {
+    return {
+
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+      }
+    }
+  },
+  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
+      }
+    }
+  },
+  mounted() {
+  },
+  setup (props) {
+    isIpBasicInfo: isIpBasicInfo(props.chartInfo.type)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/charts/charts/ChartCryptocurrencyEventList.vue b/src/views/charts/charts/ChartCryptocurrencyEventList.vue
new file mode 100644
index 00000000..bf50b6e5
--- /dev/null
+++ b/src/views/charts/charts/ChartCryptocurrencyEventList.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="cn-chart__table eventList" :style="computePosition">
+    <div class="cn-chart__body">
+      <div class="crypto-eventList__record">
+        <div class="record__table">
+          <div style="height: 100%; overflow: hidden auto;">
+            <div class="record__table-row" v-for="(data, index) in chartDate" :key="index">
+              <div class="record__table-cell">
+                <div class="circle1" style=""></div>
+              </div>
+              <div class="record__table-cell">
+                {{data ? data.message : '-'}}：{{ data ? data.serverIP : '-'}}<br/>
+                <span class="record_second" > {{data ? data.time : '-'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ data ? data.clientIP : '-'}}&nbsp;&nbsp;&nbsp; </span>
+                <div class="record_second arrow arrow-hor right"> </div>
+                <span class="record_second">&nbsp;&nbsp;&nbsp; {{data ? data.serverIP : '-'}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartCryptocurrencyEventList",
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    queryParams: Object
+  },
+  data () {
+    return {
+      chartDate: [
+        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        {message: 'Traffic ', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        {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>
diff --git a/src/views/charts/charts/ChartDomainDnsRecord.vue b/src/views/charts/charts/ChartDomainDnsRecord.vue
new file mode 100644
index 00000000..5556a7dc
--- /dev/null
+++ b/src/views/charts/charts/ChartDomainDnsRecord.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="cn-chart__dns-record" :style="computePosition">
+    <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>
+            <div class="dns-record__table-row" v-for="(data, index) in chartDate" :key="index">
+              <div class="dns-record__table-cell">{{data ? data.type : '-'}}</div>
+              <div class="dns-record__table-cell">{{data ? data.value : '-'}}</div>
+              <div class="dns-record__table-cell">{{data ? data.country : '-'}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartDomainDnsRecord",
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    queryParams: Object
+  },
+  data () {
+    return {
+      chartDate: [
+        {type: '1', value: '2', country: 'z'},
+        {type: '1', value: '2', country: 'm'},
+        {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>
diff --git a/src/views/charts/charts/ChartDomainWhois.vue b/src/views/charts/charts/ChartDomainWhois.vue
new file mode 100644
index 00000000..c52afe50
--- /dev/null
+++ b/src/views/charts/charts/ChartDomainWhois.vue
@@ -0,0 +1,54 @@
+<template>
+
+  <div class="cn-chart__whois" :style="computePosition">
+    <div class="cn-chart__body">
+      <div class="domain-detail-list">
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">{{$t('entities.sponsor')}}</div>
+          <div class="domain-detail-list__content">{{ chartData && chartData.registrar ? chartData.registrar : '-'}}</div>
+        </div>
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">{{$t('entities.org')}}</div>
+          <div class="domain-detail-list__content">{{chartData && chartData.org ? chartData.org : '-'}}</div>
+        </div>
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">Email</div>
+          <div class="domain-detail-list__content">{{chartData && chartData.postcode ? chartData.postcode : '-'}}</div>
+        </div>
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">{{$t('overall.country')}}</div>
+          <div class="domain-detail-list__content">{{chartData && chartData.country ? chartData.country : '-'}}</div>
+        </div>
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
+          <div class="domain-detail-list__content">{{chartData ? parseMsDate(chartData.createTime) : '-'}}</div>
+        </div>
+        <div class="domain-detail-list__row">
+          <div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
+          <div class="domain-detail-list__content">{{chartData ? parseMsDate(chartData.expirationTime) : '-'}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChartDomainWhois",
+  props: {
+    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>

From a6c5ee057d2880dd81ae9c70931f29227eea606c Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 20 Jan 2022 11:47:53 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=89=B9=E6=AE=8A?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=95=B0=E6=8D=AE=E4=B8=BA=E7=A9=BA=E6=98=AF?=
 =?UTF-8?q?=E7=9A=84=E5=88=A4=E6=96=AD=E6=9D=A1=E4=BB=B6=EF=BC=8C=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E5=8D=95=E5=80=BC=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/PanelChart.vue               |  1 -
 .../charts/ChartCryptocurrencyEventList.vue   |  6 +-
 .../charts/charts/ChartDomainDnsRecord.vue    |  6 +-
 src/views/charts/charts/ChartDomainWhois.vue  | 12 ++--
 src/views/charts/charts/ChartSingleValue.vue  | 55 ++++++++++++++++++-
 5 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index 172a71ac..11155bd3 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -184,7 +184,6 @@ export default {
         const requestUrl = url || (chartParams && chartParams.url)
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-            console.log(testData)
             if (this.chartInfo.type === 23 && testData) {
               response = testData.data
             } else if (this.chartInfo.type === 24 && testData) {
diff --git a/src/views/charts/charts/ChartCryptocurrencyEventList.vue b/src/views/charts/charts/ChartCryptocurrencyEventList.vue
index bf50b6e5..e976b01a 100644
--- a/src/views/charts/charts/ChartCryptocurrencyEventList.vue
+++ b/src/views/charts/charts/ChartCryptocurrencyEventList.vue
@@ -9,10 +9,10 @@
                 <div class="circle1" style=""></div>
               </div>
               <div class="record__table-cell">
-                {{data ? data.message : '-'}}：{{ data ? data.serverIP : '-'}}<br/>
-                <span class="record_second" > {{data ? data.time : '-'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ data ? data.clientIP : '-'}}&nbsp;&nbsp;&nbsp; </span>
+                {{$_.get(data, "message") || '-'}}：{{$_.get(data, "serverIP") || '-'}}<br/>
+                <span class="record_second" > {{$_.get(data, "time") || '-'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $_.get(data, "clientIP") || '-'}}&nbsp;&nbsp;&nbsp; </span>
                 <div class="record_second arrow arrow-hor right"> </div>
-                <span class="record_second">&nbsp;&nbsp;&nbsp; {{data ? data.serverIP : '-'}}</span>
+                <span class="record_second">&nbsp;&nbsp;&nbsp; {{$_.get(data, "serverIP") || '-'}}</span>
               </div>
             </div>
           </div>
diff --git a/src/views/charts/charts/ChartDomainDnsRecord.vue b/src/views/charts/charts/ChartDomainDnsRecord.vue
index 5556a7dc..400623e7 100644
--- a/src/views/charts/charts/ChartDomainDnsRecord.vue
+++ b/src/views/charts/charts/ChartDomainDnsRecord.vue
@@ -10,9 +10,9 @@
               <div class="dns-record__table-cell" style="width: 100%;">Country</div>
             </div>
             <div class="dns-record__table-row" v-for="(data, index) in chartDate" :key="index">
-              <div class="dns-record__table-cell">{{data ? data.type : '-'}}</div>
-              <div class="dns-record__table-cell">{{data ? data.value : '-'}}</div>
-              <div class="dns-record__table-cell">{{data ? data.country : '-'}}</div>
+              <div class="dns-record__table-cell">{{$_.get(data, "type") || '-'}}</div>
+              <div class="dns-record__table-cell">{{$_.get(data, "value") || '-'}}</div>
+              <div class="dns-record__table-cell">{{$_.get(data, "country") || '-'}}</div>
             </div>
           </div>
         </div>
diff --git a/src/views/charts/charts/ChartDomainWhois.vue b/src/views/charts/charts/ChartDomainWhois.vue
index c52afe50..981b5dc6 100644
--- a/src/views/charts/charts/ChartDomainWhois.vue
+++ b/src/views/charts/charts/ChartDomainWhois.vue
@@ -5,27 +5,27 @@
       <div class="domain-detail-list">
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">{{$t('entities.sponsor')}}</div>
-          <div class="domain-detail-list__content">{{ chartData && chartData.registrar ? chartData.registrar : '-'}}</div>
+          <div class="domain-detail-list__content">{{ $_.get(chartData, "registrar") || '-'}}</div>
         </div>
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">{{$t('entities.org')}}</div>
-          <div class="domain-detail-list__content">{{chartData && chartData.org ? chartData.org : '-'}}</div>
+          <div class="domain-detail-list__content">{{ $_.get(chartData, "org") || '-'}}</div>
         </div>
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">Email</div>
-          <div class="domain-detail-list__content">{{chartData && chartData.postcode ? chartData.postcode : '-'}}</div>
+          <div class="domain-detail-list__content">{{ $_.get(chartData, "email") || '-'}}</div>
         </div>
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">{{$t('overall.country')}}</div>
-          <div class="domain-detail-list__content">{{chartData && chartData.country ? chartData.country : '-'}}</div>
+          <div class="domain-detail-list__content">{{ $_.get(chartData, "country") || '-'}}</div>
         </div>
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
-          <div class="domain-detail-list__content">{{chartData ? parseMsDate(chartData.createTime) : '-'}}</div>
+          <div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "createTime")) || '-'}}</div>
         </div>
         <div class="domain-detail-list__row">
           <div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
-          <div class="domain-detail-list__content">{{chartData ? parseMsDate(chartData.expirationTime) : '-'}}</div>
+          <div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "expirationTime")) || '-'}}</div>
         </div>
       </div>
     </div>
diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue
index 46a2a086..3c1dfabf 100644
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -61,7 +61,13 @@
 
 <script>
 import unitConvert from '@/utils/unit-convert'
-import {unitTypes} from "@/utils/constants";
+import {
+  unitTypes
+} from "@/utils/constants"
+import { get } from '@/utils/http'
+import {replaceUrlPlaceholder} from "@/utils/tools";
+import * as echarts from "echarts";
+import {getOption, getChartColor} from "@/components/charts/chart-options";
 export default {
   name: "chartSingleValue",
   props: {
@@ -73,7 +79,9 @@ export default {
     return {
       icon: '',
       color: '',
-      type: 0
+      type: 0,
+      chartOption: null,
+      chartEchartsDate: []
     }
   },
   watch: {
@@ -133,8 +141,51 @@ export default {
     }
   },
   methods: {
+    chartSingleValueTotal() {
+      const chartParams = this.$_.get(this.chartInfo, 'params') || {}
+      if (this.type === 52) {
+        const dom = document.getElementById(`chart${this.chartInfo.id}`)
+        const myChart = echarts.init(dom)
+        this.chartOption = this.$_.cloneDeep(getOption(this.type))
+        get(replaceUrlPlaceholder(chartParams.urlChart)).then(response => {
+          const seriesTemplate = this.chartOption.series[0]
+          const result = [{
+            "legend": "app",
+            "aggregation": {
+              "max": 1,
+              "last": 1,
+              "first": 1,
+              "avg": 1
+            },
+            "values": [
+              [1435781430781, "0"],
+              [1435781431782, "1"],
+              [1435781431783, "2"],
+              [1435781431784, "3"],
+              [1435781431785, "4"],
+              [1435781431786, "5"],
+              [1435781431787, "6"],
+              [1435781431788, "7"]
+            ]
+          }]
+          // const result = response.data.result
+          this.chartOption.series = result.map((r, i) => {
+            return {
+              ...seriesTemplate,
+              name: r.legend,
+              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
+              lineStyle: {
+                color: getChartColor[i]
+              }
+            }
+          })
+          myChart.setOption(this.chartOption)
+        })
+      }
+    }
   },
   mounted() {
+    this.chartSingleValueTotal()
   }
 }
 </script>