monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit e6b6b97f406ec71e55e1e3f9a674752525db4108 1 parent f736793d

大屏引入所写组件

Inline Side-by-side
Showing 25 changed files with 637 additions and 301 deletions
@@ -7,7 +7,8 @@ @@ -7,7 +7,8 @@
7 position: relative; 7 position: relative;
8 text-align: center; 8 text-align: center;
9 height:100%; 9 height:100%;
10 - width: 530px; 10 + width: 100%;
  11 + max-width: 490px;
11 } 12 }
12 13
13 .yxqk__pie { 14 .yxqk__pie {
@@ -104,11 +105,13 @@ @@ -104,11 +105,13 @@
104 .yxqk .items { 105 .yxqk .items {
105 position: absolute; 106 position: absolute;
106 top:10px; 107 top:10px;
107 - width:530px; 108 + /*width:530px;*/
  109 + width:100%;
108 } 110 }
109 111
110 .yxqk .items li { 112 .yxqk .items li {
111 - width: 182px; 113 + /*width: 182px;*/
  114 + width: 34%;
112 height: 38px; 115 height: 38px;
113 background-repeat: no-repeat; 116 background-repeat: no-repeat;
114 background-size: 100% 100%; 117 background-size: 100% 100%;
@@ -157,7 +160,7 @@ @@ -157,7 +160,7 @@
157 left:20px; 160 left:20px;
158 } 161 }
159 .yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{ 162 .yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
160 - left:60px; 163 + left:52px;
161 } 164 }
162 .yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{ 165 .yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
163 right:20px; 166 right:20px;
  1 +.cloud-container{
  2 + /*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;*/
  4 + height: 100%;
  5 +}
1 .ypt { 6 .ypt {
2 position: relative; 7 position: relative;
3 - height: 125px; 8 + height: 100%;
4 padding-top: 10px; 9 padding-top: 10px;
5 font-size: 0; 10 font-size: 0;
6 z-index: 10; 11 z-index: 10;
7 } 12 }
  13 +.el-carousel__container{
  14 + height:400px;
  15 +}
8 /**3D环绕开始*/ 16 /**3D环绕开始*/
9 -.ypt .swiper-container{ 17 +/*.ypt .swiper-container{
10 height: 160px; 18 height: 160px;
11 -} 19 +}*/
12 .ypt .item { 20 .ypt .item {
13 - background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') 100% 100% no-repeat; 21 + background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') center no-repeat;
14 display: inline-block; 22 display: inline-block;
15 position: relative; 23 position: relative;
16 - width: 300px;  
17 - height: 150px; 24 + width: 100%;
  25 + height: 100%;
  26 + max-width: 475px;
  27 + max-height: 403px;
18 background-size: contain; 28 background-size: contain;
  29 + background-position: inherit;
19 margin-left: 12px; 30 margin-left: 12px;
20 margin-right: 2px; 31 margin-right: 2px;
21 } 32 }
@@ -32,12 +43,17 @@ @@ -32,12 +43,17 @@
32 -moz-transform-style: preserve-3d; 43 -moz-transform-style: preserve-3d;
33 transform-style: preserve-3d; 44 transform-style: preserve-3d;
34 } 45 }
35 - 46 +.ypt .item .ypt__info{
  47 + width: 100%;
  48 + height: 100%;
  49 + position: absolute;
  50 + left: 0;
  51 +}
