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

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>