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;