36 .ypt .item .ui_base { 52 .ypt .item .ui_base {
37 position: relative; 53 position: relative;
38 left: 5px; 54 left: 5px;
39 - width: 35px;  
40 - height: 0px; 55 + width: 100%;
  56 + height: 100%;
41 -webkit-perspective: 1000px; 57 -webkit-perspective: 1000px;
42 -moz-perspective: 1000px; 58 -moz-perspective: 1000px;
43 -ms-perspective: 1000px; 59 -ms-perspective: 1000px;
@@ -57,12 +73,14 @@ @@ -57,12 +73,14 @@
57 -o-transform-origin: 50% 50%; 73 -o-transform-origin: 50% 50%;
58 transform-origin: 50% 50%; 74 transform-origin: 50% 50%;
59 position: absolute; 75 position: absolute;
60 - width: 260px;  
61 - height: 177px; 76 + max-width: 260px;
  77 + max-height: 177px;
  78 + width:100%;
  79 + height:100%;
62 text-align: center; 80 text-align: center;
63 background: url('/vue3/src/assets/images/zjdp/cloud-bg.png') no-repeat; 81 background: url('/vue3/src/assets/images/zjdp/cloud-bg.png') no-repeat;
64 - left: .35rem;  
65 - top: .5rem; 82 + left: 57px;
  83 + top: 24px;
66 } 84 }
67 .ypt .item .ball_c.HuaWeiCloud{ 85 .ypt .item .ball_c.HuaWeiCloud{
68 /*background: url('/vue3/src/assets/images/zjdp/HuaWeiCloud.png') no-repeat;*/ 86 /*background: url('/vue3/src/assets/images/zjdp/HuaWeiCloud.png') no-repeat;*/
@@ -74,33 +92,39 @@ @@ -74,33 +92,39 @@
74 font-size: 14px; 92 font-size: 14px;
75 color: #e3e9f0; 93 color: #e3e9f0;
76 position: relative; 94 position: relative;
77 - top: 14px;  
78 - left:-5px; 95 + top: 96px;
  96 + left:-23px;
79 font-weight: bolder; 97 font-weight: bolder;
80 /**3D旋转*/ 98 /**3D旋转*/
81 - -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px); 99 + /* -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
82 -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px); 100 -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
83 -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px); 101 -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
84 -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px); 102 -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
85 - transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px); 103 + transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);*/
86 } 104 }
87 105
88 .ypt .item .ball { 106 .ypt .item .ball {
89 - width: 70px;  
90 - height: 40px; 107 + width: 56px;
  108 + height: 56px;
91 background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat; 109 background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
92 background-size: contain; 110 background-size: contain;
  111 + word-break: break-all;
  112 + display: flex;
  113 + flex-flow: column;
  114 + justify-content: center;
  115 + align-items: center;
93 } 116 }
94 117
95 .ypt .item .ball_base .ball{ 118 .ypt .item .ball_base .ball{
96 font-size: 12px; 119 font-size: 12px;
97 - color: #fff; 120 + color: #61c5d5;
98 text-align: center; 121 text-align: center;
  122 + line-height: 14px;
99 } 123 }
100 .ypt .item .ball_base .ball p{ 124 .ypt .item .ball_base .ball p{
101 font-size: 8px; 125 font-size: 8px;
102 - padding-top: 3px;  
103 position: relative; 126 position: relative;
  127 + margin:0;
104 } 128 }
105 .ypt .item .ball_base .ball b{ 129 .ypt .item .ball_base .ball b{
106 top: 5px; 130 top: 5px;
@@ -114,40 +138,64 @@ @@ -114,40 +138,64 @@
114 -webkit-transition: top 1.5s, left 1.5s; 138 -webkit-transition: top 1.5s, left 1.5s;
115 transition: top 1.5s, left 1.5s; 139 transition: top 1.5s, left 1.5s;
116 cursor: pointer; 140 cursor: pointer;
117 - transform: scale(0.9); 141 + transform: scale(1.0);
118 } 142 }
119 .ypt__info div.ball_base:nth-child(1) { 143 .ypt__info div.ball_base:nth-child(1) {
120 - top: 2px;  
121 - left: 5px; 144 + top: 17px;
  145 + left: 133px;
122 } 146 }
123 147
124 .ypt__info div.ball_base:nth-child(2) { 148 .ypt__info div.ball_base:nth-child(2) {
125 - top: 2px;  
126 - left: 14px; 149 + top: 68px;
  150 + left: 50px;
127 } 151 }
128 .ypt__info div.ball_base:nth-child(3) { 152 .ypt__info div.ball_base:nth-child(3) {
129 - top: 55px;  
130 - left: 190px; 153 + top: 68px;
  154 + left: 214px;
131 } 155 }
132 .ypt__info div.ball_base:nth-child(4) { 156 .ypt__info div.ball_base:nth-child(4) {
133 - top: 110px;  
134 - left:130px; 157 + top: 150px;
  158 + left: 50px;
135 } 159 }
136 .ypt__info div.ball_base:nth-child(5) { 160 .ypt__info div.ball_base:nth-child(5) {
137 - top: 110px;  
138 - left: 4px; 161 + top: 150px;
  162 + left: 210px;
139 } 163 }
140 .ypt__info div.ball_base:nth-child(6) { 164 .ypt__info div.ball_base:nth-child(6) {
141 - top: 55px;  
142 - left: -55px; 165 + top: 190px;
  166 + left: 133px;
143 } 167 }
144 -.ypt__info .ball_base.active{ 168 +.ypt__info .ball_base .ball.active{
145 -moz-transition: top 0.3s; 169 -moz-transition: top 0.3s;
146 -webkit-transition:top 0.3s; 170 -webkit-transition:top 0.3s;
147 transition: top 0.3s; 171 transition: top 0.3s;
148 } 172 }
149 -.ypt__info .ball_base.active div{ 173 +.ypt__info .ball_base .ball.active{
  174 + color:#ffffff;
150 transform: scale(1.4); 175 transform: scale(1.4);
151 background: url("/vue3/src/assets/images/zjdp/cloudItem-hover.png") no-repeat; 176 background: url("/vue3/src/assets/images/zjdp/cloudItem-hover.png") no-repeat;
152 background-size: contain; 177 background-size: contain;
153 -}  
  178 +}
  179 +
  180 +/**云平台底部动画样式*/
  181 +/*
  182 +.circlediv{
  183 + position: absolute;
  184 + top: 35px;
  185 + transform: skewY(0) rotateZ(90deg) rotateX(8deg) rotateY(-79deg);
  186 + left: 35px;
  187 +}
  188 +
  189 +@keyframes rollImg {
  190 + 0% {
  191 + transform :rotatey(5deg);
  192 + }
  193 + 100% {
  194 + transform :rotatey(1000deg);
  195 + }
  196 +}
  197 +.rollimg{
  198 +
  199 + animation:20s rollImg linear infinite normal;
  200 + transform: skewX(-45deg);
  201 +}*/
  1 +.ypt {
  2 + position: relative;
  3 + height: 1.108374rem;
  4 + padding-top: .08rem;
  5 + font-size: 0;
  6 + z-index: 10;
  7 +}
  8 +/**3D环绕开始*/
  9 +.ypt .swiper-container{
  10 + height: 1.6rem;
  11 +}
  12 +.ypt .item {
  13 + background: url(../images/ypt/bg-cycle.png) 100% 100% no-repeat;
  14 + display: inline-block;
  15 + position: relative;
  16 + width: 3.0rem;
  17 + height: 1.508374rem;
  18 + background-size: contain;
  19 + margin-left: .12rem;
  20 + margin-right: .2rem;
  21 +}
  22 +.ypt .item.active{
  23 + display: block;
  24 + -moz-transition: top 3s, left 3s;
  25 + -webkit-transition: top 3s, left 3s;
  26 + transition: top 3s, left 3s;
  27 +}
  28 +.ypt .item .u_p3d {
  29 + -webkit-transform-style: preserve-3d;
  30 + -ms-transform-style: preserve-3d;
  31 + -o-transform-style: preserve-3d;
  32 + -moz-transform-style: preserve-3d;
  33 + transform-style: preserve-3d;
  34 +}
  35 +
  36 +.ypt .item .ui_base {
  37 + position: relative;
  38 + left: .5rem;
  39 + width: 3.508374rem;
  40 + height: 0px;
  41 + -webkit-perspective: 1000px;
  42 + -moz-perspective: 1000px;
  43 + -ms-perspective: 1000px;
  44 + -o-perspective: 1000px;
  45 + perspective: 1000px;
  46 + -webkit-perspective-origin: 50% 0%;
  47 + -moz-perspective-origin: 50% 0%;
  48 + -o-perspective-origin: 50% 0%;
  49 + -ms-perspective-origin: 50% 0%;
  50 + perspective-origin: 50% 0%
  51 +}
  52 +
  53 +.ypt .item .ball_c {
  54 + -webkit-transform-origin: 50% 50%;
  55 + -moz-transform-origin: 50% 50%;
  56 + -ms-transform-origin: 50% 50%;
  57 + -o-transform-origin: 50% 50%;
  58 + transform-origin: 50% 50%;
  59 + position: absolute;
  60 + width: 260px;
  61 + height: 177px;
  62 + text-align: center;
  63 + background: url(../images/ypt/cloud_bg.png) no-repeat;
  64 + left: .35rem;
  65 + top: .5rem;
  66 +}
  67 +.ypt .item .ball_c.HuaWeiCloud{
  68 + background: url(../images/ypt/HuaWeiCloud.png) no-repeat;
  69 +}
  70 +.ypt .item .ball_c.AliCloud{
  71 + background: url(../images/ypt/AliCloud.png) no-repeat;
  72 +}
  73 +.ypt .item .ball_c div{
  74 + font-size: .14rem;
  75 + color: #e3e9f0;
  76 + position: relative;
  77 + top: .14rem;
  78 + left:-.05rem;
  79 + font-weight: bolder;
  80 + /**3D旋转*/
  81 + -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
  82 + -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
  83 + -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
  84 + -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
  85 + transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
  86 +}
  87 +
  88 +.ypt .item .ball {
  89 + width: .7rem;
  90 + height: .4rem;
  91 + background: url("../images/ypt/bg-s.png") no-repeat;
  92 + background-size: contain;
  93 +}
  94 +
  95 +.ypt .item .ball_base .ball{
  96 + font-size: .12rem;
  97 + color: #fff;
  98 + text-align: center;
  99 +}
  100 +.ypt .item .ball_base .ball p{
  101 + font-size: .08rem;
  102 + padding-top: .03rem;
  103 + position: relative;
  104 +}
  105 +.ypt .item .ball_base .ball b{
  106 + top: .05rem;
  107 + position: relative;
  108 +}
  109 +
  110 +.ypt .item .ball_base{
  111 + position: absolute;
  112 + width: .72rem;
  113 + -moz-transition: top 1.5s, left 1.5s;
  114 + -webkit-transition: top 1.5s, left 1.5s;
  115 + transition: top 1.5s, left 1.5s;
  116 + cursor: pointer;
  117 + transform: scale(0.9);
  118 +}
  119 +.ypt__info div.ball_base:nth-child(1) {
  120 + top: .002rem;
  121 + left: .05rem;
  122 +}
  123 +
  124 +.ypt__info div.ball_base:nth-child(2) {
  125 + top: .002rem;
  126 + left: 1.45rem;
  127 +}
  128 +.ypt__info div.ball_base:nth-child(3) {
  129 + top: .55rem;
  130 + left: 1.9rem;
  131 +}
  132 +.ypt__info div.ball_base:nth-child(4) {
  133 + top: 1.1rem;
  134 + left: 1.3rem;
  135 +}
  136 +.ypt__info div.ball_base:nth-child(5) {
  137 + top: 1.10rem;
  138 + left: .04rem;
  139 +}
  140 +.ypt__info div.ball_base:nth-child(6) {
  141 + top: .55rem;
  142 + left: -.55rem;
  143 +}
  144 +.ypt__info .ball_base.active{
  145 + -moz-transition: top 0.3s;
  146 + -webkit-transition:top 0.3s;
  147 + transition: top 0.3s;
  148 +}
  149 +.ypt__info .ball_base.active div{
  150 + transform: scale(1.4);
  151 + background: url("../images/ypt/bg-s-active.png") no-repeat;
  152 + background-size: contain;
  153 +}
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 background-image: url("/vue3/src/assets/images/zjdp/declare-title.png"); 16 background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
17 background-position: center; 17 background-position: center;
18 background-repeat: no-repeat; 18 background-repeat: no-repeat;
19 - margin-top:20px; 19 + margin-top:10px;
20 height: 53px; 20 height: 53px;
21 } 21 }
22 .total-title{ 22 .total-title{
@@ -22,7 +22,8 @@ @@ -22,7 +22,8 @@
22 } 22 }
23 .statisticsItem{ 23 .statisticsItem{
24 background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png"); 24 background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
25 - background-position: center; 25 + background-position: top;
  26 + background-size: contain;
26 background-repeat: no-repeat; 27 background-repeat: no-repeat;
27 height: 100%; 28 height: 100%;
28 color: #FFFFFF; 29 color: #FFFFFF;
@@ -37,7 +38,7 @@ @@ -37,7 +38,7 @@
37 display: flex; 38 display: flex;
38 position: absolute; 39 position: absolute;
39 left: 24px; 40 left: 24px;
40 - top:4px; 41 + top:33px;
41 } 42 }
42 .listItem:nth-child(1) .listItem-health{ 43 .listItem:nth-child(1) .listItem-health{
43 left: 12px; 44 left: 12px;
@@ -62,7 +63,7 @@ @@ -62,7 +63,7 @@
62 } 63 }
63 .listItem-icon{ 64 .listItem-icon{
64 position: absolute; 65 position: absolute;
65 - bottom: 96px; 66 + top:209px;
66 } 67 }
67 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{ 68 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
68 right: 12px; 69 right: 12px;
@@ -75,7 +76,7 @@ @@ -75,7 +76,7 @@
75 } 76 }
76 .listItem-icon-name{ 77 .listItem-icon-name{
77 position: absolute; 78 position: absolute;
78 - bottom: 66px; 79 + top: 243px;
79 font-size: 12px; 80 font-size: 12px;
80 color: #61c5d5; 81 color: #61c5d5;
81 } 82 }
@@ -114,7 +115,7 @@ @@ -114,7 +115,7 @@
114 .statisticsTotal{ 115 .statisticsTotal{
115 text-align: center; 116 text-align: center;
116 position: absolute; 117 position: absolute;
117 - bottom: 24px; 118 + bottom: 94px;
118 width: 100%; 119 width: 100%;
119 font-size:15px; 120 font-size:15px;
120 color:#61c5d5; 121 color:#61c5d5;
@@ -5,9 +5,29 @@ body{font-size: 15px;} @@ -5,9 +5,29 @@ body{font-size: 15px;}
5 } 5 }
6 .container-title{ 6 .container-title{
7 color: white; 7 color: white;
8 - padding: 7px;  
9 text-align: left; 8 text-align: left;
10 } 9 }
  10 +.left-40{
  11 + width:48%;
  12 +}
  13 +.section-right{
  14 + width:52%;
  15 +}
  16 +.data-cloud{
  17 + display: flex;
  18 +
  19 +}
  20 +.flex-data,.flex-cloud,.flex-declare,.flex-chart{
  21 + width:50%;
  22 +}
  23 +
  24 +.declare-chart{
  25 + display: flex;
  26 +
  27 +}
  28 +.screen-res-performance{
  29 + display: flex;
  30 +}
