monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 3b2c02aebde4cfc5fa33403ff34d77cd0da4873f 2 parents 80ac114b 1338cc2d

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

修改BUG 103 测试防火墙详情页悬浮信息提示以及大屏部分组件



See merge request !30
Inline Side-by-side
Showing 68 changed files with 1178 additions and 1 deletions
@@ -913,7 +913,8 @@ layui.define(['xmSelect', 'md5'], function (exports) { @@ -913,7 +913,8 @@ layui.define(['xmSelect', 'md5'], function (exports) {
913 var sessions = layui.sessions; 913 var sessions = layui.sessions;
914 accessToken = sessions.getToken()['access_token']; 914 accessToken = sessions.getToken()['access_token'];
915 }); 915 });
916 - var cols = data['cols'][0]; 916 + var parseData=JSON.parse(data['cols']);
  917 + var cols = parseData[0];
917 $.each(cols, function (i, e) { 918 $.each(cols, function (i, e) {
918 if (e['isChild']) { 919 if (e['isChild']) {
919 if (e['isChild'] && typeof e['isChild'] === 'function') { 920 if (e['isChild'] && typeof e['isChild'] === 'function') {
@@ -14,6 +14,8 @@ layui.define(['commonDetail','common'], function (exports) { @@ -14,6 +14,8 @@ layui.define(['commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 resType = data.resType; 15 resType = data.resType;
16 } 16 }
  17 + commonDetail.bindTips();
  18 +
17 //基本信息 19 //基本信息
18 var jbxxKpiId='KPIE13DD9A3,KPIF74D9D2B,KPI99100180,KPIDD4C29CF,KPIB67495EE'; 20 var jbxxKpiId='KPIE13DD9A3,KPIF74D9D2B,KPI99100180,KPIDD4C29CF,KPIB67495EE';
19 //性能信息 21 //性能信息
@@ -11,6 +11,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -11,6 +11,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
11 }else{ 11 }else{
12 resId = data.resId; 12 resId = data.resId;
13 } 13 }
  14 + commonDetail.bindTips();
  15 +
14 //基本信息 16 //基本信息
15 var jbxxKpiId = 'KPI7DD4BA93,KPI1C777D98,KPIFABFD741,KPI16D855B2,KPI72F6F3C8,KPIF74D9D2B'; 17 var jbxxKpiId = 'KPI7DD4BA93,KPI1C777D98,KPIFABFD741,KPI16D855B2,KPI72F6F3C8,KPIF74D9D2B';
16 //接口信息kpiids 18 //接口信息kpiids
@@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 provider = data.provider; 15 provider = data.provider;
16 } 16 }
  17 + commonDetail.bindTips();
  18 +
17 //基本信息 19 //基本信息
18 var jbxxKpiId = 'KPI02F41E23,KPI54DC5912,KPI2D507904,KPI9F694F60,KPI35BFAE04,KPI961872D9'; 20 var jbxxKpiId = 'KPI02F41E23,KPI54DC5912,KPI2D507904,KPI9F694F60,KPI35BFAE04,KPI961872D9';
19 //接口信息kpiids 21 //接口信息kpiids
@@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 provider = data.provider; 15 provider = data.provider;
16 } 16 }
  17 + commonDetail.bindTips();
17 18
18 //基本信息 19 //基本信息
19 var jbxxKpiId = 'KPI7DD4BA93,KPIDA6FD3CD'; 20 var jbxxKpiId = 'KPI7DD4BA93,KPIDA6FD3CD';
@@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 provider = data.provider; 15 provider = data.provider;
16 } 16 }
  17 + commonDetail.bindTips();
17 18
18 //基本信息 19 //基本信息
19 var jbxxKpiId = 'KPI9F694F60,KPIBB1082BE,KPIDAC7AC64,KPICA591C11'; 20 var jbxxKpiId = 'KPI9F694F60,KPIBB1082BE,KPIDAC7AC64,KPICA591C11';
@@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 provider = data.provider; 15 provider = data.provider;
16 } 16 }
  17 + commonDetail.bindTips();
  18 +
17 //基本信息 19 //基本信息
18 var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B'; 20 var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B';
19 //接口信息kpiids 21 //接口信息kpiids
@@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
14 resId = data.resId; 14 resId = data.resId;
15 provider = data.provider; 15 provider = data.provider;
16 } 16 }
  17 + commonDetail.bindTips();
  18 +
17 //基本信息 19 //基本信息
18 var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B'; 20 var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B';
19 //接口信息kpiids 21 //接口信息kpiids
@@ -17,6 +17,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) { @@ -17,6 +17,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
17 provider = data.provider; 17 provider = data.provider;
18 model =data.model; 18 model =data.model;
19 } 19 }
  20 + commonDetail.bindTips();
