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 @@ @@ -26,4 +26,12 @@
26 26
27 @import "../css/datacenter.css"; 27 @import "../css/datacenter.css";
28 28
29 -@import "../css/assetsOverview.css";  
  29 +@import "../css/assetsOverview.css";
  30 +
  31 +@import "../css/declare.css";
  32 +
  33 +@import "../css/digital.css";
  34 +
  35 +@import "../css/resourceStatistics.css";
  36 +
  37 +@import "../css/cloudPlatform.css";
1 .asset-container{ 1 .asset-container{
2 - /* background: url("/vue3/src/assets/images/zjdp/img-bg.png"); 2 + /*background: url("/vue3/src/assets/images/zjdp/img-bg.png");
3 background-position: center; 3 background-position: center;
4 height: 100%;*/ 4 height: 100%;*/
5 } 5 }
@@ -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 {
@@ -72,8 +73,10 @@ @@ -72,8 +73,10 @@
72 color: #347fc1; 73 color: #347fc1;
73 font-size: 12px; 74 font-size: 12px;
74 position: relative; 75 position: relative;
  76 + z-index: 1;
75 } 77 }
76 78
  79 +
77 .yxqk .tip b { 80 .yxqk .tip b {
78 color:#00b3fe; 81 color:#00b3fe;
79 font-size: 20px; 82 font-size: 20px;
@@ -102,11 +105,13 @@ @@ -102,11 +105,13 @@
102 .yxqk .items { 105 .yxqk .items {
103 position: absolute; 106 position: absolute;
104 top:10px; 107 top:10px;
105 - width:530px; 108 + /*width:530px;*/
  109 + width:100%;
106 } 110 }
107 111
108 .yxqk .items li { 112 .yxqk .items li {
109 - width: 182px; 113 + /*width: 182px;*/
  114 + width: 34%;
110 height: 38px; 115 height: 38px;
111 background-repeat: no-repeat; 116 background-repeat: no-repeat;
112 background-size: 100% 100%; 117 background-size: 100% 100%;
@@ -155,7 +160,7 @@ @@ -155,7 +160,7 @@
155 left:20px; 160 left:20px;
156 } 161 }
157 .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{
158 - left:60px; 163 + left:52px;
159 } 164 }
160 .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{
161 right:20px; 166 right:20px;
@@ -184,14 +189,13 @@ @@ -184,14 +189,13 @@
184 } 189 }
185 190
186 .yxqk .items li img { 191 .yxqk .items li img {
187 - opacity: .5; 192 + /*opacity: .5;*/
188 position: absolute; 193 position: absolute;
189 top: 8px; 194 top: 8px;
190 left: 8px; 195 left: 8px;
191 } 196 }
192 /**运行情况，悬浮提示*/ 197 /**运行情况，悬浮提示*/
193 .yxqk_tips_container{ 198 .yxqk_tips_container{
194 - background-color: #0d046a;  
195 opacity: .9; 199 opacity: .9;
196 position: absolute; 200 position: absolute;
197 top: -10px; 201 top: -10px;
@@ -212,7 +216,7 @@ @@ -212,7 +216,7 @@
212 line-height:24px; 216 line-height:24px;
213 margin-top: 4px; 217 margin-top: 4px;
214 color: #ffffff; 218 color: #ffffff;
215 - padding-left:20px; 219 + padding-left:0;
216 font-size: 12px; 220 font-size: 12px;
217 padding-top:0rem !important; 221 padding-top:0rem !important;
218 position: relative; 222 position: relative;
@@ -232,6 +236,19 @@ @@ -232,6 +236,19 @@
232 background-repeat: no-repeat; 236 background-repeat: no-repeat;
233 background-size: 100% 100%; 237 background-size: 100% 100%;
234 } 238 }
  239 +.yxqk .tip .tipDiv{
  240 + display: flex;
  241 + flex-wrap: wrap;
  242 + justify-content: space-between;
  243 + width: 268px;
  244 + background-color: #0d046a;
  245 + padding: 0 5px 5px 5px;
  246 + text-align: left;
  247 +
  248 +}
  249 +.yxqk_tips_container .items .tipDiv li{
  250 +
  251 +}
