服务器管理添加取消闪烁功能
1、服务器管理添加取消闪烁功能 2、优化并修改bug
This commit is contained in:
康冉冉
@@ -759,6 +759,14 @@ export function getAlarmFlag() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 取消高亮
|
||||
export function removeAlarmFlag(query) {
|
||||
return request({
|
||||
url: '/system/registration/removeAlarmFlag',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function bindBusByClient(query) {
|
||||
return request({
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
<el-button size="mini" type="text" icon="el-icon-d-arrow-right"><span style="margin-left: -5px;">{{item && item.title ? item.title : '更多'}}</span></el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<!-- <el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" :hasPermi="[dropBut.hasPermi]">{{dropBut.content}}</el-dropdown-item>-->
|
||||
<el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" v-if="checkPermi([dropBut.hasPermi])">{{dropBut.content}}</el-dropdown-item>
|
||||
<el-dropdown-item v-for="dropBut of item.more" :command="dropBut.fnCode" :icon="dropBut.icon" v-show="dropBut && dropBut.showName ? dropBut.showVal.includes(scope.row[dropBut.showName]) : true" v-if="checkPermi([dropBut.hasPermi])">{{dropBut.content}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
+75
-124
@@ -1,75 +1,72 @@
|
||||
<template>
|
||||
<div style="height: calc(100vh);color: #000;overflow: scroll;padding: 0;">
|
||||
<iframe id="myIframe" src="http://172.16.15.52/grafana" frameborder="0" style="width: 100%;height: 100%;" @load="onIframeLoad"></iframe>
|
||||
<div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">
|
||||
<!-- header -->
|
||||
<div class="w100" style="height: 17%;min-height: 110px;">
|
||||
<div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
|
||||
style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
|
||||
<div style="font-size: 14px;">{{item.title}}</div>
|
||||
<div style="margin: 15px 0 10px;">
|
||||
<div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>
|
||||
<img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">
|
||||
<img v-else src="@/assets/images/line.png" class="fr" width="100" alt="">
|
||||
</div>
|
||||
<div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- middle -->
|
||||
<div class="w100" style="height: 35%;margin: 1% 0;">
|
||||
<div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
|
||||
<EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
|
||||
</div>
|
||||
<div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
|
||||
<EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>
|
||||
</div>
|
||||
<div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
|
||||
<EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div class="w100" style="height: 44%;margin: 1% 0 0;">
|
||||
<div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">
|
||||
<div style="font-size: 14px;height: 7%">
|
||||
<span>服务器带宽收益</span>
|
||||
<span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
|
||||
</div>
|
||||
<div style="height: 93%;overflow: scroll;" class="newSty w100">
|
||||
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">
|
||||
<div style="font-size: 14px;height: 7%">
|
||||
<span>资源监控</span>
|
||||
<span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
|
||||
</div>
|
||||
<div style="height: 93%;overflow: scroll;" class="newSty w100">
|
||||
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">-->
|
||||
<!-- <!– 拖拽容器 –>-->
|
||||
<!-- <draggable-->
|
||||
<!-- class="w100 h100"-->
|
||||
<!-- v-model="echartList"-->
|
||||
<!-- :animation="150"-->
|
||||
<!-- :handle="'.el-collapse-item__header'"-->
|
||||
<!-- :ghost-class="'ghost-item'"-->
|
||||
<!-- :chosen-class="'chosen-item'"-->
|
||||
<!-- @start="onDragStart"-->
|
||||
<!-- @end="onDragEnd">-->
|
||||
<!-- <template v-for="(val,index) of echartList">-->
|
||||
<!-- <el-collapse v-model="activeNames" class="w100 h100">-->
|
||||
<!-- <el-collapse-item :title="val.title" name="1" class="w100 h100">-->
|
||||
<!-- <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>-->
|
||||
<!-- </el-collapse-item>-->
|
||||
<!-- </el-collapse>-->
|
||||
<!-- </template>-->
|
||||
<!-- </draggable>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- <div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">-->
|
||||
<!-- <!– header –>-->
|
||||
<!-- <div class="w100" style="height: 17%;min-height: 110px;">如果20岁的康子晴考到了北京上大学，当时的我48岁，他45岁，我爸妈80岁，老二17岁，我们在北京找个工作，租个三室-->
|
||||
<!-- <div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"-->
|
||||
<!-- style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">-->
|
||||
<!-- <div style="font-size: 14px;">{{item.title}}</div>-->
|
||||
<!-- <div style="margin: 15px 0 10px;">-->
|
||||
<!-- <div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>-->
|
||||
<!-- <img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">-->
|
||||
<!-- <img v-else src="@/assets/images/line.png" class="fr" width="100" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– middle –>-->
|
||||
<!-- <div class="w100" style="height: 35%;margin: 1% 0;">-->
|
||||
<!-- <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">-->
|
||||
<!-- <EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">-->
|
||||
<!-- <EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">-->
|
||||
<!-- <EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– footer –>-->
|
||||
<!-- <div class="w100" style="height: 44%;margin: 1% 0 0;">-->
|
||||
<!-- <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">-->
|
||||
<!-- <div style="font-size: 14px;height: 7%">-->
|
||||
<!-- <span>服务器带宽收益</span>-->
|
||||
<!-- <span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="height: 93%;overflow: scroll;" class="newSty w100">-->
|
||||
<!-- <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">-->
|
||||
<!-- <div style="font-size: 14px;height: 7%">-->
|
||||
<!-- <span>资源监控</span>-->
|
||||
<!-- <span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="height: 93%;overflow: scroll;" class="newSty w100">-->
|
||||
<!-- <TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--<!– <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">–>-->
|
||||
<!--<!– <!– 拖拽容器 –>–>-->
|
||||
<!--<!– <draggable–>-->
|
||||
<!--<!– class="w100 h100"–>-->
|
||||
<!--<!– v-model="echartList"–>-->
|
||||
<!--<!– :animation="150"–>-->
|
||||
<!--<!– :handle="'.el-collapse-item__header'"–>-->
|
||||
<!--<!– :ghost-class="'ghost-item'"–>-->
|
||||
<!--<!– :chosen-class="'chosen-item'"–>-->
|
||||
<!--<!– @start="onDragStart"–>-->
|
||||
<!--<!– @end="onDragEnd">–>-->
|
||||
<!--<!– <template v-for="(val,index) of echartList">–>-->
|
||||
<!--<!– <el-collapse v-model="activeNames" class="w100 h100">–>-->
|
||||
<!--<!– <el-collapse-item :title="val.title" name="1" class="w100 h100">–>-->
|
||||
<!--<!– <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>–>-->
|
||||
<!--<!– </el-collapse-item>–>-->
|
||||
<!--<!– </el-collapse>–>-->
|
||||
<!--<!– </template>–>-->
|
||||
<!--<!– </draggable>–>-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -191,62 +188,16 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.srcdoc = `<!DOCTYPE html><html><body><p>Hello</p></body></html>`;
|
||||
document.body.appendChild(iframe); // 必须插入
|
||||
// this.serverTableList();
|
||||
// this.resMonitorTableList();
|
||||
// this.getCountBusiness();
|
||||
// this.getSumTrafficByServer();
|
||||
// this.getSumTrafficBySwitch();
|
||||
// this.getCountSwitchNum();
|
||||
// this.getServerOnlineRate();
|
||||
// this.getCountDeviceNumTop5();
|
||||
},
|
||||
mounted() {
|
||||
// 隐藏项目自己的头部导航
|
||||
const headNavSty = document.getElementsByClassName('headNavTopSty');
|
||||
if (headNavSty) {
|
||||
headNavSty[0].style.display = 'none';
|
||||
}
|
||||
this.serverTableList();
|
||||
this.resMonitorTableList();
|
||||
this.getCountBusiness();
|
||||
this.getSumTrafficByServer();
|
||||
this.getSumTrafficBySwitch();
|
||||
this.getCountSwitchNum();
|
||||
this.getServerOnlineRate();
|
||||
this.getCountDeviceNumTop5();
|
||||
},
|
||||
methods: {
|
||||
onIframeLoad() {
|
||||
const iframe = document.getElementById('myIframe');
|
||||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
// const targetElement = iframeDoc.querySelector('.css-119uihn');
|
||||
// targetElement.style.display = 'none';
|
||||
|
||||
const style = iframeDoc.createElement('style');
|
||||
style.textContent = `
|
||||
.css-cplb2m {
|
||||
display: none!important;
|
||||
}
|
||||
// 隐藏侧边菜单后，头部导航向左移动
|
||||
.css-1ef5w88 {
|
||||
left: 0!important;
|
||||
}
|
||||
// 头部导航
|
||||
.css-119uihn {
|
||||
display: none!important;
|
||||
}
|
||||
.css-1nnt5aa {
|
||||
display: none!important;
|
||||
}
|
||||
.css-1v5vjvd {
|
||||
padding-top: 40px!important;
|
||||
}
|
||||
.css-7g0550 {
|
||||
top: 40px!important;
|
||||
}
|
||||
.css-1jmwar8-page-container {
|
||||
padding-left: 0!important;
|
||||
}
|
||||
`;
|
||||
iframeDoc.head.appendChild(style);
|
||||
},
|
||||
|
||||
|
||||
getCountBusiness(){
|
||||
countBusiness().then(res => {
|
||||
this.headerList[0].num = res && res.data;
|
||||
|
||||
@@ -189,7 +189,7 @@
|
||||
|
||||
<script setup name="Register">
|
||||
import Form from '@/components/form/index.vue';
|
||||
import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic, virNetInterfaceChild, getAlarmFlag} from '@/api/disRevenue/resource';
|
||||
import {listHandle, networkList, getScriptResultBySn, getLogicalNode, addRemark, updateRemark, repBandwidthSubmit, bindBusPublic, virNetInterfaceChild, getAlarmFlag, removeAlarmFlag} from '@/api/disRevenue/resource';
|
||||
import {listAllBusinessList} from "@/api/disRevenue/earnManage"
|
||||
import TableList from '@/components/table/index.vue';
|
||||
import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
|
||||
@@ -287,13 +287,14 @@
|
||||
{content: '选择业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', hasPermi: 'resource:serverRegister:pubilcNet'},
|
||||
{content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'rocketmq:traffic'},
|
||||
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
|
||||
{title: '更多', hasPermi: ['system:businessDeploy', 'rocketmq:policy', 'rocketmq:monitorPolicy', 'rocketmq:remote', 'resource:serverRegister:tagRemarkEdit', 'resource:serverRegister:mtrChartVew'], more: [
|
||||
{title: '更多', hasPermi: ['system:businessDeploy', 'rocketmq:policy', 'rocketmq:monitorPolicy', 'rocketmq:remote', 'resource:serverRegister:tagRemarkEdit', 'resource:serverRegister:mtrChartVew', 'resource:serverRegister:cancelFlash'], more: [
|
||||
{content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'system:businessDeploy'},
|
||||
{content: '下发脚本策略', fnCode: 'issueScript', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'rocketmq:policy'},
|
||||
{content: '下发监控策略', fnCode: 'issueMonitor', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'rocketmq:monitorPolicy'},
|
||||
{content: '查看执行结果', fnCode: 'result', type: 'text', icon: 'el-icon-s-check', hasPermi: 'rocketmq:remote'},
|
||||
{content: '修改标签', fnCode: 'tagRemark', type: 'text', icon: 'el-icon-s-check', hasPermi: 'resource:serverRegister:tagRemarkEdit'},
|
||||
{content: 'MTR探测丢包率趋势图', fnCode: 'mtrChartVew', type: 'text', icon: 'el-icon-s-check', hasPermi: 'resource:serverRegister:mtrChartVew'},
|
||||
{content: '修改标签', fnCode: 'tagRemark', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:serverRegister:tagRemarkEdit'},
|
||||
{content: 'MTR探测丢包率趋势图', fnCode: 'mtrChartVew', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:mtrChartVew'},
|
||||
{content: '取消闪烁', fnCode: 'cancelFlash', type: 'text', showName: 'alarmFlag', showVal: 'true', icon: 'el-icon-magic-stick', hasPermi: 'resource:serverRegister:cancelFlash'},
|
||||
]
|
||||
}
|
||||
// {content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
|
||||
@@ -710,6 +711,12 @@
|
||||
this.pubilcNetOpen = false;
|
||||
this.tagOpen = false;
|
||||
break;
|
||||
case 'cancelFlash':
|
||||
removeAlarmFlag({id: rowData.id}).then(res => {
|
||||
console.log('res===',res);
|
||||
this.getHightLight();
|
||||
});
|
||||
break;
|
||||
case 'export':
|
||||
// let dataList = [];
|
||||
// Object.keys(this.columns).forEach(item => {
|
||||
|
||||
Reference in New Issue
Block a user