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

perf: 细节调整

Browse Source
This commit is contained in:
chenjinsong
2021-07-09 21:58:49 +08:00
parent 23e78b0a84
commit ac7f3b6280
8 changed files with 325 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/charts/StatisticsLegend.vue
View File

@@ -8,14 +8,10 @@
</div>
<div class="chart__table-below">
<div v-for="(item,index) in data" :key="index" class="table-below-box">
<div class="table-below-account">
<div :style="{backgroundColor: getChartColor(index)}" class="table__below-color" :title="getChartColor(index)"></div>
<div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
<div class="table__below-title" :title="item.legend">{{item.legend}}</div>
</div>
<div class="table__below-flashback">
<div class="table__below-max qq" :title="item.aggregation.max">{{item.aggregation.max}}</div>
<div class="table__below-avg qq" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
</div>
<div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div>
<div class="table__below-statistics table__below-statistics-2" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
</div>
</div>
</div>
@@ -48,73 +44,76 @@ export default {
</script>
<style lang="scss" scoped>
.chart__legend{
.chart__legend {
width: 455px;
height: 111px;
height: 95px;
border: 1px solid #E7EAED;
font-size: 10px;
color:#5f6368;
margin: auto;
}
.chart__table-top{
.chart__table-top {
width: 455px;
height: 30px;
border-bottom: #E7EAED 0.96px solid;
display: flex;
flex-direction:row-reverse;
.chart__table-box{
.chart__table-box {
width: 185px;
height: 30px;
display: flex;
align-items: center;
font-family: Roboto-Regular;
font-size: 14px;
color: #0091FF;
font-weight: 400;
justify-content: space-around;
}
}
.chart__table-below{
.chart__table-below {
width: 455px;
height: calc(100% - 30px);
overflow: auto;
.table-below-box{
font-size: 13px;
.table-below-box {
width: 100%;
display: flex;
font-size: 15px;
align-items: center;
.table-below-account{
width: 310px;
display: flex;
align-items: center;
padding-left: 16px;
line-height: 24px;
}
.table__below-flashback{
width: 211px;
display: flex;
flex-direction:row-reverse;
align-items: center;
justify-content: space-around;
}
}
.table-below-box:hover{
.table-below-box:hover {
background-color: #f9f9f9;
border: 0;
color: #383838;
}
.table__below-color{
width: 17px;
.table__below-color {
width: 27px;
height: 7px;
flex-shrink: 0;
padding-left: 10px;
div {
height: 100%;
width: 100%;
border-radius: 24%;
}
.table__below-title{
max-width: 226px;
}
.table__below-title {
padding: 0 6px;
flex-shrink: 1;
flex-grow: 1;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.qq{
width: 39px;
.table__below-statistics {
width: 86px;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table__below-statistics-2 {
width: 70px;
}
}
</style>

7
src/components/charts/chart-options.js
View File

@@ -33,7 +33,6 @@ const line = {
axisLabel: {
formatter: shortFormatter
}
},
animation: false,
grid: {
@@ -63,7 +62,7 @@ const line = {
{
name: '',
type: 'line',
smooth: true,
smooth: false,
symbol: 'none',
data: []
}
@@ -95,7 +94,7 @@ const lineWithStatistics = {
color: chartColor,
grid: {
left: 55,
bottom: 45,
bottom: 25,
top: 30
},
legend: {
@@ -108,7 +107,7 @@ const lineWithStatistics = {
{
name: '',
type: 'line',
smooth: true,
smooth: false,
symbol: 'none',
data: []
}

2
src/components/charts/chartFormatter.js
View File

@@ -1,4 +1,4 @@
const shortList = [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion']
const shortList = [' ', 'K', 'M', 'B', 'T', 'Quadrillion', 'Quintillion']
function asciiCompute (num, ascii, units, dot = 2) {
if (!num && num !== 0 && num !== '0') {
return ''

5
src/components/charts/panel.scss
View File

@@ -13,7 +13,7 @@
.panel__time {
position: absolute;
right: 20px;
top: 20px;
top: 10px;
display: flex;
}
@@ -176,6 +176,9 @@
&>.el-tabs__header {
margin-bottom: 10px;
}
&>.el-tabs__content {
height: calc(100% - 40px);
}
}
&>.cn-chart__table {
.cn-chart__header {

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

@@ -3,14 +3,15 @@
<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"> - </div>
<div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
<div class="calendar-popover-text">{{ dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
<div class="calendar-popover-text"> -</div>
<div class="calendar-popover-text">{{ dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</div>
<div class="calendar-popover-text" v-else>
{{showDetail}}
{{ showDetail }}
</div>
<div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down" :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
<div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"
:class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
</div>
<transition name="el-zoom-in-top">
<div v-if="dropdownFlag" class="date-range-panel">
@@ -31,34 +32,45 @@
@change="timeArrChange"
/>
<div class="content-title">From</div>
<div @click="myDatePickerShow" tabindex="1" class="content-input">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
<div @click="myDatePickerShow" tabindex="1" class="content-input">
{{ dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss') }}
</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')}}</div>
<div><el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button></div>
<div class="date-range-title" style="padding-left: 0">Recently used absolute ranges </div>
<div @click="myDatePickerShow" tabindex="2" class="content-input">
{{ dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss') }}
</div>
<div>
<el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
</div>
<div class="date-range-title" style="padding-left: 0">Recently used absolute ranges</div>
<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')}}
<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') }}
—
{{dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss')}}
{{ dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss') }}
</div>
</div>
</el-col>
<el-col :span="8" class="date-range-panel-content date-range-panel-content-right" style="border-left: 1px solid rgba(0,0,0,0.09);">
<el-col :span="8" class="date-range-panel-content date-range-panel-content-right"
style="border-left: 1px solid rgba(0,0,0,0.09);">
<div class="date-range-title">Relatime time ranges</div>
<ul class="date-range-item">
<li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''" :key="item.value">
<li v-for="item in dateRangeArr" @click="quickChange(item.value)"
:class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
:key="item.value">
<span style="position: relative">
{{item.name}}
<i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)" class="cn-icon cn-icon-check"></i>
{{ item.name }}
<i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
class="cn-icon cn-icon-check"></i>
</span>
</li>
</ul>
</el-col>
</el-row>
<el-row class="date-range-panel-bottom" style="">
<el-col :span="12">{{address}}</el-col>
<el-col :span="12" class="utc-str">{{utcStr}}</el-col>
<el-col :span="12">{{ address }}</el-col>
<el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
</el-row>
</div>
</transition>
@@ -66,8 +78,9 @@
</template>
<script>
import { ref, computed } from 'vue'
import {ref, computed} from 'vue'
import MyDatePicker from '../MyDatePicker'
export default {
name: 'DateTimeRange',
props: {
@@ -92,7 +105,7 @@ export default {
components: {
MyDatePicker
},
setup (props, ctx) {
setup(props, ctx) {
// data
const myStartTime = ref(props.startTime)
const myEndTime = ref(props.endTime)
@@ -252,26 +265,34 @@ export default {
</script>
<style scoped lang="scss">
.date-range-box{
.date-range-box {
font-size: 14px;
border-radius: 2px;
display: flex;
.date-range-refresh{
.date-range-refresh {
margin-left: 10px;
}
}
.date-range-item{
list-style-type:none;
.date-time-range {
margin-right: 10px;
}
/deep/ .panel-time-picker-hidden{
.date-range-item {
list-style-type: none;
}
/deep/ .panel-time-picker-hidden {
visibility: hidden !important;
position: absolute;
top: 0;
left: 0;
}
.date-range-text{
.date-range-text {
font-size: 14px;
min-width:150px;
min-width: 150px;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 10px;
@@ -280,59 +301,69 @@ export default {
height: 26px;
background: #FFFFFF;
border: 1px solid #E7EAED;
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
border-radius: 2px;
line-height: 26px;
transition: width .3s;
.cn-icon{
.cn-icon {
font-size: 14px;
}
.cn-icon-arrow-down{
.cn-icon-arrow-down {
transition: all .3s;
display: inline-block;
}
.cn-icon-arrow-down-active{
.cn-icon-arrow-down-active {
transform: rotate(180deg);
}
}
.date-range-title{
font-family: Roboto-Black;
.date-range-title {
font-size: 14px;
color: #666666;
font-weight: 600;
padding: 14px 0px 7px 8px;
}
.calendar-popover-text{
.calendar-popover-text {
white-space: nowrap;
display: inline-block;
margin: 0 5px;
}
.calendar-popover-text:first-of-type{
.calendar-popover-text:first-of-type {
margin-left: 0;
}
.calendar-popover-text:last-of-type{
.calendar-popover-text:last-of-type {
margin-right: 0;
}
.date-range-panel{
.date-range-panel {
height: 410px;
width: 500px;
background: #FFFFFF;
box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
position: absolute;
right: 0;
top: 34px;
z-index: 1;
.date-range-panel-content-left{
.date-range-panel-content-left {
padding-left: 10px;
display: flex;
flex-direction: column;
.content-title{
.content-title {
font-size: 14px;
color: #666666;
font-weight: 400;
margin-bottom: 12px;
}
.content-input{
.content-input {
border: 1px solid #E7EAED;
border-radius: 2px;
width: 230px;
@@ -342,32 +373,39 @@ export default {
margin-bottom: 12px;
outline: #169AFF;
}
.content-input:focus{
.content-input:focus {
border: 1px solid #169AFF;
}
.date-range-history{
.date-range-history {
flex: 1;
overflow-y: auto;
.date-range-history-item{
.date-range-history-item {
padding: 5px 0;
cursor: pointer;
}
.date-range-history-item:hover{
.date-range-history-item:hover {
/*font-weight: 600;*/
background: #f9f9f9;
}
}
}
.date-range-panel-content-right{
.date-range-panel-content-right {
display: flex;
flex-direction: column;
ul{
ul {
flex: 1;
padding: 0;
display: flex;
flex-direction: column;
margin: 0;
li{
li {
width: 100%;
flex: 1;
display: flex;
@@ -375,39 +413,44 @@ export default {
justify-content: center;
color: #333333;
font-weight: 400;
font-family: Roboto-Regular;
padding: 0 10px;
cursor: pointer;
}
li.active{
li.active {
background: #F2F9FF;
color: #0091FF;
font-weight: 400;
.cn-icon-check{
.cn-icon-check {
color: #0091FF;
position: absolute;
right: 7px;
}
}
li:hover{
li:hover {
background: #F2F9FF;
color: #0091FF;
}
}
}
}
.date-range-panel-top{
.date-range-panel-top {
height: 364px;
}
.date-range-panel-bottom{
.date-range-panel-bottom {
height: 44px;
line-height: 44px;
border-top: 1px solid rgba(0,0,0,0.09);
border-top: 1px solid rgba(0, 0, 0, 0.09);
padding: 0 10px;
display: flex;
justify-content: space-between;
font-size: 14px;
.utc-str{
.utc-str {
text-align: right;
}
}

1
src/components/entities/LeftFilter.vue
View File

@@ -50,7 +50,6 @@ export default {
},
watch: {
filterData (n) {
console.info(n)
}
}
}

18
src/views/charts/Chart.vue
View File

@@ -104,7 +104,7 @@
class="option__select select-topn"
placeholder=""
popper-class="option-popper"
@change="tabelLimtChange"
@change="tableLimitChange"
>
<el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
<template #prefix>TOP&nbsp;</template>
@@ -117,7 +117,7 @@
class="option__select select-column"
:placeholder="$t('common.field')"
popper-class="option-popper"
@change="tabelLimtChange"
@change="tableLimitChange"
>
<el-option v-for="item in table.tableColumns" :key="item.prop" :value="item.prop">{{item.prop}}</el-option>
</el-select>
@@ -216,7 +216,6 @@ export default {
},
methods: {
initChart () {
const self = this
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
if (this.isMap) {
this.myChart = this.initMap(`chart${this.chartInfo.id}`)
@@ -466,7 +465,7 @@ export default {
})
})
},
tabelLimtChange () {
tableLimitChange () {
const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
this.initChartTable(chartParams)
},
@@ -494,6 +493,17 @@ export default {
mounted () {
this.initChart()
},
watch: {
chart: {
immediate: true,
deep: true,
handler (n, o) {
if (o) {
this.initChart()
}
}
}
},
setup (props) {
const chartInfo = JSON.parse(JSON.stringify(props.chart))
chartInfo.category = getTypeCategory(props.chart.type)

11
src/views/charts/Panel.vue
View File

@@ -101,24 +101,23 @@ export default {
chart.i = chart.id
return chart
})
// this.chartList = [this.chartList[7], this.chartList[12]]
}
},
timeRefreshChange () {
async timeRefreshChange () {
if (!this.$refs.dateTimeRange) {
this.init()
await this.init()
return
}
if (this.$refs.dateTimeRange.isCustom) {
this.init()
await this.init()
} else {
const value = this.dateRangeValue.value || this.dateRangeValue
this.$refs.dateTimeRange.quickChange(value)
}
},
reload (s, e, v) {
async reload (s, e, v) {
this.dateTimeRangeChange(s, e, v)
this.init()
await this.init()
}
}
}