monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 8c509e7c31a6e3cbc32a96ce1f82e598d9e0ba0a 1 parent 4af793f1

【873】大屏机房机柜展示完善

Inline Side-by-side
Showing 24 changed files with 148 additions and 57 deletions
... ... @@ -43,7 +43,8 @@ layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
//独立页面路由，可随意添加（无需写参数）
,indPage: [
'/user/login', //登入页
'/page/forward' // 听云访问系统页面
'/page/forward', // 听云访问系统页面
'/bigscreen/daping' // 浙江大屏页面
]
//扩展的第三方模块
... ...
... ... @@ -2288,7 +2288,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
* @param resId
*/
renderActiveAlarms: function (tableId, resId) {
$('#'+tableId).prev().text('实时告警Top5')
//$('#'+tableId).prev().text('实时告警Top5')
var alarmlist = table.render({
elem: '#' + tableId
, url: common.domainName + '/api-web/home/alarm/alarmListPage'
... ...
... ... @@ -197,11 +197,12 @@ layui.extend({
//入口页面
,entryPage = function(fn){
var router = layui.router()
,container = view(setter.container)
,pathURL = admin.correctRouter(router.path.join('/'))
,isIndPage;
//检查是否属于独立页面
layui.each(setter.indPage, function(index, item){
if(pathURL === item){
... ... @@ -232,9 +233,14 @@ layui.extend({
return location.hash = "/alarm/historywarning/bizId="+bizId;
}
// http://localhost:8088/?bigscreen=1&type=daping/#/
if(href.indexOf('bigscreen=1&type=daping') != -1 && pathURL !== '/bigscreen/daping'){
return location.hash = "/bigscreen/daping";
}
//独立页面
if(isIndPage || pathURL === '/user/login'|| pathURL === '/page/forward'){ //此处单独判断登入页，是为了兼容旧版（即未在 sessions.js 配置 indPage 的情况）
container.render(router.path.join('/')).done(function(){
if(isIndPage || pathURL === '/user/login' || pathURL === '/page/forward' || pathURL === '/bigscreen/daping'){ //此处单独判断登入页，是为了兼容旧版（即未在 sessions.js 配置 indPage 的情况）
container.render(router.path.join('/')).done(function(){
admin.pageType = 'alone';
});
} else { //后台框架页面
... ... @@ -575,7 +581,8 @@ layui.extend({
},function(e){
console.log(`（${tryIndex}）链接失败，重试中....`)
connectFlg = false;
if(location.hash.indexOf('#/user/login') == -1){
// 登录页面，展示大屏不进行token过期验证
if(location.hash.indexOf('#/user/login') == -1 && location.hash.indexOf('#/bigscreen/daping') == -1){
// 调用测试接口，出现过期则会跳转到登录页面
admin.req({
url: domainName + "/api-web/common/test"
... ...
... ... @@ -135,3 +135,27 @@ custom-class="config-dialog"
.margin-top-bottom-10{
margin:10px 0;
}
/* 边框闪烁 */
.arrowBox{
animation: glow 300ms ease-out infinite alternate;
}
/*@keyframes glow {
0% {
box-shadow: 0 0 5px rgba(245,166,35,.2), inset 0 0 5px rgba(245,166,35,.1), 0 0px 2px #f5a623;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(245,166,35,.6), inset 0 0 10px rgba(245,166,35,.4), 0 0px 2px #f5a623;
}
}*/
@keyframes glow {
0% {
box-shadow: 0 0 5px red, inset 0 0 5px red, 0 0px 5px red;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px red, inset 0 0 10px red, 0 0px 5px red;
}
}
... ...
... ... @@ -235,7 +235,6 @@ export default {
*/
let deleteItem = (row,index) =>{
proxy.$global.confirm("将永久删除该配置选项，请确认！", function () {
debugger
proxy.$http.get(`/api-web/alarmsubscribe/exclude/delete/${row.id}`, {}, function (res) {
if (res && res.success) {
proxy.$global.showMsg('保存成功！');
... ...
... ... @@ -2,7 +2,7 @@
body{
background-image: url(../img/img-bg-1.png);
background-size: 100%;
}
li{
list-style: none
... ... @@ -42,7 +42,7 @@ li{
flex-direction:column;
align-items: center;
/* background-color: red; */
}
... ... @@ -53,7 +53,7 @@ li{
background-image: url(../img/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve-8{
... ... @@ -127,7 +127,7 @@ li{
display: flex;
flex-flow: column;
justify-content: center;
}
... ... @@ -154,7 +154,7 @@ li{
height:250px;
margin-top:60px;
margin-left: 60px;
}
... ... @@ -195,4 +195,4 @@ body::-webkit-scrollbar-track{
-webkit-borderd-radius:2em;
-moz-borderd-radius:2em;
borderd-radius:2em;
}
\ No newline at end of file
}
... ...
... ... @@ -664,8 +664,8 @@ layui.define(['view'], function(exports){
}
//xwx add 首页增加业务健康度入口 2021-10-25 --end
, toBigScreen: function () {
//window.open(sessionStorage.getItem("bigScreen") + '?access_token=' + localStorage.getItem("access_token"));
window.open(window.location.origin + '/vue3/index.html#/zjdaping');
// window.open(window.location.origin + '/vue3/index.html#/zjdaping');
window.open(window.location.origin + '?bigscreen=1&type=daping/#/');
}
, toYTHViewScreen: function () {
window.open(sessionStorage.getItem("ythView") + '?access_token=' + localStorage.getItem("access_token"));
... ...
<title>浙江大屏</title>
<iframe src="/vue3/index.html#/zjdaping" class="layadmin-iframe" style="height: 100%!important;border: none;"/>
... ...
... ... @@ -223,14 +223,14 @@ li{
.info-top{
height:340px;
height:280px;
/*margin-top:-10px;*/
background-image: url(/vue3/src/assets/images/machineRoom/img-machineInfo-bg.png);
}
.info-bottom{
height:340px;
height:370px;
margin-top:20px;
background-image: url(/vue3/src/assets/images/machineRoom/img-deviceInfo-bg.png);
}
... ... @@ -292,4 +292,4 @@ body::-webkit-scrollbar-track{
-webkit-borderd-radius:2em;
-moz-borderd-radius:2em;
borderd-radius:2em;
}
\ No newline at end of file
}
... ...
... ... @@ -137,7 +137,6 @@ export default {
msg = res.msg;
cacheVisible.value=false;
proxy.$global.showMsg(msg);
debugger
if (params.type==0){
window.history.go(0);
}
... ... @@ -298,4 +297,4 @@ export default {
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -70,7 +70,49 @@ export default {
//根据htmlName确定引入的机房
proxy.src=proxy.commandVal
getDetail();
}
/**
* 展示机房告警信息，以及设置告警状态，机柜状态
*/
const getDetail = () => {
setTimeout(function (){
try {
const ele = proxy.$refs[`machineRoom`];
var info = $(ele.$refs['roomDetail'].$refs['roomTable']);
var params = {
theirRoomId : proxy.commandNameDataItem.machineRoomId
}
proxy.$http.get(`/api-web/bigScreen/cabinetRoom`, params, function (res) {
if (res && res.success == true) {
res.data.filter(function(v){
if(v.alarm == '0'){
// 有告警信息展示方式
info.find(`td[name="${v.theirCabinet}"] span`).addClass('arrowBox');//.css('color','blue')
info.find(`td[name="${v.theirCabinet}"] span`).css({
'top': '1px',
'left': '0.5px',
'height': '33px',
'width': '36px',
'padding': '1px',
'padding-top': '19px',
});
//info.find(`td[name="${v.theirCabinet}"] img`).attr('src','/vue3/src/assets/images/machineRoom/cabinet.alarm.gif');
}else if(v.resNum > 0){
// 有资源信息时展示图片替换
info.find(`td[name="${v.theirCabinet}"] img`).attr('src','/vue3/src/assets/images/machineRoom/cabinet.png');
}
})
}
})
} catch (e) {
console.log(e);
}
},500)
}
const handleCommand=(command,event)=>{
proxy.changeIndex++;
proxy.commandVal=command.props.name;
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>湖州灾备一机房平面图</span>-->
<div class="huzhouone-topcabinet">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>湖州灾备三机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 25%;padding-top: 30px">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>湖州灾备二机房平面图</span>-->
<div class="huzhouone-topcabinet" style="margin-left: 20%">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'zaibeione':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/cabinet.png" class="cabinet" alt="">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" :name="item.name" @click="goDetail(item)">
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="zaibei cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
<component :is="srcName" :src="machineData" />
\ No newline at end of file
<component :is="srcName" :src="machineData" ref="roomDetail" />
... ...
<div :class="['all']" class=" machine-room-parent">
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个物理服务器 -->
<!-- <div :class="['serve',{'img-serve-8':item.uPosition=='1-8U'}]"@click="showDevice(item)" v-for="(item,index) in serviceData">-->
<div :class="'serve '+item.serviceClass " :style="item.uClass" @click="showDevice(item)" v-for="(item,index) in serviceData">
<div class='img-serve' >
<img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>{{item.resName}}</div>
<div class='img-serve-text' style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100px;" :title="item.resName">{{item.resName}}-{{item.health}}</div>
<div class='lamp'>
<img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="">
<img src="/vue3/src/assets/images/machineRoom/greenColor.png" alt="">
<div class='img-lamp' v-if="item.health == 1">
<!--中-->
<img src="/vue3/src/assets/images/machineRoom/1Color.png" alt="资源状态：中">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：良">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：优">
</div>
<div class='img-lamp' v-else-if="item.health == 2" >
<!-- 良 -->
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：中">
<img src="/vue3/src/assets/images/machineRoom/2Color.png" alt="资源状态：良">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：优">
</div>
<div class='img-lamp' v-else>
<!-- 优 -->
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：中">
<img src="/vue3/src/assets/images/machineRoom/nocolor.png" alt="资源状态：良">
<img src="/vue3/src/assets/images/machineRoom/greenColor.png" alt="资源状态：优">
</div>
</div>
... ... @@ -29,7 +38,6 @@
</div>
<!-- 右侧机柜详细信息 -->
<div class='info' >
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
... ... @@ -40,11 +48,10 @@
<p>机柜容量：{{infoData.cabinetCapacity}}</p>
<p>设备数量：{{infoData.deviceNum}}台</p>
<p v-if="infoData.alarmNum">告警量：{{infoData.AlarmNum}}无告警</p>
<p v-if="!infoData.alarmNum">告警量：无告警</p>
<!--<p v-if="!infoData.alarmNum">告警量：无告警</p>-->
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom' id="info-bottom" v-if="isShowDevice">
<div class='info-contain'>
... ... @@ -56,13 +63,10 @@
<p>序 列 号：{{deviceDataInfo.serialnumber}}</p>
<p>业 务 IP：{{deviceDataInfo.ip}}</p>
<p>用 途：{{deviceDataInfo.purpose}}</p>
<p >告警量111：{{deviceDataInfo.alarmNum == 1 }}</p>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -192,7 +192,8 @@ export default {
name:CabinetNum,//机柜名称
cabinetCapacity :'42U',//机柜总U位数-目前都是42U
deviceNum:resData.length,//设备数量
alarmNum:'0',//警告量
alarmNum:resData.alarmNum,//警告量
health:resData.health,//状态
deviceData:resData
})
proxy.deviceDatas=deviceDatas;
... ... @@ -245,4 +246,4 @@ export default {
theirRoom
}
}
}
\ No newline at end of file
}
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>2号机房平面图</span>-->
<div v-for="(items,indexs) in tableData" :class="[{'xiaoshansecond-topcabinet':indexs==0,'xiaoshansecond-middlecabinet':indexs==1,'xiaoshansecond-bottomcabinet':indexs==2}]" class="xiaoshansecond-topcabinet" >
<table>
<table >
<tr >
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<!--
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
-->
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>7号机房平面图</span>-->
<div style="width: 100%;height: 100%;display: inline-flex">
<div class="xiaoshanseven-leftcabinet">
<table>
<tr v-for="(items,indexs) in tableData" :class="{'sevenempty':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<!--
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
-->
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
... ... @@ -15,8 +18,11 @@
<div class="xiaoshanseven-rightcabinet">
<table>
<tr v-for="(items,indexs) in tableData2" :class="{'sevenempty':items.length==0}">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<!--
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
-->
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" >
<div v-if="!isDetailShow" class="outlinediv machine-room-parent" ref="roomTable">
<!-- <span>3号机房平面图</span>-->
<div class="xiaoshanthird-topcabinet">
<table>
<tr v-for="(items,indexs) in tableData">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :width="item.width" @click="goDetail(item)">
<td v-if="items.length" v-for="(item,index) in items" :class="{'cursorClass':item.isShow}" :name="item.name" :width="item.width" @click="goDetail(item)">
<!--
<img v-if="item.isShow" :src="item.imgEmpty?'/vue3/src/assets/images/machineRoom/emptycabinet.png':'/vue3/src/assets/images/machineRoom/cabinet.png'" class="cabinet" alt="">
-->
<img v-if="item.isShow" src="/vue3/src/assets/images/machineRoom/emptycabinet.png" class="cabinet" alt="">
<span v-if="item.isShow" class="cabinetId">{{item.name}}</span>
</td>
</tr>
... ...
... ... @@ -415,7 +415,6 @@ export default {
let getPageInfo = ({page, limit}) => {
searchForm.value.page = page;
searchForm.value.pageSize = limit;
debugger
// 下一页搜索
getPage();
}
... ...