CN-270 feat: 图表重构-单值图类型图表重构
This commit is contained in:
@changcode
@@ -208,6 +208,247 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
|
||||
.single-value__icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
|
||||
i {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.single-value__content {
|
||||
.content__data {
|
||||
font-size: 14px;
|
||||
}
|
||||
.content__title {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--icon-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.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__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__single-value.cn-chart__single-value--icon-right {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value__icon {
|
||||
background-color: $--chart-single-value-icon-background-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 7.5%;
|
||||
margin-bottom: 6%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
font-size: 24px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--icon-right--color {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.single-value-icon__box {
|
||||
padding-right: 30px;
|
||||
.single-value__icon {
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-right: 7.5%;
|
||||
margin-top: 30%;
|
||||
|
||||
.cn-icon-svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-value__data{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-left: 20px;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
height: 50%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.content__data {
|
||||
display: flex;
|
||||
padding-top: 5%;
|
||||
height: 50%;
|
||||
flex: auto;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.cn-chart__single-value.cn-chart__single-value--chart {
|
||||
display: flex;
|
||||
padding: 13px 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.single-value__content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.content__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30%;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.content__data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 25%;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content__chart {
|
||||
flex: auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-table-pagination.el-pagination {
|
||||
padding: 12px 0 9px 0;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.el-pagination__jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.cn-chart__whois>.cn-chart__body {
|
||||
overflow: auto;
|
||||
|
||||
@@ -18,6 +18,14 @@
|
||||
@showLoading="showLoading"
|
||||
></chart-map>
|
||||
|
||||
<chart-single-value
|
||||
v-else-if="isSingleValue"
|
||||
:chart-info="chartInfo"
|
||||
:chart-data="chartData"
|
||||
:query-params="queryParams"
|
||||
@showLoading="showLoading"
|
||||
></chart-single-value>
|
||||
|
||||
<div v-else style="height: 100%; width: 100%; background-color: lightcyan;"></div>
|
||||
|
||||
</template>
|
||||
@@ -29,6 +37,7 @@ 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 {
|
||||
isEcharts,
|
||||
isSingleValue,
|
||||
@@ -64,6 +73,7 @@ import _ from 'lodash'
|
||||
export default {
|
||||
name: 'chart',
|
||||
components: {
|
||||
ChartSingleValue,
|
||||
Loading,
|
||||
ChartNoData,
|
||||
ChartTabs,
|
||||
|
||||
137
src/views/charts/charts/ChartSingleValue.vue
Normal file
137
src/views/charts/charts/ChartSingleValue.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="cn-chart__single-value chart-header-position" :class="singleValueClass(type)" :style="{backgroundColor:color}">
|
||||
<div class="single-value-icon__box" v-if="chartInfo.type != 54">
|
||||
<div class="single-value__icon"><i :class="icon"></i></div>
|
||||
</div>
|
||||
<div class="single-value__content" v-if="chartInfo.type == 51">
|
||||
<div class="content__data">
|
||||
<span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
|
||||
<span class="single-value__unit">{{handleSingleValue[1]}}</span>
|
||||
</div>
|
||||
<div class="content__title">
|
||||
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-value__content single-value__content--with-chart" v-if="chartInfo.type == 52">
|
||||
<div class="content__title">
|
||||
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
|
||||
</div>
|
||||
<div class="content__data">
|
||||
<span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
|
||||
<span class="single-value__unit">{{handleSingleValue[1]}}</span>
|
||||
</div>
|
||||
<div class="content__chart">
|
||||
<div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-value__content" v-if="chartInfo.type == 53">
|
||||
<div class="content__title">
|
||||
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
|
||||
</div>
|
||||
<div class="content__data">
|
||||
<span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
|
||||
<span class="single-value__unit">{{handleSingleValue[1]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-value__content" v-if="chartInfo.type == 54" >
|
||||
<div class="single-value-icon__box" >
|
||||
<div class="single-value__icon">
|
||||
<!-- 使用图标-->
|
||||
<svg class="cn-icon-svg" aria-hidden="true">
|
||||
<use :xlink:href="icon"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-value__data">
|
||||
<div class="content__title">
|
||||
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
|
||||
</div>
|
||||
<div class="content__data">
|
||||
<span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
|
||||
<span class="single-value__unit">{{handleSingleValue[1]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import {unitTypes} from "@/utils/constants";
|
||||
export default {
|
||||
name: "chartSingleValue",
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
queryParams: Object
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icon: '',
|
||||
color: '',
|
||||
type: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartInfo: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.icon = n.params.icon
|
||||
this.color = n.params.color
|
||||
this.type = n.type
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
handleSingleValue () {
|
||||
const value = this.chartData ? this.chartData.value: ''
|
||||
const unitType = this.chartInfo.params.unitType
|
||||
const result = unitConvert(value, unitType)
|
||||
switch (unitType) {
|
||||
case unitTypes.percent: {
|
||||
result[0] = result[0] < 0.01 ? '< 0.01' : result[0]
|
||||
break
|
||||
}
|
||||
case unitTypes.time: {
|
||||
result[0] = result[0] < 1 ? '< 1' : result[0]
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return result
|
||||
},
|
||||
singleValueClass () {
|
||||
return function (type) {
|
||||
let c
|
||||
switch (type) {
|
||||
case 51: {
|
||||
c = 'cn-chart__single-value--icon-left'
|
||||
break
|
||||
}
|
||||
case 55:
|
||||
case 52: {
|
||||
c = 'cn-chart__single-value--chart'
|
||||
break
|
||||
}
|
||||
case 53: {
|
||||
c = 'cn-chart__single-value--icon-right'
|
||||
break
|
||||
}
|
||||
case 54: {
|
||||
c = 'cn-chart__single-value--icon-right--color'
|
||||
break
|
||||
}
|
||||
default: break
|
||||
}
|
||||
return c
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user