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

CN-103 曲线无数据时应显示no data

Browse Source
This commit is contained in:
hyx
2021-08-20 15:43:48 +08:00
parent 05171c67ee
commit 679ba0bb79
7 changed files with 220 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/charts/ChartError.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<el-popover
v-if="isError"
placement="top-start"
trigger="hover"
popper-class="chart-error-popper"
:close-delay=10
offset="10"
:width="-1"
> <!-- :width="-1" 是为了让min-width及max-width生效，让width失效-->
<div >{{errorInfo}}</div>
<template #reference>
<span class="chart-info-corner chart-info-corner--error">
<i class="cn-chart-icon-warning fa "></i>
<span class="chart-info-corner-inner"></span>
</span>
</template>
</el-popover>
</template>
<script>
export default {
name: 'ChartError',
props: {
isError: Boolean,
errorInfo:String
}
}
</script>

11
src/components/charts/ChartMap.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="cn-chart cn-chart__map">
<div class="cn-chart__header">
<div class="header__title">
<div class="cn-chart__header chart-header-position" >
<slot name="chartErrorInfo"></slot>
<div class="header__title chart-title-width" >
<slot name="title"></slot>
</div>
<div class="header__operations">
@@ -23,6 +24,12 @@ export default {
name: 'ChartMap',
props: {
loading: Boolean
},
data () {
return {
errorContent: '出错了。。。',
isError: true,
}
}
}
</script>

5
src/components/charts/ChartSingleValue.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
<div class="single-value-icon__box">
<div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)" >
<slot name="chartErrorInfo"></slot>
<div class="single-value-icon__box" >
<div class="single-value__icon"><i :class="icon"></i></div>
</div>
<div class="single-value__content" v-if="type === 51">

3
src/components/charts/ChartTable.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="cn-chart cn-chart__table">
<div class="cn-chart__header">
<div class="cn-chart__header chart-header-position" >
<slot name="chartErrorInfo"></slot>
<div class="header__title">
<slot name="title"></slot>
</div>

3
src/components/charts/EchartsFrame.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="cn-chart cn-chart__echarts" :class="{'cn-chart__echarts--statistics': isEchartsWithStatistics}">
<div class="cn-chart__header" v-if="layout.indexOf(layoutConstant.HEADER) > -1">
<div class="cn-chart__header chart-header-position" v-if="layout.indexOf(layoutConstant.HEADER) > -1" >
<slot name="chartErrorInfo"></slot>
<div class="header__title">
<slot name="title"></slot>
</div>

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