11 /**提示展示动画 从左到右进入*/ 31 /**提示展示动画 从左到右进入*/
12 @-webkit-keyframes fadeInLeft { 32 @-webkit-keyframes fadeInLeft {
13 0% { 33 0% {
@@ -103,14 +103,15 @@ const routes = [{ @@ -103,14 +103,15 @@ const routes = [{
103 { 103 {
104 path: '/zjdaping', 104 path: '/zjdaping',
105 name: 'zjdaping', 105 name: 'zjdaping',
106 - // component: () => myImport('views/zjdaping/index') 106 + component: () => myImport('views/zjdaping/index')
107 // component: () => myImport('views/zjdaping/components/networkTopology/index') 107 // component: () => myImport('views/zjdaping/components/networkTopology/index')
108 // component: () => myImport('views/zjdaping/components/dataCenter/index') 108 // component: () => myImport('views/zjdaping/components/dataCenter/index')
109 - component: () => myImport('views/zjdaping/components/cloudPlatform/index') 109 + // component: () => myImport('views/zjdaping/components/cloudPlatform/index')
110 // component: () => myImport('views/zjdaping/components/assetOverview/index') 110 // component: () => myImport('views/zjdaping/components/assetOverview/index')
111 // component: () => myImport('views/zjdaping/components/declare/index') 111 // component: () => myImport('views/zjdaping/components/declare/index')
112 // component: () => myImport('views/zjdaping/components/lineChart/index') 112 // component: () => myImport('views/zjdaping/components/lineChart/index')
113 // component: () => myImport('views/zjdaping/components/resourceStatistics/index') 113 // component: () => myImport('views/zjdaping/components/resourceStatistics/index')
  114 + // component: () => myImport('views/zjdaping/components/performance/index')
114 }, 115 },
115 { 116 {
116 path:'/zjdapingchart', 117 path:'/zjdapingchart',
1 <div class="barChart"> 1 <div class="barChart">
2 - <div id="bar-echart" style="width:100%;height:700px;"></div> 2 + <div id="bar-echart" style="width:100%;height:225px;"></div>
3 </div> 3 </div>
@@ -5,32 +5,23 @@ @@ -5,32 +5,23 @@
5 5
6 </div> 6 </div>
7 <div class="ypt"> 7 <div class="ypt">
8 - <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000"> 8 + <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="10000" >
9 <el-carousel-item v-for="(item,index) in cloudData" :key="index"> 9 <el-carousel-item v-for="(item,index) in cloudData" :key="index">
10 - <div class="swiper-container swiper-no-swiping" id="ypt_banner">  
11 - <div class="swiper-wrapper" id="ypt_cloud_kpis_id">  
12 - <div id="ypt_cloud_kpis_id_Tmpl">  
13 -  
14 - <div class="item swiper-slide" >  
15 - <div class="ui_base u_p3d">  
16 - <div class="circlediv">  
17 - <img class="rollimg" src="src/assets/images/zjdp/cycle-bg.png">  
18 - </div>  
19 - <div class="ball_c {{item.code}}"><div>华为云{{item.name}}</div></div>  
20 - <div class="base u_p3d ypt__info">  
21 - <div v-for="(kpiItem,index) in item.kpi" class="ball_base u_p3d ball_{{index+1}}">  
22 - <div class="ball" v-if="kpiItem != ''">  
23 - <p>分配率{{kpiItem.kpiName}}</p><b>{{kpiItem.skpiValue}}</b>  
24 - </div>  
25 - </div>  
26 - </div> 10 + <div class="item swiper-slide" >
  11 + <div class="ui_base u_p3d">
  12 + <!--<div class="circlediv">
  13 + <img class="rollimg" src="src/assets/images/zjdp/cycle-bg-1.png">
  14 + </div>-->
  15 + <div :class="'ball_c '+ item.code"><div>{{item.name}}</div></div>
  16 + <div class="base u_p3d ypt__info">
  17 + <div v-for="(kpiItem,index) in item.kpi" :class="'ball_base u_p3d ball_'+index+1">
  18 + <div @mouseenter="addActive(index)" @mouseleave="closeActive" :class="['ball',{'active':isActive===index}]" v-if="kpiItem != ''">
  19 + <p>{{kpiItem.kpiName}}</p><b>{{kpiItem.kpiValue}}</b>
27 </div> 20 </div>
28 </div> 21 </div>
29 -  
30 </div> 22 </div>
31 </div> 23 </div>
32 -  
33 - 24 + </div>
34 </el-carousel-item> 25 </el-carousel-item>
35 </el-carousel> 26 </el-carousel>
36 27
@@ -8,6 +8,7 @@ export default { @@ -8,6 +8,7 @@ export default {
8 data(){ 8 data(){
9 return { 9 return {
10 domainName:'http://192.168.0.245:8180/api-web', 10 domainName:'http://192.168.0.245:8180/api-web',
  11 + isActive:false,
11 cloudData:'' 12 cloudData:''
12 } 13 }
13 }, 14 },
@@ -21,20 +22,11 @@ export default { @@ -21,20 +22,11 @@ export default {
21 const data = res.data; 22 const data = res.data;
22 if(data && data.length > 0){ 23 if(data && data.length > 0){
23 proxy.cloudData=data; 24 proxy.cloudData=data;
24 - // const html = $("#ypt_cloud_kpis_id_Tmpl").render(data);  
25 - // $("#ypt_cloud_kpis_id").html(html);  
26 - console.log("aaa",data)  
27 - /*let ypt_banner = new Swiper('#ypt_banner', {  
28 - autoplay: 15000,  
29 - loop: true,  
30 - direction: 'vertical'  
31 - });*/  
32 25
33 - /* run(); 26 + run();
34 //鼠标移入停止环绕动画 27 //鼠标移入停止环绕动画
35 $(".ypt__info .ball_base").hover(function() { 28 $(".ypt__info .ball_base").hover(function() {
36 //停止平台切换 29 //停止平台切换
37 - ypt_banner.stopAutoplay();  
38 const top = $(this).position().top; 30 const top = $(this).position().top;
39 if(top < 10){ 31 if(top < 10){
40 $(this).css({ 32 $(this).css({
@@ -45,46 +37,46 @@ export default { @@ -45,46 +37,46 @@ export default {
45 clearTimeout(yptRunTimer); 37 clearTimeout(yptRunTimer);
46 $(this).addClass("active"); 38 $(this).addClass("active");
47 }, function() { 39 }, function() {
48 - $(".swiper-slide-active div.ball_base").removeClass("active");  
49 - ypt_banner.startAutoplay();//开启自动切换 40 + $(".swiper-slide-active div.ball_base .ball").removeClass("active");
50 run();//鼠标移开立即执行 41 run();//鼠标移开立即执行
51 - });*/ 42 + });
52 } 43 }
53 }); 44 });
54 - /*//云平台的指标定时轮播 45 + //云平台的指标定时轮播
55 let i = 0; 46 let i = 0;
56 47
57 function run() { 48 function run() {
58 const yptpostion = [ 49 const yptpostion = [
59 { 50 {
60 - top: '.002rem', // 1  
61 - left: '.05rem' 51 + top: '17px',//1
  52 + left: '133px'
62 }, 53 },
63 { 54 {
64 - top: '.002rem', // 2  
65 - left: '1.45rem' 55 + top: '68px', // 2
  56 + left: '50px'
66 }, 57 },
67 { 58 {
68 - top: '.55rem', // 3  
69 - left: '1.9rem' 59 + top: '68px', // 3
  60 + left: '214px'
70 }, 61 },
71 { 62 {
72 - top: '1.1rem', // 4  
73 - left: '1.3rem' 63 + top: '150px', // 4
  64 + left: '50px'
74 }, 65 },
75 { 66 {
76 - top: '1.10rem', // 5  
77 - left: '.04rem' 67 + top: '150px', // 5
  68 + left: '210px'
78 }, 69 },
79 { 70 {
80 - top: '.55rem', // 6  
81 - left: '-.55rem' 71 + top: '190px', // 6
  72 + left: '133px'
82 } 73 }
83 ]; 74 ];
84 - 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]]; 75 + // 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]];
  76 + 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]];
85 const p = runpostions[i]; 77 const p = runpostions[i];
86 $.each(p,function (i,v) { 78 $.each(p,function (i,v) {
87 - $(".swiper-slide-active div.ball_base").eq(i).css(yptpostion[v]); 79 + $(".el-carousel__item.is-active div.ball_base").eq(i).css(yptpostion[v]);
88 }); 80 });
89 if(i>4){ 81 if(i>4){
90 i = 0; 82 i = 0;
@@ -92,11 +84,18 @@ export default { @@ -92,11 +84,18 @@ export default {
92 i++; 84 i++;
93 } 85 }
94 yptRunTimer = setTimeout(run, 1000 * 5); 86 yptRunTimer = setTimeout(run, 1000 * 5);
95 - }*/ 87 + }
96 88
97 }) 89 })
98 - 90 + const addActive=(index)=>{
  91 + proxy.isActive=index;
  92 + }
  93 + const closeActive=()=>{
  94 + proxy.isActive='';
  95 + }
99 return{ 96 return{
  97 + addActive,
  98 + closeActive
100 } 99 }
101 } 100 }
102 } 101 }
@@ -46,7 +46,6 @@ export default { @@ -46,7 +46,6 @@ export default {
46 proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath); 46 proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
47 47
48 } 48 }
49 - console.log(proxy.opactiyNumMath)  
50 proxy.declarationRate=proxy.declarationRate*100+'%'; 49 proxy.declarationRate=proxy.declarationRate*100+'%';
51 50
52 let num1=5765404; 51 let num1=5765404;
  1 +<div class="declare-lineChart">
  2 + <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart>
  3 +</div>
  1 +export default {
  2 + name: 'performance',
  3 + template: '',
  4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
  13 + resourceStatisticsData:'',
  14 + yAxisCommon:[],
  15 + ySeriesCommon:[],
  16 + chartId:'line-echart-declare'
  17 + }
  18 + },
  19 + setup(props, {attrs, slots, emit}) {
  20 + const {proxy} = Vue.getCurrentInstance();
  21 +
  22 +
  23 +
  24 + // 挂载完
  25 + Vue.onMounted(() => {
  26 + //一般y序列
  27 + proxy.yAxisCommon={
  28 + type: 'value',
  29 + splitLine:{
  30 + lineStyle: {
  31 + color:'#0a1b31'
  32 + }
  33 + },
  34 + axisLabel:{
  35 + color:'#ffffff',
  36 + },
  37 + }
  38 + //一般y轴数据
  39 + proxy.ySeriesCommon=[
  40 + {
  41 + name: '网络投票',
  42 + type: 'line',
  43 + smooth:true,
  44 + stack: 'Total',
  45 + data: [120, 132, 101, 134, 90, 230, 210],
  46 + yAxisIndex:0,
  47 + showSymbol:false,
  48 + itemStyle : {
  49 + normal : {
  50 + color:"#97d5f4",//tooltip里的小圆点颜色
  51 + lineStyle:{
  52 + color:'#97d5f4'
  53 + }
  54 + }
  55 + },
  56 + },
  57 + {
  58 + name: '涉税文书',
  59 + type: 'line',
  60 + smooth:true,
  61 + stack: 'Total',
  62 + data: [220, 182, 191, 234, 290, 330, 310],
  63 + showSymbol:false,
  64 + yAxisIndex:0,
  65 + itemStyle : {
  66 + color:"#ffffff",
  67 + normal : {
  68 + color:'#efe0a7',
  69 + lineStyle:{
  70 + color:'#efe0a7'
  71 + }
  72 + }
  73 + },
  74 + },
  75 + {
  76 + name: '网上申报',
  77 + type: 'line',
  78 + smooth:true,
  79 + stack: 'Total',
  80 + data: [150, 232, 201, 154, 190, 330, 410],
  81 + yAxisIndex:0,
  82 + showSymbol:false,
  83 + itemStyle : {
  84 + normal : {
  85 + color:'#e5abd1',
  86 + lineStyle:{
  87 + color:'#e5abd1'
  88 + }
  89 + }
  90 + },
  91 + },
  92 + ]
  93 + })
  94 +
  95 + return{
  96 + }
  97 + }
  98 +}
