CN-273 feat: 图表重构-特殊列表

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);

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) {

src/views/charts/charts/ChartActiveIpTable.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>1</div>
+</template>
+
+<script>
+export default {
+  name: "ChartActiveIpTable"
+}
+</script>
+
+<style scoped>
+
+</style>

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>

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>

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>

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>