@@ -14,6 +14,41 @@
font-size: 20px;
}
}
.chart-error-popper{
word-wrap:break-word;
word-break:break-word;
border: 1px solid #e02f44;
min-width: 180px !important;
max-width: 280px !important;
}
.chart-title-width{
width:100%;
}
.chart-header-position{
position:relative;
}
.chart-error-popper.el-popper.is-light {
background: #e02f44;
border: 1px solid #e02f44;
}
.chart-error-popper.el-popover.el-popper {
color:white;
}
.chart-error-popper.el-popper.is-light[data-popper-placement^='top'] .el-popper__arrow::before {
border-color: #e02f44;
background: #e02f44;
bottom:0px;
}
.chart-error-popper.el-popper.is-light[data-popper-placement^='bottom'] .el-popper__arrow::before {
border-color: #e02f44;
background: #e02f44;
}
.cn-panel, .cn-panel>.cn-chart__tabs>.el-tabs__content>.el-tab-pane {
display: grid;
grid-template-columns: repeat(30, 1fr);
@@ -46,6 +81,7 @@
width: 100%;
}
}
&>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
display: flex;
flex-direction: column;
@@ -59,6 +95,46 @@
color: #333333;
font-weight: bold;
.chart-info-corner {
color: #767980;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 28px;
height: 28px;
z-index: 2;
top: 0;
}
.chart-info-corner--error {
display: block;
color: #fff;
}
.chart-info-corner--error .chart-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
}
.chart-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
.chart-info-corner .fa {
position: relative;
top: -2px;
left: 6px;
font-size: 65%;
z-index: 3;
font-style: normal;
}
.cn-chart-icon-warning:before {
content: "!";
font-weight:normal;
}
.header__operations {
.cn-icon-more-light {
color: #999;
@@ -73,6 +149,46 @@
display: flex;
align-items: center;
.chart-info-corner {
color: #767980;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 28px;
height: 28px;
z-index: 2;
top: 0;
}
.chart-info-corner--error {
display: block;
color: #fff;
}
.chart-info-corner--error .chart-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
}
.chart-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
.chart-info-corner .fa {
position: relative;
top: 3px;
left: 6px;
font-size: 65%;
z-index: 3;
font-style: normal;
}
.cn-chart-icon-warning:before {
content: "!";
}
.single-value-icon__box {
display: flex;
align-items: center;

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

@@ -30,6 +30,13 @@
:style="computePosition"
:loading="loading"
>
<template #chartErrorInfo>
<chart-error
:isError="isError"
:errorInfo="errorInfo"
>
</chart-error>
</template>
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
<template #operations>
<!-- <i class="cn-icon cn-icon-more-light"></i>-->
@@ -48,6 +55,13 @@
:loading="loading"
:no-data="noData"
>
<template #chartErrorInfo>
<chart-error
:isError="isError"
:errorInfo="errorInfo"
>
</chart-error>
</template>
<template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">
{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
</template>
@@ -87,6 +101,13 @@
:icon="singleValue.icon"
v-loading="loading"
>
<template #chartErrorInfo>
<chart-error
:isError="isError"
:errorInfo="errorInfo"
>
</chart-error>
</template>
<template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
<template #data>
<span>{{handleSingleValue[0] ? handleSingleValue[0] : '-'}}</span>
@@ -105,6 +126,13 @@
:loading="loading"
:no-data="noData"
>
<template #chartErrorInfo>
<chart-error
:isError="isError"
:errorInfo="errorInfo"
>
</chart-error>
</template>
<template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
<template #operations>
<!-- <div class="header__operation header__operation&#45;&#45;table">
@@ -180,6 +208,7 @@ import {
isTabs,
getChartColor
} from '@/components/charts/chart-options'
import ChartError from '@/components/charts/ChartError'
import EchartsFrame from '@/components/charts/EchartsFrame'
import SingleValue from '@/components/charts/ChartSingleValue'
import ChartTable from '@/components/charts/ChartTable'
@@ -210,7 +239,8 @@ export default {
ChartTable,
PieTable,
StatisticsLegend,
ChartMap
ChartMap,
ChartError
},
data () {
return {
@@ -235,7 +265,10 @@ export default {
chartOption: null,
loading: true,
noData: false, // 查询结果为空
throttle: null // 节流器
throttle: null, // 节流器
isError:false,//接口响应是否报错
errorInfo:"",//接口具体错误信息
}
},
methods: {
@@ -275,6 +308,9 @@ export default {
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.singleValue.value = response.data.result
}else {
this.isError = true;
this.errorInfo = response.message;
}
if (this.isSingleValueWithEcharts) { // 带曲线的单值图
const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -294,6 +330,9 @@ export default {
}
}
})
}else {
this.isError = true;
this.errorInfo = response.message;
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -477,6 +516,9 @@ export default {
polygonTemplate.nonScalingStroke = true
polygonTemplate.strokeWidth = 0.5
}
}else {
this.isError = true;
this.errorInfo = response.message;
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
@@ -583,6 +625,9 @@ export default {
}
this.chartOption.grid.left = 75
}
}else {
this.isError = true;
this.errorInfo = response.message;
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -697,6 +742,9 @@ export default {
}
}
})
}else {
this.isError = true;
this.errorInfo = response.message;
}
this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
@@ -752,9 +800,15 @@ export default {
get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
if (response2.code === 200) {
this.pieTableData = response2.data.result
}else {
this.isError = true;
this.errorInfo = response.message;
}
})
}
}else {
this.isError = true;
this.errorInfo = response.message;
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)
@@ -823,6 +877,9 @@ export default {
this.table.tableData = response.data.result
this.table.tableColumns = this.getTableTitle(response.data.result)
this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
}else {
this.isError = true;
this.errorInfo = response.message;
}
}).finally(() => {
setTimeout(() => { this.loading = false }, 250)