20 21
21 //基本信息 22 //基本信息
22 var jbxxKpiId = 'KPI282685A0,KPI2D507904,KPI5858832B,KPIBB1082BE,KPI4419E8A1'; 23 var jbxxKpiId = 'KPI282685A0,KPI2D507904,KPI5858832B,KPIBB1082BE,KPI4419E8A1';
@@ -5346,6 +5346,7 @@ grayColor{ @@ -5346,6 +5346,7 @@ grayColor{
5346 justify-content: center;/*水平居中*/ 5346 justify-content: center;/*水平居中*/
5347 display:flex; 5347 display:flex;
5348 border-right: 2px solid #009688; 5348 border-right: 2px solid #009688;
  5349 + line-height: normal;
5349 } 5350 }
5350 .content-box-group .box-group-right{ 5351 .content-box-group .box-group-right{
5351 float: left; 5352 float: left;
@@ -18,3 +18,12 @@ @@ -18,3 +18,12 @@
18 @import "../css/businessVolume.css"; 18 @import "../css/businessVolume.css";
19 19
20 @import "../css/digitalboard.css"; 20 @import "../css/digitalboard.css";
  21 +
  22 +/*zj大屏*/
  23 +@import "../css/zjbigscreen.css";
  24 +
  25 +@import "../css/networktopology.css";
  26 +
  27 +@import "../css/datacenter.css";
  28 +
  29 +@import "../css/assetsOverview.css";
  1 +.asset-container{
  2 + /* background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;
  4 + height: 100%;*/
  5 +}
  6 +.yxqk {
  7 + position: relative;
  8 + text-align: center;
  9 + height:100%;
  10 + width: 530px;
  11 +}
  12 +
  13 +.yxqk__pie {
  14 + width: 140px;
  15 + position: relative;
  16 + top: 10px;
  17 + height:140px;
  18 + background-repeat: no-repeat;
  19 + background-size: cover;
  20 + display: inline-block;
  21 +
  22 +}
  23 +
  24 +.yxqk__pie span {
  25 + position: absolute;
  26 + -webkit-box-sizing: border-box;
  27 + box-sizing: border-box;
  28 + font-size: 31px;
  29 + color: #fff;
  30 + left: 54px;
  31 + z-index: 2;
  32 + top: 45px;
  33 +}
  34 +
  35 +.yxqk__pie--good {
  36 + background-image: url('/vue3/src/assets/images/zjdp/good-bg.png');
  37 + background-size: cover;
  38 +
  39 +}
  40 +.yxqk__pie--good .pie-after {
  41 + background-image: url('/vue3/src/assets/images/zjdp/good.png')
  42 +}
  43 +
  44 +.yxqk__pie--worse {
  45 + background-image: url('/vue3/src/assets/images/zjdp/worse-bg.png')
  46 +}
  47 +
  48 +.yxqk__pie--worse .pie-after {
  49 + background-image: url('/vue3/src/assets/images/zjdp/worse.png')
  50 +}
  51 +
  52 +.yxqk__pie--bad {
  53 + background-image: url('/vue3/src/assets/images/zjdp/bad-bg.png')
  54 +}
  55 +
  56 +.yxqk__pie--bad .pie-after {
  57 + background-image: url('/vue3/src/assets/images/zjdp/bad.png')
  58 +}
  59 +
  60 +.yxqk__pie .pie-after {
  61 + content: '';
  62 + position: absolute;
  63 + background-repeat: no-repeat;
  64 + background-size: cover;
  65 + width: 142px;
  66 + height: 170px;
  67 + top: 0;
  68 + left: 3px;
  69 +}
  70 +
  71 +.yxqk .tip {
  72 + color: #347fc1;
  73 + font-size: 12px;
  74 + position: relative;
  75 +}
  76 +
  77 +.yxqk .tip b {
  78 + color:#00b3fe;
  79 + font-size: 20px;
  80 + display: block;
  81 +}
  82 +
  83 +.yxqk .tip p{
  84 + margin:5px 0px;
  85 + cursor: pointer;
  86 +}
  87 +
  88 +.yxqk .tip p .tip-i {
  89 + width:12px;
  90 + height:10px;
  91 + content: '';
  92 + position: absolute;
  93 + top: 4px;
  94 + background-repeat: no-repeat;
  95 + background-size: cover;
  96 + background-image: url('/vue3/src/assets/images/zjdp/tip.png')
  97 +}
  98 +.yxqk .tip p span{
  99 + display: inline-block;
  100 + padding:0 15px;
  101 +}
  102 +.yxqk .items {
  103 + position: absolute;
  104 + top:10px;
  105 + width:530px;
  106 +}
  107 +
  108 +.yxqk .items li {
  109 + width: 182px;
  110 + height: 38px;
  111 + background-repeat: no-repeat;
  112 + background-size: 100% 100%;
  113 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-1.png');
  114 + font-size: 12px;
  115 + padding-left: 18px;
  116 + position: absolute;
  117 + -webkit-box-sizing: border-box;
  118 + box-sizing: border-box;
  119 + margin-top: 8px;
  120 + color: #3d96de;
  121 + padding-top: 6px;
  122 +
  123 +}
  124 +.yxqk .items li.list-0{
  125 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-1.png');
  126 +}
  127 +.yxqk .items li.list-1{
  128 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-2.png');
  129 +}
  130 +.yxqk .items li.list-2{
  131 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-3.png');
  132 +}
  133 +.yxqk .items li.list-4{
  134 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png');
  135 +}
  136 +.yxqk .items li.list-5{
  137 + background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-3.png');
  138 +}
  139 +.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2{
  140 + right:0;
  141 +}
  142 +.yxqk .items li.list-3,.yxqk .items li.list-4,.yxqk .items li.list-5{
  143 + left:0;
  144 +}
  145 +.yxqk .items li.list-0,.yxqk .items li.list-3{
  146 + top:15px;
  147 +}
  148 +.yxqk .items li.list-1,.yxqk .items li.list-4{
  149 + top:70px;
  150 +}
  151 +.yxqk .items li.list-2,.yxqk .items li.list-5{
  152 + top:126px;
  153 +}
  154 +.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img{
  155 + left:20px;
  156 +}
  157 +.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
  158 + left:60px;
  159 +}
  160 +.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
  161 + right:20px;
  162 +}
  163 +.yxqk .items li p{
  164 + margin:0;
  165 + display: inline;
  166 + position: absolute;
  167 + left: 40px;
  168 + top: 10px;
  169 +}
  170 +.yxqk .items li .listNum{
  171 + position: absolute;
  172 + right: 10px;
  173 + top: 7px;
  174 +}
  175 +.yxqk .items li b {
  176 + color: #ffffff;
  177 + font-size: 16px;
  178 +}
  179 +
  180 +.yxqk .items li span {
  181 + color: #3d96de;
  182 + font-size: 16px;
  183 + padding-left: 6px;
  184 +}
  185 +
  186 +.yxqk .items li img {
  187 + opacity: .5;
  188 + position: absolute;
  189 + top: 8px;
  190 + left: 8px;
  191 +}
  192 +/**运行情况，悬浮提示*/
  193 +.yxqk_tips_container{
  194 + background-color: #0d046a;
  195 + opacity: .9;
  196 + position: absolute;
  197 + top: -10px;
  198 + left: 270px;
  199 + z-index: 999;
  200 + width: 132px;
  201 + height: 170px;
  202 + border-radius: 2%;
  203 +}
  204 +.yxqk_tips_container .items{
  205 + left:1px;
  206 + top:0;
  207 +}
  208 +.yxqk_tips_container .items li{
  209 + width: 130px !important;
  210 + background-image: url("/vue3/src/assets/images/zjdp/bg-2.png");
  211 + height: 24px;
  212 + line-height:24px;
  213 + margin-top: 4px;
  214 + color: #ffffff;
  215 + padding-left:20px;
  216 + font-size: 12px;
  217 + padding-top:0rem !important;
  218 + position: relative;
  219 +
  220 +}
  221 +.yxqk_tips_container .items li span{
  222 + color: #ffffff;
  223 + font-size: 12px ;
  224 +
  225 +}
  226 +.yxqk_tips_container .items li [class^="icon"] {
  227 + width: 10px;
  228 + height: 10px;
  229 + position: absolute;
  230 + top: 9px;
  231 + left: 8px;
  232 + background-repeat: no-repeat;
  233 + background-size: 100% 100%;
  234 +}
  235 +
  236 +.yxqk_tips_container .items li .icon-HUAWEI_CLOUD_PLAT {
  237 + background-image: url('/vue3/src/assets/images/zjdp/HUAWEI_CLOUD_PLAT.png');
  238 +}
  239 +.yxqk_tips_container .items li .icon-ALI_CLOUD_PLAT {
  240 + background-image: url('/vue3/src/assets/images/zjdp/ALI_CLOUD_PLAT.png');
  241 +}
  242 +.yxqk_tips_container .items li .icon-VIRTUALIZATION_VMWARE {
  243 + background-image: url('/vue3/src/assets/images/zjdp/VIRTUALIZATION_VMWARE.png');
  244 +}
  245 +.yxqk_tips_container .items li .icon-HOST_MINICOMPUTER {
  246 + background-image: url('/vue3/src/assets/images/zjdp/HOST_MINICOMPUTER.png');
  247 +}
  248 +.yxqk_tips_container .items li .icon-STORAGE {
  249 + background-image: url('/vue3/src/assets/images/zjdp/STORAGE.png');
  250 +}
  251 +.yxqk_tips_container .items li .icon-NETHARDWARE_ROUTER {
  252 + background-image: url('/vue3/src/assets/images/zjdp/NETHARDWARE_ROUTER.png');
  253 +}
  254 +/**一维环绕转圈效果*/
  255 +.yxqk__pie--good::before {
  256 + background-image: url('/vue3/src/assets/images/zjdp/highlights_good.png');
  257 +}
  258 +.yxqk__pie--worse::before {
  259 + background-image: url('/vue3/src/assets/images/zjdp/highlights_worse.png');
  260 +}
  261 +.yxqk__pie--bad::before {
  262 + background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png');
  263 +}
  264 +.yxqk__pie span::before {
  265 + content: '';
  266 + display: block;
  267 + width: 278px;
  268 + height: 278px;
  269 + background-repeat: no-repeat;
  270 + background-position: top left;
  271 + -webkit-animation: rotate 20s linear infinite;
  272 + animation: rotate 20s linear infinite;
  273 + -webkit-transform-origin: center center;
  274 + -ms-transform-origin: center center;
  275 + transform-origin: center center;
  276 + position: absolute;
  277 + left: -78px;
  278 + top: -78px;
  279 +}
  280 +@-webkit-keyframes rotate {
  281 + from {
  282 + -webkit-transform: rotate(0deg);
  283 + }
  284 + to {
  285 + -webkit-transform: rotate(360deg);
  286 + }
  287 +}
  288 +@keyframes rotate {
  289 + from {
  290 + -webkit-transform: rotate(0deg);
  291 + }
  292 + to {
  293 + -webkit-transform: rotate(360deg);
  294 + }
  295 +}
  1 +.sjzx {
  2 + position: relative;
  3 + margin-top: 10px;
  4 + font-size: 0;
  5 + overflow: hidden
  6 +}
  7 +
  8 +.sjzx .item {
  9 + display: inline-block;
  10 + position: relative;
  11 + height: 120px;
  12 + margin-right: 120px;
  13 +}
  14 +
  15 +.sjzx .item h5 {
  16 + color: #fff;
  17 + font-size: .2rem;
  18 + text-align: center;
  19 + position:absolute;
  20 + bottom:0;
  21 + left:14px;
  22 +}
  23 +
  24 +.sjzx .item img {
  25 + display: block;
  26 + height: 118px;
  27 + cursor: pointer;
  28 +}
  29 +
  30 +.sjzx .item ul {
  31 + -webkit-transform: scale(.8);
  32 + -ms-transform: scale(.8);
  33 + transform: scale(.8);
  34 + -webkit-transform-origin: right top;
  35 + -ms-transform-origin: right top;
  36 + transform-origin: right top;
  37 + font-size: 16px;
  38 + position: absolute;
  39 + top:30px;
  40 + left: 60px;
  41 + color: #fff;
  42 + white-space: nowrap
  43 +}
  44 +.sjzx .item ul li{
  45 + line-height: 30px;
  46 + font-size:16px;
  47 + position: relative;
  48 + text-align: left;
  49 +}
  50 +.sjzx .item ul li [class^="icon"] {
  51 + width: 14px;
  52 + height: 14px;
  53 + position: absolute;
  54 + top: 6px;
  55 + background-repeat: no-repeat;
  56 + background-size: 100% 100%;
  57 +}
  58 +.sjzx .item ul li span{
  59 + margin-left:20px;
  60 +}
  61 +.sjzx .item ul li .icon-wd {
  62 + background-image: url('/vue3/src/assets/images/zjdp/icon-wd.png');
  63 +}
  64 +.sjzx .item ul li .icon-sd {
  65 + background-image: url("/vue3/src/assets/images/zjdp/icon-sd.png");
  66 +}
  67 +.sjzx .item ul li .icon-mj {
  68 + background-image: url("/vue3/src/assets/images/zjdp/icon-mj.png");
  69 +}
  1 +.network-container{
  2 + width: 100%;
  3 + height: 100%;
  4 + background-image: url("/vue3/src/assets/images/bg.jpg");
  5 + background-position: center;
  6 + text-align: left;
  7 + overflow: visible;
  8 +}
  9 +
  10 +#network-echart{
  11 + width: 100%;
  12 + height: 100%;
  13 + background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
  14 + background-position: center;
  15 + background-repeat: no-repeat;
  16 +}
  1 +body{font-size: 15px;}
  2 +#zjdapingIndex{
  3 + background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  4 + background-position: center;
  5 +}
  6 +.container-title{
  7 + color: white;
  8 + padding: 7px;
  9 + text-align: left;
  10 +}
  11 +/**提示展示动画 从左到右进入*/
  12 +@-webkit-keyframes fadeInLeft {
  13 + 0% {
  14 + opacity: 0;
  15 + -webkit-transform: translateX(-120px);
  16 + }
  17 + 100% {
  18 + opacity: 1;
  19 + -webkit-transform: translateX(0);
  20 + }
  21 +}
  22 +@keyframes fadeInLeft {
  23 + 0% {
  24 + opacity: 0;
  25 + transform: translateX(-120px);
  26 + }
  27 + 100% {
  28 + opacity: 1;
  29 + transform: translateX(0);
  30 + }
  31 +}
  32 +/*从左下到右上*/
  33 +@keyframes fadeInUpLeft
  34 +{
  35 + from {
  36 + opacity: 0;
  37 + -webkit-transform: translate(-30px,30px); /* Safari */
  38 + transform: stranslate(-10px,2010); /* 标准语法 */
  39 + }
  40 + to {
  41 + opacity:1;
  42 + -webkit-transform: translate(0,10px); /* Safari */
  43 + transform: stranslate(0,10px); /* 标准语法 */
  44 + }
  45 +}
  46 +@-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
  47 +{
  48 + from {
  49 + opacity:0;
  50 + -webkit-transform: translate(-30px,30px); /* Safari */
  51 + transform: stranslate(-10px,10px); /* 标准语法 */
  52 + }
  53 + to {
  54 + opacity:1;
  55 + -webkit-transform: translate(0,10px); /* Safari */
  56 + transform: stranslate(0,10px); /* 标准语法 */
  57 + }
  58 +}
  59 +.icon-focus{
  60 + width: 14px;
  61 + height: 14px;
  62 + position: absolute;
  63 + top: 12px;
  64 + background-repeat: no-repeat;
  65 + background-size: 100% 100%;
  66 + background-image: url("/vue3/src/assets/images/zjdp/focus.png");
  67 + left: 12px;
  68 +}
  69 +/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */
  70 +.map_tips_0{
  71 + -webkit-animation-name: "fadeInUpLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
  72 + -webkit-animation-duration: 0.5s;/*动画持续的时间长*/
  73 + -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
  74 + -moz-animation-name: "fadeInUpLeft";
  75 + -moz-animation-duration: 0.5s;
  76 + -moz-animation-iteration-count: 1;
  77 + -ms-animation-name: "fadeInUpLeft";
  78 + -ms-animation-duration: 0.5s;
  79 + -ms-animation-iteration-count: 1;
  80 + -o-animation-name: "fadeInUpLeft";
  81 + -o-animation-duration: 0.5s;
  82 + -o-animation-iteration-count: 1;
  83 +}
  84 +.map_tips_city_0{
  85 + -webkit-animation-name: "fadeInLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
  86 + -webkit-animation-duration: 0.5s;/*动画持续的时间长*/
  87 + -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
  88 + -moz-animation-name: "fadeInLeft";
  89 + -moz-animation-duration: 0.5s;
  90 + -moz-animation-iteration-count: 1;
  91 + -ms-animation-name: "fadeInLeft";
  92 + -ms-animation-duration: 0.5s;
  93 + -ms-animation-iteration-count: 1;
  94 + -o-animation-name: "fadeInLeft";
  95 + -o-animation-duration: 0.5s;
  96 + -o-animation-iteration-count: 1;
  97 +}
  98 +.map_tips_city_1{
  99 + -webkit-animation:'fadeInLeft' 0.6s 1;
  100 + -moz-animation:'fadeInLeft' 0.6s 1;
  101 + -ms-animation:'fadeInLeft' 0.6s 1;
  102 + -o-animation:'fadeInLeft' 0.6s 1;
  103 +} /* 简写 */
  104 +.map_tips_city_2{
  105 + -webkit-animation:'fadeInLeft' 0.7s 1;
  106 + -moz-animation:'fadeInLeft' 0.7s 1;
  107 + -ms-animation:'fadeInLeft' 0.7s 1;
  108 + -o-animation:'fadeInLeft' 0.7s 1;
  109 +}
  110 +.map_tips{
  111 + position: absolute;
  112 + color: #fff;
  113 + width:auto;
  114 + height:auto;
  115 + z-index:999;
  116 + font-size: 16px;
  117 + background-repeat: no-repeat;
  118 + background-image: url(/vue3/src/assets/images/zjdp/tips_bg.png);
  119 + background-size: 100% 100%;
  120 + pointer-events: none;
  121 + display: none;
  122 +}
  123 +.map_tips_group{
  124 + margin: 0 12px 0 2px;
  125 + padding-left:20px;
  126 + border-bottom:1px solid #0C4493;
  127 + height:75px;
  128 +}
  129 +.map_tips_group div{
  130 + margin-top:5px;
  131 + white-space:nowrap;
  132 +}
  133 +.map_tips_group:last-child{
  134 + border-bottom: none !important;
  135 + margin-bottom:10px;
  136 +}
  137 +.map_tips_city{
  138 + padding-bottom:3px;
  139 + padding-left:30px;
  140 + margin:12px 6px 0 6px;
  141 + border-bottom:2px solid #0C4493;
  142 +}
