514 lines
16 KiB
Vue
514 lines
16 KiB
Vue
<template>
|
||
<div class="cn-chart">
|
||
<loading :loading="loading && !isTabs && !isBlock && !isGroup"></loading>
|
||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||
<template v-else>
|
||
<chart-tabs
|
||
ref="chart"
|
||
v-if="isTabs"
|
||
:chart-info="chartInfo"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
:entity="entity"
|
||
></chart-tabs>
|
||
|
||
<chart-map
|
||
v-else-if="isMap && !isIpBasicInfo"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
:entity="entity"
|
||
@getChartData="getChartData"
|
||
@showLoading="showLoading"
|
||
@finishOneMap="finishOneMap"
|
||
></chart-map>
|
||
|
||
<chart-single-value
|
||
v-else-if="isSingleValue"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-single-value>
|
||
|
||
<chart-block
|
||
ref="chart"
|
||
v-else-if="isBlock"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:entity="entity"
|
||
></chart-block>
|
||
|
||
<chart-group
|
||
ref="chart"
|
||
v-else-if="isGroup"
|
||
:query-params="queryParams"
|
||
:time-filter="timeFilter"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:entity="entity"
|
||
></chart-group>
|
||
|
||
<ip-basic-info
|
||
v-else-if="isIpBasicInfo"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:entity="entity"
|
||
></ip-basic-info>
|
||
|
||
<chart-time-bar
|
||
v-else-if="isEchartsTimeBar"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:result-type="resultType"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-time-bar>
|
||
|
||
<chart-category-bar
|
||
v-else-if="isEchartsCategoryBar"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:result-type="resultType"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-category-bar>
|
||
|
||
<chart-ip-open-port-bar
|
||
v-else-if="isIpOpenPortBar"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:result-type="resultType"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-ip-open-port-bar>
|
||
|
||
<chart-table
|
||
v-else-if="isTable && isBasicTable"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:table="table"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-table>
|
||
|
||
<chart-active-ip-table
|
||
v-else-if="isActiveIpTable"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:table="table"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-active-ip-table>
|
||
|
||
<chart-app-basic-info
|
||
v-else-if="isAppBasicInfo"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-app-basic-info>
|
||
|
||
<chart-domain-whois
|
||
v-else-if="isDomainWhois"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-domain-whois>
|
||
|
||
<chart-domain-dns-record
|
||
v-else-if="isDomainDnsRecord"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-domain-dns-record>
|
||
|
||
<chart-cryptocurrency-event-list
|
||
v-else-if="isCryptocurrencyEventList"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-cryptocurrency-event-list>
|
||
|
||
<chart-relation-ship
|
||
v-else-if="isRelationShip"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-relation-ship>
|
||
|
||
<chart-san-key
|
||
v-else-if="isSankey"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
:entity="entity"
|
||
></chart-san-key>
|
||
|
||
<chart-echart
|
||
v-else-if="isEchartsLine || isEchartsPie"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:result-type="resultType"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-echart>
|
||
|
||
<chart-echart-with-statistics
|
||
v-else-if="isEchartsWithStatistics"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:result-type="resultType"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
></chart-echart-with-statistics>
|
||
|
||
<chart-echart-with-table
|
||
v-else-if="isEchartsWithTable"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:query-params="queryParams"
|
||
:time-filter="timeFilter"
|
||
:result-type="resultType"
|
||
:order-pie-table="orderPieTable"
|
||
@showLoading="showLoading"
|
||
></chart-echart-with-table>
|
||
|
||
<chart-echart-ip-hosted-domain
|
||
v-else-if="isIpHostedDomain"
|
||
:chart-data="chartData"
|
||
:chart-info="chartInfo"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
:entity="entity"
|
||
></chart-echart-ip-hosted-domain>
|
||
|
||
<chart-echart-app-relate-domain
|
||
v-else-if="isAppRelatedDomain"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
@showLoading="showLoading"
|
||
:entity="entity"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
></chart-echart-app-relate-domain>
|
||
|
||
<chart-one-situation-statistics
|
||
v-else-if="isSingleSupportStatistics"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:query-params="queryParams"
|
||
:time-filter="timeFilter"
|
||
:entity="entity"
|
||
@showLoading="showLoading"
|
||
></chart-one-situation-statistics>
|
||
|
||
<chart-two-situation-statistics
|
||
v-else-if="isTwoSupportStatistics"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
:entity="entity"
|
||
></chart-two-situation-statistics>
|
||
|
||
<chart-alarm-info
|
||
v-else-if="isAlarmInfo"
|
||
:chart-info="chartInfo"
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
@showLoading="showLoading"
|
||
:tabHandleClickType="tabHandleClickType"
|
||
@getAlarmInfo="getAlarmInfo"
|
||
:entity="entity"
|
||
>
|
||
</chart-alarm-info>
|
||
<chart-domain-recursive-resolve
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:query-params="queryParams"
|
||
v-else-if="isDomainRecursiveResolve"
|
||
></chart-domain-recursive-resolve>
|
||
|
||
<chart-detection-security
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:chart-info="chartInfo"
|
||
:query-params="queryParams"
|
||
v-else-if="isDetectionSecurity"
|
||
@getDetectionData="getDetectionData"
|
||
></chart-detection-security>
|
||
|
||
<chart-detection-service
|
||
:chart-data="chartData"
|
||
:time-filter="timeFilter"
|
||
:chart-info="chartInfo"
|
||
:query-params="queryParams"
|
||
v-else-if="isDetectionService"
|
||
@getDetectionData="getDetectionData"
|
||
></chart-detection-service>
|
||
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Loading from '@/components/common/Loading'
|
||
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 ChartGroup from '@/views/charts/charts/ChartGroup'
|
||
import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
|
||
import ChartEchart from '@/views/charts/charts/ChartEchart'
|
||
import ChartEchartWithStatistics from '@/views/charts/charts/ChartEchartWithStatistics'
|
||
import ChartEchartWithTable from '@/views/charts/charts/ChartEchartWithTable'
|
||
import ChartEchartIpHostedDomain from '@/views/charts/charts/ChartEchartIpHostedDomain'
|
||
import ChartEchartAppRelateDomain from '@/views/charts/charts/ChartEchartAppRelateDomain'
|
||
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 ChartRelationShip from '@/views/charts/charts/ChartRelationShip'
|
||
import ChartSanKey from '@/views/charts/charts/ChartSanKey'
|
||
import ChartOneSituationStatistics from '@/views/charts/charts/ChartOneSituationStatistics'
|
||
import ChartTwoSituationStatistics from '@/views/charts/charts/ChartTwoSituationStatistics'
|
||
import ChartAlarmInfo from '@/views/charts/charts/ChartAlarmInfo'
|
||
import ChartDomainRecursiveResolve from '@/views/charts/charts/ChartDomainRecursiveResolve'
|
||
import chartDetectionSecurity from '@/views/charts/charts/chartDetectionSecurity'
|
||
import chartDetectionService from '@/views/charts/charts/chartDetectionService'
|
||
import {
|
||
isEcharts,
|
||
isEchartsLine,
|
||
isSingleValue,
|
||
isTable,
|
||
isBasicTable,
|
||
isActiveIpTable,
|
||
isTitle,
|
||
isMap,
|
||
getOption,
|
||
isEchartsPie,
|
||
isEchartsWithTable,
|
||
isEchartsWithStatistics,
|
||
isEchartsTimeBar,
|
||
isEchartsCategoryBar,
|
||
isIpOpenPortBar,
|
||
isMapLine,
|
||
isMapBlock,
|
||
isSingleValueWithEcharts,
|
||
isSingleValueWithPercent,
|
||
isRelationShip,
|
||
isTabs,
|
||
isGroup,
|
||
isSankey,
|
||
isIpBasicInfo,
|
||
isIpHostedDomain,
|
||
isDomainWhois,
|
||
isDomainDnsRecord,
|
||
isCryptocurrencyEventList,
|
||
isAppBasicInfo,
|
||
isAppRelatedDomain,
|
||
isBlock,
|
||
isSingleSupportStatistics,
|
||
isTwoSupportStatistics,
|
||
isAlarmInfo,
|
||
isDomainRecursiveResolve,
|
||
isDetectionSecurity,
|
||
isDetectionService,
|
||
isDetectionsProtocol
|
||
} from './charts/tools'
|
||
import _ from 'lodash'
|
||
|
||
export default {
|
||
name: 'chart',
|
||
components: {
|
||
ChartSanKey,
|
||
ChartCryptocurrencyEventList,
|
||
ChartDomainDnsRecord,
|
||
ChartDomainWhois,
|
||
ChartAppBasicInfo,
|
||
ChartActiveIpTable,
|
||
ChartTable,
|
||
IpBasicInfo,
|
||
ChartSingleValue,
|
||
Loading,
|
||
ChartNoData,
|
||
ChartTabs,
|
||
ChartMap,
|
||
ChartBlock,
|
||
ChartTimeBar,
|
||
ChartCategoryBar,
|
||
ChartIpOpenPortBar,
|
||
ChartRelationShip,
|
||
ChartGroup,
|
||
ChartEchartWithStatistics,
|
||
ChartEchart,
|
||
ChartEchartWithTable,
|
||
ChartEchartIpHostedDomain,
|
||
ChartEchartAppRelateDomain,
|
||
ChartOneSituationStatistics,
|
||
ChartTwoSituationStatistics,
|
||
ChartAlarmInfo,
|
||
ChartDomainRecursiveResolve,
|
||
chartDetectionSecurity,
|
||
chartDetectionService
|
||
},
|
||
data () {
|
||
return {
|
||
tabHandleClickType: ''
|
||
}
|
||
},
|
||
props: {
|
||
chartInfo: Object,
|
||
chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
|
||
resultType: Object, // 返回数据的类型
|
||
queryParams: Object, // 接口请求参数
|
||
customChartOption: Object, // 需要自定义echarts的option时传入，非必须；传入该值时仍需传对应格式的chartData
|
||
isFullscreen: Boolean,
|
||
loading: Boolean,
|
||
panelLock: Boolean,
|
||
entity: Object,
|
||
isError: Boolean,
|
||
table: Object,
|
||
timeFilter: Object,
|
||
orderPieTable: Object,
|
||
tabHandleClickType: String
|
||
},
|
||
computed: {
|
||
isNoData () {
|
||
return (
|
||
!this.loading &&
|
||
(!this.chartData || _.isEmpty(this.chartData) || this.isError) &&
|
||
!this.isSingleValue &&
|
||
!this.isTabs &&
|
||
!this.isBlock &&
|
||
!this.isGroup &&
|
||
!this.isDomainDnsRecord &&
|
||
!this.isCryptocurrencyEventList &&
|
||
!this.isActiveIpTable &&
|
||
!this.isMap &&
|
||
!this.isSingleSupportStatistics &&
|
||
!this.isTwoSupportStatistics &&
|
||
!this.isAlarmInfo
|
||
)
|
||
},
|
||
chartOption () {
|
||
if (this.customChartOption) {
|
||
return _.cloneDeep(this.customChartOption)
|
||
} else {
|
||
return getOption(this.chartInfo.type)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
resize () {
|
||
this.$refs['chart' + this.chartInfo.id] &&
|
||
this.$refs['chart' + this.chartInfo.id].resize()
|
||
},
|
||
showLoading (show) {
|
||
this.$emit('showLoading', show)
|
||
},
|
||
finishOneMap (show) {
|
||
this.$emit('handleSpecialChartFinishState', true)
|
||
},
|
||
getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
|
||
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
|
||
},
|
||
getChartData (url, extraParams) {
|
||
this.$emit('getChartData', url, extraParams)
|
||
},
|
||
getDetectionData (url, extraParams, isRefresh, timeFilter) {
|
||
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
|
||
},
|
||
initEchartsWithTable () {
|
||
this.$refs['chart' + this.chartInfo.id] &&
|
||
this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
|
||
`chart${this.chartInfo.id}`
|
||
)
|
||
},
|
||
query (params) {
|
||
this.$emit('query', params)
|
||
}
|
||
},
|
||
watch: {
|
||
tabHandleClickType: {
|
||
deep: true,
|
||
handler (n) {
|
||
this.tabHandleClickType = n
|
||
}
|
||
}
|
||
},
|
||
setup (props) {
|
||
return {
|
||
isEcharts: isEcharts(props.chartInfo.type),
|
||
isEchartsLine: isEchartsLine(props.chartInfo.type),
|
||
isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
|
||
isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
|
||
isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
|
||
isEchartsPie: isEchartsPie(props.chartInfo.type),
|
||
isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
|
||
isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
|
||
isSingleValue: isSingleValue(props.chartInfo.type),
|
||
isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
|
||
isSingleValueWithPercent: isSingleValueWithPercent(props.chartInfo.type),
|
||
isRelationShip: isRelationShip(props.chartInfo.type),
|
||
isTable: isTable(props.chartInfo.type),
|
||
isBasicTable: isBasicTable(props.chartInfo.type),
|
||
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
|
||
isMap: isMap(props.chartInfo.type),
|
||
isTitle: isTitle(props.chartInfo.type),
|
||
isMapLine: isMapLine(props.chartInfo.type),
|
||
isMapBlock: isMapBlock(props.chartInfo.type),
|
||
isTabs: isTabs(props.chartInfo.type),
|
||
isGroup: isGroup(props.chartInfo.type),
|
||
isBlock: isBlock(props.chartInfo.type),
|
||
isSankey: isSankey(props.chartInfo.type),
|
||
isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
|
||
isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
|
||
isDomainWhois: isDomainWhois(props.chartInfo.type),
|
||
isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
|
||
isCryptocurrencyEventList: isCryptocurrencyEventList(
|
||
props.chartInfo.type
|
||
),
|
||
isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
|
||
isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
|
||
isSingleSupportStatistics: isSingleSupportStatistics(
|
||
props.chartInfo.type
|
||
),
|
||
isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
|
||
isAlarmInfo: isAlarmInfo(props.chartInfo.type),
|
||
isDomainRecursiveResolve: isDomainRecursiveResolve(props.chartInfo.type),
|
||
isDetectionSecurity: isDetectionSecurity(props.chartInfo.type),
|
||
isDetectionService: isDetectionService(props.chartInfo.type),
|
||
isDetectionsProtocol: isDetectionsProtocol(props.chartInfo.type)
|
||
}
|
||
}
|
||
}
|
||
</script>
|