Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

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

@@ -87,23 +87,63 @@
         @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 ChartEchartLine from '@/views/charts/charts/ChartEchartLine'
+import ChartActiveIpTable from '@/views/charts/charts/ChartActiveIpTable'
 import ChartTimeBar from './charts/ChartTimeBar'
 import ChartCategoryBar from './charts/ChartCategoryBar'
 import ChartIpOpenPortBar from './charts/ChartIpOpenPortBar'
 import ChartTable from './charts/ChartTable'
+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'
 import {
   isEcharts,
   isEchartsLine,
@@ -141,6 +181,11 @@ import _ from 'lodash'
 export default {
   name: 'chart',
   components: {
+    ChartCryptocurrencyEventList,
+    ChartDomainDnsRecord,
+    ChartDomainWhois,
+    ChartAppBasicInfo,
+    ChartActiveIpTable,
     ChartTable,
     IpBasicInfo,
     ChartSingleValue,
@@ -169,7 +214,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">
+                {{$_.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; {{$_.get(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">{{$_.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>
+      </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">{{ $_.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">{{ $_.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">{{ $_.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">{{ $_.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">{{ 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">{{ parseMsDate($_.get(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>

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>