gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 时间格式根据接口返回格式动态改变

Browse Source
This commit is contained in:
@changcode
2022-04-28 18:11:49 +08:00
parent 6b96276855
commit ec829e64b3
16 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/common/TimeRange/DateTimeRange.vue
View File

@@ -3,9 +3,9 @@
<div @click="showDropdown" class="date-range-text">
<div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
<div class="calendar-popover-text" style="display: flex" v-if="isCustom">
<div class="calendar-popover-text">{{ dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="calendar-popover-text">{{ dateFormatByAppearance(startTime) }}</div>
<div class="calendar-popover-text"> -</div>
<div class="calendar-popover-text">{{ dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="calendar-popover-text">{{ dateFormatByAppearance(endTime) }}</div>
</div>
<div class="calendar-popover-text" v-else>
{{ showDetail }}
@@ -33,11 +33,11 @@
/>
<div class="content-title">From</div>
<div @click="myDatePickerShow" tabindex="1" class="content-input">
{{ dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss') }}
{{ dateFormatByAppearance(myStartTime) }}
</div>
<div class="content-title">To</div>
<div @click="myDatePickerShow" tabindex="2" class="content-input">
{{ dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss') }}
{{ dateFormatByAppearance(myEndTime) }}
</div>
<div>
<el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
@@ -46,9 +46,9 @@
<div class="date-range-history">
<div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item"
@click="historyChange(item)">
{{ dayJs.tz(item.start).format('YYYY-MM-DD HH:mm:ss') }}
{{ dateFormatByAppearance(item.start) }}
—
{{ dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss') }}
{{ dateFormatByAppearance(item.end) }}
</div>
</div>
</el-col>

2
src/components/table/report/builtinReportTable.vue
View File

@@ -34,7 +34,7 @@
<template #default="scope" :column="item">
<span v-if="item.prop === 'dataRange'">
<template v-if="scope.row.startTime && scope.row.endTime">
{{scope.row.startTime}}-{{scope.row.endTime}}
{{dateFormatByAppearance(scope.row.startTime)}}-{{dateFormatByAppearance(scope.row.endTime)}}
</template>
</span>
<span v-else-if="item.prop === 'type'">

4
src/views/charts/charts/ChartAlarmInfo.vue
View File

@@ -58,9 +58,7 @@
<div>
{{
value.startTime
? dayJs
.tz(getMillisecond(value.startTime))
.format('YYYY-MM-DD HH:mm:ss')
? dateFormatByAppearance(value.startTime)
: '-'
}}
</div>

4
src/views/charts/charts/ChartDomainWhois.vue
View File

@@ -20,11 +20,11 @@
</div>
<div class="domain-detail-list__row">
<div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "createTime")) || '-'}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "createTime") * 1) || '-'}}</div>
</div>
<div class="domain-detail-list__row">
<div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "expirationTime")) || '-'}}</div>
<div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "expirationTime") * 1) || '-'}}</div>
</div>
</div>
</div>

5
src/views/charts/charts/ChartIpOpenPortBar.vue
View File

@@ -17,7 +17,10 @@
:min-width="item.width"
>
<template v-slot="scope" :column="item">
<span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-if="item.prop === 'utime'">
{{ dateFormatByAppearance(scope.row[item.prop]) }}
</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>

3
src/views/charts/charts/ChartSingleValue.vue
View File

