feat: overview（部分）
This commit is contained in:
chenjinsong
Binary file not shown.
@@ -20,6 +20,21 @@ Created by iconfont
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="overview-project" unicode="" d="M1023.06176 661.461333c0-33.066667-26.794667-59.861333-59.861333-59.861333H59.904427A59.861333 59.861333 0 0 0 0.000427 661.461333V836.096A59.861333 59.861333 0 0 0 59.904427 896h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634667zM850.13376 748.8a39.253333 39.253333 0 1 1 78.549333 0 39.253333 39.253333 0 0 1-78.549333 0zM1023.06176 297.81333299999994a59.904 59.904 0 0 0-59.861333-59.946666H59.904427A59.861333 59.861333 0 0 0 0.000427 297.81333299999994V472.533333a59.904 59.904 0 0 0 59.904 59.861334h903.253333a59.861333 59.861333 0 0 0 59.904-59.861334v-174.762666zM870.059093 385.152a39.253333 39.253333 0 1 1 78.549334 0 39.253333 39.253333 0 0 1-78.506667 0zM1023.06176-56.53333299999997a59.904 59.904 0 0 0-59.861333-59.904H59.904427A59.904 59.904 0 0 0 0.000427-56.53333299999997v174.634666a59.904 59.904 0 0 0 59.904 59.904h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634666zM878.80576 30.80533300000002a39.296 39.296 0 1 1 78.592 0 39.296 39.296 0 0 1-78.592 0z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="overview-alert" unicode="" d="M702.99205 82.26788699999997a307.133443 307.133443 0 1 1 34.507075 613.294135 307.133443 307.133443 0 0 1-34.507075-613.294135zM1226.895455 895.641618L1154.502275 823.248438a613.60132 613.60132 0 0 0 0-868.564572l72.39318-72.393181a716.559372 716.559372 0 0 1 0 1013.350933zM430.621669 678.462077L358.279686 750.8552569999999a511.820809 511.820809 0 0 1 0-723.829408l72.39318 72.444377a409.067547 409.067547 0 0 0 0 579.043048z m651.487426 72.39318L1009.664717 678.462077a409.067547 409.067547 0 0 0 0-579.043048l72.39318-72.341983a511.872006 511.872006 0 0 1 0 723.829409v-0.051198zM154.155492 149.89970500000004A613.60132 613.60132 0 0 0 285.886506 823.299635L213.544523 895.692815a716.610569 716.610569 0 0 1 0-1013.40213l72.39318 72.393181a612.167792 612.167792 0 0 0-131.679816 195.215839z" horiz-adv-x="1484" />
|
||||
|
||||
|
||||
<glyph glyph-name="overview-asset" unicode="" d="M512 896C229.266286 896 0 666.843429 0 384.109714c0-282.697143 229.266286-512 512-512 282.697143 0 512 229.302857 512 512C1024 666.843429 794.697143 896 512 896m230.4-544.914286l-197.485714-197.376a46.555429 46.555429 0 0 0-65.828572 0L281.6 351.08571400000005a46.555429 46.555429 0 0 0 0 65.828572l197.485714 197.485714a46.555429 46.555429 0 0 0 65.828572 0l197.485714-197.485714c18.176-18.176 18.176-47.542857 0-65.828572" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="overview-endpoint" unicode="" d="M514.121143 896C231.606857 896 2.56 666.989714 2.56 384.512c0-282.514286 229.010286-511.524571 511.524571-511.524571 282.477714 0 511.488 229.010286 511.488 511.524571C1025.609143 666.989714 796.598857 896 514.121143 896z m287.707428-655.36a15.981714 15.981714 0 0 0-15.981714-15.981714H242.395429a15.981714 15.981714 0 0 0-16.018286 15.981714v287.707429c0 8.850286 7.168 15.981714 16.018286 15.981714h543.451428c8.813714 0 15.981714-7.131429 15.981714-15.981714v-287.707429zM290.340571 288.585143h447.561143v191.817143H290.340571zM514.121143 336.53028600000005h159.817143v95.926857h-159.817143zM354.267429 384.512a47.945143 47.945143 0 1 1 95.890285 0 47.945143 47.945143 0 0 1-95.890285 0zM514.121143 640.256a147.858286 147.858286 0 0 1-138.24-95.926857h276.48a147.858286 147.858286 0 0 1-138.24 95.926857z m0-87.917714a31.963429 31.963429 0 1 0 0 63.926857 31.963429 31.963429 0 0 0 0-63.926857z" horiz-adv-x="1060" />
|
||||
|
||||
|
||||
<glyph glyph-name="overview-module" unicode="" d="M1004.507429 152.90514299999995l-448.146286-268.909714a89.124571 89.124571 0 0 0-44.8-11.154286c-16.201143 0-32.438857 3.730286-44.836572 11.154286L18.541714 152.90514299999995c-24.722286 14.848-24.722286 38.948571 0 53.76l76.032 45.568 345.782857-207.506286c19.894857-11.812571 45.092571-18.358857 71.204572-18.358857 26.038857 0 51.236571 6.546286 71.131428 18.358857l345.819429 207.506286 75.995429-45.568c24.758857-14.848 24.758857-38.912 0-53.76zM1004.507429 357.59542899999997l-448.146286-268.982858a89.124571 89.124571 0 0 0-44.8-11.154285c-16.201143 0-32.438857 3.766857-44.836572 11.154285L18.541714 357.59542899999997c-24.722286 14.811429-24.722286 38.948571 0 53.76l76.032 45.604571 345.782857-207.506286c19.894857-11.922286 45.092571-18.432 71.204572-18.432 26.038857 0 51.236571 6.509714 71.131428 18.432l345.856 207.506286 75.995429-45.641143c24.722286-14.811429 24.722286-38.948571-0.036571-53.76zM1004.507429 562.212571l-448.146286-268.982857a89.124571 89.124571 0 0 0-44.8-11.154285c-16.201143 0-32.438857 3.766857-44.836572 11.154285L18.541714 562.212571c-24.722286 14.774857-24.722286 38.948571 0 53.76L466.724571 884.845714C479.085714 892.342857 495.36 896 511.561143 896c16.128 0 32.402286-3.657143 44.8-11.117714l448.146286-268.946286c24.758857-14.848 24.758857-38.948571 0-53.76z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-down" unicode="" d="M532.27749995 72.77658226999995L736.50089476 379.11167386c8.69035701 15.20812491 0 34.76142863-17.38071463 34.76142927l-95.5939295 0L623.52625063 674.58381937c0 13.03553581-8.69035701 21.72589282-21.7258928 21.7258928l-173.80714439 0c-13.03553581 0-21.72589282-8.69035701-21.72589281-21.72589281l-1e-8-260.71071625-95.59392949 0c-17.38071462 0-28.24366073-19.55330372-17.380714-34.76142925L497.51607132 70.60399316999997c6.5177679-10.86294671 26.07107163-10.86294671 34.76142863 2.1725891z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -1604,10 +1604,12 @@ li{
|
||||
margin-right: 5px;
|
||||
}
|
||||
.red {
|
||||
background-color: #d64f40 !important;
|
||||
//background-color: #d64f40 !important;
|
||||
background-color: #ec7f66 !important;
|
||||
}
|
||||
.green {
|
||||
background-color:#50d050 !important;
|
||||
//background-color:#50d050 !important;
|
||||
background-color:#23bf9a !important;
|
||||
}
|
||||
.grey {
|
||||
background-color:lightGrey;
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
this.legend=legend.filter((item,index)=>index<this.dataSize);
|
||||
this.resize();
|
||||
},
|
||||
setSeries:function(series){
|
||||
setSeries:function(series, legend, legendData){
|
||||
if(!this.chart){
|
||||
this.chart = echarts.init(document.getElementById(this.chartId));
|
||||
}
|
||||
@@ -86,7 +86,16 @@
|
||||
|
||||
}
|
||||
if(!this.option){
|
||||
this.option=chartConfig.getOption(this.chartType);
|
||||
this.option = chartConfig.getOption(this.chartType);
|
||||
}
|
||||
if (legend && legendData) {
|
||||
legend.formatter = function(name) {
|
||||
let type = legendData.find(item => {
|
||||
return item[0] == name;
|
||||
});
|
||||
return `${name} (${type[1]}%)`;
|
||||
}
|
||||
this.$set(this.option, "legend", legend);
|
||||
}
|
||||
|
||||
if(this.chartType == 'map'){
|
||||
|
||||
@@ -15,15 +15,16 @@
|
||||
'#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
|
||||
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
|
||||
];
|
||||
let overviewBgColor = ['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
|
||||
let overviewBgColor =
|
||||
['#d64f40', '#ffdb28', '#7bfc95', '#77baf4',
|
||||
'#ac958f', '', '', '', '', '', '', '', '', '', '', ];
|
||||
/* let pieColor = ["#0c69ff","#59f747","#2eeab8","#b5ed8e",
|
||||
"#205299","#ffd6c6","#a0ffdf","#9be524",
|
||||
"#8abafc","#d181e8","#d88d50","#cce8ff",
|
||||
"#161ef9"];*/
|
||||
|
||||
let pieColor = ['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
|
||||
'#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];
|
||||
let pieColor = ["#ECCD82", "#99CEB9", "#EEA694", "#8EA8DF", "#92C9DF"];/*['#d64f40', '#e66f60', '#f68f80', '#f6afa0',
|
||||
'#ffdb28', '#ffeb38', '#fffb48', '#ffffbb'];*/
|
||||
|
||||
const commonOption={
|
||||
title:{
|
||||
@@ -185,10 +186,11 @@
|
||||
show: false,
|
||||
},
|
||||
color: pieColor,
|
||||
legend: {
|
||||
show: false,
|
||||
grid: {
|
||||
top: "top",
|
||||
left: "left"
|
||||
},
|
||||
grid: {},
|
||||
legend: {},
|
||||
series: [],
|
||||
tooltip : {}
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
.overview-content-header{
|
||||
display: flex;
|
||||
padding-top: 6px;
|
||||
padding: 8px 0 2px 0;
|
||||
}
|
||||
.overview-content-header .header-title{
|
||||
flex:13;
|
||||
@@ -23,10 +23,11 @@
|
||||
}
|
||||
.tool-container .time{
|
||||
flex: 4;
|
||||
font-size: 1.2rem !important;
|
||||
font-size: 1rem !important;
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
color: #333333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tool-container .date{
|
||||
@@ -35,9 +36,10 @@
|
||||
}
|
||||
.date .week{
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.1rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
.date .sys-date{
|
||||
color: #333333;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
@@ -47,8 +49,9 @@
|
||||
line-height: 35px;
|
||||
}
|
||||
.operation .screen-icon{
|
||||
font-size: 1.875rem !important;
|
||||
font-size: 1.35rem !important;
|
||||
cursor: pointer;
|
||||
color: #666666;
|
||||
}
|
||||
.overview-content{
|
||||
height: calc(100% - 42px);
|
||||
@@ -60,10 +63,10 @@
|
||||
align-content: flex-start;
|
||||
}
|
||||
.overview-content .content-row-box:first-of-type {
|
||||
height: 16%;
|
||||
height: 14%;
|
||||
}
|
||||
.overview-content .content-row-box:nth-of-type(2) {
|
||||
height: 45%;
|
||||
height: 46%;
|
||||
}
|
||||
.overview-content .content-row-box:nth-of-type(3) {
|
||||
height: 39%;
|
||||
@@ -83,18 +86,23 @@
|
||||
border: 1px solid #edecec;
|
||||
}
|
||||
.content-col-title {
|
||||
height: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
padding: 0 8px;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
color: #333;
|
||||
font-size: 0.875rem;
|
||||
padding: 0 0.625rem;
|
||||
background-color: #efefef;
|
||||
border-radius: 5px 5px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content-col-title .el-dropdown {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.875rem;
|
||||
color: #333;
|
||||
.el-icon-arrow-down {
|
||||
font-size: 0.75rem;
|
||||
margin: 0 1.2rem 0 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-col-title-tools {
|
||||
@@ -103,12 +111,17 @@
|
||||
}
|
||||
.content-col-title-tool {
|
||||
cursor: pointer;
|
||||
padding-left: 7px;
|
||||
border-left: 1px solid #dadada;
|
||||
margin-left: 7px;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.8rem;
|
||||
border-left: 1px solid #e7eaed;
|
||||
position: relative;
|
||||
.el-cascader {
|
||||
height: 100%;
|
||||
line-height: 1.6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
width: 0.8rem;
|
||||
.el-input__suffix i {
|
||||
color: #606266;
|
||||
}
|
||||
@@ -118,26 +131,35 @@
|
||||
.el-input {
|
||||
height: 100%;
|
||||
line-height: 1.6rem;
|
||||
padding-right: 0.2rem;
|
||||
i {
|
||||
line-height: 1.6rem;
|
||||
line-height: 2rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 100% !important;
|
||||
line-height: 1.6rem;
|
||||
background-color: #efefef;
|
||||
width: 107px;
|
||||
padding-left: 10px;
|
||||
width: 6.688rem;
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.8rem;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-input::after {
|
||||
content: "Datacenter";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #606266;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.diy-content {
|
||||
height: 2rem;
|
||||
pointer-event: none;
|
||||
color: #333;
|
||||
span, i {
|
||||
line-height: 2rem;
|
||||
}
|
||||
span {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
i {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.trend-cascader {
|
||||
@@ -191,7 +213,7 @@
|
||||
.content-col-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: calc(100% - 1.6rem);
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 0 0 6px 6px;
|
||||
@@ -201,6 +223,9 @@
|
||||
padding: 0.7rem;
|
||||
height: calc(100% - 3rem);
|
||||
}
|
||||
.content-row-box:nth-of-type(3) .content-col-box .content-col-content {
|
||||
height: calc(100% - 2rem);
|
||||
}
|
||||
.content-row-box:nth-of-type(2) .content-col-box:first-of-type .content-col-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
@@ -214,28 +239,95 @@
|
||||
font-size: 0.7rem;
|
||||
font-style: italic;
|
||||
}
|
||||
.content-col-content-icon {
|
||||
height: 3.75rem;
|
||||
width: 3.75rem;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e5eaef;
|
||||
position: relative;
|
||||
.nz-icon {
|
||||
font-size: 1.75rem !important;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.nz-icon-overview-asset {
|
||||
color: #F6B275;
|
||||
}
|
||||
.nz-icon-overview-project {
|
||||
font-size: 1.5rem !important;
|
||||
color: #80A7F4;
|
||||
}
|
||||
.nz-icon-overview-module {
|
||||
color: #7AD0BC;
|
||||
}
|
||||
.nz-icon-overview-endpoint {
|
||||
color: #969DEA;
|
||||
}
|
||||
.nz-icon-overview-alert {
|
||||
font-size: 1.25rem !important;
|
||||
color: #EE9A87;
|
||||
}
|
||||
}
|
||||
.content-num-box {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.content-alert-num {
|
||||
position: absolute;
|
||||
color: #666;
|
||||
font-size: 0.7rem;
|
||||
font-style: italic;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 0.68rem 0.5rem 0;
|
||||
}
|
||||
.content-num-box .content-col-content-title {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
.content-col-content-num {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.overview-tooltip-box {
|
||||
display: flex;
|
||||
height: 1.8rem;
|
||||
}
|
||||
.tooltip-item {
|
||||
min-width: 2.8rem;
|
||||
padding: 0 0.2rem;
|
||||
line-height: 1.8rem;
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-status {
|
||||
width: 0.625rem;
|
||||
height: 0.19rem;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
@media only screen and (min-width: 10px) and (min-height: 10px){
|
||||
.content-col-content-num {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.44rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1020px) and (min-height: 560px){
|
||||
.content-col-content-num {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.44rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1360px) and (min-height: 650px){
|
||||
.content-col-content-num {
|
||||
font-size: 2.1rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1700px) and (min-height: 800px){
|
||||
.content-col-content-num {
|
||||
font-size: 2.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.hide-div {
|
||||
|
||||
@@ -19,47 +19,64 @@
|
||||
<!--第一行-->
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
<div class="content-col-content" v-loading="assetLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-asset"></i></div>
|
||||
<div class="content-num-box">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
<div class="content-col-content" v-loading="projectLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-project"></i></div>
|
||||
<div class="content-num-box">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
<div class="content-col-content" v-loading="moduleLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-module"></i></div>
|
||||
<div class="content-num-box">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
<div class="content-col-content" v-loading="endpointLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-endpoint"></i></div>
|
||||
<div class="content-num-box">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
|
||||
<div class="content-col-content" v-loading="alertMessageLoading">
|
||||
<div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
<span>{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
|
||||
<div class="content-col-content-icon"><i class="nz-icon nz-icon-overview-alert"></i></div>
|
||||
<div class="content-num-box">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-content-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
</div>
|
||||
<div class="content-alert-num">{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,6 +88,10 @@
|
||||
<span class="content-col-title-tools">
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
|
||||
<span class="content-col-title-tool">
|
||||
<div class="diy-content">
|
||||
<span>Data center</span>
|
||||
<i class="el-input__icon el-icon-arrow-down"></i>
|
||||
</div>
|
||||
<el-cascader
|
||||
:options="trafficData"
|
||||
:props="{multiple: true}"
|
||||
@@ -303,133 +324,82 @@
|
||||
/*饼图*/
|
||||
let legendData = [];
|
||||
let typeSeriesData = [];
|
||||
//let modelSeriesData = [];
|
||||
|
||||
let vm = this;
|
||||
let assetTotalCount = function() {
|
||||
let count = 0;
|
||||
vm.assetData.typeStat.forEach(item => {
|
||||
count += item.total;
|
||||
});
|
||||
return count;
|
||||
}();
|
||||
|
||||
this.assetData.typeStat.forEach(item => {
|
||||
legendData.push(item.name);
|
||||
legendData.push([item.name, (item.total*100/assetTotalCount).toFixed(2)]);
|
||||
typeSeriesData.push({name: item.name, value: item.total, up: item.pingUp, down: item.pingDown});
|
||||
});
|
||||
/*for (let i = 0; i < 4; i++) {
|
||||
legendData.push("type" + i);
|
||||
typeSeriesData.push({name: "type" + i, value: (i+1)*10, up: (i+1)*5, down: (i+1)*5});
|
||||
}*/
|
||||
/*this.assetData.modelStat.forEach(item => {
|
||||
legendData.push(item.name);
|
||||
modelSeriesData.push({name: item.name, value: item.total});
|
||||
});*/
|
||||
let series = [{
|
||||
name: 'Type',
|
||||
data: typeSeriesData.sort((a, b) => {return a.value > b.value ? -1 : 1}),
|
||||
type: 'pie',
|
||||
radius: ["58%", "75%"],
|
||||
center: ["40%", "50%"],
|
||||
minAngle: 15,
|
||||
itemStyle: {
|
||||
borderColor: "#fff",
|
||||
borderWidth: 1,
|
||||
},
|
||||
label: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#cfcfcf",
|
||||
borderRadius: 4,
|
||||
formatter: function(param) {
|
||||
return ['{title|' + param.name + ' (' + param.percent + '%)}',
|
||||
'{hr|}',
|
||||
'{block5|}{upPic|}{block3|}{upNum|' + param.data.up + '}{block15|}{downPic|}{block3|}{downNum|' + param.data.down + '}{block15|}']
|
||||
.join("\n");
|
||||
},
|
||||
rich: {
|
||||
title: {
|
||||
align: 'center',
|
||||
color: "#333",
|
||||
height: 20*window.devicePixelRatio,
|
||||
padding: [0, 8, 0, 8]
|
||||
},
|
||||
hr: {
|
||||
width: '100%',
|
||||
borderWidth: 0.5,
|
||||
height: 0,
|
||||
borderColor: "#cfcfcf"
|
||||
},
|
||||
block3: {
|
||||
width: 3*window.devicePixelRatio,
|
||||
align: 'left'
|
||||
},
|
||||
block5: {
|
||||
width: 5*window.devicePixelRatio,
|
||||
align: 'left'
|
||||
},
|
||||
block15: {
|
||||
width: 15*window.devicePixelRatio,
|
||||
align: 'left'
|
||||
},
|
||||
upPic: {
|
||||
backgroundColor: {
|
||||
image: document.getElementById("upPic")
|
||||
},
|
||||
height: 15*window.devicePixelRatio,
|
||||
align: 'left',
|
||||
width: 15*window.devicePixelRatio,
|
||||
},
|
||||
upNum: {
|
||||
color: "#333",
|
||||
height: 20*window.devicePixelRatio,
|
||||
align: 'left',
|
||||
//width: 35*window.devicePixelRatio,
|
||||
lineHeight: 18*window.devicePixelRatio,
|
||||
},
|
||||
downPic: {
|
||||
backgroundColor: {
|
||||
image: document.getElementById("downPic")
|
||||
},
|
||||
height: 15*window.devicePixelRatio,
|
||||
align: 'left',
|
||||
width: 15*window.devicePixelRatio
|
||||
},
|
||||
downNum: {
|
||||
color: "#333",
|
||||
height: 20*window.devicePixelRatio,
|
||||
align: 'left',
|
||||
//width: 43*window.devicePixelRatio,
|
||||
lineHeight: 18*window.devicePixelRatio,
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
//left: '25%'
|
||||
}, /*{
|
||||
name: 'Model',
|
||||
radius: ['65%', '80%'],
|
||||
data: modelSeriesData,
|
||||
type: 'pie',
|
||||
left: '25%',
|
||||
label: {
|
||||
label: {show: false},
|
||||
tooltip: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.66)",
|
||||
extraCssText: "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);",
|
||||
textStyle: {color: "#333333"},
|
||||
renderMode: 'html',
|
||||
formatter: function(params) {
|
||||
if (params.name.length > 12) {
|
||||
return params.name.substring(0, 9) + "...";
|
||||
}
|
||||
return params.name;
|
||||
return `
|
||||
<div class="overview-tooltip-box">
|
||||
<div class="tooltip-item"><div class="item-status red"></div>${params.data.down}</div>
|
||||
<div class="tooltip-item"><div class="item-status green"></div>${params.data.up}</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
}*/];
|
||||
/*this.$refs.assetTypePie.modifyOption('legend','show', true);
|
||||
this.$refs.assetTypePie.modifyOption('legend','orient', "vertical");
|
||||
this.$refs.assetTypePie.modifyOption('legend','data', legendData);
|
||||
this.$refs.assetTypePie.modifyOption('legend','left', 40);
|
||||
this.$refs.assetTypePie.modifyOption('legend','top', 40);
|
||||
this.$refs.assetTypePie.modifyOption('legend','formatter', function(name) {
|
||||
if (name.length > 12) {
|
||||
return name.substring(0, 9) + "...";
|
||||
}
|
||||
return name;
|
||||
});*/
|
||||
this.$refs.assetTypePie.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
|
||||
this.$refs.assetTypePie.modifyOption("tooltip", "textStyle", {color: "#000"});
|
||||
this.$refs.assetTypePie.modifyOption("grid", "top", 30);
|
||||
this.$refs.assetTypePie.modifyOption("grid", "left", 0);
|
||||
this.$refs.assetTypePie.modifyOption("grid", "right", 30);
|
||||
this.$refs.assetTypePie.modifyOption("grid", "bottom", 8);
|
||||
this.$refs.assetTypePie.modifyOption("grid", "containLabel", true);
|
||||
this.$refs.assetTypePie.setSeries(series);
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
formatter: function(param){ // 设置圆饼图中间文字排版
|
||||
return ['{name|' + param.name + '}',
|
||||
'{percent|(' + param.percent + '%)}']
|
||||
.join("\n");
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
textAlign: 'center',
|
||||
color: "#333",
|
||||
fontSize: 19,
|
||||
padding: 10
|
||||
},
|
||||
percent: {
|
||||
textAlign: 'center',
|
||||
color: "#333",
|
||||
fontSize: 12,
|
||||
padding: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: true, //文字至于中间时，这里需为true
|
||||
},
|
||||
},
|
||||
}];
|
||||
let legend = {
|
||||
show: true,
|
||||
orient: "vertical",
|
||||
top: "30%",
|
||||
right: 25,
|
||||
icon: "circle",
|
||||
};
|
||||
this.$refs.assetTypePie.setSeries(series, legend, legendData);
|
||||
this.$refs.assetTypePie.endLoading();
|
||||
}
|
||||
})
|
||||
@@ -502,12 +472,13 @@
|
||||
}
|
||||
this.chartSeries.push(series);
|
||||
if (this.chartSeries.length == 2) {
|
||||
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
|
||||
this.$refs.chartbox.modifyOption("grid", "top", 30);
|
||||
this.$refs.chartbox.modifyOption("grid", "left", 0);
|
||||
this.$refs.chartbox.modifyOption("grid", "right", 30);
|
||||
this.$refs.chartbox.modifyOption("grid", "bottom", 8);
|
||||
this.$refs.chartbox.modifyOption("grid", "top", 40);
|
||||
this.$refs.chartbox.modifyOption("grid", "left", 10);
|
||||
this.$refs.chartbox.modifyOption("grid", "right", 40);
|
||||
this.$refs.chartbox.modifyOption("grid", "bottom", 18);
|
||||
this.$refs.chartbox.modifyOption("grid", "containLabel", true);
|
||||
this.$refs.chartbox.setSeries(this.chartSeries);
|
||||
}
|
||||
@@ -541,14 +512,14 @@
|
||||
}
|
||||
this.chartSeries.push(series);
|
||||
if (this.chartSeries.length == 2) {
|
||||
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "backgroundColor", "rgba(255, 255, 255, 0.66)");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "extraCssText", "box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.24);");
|
||||
this.$refs.chartbox.modifyOption("tooltip", "textStyle", {color: "#000"});
|
||||
this.$refs.chartbox.modifyOption("grid", "top", 30);
|
||||
this.$refs.chartbox.modifyOption("grid", "left", 0);
|
||||
this.$refs.chartbox.modifyOption("grid", "right", 30);
|
||||
this.$refs.chartbox.modifyOption("grid", "bottom", 8);
|
||||
this.$refs.chartbox.modifyOption("grid", "top", 40);
|
||||
this.$refs.chartbox.modifyOption("grid", "left", 10);
|
||||
this.$refs.chartbox.modifyOption("grid", "right", 40);
|
||||
this.$refs.chartbox.modifyOption("grid", "bottom", 18);
|
||||
this.$refs.chartbox.setSeries(this.chartSeries);
|
||||
//this.$refs.chartbox.endLoading();
|
||||
}
|
||||
}
|
||||
resolve(true);
|
||||
@@ -1362,7 +1333,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import "./overview2.scss";
|
||||
.tooltip{
|
||||
/*.tooltip{
|
||||
padding:5px;
|
||||
min-width: 500px;
|
||||
background-color: rgba(221,228,237,1);
|
||||
@@ -1384,7 +1355,7 @@
|
||||
text-align: left;
|
||||
border: 1px solid #b9b9bf;
|
||||
display: table-cell;
|
||||
padding:0px 5px ;
|
||||
padding:0 5px ;
|
||||
color: black;
|
||||
}
|
||||
.flex-box{
|
||||
@@ -1394,5 +1365,5 @@
|
||||
.column-box{
|
||||
flex-direction: column;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user