This diff could not be displayed because it is too large.
@@ -99,6 +99,15 @@ const routes = [{ @@ -99,6 +99,15 @@ const routes = [{
99 path: '/daping', 99 path: '/daping',
100 name: 'daping', 100 name: 'daping',
101 component: () => myImport('views/dpimg/index') 101 component: () => myImport('views/dpimg/index')
  102 + },
  103 + {
  104 + path: '/zjdaping',
  105 + name: 'zjdaping',
  106 + // component: () => myImport('views/zjdaping/index')
  107 + // component: () => myImport('views/zjdaping/components/networkTopology/index')
  108 + // component: () => myImport('views/zjdaping/components/dataCenter/index')
  109 + // component: () => myImport('views/zjdaping/components/cloudPlatform/index')
  110 + component: () => myImport('views/zjdaping/components/assetOverview/index')
102 } 111 }
103 ]; 112 ];
104 113
  1 +<div class="asset-container">
  2 +<!-- 资产概览-->
  3 + <div class="container-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-asset.png" alt="">
  5 + </div>
  6 + <div class="asset-overview yxqk">
  7 + <div class="asset-overview-tip">
  8 + <div class="tip yxqk_tips_div">
  9 + <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
  10 + <b id="yxjk_total_resource">{{totalData}}</b>
  11 +
  12 + <!--悬浮提示信息-->
  13 + <div class="yxqk_tips_container" v-show="isShow" >
  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">
  17 + <i :class="'icon-'+item.code"></i>
  18 + <span >{{item.resTypeName}}：{{item.num}}台</span>
  19 + </li>
  20 + </div>
  21 + </ul>
  22 + </div>
  23 +
  24 + </div>
  25 + <div id="all_resource_status" :class="['yxqk__pie',pieClass]">
  26 + <span id="yxjk_resource_health_text">{{healthStatusName}}</span>
  27 + <div class="pie-after"></div>
  28 + </div>
  29 +
  30 + </div>
  31 +
  32 + <div class="items">
  33 + <!--<span class="yxqk__banner&#45;&#45;top"></span>-->
  34 + <!--<span class="yxqk__banner&#45;&#45;bottom"></span>-->
  35 + <div id="yxqk__banner">
  36 + <ul id="yxjk_resource_type_count_id">
  37 + <div id="yxjk_resource_type_count_id_tmpl">
  38 + <li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
  39 + <img :src="'src/assets/images/zjdp/'+item.code+'.png'">
  40 + <div style="margin-left: .02rem;">
  41 + <p>{{item.resTypeName}}</p>
  42 + <div class="listNum">
  43 + <b>{{item.num}}</b><span>台</span>
  44 + </div>
  45 +
  46 +
  47 + </div>
  48 + </li>
  49 + </div>
  50 + </ul>
  51 + </div>
  52 + </div>
  53 +
  54 + </div>
  55 +</div>
  1 +export default {
  2 + name: 'dataCenter',
  3 + template: '',
  4 + components: {
  5 + // Swiper,SwiperSlide
  6 + },
  7 + data(){
  8 + return {
  9 + domainName:'http://192.168.0.245:8180/api-web',
  10 + assetOverviewData:'',
  11 + pieClass:'yxqk__pie--good',
  12 + healthStatusName:'',
  13 + totalData:0,
  14 + isShow:false
  15 + }
  16 + },
  17 + setup(props, {attrs, slots, emit}) {
  18 + const {proxy} = Vue.getCurrentInstance();
  19 + // 挂载完
  20 + Vue.onMounted(() => {
  21 + $.get(proxy.domainName +"/datavis/getResHealthSataus",function (res) {
  22 + const data = res.map;
  23 + //状态
  24 + if(data && data.healthStatus){
  25 + if(data.healthStatus == '2'){//问题
  26 + 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'){//严重问题
  29 + proxy.pieClass="yxqk__pie--bad";
  30 + // $("#all_resource_status").removeClass("yxqk__pie--worse").removeClass("yxqk__pie--good").addClass("yxqk__pie--bad");
  31 + }else{
  32 + proxy.pieClass="yxqk__pie--good";
  33 +
  34 + }
  35 + // $("#yxjk_resource_health_text").text(data.healthStatusName);
  36 + proxy.healthStatusName=data.healthStatusName;
  37 + }
  38 + //资源总量
  39 + if(data && data.total){
  40 + // $("#yxjk_total_resource").text(data.total);
  41 + proxy.totalData=data.total;
  42 + }
  43 + //分类总量
  44 + if(data && data.data){
  45 + // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
  46 + // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
  47 + let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
  48 + const showData = [];//展示的类型
  49 + //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
  50 + // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
  51 + $.each(data.data,function (i,v) {
  52 + 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; }
  58 + if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
  59 + });
  60 + showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
  61 + showData.push({resTypeName:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
  62 + showData.push({resTypeName:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
  63 + showData.push({resTypeName:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
  64 + showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
  65 + showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
  66 + //类型统计
  67 + // var html = $("#yxjk_resource_type_count_id_tmpl").render(showData.slice(0,4));
  68 + // $("#yxjk_resource_type_count_id").html(html);
  69 + proxy.assetOverviewData=showData;
  70 +
  71 + //悬浮提示
  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 + });*/
  79 + }
  80 + });
  81 +
  82 + })
  83 + const showTip=()=>{
  84 + proxy.isShow=true;
  85 +
  86 + }
  87 + const hideTip=()=>{
  88 + proxy.isShow=false;
  89 + }
  90 + return{
  91 + showTip,
  92 + hideTip
  93 + }
  94 + }
  95 +}
  1 +<div class="container-title">云平台</div>
  2 +<div class="left-bottom-right-body"></div>
  1 +<div class="dataCenter-container" id="dataCenter">
  2 + <!-- 数据中心-->
  3 + <div class="container-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-datacenter.png" alt="">
  5 +
  6 + </div>
  7 + <div class="sjzx">
  8 + <div class="item sjzx_machineroom" v-for="item in jfdata">
  9 + <h5>{{item.machineRoomName}}</h5>
  10 + <img v-if="item.healthStatus==0" src="/vue3/src/assets/images/zjdp/jifang-1.png" alt="">
  11 + <img else="item.healthStatus==1" src="/vue3/src/assets/images/zjdp/jifang-2.png" alt="">
  12 + <ul class="float-container">
  13 + <li><i class='icon-wd'></i><span>温度：{{item.wd}}</span></li>
  14 + <li><i class='icon-sd'></i><span>湿度：{{item.sd}}</span></li>
  15 + <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
  16 + </ul>
  17 + </div>
  18 + </div>
  19 +</div>
  1 +export default {
  2 + name: 'dataCenter',
  3 + template: '',
  4 + components: {},
  5 + data(){
  6 + return {
  7 + domainName:'http://192.168.0.245:8180/api-web',
  8 + jfdata:''
  9 + }
  10 + },
  11 + setup(props, {attrs, slots, emit}) {
  12 + const {proxy} = Vue.getCurrentInstance();
  13 +
  14 + // 挂载完
  15 + Vue.onMounted(() => {
  16 + $.get(proxy.domainName +"/datavis/getMachineRoomInfoList",function (res) {
  17 + if(res.data){
  18 + proxy.jfdata=res.data;
  19 + /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
  20 + $("#sjzx_machineroom_id").html(html);
  21 + //机房点击事件
  22 + $(".sjzx_machineroom").on("click",function () {
  23 + const name = $(this).attr("name");
  24 + layer.open({
  25 + type:2
  26 + , shade: 0.6 //遮罩透明度
  27 + , maxmin: false //允许全屏最小化
  28 + , anim: 1 //0-6的动画形式，-1不开启
  29 + , content:['http://127.0.0.1:8081/video.html?type='+name+'','no']
  30 + , area:["1100px",'720px']
  31 + // , title: true //不显示标题栏
  32 + // , title: name
  33 + })
  34 + });*/
  35 + }
  36 + })
  37 + })
  38 +
  39 + return{
  40 + }
  41 + }
  42 +}
  43 +
  1 +<div class="network-container">
  2 +<!-- 省局网络拓扑-->
  3 + <div class="container-title network-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
  5 + </div>
  6 + <div id="network-echart"></div>
  7 +</div>
  1 +export default {
  2 + name: 'networkTopology',
  3 + // props:['divIdName','geoCoordMap','domainName','mapJsonUrl','cityUrl'],
  4 + template: '',
  5 + components: {
  6 + },
  7 + data: function () {
  8 + return {
  9 + divIdName: '#network-echart',
  10 + domainName: 'http://192.168.0.245:8180/api-web',
  11 + mapJsonUrl: 'public/data/zhejiang.json',
  12 + cityUrl: '/datavis/getEchartsMap',
  13 + // 标记各地市的坐标
  14 + geoCoordMap: {
  15 + "省局": [119.453576, 30.005871],
  16 + "杭州市": [120.153576, 30.287459],
  17 + "宁波": [121.549792, 29.868388],
  18 + "温州市": [120.672111, 28.000575],
  19 + "嘉兴市": [120.750865, 30.762653],
  20 + "湖州市": [120.102398, 30.867198],
  21 + "绍兴市": [120.582112, 29.997117],
  22 + "金华市": [119.649506, 29.089524],
  23 + "衢州市": [118.87263, 28.941708],
  24 + "舟山市": [122.106863, 30.016028],
  25 + "台州市": [121.428599, 28.661378],
  26 + "丽水市": [119.921786, 28.451993]
  27 + }
  28 +
  29 + }
  30 + },
  31 + setup(props, {attrs, slots, emit}) {
  32 + const {proxy} = Vue.getCurrentInstance();
  33 +
  34 + // 输出json对象数组,value里包含坐标值和随机值
  35 + let convertData = (data) =>{
  36 + let res = [];
  37 + $.each(data,function (i,v) {
  38 + let geoCoord = proxy.geoCoordMap[v.name];
  39 + res.push({
  40 + name: v.name,
  41 + value: geoCoord.concat(v.value)
  42 + })
  43 + });
  44 + return res
  45 + }
  46 + // 设置目标点, 配置线条指向
  47 + let convertToLineData = (data) => {
  48 + let res = [];
  49 + $.each(data,function (i,v) {
  50 + // 起点
  51 + let fromCoord = proxy.geoCoordMap[v.name];
  52 + // 终点,这里设置的省局
  53 + let toCoord = [119.453576,30.005871];
  54 + res.push([{ coord: fromCoord, value: v.value },{ coord: toCoord }]);
  55 + });
  56 + return res
  57 + }
  58 +
  59 + // 挂载完
  60 + Vue.onMounted(() => {
  61 + let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
  62 + // 解析地图数据包
  63 + $.getJSON(proxy.mapJsonUrl, function(geoJson) {
  64 + // 注册地图,传入数据
  65 + echarts.registerMap('echarts', geoJson);
  66 + //获取浙江各地市链路信息
  67 + $.get(proxy.domainName +proxy.cityUrl,function(res){
  68 + if(res.data && res.data.length > 0){
  69 + const mapData = res.data;
  70 + const obj = res.object;
  71 + const optionMap = {
  72 + timeline: {
  73 + show: false
  74 + },
  75 + baseOption: {
  76 + // 设置地图参数和样式
  77 + geo: {
  78 + show: true,
  79 + map: 'echarts',
  80 + roam: true,
  81 + zoom: 1.25,
  82 + // 地图中心点的坐标, 可调节显示的偏移量
  83 + center: [120.453576,29.197459],
  84 + label: {
  85 + // 高亮文字隐藏
  86 + emphasis: {
  87 + show: false
  88 + }
  89 + },
  90 + itemStyle: {
  91 + normal: {
  92 + borderColor: '#42adff',
  93 + borderWidth: 2,
  94 + areaColor: 'rgba(0,0,0,0)',
  95 + shadowColor: '#294167',
  96 + shadowOffsetX: -2,
  97 + shadowOffsetY: 2,
  98 + shadowBlur: 25
  99 + },
  100 + emphasis: {
  101 + // 鼠标悬浮高亮
  102 + areaColor: '#0D114B',
  103 + borderWidth: 1,
  104 + shadowColor: '#294167',
  105 + borderColor: '#42adff'
  106 + }
  107 + }
  108 + }
  109 +
  110 + },
  111 + options: [{
  112 + xAxis: {
  113 + show: false
  114 + },
  115 + yAxis: {
  116 + show: false
  117 + },
  118 + tooltip: {
  119 + show:false
  120 + },
  121 + series: [{
  122 + // 坐标点参数和样式
  123 + type: 'effectScatter',
  124 + coordinateSystem: 'geo',
  125 + data: proxy.convertData(mapData),
  126 + symbolSize: 10,
  127 + showEffectOn: 'render',
  128 + rippleEffect: { //涟漪特效
  129 + period: 4, //动画时间，值越小速度越快
  130 + brushType: 'stroke', //波纹绘制方式 stroke, fill
  131 + scale: 4 //波纹圆环最大限制，值越大波纹越大
  132 + },
  133 + label: {
  134 + normal: {
  135 + formatter: '{b}',
  136 + position: 'right',
  137 + show: true,
  138 + color:'#fff',
  139 + fontSize:16
  140 + }
  141 + },
  142 + itemStyle: {
  143 + normal: {
  144 + //点的颜色
  145 + color: function (data) {
  146 + return colors[data.value[2]];
  147 + },
  148 + shadowBlur: 2,
  149 + shadowColor: '#03BED9',
  150 + symbolSize: 5
  151 + }
  152 + }
  153 + },
  154 + {
  155 + // 线条参数和样式
  156 + type: 'lines',
  157 + // 变化频率
  158 + zlevel: 2,
  159 + effect: {
  160 + show: true,
  161 + // 箭头指向速度，值越小速度越快
  162 + period: 4,
  163 + // 特效尾迹长度,取值0到1,值越大,尾迹越长
  164 + trailLength: 0.03,
  165 + symbol: 'arrow',
  166 + // 图标大小
  167 + symbolSize: 6
  168 + },
  169 + lineStyle: {
  170 + normal: {
  171 + //线条颜色
  172 + color: function (data) {
  173 + // return colors[0];//线条跟着点的颜色一致
  174 + if(data.value == 0){
  175 + return '#00eaff';
  176 + }else{
  177 + return '#D81E06';
  178 + }
  179 +
  180 + },
  181 + // 尾迹线条宽度
  182 + width: 1,
  183 + // 尾迹线条透明度
  184 + opacity: 1,
  185 + // 尾迹线条曲直度
  186 + curveness: 0.3
  187 + }
  188 + },
  189 + data: proxy.convertToLineData(mapData)
  190 + },
  191 + {//被攻击点
  192 + // type: 'scatter',
  193 + type:'effectScatter',
  194 + hoverAnimation:true,//鼠标移入是否显示动画
  195 + coordinateSystem: 'geo',
  196 + zlevel: 3,
  197 + rippleEffect: {
  198 + number:3,
  199 + period: 4,
  200 + brushType: 'fill',
  201 + scale: 2
  202 + },
  203 + symbol: 'circle',
  204 + symbolSize: 30,
  205 + itemStyle:{
  206 + color:'#EE4237',
  207 + },
  208 + label: {
  209 + normal: {
  210 + show: false,
  211 + position: 'left',
  212 + formatter: '省局',
  213 + textStyle: {
  214 + color: "#0f0"
  215 + },
  216 + fontSize:16
  217 + },
  218 + emphasis: {
  219 + show: false,
  220 + color: "#0f0"//鼠标移入字体颜色
  221 + }
  222 + },
  223 + data: [{
  224 + name: '省局',
  225 + value: proxy.geoCoordMap['省局'].concat([10])
  226 + }]
  227 + }]
  228 + }]
  229 + };
  230 +
  231 + // let map_chart = echarts.init(document.getElementById('network-echart'));
  232 + let map_chart=echarts.init($(proxy.divIdName)[0])
  233 + map_chart.setOption(optionMap);
  234 + map_chart.on('mouseout', 'geo', function (params) {
  235 + $('.map_tips').hide();
  236 + });
  237 + //当鼠标移入当前区域显示提示信息
  238 + map_chart.on('mouseover', 'geo',function (params) {
  239 + let name = params.name;
  240 + //先删除原来的
  241 + $(proxy.divIdName).find('.map_tips').remove();
  242 + //当前城市提示信息
  243 + let currentCity = obj[name];
  244 + if(currentCity && currentCity.length > 0){
  245 + let cityInfos = '';
  246 + $.each(currentCity,function (i,v) {
  247 + cityInfos += '<div class="map_tips_group">' +
  248 + ' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
  249 + ' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
  250 + ' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
  251 + ' </div>';
  252 + });
  253 +
  254 + //地图区域悬浮提示
  255 + let cityTips =
  256 + '<div class="map_tips">' +
  257 + ' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
  258 + + cityInfos +
  259 + '</div>';
  260 + //提示框拼接在echar区域
  261 + $(cityTips).appendTo($(proxy.divIdName));
  262 +
  263 + if ($('.map_tips').is(':hidden')) {
  264 + $('.map_tips').show();
  265 + }
  266 + //城市名称从左到右滑入效果
  267 + $('.map_tips_res').addClass("map_tips_city_0");
  268 + $('.map_tips_sxll').addClass("map_tips_city_1");
  269 + $('.map_tips_xxll').addClass("map_tips_city_2");
  270 +
  271 + //根据鼠标位置定位
  272 + let layerX = params.event.offsetX;
  273 + let layerY = params.event.offsetY;
  274 + //随鼠标移动
  275 + if(name == '湖州市' || name == '嘉兴市'){
  276 + $('.map_tips').css({
  277 + 'top': layerY + 10,
  278 + 'left': layerX + 15
  279 + });
  280 + }else{
  281 + $('.map_tips').css({
  282 + 'top': layerY -120,
  283 + 'left': layerX + 15
  284 + });
  285 + }
  286 + }else{
  287 + $('.map_tips').hide();
  288 + }
  289 + });
  290 + //鼠标移动，提示信息随鼠标走
  291 + map_chart.on('mousemove', 'geo', function (params) {
  292 + let name = params.name;
  293 + //随鼠标移动
  294 + let layerX = params.event.offsetX;
  295 + let layerY = params.event.offsetY;
  296 + //随鼠标移动
  297 + if(name == '湖州市' || name == '嘉兴市'){
  298 + $('.map_tips').css({
  299 + 'top': layerY + 10,
  300 + 'left': layerX + 15
  301 + });
  302 + }else{
  303 + $('.map_tips').css({
  304 + 'top': layerY -120,
  305 + 'left': layerX + 15
  306 + });
  307 + }
  308 + });
  309 + }
  310 + });
  311 + });
  312 + })
  313 +
  314 + return {
  315 + convertData,
  316 + convertToLineData
  317 + }
  318 + }
  319 +}
  1 +<div id="zjdapingIndex">
  2 + <header class="screen-header" :style="screenheaderStyle">
  3 + <div>
  4 + <img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt="">
  5 + </div>
  6 +
  7 + <div class="title-left">
  8 + <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
  9 + <span :style="datetimeStyle" >{{dateTime}}</span>
  10 + </div>
  11 + </header>
  12 + <div class="screen-body">
  13 + <section class="screen-left" >
  14 + <div class="left-top">
  15 +<!-- 省局网络拓扑-->
  16 +<!-- <NetworkTopology :></NetworkTopology>-->
  17 + </div>
  18 + <div class="left-bottom">
  19 + <div class="left-bottom-left">
  20 + <div class="left-bottom-left-top">
  21 +<!-- 数据中心-->
  22 + <DataCenter></DataCenter>
  23 +
  24 + </div>
  25 + <div class="left-bottom-left-bottom">
  26 + 资产概览
  27 +
  28 + </div>
  29 + </div>
  30 + <div class="left-bottom-right">
  31 + 云平台
  32 +
  33 + </div>
  34 + </div>
  35 + </section>
  36 + <section class="screen-right" >
  37 +
  38 +
  39 + </section>
  40 + </div>
  41 +</div>
  1 +export default {
  2 + name: 'zjdaping',
  3 + template: '',
  4 + components: {
  5 + 'NetworkTopology': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/networkTopology/index')
  7 + ),
  8 + 'DataCenter': Vue.defineAsyncComponent(
  9 + () => myImport('views/zjdaping/components/dataCenter/index')
  10 + )
  11 + },
  12 + data() {
  13 + return {
  14 + titleFontSize: 30,
  15 + dateTime: '00-00-00 00:00:00',
  16 +
  17 + }
  18 + },
  19 + setup() {
  20 + const {proxy} = Vue.getCurrentInstance();
  21 +
  22 + let datetimeStyle=()=>{// 左上角日期时间大小
  23 + fontSize: this.titleFontSize / 3 + 'px';
  24 + marginLeft: this.titleFontSize / 5 + 'px'
  25 + }
  26 +
  27 + // 挂载完
  28 + Vue.onMounted(() => {
  29 + let that = this
  30 + // 获取当前系统时间
  31 + 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() + '');
  33 +
  34 + })
  35 +
  36 +
  37 + return {
  38 + datetimeStyle
  39 + }
  40 + }
  41 +}