monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 542fd102f0bfeb5197943f9f6fe131f0877ccb89 2 parents 99c9996d 3b2c02ae master ... joke master-500-dev master-500-dev-0327 master-500-dev-LH master-500-dev-XuHaoJie master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq master-500-dev-ztq1 master-500-log master-500-log-ztq master-500-prod master-500-prod-joke-new master-500-prod-lushangqing master-V32-LH master-V32-XuHaoJie master-V32-lgh master-joke master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq master-prod master-prod-500-lushangqing master-prod-lgh master-prod-lushangqing master-prod-xwx master-prod-xwx2 master-v32-joke master-v32-lushangqing master-v32-lzc master-v32-xwx master-v32-ztq master-v330 master-yuanjinpeng mater-ztq wangfeng wangfeng-500-dev wangfeng-mj wuhl-master tag-master-v320

Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web

Inline Side-by-side
Showing 76 changed files with 1213 additions and 16 deletions
... ... @@ -913,7 +913,8 @@ layui.define(['xmSelect', 'md5'], function (exports) {
var sessions = layui.sessions;
accessToken = sessions.getToken()['access_token'];
});
var cols = data['cols'][0];
var parseData=JSON.parse(data['cols']);
var cols = parseData[0];
$.each(cols, function (i, e) {
if (e['isChild']) {
if (e['isChild'] && typeof e['isChild'] === 'function') {
... ...
... ... @@ -56,10 +56,16 @@ layui.define(['table', 'admin', 'form', 'common', 'sessions', 'reslist', 'common
area:['320px','170px'],
yes:function (index,layero) {
var favoritesName = $(layero).find('input[name=favoritesName]').val();
saveFavorite(null,favoritesName,parentId);
$("e.empty").hide();
//刷新列表
loadFavoriteList(parentId);
// Start xwx 2021/11/1 新建文件夹名称不能为空
if (favoritesName!=''){
saveFavorite(null,favoritesName,parentId);
$("e.empty").hide();
//刷新列表
loadFavoriteList(parentId);
}else {
layer.msg('收藏夹名称不能为空', {icon: 0, time: 3000});
}
// End xwx 2021/11/1 新建文件夹名称不能为空
}
});
});
... ...
... ... @@ -14,6 +14,8 @@ layui.define(['commonDetail','common'], function (exports) {
resId = data.resId;
resType = data.resType;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId='KPIE13DD9A3,KPIF74D9D2B,KPI99100180,KPIDD4C29CF,KPIB67495EE';
//性能信息
... ...
... ... @@ -11,6 +11,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
}else{
resId = data.resId;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPI7DD4BA93,KPI1C777D98,KPIFABFD741,KPI16D855B2,KPI72F6F3C8,KPIF74D9D2B';
//接口信息kpiids
... ...
... ... @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
resId = data.resId;
provider = data.provider;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPI02F41E23,KPI54DC5912,KPI2D507904,KPI9F694F60,KPI35BFAE04,KPI961872D9';
//接口信息kpiids
... ...
... ... @@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
resId = data.resId;
provider = data.provider;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPI7DD4BA93,KPIDA6FD3CD';
... ...
... ... @@ -14,6 +14,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
resId = data.resId;
provider = data.provider;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPI9F694F60,KPIBB1082BE,KPIDAC7AC64,KPICA591C11';
... ...
... ... @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
resId = data.resId;
provider = data.provider;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B';
//接口信息kpiids
... ...
... ... @@ -14,6 +14,8 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
resId = data.resId;
provider = data.provider;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPIBB1082BE,KPI4419E8A1,KPI5858832B,KPI2D507904,KPI282685A0,KPIF74D9D2B';
//接口信息kpiids
... ...
... ... @@ -17,6 +17,7 @@ layui.define(['laypage', 'commonDetail','common'], function (exports) {
provider = data.provider;
model =data.model;
}
commonDetail.bindTips();
//基本信息
var jbxxKpiId = 'KPI282685A0,KPI2D507904,KPI5858832B,KPIBB1082BE,KPI4419E8A1';
... ...
... ... @@ -5346,6 +5346,7 @@ grayColor{
justify-content: center;/*水平居中*/
display:flex;
border-right: 2px solid #009688;
line-height: normal;
}
.content-box-group .box-group-right{
float: left;
... ...
<title>容量预测指标管理</title>
<title>预测指标管理</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
... ...
<title>容量预测项管理</title>
<title>预测单元管理</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
... ...
... ... @@ -9,12 +9,8 @@
var router = layui.router();
type =router.search.id;
if(type){
if(type == 'gzgl'){
$('li[lay-id="/iframe/insp/doc"] span').html('故障管理');
}else if(type == 'jkjc'){
if(type == 'jkjc'){
$('li[lay-id="/iframe/insp/doc"] span').html('健康检查');
}else if(type== 'lxwh'){
$('li[lay-id="/iframe/insp/doc"] span').html('例行维护');
}else if(type== 'fxbg'){
$('li[lay-id="/iframe/insp/doc"] span').html('分析报告');
}
... ...
<title>运行监控</title>
<script type="text/html" template>
<iframe src="{{sessionStorage.getItem('domainInspectionURI')}}/start/index.html#/monitor/index/show=0/access_token={{localStorage.getItem('access_token')}}" frameborder="0" class="layadmin-iframe"></iframe>
{{#
var type = "";
var a = "";
layui.use(['sessions','common','admin'], function () {
var $ = layui.$;
var common = layui.common;
var router = layui.router();
type =router.search.id;
if(type){
if(type == 'yxjk'){
$('li[lay-id="/iframe/insp/monitor"] span').html('运行监控');
}else if(type== 'lxwh'){
$('li[lay-id="/iframe/insp/monitor"] span').html('例行维护');
}
}
})
}}
<iframe src="{{sessionStorage.getItem('domainInspectionURI')}}/start/index.html#/monitor/index/show=0/reportType={{type}}/access_token={{localStorage.getItem('access_token')}}" frameborder="0" class="layadmin-iframe"></iframe>
</script>
... ...
<title>容量分析/数据库</title>
<title>数据库预测</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
... ...
<title>容量分析/服务器</title>
<title>服务器预测</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
... ...
<title>容量分析/存储</title>
<title>存储预测</title>
<article class="page-container">
<div class="page-panel">
<div class="main">
... ...
... ... @@ -18,3 +18,12 @@
@import "../css/businessVolume.css";
@import "../css/digitalboard.css";
/*zj大屏*/
@import "../css/zjbigscreen.css";
@import "../css/networktopology.css";
@import "../css/datacenter.css";
@import "../css/assetsOverview.css";
\ No newline at end of file
... ...
.asset-container{
/* background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
height: 100%;*/
}
.yxqk {
position: relative;
text-align: center;
height:100%;
width: 530px;
}
.yxqk__pie {
width: 140px;
position: relative;
top: 10px;
height:140px;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
}
.yxqk__pie span {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 31px;
color: #fff;
left: 54px;
z-index: 2;
top: 45px;
}
.yxqk__pie--good {
background-image: url('/vue3/src/assets/images/zjdp/good-bg.png');
background-size: cover;
}
.yxqk__pie--good .pie-after {
background-image: url('/vue3/src/assets/images/zjdp/good.png')
}
.yxqk__pie--worse {
background-image: url('/vue3/src/assets/images/zjdp/worse-bg.png')
}
.yxqk__pie--worse .pie-after {
background-image: url('/vue3/src/assets/images/zjdp/worse.png')
}
.yxqk__pie--bad {
background-image: url('/vue3/src/assets/images/zjdp/bad-bg.png')
}
.yxqk__pie--bad .pie-after {
background-image: url('/vue3/src/assets/images/zjdp/bad.png')
}
.yxqk__pie .pie-after {
content: '';
position: absolute;
background-repeat: no-repeat;
background-size: cover;
width: 142px;
height: 170px;
top: 0;
left: 3px;
}
.yxqk .tip {
color: #347fc1;
font-size: 12px;
position: relative;
}
.yxqk .tip b {
color:#00b3fe;
font-size: 20px;
display: block;
}
.yxqk .tip p{
margin:5px 0px;
cursor: pointer;
}
.yxqk .tip p .tip-i {
width:12px;
height:10px;
content: '';
position: absolute;
top: 4px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('/vue3/src/assets/images/zjdp/tip.png')
}
.yxqk .tip p span{
display: inline-block;
padding:0 15px;
}
.yxqk .items {
position: absolute;
top:10px;
width:530px;
}
.yxqk .items li {
width: 182px;
height: 38px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-1.png');
font-size: 12px;
padding-left: 18px;
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 8px;
color: #3d96de;
padding-top: 6px;
}
.yxqk .items li.list-0{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-1.png');
}
.yxqk .items li.list-1{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-2.png');
}
.yxqk .items li.list-2{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-r-3.png');
}
.yxqk .items li.list-4{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-2.png');
}
.yxqk .items li.list-5{
background-image: url('/vue3/src/assets/images/zjdp/bg-li-l-3.png');
}
.yxqk .items li.list-0,.yxqk .items li.list-1,.yxqk .items li.list-2{
right:0;
}
.yxqk .items li.list-3,.yxqk .items li.list-4,.yxqk .items li.list-5{
left:0;
}
.yxqk .items li.list-0,.yxqk .items li.list-3{
top:15px;
}
.yxqk .items li.list-1,.yxqk .items li.list-4{
top:70px;
}
.yxqk .items li.list-2,.yxqk .items li.list-5{
top:126px;
}
.yxqk .items li.list-0 img,.yxqk .items li.list-1 img,.yxqk .items li.list-2 img{
left:20px;
}
.yxqk .items li.list-0 p,.yxqk .items li.list-1 p,.yxqk .items li.list-2 p{
left:60px;
}
.yxqk .items li.list-3 .listNum,.yxqk .items li.list-4 .listNum,.yxqk .items li.list-5 .listNum{
right:20px;
}
.yxqk .items li p{
margin:0;
display: inline;
position: absolute;
left: 40px;
top: 10px;
}
.yxqk .items li .listNum{
position: absolute;
right: 10px;
top: 7px;
}
.yxqk .items li b {
color: #ffffff;
font-size: 16px;
}
.yxqk .items li span {
color: #3d96de;
font-size: 16px;
padding-left: 6px;
}
.yxqk .items li img {
opacity: .5;
position: absolute;
top: 8px;
left: 8px;
}
/**运行情况，悬浮提示*/
.yxqk_tips_container{
background-color: #0d046a;
opacity: .9;
position: absolute;
top: -10px;
left: 270px;
z-index: 999;
width: 132px;
height: 170px;
border-radius: 2%;
}
.yxqk_tips_container .items{
left:1px;
top:0;
}
.yxqk_tips_container .items li{
width: 130px !important;
background-image: url("/vue3/src/assets/images/zjdp/bg-2.png");
height: 24px;
line-height:24px;
margin-top: 4px;
color: #ffffff;
padding-left:20px;
font-size: 12px;
padding-top:0rem !important;
position: relative;
}
.yxqk_tips_container .items li span{
color: #ffffff;
font-size: 12px ;
}
.yxqk_tips_container .items li [class^="icon"] {
width: 10px;
height: 10px;
position: absolute;
top: 9px;
left: 8px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.yxqk_tips_container .items li .icon-HUAWEI_CLOUD_PLAT {
background-image: url('/vue3/src/assets/images/zjdp/HUAWEI_CLOUD_PLAT.png');
}
.yxqk_tips_container .items li .icon-ALI_CLOUD_PLAT {
background-image: url('/vue3/src/assets/images/zjdp/ALI_CLOUD_PLAT.png');
}
.yxqk_tips_container .items li .icon-VIRTUALIZATION_VMWARE {
background-image: url('/vue3/src/assets/images/zjdp/VIRTUALIZATION_VMWARE.png');
}
.yxqk_tips_container .items li .icon-HOST_MINICOMPUTER {
background-image: url('/vue3/src/assets/images/zjdp/HOST_MINICOMPUTER.png');
}
.yxqk_tips_container .items li .icon-STORAGE {
background-image: url('/vue3/src/assets/images/zjdp/STORAGE.png');
}
.yxqk_tips_container .items li .icon-NETHARDWARE_ROUTER {
background-image: url('/vue3/src/assets/images/zjdp/NETHARDWARE_ROUTER.png');
}
/**一维环绕转圈效果*/
.yxqk__pie--good::before {
background-image: url('/vue3/src/assets/images/zjdp/highlights_good.png');
}
.yxqk__pie--worse::before {
background-image: url('/vue3/src/assets/images/zjdp/highlights_worse.png');
}
.yxqk__pie--bad::before {
background-image: url('/vue3/src/assets/images/zjdp/highlights_bad.png');
}
.yxqk__pie span::before {
content: '';
display: block;
width: 278px;
height: 278px;
background-repeat: no-repeat;
background-position: top left;
-webkit-animation: rotate 20s linear infinite;
animation: rotate 20s linear infinite;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
position: absolute;
left: -78px;
top: -78px;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
\ No newline at end of file
... ...
.sjzx {
position: relative;
margin-top: 10px;
font-size: 0;
overflow: hidden
}
.sjzx .item {
display: inline-block;
position: relative;
height: 120px;
margin-right: 120px;
}
.sjzx .item h5 {
color: #fff;
font-size: .2rem;
text-align: center;
position:absolute;
bottom:0;
left:14px;
}
.sjzx .item img {
display: block;
height: 118px;
cursor: pointer;
}
.sjzx .item ul {
-webkit-transform: scale(.8);
-ms-transform: scale(.8);
transform: scale(.8);
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
font-size: 16px;
position: absolute;
top:30px;
left: 60px;
color: #fff;
white-space: nowrap
}
.sjzx .item ul li{
line-height: 30px;
font-size:16px;
position: relative;
text-align: left;
}
.sjzx .item ul li [class^="icon"] {
width: 14px;
height: 14px;
position: absolute;
top: 6px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.sjzx .item ul li span{
margin-left:20px;
}
.sjzx .item ul li .icon-wd {
background-image: url('/vue3/src/assets/images/zjdp/icon-wd.png');
}
.sjzx .item ul li .icon-sd {
background-image: url("/vue3/src/assets/images/zjdp/icon-sd.png");
}
.sjzx .item ul li .icon-mj {
background-image: url("/vue3/src/assets/images/zjdp/icon-mj.png");
}
\ No newline at end of file
... ...
.network-container{
width: 100%;
height: 100%;
background-image: url("/vue3/src/assets/images/bg.jpg");
background-position: center;
text-align: left;
overflow: visible;
}
#network-echart{
width: 100%;
height: 100%;
background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
background-position: center;
background-repeat: no-repeat;
}
\ No newline at end of file
... ...
body{font-size: 15px;}
#zjdapingIndex{
background: url("/vue3/src/assets/images/zjdp/img-bg.png");
background-position: center;
}
.container-title{
color: white;
padding: 7px;
text-align: left;
}
/**提示展示动画 从左到右进入*/
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-120px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-120px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/*从左下到右上*/
@keyframes fadeInUpLeft
{
from {
opacity: 0;
-webkit-transform: translate(-30px,30px); /* Safari */
transform: stranslate(-10px,2010); /* 标准语法 */
}
to {
opacity:1;
-webkit-transform: translate(0,10px); /* Safari */
transform: stranslate(0,10px); /* 标准语法 */
}
}
@-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
{
from {
opacity:0;
-webkit-transform: translate(-30px,30px); /* Safari */
transform: stranslate(-10px,10px); /* 标准语法 */
}
to {
opacity:1;
-webkit-transform: translate(0,10px); /* Safari */
transform: stranslate(0,10px); /* 标准语法 */
}
}
.icon-focus{
width: 14px;
height: 14px;
position: absolute;
top: 12px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("/vue3/src/assets/images/zjdp/focus.png");
left: 12px;
}
/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */
.map_tips_0{
-webkit-animation-name: "fadeInUpLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 0.5s;/*动画持续的时间长*/
-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
-moz-animation-name: "fadeInUpLeft";
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-ms-animation-name: "fadeInUpLeft";
-ms-animation-duration: 0.5s;
-ms-animation-iteration-count: 1;
-o-animation-name: "fadeInUpLeft";
-o-animation-duration: 0.5s;
-o-animation-iteration-count: 1;
}
.map_tips_city_0{
-webkit-animation-name: "fadeInLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
-webkit-animation-duration: 0.5s;/*动画持续的时间长*/
-webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
-moz-animation-name: "fadeInLeft";
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-ms-animation-name: "fadeInLeft";
-ms-animation-duration: 0.5s;
-ms-animation-iteration-count: 1;
-o-animation-name: "fadeInLeft";
-o-animation-duration: 0.5s;
-o-animation-iteration-count: 1;
}
.map_tips_city_1{
-webkit-animation:'fadeInLeft' 0.6s 1;
-moz-animation:'fadeInLeft' 0.6s 1;
-ms-animation:'fadeInLeft' 0.6s 1;
-o-animation:'fadeInLeft' 0.6s 1;
} /* 简写 */
.map_tips_city_2{
-webkit-animation:'fadeInLeft' 0.7s 1;
-moz-animation:'fadeInLeft' 0.7s 1;
-ms-animation:'fadeInLeft' 0.7s 1;
-o-animation:'fadeInLeft' 0.7s 1;
}
.map_tips{
position: absolute;
color: #fff;
width:auto;
height:auto;
z-index:999;
font-size: 16px;
background-repeat: no-repeat;
background-image: url(/vue3/src/assets/images/zjdp/tips_bg.png);
background-size: 100% 100%;
pointer-events: none;
display: none;
}
.map_tips_group{
margin: 0 12px 0 2px;
padding-left:20px;
border-bottom:1px solid #0C4493;
height:75px;
}
.map_tips_group div{
margin-top:5px;
white-space:nowrap;
}
.map_tips_group:last-child{
border-bottom: none !important;
margin-bottom:10px;
}
.map_tips_city{
padding-bottom:3px;
padding-left:30px;
margin:12px 6px 0 6px;
border-bottom:2px solid #0C4493;
}
... ...
This diff could not be displayed because it is too large.
... ... @@ -99,6 +99,15 @@ const routes = [{
path: '/daping',
name: 'daping',
component: () => myImport('views/dpimg/index')
},
{
path: '/zjdaping',
name: 'zjdaping',
// component: () => myImport('views/zjdaping/index')
// component: () => myImport('views/zjdaping/components/networkTopology/index')
// component: () => myImport('views/zjdaping/components/dataCenter/index')
// component: () => myImport('views/zjdaping/components/cloudPlatform/index')
component: () => myImport('views/zjdaping/components/assetOverview/index')
}
];
... ...
<div class="asset-container">
<!-- 资产概览-->
<div class="container-title">
<img src="/vue3/src/assets/images/zjdp/title-asset.png" alt="">
</div>
<div class="asset-overview yxqk">
<div class="asset-overview-tip">
<div class="tip yxqk_tips_div">
<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
<b id="yxjk_total_resource">{{totalData}}</b>
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<ul class="items" id="yxjk_resource_type_count_tips" >
<div id="yxjk_resource_type_count_tips_tmpl">
<li v-for="(item,index) in assetOverviewData">
<i :class="'icon-'+item.code"></i>
<span >{{item.resTypeName}}：{{item.num}}台</span>
</li>
</div>
</ul>
</div>
</div>
<div id="all_resource_status" :class="['yxqk__pie',pieClass]">
<span id="yxjk_resource_health_text">{{healthStatusName}}</span>
<div class="pie-after"></div>
</div>
</div>
<div class="items">
<!--<span class="yxqk__banner&#45;&#45;top"></span>-->
<!--<span class="yxqk__banner&#45;&#45;bottom"></span>-->
<div id="yxqk__banner">
<ul id="yxjk_resource_type_count_id">
<div id="yxjk_resource_type_count_id_tmpl">
<li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
<img :src="'src/assets/images/zjdp/'+item.code+'.png'">
<div style="margin-left: .02rem;">
<p>{{item.resTypeName}}</p>
<div class="listNum">
<b>{{item.num}}</b><span>台</span>
</div>
</div>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
... ...
export default {
name: 'dataCenter',
template: '',
components: {
// Swiper,SwiperSlide
},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
assetOverviewData:'',
pieClass:'yxqk__pie--good',
healthStatusName:'',
totalData:0,
isShow:false
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +"/datavis/getResHealthSataus",function (res) {
const data = res.map;
//状态
if(data && data.healthStatus){
if(data.healthStatus == '2'){//问题
proxy.pieClass="yxqk__pie--worse";
// $("#all_resource_status").removeClass("yxqk__pie--good").removeClass("yxqk__pie--bad").addClass("yxqk__pie--worse");
} else if(data.healthStatus == '1'){//严重问题
proxy.pieClass="yxqk__pie--bad";
// $("#all_resource_status").removeClass("yxqk__pie--worse").removeClass("yxqk__pie--good").addClass("yxqk__pie--bad");
}else{
proxy.pieClass="yxqk__pie--good";
}
// $("#yxjk_resource_health_text").text(data.healthStatusName);
proxy.healthStatusName=data.healthStatusName;
}
//资源总量
if(data && data.total){
// $("#yxjk_total_resource").text(data.total);
proxy.totalData=data.total;
}
//分类总量
if(data && data.data){
// //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
const showData = [];//展示的类型
//华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
// 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
$.each(data.data,function (i,v) {
const resType = v.resType;
if(resType.indexOf("HUAWEI_CLOUD") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION") >= 0 ) { vmware += v.num; }
if(resType.indexOf('HOST_MINICOMPUTER_') >= 0 ) { minicomputer_partition += v.num; }
if(resType.indexOf('STORAGE') >= 0) { storage += v.num; }
if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
});
showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
showData.push({resTypeName:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
showData.push({resTypeName:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
showData.push({resTypeName:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
//类型统计
// var html = $("#yxjk_resource_type_count_id_tmpl").render(showData.slice(0,4));
// $("#yxjk_resource_type_count_id").html(html);
proxy.assetOverviewData=showData;
//悬浮提示
// var html = $("#yxjk_resource_type_count_tips_tmpl").render(showData);
// $("#yxjk_resource_type_count_tips").html(html);
/* $(".yxqk_tips_div").hover(function () {
$(".yxqk_tips_container").show();
},function () {
$(".yxqk_tips_container").hide();
});*/
}
});
})
const showTip=()=>{
proxy.isShow=true;
}
const hideTip=()=>{
proxy.isShow=false;
}
return{
showTip,
hideTip
}
}
}
\ No newline at end of file
... ...
<div class="container-title">云平台</div>
<div class="left-bottom-right-body"></div>
\ No newline at end of file
... ...
<div class="dataCenter-container" id="dataCenter">
<!-- 数据中心-->
<div class="container-title">
<img src="/vue3/src/assets/images/zjdp/title-datacenter.png" alt="">
</div>
<div class="sjzx">
<div class="item sjzx_machineroom" v-for="item in jfdata">
<h5>{{item.machineRoomName}}</h5>
<img v-if="item.healthStatus==0" src="/vue3/src/assets/images/zjdp/jifang-1.png" alt="">
<img else="item.healthStatus==1" src="/vue3/src/assets/images/zjdp/jifang-2.png" alt="">
<ul class="float-container">
<li><i class='icon-wd'></i><span>温度：{{item.wd}}</span></li>
<li><i class='icon-sd'></i><span>湿度：{{item.sd}}</span></li>
<li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
</ul>
</div>
</div>
</div>
... ...
export default {
name: 'dataCenter',
template: '',
components: {},
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
jfdata:''
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
$.get(proxy.domainName +"/datavis/getMachineRoomInfoList",function (res) {
if(res.data){
proxy.jfdata=res.data;
/* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
$("#sjzx_machineroom_id").html(html);
//机房点击事件
$(".sjzx_machineroom").on("click",function () {
const name = $(this).attr("name");
layer.open({
type:2
, shade: 0.6 //遮罩透明度
, maxmin: false //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content:['http://127.0.0.1:8081/video.html?type='+name+'','no']
, area:["1100px",'720px']
// , title: true //不显示标题栏
// , title: name
})
});*/
}
})
})
return{
}
}
}
... ...
<div class="network-container">
<!-- 省局网络拓扑-->
<div class="container-title network-title">
<img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
</div>
<div id="network-echart"></div>
</div>
... ...
export default {
name: 'networkTopology',
// props:['divIdName','geoCoordMap','domainName','mapJsonUrl','cityUrl'],
template: '',
components: {
},
data: function () {
return {
divIdName: '#network-echart',
domainName: 'http://192.168.0.245:8180/api-web',
mapJsonUrl: 'public/data/zhejiang.json',
cityUrl: '/datavis/getEchartsMap',
// 标记各地市的坐标
geoCoordMap: {
"省局": [119.453576, 30.005871],
"杭州市": [120.153576, 30.287459],
"宁波": [121.549792, 29.868388],
"温州市": [120.672111, 28.000575],
"嘉兴市": [120.750865, 30.762653],
"湖州市": [120.102398, 30.867198],
"绍兴市": [120.582112, 29.997117],
"金华市": [119.649506, 29.089524],
"衢州市": [118.87263, 28.941708],
"舟山市": [122.106863, 30.016028],
"台州市": [121.428599, 28.661378],
"丽水市": [119.921786, 28.451993]
}
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 输出json对象数组,value里包含坐标值和随机值
let convertData = (data) =>{
let res = [];
$.each(data,function (i,v) {
let geoCoord = proxy.geoCoordMap[v.name];
res.push({
name: v.name,
value: geoCoord.concat(v.value)
})
});
return res
}
// 设置目标点, 配置线条指向
let convertToLineData = (data) => {
let res = [];
$.each(data,function (i,v) {
// 起点
let fromCoord = proxy.geoCoordMap[v.name];
// 终点,这里设置的省局
let toCoord = [119.453576,30.005871];
res.push([{ coord: fromCoord, value: v.value },{ coord: toCoord }]);
});
return res
}
// 挂载完
Vue.onMounted(() => {
let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
// 解析地图数据包
$.getJSON(proxy.mapJsonUrl, function(geoJson) {
// 注册地图,传入数据
echarts.registerMap('echarts', geoJson);
//获取浙江各地市链路信息
$.get(proxy.domainName +proxy.cityUrl,function(res){
if(res.data && res.data.length > 0){
const mapData = res.data;
const obj = res.object;
const optionMap = {
timeline: {
show: false
},
baseOption: {
// 设置地图参数和样式
geo: {
show: true,
map: 'echarts',
roam: true,
zoom: 1.25,
// 地图中心点的坐标, 可调节显示的偏移量
center: [120.453576,29.197459],
label: {
// 高亮文字隐藏
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#42adff',
borderWidth: 2,
areaColor: 'rgba(0,0,0,0)',
shadowColor: '#294167',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 25
},
emphasis: {
// 鼠标悬浮高亮
areaColor: '#0D114B',
borderWidth: 1,
shadowColor: '#294167',
borderColor: '#42adff'
}
}
}
},
options: [{
xAxis: {
show: false
},
yAxis: {
show: false
},
tooltip: {
show:false
},
series: [{
// 坐标点参数和样式
type: 'effectScatter',
coordinateSystem: 'geo',
data: proxy.convertData(mapData),
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color:'#fff',
fontSize:16
}
},
itemStyle: {
normal: {
//点的颜色
color: function (data) {
return colors[data.value[2]];
},
shadowBlur: 2,
shadowColor: '#03BED9',
symbolSize: 5
}
}
},
{
// 线条参数和样式
type: 'lines',
// 变化频率
zlevel: 2,
effect: {
show: true,
// 箭头指向速度，值越小速度越快
period: 4,
// 特效尾迹长度,取值0到1,值越大,尾迹越长
trailLength: 0.03,
symbol: 'arrow',
// 图标大小
symbolSize: 6
},
lineStyle: {
normal: {
//线条颜色
color: function (data) {
// return colors[0];//线条跟着点的颜色一致
if(data.value == 0){
return '#00eaff';
}else{
return '#D81E06';
}
},
// 尾迹线条宽度
width: 1,
// 尾迹线条透明度
opacity: 1,
// 尾迹线条曲直度
curveness: 0.3
}
},
data: proxy.convertToLineData(mapData)
},
{//被攻击点
// type: 'scatter',
type:'effectScatter',
hoverAnimation:true,//鼠标移入是否显示动画
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
number:3,
period: 4,
brushType: 'fill',
scale: 2
},
symbol: 'circle',
symbolSize: 30,
itemStyle:{
color:'#EE4237',
},
label: {
normal: {
show: false,
position: 'left',
formatter: '省局',
textStyle: {
color: "#0f0"
},
fontSize:16
},
emphasis: {
show: false,
color: "#0f0"//鼠标移入字体颜色
}
},
data: [{
name: '省局',
value: proxy.geoCoordMap['省局'].concat([10])
}]
}]
}]
};
// let map_chart = echarts.init(document.getElementById('network-echart'));
let map_chart=echarts.init($(proxy.divIdName)[0])
map_chart.setOption(optionMap);
map_chart.on('mouseout', 'geo', function (params) {
$('.map_tips').hide();
});
//当鼠标移入当前区域显示提示信息
map_chart.on('mouseover', 'geo',function (params) {
let name = params.name;
//先删除原来的
$(proxy.divIdName).find('.map_tips').remove();
//当前城市提示信息
let currentCity = obj[name];
if(currentCity && currentCity.length > 0){
let cityInfos = '';
$.each(currentCity,function (i,v) {
cityInfos += '<div class="map_tips_group">' +
' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
' </div>';
});
//地图区域悬浮提示
let cityTips =
'<div class="map_tips">' +
' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
+ cityInfos +
'</div>';
//提示框拼接在echar区域
$(cityTips).appendTo($(proxy.divIdName));
if ($('.map_tips').is(':hidden')) {
$('.map_tips').show();
}
//城市名称从左到右滑入效果
$('.map_tips_res').addClass("map_tips_city_0");
$('.map_tips_sxll').addClass("map_tips_city_1");
$('.map_tips_xxll').addClass("map_tips_city_2");
//根据鼠标位置定位
let layerX = params.event.offsetX;
let layerY = params.event.offsetY;
//随鼠标移动
if(name == '湖州市' || name == '嘉兴市'){
$('.map_tips').css({
'top': layerY + 10,
'left': layerX + 15
});
}else{
$('.map_tips').css({
'top': layerY -120,
'left': layerX + 15
});
}
}else{
$('.map_tips').hide();
}
});
//鼠标移动，提示信息随鼠标走
map_chart.on('mousemove', 'geo', function (params) {
let name = params.name;
//随鼠标移动
let layerX = params.event.offsetX;
let layerY = params.event.offsetY;
//随鼠标移动
if(name == '湖州市' || name == '嘉兴市'){
$('.map_tips').css({
'top': layerY + 10,
'left': layerX + 15
});
}else{
$('.map_tips').css({
'top': layerY -120,
'left': layerX + 15
});
}
});
}
});
});
})
return {
convertData,
convertToLineData
}
}
}
... ...
<div id="zjdapingIndex">
<header class="screen-header" :style="screenheaderStyle">
<div>
<img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt="">
</div>
<div class="title-left">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >{{dateTime}}</span>
</div>
</header>
<div class="screen-body">
<section class="screen-left" >
<div class="left-top">
<!-- 省局网络拓扑-->
<!-- <NetworkTopology :></NetworkTopology>-->
</div>
<div class="left-bottom">
<div class="left-bottom-left">
<div class="left-bottom-left-top">
<!-- 数据中心-->
<DataCenter></DataCenter>
</div>
<div class="left-bottom-left-bottom">
资产概览
</div>
</div>
<div class="left-bottom-right">
云平台
</div>
</div>
</section>
<section class="screen-right" >
</section>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'zjdaping',
template: '',
components: {
'NetworkTopology': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/networkTopology/index')
),
'DataCenter': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/dataCenter/index')
)
},
data() {
return {
titleFontSize: 30,
dateTime: '00-00-00 00:00:00',
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let datetimeStyle=()=>{// 左上角日期时间大小
fontSize: this.titleFontSize / 3 + 'px';
marginLeft: this.titleFontSize / 5 + 'px'
}
// 挂载完
Vue.onMounted(() => {
let that = this
// 获取当前系统时间
let myDate = new Date();
that.dateTime = myDate.getFullYear() + '-' + that.timeFormat(myDate.getMonth() + 1 + '') + '-' + that.timeFormat(myDate.getDate() + '') // + ' ' + that.timeFormat(myDate.getHours() + '') + ':' + that.timeFormat(myDate.getMinutes() + '') + ':' + that.timeFormat(myDate.getSeconds() + '');
})
return {
datetimeStyle
}
}
}
... ...