@@ -45,8 +45,6 @@ export default { @@ -45,8 +45,6 @@ export default {
45 }) 45 })
46 const setNumberTransform=()=> { 46 const setNumberTransform=()=> {
47 // 结合CSS 对数字字符进行滚动,显示数量 47 // 结合CSS 对数字字符进行滚动,显示数量
48 - console.log("test",proxy.orderNum.length)  
49 - console.log("aaa",proxy.$refs)  
50 48
51 for (let index = 0; index < proxy.orderNum.length; index++) { 49 for (let index = 0; index < proxy.orderNum.length; index++) {
52 const ele = proxy.$refs[`numberItem${index}`]; 50 const ele = proxy.$refs[`numberItem${index}`];
1 <div class="lineChart"> 1 <div class="lineChart">
2 - <div id="line-echart" style="width:100%;height:700px;"></div> 2 + <div :id="chartId" style="width:100%;height:225px;"></div>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'lineChart', 2 name: 'lineChart',
3 template: '', 3 template: '',
  4 + props:['yAxisData','seriesData','chartId'],
4 components: { 5 components: {
5 }, 6 },
6 data(){ 7 data(){
@@ -8,183 +9,11 @@ export default { @@ -8,183 +9,11 @@ export default {
8 domainName:'http://192.168.0.245:8180/api-web', 9 domainName:'http://192.168.0.245:8180/api-web',
9 yAxisData:'',//y序列的数据 10 yAxisData:'',//y序列的数据
10 seriesData:[],//y轴数据 11 seriesData:[],//y轴数据
  12 + chartId:'line-echart'
11 13
12 } 14 }
13 }, 15 },
14 setup(props, {attrs, slots, emit}) { 16 setup(props, {attrs, slots, emit}) {
15 - //业务性能指标y序列  
16 - let performanceData=[  
17 - {  
18 -  
19 - type: 'value',  
20 - axisLabel: {  
21 - formatter: '{value} %'//以百分比显示  
22 - },  
23 - }, {  
24 - name: '单位:万',  
25 - type: 'value',  
26 - axisLabel: {  
27 - show: true,  
28 - interval: 'right',//居中显示  
29 - },  
30 - },  
31 - ]  
32 - //一般y序列  
33 - let yAxisCommon={  
34 - type: 'value',  
35 - splitLine:{  
36 - lineStyle: {  
37 - color:'#0a1b31'  
38 - }  
39 - },  
40 - axisLabel:{  
41 - color:'#ffffff',  
42 - },  
43 - }  
44 -  
45 - //业务双y轴数据  
46 - let performanceYData=[  
47 - {  
48 - name:'可用性',  
49 - type: 'line',  
50 - smooth:true,  
51 - // stack: 'Total',  
52 - show:false,  
53 - data:[120, 132, 101, 134, 90, 230, 210],  
54 - yAxisIndex:1,  
55 - showSymbol:false,  
56 - itemStyle : {  
57 - normal : {  
58 - color:"#97d5f4",//tooltip里的小圆点颜色  
59 - lineStyle:{  
60 - color:'#97d5f4'  
61 - }  
62 - }  
63 - },  
64 - areaStyle: {  
65 - color:'rgba(151,213,244,0.1)'  
66 - },  
67 - },  
68 - {  
69 - name:'成功率',  
70 - type: 'line',  
71 - smooth:true,  
72 - // stack: 'Total',  
73 - show:false,  
74 - data:[120, 132, 101, 134, 90, 230, 210],  
75 - yAxisIndex:0,  
76 - showSymbol:false,  
77 - itemStyle : {  
78 - normal : {  
79 - color:"#efe0a7",//tooltip里的小圆点颜色  
80 - lineStyle:{  
81 - color:'#efe0a7'  
82 - }  
83 - }  
84 - },  
85 - areaStyle: {  
86 - color:'rgba(239,224,167,0.2)'  
87 - },  
88 - },  
89 - {  
90 - name:'响应率',  
91 - type: 'line',  
92 - smooth:true,  
93 - // stack: 'Total',  
94 - show:false,  
95 - data:[220, 182, 191, 234, 290, 330, 310],  
96 - yAxisIndex:0,  
97 - showSymbol:false,  
98 - itemStyle : {  
99 - normal : {  
100 - color:"#e5abd1",//tooltip里的小圆点颜色  
101 - lineStyle:{  
102 - color:'#e5abd1'  
103 - }  
104 - }  
105 - },  
106 - areaStyle: {  
107 - color:'rgba(229,171,209,0.3)'  
108 - },  
109 - },  
110 - {  
111 - name:'交易量',  
112 - type: 'line',  
113 - smooth:true,  
114 - // stack: 'Total',  
115 - show:false,  
116 - data:[150,232,201,154,190,330,410],  
117 - yAxisIndex:1,  
118 - showSymbol:false,  
119 - itemStyle : {  
120 - normal : {  
121 - color:"#97aaff",//tooltip里的小圆点颜色  
122 - lineStyle:{  
123 - color:'#97aaff'  
124 - }  
125 - }  
126 - },  
127 - areaStyle: {  
128 - color:'rgba(151,170,255,0.4)'  
129 - },  
130 - }  
131 - ]  
132 - //一般y轴数据  
133 - let ySeriesCommon=[  
134 - {  
135 - name: '网络投票',  
136 - type: 'line',  
137 - smooth:true,  
138 - stack: 'Total',  
139 - data: [120, 132, 101, 134, 90, 230, 210],  
140 - yAxisIndex:0,  
141 - showSymbol:false,  
142 - itemStyle : {  
143 - normal : {  
144 - color:"#97d5f4",//tooltip里的小圆点颜色  
145 - lineStyle:{  
146 - color:'#97d5f4'  
147 - }  
148 - }  
149 - },  
150 - },  
151 - {  
152 - name: '涉税文书',  
153 - type: 'line',  
154 - smooth:true,  
155 - stack: 'Total',  
156 - data: [220, 182, 191, 234, 290, 330, 310],  
157 - showSymbol:false,  
158 - yAxisIndex:0,  
159 - itemStyle : {  
160 - color:"#ffffff",  
161 - normal : {  
162 - color:'#efe0a7',  
163 - lineStyle:{  
164 - color:'#efe0a7'  
165 - }  
166 - }  
167 - },  
168 - },  
169 - {  
170 - name: '网上申报',  
171 - type: 'line',  
172 - smooth:true,  
173 - stack: 'Total',  
174 - data: [150, 232, 201, 154, 190, 330, 410],  
175 - yAxisIndex:0,  
176 - showSymbol:false,  
177 - itemStyle : {  
178 - normal : {  
179 - color:'#e5abd1',  
180 - lineStyle:{  
181 - color:'#e5abd1'  
182 - }  
183 - }  
184 - },  
185 - },  
186 - ]  
187 -  
188 const {proxy} = Vue.getCurrentInstance(); 17 const {proxy} = Vue.getCurrentInstance();
189 18
190 // 挂载完 19 // 挂载完
@@ -192,11 +21,14 @@ export default { @@ -192,11 +21,14 @@ export default {
192 /*$.get(proxy.domainName,function(res){ 21 /*$.get(proxy.domainName,function(res){
193 22
194 })*/ 23 })*/
195 - proxy.yAxisData=performanceData;  
196 - proxy.seriesData=performanceYData;  
197 -  
198 - console.log('222',proxy.yAxisData)  
199 - const chartDom = document.getElementById('line-echart'); 24 + proxy.yAxisData=props.yAxisData;
  25 + proxy.seriesData=props.seriesData;
  26 + proxy.chartId=props.chartId;
  27 + console.log('ddd',proxy.chartId)
  28 +
  29 + // const chartDom = document.getElementById('line-echart');
  30 + const chartDom = document.getElementById(proxy.chartId);
  31 + console.log('d3e3',$(proxy.chartId))
200 const myChart = echarts.init(chartDom); 32 const myChart = echarts.init(chartDom);
201 let option; 33 let option;
202 34
@@ -237,7 +69,7 @@ export default { @@ -237,7 +69,7 @@ export default {
237 xAxis: { 69 xAxis: {
238 type: 'category', 70 type: 'category',
239 boundaryGap: false, 71 boundaryGap: false,
240 - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 72 + data: ['1', '2', '3', '4', '5', '6', '7'],
241 73
242 axisLine:{ 74 axisLine:{
243 show:false,//是否显示坐标线 75 show:false,//是否显示坐标线
@@ -279,7 +111,6 @@ export default { @@ -279,7 +111,6 @@ export default {
279 const dd = date.getDate(); 111 const dd = date.getDate();
280 let rangeData=[]; 112 let rangeData=[];
281 if(dd+15>lastDay){ 113 if(dd+15>lastDay){
282 - console.log("11",dd)  
283 const start=lastDay-15; 114 const start=lastDay-15;
284 const end=lastDay; 115 const end=lastDay;
285 for(let i=start;i<end;i++){ 116 for(let i=start;i<end;i++){
@@ -289,7 +120,6 @@ export default { @@ -289,7 +120,6 @@ export default {
289 const start=dd; 120 const start=dd;
290 const end=dd+15; 121 const end=dd+15;
291 for(let i=start;i<end;i++){ 122 for(let i=start;i<end;i++){
292 - console.log("44",i)  
293 rangeData.push(i) 123 rangeData.push(i)
294 } 124 }
295 } 125 }
@@ -61,6 +61,8 @@ export default { @@ -61,6 +61,8 @@ export default {
61 // 挂载完 61 // 挂载完
62 Vue.onMounted(() => { 62 Vue.onMounted(() => {
63 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"]; 63 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
  64 + console.log("444",proxy.divIdName)
  65 +
64 // 解析地图数据包 66 // 解析地图数据包
65 $.getJSON(proxy.mapJsonUrl, function(geoJson) { 67 $.getJSON(proxy.mapJsonUrl, function(geoJson) {
66 // 注册地图,传入数据 68 // 注册地图,传入数据
@@ -231,6 +233,9 @@ export default { @@ -231,6 +233,9 @@ export default {
231 }; 233 };
232 234
233 // let map_chart = echarts.init(document.getElementById('network-echart')); 235 // let map_chart = echarts.init(document.getElementById('network-echart'));
  236 + console.log("555",proxy.divIdName)
  237 + console.log("666",$(proxy.divIdName))
  238 +
234 let map_chart=echarts.init($(proxy.divIdName)[0]) 239 let map_chart=echarts.init($(proxy.divIdName)[0])
235 map_chart.setOption(optionMap); 240 map_chart.setOption(optionMap);
236 map_chart.on('mouseout', 'geo', function (params) { 241 map_chart.on('mouseout', 'geo', function (params) {
  1 +<div className="performance-container">
  2 + <div className="container-title">
  3 + <img src="/vue3/src/assets/images/zjdp/title-performance.png" alt="">
  4 +
  5 + </div>
  6 + <div class="performance-lineChart">
  7 + <LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance"></LineChart>
  8 + </div>
  9 +</div>
  1 +export default {
  2 + name: 'performance',
  3 + template: '',
  4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
  13 + resourceStatisticsData:'',
  14 + yAxisDataPerformance:[],
  15 + seriesDataPerformance:[]
  16 + }
  17 + },
  18 + setup(props, {attrs, slots, emit}) {
  19 + const {proxy} = Vue.getCurrentInstance();
  20 +
  21 +
  22 + // 挂载完
  23 + Vue.onMounted(() => {
  24 + //业务性能指标y序列
  25 + proxy.yAxisDataPerformance=[
  26 + {
  27 +
  28 + type: 'value',
  29 + axisLabel: {
  30 + formatter: '{value} %'//以百分比显示
  31 + },
  32 + }, {
  33 + name: '单位:万',
  34 + type: 'value',
  35 + axisLabel: {
  36 + show: true,
  37 + interval: 'right',//居中显示
  38 + },
  39 + },
  40 + ]
  41 + //业务双y轴数据
  42 + proxy.seriesDataPerformance=[
  43 + {
  44 + name:'可用性',
  45 + type: 'line',
  46 + smooth:true,
  47 + // stack: 'Total',
  48 + show:false,
  49 + data:[120, 132, 101, 134, 90, 230, 210],
  50 + yAxisIndex:1,
  51 + showSymbol:false,
  52 + itemStyle : {
  53 + normal : {
  54 + color:"#97d5f4",//tooltip里的小圆点颜色
  55 + lineStyle:{
  56 + color:'#97d5f4'
  57 + }
  58 + }
  59 + },
  60 + areaStyle: {
  61 + color:'rgba(151,213,244,0.1)'
  62 + },
  63 + },
  64 + {
  65 + name:'成功率',
  66 + type: 'line',
  67 + smooth:true,
  68 + // stack: 'Total',
  69 + show:false,
  70 + data:[120, 132, 101, 134, 90, 230, 210],
  71 + yAxisIndex:0,
  72 + showSymbol:false,
  73 + itemStyle : {
  74 + normal : {
  75 + color:"#efe0a7",//tooltip里的小圆点颜色
  76 + lineStyle:{
  77 + color:'#efe0a7'
  78 + }
  79 + }
  80 + },
  81 + areaStyle: {
  82 + color:'rgba(239,224,167,0.2)'
  83 + },
  84 + },
  85 + {
  86 + name:'响应率',
  87 + type: 'line',
  88 + smooth:true,
  89 + // stack: 'Total',
  90 + show:false,
  91 + data:[220, 182, 191, 234, 290, 330, 310],
  92 + yAxisIndex:0,
  93 + showSymbol:false,
  94 + itemStyle : {
  95 + normal : {
  96 + color:"#e5abd1",//tooltip里的小圆点颜色
  97 + lineStyle:{
  98 + color:'#e5abd1'
  99 + }
  100 + }
  101 + },
  102 + areaStyle: {
  103 + color:'rgba(229,171,209,0.3)'
  104 + },
  105 + },
  106 + {
  107 + name:'交易量',
  108 + type: 'line',
  109 + smooth:true,
  110 + // stack: 'Total',
  111 + show:false,
  112 + data:[150,232,201,154,190,330,410],
  113 + yAxisIndex:1,
  114 + showSymbol:false,
  115 + itemStyle : {
  116 + normal : {
  117 + color:"#97aaff",//tooltip里的小圆点颜色
  118 + lineStyle:{
  119 + color:'#97aaff'
  120 + }
  121 + }
  122 + },
  123 + areaStyle: {
  124 + color:'rgba(151,170,255,0.4)'
  125 + },
  126 + }
  127 + ]
  128 + })
  129 +
  130 + return{
  131 + }
  132 + }
  133 +}
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt=""> 3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
4 4
5 </div> 5 </div>
6 - <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="4000"> 6 + <el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
7 <el-carousel-item v-for="item in 2" :key="item"> 7 <el-carousel-item v-for="item in 2" :key="item">
8 <!-- <h3 class="medium">{{ item }}</h3>--> 8 <!-- <h3 class="medium">{{ item }}</h3>-->
9 <div class="medium "> 9 <div class="medium ">
@@ -16,12 +16,12 @@ @@ -16,12 +16,12 @@
16 <span class="listPercent">100%</span> 16 <span class="listPercent">100%</span>
17 </div> 17 </div>
18 <div class="healthList"> 18 <div class="healthList">
19 - <span class="listText">良</span> 19 + <span class="listText listText2">良</span>
20 <span class="listNum">0</span> 20 <span class="listNum">0</span>
21 <span class="listPercent">0%</span> 21 <span class="listPercent">0%</span>
22 </div> 22 </div>
23 <div class="healthList"> 23 <div class="healthList">
24 - <span class="listText">中</span> 24 + <span class="listText listText3">中</span>
25 <span class="listNum">0</span> 25 <span class="listNum">0</span>
26 <span class="listPercent">0%</span> 26 <span class="listPercent">0%</span>
27 </div> 27 </div>
@@ -10,30 +10,57 @@ @@ -10,30 +10,57 @@
10 </div> 10 </div>
11 </header> 11 </header>
12 <div class="screen-body"> 12 <div class="screen-body">
13 - <section class="screen-left" > 13 + <section class="screen-left left-40" >
14 <div class="left-top"> 14 <div class="left-top">
15 <!--省局网络拓扑--> 15 <!--省局网络拓扑-->
16 -<!-- <NetworkTopology ></NetworkTopology>--> 16 + <NetworkTopology ></NetworkTopology>
17 </div> 17 </div>
18 - <div class="left-bottom">  
19 - <div class="left-bottom-left"> 18 + <div class="left-bottom data-cloud">
  19 + <div class="left-bottom-left flex-data">
20 <div class="left-bottom-left-top"> 20 <div class="left-bottom-left-top">
21 <!--数据中心--> 21 <!--数据中心-->
22 - <DataCenter></DataCenter> 22 +<!-- <DataCenter></DataCenter>-->
23 23
24 </div> 24 </div>
25 <div class="left-bottom-left-bottom"> 25 <div class="left-bottom-left-bottom">
26 <!--资产概览--> 26 <!--资产概览-->
27 - <AssetOverview></AssetOverview> 27 +<!-- <AssetOverview></AssetOverview>-->
28 28
29 </div> 29 </div>
30 </div> 30 </div>
31 - <div class="left-bottom-right">  
32 - 云平台  
33 - </div> 31 + <div class="left-bottom-right flex-cloud">
  32 + <!--云平台-->
  33 +<!-- <CloudPlatform></CloudPlatform>-->
  34 + </div>
34 </div> 35 </div>
35 </section> 36 </section>
36 - <section class="screen-right" > 37 + <section class="screen-right section-right" >
  38 + <div class="screen-right-top declare-chart">
  39 + <div class="right-container flex-declare">
  40 + <!--今日申报-->
  41 +<!-- <Declare></Declare>-->
  42 + </div>
  43 + <div class="right-chart flex-chart">
  44 + <!--折线图-->
  45 +<!-- <DeclareLine></DeclareLine>-->
  46 + <!--柱状图-->
  47 +<!-- <BarChart></BarChart>-->
  48 + </div>
  49 + </div>
  50 + <div class="screen-right-bottom">
  51 + <!--导航轮播-->
  52 + <div class="screen-nav"></div>
  53 + <div class="screen-res-performance">
  54 + <div class="screen-res">
  55 + <!--系统资源统计-->
  56 +<!-- <ResourceStatistics></ResourceStatistics>-->
  57 + </div>
  58 + <div class="screen-performance">
  59 + <!--业务性能指标-->
  60 +<!-- <Performance></Performance>-->
  61 + </div>
  62 + </div>
  63 + </div>
37 64
38 65
39 </section> 66 </section>
@@ -11,8 +11,26 @@ export default { @@ -11,8 +11,26 @@ export default {
11 'AssetOverview': Vue.defineAsyncComponent( 11 'AssetOverview': Vue.defineAsyncComponent(
12 () => myImport('views/zjdaping/components/assetOverview/index') 12 () => myImport('views/zjdaping/components/assetOverview/index')
13 ), 13 ),
14 - 'Digital': Vue.defineAsyncComponent( 14 + /*'Digital': Vue.defineAsyncComponent(
15 () => myImport('views/zjdaping/components/digital/index') 15 () => myImport('views/zjdaping/components/digital/index')
  16 + ),*/
  17 + 'CloudPlatform': Vue.defineAsyncComponent(
  18 + () => myImport('views/zjdaping/components/cloudPlatform/index')
  19 + ),
  20 + 'ResourceStatistics': Vue.defineAsyncComponent(
  21 + () => myImport('views/zjdaping/components/resourceStatistics/index')
  22 + ),
  23 + 'Declare': Vue.defineAsyncComponent(
  24 + () => myImport('views/zjdaping/components/declare/index')
  25 + ),
  26 + 'DeclareLine': Vue.defineAsyncComponent(
  27 + () => myImport('views/zjdaping/components/declareLine/index')
  28 + ),
  29 + 'BarChart': Vue.defineAsyncComponent(
  30 + () => myImport('views/zjdaping/components/barChart/index')
  31 + ),
  32 + 'Performance': Vue.defineAsyncComponent(
  33 + () => myImport('views/zjdaping/components/performance/index')
16 ) 34 )
17 }, 35 },
18 data() { 36 data() {