@@ -230,6 +230,7 @@ import { get } from '@/utils/http'
import { unitTypes } from '@/utils/constants'
import { replaceUrlPlaceholder } from '@/utils/tools'
import * as echarts from 'echarts'
import { dateFormatByAppearance } from '@/utils/date-util'
import {
getOption,
getChartColor,
@@ -359,7 +360,7 @@ export default {
...seriesTemplate,
name: r.legend,
data: r.values.map((v) => [
Number(v[0]) * 1000,
dateFormatByAppearance(Number(v[0]) * 1000),
Number(v[1]),
chartParams.unitType
]),

2
src/views/charts/charts/chartDetectionsTable.vue
View File

@@ -66,7 +66,7 @@
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</span>
<span>{{dateFormatByAppearance(detection.startTime) || '-'}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>

1
src/views/charts/charts/options/line.js
View File

@@ -180,6 +180,7 @@ export const singleValueLine = {
showContent: true,
appendToBody: true,
trigger: 'axis',
formatter: axisFormatter,
textStyle: {
width: '20px',
overflow: 'truncate'

9
src/views/charts/charts/tools.js
View File

@@ -7,6 +7,7 @@ import { pieWithTable, ipHostedDomain } from './options/pie'
import { relationShip } from './options/graph'
import { sankey } from './options/sankey'
import { chartColor } from '@/utils/constants'
import { dateFormatByAppearance } from '@/utils/date-util'
export const chartBarColor = ['#0F8AB2', '#57CBAC']
export function getChartColor (index) {
@@ -320,7 +321,7 @@ export function axisFormatter (params) {
const tData = item.data[0]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip-box">'
@@ -345,7 +346,7 @@ export function timeHorizontalFormatter (params) {
const tData = item.data[1]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip-box">'
@@ -388,7 +389,7 @@ export function timeVerticalFormatter (params) {
const tData = item.data[0]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip-box">'
@@ -417,7 +418,7 @@ export function timeBarTooltipFormatter (params, type) {
let str = '<div>'
const tData = params.data[index0]
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += dateFormatByAppearance(tData)
str += '</div>'
str += '<div class="cn-chart-tooltip-box">'

2
src/views/detections/DetectionRow.vue
View File

@@ -54,7 +54,7 @@
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</span>
<span>{{dateFormatByAppearance(detection.startTime) || '-'}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>

3
src/views/detections/options/detectionOptions.js
View File

@@ -5,6 +5,7 @@ import {
} from '@/views/charts/charts/tools'
import unitConvert from '@/utils/unit-convert'
import _ from 'lodash'
import { dateFormatByAppearance } from '@/utils/date-util'
const severitySeriesIndexMappings = [
{ value: 'critical', index: '0' },
@@ -296,7 +297,7 @@ export const metricOption = {
const item = params[0]
const tData = item.data[0]
str += '<div style="margin-bottom: 5px">'
str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
str += dateFormatByAppearance(tData)
str += '</div>'
str += '<div class="cn-chart-tooltip-box">'
str += item.marker

4
src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
View File

@@ -75,13 +75,13 @@
<div class="metric__column">
<div class="overview__title">{{$t('detections.startTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content--metric ">{{dateFormatByAppearance(detection.startTime*1000) || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.endTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content--metric ">{{dateFormatByAppearance(detection.endTime*1000) || '-'}}</div>
</div>
</div>
</div>

4
src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
View File

@@ -66,13 +66,13 @@
<div class="metric__column">
<div class="overview__title">{{$t('detections.startTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content--metric ">{{dateFormatByAppearance(detection.startTime*1000) || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.endTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__content--metric ">{{dateFormatByAppearance(detection.endTime*1000) || '-'}}</div>
</div>
</div>
</div>

4
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -144,7 +144,7 @@
<div class="row__content">{{entityData.performanceNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
@@ -164,7 +164,7 @@
<div class="row__content">{{entityData.securityNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>

4
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -148,7 +148,7 @@
<div class="row__content">{{entityData.performanceNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
@@ -168,7 +168,7 @@
<div class="row__content">{{entityData.securityNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, i) in entityData.securityList" :key="i">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(getMillisecond(security.startTime)) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>

4
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -170,7 +170,7 @@
<div class="row__content">{{entityData.performanceNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(performance.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
<div>{{performance.eventType}}</div>
@@ -190,7 +190,7 @@
<div class="row__content">{{entityData.securityNum}}</div>
</div>
<div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
<div class="row__label row__label--width160">{{dayJs.tz(getMillisecond(security.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
<div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
<div class="row__content row__content--width200">
<div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
<div>{{security.securityType}}</div>