monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit bcaf97f4c06ed4d8b0bbd3ede46640be6edc5df9 2 parents aefb26b9 ddb2ea6e

Merge branch 'master-v32-lushangqing' into 'master' 

大屏页面引入所有组件



See merge request !37
Inline Side-by-side
Showing 53 changed files with 1757 additions and 60 deletions
... ... @@ -26,4 +26,12 @@
@import "../css/datacenter.css";
@import "../css/assetsOverview.css";
\ No newline at end of file
@import "../css/assetsOverview.css";
@import "../css/declare.css";
@import "../css/digital.css";
@import "../css/resourceStatistics.css";
@import "../css/cloudPlatform.css";
\ No newline at end of file
... ...
.asset-container{
/* background: url("/vue3/src/assets/images/zjdp/img-bg.png");
/*background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;*/
}
... ... @@ -7,7 +7,8 @@
position: relative;
text-align: center;
height:100%;
width: 530px;
width: 100%;
max-width: 490px;
}
.yxqk__pie {
... ... @@ -72,8 +73,10 @@
color: #347fc1;
font-size: 12px;
position: relative;
z-index: 1;
}
.yxqk .tip b {
color:#00b3fe;
font-size: 20px;
... ... @@ -102,11 +105,13 @@
.yxqk .items {
position: absolute;
top:10px;
width:530px;
/*width:530px;*/
width:100%;
}
.yxqk .items li {
width: 182px;
/*width: 182px;*/
width: 34%;
height: 38px;
background-repeat: no-repeat;
background-size: 100% 100%;
... ... @@ -155,7 +160,7 @@
left:20px;
}
.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
left:60px;
left:52px;
}
.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
right:20px;
... ... @@ -184,14 +189,13 @@
}
.yxqk .items li img {
opacity: .5;
/*opacity: .5;*/
position: absolute;
top: 8px;
left: 8px;
}
/**运行情况，悬浮提示*/
.yxqk_tips_container{
background-color: #0d046a;
opacity: .9;
position: absolute;
top: -10px;
... ... @@ -212,7 +216,7 @@
line-height:24px;
margin-top: 4px;
color: #ffffff;
padding-left:20px;
padding-left:0;
font-size: 12px;
padding-top:0rem !important;
position: relative;
... ... @@ -232,6 +236,19 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}
.yxqk .tip .tipDiv{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 268px;
background-color: #0d046a;
padding: 0 5px 5px 5px;
text-align: left;
}
.yxqk_tips_container .items .tipDiv li{
}
.yxqk_tips_container .items li .icon-HUAWEI_CLOUD_PLAT {
background-image: url('/vue3/src/assets/images/zjdp/HUAWEI_CLOUD_PLAT.png');
... ... @@ -261,7 +278,7 @@
.yxqk__pie--bad::before {
background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png');
}
.yxqk__pie span::before {
.yxqk__pie::before {
content: '';
display: block;
width: 278px;
... ...
.cloud-container{
/*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;*/
height: 100%;
}
.ypt {
position: relative;
height: 100%;
padding-top: 10px;
font-size: 0;
z-index: 10;
}
.el-carousel__container{
height:400px;
}
/**3D环绕开始*/
/*.ypt .swiper-container{
height: 160px;
}*/
.ypt .item {
background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') center no-repeat;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
max-width: 475px;
max-height: 403px;
background-size: contain;
background-position: inherit;
margin-left: 12px;
margin-right: 2px;
}
.ypt .item.active{
display: block;
-moz-transition: top 3s, left 3s;
-webkit-transition: top 3s, left 3s;
transition: top 3s, left 3s;
}
.ypt .item .u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ypt .item .ypt__info{
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
.ypt .item .ui_base {
position: relative;
left: 5px;
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 0%
}
.ypt .item .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
max-width: 260px;
max-height: 177px;
width:100%;
height:100%;
text-align: center;
background: url('/vue3/src/assets/images/zjdp/cloud-bg.png') no-repeat;
left: 57px;
top: 24px;
}
.ypt .item .ball_c.HuaWeiCloud{
/*background: url('/vue3/src/assets/images/zjdp/HuaWeiCloud.png') no-repeat;*/
}
.ypt .item .ball_c.AliCloud{
/*background: url('/vue3/src/assets/images/zjdp/AliCloud.png')) no-repeat;*/
}
.ypt .item .ball_c div{
font-size: 14px;
color: #e3e9f0;
position: relative;
top: 96px;
left:-23px;
font-weight: bolder;
/**3D旋转*/
/* -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
-o-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);*/
}
.ypt .item .ball {
width: 56px;
height: 56px;
background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
background-size: contain;
word-break: break-all;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.ypt .item .ball_base .ball{
font-size: 12px;
color: #61c5d5;
text-align: center;
line-height: 14px;
}
.ypt .item .ball_base .ball p{
font-size: 8px;
position: relative;
margin:0;
}
.ypt .item .ball_base .ball b{
top: 5px;
position: relative;
}
.ypt .item .ball_base{
position: absolute;
width: 72px;
-moz-transition: top 1.5s, left 1.5s;
-webkit-transition: top 1.5s, left 1.5s;
transition: top 1.5s, left 1.5s;
cursor: pointer;
transform: scale(1.0);
}
.ypt__info div.ball_base:nth-child(1) {
top: 17px;
left: 133px;
}
.ypt__info div.ball_base:nth-child(2) {
top: 68px;
left: 50px;
}
.ypt__info div.ball_base:nth-child(3) {
top: 68px;
left: 214px;
}
.ypt__info div.ball_base:nth-child(4) {
top: 150px;
left: 50px;
}
.ypt__info div.ball_base:nth-child(5) {
top: 150px;
left: 210px;
}
.ypt__info div.ball_base:nth-child(6) {
top: 190px;
left: 133px;
}
.ypt__info .ball_base .ball.active{
-moz-transition: top 0.3s;
-webkit-transition:top 0.3s;
transition: top 0.3s;
}
.ypt__info .ball_base .ball.active{
color:#ffffff;
transform: scale(1.4);
background: url("/vue3/src/assets/images/zjdp/cloudItem-hover.png") no-repeat;
background-size: contain;
}
/**云平台底部动画样式*/
/*
.circlediv{
position: absolute;
top: 35px;
transform: skewY(0) rotateZ(90deg) rotateX(8deg) rotateY(-79deg);
left: 35px;
}
@keyframes rollImg {
0% {
transform :rotatey(5deg);
}
100% {
transform :rotatey(1000deg);
}
}
.rollimg{
animation:20s rollImg linear infinite normal;
transform: skewX(-45deg);
}*/
... ...
.ypt {
position: relative;
height: 1.108374rem;
padding-top: .08rem;
font-size: 0;
z-index: 10;
}
/**3D环绕开始*/
.ypt .swiper-container{
height: 1.6rem;
}
.ypt .item {
background: url(../images/ypt/bg-cycle.png) 100% 100% no-repeat;
display: inline-block;
position: relative;
width: 3.0rem;
height: 1.508374rem;
background-size: contain;
margin-left: .12rem;
margin-right: .2rem;
}
.ypt .item.active{
display: block;
-moz-transition: top 3s, left 3s;
-webkit-transition: top 3s, left 3s;
transition: top 3s, left 3s;
}
.ypt .item .u_p3d {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ypt .item .ui_base {
position: relative;
left: .5rem;
width: 3.508374rem;
height: 0px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 0%;
-moz-perspective-origin: 50% 0%;
-o-perspective-origin: 50% 0%;
-ms-perspective-origin: 50% 0%;
perspective-origin: 50% 0%
}
.ypt .item .ball_c {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
width: 260px;
height: 177px;
text-align: center;
background: url(../images/ypt/cloud_bg.png) no-repeat;
left: .35rem;
top: .5rem;
}
.ypt .item .ball_c.HuaWeiCloud{
background: url(../images/ypt/HuaWeiCloud.png) no-repeat;
}
.ypt .item .ball_c.AliCloud{
background: url(../images/ypt/AliCloud.png) no-repeat;
}
.ypt .item .ball_c div{
font-size: .14rem;
color: #e3e9f0;
position: relative;
top: .14rem;
left:-.05rem;
font-weight: bolder;
/**3D旋转*/
-webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-o-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
}
.ypt .item .ball {
width: .7rem;
height: .4rem;
background: url("../images/ypt/bg-s.png") no-repeat;
background-size: contain;
}
.ypt .item .ball_base .ball{
font-size: .12rem;
color: #fff;
text-align: center;
}
.ypt .item .ball_base .ball p{
font-size: .08rem;
padding-top: .03rem;
position: relative;
}
.ypt .item .ball_base .ball b{
top: .05rem;
position: relative;
}
.ypt .item .ball_base{
position: absolute;
width: .72rem;
-moz-transition: top 1.5s, left 1.5s;
-webkit-transition: top 1.5s, left 1.5s;
transition: top 1.5s, left 1.5s;
cursor: pointer;
transform: scale(0.9);
}
.ypt__info div.ball_base:nth-child(1) {
top: .002rem;
left: .05rem;
}
.ypt__info div.ball_base:nth-child(2) {
top: .002rem;
left: 1.45rem;
}
.ypt__info div.ball_base:nth-child(3) {
top: .55rem;
left: 1.9rem;
}
.ypt__info div.ball_base:nth-child(4) {
top: 1.1rem;
left: 1.3rem;
}
.ypt__info div.ball_base:nth-child(5) {
top: 1.10rem;
left: .04rem;
}
.ypt__info div.ball_base:nth-child(6) {
top: .55rem;
left: -.55rem;
}
.ypt__info .ball_base.active{
-moz-transition: top 0.3s;
-webkit-transition:top 0.3s;
transition: top 0.3s;
}
.ypt__info .ball_base.active div{
transform: scale(1.4);
background: url("../images/ypt/bg-s-active.png") no-repeat;
background-size: contain;
}
\ No newline at end of file
... ...
.dataCenter-container{
/*background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;*/
}
.sjzx {
position: relative;
margin-top: 10px;
... ... @@ -14,11 +19,11 @@
.sjzx .item h5 {
color: #fff;
font-size: .2rem;
font-size: 11px;
text-align: center;
position:absolute;
bottom:0;
left:14px;
bottom:-13px;
left:17px;
}
.sjzx .item img {
... ...
.declare-container{
background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;
overflow: hidden;
max-width:323px;
}
.declare-total{
font-size: 16px;
color:#ffffff;
text-align: center;
/*padding: 5px;*/
display: flex;
justify-content: center;
align-items: center;
background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
background-position: center;
background-repeat: no-repeat;
margin-top:10px;
height: 53px;
}
.total-title{
margin-right: 10px;
}
.total-num{
font-size: 22px;
color:#4fc9fc;
}
.declaration-rate{
font-size:14px;
color:#d5e1f5;
display: flex;
justify-content: space-around;
}
.proportion-num{
font-size: 16px;
color:#4fc9fc;
}
.declare-today{
margin-top:20px;
}
.declare-title{
color: #fff;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 5px;
margin-bottom: 8px;
}
.declare-bg{
width: 167px;
height: 27px;
background-repeat: no-repeat;
}
.icon-proportion{
width:6px;
height:20px;
background-color: #4fc9fc;
display: inline-block;
border-radius: 3px;
margin: 0 2px;
}
.porportion-opactiy{
opacity:.5 ;
}
.declare-con{
font-size: 12px;
}
.declare-bg-today{
background-image: url("/vue3/src/assets/images/zjdp/declare-today.png");
}
.declare-bg-month{
background-image: url("/vue3/src/assets/images/zjdp/declare-month.png");
}
.volume-today{
background-image: url("/vue3/src/assets/images/zjdp/volume-today.png");
}
.volume-today-container{
font-size: 14px;
color:#FFFFFF;
text-align: left;
padding:5px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.volume-proportion{
margin:0 15px;
width:130px;
height:4px;
background: linear-gradient(to right ,#FFFFFF,#97d5f4);
border-radius: 3px;
display: inline-block;
}
.volume-proportion-doc{
background: linear-gradient(to right ,#FFFFFF,#efe0a7);
}
.volume-proportion-net{
background: linear-gradient(to right ,#FFFFFF,#e5abd1);
}
.num-doc{
color:#efe0a7;
}
.num-net{
color:#e5abd1;
}
\ No newline at end of file
... ...
/*大屏电子数字字体*/
@font-face {
font-family: 'DSDIG';
src: url('../../src/assets/font/DS-DIGI.ttf');
font-display: swap;
}
.digital {
margin-right: 8px;
}
.digital .box-item {
position: relative;
font-size: 44px;
line-height: 31px;
text-align: center;
list-style: none;
color: #2D7CFF;
writing-mode: vertical-lr;
text-orientation: upright;
/*文字禁止编辑*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
/* overflow: hidden; */
}
.digital .number-item {
width: 34px;
height: 58px;
color: #FFFFFF;
font-family: DSDIG;/*/使用自定义字体*/
list-style: none;
margin-right: 10px;
background: rgba(6,27,114,.7);
border-radius:4px;
box-shadow: 0px 0px 10px #0FDAFF inset;
-moz-box-shadow: 0px 0px 10px #0FDAFF inset;
-webkit-box-shadow: 0px 0px 10px #0FDAFF inset;
border: 2px solid #0FDAFF;
/*border-image: linear-gradient(#0FDAFF,#0D278E) 1 1;*/
position: relative;
}
.digital .number-item-comma:after{
content: ",";
position: absolute;
bottom: 0;
right: -22px;
}
.digital .number-item-color{
color:#8A9CAE;
}
.digital .number-item span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
}
.digital .number-item i {
font-style: normal;
position: absolute;
top: 8px;
left: 50%;
transform: translate(-50%,0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
.number-item:last-child {
margin-right: 0;
}
\ No newline at end of file
... ...
.statistics-container{
background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;
max-width: 420px;
}
.el-carousel__item h3 {
color: #FFFFFF;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
/*background-color: #99a9bf;*/
}
.el-carousel__item:nth-child(2n + 1) {
/*background-color: #d3dce6;*/
}
.statisticsItem{
background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
background-position: top;
background-size: contain;
background-repeat: no-repeat;
height: 100%;
color: #FFFFFF;
display: flex;
justify-content: space-around;
}
.medium{
height:100%;
}
.listItem-health{
display: flex;
position: absolute;
left: 24px;
top:33px;
}
.listItem:nth-child(1) .listItem-health{
left: 12px;
}
.listItem:nth-child(3) .listItem-health{
left: 28px;
}
.listItem{
display: flex;
flex-flow: column;
justify-content: space-between;
position: relative;
flex: 1;
}
.listItem-num{
position: absolute;
top:33%;
font-size: 15px;
color:#61c5d5;
}
.listItem-icon{
position: absolute;
top:209px;
}
.listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
right: 12px;
}
.listItem:nth-child(2n) .listItem-num,.listItem:nth-child(2n) .listItem-icon{
left: 56px;
}
.listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
left: 11px;
}
.listItem-icon-name{
position: absolute;
top: 243px;
font-size: 12px;
color: #61c5d5;
}
.listItem:nth-child(1) .listItem-icon-name{
right: 2px;
}
.listItem:nth-child(2n) .listItem-icon-name{
left: 45px;
}
.listItem:nth-child(3) .listItem-icon-name{
left: 0;
}
.healthList{
display: flex;
flex-flow: column;
font-size: 12px;
font-family: "PingFang SC";
width: 32px;
}
.healthList span{
padding:0 5px;
}
.healthList span.listNum{
padding: 3px 5px;
}
.listText{
font-size: 13px;
color:#1ac045;
}
.listText2{
color:#d2bf3f;
}
.listText3{
color:#f31515;
}
.statisticsTotal{
text-align: center;
position: absolute;
bottom: 94px;
width: 100%;
font-size:15px;
color:#61c5d5;
font-family: "PingFang SC";
}
... ...
... ... @@ -5,9 +5,29 @@ body{font-size: 15px;}
}
.container-title{
color: white;
padding: 7px;
text-align: left;
}
.left-40{
width:48%;
}
.section-right{
width:52%;
}
.data-cloud{
display: flex;
}
.flex-data,.flex-cloud,.flex-declare,.flex-chart{
width:50%;
}
.declare-chart{
display: flex;
}
.screen-res-performance{
display: flex;
}
/**提示展示动画 从左到右进入*/
@-webkit-keyframes fadeInLeft {
0% {
... ... @@ -140,3 +160,7 @@ body{font-size: 15px;}
margin:12px 6px 0 6px;
border-bottom:2px solid #0C4493;
}
.lineChart,.barChart{
background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
}
\ No newline at end of file
... ...
... ... @@ -103,11 +103,21 @@ const routes = [{
{
path: '/zjdaping',
name: 'zjdaping',
// component: () => myImport('views/zjdaping/index')
component: () => myImport('views/zjdaping/index')
// component: () => myImport('views/zjdaping/components/networkTopology/index')
// component: () => myImport('views/zjdaping/components/dataCenter/index')
// component: () => myImport('views/zjdaping/components/cloudPlatform/index')
component: () => myImport('views/zjdaping/components/assetOverview/index')
// component: () => myImport('views/zjdaping/components/assetOverview/index')
// component: () => myImport('views/zjdaping/components/declare/index')
// component: () => myImport('views/zjdaping/components/lineChart/index')
// component: () => myImport('views/zjdaping/components/resourceStatistics/index')
// component: () => myImport('views/zjdaping/components/performance/index')
},
{
path:'/zjdapingchart',
name:'zjdapingchart',
component: () => myImport('views/zjdaping/components/barChart/index')
}
];
... ...
... ... @@ -12,8 +12,8 @@
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<ul class="items" id="yxjk_resource_type_count_tips" >
<div id="yxjk_resource_type_count_tips_tmpl">
<li v-for="(item,index) in assetOverviewData">
<div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
<li v-for="(item,index) in assetOverviewDataAll">
<i :class="'icon-'+item.code"></i>
<span >{{item.resTypeName}}：{{item.num}}台</span>
</li>
... ...
export default {
name: 'dataCenter',
name: 'assetOverview',
template: '',
components: {
// Swiper,SwiperSlide
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getResHealthSataus',
assetOverviewData:'',
assetOverviewDataAll:'',//所有的资产
pieClass:'yxqk__pie--good',
healthStatusName:'',
totalData:0,
... ... @@ -18,26 +19,22 @@ export default {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +"/datavis/getResHealthSataus",function (res) {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
const data = res.map;
//状态
if(data && data.healthStatus){
if(data.healthStatus == '2'){//问题
proxy.pieClass="yxqk__pie--worse";
// $("#all_resource_status").removeClass("yxqk__pie--good").removeClass("yxqk__pie--bad").addClass("yxqk__pie--worse");
} else if(data.healthStatus == '1'){//严重问题
proxy.pieClass="yxqk__pie--bad";
// $("#all_resource_status").removeClass("yxqk__pie--worse").removeClass("yxqk__pie--good").addClass("yxqk__pie--bad");
}else{
proxy.pieClass="yxqk__pie--good";
}
// $("#yxjk_resource_health_text").text(data.healthStatusName);
proxy.healthStatusName=data.healthStatusName;
}
//资源总量
if(data && data.total){
// $("#yxjk_total_resource").text(data.total);
proxy.totalData=data.total;
}
//分类总量
... ... @@ -50,11 +47,11 @@ export default {
// 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
$.each(data.data,function (i,v) {
const resType = v.resType;
if(resType.indexOf("HUAWEI_CLOUD") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION") >= 0 ) { vmware += v.num; }
if(resType.indexOf('HOST_MINICOMPUTER_') >= 0 ) { minicomputer_partition += v.num; }
if(resType.indexOf('STORAGE') >= 0) { storage += v.num; }
if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
if(resType.indexOf('HOST_MINICOMPUTER_PARTITION') >= 0 ) { minicomputer_partition += v.num; }
if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
});
showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
... ... @@ -64,18 +61,12 @@ export default {
showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
//类型统计
// var html = $("#yxjk_resource_type_count_id_tmpl").render(showData.slice(0,4));
// $("#yxjk_resource_type_count_id").html(html);
proxy.assetOverviewData=showData;
proxy.assetOverviewDataAll=data.data;
//悬浮提示
// var html = $("#yxjk_resource_type_count_tips_tmpl").render(showData);
// $("#yxjk_resource_type_count_tips").html(html);
/* $(".yxqk_tips_div").hover(function () {
$(".yxqk_tips_container").show();
},function () {
$(".yxqk_tips_container").hide();
});*/
}
});
... ...
<div class="barChart">
<div id="bar-echart" style="width:100%;height:225px;"></div>
</div>
\ No newline at end of file
... ...
export default {
name: 'barChart',
template: '',
components: {
},
data(){
return {
domainName:'http://192.168.0.159:8080/api-web',
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
const chartDom = document.getElementById('bar-echart');
const myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: '近30天访问量',
x:'center',
y:'7px',
textStyle:{
color:"#ffffff",
fontSize:14
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
color:'#0a1b31'//坐标线颜色
}
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
fontSize: 12
},
},
yAxis: {
type: 'value',
splitLine:{
show:false,
},
axisLine:{
show:true,//是否显示坐标线
lineStyle: {
color:'#0a1b31'//坐标线颜色
}
},
axisLabel:{
color:'#ffffff',
fontSize:12
},
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle:{
normal:{
barBorderRadius: [3,3,0,0],
color:new echarts.graphic.LinearGradient(
0,0,0,1,
[
{offset:0,color:'#3ac9fb'},
{offset:1,color:'#2a81f3'}
]
)
// color:"#ff0000"
}
}
}
]
};
option && myChart.setOption(option);
})
return{
}
}
}
\ No newline at end of file
... ...
<div class="container-title">云平台</div>
<div class="left-bottom-right-body"></div>
\ No newline at end of file
<div class="cloud-container">
<!-- 云平台-->
<div class="container-title">
<img src="/vue3/src/assets/images/zjdp/title-cloud.png" alt="">
</div>
<div class="ypt">
<el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="10000" >
<el-carousel-item v-for="(item,index) in cloudData" :key="index">
<div class="item swiper-slide" >
<div class="ui_base u_p3d">
<!--<div class="circlediv">
<img class="rollimg" src="src/assets/images/zjdp/cycle-bg-1.png">
</div>-->
<div :class="'ball_c '+ item.code"><div>{{item.name}}</div></div>
<div class="base u_p3d ypt__info">
<div v-for="(kpiItem,index) in item.kpi" :class="'ball_base u_p3d ball_'+index+1">
<div @mouseenter="addActive(index)" @mouseleave="closeActive" :class="['ball',{'active':isActive===index}]" v-if="kpiItem != ''">
<p>{{kpiItem.kpiName}}</p><b>{{kpiItem.kpiValue}}</b>
</div>
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
... ...
// import { Swiper, SwiperSlide } from 'swiper';
export default {
name: 'dataCenter',
template: '',
components: {
// Swiper,SwiperSlide
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
isActive:false,
cloudData:''
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
let yptRunTimer = null;
$.get(proxy.domainName +"/datavis/getCloudInfo",function(res){
const data = res.data;
if(data && data.length > 0){
proxy.cloudData=data;
run();
//鼠标移入停止环绕动画
$(".ypt__info .ball_base").hover(function() {
//停止平台切换
const top = $(this).position().top;
if(top < 10){
$(this).css({
'top': top+2
});
}
//停止定时轮播
clearTimeout(yptRunTimer);
$(this).addClass("active");
}, function() {
$(".swiper-slide-active div.ball_base .ball").removeClass("active");
run();//鼠标移开立即执行
});
}
});
//云平台的指标定时轮播
let i = 0;
function run() {
const yptpostion = [
{
top: '17px',//1
left: '133px'
},
{
top: '68px', // 2
left: '50px'
},
{
top: '68px', // 3
left: '214px'
},
{
top: '150px', // 4
left: '50px'
},
{
top: '150px', // 5
left: '210px'
},
{
top: '190px', // 6
left: '133px'
}
];
// const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]];
const runpostions = [[2, 4, 5, 3, 1, 0], [4, 5, 3, 1, 0, 2 ], [5, 3, 1, 0, 2, 4], [3, 1, 0, 2, 4, 5], [1, 0, 2, 4, 5, 3], [0, 2, 4, 5, 3, 1]];
const p = runpostions[i];
$.each(p,function (i,v) {
$(".el-carousel__item.is-active div.ball_base").eq(i).css(yptpostion[v]);
});
if(i>4){
i = 0;
}else{
i++;
}
yptRunTimer = setTimeout(run, 1000 * 5);
}
})
const addActive=(index)=>{
proxy.isActive=index;
}
const closeActive=()=>{
proxy.isActive='';
}
return{
addActive,
closeActive
}
}
}
... ...
... ... @@ -15,5 +15,8 @@
<li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
</ul>
</div>
<div class="sjzx-tip">
</div>
</div>
</div>
... ...
... ... @@ -4,7 +4,8 @@ export default {
components: {},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
jfdata:''
}
},
... ... @@ -13,7 +14,7 @@ export default {
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +"/datavis/getMachineRoomInfoList",function (res) {
$.get(proxy.domainName +proxy.apiUrl,function (res) {
if(res.data){
proxy.jfdata=res.data;
/* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
... ...
<div class="declare-container" id="declare">
<!--今日申报-->
<div class="declare-left">
<div class="declare-total">
<span class="total-title">本月应申报</span>
<span class="total-num">{{reportable}}</span>
</div>
<div class="declaration-rate">
<span class="rate-title">本月申报率</span>
<span class="proportion-bar">
<i :class="['icon-proportion',{'porportion-opactiy':i>opactiyNum}]" v-for="i in opactiyNumTotal"></i>
</span>
<span class="proportion-num">{{declarationRate}}</span>
</div>
<div class="declare-today">
<div class="declare-title">
<div class="declare-bg declare-bg-today"></div>
<div class="declare-con">
<span class="declare-text">本日申报未导入:</span>
<span class="declare-num">{{reportableToday}}</span>
</div>
</div>
<div class="declare-today-num">
<Digital :numm="56631" :numLen="7"></Digital>
</div>
</div>
<div class="declare-today">
<div class="declare-title">
<div class="declare-bg declare-bg-month"></div>
<div class="declare-con">
<span class="declare-text">本月未申报:</span>
<span class="declare-num">{{reportableMonth}}</span>
</div>
</div>
<div class="declare-today-num">
<Digital :numm="5640397" :numLen="7"></Digital>
</div>
</div>
<div class="declare-today">
<div class="declare-title">
<div class="declare-bg volume-today"></div>
</div>
<div class="volume-today-container">
<span class="volume-text">网络发票</span>
<span class="volume-proportion" :style="styleVolume"></span>
<span class="volume-num">{{volumeNum}}</span>
</div>
<div class="volume-today-container">
<span class="volume-text">涉税文书</span>
<span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
<span class="volume-num num-doc">{{volumeNumDoc}}</span>
</div>
<div class="volume-today-container">
<span class="volume-text">网上申报</span>
<span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
<span class="volume-num num-net">{{volumeNumNet}}</span>
</div>
</div>
</div>
<div class="declare-right">
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'declare',
template: '',
components: {
'Digital': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/digital/index')
)
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
declareData:'',
reportable:0,//本月应申报
reportableToday:0,//本日申报未导入
reportableMonth:0, //本月未申报数
declarationRate:0.94,//申报率
volumeNumDoc:0,//涉税文书业务量
volumeNumNet:0,//网上申报业务量
volumeNum:0, //业务量数
styleVolume:'',//业务量style样式
styleVolumeDoc:'',
styleVolumeNet:'',
opactiyNum:0, //不透明显示的个数
opactiyNumMath:0, //不透明显示的个数中间量
opactiyNumTotal:20//总透明数
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
proxy.reportable=proxy.numberFilter('1006105',-1);
proxy.reportableToday=proxy.numberFilter('1006506',-1);
proxy.reportableMonth=proxy.numberFilter('2848',-1);
proxy.volumeNum=proxy.numberFilter('5765404',-1);
proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);
proxy.volumeNumNet=proxy.numberFilter('698423',-1);
proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal
if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
}else{
proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
}
proxy.declarationRate=proxy.declarationRate*100+'%';
let num1=5765404;
let num2=5458044;
let num3=698423;
proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'
proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'
proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px'
})
const eleWidthNum=(num,num1,num2,num3)=>{
let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
let widthNum=Math.ceil((num*150)/maxNum)
console.log("aaa",num,widthNum)
let widthData=0;
if(widthNum!='' && widthNum!=null && widthNum!=undefined){
widthData=widthNum;
}
return widthData;
}
const numberFilter = function (val,places = 2) {
//value为传进来的数据 比如 12345.6789
//places 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
//数据校验
if (parseFloat(val).toString() == 'NaN') return '0.00'
// 将数值截取
let num = val.toString().split('.')
let zs = num[0]
let xs = num[1]
// 整数部分处理，增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
if (xs != null) {
if(places == 0){
return intPartFormat + '.' + xs
}else if(places == -1){
return intPartFormat
}else{
return intPartFormat +'.' + xs.substr(0,places)
}
} else {
return intPartFormat
}
}
return{
numberFilter,
eleWidthNum
}
}
}
... ...
<div class="declare-lineChart">
<LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart>
</div>
... ...
export default {
name: 'performance',
template: '',
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:'',
yAxisCommon:[],
ySeriesCommon:[],
chartId:'line-echart-declare'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
//一般y序列
proxy.yAxisCommon={
type: 'value',
splitLine:{
lineStyle: {
color:'#0a1b31'
}
},
axisLabel:{
color:'#ffffff',
},
}
//一般y轴数据
proxy.ySeriesCommon=[
{
name: '网络投票',
type: 'line',
smooth:true,
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
},
{
name: '涉税文书',
type: 'line',
smooth:true,
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310],
showSymbol:false,
yAxisIndex:0,
itemStyle : {
color:"#ffffff",
normal : {
color:'#efe0a7',
lineStyle:{
color:'#efe0a7'
}
}
},
},
{
name: '网上申报',
type: 'line',
smooth:true,
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:'#e5abd1',
lineStyle:{
color:'#e5abd1'
}
}
},
},
]
})
return{
}
}
}
\ No newline at end of file
... ...
<div class="digital">
<!-- 数字滚动显示-->
<div class="box-item">
<li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }"
v-for="(item,index) in orderNum"
:key="index" :style="cStyle">
<span v-if="!isNaN(item)">
<i :id="`numberItem${index}`" :ref="`numberItem${index}`" :style='iStyle'>0123456789</i>
</span>
<span class="comma" v-else>{{item}}</span>
</li>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'digital',
template: '',
components: {
},
data(){
return {
numDiff:0//补位0的个数
}
},
props:['numm','numLen'],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const {numm, numLen} = Vue.toRefs(props);
const orderNum = Vue.ref([]);
// 处理数字
// numm: 传入的数字 numLen: 默认显示几位数
let numVal=numm.value+'';
proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length);
const toOrderNum = (num) => {
num = num.toString();
if (num.length < numLen.value) {
num = '0' + num // 如未满定义的位数，添加"0"补位
toOrderNum(num) // 递归添加"0"补位
} else if (num.length === numLen.value) {
orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
} else {
// 数字超过八位显示异常
// this.$message('数字过大，显示异常')
}
}
toOrderNum(numm.value)
Vue.watch(numm, (newVal) => {
toOrderNum(newVal)
})
// 挂载完
Vue.onMounted(() => {
setTimeout(() => {
proxy.setNumberTransform()
},200)
})
const setNumberTransform=()=> {
// 结合CSS 对数字字符进行滚动,显示数量
for (let index = 0; index < proxy.orderNum.length; index++) {
const ele = proxy.$refs[`numberItem${index}`];
ele.style.transform = `translate(-50%, -${proxy.orderNum[index] * 10}%)`
}
}
return{
orderNum,
toOrderNum,
setNumberTransform
}
},
// 如果中途数据有更新，重新执行动画
watch: {
numm() {
this.setNumberTransform()
}
}
}
\ No newline at end of file
... ...
<div class="lineChart">
<!-- <div :id="chartId" style="width:100%;height:225px;"></div>-->
<div id="line-echart" style="width:100%;height:225px;"></div>
</div>
\ No newline at end of file
... ...
export default {
name: 'lineChart',
template: '',
props:['yAxisData','seriesData','chartId'],
components: {
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
yAxisData:'',//y序列的数据
seriesData:[],//y轴数据
chartId:'line-echart'
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
/*$.get(proxy.domainName,function(res){
})*/
proxy.yAxisData=props.yAxisData;
proxy.seriesData=props.seriesData;
proxy.chartId=props.chartId;
console.log('ddd',proxy.chartId)
const chartDom = document.getElementById('line-echart');
// const chartDom = document.getElementById(proxy.chartId);
console.log('d3e3',$(proxy.chartId))
const myChart = echarts.init(chartDom);
let option;
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
}
},
legend: {
data: ['网络投票', '涉税文书', '网上申报'],
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
},
yAxis: proxy.yAxisData,
series: proxy.seriesData,
itemStyle:{
showSymbol:false
}
};
option && myChart.setOption(option);
let xAxisData=proxy.getRangeData();
// console.log('111',xAxisData)
})
//获取当前月份的最后一天,当前日期
const getRangeData=()=> {
const date = new Date();
let currentMonth = date.getMonth();
const nextMonth = ++currentMonth;
const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
const oneDay = 1000 * 60 * 60 * 24;
const lastTime = new Date(nextMonthFirstDay - oneDay);
const lastDay = lastTime.getDate();
const dd = date.getDate();
let rangeData=[];
if(dd+15>lastDay){
const start=lastDay-15;
const end=lastDay;
for(let i=start;i<end;i++){
rangeData.push(i+1)
}
}else{
const start=dd;
const end=dd+15;
for(let i=start;i<end;i++){
rangeData.push(i)
}
}
return rangeData;
}
return{
getRangeData
}
}
}
\ No newline at end of file
... ...
... ... @@ -7,9 +7,11 @@ export default {
data: function () {
return {
divIdName: '#network-echart',
domainName: 'http://192.168.0.245:8180/api-web',
// domainName: 'http://192.168.0.245:8180/api-web',
domainName: sessionStorage.getItem('domainName'),
mapJsonUrl: 'public/data/zhejiang.json',
cityUrl: '/datavis/getEchartsMap',
// cityUrl: '/datavis/getEchartsMap',
cityUrl: '/api-web/bigScreen/getEchartsMap',
// 标记各地市的坐标
geoCoordMap: {
"省局": [119.453576, 30.005871],
... ... @@ -59,6 +61,8 @@ export default {
// 挂载完
Vue.onMounted(() => {
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
console.log("444",proxy.divIdName)
// 解析地图数据包
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
// 注册地图,传入数据
... ... @@ -229,6 +233,9 @@ export default {
};
// let map_chart = echarts.init(document.getElementById('network-echart'));
console.log("555",proxy.divIdName)
console.log("666",$(proxy.divIdName))
let map_chart=echarts.init($(proxy.divIdName)[0])
map_chart.setOption(optionMap);
map_chart.on('mouseout', 'geo', function (params) {
... ...
<div className="performance-container">
<div className="container-title">
<img src="/vue3/src/assets/images/zjdp/title-performance.png" alt="">
</div>
<div class="performance-lineChart">
<LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance"></LineChart>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'performance',
template: '',
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
)
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:'',
yAxisDataPerformance:[],
seriesDataPerformance:[]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
//业务性能指标y序列
proxy.yAxisDataPerformance=[
{
type: 'value',
axisLabel: {
formatter: '{value} %'//以百分比显示
},
}, {
name: '单位:万',
type: 'value',
axisLabel: {
show: true,
interval: 'right',//居中显示
},
},
]
//业务双y轴数据
proxy.seriesDataPerformance=[
{
name:'可用性',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4'
}
}
},
areaStyle: {
color:'rgba(151,213,244,0.1)'
},
},
{
name:'成功率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[120, 132, 101, 134, 90, 230, 210],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7'
}
}
},
areaStyle: {
color:'rgba(239,224,167,0.2)'
},
},
{
name:'响应率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[220, 182, 191, 234, 290, 330, 310],
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1'
}
}
},
areaStyle: {
color:'rgba(229,171,209,0.3)'
},
},
{
name:'交易量',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:[150,232,201,154,190,330,410],
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff'
}
}
},
areaStyle: {
color:'rgba(151,170,255,0.4)'
},
}
]
})
return{
}
}
}
\ No newline at end of file
... ...
<div class="statistics-container">
<div class="container-title">
<img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
</div>
<el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
<el-carousel-item v-for="item in 2" :key="item">
<!-- <h3 class="medium">{{ item }}</h3>-->
<div class="medium ">
<ul class="statisticsItem">
<li class="listItem" v-for="itemData in 3 ">
<div class="listItem-health">
<div class="healthList">
<span class="listText">优</span>
<span class="listNum">4</span>
<span class="listPercent">100%</span>
</div>
<div class="healthList">
<span class="listText listText2">良</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
</div>
<div class="healthList">
<span class="listText listText3">中</span>
<span class="listNum">0</span>
<span class="listPercent">0%</span>
</div>
</div>
<div class="listItem-num">299</div>
<div class="listItem-icon">
<i class="iconImg"><img src="/vue3/src/assets/images/zjdp/icon-sys.png" alt=""></i>
</div>
<div class="listItem-icon-name">
操作系統</i>
</div>
</li>
</ul>
<div class="statisticsTotal">资源总量</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
\ No newline at end of file
... ...
export default {
name: 'resourceStatistics',
template: '',
components: {},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
resourceStatisticsData:''
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return{
}
}
}
\ No newline at end of file
... ...
... ... @@ -10,30 +10,57 @@
</div>
</header>
<div class="screen-body">
<section class="screen-left" >
<section class="screen-left left-40" >
<div class="left-top">
<!-- 省局网络拓扑-->
<!-- <NetworkTopology :></NetworkTopology>-->
<!--省局网络拓扑-->
<NetworkTopology ></NetworkTopology>
</div>
<div class="left-bottom">
<div class="left-bottom-left">
<div class="left-bottom data-cloud">
<div class="left-bottom-left flex-data">
<div class="left-bottom-left-top">
<!-- 数据中心-->
<!--数据中心-->
<DataCenter></DataCenter>
</div>
<div class="left-bottom-left-bottom">
资产概览
<!--资产概览-->
<AssetOverview></AssetOverview>
</div>
</div>
<div class="left-bottom-right">
云平台
</div>
<div class="left-bottom-right flex-cloud">
<!--云平台-->
<CloudPlatform></CloudPlatform>
</div>
</div>
</section>
<section class="screen-right" >
<section class="screen-right section-right" >
<div class="screen-right-top declare-chart">
<div class="right-container flex-declare">
<!--今日申报-->
<Declare></Declare>
</div>
<div class="right-chart flex-chart">
<!--折线图-->
<DeclareLine></DeclareLine>
<!--柱状图-->
<BarChart></BarChart>
</div>
</div>
<div class="screen-right-bottom">
<!--导航轮播-->
<div class="screen-nav"></div>
<div class="screen-res-performance">
<div class="screen-res">
<!--系统资源统计-->
<ResourceStatistics></ResourceStatistics>
</div>
<div class="screen-performance">
<!--业务性能指标-->
<Performance></Performance>
</div>
</div>
</div>
</section>
... ...
... ... @@ -7,6 +7,30 @@ export default {
),
'DataCenter': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/dataCenter/index')
),
'AssetOverview': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/assetOverview/index')
),
/*'Digital': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/digital/index')
),*/
'CloudPlatform': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/cloudPlatform/index')
),
'ResourceStatistics': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/resourceStatistics/index')
),
'Declare': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/declare/index')
),
'DeclareLine': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/declareLine/index')
),
'BarChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/barChart/index')
),
'Performance': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/performance/index')
)
},
data() {
... ... @@ -26,10 +50,9 @@ export default {
// 挂载完
Vue.onMounted(() => {
let that = this
// 获取当前系统时间
let myDate = new Date();
that.dateTime = myDate.getFullYear() + '-' + that.timeFormat(myDate.getMonth() + 1 + '') + '-' + that.timeFormat(myDate.getDate() + '') // + ' ' + that.timeFormat(myDate.getHours() + '') + ':' + that.timeFormat(myDate.getMinutes() + '') + ':' + that.timeFormat(myDate.getSeconds() + '');
// proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + '');
})
... ...