235 252
236 .yxqk_tips_container .items li .icon-HUAWEI_CLOUD_PLAT { 253 .yxqk_tips_container .items li .icon-HUAWEI_CLOUD_PLAT {
237 background-image: url('/vue3/src/assets/images/zjdp/HUAWEI_CLOUD_PLAT.png'); 254 background-image: url('/vue3/src/assets/images/zjdp/HUAWEI_CLOUD_PLAT.png');
@@ -261,7 +278,7 @@ @@ -261,7 +278,7 @@
261 .yxqk__pie--bad::before { 278 .yxqk__pie--bad::before {
262 background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png'); 279 background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png');
263 } 280 }
264 -.yxqk__pie span::before { 281 +.yxqk__pie::before {
265 content: ''; 282 content: '';
266 display: block; 283 display: block;
267 width: 278px; 284 width: 278px;
  1 +.cloud-container{
  2 + /*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;*/
  4 + height: 100%;
  5 +}
  6 +.ypt {
  7 + position: relative;
  8 + height: 100%;
  9 + padding-top: 10px;
  10 + font-size: 0;
  11 + z-index: 10;
  12 +}
  13 +.el-carousel__container{
  14 + height:400px;
  15 +}
  16 +/**3D环绕开始*/
  17 +/*.ypt .swiper-container{
  18 + height: 160px;
  19 +}*/
  20 +.ypt .item {
  21 + background: url('/vue3/src/assets/images/zjdp/cycle-bg.png') center no-repeat;
  22 + display: inline-block;
  23 + position: relative;
  24 + width: 100%;
  25 + height: 100%;
  26 + max-width: 475px;
  27 + max-height: 403px;
  28 + background-size: contain;
  29 + background-position: inherit;
  30 + margin-left: 12px;
  31 + margin-right: 2px;
  32 +}
  33 +.ypt .item.active{
  34 + display: block;
  35 + -moz-transition: top 3s, left 3s;
  36 + -webkit-transition: top 3s, left 3s;
  37 + transition: top 3s, left 3s;
  38 +}
  39 +.ypt .item .u_p3d {
  40 + -webkit-transform-style: preserve-3d;
  41 + -ms-transform-style: preserve-3d;
  42 + -o-transform-style: preserve-3d;
  43 + -moz-transform-style: preserve-3d;
  44 + transform-style: preserve-3d;
  45 +}
  46 +.ypt .item .ypt__info{
  47 + width: 100%;
  48 + height: 100%;
  49 + position: absolute;
  50 + left: 0;
  51 +}
  52 +.ypt .item .ui_base {
  53 + position: relative;
  54 + left: 5px;
  55 + width: 100%;
  56 + height: 100%;
  57 + -webkit-perspective: 1000px;
  58 + -moz-perspective: 1000px;
  59 + -ms-perspective: 1000px;
  60 + -o-perspective: 1000px;
  61 + perspective: 1000px;
  62 + -webkit-perspective-origin: 50% 0%;
  63 + -moz-perspective-origin: 50% 0%;
  64 + -o-perspective-origin: 50% 0%;
  65 + -ms-perspective-origin: 50% 0%;
  66 + perspective-origin: 50% 0%
  67 +}
  68 +
  69 +.ypt .item .ball_c {
  70 + -webkit-transform-origin: 50% 50%;
  71 + -moz-transform-origin: 50% 50%;
  72 + -ms-transform-origin: 50% 50%;
  73 + -o-transform-origin: 50% 50%;
  74 + transform-origin: 50% 50%;
  75 + position: absolute;
  76 + max-width: 260px;
  77 + max-height: 177px;
  78 + width:100%;
  79 + height:100%;
  80 + text-align: center;
  81 + background: url('/vue3/src/assets/images/zjdp/cloud-bg.png') no-repeat;
  82 + left: 57px;
  83 + top: 24px;
  84 +}
  85 +.ypt .item .ball_c.HuaWeiCloud{
  86 + /*background: url('/vue3/src/assets/images/zjdp/HuaWeiCloud.png') no-repeat;*/
  87 +}
  88 +.ypt .item .ball_c.AliCloud{
  89 + /*background: url('/vue3/src/assets/images/zjdp/AliCloud.png')) no-repeat;*/
  90 +}
  91 +.ypt .item .ball_c div{
  92 + font-size: 14px;
  93 + color: #e3e9f0;
  94 + position: relative;
  95 + top: 96px;
  96 + left:-23px;
  97 + font-weight: bolder;
  98 + /**3D旋转*/
  99 + /* -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
  100 + -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
  101 + -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
  102 + -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);
  103 + transform:rotate3d(1,1,0.35,45deg) translate3d(-6px,12px,16px);*/
  104 +}
  105 +
  106 +.ypt .item .ball {
  107 + width: 56px;
  108 + height: 56px;
  109 + background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
  110 + background-size: contain;
  111 + word-break: break-all;
  112 + display: flex;
  113 + flex-flow: column;
  114 + justify-content: center;
  115 + align-items: center;
  116 +}
  117 +
  118 +.ypt .item .ball_base .ball{
  119 + font-size: 12px;
  120 + color: #61c5d5;
  121 + text-align: center;
  122 + line-height: 14px;
  123 +}
  124 +.ypt .item .ball_base .ball p{
  125 + font-size: 8px;
  126 + position: relative;
  127 + margin:0;
  128 +}
  129 +.ypt .item .ball_base .ball b{
  130 + top: 5px;
  131 + position: relative;
  132 +}
  133 +
  134 +.ypt .item .ball_base{
  135 + position: absolute;
  136 + width: 72px;
  137 + -moz-transition: top 1.5s, left 1.5s;
  138 + -webkit-transition: top 1.5s, left 1.5s;
  139 + transition: top 1.5s, left 1.5s;
  140 + cursor: pointer;
  141 + transform: scale(1.0);
  142 +}
  143 +.ypt__info div.ball_base:nth-child(1) {
  144 + top: 17px;
  145 + left: 133px;
  146 +}
  147 +
  148 +.ypt__info div.ball_base:nth-child(2) {
  149 + top: 68px;
  150 + left: 50px;
  151 +}
  152 +.ypt__info div.ball_base:nth-child(3) {
  153 + top: 68px;
  154 + left: 214px;
  155 +}
  156 +.ypt__info div.ball_base:nth-child(4) {
  157 + top: 150px;
  158 + left: 50px;
  159 +}
  160 +.ypt__info div.ball_base:nth-child(5) {
  161 + top: 150px;
  162 + left: 210px;
  163 +}
  164 +.ypt__info div.ball_base:nth-child(6) {
  165 + top: 190px;
  166 + left: 133px;
  167 +}
  168 +.ypt__info .ball_base .ball.active{
  169 + -moz-transition: top 0.3s;
  170 + -webkit-transition:top 0.3s;
  171 + transition: top 0.3s;
  172 +}
  173 +.ypt__info .ball_base .ball.active{
  174 + color:#ffffff;
  175 + transform: scale(1.4);
  176 + background: url("/vue3/src/assets/images/zjdp/cloudItem-hover.png") no-repeat;
  177 + background-size: contain;
  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 +}
  1 +.dataCenter-container{
  2 + /*background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;
  4 + height: 100%;*/
  5 +}
1 .sjzx { 6 .sjzx {
2 position: relative; 7 position: relative;
3 margin-top: 10px; 8 margin-top: 10px;
@@ -14,11 +19,11 @@ @@ -14,11 +19,11 @@
14 19
15 .sjzx .item h5 { 20 .sjzx .item h5 {
16 color: #fff; 21 color: #fff;
17 - font-size: .2rem; 22 + font-size: 11px;
18 text-align: center; 23 text-align: center;
19 position:absolute; 24 position:absolute;
20 - bottom:0;  
21 - left:14px; 25 + bottom:-13px;
  26 + left:17px;
22 } 27 }
23 28
24 .sjzx .item img { 29 .sjzx .item img {
  1 +.declare-container{
  2 + background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;
  4 + height: 100%;
  5 + overflow: hidden;
  6 + max-width:323px;
  7 +}
  8 +.declare-total{
  9 + font-size: 16px;
  10 + color:#ffffff;
  11 + text-align: center;
  12 + /*padding: 5px;*/
  13 + display: flex;
  14 + justify-content: center;
  15 + align-items: center;
  16 + background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
  17 + background-position: center;
  18 + background-repeat: no-repeat;
  19 + margin-top:10px;
  20 + height: 53px;
  21 +}
  22 +.total-title{
  23 + margin-right: 10px;
  24 +}
  25 +.total-num{
  26 + font-size: 22px;
  27 + color:#4fc9fc;
  28 +}
  29 +.declaration-rate{
  30 + font-size:14px;
  31 + color:#d5e1f5;
  32 + display: flex;
  33 + justify-content: space-around;
  34 +}
  35 +.proportion-num{
  36 + font-size: 16px;
  37 + color:#4fc9fc;
  38 +}
  39 +.declare-today{
  40 + margin-top:20px;
  41 +}
  42 +.declare-title{
  43 + color: #fff;
  44 + font-size: 14px;
  45 + display: flex;
  46 + justify-content: space-between;
  47 + align-items: flex-end;
  48 + padding: 0 5px;
  49 + margin-bottom: 8px;
  50 +}
  51 +.declare-bg{
  52 + width: 167px;
  53 + height: 27px;
  54 + background-repeat: no-repeat;
  55 +
  56 +}
  57 +.icon-proportion{
  58 + width:6px;
  59 + height:20px;
  60 + background-color: #4fc9fc;
  61 + display: inline-block;
  62 + border-radius: 3px;
  63 + margin: 0 2px;
  64 +}
  65 +.porportion-opactiy{
  66 + opacity:.5 ;
  67 +}
  68 +.declare-con{
  69 + font-size: 12px;
  70 +}
  71 +.declare-bg-today{
  72 + background-image: url("/vue3/src/assets/images/zjdp/declare-today.png");
  73 +}
  74 +.declare-bg-month{
  75 + background-image: url("/vue3/src/assets/images/zjdp/declare-month.png");
  76 +}
  77 +.volume-today{
  78 + background-image: url("/vue3/src/assets/images/zjdp/volume-today.png");
  79 +}
  80 +.volume-today-container{
  81 + font-size: 14px;
  82 + color:#FFFFFF;
  83 + text-align: left;
  84 + padding:5px;
  85 + display: flex;
  86 + justify-content: flex-start;
  87 + align-items: center;
  88 +}
  89 +.volume-proportion{
  90 + margin:0 15px;
  91 + width:130px;
  92 + height:4px;
  93 + background: linear-gradient(to right ,#FFFFFF,#97d5f4);
  94 + border-radius: 3px;
  95 + display: inline-block;
  96 +}
  97 +.volume-proportion-doc{
  98 + background: linear-gradient(to right ,#FFFFFF,#efe0a7);
  99 +}
  100 +.volume-proportion-net{
  101 + background: linear-gradient(to right ,#FFFFFF,#e5abd1);
  102 +}
  103 +.num-doc{
  104 + color:#efe0a7;
  105 +}
  106 +.num-net{
  107 + color:#e5abd1;
  108 +}
  1 +/*大屏电子数字字体*/
  2 +@font-face {
  3 + font-family: 'DSDIG';
  4 + src: url('../../src/assets/font/DS-DIGI.ttf');
  5 + font-display: swap;
  6 +}
  7 +.digital {
  8 + margin-right: 8px;
  9 +}
  10 +.digital .box-item {
  11 + position: relative;
  12 + font-size: 44px;
  13 + line-height: 31px;
  14 + text-align: center;
  15 + list-style: none;
  16 + color: #2D7CFF;
  17 + writing-mode: vertical-lr;
  18 + text-orientation: upright;
  19 + /*文字禁止编辑*/
  20 + -moz-user-select: none; /*火狐*/
  21 + -webkit-user-select: none; /*webkit浏览器*/
  22 + -ms-user-select: none; /*IE10*/
  23 + -khtml-user-select: none; /*早期浏览器*/
  24 + user-select: none;
  25 + /* overflow: hidden; */
  26 +}
  27 +.digital .number-item {
  28 + width: 34px;
  29 + height: 58px;
  30 + color: #FFFFFF;
  31 + font-family: DSDIG;/*/使用自定义字体*/
  32 + list-style: none;
  33 + margin-right: 10px;
  34 + background: rgba(6,27,114,.7);
  35 + border-radius:4px;
  36 + box-shadow: 0px 0px 10px #0FDAFF inset;
  37 + -moz-box-shadow: 0px 0px 10px #0FDAFF inset;
  38 + -webkit-box-shadow: 0px 0px 10px #0FDAFF inset;
  39 + border: 2px solid #0FDAFF;
  40 + /*border-image: linear-gradient(#0FDAFF,#0D278E) 1 1;*/
  41 + position: relative;
  42 +}
  43 +
  44 +.digital .number-item-comma:after{
  45 + content: ",";
  46 + position: absolute;
  47 + bottom: 0;
  48 + right: -22px;
  49 +}
  50 +.digital .number-item-color{
  51 + color:#8A9CAE;
  52 +}
  53 +
  54 +.digital .number-item span {
  55 + position: relative;
  56 + display: inline-block;
  57 + margin-right: 10px;
  58 + width: 100%;
  59 + height: 100%;
  60 + writing-mode: vertical-rl;
  61 + text-orientation: upright;
  62 + overflow: hidden;
  63 +}
  64 +.digital .number-item i {
  65 + font-style: normal;
  66 + position: absolute;
  67 + top: 8px;
  68 + left: 50%;
  69 + transform: translate(-50%,0);
  70 + transition: transform 1s ease-in-out;
  71 + letter-spacing: 10px;
  72 +}
  73 +.number-item:last-child {
  74 + margin-right: 0;
  75 +}
  1 +.statistics-container{
  2 + background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;
  4 + height: 100%;
  5 + max-width: 420px;
  6 +}
  7 +.el-carousel__item h3 {
  8 + color: #FFFFFF;
  9 + font-size: 14px;
  10 + opacity: 0.75;
  11 + line-height: 200px;
  12 + margin: 0;
  13 + text-align: center;
  14 +}
  15 +
  16 +.el-carousel__item:nth-child(2n) {
  17 + /*background-color: #99a9bf;*/
  18 +}
  19 +
  20 +.el-carousel__item:nth-child(2n + 1) {
  21 + /*background-color: #d3dce6;*/
  22 +}
  23 +.statisticsItem{
  24 + background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
  25 + background-position: top;
  26 + background-size: contain;
  27 + background-repeat: no-repeat;
  28 + height: 100%;
  29 + color: #FFFFFF;
  30 + display: flex;
  31 + justify-content: space-around;
  32 +
  33 +}
  34 +.medium{
  35 + height:100%;
  36 +}
  37 +.listItem-health{
  38 + display: flex;
  39 + position: absolute;
  40 + left: 24px;
  41 + top:33px;
  42 +}
  43 +.listItem:nth-child(1) .listItem-health{
  44 + left: 12px;
  45 +
  46 +}
  47 +.listItem:nth-child(3) .listItem-health{
  48 + left: 28px;
  49 +
  50 +}
  51 +.listItem{
  52 + display: flex;
  53 + flex-flow: column;
  54 + justify-content: space-between;
  55 + position: relative;
  56 + flex: 1;
  57 +}
  58 +.listItem-num{
  59 + position: absolute;
  60 + top:33%;
  61 + font-size: 15px;
  62 + color:#61c5d5;
  63 +}
  64 +.listItem-icon{
  65 + position: absolute;
  66 + top:209px;
  67 +}
  68 +.listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
  69 + right: 12px;
  70 +}
  71 +.listItem:nth-child(2n) .listItem-num,.listItem:nth-child(2n) .listItem-icon{
  72 + left: 56px;
  73 +}
  74 +.listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
  75 + left: 11px;
  76 +}
  77 +.listItem-icon-name{
  78 + position: absolute;
  79 + top: 243px;
  80 + font-size: 12px;
  81 + color: #61c5d5;
  82 +}
  83 +.listItem:nth-child(1) .listItem-icon-name{
  84 + right: 2px;
  85 +}
  86 +.listItem:nth-child(2n) .listItem-icon-name{
  87 + left: 45px;
  88 +}
  89 +.listItem:nth-child(3) .listItem-icon-name{
  90 + left: 0;
  91 +}
  92 +.healthList{
  93 + display: flex;
  94 + flex-flow: column;
  95 + font-size: 12px;
  96 + font-family: "PingFang SC";
  97 + width: 32px;
  98 +}
  99 +.healthList span{
  100 + padding:0 5px;
  101 +}
  102 +.healthList span.listNum{
  103 + padding: 3px 5px;
  104 +}
  105 +.listText{
  106 + font-size: 13px;
  107 + color:#1ac045;
  108 +}
  109 +.listText2{
  110 + color:#d2bf3f;
  111 +}
  112 +.listText3{
  113 + color:#f31515;
  114 +}
  115 +.statisticsTotal{
  116 + text-align: center;
  117 + position: absolute;
  118 + bottom: 94px;
  119 + width: 100%;
  120 + font-size:15px;
  121 + color:#61c5d5;
  122 + font-family: "PingFang SC";
  123 +}
@@ -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% {
@@ -140,3 +160,7 @@ body{font-size: 15px;} @@ -140,3 +160,7 @@ body{font-size: 15px;}
140 margin:12px 6px 0 6px; 160 margin:12px 6px 0 6px;
141 border-bottom:2px solid #0C4493; 161 border-bottom:2px solid #0C4493;
142 } 162 }
  163 +.lineChart,.barChart{
  164 + background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
  165 + background-position: center;
  166 +}
@@ -103,11 +103,21 @@ const routes = [{ @@ -103,11 +103,21 @@ 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')
  112 + // component: () => myImport('views/zjdaping/components/lineChart/index')
  113 + // component: () => myImport('views/zjdaping/components/resourceStatistics/index')
  114 + // component: () => myImport('views/zjdaping/components/performance/index')
  115 + },
  116 + {
  117 + path:'/zjdapingchart',
  118 + name:'zjdapingchart',
  119 + component: () => myImport('views/zjdaping/components/barChart/index')
  120 +
111 } 121 }
112 ]; 122 ];
113 123
@@ -12,8 +12,8 @@ @@ -12,8 +12,8 @@
12 <!--悬浮提示信息--> 12 <!--悬浮提示信息-->
13 <div class="yxqk_tips_container" v-show="isShow" > 13 <div class="yxqk_tips_container" v-show="isShow" >
14 <ul class="items" id="yxjk_resource_type_count_tips" > 14 <ul class="items" id="yxjk_resource_type_count_tips" >
15 - <div id="yxjk_resource_type_count_tips_tmpl">  
16 - <li v-for="(item,index) in assetOverviewData"> 15 + <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
  16 + <li v-for="(item,index) in assetOverviewDataAll">
17 <i :class="'icon-'+item.code"></i> 17 <i :class="'icon-'+item.code"></i>
18 <span >{{item.resTypeName}}：{{item.num}}台</span> 18 <span >{{item.resTypeName}}：{{item.num}}台</span>
19 </li> 19 </li>
1 export default { 1 export default {
2 - name: 'dataCenter', 2 + name: 'assetOverview',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 - // Swiper,SwiperSlide  
6 }, 5 },
7 data(){ 6 data(){
8 return { 7 return {
9 - domainName:'http://192.168.0.245:8180/api-web', 8 + domainName:sessionStorage.getItem('domainName'),
  9 + apiUrl:'/api-web/bigScreen/getResHealthSataus',
10 assetOverviewData:'', 10 assetOverviewData:'',
  11 + assetOverviewDataAll:'',//所有的资产
11 pieClass:'yxqk__pie--good', 12 pieClass:'yxqk__pie--good',
12 healthStatusName:'', 13 healthStatusName:'',
13 totalData:0, 14 totalData:0,
@@ -18,26 +19,22 @@ export default { @@ -18,26 +19,22 @@ export default {
18 const {proxy} = Vue.getCurrentInstance(); 19 const {proxy} = Vue.getCurrentInstance();
19 // 挂载完 20 // 挂载完
20 Vue.onMounted(() => { 21 Vue.onMounted(() => {
21 - $.get(proxy.domainName +"/datavis/getResHealthSataus",function (res) { 22 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
22 const data = res.map; 23 const data = res.map;
23 //状态 24 //状态
24 if(data && data.healthStatus){ 25 if(data && data.healthStatus){
25 if(data.healthStatus == '2'){//问题 26 if(data.healthStatus == '2'){//问题
26 proxy.pieClass="yxqk__pie--worse"; 27 proxy.pieClass="yxqk__pie--worse";
27 - // $("#all_resource_status").removeClass("yxqk__pie--good").removeClass("yxqk__pie--bad").addClass("yxqk__pie--worse");  
28 } else if(data.healthStatus == '1'){//严重问题 28 } else if(data.healthStatus == '1'){//严重问题
29 proxy.pieClass="yxqk__pie--bad"; 29 proxy.pieClass="yxqk__pie--bad";
30 - // $("#all_resource_status").removeClass("yxqk__pie--worse").removeClass("yxqk__pie--good").addClass("yxqk__pie--bad");  
31 }else{ 30 }else{
32 proxy.pieClass="yxqk__pie--good"; 31 proxy.pieClass="yxqk__pie--good";
33 32
34 } 33 }
35 - // $("#yxjk_resource_health_text").text(data.healthStatusName);  
36 proxy.healthStatusName=data.healthStatusName; 34 proxy.healthStatusName=data.healthStatusName;
37 } 35 }
38 //资源总量 36 //资源总量
39 if(data && data.total){ 37 if(data && data.total){
40 - // $("#yxjk_total_resource").text(data.total);  
41 proxy.totalData=data.total; 38 proxy.totalData=data.total;
42 } 39 }
43 //分类总量 40 //分类总量
@@ -50,11 +47,11 @@ export default { @@ -50,11 +47,11 @@ export default {
50 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死 47 // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
51 $.each(data.data,function (i,v) { 48 $.each(data.data,function (i,v) {
52 const resType = v.resType; 49 const resType = v.resType;
53 - if(resType.indexOf("HUAWEI_CLOUD") >= 0 ) { huawei += v.num; }  
54 - if(resType.indexOf("ALI_CLOUD") >= 0 ) { ali += v.num; }  
55 - if(resType.indexOf("VIRTUALIZATION") >= 0 ) { vmware += v.num; }  
56 - if(resType.indexOf('HOST_MINICOMPUTER_') >= 0 ) { minicomputer_partition += v.num; }  
57 - if(resType.indexOf('STORAGE') >= 0) { storage += v.num; } 50 + if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
  51 + if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
  52 + if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
  53 + if(resType.indexOf('HOST_MINICOMPUTER_PARTITION') >= 0 ) { minicomputer_partition += v.num; }
  54 + if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
58 if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; } 55 if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
59 }); 56 });
60 showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'}); 57 showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
@@ -64,18 +61,12 @@ export default { @@ -64,18 +61,12 @@ export default {
64 showData.push({resTypeName:"存储",num:storage,code:'STORAGE'}); 61 showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
65 showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'}); 62 showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
66 //类型统计 63 //类型统计
67 - // var html = $("#yxjk_resource_type_count_id_tmpl").render(showData.slice(0,4));  
68 - // $("#yxjk_resource_type_count_id").html(html); 64 +
69 proxy.assetOverviewData=showData; 65 proxy.assetOverviewData=showData;
  66 + proxy.assetOverviewDataAll=data.data;
70 67
71 //悬浮提示 68 //悬浮提示
72 - // var html = $("#yxjk_resource_type_count_tips_tmpl").render(showData);  
73 - // $("#yxjk_resource_type_count_tips").html(html);  
74 - /* $(".yxqk_tips_div").hover(function () {  
75 - $(".yxqk_tips_container").show();  
76 - },function () {  
77 - $(".yxqk_tips_container").hide();  
78 - });*/ 69 +
79 } 70 }
80 }); 71 });
81 72
  1 +<div class="barChart">
  2 + <div id="bar-echart" style="width:100%;height:225px;"></div>
  3 +</div>
  1 +export default {
  2 + name: 'barChart',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + domainName:'http://192.168.0.159:8080/api-web',
  9 +
  10 + }
  11 + },
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + // 挂载完
  15 + Vue.onMounted(() => {
  16 + const chartDom = document.getElementById('bar-echart');
  17 + const myChart = echarts.init(chartDom);
  18 + let option;
  19 +
  20 + option = {
  21 + title: {
  22 + text: '近30天访问量',
  23 + x:'center',
  24 + y:'7px',
  25 + textStyle:{
  26 + color:"#ffffff",
  27 + fontSize:14
  28 + }
  29 + },
  30 + xAxis: {
  31 + type: 'category',
  32 + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  33 + axisLine:{
  34 + show:true,//是否显示坐标线
  35 + lineStyle: {
  36 + color:'#0a1b31'//坐标线颜色
  37 + }
  38 + },
  39 + axisTick: {
  40 + show: false //是否显示坐标刻度
  41 + },
  42 + axisLabel:{
  43 + color:'#ffffff',
  44 + fontSize: 12
  45 + },
  46 + },
  47 + yAxis: {
  48 + type: 'value',
  49 + splitLine:{
  50 + show:false,
  51 +
  52 + },
  53 + axisLine:{
  54 + show:true,//是否显示坐标线
  55 + lineStyle: {
  56 + color:'#0a1b31'//坐标线颜色
  57 + }
  58 + },
  59 + axisLabel:{
  60 + color:'#ffffff',
  61 + fontSize:12
  62 + },
  63 + },
  64 + series: [
  65 + {
  66 + data: [120, 200, 150, 80, 70, 110, 130],
  67 + type: 'bar',
  68 + showBackground: true,
  69 + backgroundStyle: {
  70 + color: 'rgba(180, 180, 180, 0.2)'
  71 + },
  72 + itemStyle:{
  73 + normal:{
  74 + barBorderRadius: [3,3,0,0],
  75 + color:new echarts.graphic.LinearGradient(
  76 + 0,0,0,1,
  77 + [
  78 + {offset:0,color:'#3ac9fb'},
  79 + {offset:1,color:'#2a81f3'}
  80 + ]
  81 + )
  82 + // color:"#ff0000"
  83 + }
  84 + }
  85 + }
  86 + ]
  87 + };
  88 +
  89 + option && myChart.setOption(option);
  90 + })
  91 + return{
  92 +
  93 + }
  94 + }
  95 +}
1 -<div class="container-title">云平台</div>  
2 -<div class="left-bottom-right-body"></div>  
  1 +<div class="cloud-container">
  2 +<!-- 云平台-->
  3 + <div class="container-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-cloud.png" alt="">
  5 +
  6 + </div>
  7 + <div class="ypt">
  8 + <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="10000" >
  9 + <el-carousel-item v-for="(item,index) in cloudData" :key="index">
  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>
  20 + </div>
  21 + </div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 + </el-carousel-item>
  26 + </el-carousel>
  27 +
  28 + </div>
  29 +</div>
  1 +// import { Swiper, SwiperSlide } from 'swiper';
  2 +export default {
  3 + name: 'dataCenter',
  4 + template: '',
  5 + components: {
  6 + // Swiper,SwiperSlide
  7 + },
  8 + data(){
  9 + return {
  10 + domainName:'http://192.168.0.245:8180/api-web',
  11 + isActive:false,
  12 + cloudData:''
  13 + }
  14 + },
  15 + setup(props, {attrs, slots, emit}) {
  16 + const {proxy} = Vue.getCurrentInstance();
  17 +
  18 + // 挂载完
  19 + Vue.onMounted(() => {
  20 + let yptRunTimer = null;
  21 + $.get(proxy.domainName +"/datavis/getCloudInfo",function(res){
  22 + const data = res.data;
  23 + if(data && data.length > 0){
  24 + proxy.cloudData=data;
  25 +
  26 + run();
  27 + //鼠标移入停止环绕动画
  28 + $(".ypt__info .ball_base").hover(function() {
  29 + //停止平台切换
  30 + const top = $(this).position().top;
  31 + if(top < 10){
  32 + $(this).css({
  33 + 'top': top+2
  34 + });
  35 + }
  36 + //停止定时轮播
  37 + clearTimeout(yptRunTimer);
  38 + $(this).addClass("active");
  39 + }, function() {
  40 + $(".swiper-slide-active div.ball_base .ball").removeClass("active");
  41 + run();//鼠标移开立即执行
  42 + });
  43 + }
  44 + });
  45 + //云平台的指标定时轮播
  46 + let i = 0;
  47 +
  48 + function run() {
  49 + const yptpostion = [
  50 + {
  51 + top: '17px',//1
  52 + left: '133px'
  53 + },
  54 + {
  55 + top: '68px', // 2
  56 + left: '50px'
  57 + },
  58 + {
  59 + top: '68px', // 3
  60 + left: '214px'
  61 + },
  62 + {
  63 + top: '150px', // 4
  64 + left: '50px'
  65 + },
  66 + {
  67 + top: '150px', // 5
  68 + left: '210px'
  69 + },
  70 + {
  71 + top: '190px', // 6
  72 + left: '133px'
  73 + }
  74 + ];
  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]];
  77 + const p = runpostions[i];
  78 + $.each(p,function (i,v) {
  79 + $(".el-carousel__item.is-active div.ball_base").eq(i).css(yptpostion[v]);
  80 + });
  81 + if(i>4){
  82 + i = 0;
  83 + }else{
  84 + i++;
  85 + }
  86 + yptRunTimer = setTimeout(run, 1000 * 5);
  87 + }
  88 +
  89 + })
  90 + const addActive=(index)=>{
  91 + proxy.isActive=index;
  92 + }
  93 + const closeActive=()=>{
  94 + proxy.isActive='';
  95 + }
  96 + return{
  97 + addActive,
  98 + closeActive
  99 + }
  100 + }
  101 +}
  102 +
@@ -15,5 +15,8 @@ @@ -15,5 +15,8 @@
15 <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li> 15 <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
16 </ul> 16 </ul>
17 </div> 17 </div>
  18 + <div class="sjzx-tip">
  19 +
  20 + </div>
18 </div> 21 </div>
19 </div> 22 </div>
@@ -4,7 +4,8 @@ export default { @@ -4,7 +4,8 @@ export default {
4 components: {}, 4 components: {},
5 data(){ 5 data(){
6 return { 6 return {
7 - domainName:'http://192.168.0.245:8180/api-web', 7 + domainName:sessionStorage.getItem('domainName'),
  8 + apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
8 jfdata:'' 9 jfdata:''
9 } 10 }
10 }, 11 },
@@ -13,7 +14,7 @@ export default { @@ -13,7 +14,7 @@ export default {
13 14
14 // 挂载完 15 // 挂载完
15 Vue.onMounted(() => { 16 Vue.onMounted(() => {
16 - $.get(proxy.domainName +"/datavis/getMachineRoomInfoList",function (res) { 17 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
17 if(res.data){ 18 if(res.data){
18 proxy.jfdata=res.data; 19 proxy.jfdata=res.data;
19 /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data); 20 /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
  1 +<div class="declare-container" id="declare">
  2 + <!--今日申报-->
  3 + <div class="declare-left">
  4 + <div class="declare-total">
  5 + <span class="total-title">本月应申报</span>
  6 + <span class="total-num">{{reportable}}</span>
  7 + </div>
  8 + <div class="declaration-rate">
  9 + <span class="rate-title">本月申报率</span>
  10 + <span class="proportion-bar">
  11 + <i :class="['icon-proportion',{'porportion-opactiy':i>opactiyNum}]" v-for="i in opactiyNumTotal"></i>
  12 + </span>
  13 + <span class="proportion-num">{{declarationRate}}</span>
  14 + </div>
  15 + <div class="declare-today">
  16 + <div class="declare-title">
  17 + <div class="declare-bg declare-bg-today"></div>
  18 + <div class="declare-con">
  19 + <span class="declare-text">本日申报未导入:</span>
  20 + <span class="declare-num">{{reportableToday}}</span>
  21 + </div>
  22 + </div>
  23 + <div class="declare-today-num">
  24 + <Digital :numm="56631" :numLen="7"></Digital>
  25 + </div>
  26 + </div>
  27 + <div class="declare-today">
  28 + <div class="declare-title">
  29 + <div class="declare-bg declare-bg-month"></div>
  30 + <div class="declare-con">
  31 + <span class="declare-text">本月未申报:</span>
  32 + <span class="declare-num">{{reportableMonth}}</span>
  33 + </div>
  34 + </div>
  35 + <div class="declare-today-num">
  36 + <Digital :numm="5640397" :numLen="7"></Digital>
  37 + </div>
  38 + </div>
  39 + <div class="declare-today">
  40 + <div class="declare-title">
  41 + <div class="declare-bg volume-today"></div>
  42 + </div>
  43 + <div class="volume-today-container">
  44 + <span class="volume-text">网络发票</span>
  45 + <span class="volume-proportion" :style="styleVolume"></span>
  46 + <span class="volume-num">{{volumeNum}}</span>
  47 + </div>
  48 + <div class="volume-today-container">
  49 + <span class="volume-text">涉税文书</span>
  50 + <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
  51 + <span class="volume-num num-doc">{{volumeNumDoc}}</span>
  52 + </div>
  53 + <div class="volume-today-container">
  54 + <span class="volume-text">网上申报</span>
  55 + <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
  56 + <span class="volume-num num-net">{{volumeNumNet}}</span>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="declare-right">
  61 +
  62 + </div>
  63 +
  64 +</div>
  1 +export default {
  2 + name: 'declare',
  3 + template: '',
  4 + components: {
  5 + 'Digital': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/digital/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:'http://192.168.0.245:8180/api-web',
  12 + declareData:'',
  13 + reportable:0,//本月应申报
  14 + reportableToday:0,//本日申报未导入
  15 + reportableMonth:0, //本月未申报数
  16 + declarationRate:0.94,//申报率
  17 + volumeNumDoc:0,//涉税文书业务量
  18 + volumeNumNet:0,//网上申报业务量
  19 + volumeNum:0, //业务量数
  20 + styleVolume:'',//业务量style样式
  21 + styleVolumeDoc:'',
  22 + styleVolumeNet:'',
  23 + opactiyNum:0, //不透明显示的个数
  24 + opactiyNumMath:0, //不透明显示的个数中间量
  25 + opactiyNumTotal:20//总透明数
  26 + }
  27 + },
  28 + setup(props, {attrs, slots, emit}) {
  29 + const {proxy} = Vue.getCurrentInstance();
  30 + // 挂载完
  31 + Vue.onMounted(() => {
  32 + proxy.reportable=proxy.numberFilter('1006105',-1);
  33 + proxy.reportableToday=proxy.numberFilter('1006506',-1);
  34 + proxy.reportableMonth=proxy.numberFilter('2848',-1);
  35 +
  36 + proxy.volumeNum=proxy.numberFilter('5765404',-1);
  37 + proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);
  38 + proxy.volumeNumNet=proxy.numberFilter('698423',-1);
  39 +
  40 + proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal
  41 +
  42 + if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
  43 + proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
  44 +
  45 + }else{
  46 + proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
  47 +
  48 + }
  49 + proxy.declarationRate=proxy.declarationRate*100+'%';
  50 +
  51 + let num1=5765404;
  52 + let num2=5458044;
  53 + let num3=698423;
  54 +
  55 + proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'
  56 + proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'
  57 + proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px'
  58 +
  59 +
  60 +
  61 +
  62 + })
  63 + const eleWidthNum=(num,num1,num2,num3)=>{
  64 + let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
  65 + let widthNum=Math.ceil((num*150)/maxNum)
  66 + console.log("aaa",num,widthNum)
  67 + let widthData=0;
  68 + if(widthNum!='' && widthNum!=null && widthNum!=undefined){
  69 + widthData=widthNum;
  70 + }
  71 + return widthData;
  72 + }
  73 +
  74 + const numberFilter = function (val,places = 2) {
  75 + //value为传进来的数据 比如 12345.6789
  76 + //places 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
  77 + //数据校验
  78 + if (parseFloat(val).toString() == 'NaN') return '0.00'
  79 + // 将数值截取
  80 + let num = val.toString().split('.')
  81 + let zs = num[0]
  82 + let xs = num[1]
  83 + // 整数部分处理，增加,
  84 + const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  85 + if (xs != null) {
  86 + if(places == 0){
  87 + return intPartFormat + '.' + xs
  88 + }else if(places == -1){
  89 + return intPartFormat
  90 + }else{
  91 + return intPartFormat +'.' + xs.substr(0,places)
  92 + }
  93 + } else {
  94 + return intPartFormat
  95 + }
  96 + }
  97 +
  98 + return{
  99 + numberFilter,
  100 + eleWidthNum
  101 + }
  102 + }
  103 +}
  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 +}
  1 +<div class="digital">
  2 + <!-- 数字滚动显示-->
  3 + <div class="box-item">
  4 + <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'number-item-color':item==0&&index<numDiff,'number-item-comma':index==0||index==3 }"
  5 + v-for="(item,index) in orderNum"
  6 + :key="index" :style="cStyle">
  7 + <span v-if="!isNaN(item)">
  8 + <i :id="`numberItem${index}`" :ref="`numberItem${index}`" :style='iStyle'>0123456789</i>
  9 + </span>
  10 + <span class="comma" v-else>{{item}}</span>
  11 + </li>
  12 + </div>
  13 +
  14 +</div>
  1 +export default {
  2 + name: 'digital',
  3 + template: '',
  4 + components: {
  5 + },
  6 + data(){
  7 + return {
  8 + numDiff:0//补位0的个数
  9 + }
  10 + },
  11 + props:['numm','numLen'],
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 + const {numm, numLen} = Vue.toRefs(props);
  15 + const orderNum = Vue.ref([]);
  16 + // 处理数字
  17 + // numm: 传入的数字 numLen: 默认显示几位数
  18 + let numVal=numm.value+'';
  19 + proxy.numDiff=parseInt(numLen.value)-parseInt(numVal.split("").length);
  20 + const toOrderNum = (num) => {
  21 +
  22 + num = num.toString();
  23 + if (num.length < numLen.value) {
  24 + num = '0' + num // 如未满定义的位数，添加"0"补位
  25 + toOrderNum(num) // 递归添加"0"补位
  26 + } else if (num.length === numLen.value) {
  27 + orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
  28 + } else {
  29 + // 数字超过八位显示异常
  30 + // this.$message('数字过大，显示异常')
  31 + }
  32 +
  33 + }
  34 + toOrderNum(numm.value)
  35 + Vue.watch(numm, (newVal) => {
  36 + toOrderNum(newVal)
  37 + })
  38 + // 挂载完
  39 + Vue.onMounted(() => {
  40 + setTimeout(() => {
  41 + proxy.setNumberTransform()
  42 +
  43 + },200)
  44 +
  45 + })
  46 + const setNumberTransform=()=> {
  47 + // 结合CSS 对数字字符进行滚动,显示数量
  48 +
  49 + for (let index = 0; index < proxy.orderNum.length; index++) {
  50 + const ele = proxy.$refs[`numberItem${index}`];
  51 +
  52 + ele.style.transform = `translate(-50%, -${proxy.orderNum[index] * 10}%)`
  53 + }
  54 + }
  55 + return{
  56 + orderNum,
  57 + toOrderNum,
  58 + setNumberTransform
  59 + }
  60 + },
  61 + // 如果中途数据有更新，重新执行动画
  62 + watch: {
  63 + numm() {
  64 + this.setNumberTransform()
  65 + }
  66 + }
  67 +}
  1 +<div class="lineChart">
  2 +<!-- <div :id="chartId" style="width:100%;height:225px;"></div>-->
  3 + <div id="line-echart" style="width:100%;height:225px;"></div>
  4 +</div>
  1 +export default {
  2 + name: 'lineChart',
  3 + template: '',
  4 + props:['yAxisData','seriesData','chartId'],
  5 + components: {
  6 + },
  7 + data(){
  8 + return {
  9 + domainName:'http://192.168.0.245:8180/api-web',
  10 + yAxisData:'',//y序列的数据
  11 + seriesData:[],//y轴数据
  12 + chartId:'line-echart'
  13 +
  14 + }
  15 + },
  16 + setup(props, {attrs, slots, emit}) {
  17 + const {proxy} = Vue.getCurrentInstance();
  18 +
  19 + // 挂载完
  20 + Vue.onMounted(() => {
  21 + /*$.get(proxy.domainName,function(res){
  22 +
  23 + })*/
  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))
  32 + const myChart = echarts.init(chartDom);
  33 + let option;
  34 +
  35 + option = {
  36 + title: {
  37 + text: ''
  38 + },
  39 + tooltip: {
  40 + trigger: 'axis',
  41 + backgroundColor:'rgba(50,50,50,0.7)',
  42 + borderColor:"#333",
  43 + textStyle:{
  44 + color:"#fff",
  45 + }
  46 +
  47 + },
  48 + legend: {
  49 + data: ['网络投票', '涉税文书', '网上申报'],
  50 + itemHeight:0,//图例圆圈大小设置
  51 + y:'7px',
  52 + textStyle: {
  53 + color: '#ffffff',
  54 + fontsize:"12px"
  55 + }
  56 +
  57 + },
  58 + grid: {
  59 + left: '3%',
  60 + right: '4%',
  61 + bottom: '3%',
  62 + containLabel: true,
  63 + },
  64 + toolbox: {
  65 + feature: {
  66 + saveAsImage: {}
  67 + }
  68 + },
  69 + xAxis: {
  70 + type: 'category',
  71 + boundaryGap: false,
  72 + data: ['1', '2', '3', '4', '5', '6', '7'],
  73 +
  74 + axisLine:{
  75 + show:false,//是否显示坐标线
  76 + },
  77 + axisTick: {
  78 + show: false //是否显示坐标刻度
  79 + },
  80 + axisLabel:{
  81 + color:'#ffffff',
  82 + },
  83 +
  84 + },
  85 + yAxis: proxy.yAxisData,
  86 + series: proxy.seriesData,
  87 + itemStyle:{
  88 + showSymbol:false
  89 + }
  90 + };
  91 +
  92 + option && myChart.setOption(option);
  93 +
  94 + let xAxisData=proxy.getRangeData();
  95 + // console.log('111',xAxisData)
  96 +
  97 +
  98 + })
  99 +
  100 +
  101 + //获取当前月份的最后一天,当前日期
  102 + const getRangeData=()=> {
  103 + const date = new Date();
  104 + let currentMonth = date.getMonth();
  105 + const nextMonth = ++currentMonth;
  106 + const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
  107 + const oneDay = 1000 * 60 * 60 * 24;
  108 + const lastTime = new Date(nextMonthFirstDay - oneDay);
  109 + const lastDay = lastTime.getDate();
  110 +
  111 + const dd = date.getDate();
  112 + let rangeData=[];
  113 + if(dd+15>lastDay){
  114 + const start=lastDay-15;
  115 + const end=lastDay;
  116 + for(let i=start;i<end;i++){
  117 + rangeData.push(i+1)
  118 + }
  119 + }else{
  120 + const start=dd;
  121 + const end=dd+15;
  122 + for(let i=start;i<end;i++){
  123 + rangeData.push(i)
  124 + }
  125 + }
  126 + return rangeData;
  127 + }
  128 +
  129 + return{
  130 + getRangeData
  131 + }
  132 + }
  133 +}
@@ -7,9 +7,11 @@ export default { @@ -7,9 +7,11 @@ export default {
7 data: function () { 7 data: function () {
8 return { 8 return {
9 divIdName: '#network-echart', 9 divIdName: '#network-echart',
10 - domainName: 'http://192.168.0.245:8180/api-web', 10 + // domainName: 'http://192.168.0.245:8180/api-web',
  11 + domainName: sessionStorage.getItem('domainName'),
11 mapJsonUrl: 'public/data/zhejiang.json', 12 mapJsonUrl: 'public/data/zhejiang.json',
12 - cityUrl: '/datavis/getEchartsMap', 13 + // cityUrl: '/datavis/getEchartsMap',
  14 + cityUrl: '/api-web/bigScreen/getEchartsMap',
13 // 标记各地市的坐标 15 // 标记各地市的坐标
14 geoCoordMap: { 16 geoCoordMap: {
15 "省局": [119.453576, 30.005871], 17 "省局": [119.453576, 30.005871],
@@ -59,6 +61,8 @@ export default { @@ -59,6 +61,8 @@ export default {
59 // 挂载完 61 // 挂载完
60 Vue.onMounted(() => { 62 Vue.onMounted(() => {
61 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"]; 63 let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
  64 + console.log("444",proxy.divIdName)
  65 +
62 // 解析地图数据包 66 // 解析地图数据包
63 $.getJSON(proxy.mapJsonUrl, function(geoJson) { 67 $.getJSON(proxy.mapJsonUrl, function(geoJson) {
64 // 注册地图,传入数据 68 // 注册地图,传入数据
@@ -229,6 +233,9 @@ export default { @@ -229,6 +233,9 @@ export default {
229 }; 233 };
230 234
231 // 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 +
232 let map_chart=echarts.init($(proxy.divIdName)[0]) 239 let map_chart=echarts.init($(proxy.divIdName)[0])
233 map_chart.setOption(optionMap); 240 map_chart.setOption(optionMap);
234 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 +}
  1 +<div class="statistics-container">
  2 + <div class="container-title">
  3 + <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
  4 +
  5 + </div>
  6 + <el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">
  7 + <el-carousel-item v-for="item in 2" :key="item">
  8 +<!-- <h3 class="medium">{{ item }}</h3>-->
  9 + <div class="medium ">
  10 + <ul class="statisticsItem">
  11 + <li class="listItem" v-for="itemData in 3 ">
  12 + <div class="listItem-health">
  13 + <div class="healthList">
  14 + <span class="listText">优</span>
  15 + <span class="listNum">4</span>
  16 + <span class="listPercent">100%</span>
  17 + </div>
  18 + <div class="healthList">
  19 + <span class="listText listText2">良</span>
  20 + <span class="listNum">0</span>
  21 + <span class="listPercent">0%</span>
  22 + </div>
  23 + <div class="healthList">
  24 + <span class="listText listText3">中</span>
  25 + <span class="listNum">0</span>
  26 + <span class="listPercent">0%</span>
  27 + </div>
  28 + </div>
  29 + <div class="listItem-num">299</div>
  30 + <div class="listItem-icon">
  31 + <i class="iconImg"><img src="/vue3/src/assets/images/zjdp/icon-sys.png" alt=""></i>
  32 + </div>
  33 + <div class="listItem-icon-name">
  34 + 操作系統</i>
  35 + </div>
  36 + </li>
  37 + </ul>
  38 + <div class="statisticsTotal">资源总量</div>
  39 + </div>
  40 +
  41 + </el-carousel-item>
  42 + </el-carousel>
  43 +
  44 +</div>
  1 +export default {
  2 + name: 'resourceStatistics',
  3 + template: '',
  4 + components: {},
  5 + data(){
  6 + return {
  7 + domainName:sessionStorage.getItem('domainName'),
  8 + apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
  9 + resourceStatisticsData:''
  10 + }
  11 + },
  12 + setup(props, {attrs, slots, emit}) {
  13 + const {proxy} = Vue.getCurrentInstance();
  14 +
  15 + // 挂载完
  16 + Vue.onMounted(() => {
  17 + })
  18 +
  19 + return{
  20 + }
  21 + }
  22 +}
@@ -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 -<!-- 省局网络拓扑-->  
16 -<!-- <NetworkTopology :></NetworkTopology>--> 15 + <!--省局网络拓扑-->
  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 28
28 </div> 29 </div>
29 </div> 30 </div>
30 - <div class="left-bottom-right">  
31 - 云平台  
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>
@@ -7,6 +7,30 @@ export default { @@ -7,6 +7,30 @@ export default {
7 ), 7 ),
8 'DataCenter': Vue.defineAsyncComponent( 8 'DataCenter': Vue.defineAsyncComponent(
9 () => myImport('views/zjdaping/components/dataCenter/index') 9 () => myImport('views/zjdaping/components/dataCenter/index')
  10 + ),
  11 + 'AssetOverview': Vue.defineAsyncComponent(
  12 + () => myImport('views/zjdaping/components/assetOverview/index')
  13 + ),
  14 + /*'Digital': Vue.defineAsyncComponent(
  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')
10 ) 34 )
11 }, 35 },
12 data() { 36 data() {
@@ -26,10 +50,9 @@ export default { @@ -26,10 +50,9 @@ export default {
26 50
27 // 挂载完 51 // 挂载完
28 Vue.onMounted(() => { 52 Vue.onMounted(() => {
29 - let that = this  
30 // 获取当前系统时间 53 // 获取当前系统时间
31 let myDate = new Date(); 54 let myDate = new Date();
32 - 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() + ''); 55 + // 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() + '');
33 56
34 }) 57 })
35 58