monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit ff418ae3a05aee234f0b6bd73f9d97e75a9134c9 2 parents c8240bd3 0d92cd9f

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 42 changed files with 1717 additions and 131 deletions
... ... @@ -3486,7 +3486,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
});
$("#kpi_press_times_id").find('textarea.layui-layer-input').val(num);
$("#kpi_press_times_id").find('textarea.layui-layer-input').css({height:"25px"}).attr("placeholder", "压制次数（必填）")
$("#kpi_press_times_id").find('textarea.layui-layer-input').css({height:"25px"}).attr("placeholder", "压制次数（必填，建议100以内）")
.attr("onkeyup","value=value.replace(/^(0+)|[^\\d]+/g,'')");
}
});
... ...
... ... @@ -11,7 +11,7 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
, sessions = layui.sessions;
var uuid = Math.uuid();
var lockNum = 10;//默认十次登录冻结
var lockNum = 5;//默认5次登录冻结，兼容天津
//获取默认配置
$.ajax({
url: '/config/getConfig',
... ... @@ -20,13 +20,15 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
},
async: false,
success(response) {
if (response && response.lockNum){ //如果配置了锁定次数，则更新
lockNum = response.lockNum;
}
}
});
//如果密码输入错误三次，第四次开启验证码
if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") >= 3) {
if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") > 5) {
if (sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") > lockNum) {
layer.alert('账号已被锁定，请联系管理员！');
}
//图形验证码
... ... @@ -119,6 +121,14 @@ layui.define(['sessions', 'form', 'common'],function (exports) {
var loginErrorNum = sessionStorage.getItem("lockNum") && sessionStorage.getItem("lockNum") != null ? parseInt(sessionStorage.getItem("lockNum")) : 0;
//增加4-20位密码验证 joke add 20211214
form.verify({
password: function (d) {
if (d.trim() <= 4) {
return "密码最少4位"
}
}
});
form.on('submit(LAY-user-login-submit)', function (obj) {
login(obj);
return false;
... ...
... ... @@ -19,7 +19,7 @@
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="loginPswd"></label>
<input type="password" name="password" id="loginPswd" lay-verify="required" placeholder="密码"
<input type="password" name="password" id="loginPswd" lay-verify="required|password" minlength="4" placeholder="密码"
class="layui-input">
</div>
<!--验证码-->
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-line',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: [
['product', '2015', '2016', '2017'],
['示例1', 43.3, 85.8, 93.7],
['示例2', 83.1, 73.4, 55.1],
['示例3', 86.4, 65.2, 82.5],
['示例4', 72.4, 53.9, 39.1]
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let sourceData = props.sourceData;
let arr = [];
for (let i = 0; i < sourceData[0].length; i++) {
arr.push({type: 'bar'})
}
let option = {
legend: {
right:'20px',
itemWidth:25,
itemHeight:5,
textStyle: {
color: '#fff',
fontSize: 7
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
dataset: {
source: props.sourceData
},
grid: {
top: '30px',
left: '10px',
right: '10px',
bottom: '10px',
containLabel: true
},
xAxis: {type: 'category'},
yAxis: {
axisLabel: {
formatter: '{value}',//以百分比显示
color:'#ffffff',
},
splitLine:{
lineStyle: {
type: 'dashed',
color:'#313c5e'
}
},
axisLine:{
type:'do',
show:true,//是否显示坐标线
lineStyle: {
color:'#21bad6'
}
},
},
series: arr
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'barStack',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: [
['product', '2015', '2016', '2017'],
['示例1', 43.3, 85.8, 93.7],
['示例2', 83.1, 73.4, 55.1],
['示例3', 86.4, 65.2, 82.5],
['示例4', 72.4, 53.9, 39.1]
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let sourceData = props.sourceData;
let arr = [];
for (let i = 1; i < sourceData[0].length; i++) {
let nameItem = sourceData[0][i];
let name = nameItem;
if(nameItem && nameItem.name){
name = nameItem.name;
}
arr.push({
name: name,
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: nameItem.color,
lineStyle: {
color: nameItem.color,
width: 1
}
}
},
})
}
let option = {
legend: {
itemWidth: 25,
itemHeight: 2,
textStyle: {
color: '#fff',
fontSize: "12px"
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
dataset: {
source: props.sourceData
},
grid: {
top: '30px',
left: '10px',
right: '10px',
bottom: '10px',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#21bad6'
}
},
axisLabel: {
color: '#ffffff',
fontSize: 10,
formatter: function (params) {
var newParamsName = '';
let paramsNameNumber = params.length;
let provideNumber = 3;
let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let i = 0; i < rowNumber; i++) {
let tempStr = '';
let start = i * provideNumber;
let end = start + provideNumber;
if (i == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
},
textStyle: {
rich: {
white: {
padding: [1, 0, 0, 0]
}
}
}
},
},
yAxis: {
axisLabel: {
formatter: '{value}',//以百分比显示
color: '#ffffff',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#21bad6'
}
},
},
series: arr
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-line',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: ['年报', '月报', '周报', '日报']
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let size = 100 / props.sourceData.length;
let seriesData = props.sourceData.map(function (v, i) {
return {value: (i + 1) * size, name: v};
})
let option = {
title: {
text: 'Funnel Compare',
subtext: 'Fake Data',
left: 'left',
top: 'bottom',
show: false
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c}%'
},
toolbox: {},
legend: {
show: false,
orient: 'vertical',
left: 'left',
data: props.sourceData
},
series: [
{
name: '',
type: 'funnel',
left: '10',
top: 20,
bottom: 20,
width: '80%',
min: 100,
max: 0,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
width: 100,
position: ''
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: seriesData
}
]
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-line',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
sourceData: {
type: Array,
default: [
['product', '2015', '2016', '2017'],
['示例1', 43.3, 85.8, 93.7],
['示例2', 83.1, 73.4, 55.1],
['示例3', 86.4, 65.2, 82.5],
['示例4', 72.4, 53.9, 39.1]
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "line" + (new Date()).getTime();
let getOption = () => {
let sourceData = props.sourceData;
let arr = [];
for (let i = 0; i < sourceData[0].length; i++) {
arr.push({type: 'line'})
}
let option = {
legend: {
right: '20px',
itemWidth: 25,
itemHeight: 5,
textStyle: {
fontSize: 10
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
dataset: {
source: props.sourceData
},
grid: {
top: '30px',
left: '10px',
right: '10px',
bottom: '10px',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
formatter: '{value}',//以百分比显示
color: '#313c5e',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#313c5e'
}
},
},
yAxis: {
axisLabel: {
formatter: '{value}',//以百分比显示
color: '#313c5e',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#313c5e'
}
},
axisLine: {
type: 'do',
show: true,//是否显示坐标线
lineStyle: {
color: '#313c5e'
}
},
},
series: arr
};
let line = echarts.init(document.getElementById(id));
setTimeout(function () {
line.clear();
line.setOption(option);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
<div :id="id" :style="{'width':width,'height':height}">
</div>
... ...
/**
* https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
* <p>
* 作者： Wang
* 时间：2021/12/3 14:30
*/
export default {
name: 'echarts-pie',
template: '',
components: {},
props: {
// 单位px
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
title: {
type: Object,
default: {
show: false,
text: '标题',
subtext: '辅助标题',
left: 'center'
}
},
// 列表
pieType: {
type: String,
default: ''
},
seriesData: {
type: Array,
default: [{
name: '',
data: [
{value: 1048, name: '示例1'},
{value: 735, name: '示例2'},
{value: 580, name: '示例3'},
{value: 484, name: '示例4'},
{value: 300, name: '示例5'}
]
}
]
}
},
data() {
return {}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let id = "pie" + (new Date()).getTime();
let pieClick = (param) => {
emit('pieClick', param, props.pieType);
}
let getOption = () => {
let series = props.seriesData.map(function (v) {
return {
name: v.name,
type: 'pie',
radius: '80%',
data: v.data,
center: ['30%', '50%'],
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
})
let option = {
title: props.title,
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
align: 'left'
}
},
legend: {
orient: 'vertical',
left: 'right',
y: 'bottom',
itemWidth: 25,
itemHeight: 5,
textStyle: {
color: '#fff',
fontSize: 10
}
},
series: series
};
let pie = echarts.init(document.getElementById(id));
setTimeout(function () {
pie.clear();
pie.setOption(option);
pie.on("click", pieClick);
}, 200);
}
// 挂载完
Vue.onMounted(() => {
getOption();
})
return {
id
}
}
}
... ...
... ... @@ -691,7 +691,8 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiSearchBox").val(),
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
netFlag: netFlag,
... ... @@ -724,7 +725,9 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiSearchBox").val(),
//alarmKpi: $("#alarmKpiSearchBox").val(),
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
netFlag: netFlag,
... ... @@ -981,7 +984,9 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
beginTime: $("#activewarningStartdate").val(),
endTime: $("#activewarningEnddate").val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiSearchBox").val(),
//alarmKpi: $("#alarmKpiSearchBox").val(),
alarmKpi: $("#alarmKpiSearchBox").val()!='KPI97B835A4'?$("#alarmKpiSearchBox").val():'',
isBus:$("#alarmKpiSearchBox").val()=='KPI97B835A4'?'Y':'',
durationVal: $('#inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#inline-condition-duration select[name="durationUnit"]').val(),
alarmTimeDay:todayStr,
... ...
... ... @@ -278,7 +278,9 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
durationVal: $('#his_inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#his_inline-condition-duration select[name="durationUnit"]').val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiHisSearchBox").val(),
//alarmKpi: $("#alarmKpiHisSearchBox").val(),
alarmKpi: $("#alarmKpiHisSearchBox").val()!='KPI97B835A4'?$("#alarmKpiHisSearchBox").val():'',
isBus:$("#alarmKpiHisSearchBox").val()=='KPI97B835A4'?'Y':'',
}
, height: 'full-245'
, cellMinWidth: 80
... ... @@ -309,7 +311,9 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
durationVal: $('#his_inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#his_inline-condition-duration select[name="durationUnit"]').val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiHisSearchBox").val(),
//alarmKpi: $("#alarmKpiHisSearchBox").val(),
alarmKpi: $("#alarmKpiHisSearchBox").val()!='KPI97B835A4'?$("#alarmKpiHisSearchBox").val():'',
isBus:$("#alarmKpiHisSearchBox").val()=='KPI97B835A4'?'Y':'',
},
success: function (res) {
var map = res.map;
... ... @@ -523,7 +527,9 @@ layui.define(['table', 'form', 'laydate', 'admin', 'layer', 'laytpl', 'common',
durationVal: $('#his_inline-condition-duration input[name="durationVal"]').val(),
durationUnit: $('#his_inline-condition-duration select[name="durationUnit"]').val(),
sortKey: sortKey,
alarmKpi: $("#alarmKpiHisSearchBox").val(),
//alarmKpi: $("#alarmKpiHisSearchBox").val(),
alarmKpi: $("#alarmKpiHisSearchBox").val()!='KPI97B835A4'?$("#alarmKpiHisSearchBox").val():'',
isBus:$("#alarmKpiHisSearchBox").val()=='KPI97B835A4'?'Y':'',
}
});
}
... ...
... ... @@ -327,3 +327,82 @@
-webkit-transform: rotate(360deg);
}
}
.assets-popper-class {
background-repeat: no-repeat!important;
padding: 0!important;
background-size: 100% 100%!important;
background: none!important;
border: none!important;
}
.layout2{
width: 318px!important;
height: 167px;
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/bg.png')!important;
}
.layout2 .left-item {
width: 40%;
height: 100px;
}
.layout2 .left-item .left-item-top{
width: 100%;
height: 30px;
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/left-bg.png')!important;
background-repeat: no-repeat!important;
background-size: 100px 30px!important;
margin-top: 45px;
margin-left: 15px;
font-size: 14px;
font-weight: bold;
color: white;
padding-left: 20px;
padding-top: 7px;
}
.layout2 .left-item .left-item-bottom{
width: 100%;
height: 50%;
background-image: url('/vue3/src/assets/images/zjdp/assets/left.png')!important;
background-repeat: no-repeat!important;
background-size: 100px 60px!important;
margin-top: 0px;
margin-left: 15px;
padding-left: 30px;
color: white;
}
.layout2 .right-item {
width: 60%;
height: 100px;
padding-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.layout2 .right-item .text{
background-image: url('/vue3/src/assets/images/zjdp/assets/layout2/text.png')!important;
background-repeat: no-repeat!important;
background-size: 90% 30px!important;
width: 100%;
height: 30px;
margin-top: 15px;
color: white;
padding-left: 10px;
padding-top: 3px;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.layout2 .right-item .text div {
margin-left: 5px;
}
.layout2 .right-item .text .dd {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
}
... ...
... ... @@ -423,6 +423,9 @@
width:30px;
height:30px;
}
.cursorClass{
cursor: pointer;
}
.position-absolute{
}
... ...
<div>
<div>
<el-progress :percentage="90" />
</div>
<div>
<cm-table-page v-if="list.columns.length > 0" :columns="list.columns"
:dataList="list.dataList"
@loaddata="getPageInfo"
:showIndex="true"
:showBorder="true"
:showPage="false"
:showTools="false"
:maxWidth="width"
:height="200">
</cm-table-page>
</div>
<!-- 弹框区域 -->
<cm-dialog top="3vh" title="曲线图" width="900px" :showDialogVisible="showLineDialog"
@hidedialog="closeLineDialog" :showFooter="false">
<template v-slot>
<div style="height: 300px">
<echarts-line height="300px" width="880px" />
</div>
</template>
</cm-dialog>
</div>
... ...
const lineDetail = () => {
let showLineDialog = Vue.ref(false);
let closeLineDialog = (flg) =>{
showLineDialog.value = flg;
}
return {
showLineDialog,
closeLineDialog
}
}
export default {
name: 'resultItemIndex',
template: '',
components: {
'echarts-line': Vue.defineAsyncComponent(
() => myImport('components/common/echarts/line/index')
)
},
data() {
return {}
},
props: {
faultType:{
type: String,
default:'NPM'
},
faultNo:{
type: String,
default:''
}
},
setup(props, {attrs, slots, emit}) {
let width = Vue.ref(window.innerWidth*0.8 - 190);
const {proxy} = Vue.getCurrentInstance();
let list = Vue.ref({
columns: [],
dataList: [],
total: 0
});
let getPage = () =>{
let data = {
"5e991f126b8ee03541976384": [
{
"id": "da57056823be410c848a4a4ab821de41",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "ccb5404e731ff9b7c2344c2806b41442",
"timestap": "2021-12-13T12:31:08.988+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976384",
"resName": "各地市-网上申报Weblogic",
"resType": "NPM_STREAM",
"kpiId": "count",
"kpiName": "业务量",
"flag": "base",
"kpiValue": "26299",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "bd8c7d4fdf1247d195652251c95acca0",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "ccb5404e731ff9b7c2344c2806b41442",
"timestap": "2021-12-13T12:31:08.988+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976384",
"resName": "各地市-网上申报Weblogic",
"resType": "NPM_STREAM",
"kpiId": "response_rate",
"kpiName": "响应率",
"flag": "base",
"kpiValue": "47.25",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "a9e00473c9964300bde164c1183ebe1d",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "ccb5404e731ff9b7c2344c2806b41442",
"timestap": "2021-12-13T12:31:08.988+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976384",
"resName": "各地市-网上申报Weblogic",
"resType": "NPM_STREAM",
"kpiId": "success_rate",
"kpiName": "成功率",
"flag": "base",
"kpiValue": "100",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
}
],
"5e966cec6b8e8d2938be120a": [
{
"id": "1f12837a6faf4193a3867759ee3d0bb8",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
"timestap": "2021-12-13T12:29:14.907+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e966cec6b8e8d2938be120a",
"resName": "nginx-Nginx代理 ",
"resType": "NPM_STREAM",
"kpiId": "count",
"kpiName": "业务量",
"flag": "base",
"kpiValue": "26299",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "11c19383b95c4ec8b30ea07f5c9e3f42",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
"timestap": "2021-12-13T12:29:14.907+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e966cec6b8e8d2938be120a",
"resName": "nginx-Nginx代理 ",
"resType": "NPM_STREAM",
"kpiId": "response_rate",
"kpiName": "响应率",
"flag": "base",
"kpiValue": "47.25",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "426fe02a1ebd4949a68167612933c880",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "2ba02341a1c5dc28f6a2bd362be58ca9",
"timestap": "2021-12-13T12:29:14.907+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e966cec6b8e8d2938be120a",
"resName": "nginx-Nginx代理 ",
"resType": "NPM_STREAM",
"kpiId": "success_rate",
"kpiName": "成功率",
"flag": "base",
"kpiValue": "100",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
}
],
"5e9594b66b8e8d293845bd70": [
{
"id": "84e0ad1f09e049fd97efe18c5eb9a40b",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "953ff1ab4a718866a2b91ae5da50627e",
"timestap": "2021-12-13T12:30:15.355+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e9594b66b8e8d293845bd70",
"resName": "MQ-EDAS",
"resType": "NPM_STREAM",
"kpiId": "count",
"kpiName": "业务量",
"flag": "base",
"kpiValue": "26299",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "e0e71be7a26f469b932f3b197c2ea7e8",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "953ff1ab4a718866a2b91ae5da50627e",
"timestap": "2021-12-13T12:30:15.355+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e9594b66b8e8d293845bd70",
"resName": "MQ-EDAS",
"resType": "NPM_STREAM",
"kpiId": "response_rate",
"kpiName": "响应率",
"flag": "base",
"kpiValue": "47.25",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "bd21a27f24cd459792c562a1a9067d98",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "953ff1ab4a718866a2b91ae5da50627e",
"timestap": "2021-12-13T12:30:15.355+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e9594b66b8e8d293845bd70",
"resName": "MQ-EDAS",
"resType": "NPM_STREAM",
"kpiId": "success_rate",
"kpiName": "成功率",
"flag": "base",
"kpiValue": "100",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
}
],
"5e991f126b8ee03541976383": [
{
"id": "f2a46c0548d74659bcf84b149029b4ea",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "d6fab6451da3d14dada155670c15ae5e",
"timestap": "2021-12-13T12:31:28.472+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976383",
"resName": "各地市-涉税文书Weblogic",
"resType": "NPM_STREAM",
"kpiId": "count",
"kpiName": "业务量",
"flag": "base",
"kpiValue": "26299",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "0b2d9d77ea6c4c0e8bc280802c48721c",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "d6fab6451da3d14dada155670c15ae5e",
"timestap": "2021-12-13T12:31:28.472+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976383",
"resName": "各地市-涉税文书Weblogic",
"resType": "NPM_STREAM",
"kpiId": "response_rate",
"kpiName": "响应率",
"flag": "base",
"kpiValue": "47.25",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
},
{
"id": "0ca1b9a73c5b4a34a49361a121eea219",
"faultId": "e011b982f0d2405a9d4d43df57199d05",
"faultNo": "GZ202112130014",
"targetId": "11cdc282437a91174d808e114954463d",
"targetType": "NPM",
"itemId": "d6fab6451da3d14dada155670c15ae5e",
"timestap": "2021-12-13T12:31:28.472+0800",
"bizId": "53bebbd79f384f619513b50666ea1d48",
"bizName": "电子税务局",
"resId": "5e991f126b8ee03541976383",
"resName": "各地市-涉税文书Weblogic",
"resType": "NPM_STREAM",
"kpiId": "success_rate",
"kpiName": "成功率",
"flag": "base",
"kpiValue": "100",
"collTime": "2021-12-04 10:50:00",
"dataType": "last",
"createTimeToMonth": "2021-12"
}
]
};
let dataList = [];
let col = [{
prop: 'resName',
label: '检测指标',
width: 100,
click: function (row) {
closeLineDialog(true);
}
}];
let index = 0;
for (let resId in data) {
let list = data[resId];
let item = {};
item.resId = list[0].resId;
item.resName = list[0].resName;
item.bizId = list[0].bizId;
item.bizName = list[0].bizName;
list.forEach(function (v){
item[v.kpiId] = v.kpiValue;
if(index == 0){
col.push({
prop: v.kpiId,
label: v.kpiName,
width: 80
})
}
});
dataList.push(item);
index ++;
}
// 设置数据
list.value.dataList = dataList;
list.value.columns = col;
}
const {
showLineDialog,
closeLineDialog
} = lineDetail();
// 监听编辑状态
Vue.watch(() => props.faultNo, (newValue, oldVlaue) => {
getPage();
});
// 挂载完
Vue.onMounted(() => {
getPage();
})
return {
width,
list,
showLineDialog,
closeLineDialog
}
}
}
... ...
... ... @@ -87,9 +87,13 @@ export default {
}
//添加应用
let addRes=(row,index)=>{
row.targetId=proxy.targetId;
// row.targetId=proxy.targetId;
let params={
targetId:proxy.targetId,
npmList:[row]
}
proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',[row],function (res){
proxy.$http.post('/api-web/fault/conf/npm/batchAddNpm',params,function (res){
if(res){
proxy.$global.showMsg('添加成功','success');
proxy.targetId=res.str
... ...
... ... @@ -401,7 +401,7 @@
<!--取消和保存-->
<div class="btn-faultDiagnosis flex-center">
<el-button>取消</el-button>
<el-button @click="goBackIndex">取消</el-button>
<el-button @click="saveConfigDetail" type="primary">保存</el-button>
</div>
... ...
... ... @@ -186,7 +186,18 @@ export default {
alarmLevel:[]
})
}
//模块数据
let modelData=[
{type:'gz',targetId:''},
{type:'netlink',targetId:''},
{type:'npm',targetId:''},
{type:'base',targetId:''},
{type:'apm',targetId:''},
{type:'log',targetId:''},
{type:'report',targetId:''},
]
return{
modelData,
faultDefinitionRadio,
faultStateRadio,
faultApplicationRadio,
... ... @@ -238,6 +249,9 @@ export default {
},
//打开网络监测卡片
clickNetworkMonitorFunc(index){
if(!this.isSaveModel()){
return;
}
this.hiddenAll();
this.networkMonitorHide = true;
this.isActiveIndex=index;
... ... @@ -250,6 +264,9 @@ export default {
},
//打开应用监测卡片
applicationMonitorFunc(index){
if(!this.isSaveModel()){
return;
}
this.hiddenAll();
this.applicationMonitorHide = true;
this.isActiveIndex=index;
... ... @@ -261,6 +278,9 @@ export default {
},
//打开基础环境卡片
basicEnvironmentFunc(index){
if(!this.isSaveModel()){
return;
}
this.postPropsData('base',index);
/*if(this.busTypeArr){
this.hiddenAll();
... ... @@ -275,6 +295,9 @@ export default {
},
//APM
apmMonitorFunc(index){
if(!this.isSaveModel()){
return;
}
this.hiddenAll();
this.apmMonitorHide = true;
this.isActiveIndex=index;
... ... @@ -285,6 +308,9 @@ export default {
},
//日志检测
logDetectionFunc(index){
if(!this.isSaveModel()){
return;
}
this.$global.showMsg('敬请期待...','warning');
return;
this.hiddenAll();
... ... @@ -297,6 +323,9 @@ export default {
},
//报告订阅
subscriptionReportFunc(index){
if(!this.isSaveModel()){
return;
}
this.$global.showMsg('敬请期待...','warning');
return;
this.hiddenAll();
... ... @@ -390,9 +419,13 @@ export default {
setDetailConfig(typeVal){
let that=this;
if(this.configData){
console.log("configData",this.configData,typeVal)
this.configData.map((item,index)=>{
if(item.type==typeVal){
that.targetId=item.targetId;
// that.targetId=item.targetId;
that.setTargetId(item.targetId);
that.faultConfId=item.faultConfId;
}
})
}
... ... @@ -400,7 +433,8 @@ export default {
this.propsData={
bizId:this.busTypeArr,
docId:this.docId,
targetId:this.targetId
targetId:this.targetId,
faultConfId:this.faultConfId
}
},
... ... @@ -425,7 +459,26 @@ export default {
getNetworkMonitorList(itemData){
console.log("itemdata",itemData)
this.networkMonitorVisible=false;
this.networkMonitorList=itemData;
this.networkMonitorList=itemData.networkMonitorList;
this.setTargetId(itemData.targetId);
// this.targetId=itemData.targetId;
},
//给每个模块设置targetId
setTargetId(val){
this.modelData.map((item,index)=>{
if(this.type==item.type){
item.targetId=val;
}
})
},
//获取模块对应的targetId
getTargetId(type){
let that=this;
this.modelData.map(item=>{
if(item.type==type){
that.targetId=item.targetId;
}
})
},
//点击添加应用检测
addApplicationMonitor(){
... ... @@ -434,13 +487,15 @@ export default {
//关闭应用监测添加弹框
getApplicationMoniList(itemData){
this.applicationMonitorVisible=false;
this.targetId=itemData;
this.setTargetId(itemData);
// this.targetId=itemData;
// this.applicationMonitorList=itemData;
this.getAppList();
},
//获取应用列表数据
getAppList(){
let that=this;
this.getTargetId('npm')
let params={
targetId:this.targetId,
bizId:this.busTypeArr
... ... @@ -464,12 +519,14 @@ export default {
getAPMList(itemData){
this.APMVisible=false;
// this.apmMonitorList=itemData;
this.targetId=itemData;
this.setTargetId(itemData);
// this.targetId=itemData;
this.getApmListInfo();
},
//获取apm列表数据
getApmListInfo(){
let that=this;
this.getTargetId('apm')
let params={
targetId:this.targetId,
bizId:this.busTypeArr
... ... @@ -506,14 +563,16 @@ export default {
deleteEnvironment(obj){
this.deleteItem(obj.id,obj.list)
},
//根据诊断文档id获取配置详情
//根据诊断文档列表的id获取配置详情
getDetailByid(){
let that=this;
if(this.docId){
let params={}
this.$http.get('/api-web/fault/conf/detail/'+this.docId,params,function (res){
if(res){
that.configData=res.data;
this.$http.get('/api-web/fault/conf/'+this.docId,params,function (res){
if(res && res.object){
that.configData=res.object.confDetailList;
that.faultConfId=that.configData[0].faultConfId;
that.name=res.object.name;
}
... ... @@ -578,6 +637,7 @@ export default {
let that=this;
let params={
type:this.type,
targetId:this.targetId,
state:this.state,
faultConfig:{
id:this.faultConfId,
... ... @@ -588,7 +648,8 @@ export default {
}
this.$http.post('/api-web/fault/conf/detail/saveConfigDetail',params,function (res){
if(res && res.success){
that.targetId=res.str;
that.targetId=res.map.configDetail.targetId;
that.faultConfId=res.map.configDetail.faultConfId;
that.$global.showMsg('保存成功','success')
that.switchModel();
... ... @@ -609,6 +670,7 @@ export default {
break;
case "npm":
//应用检测
this.getAppList();
break;
case "base":
//基础环境
... ... @@ -616,6 +678,7 @@ export default {
break;
case "apm":
//APM
this.getApmListInfo();
break;
case "log":
//日志检测
... ... @@ -630,6 +693,7 @@ export default {
//获取网络监测链路信息列表
getNetLinkList(){
let that=this;
this.getTargetId('netlink')
let params={
targetId:this.targetId
... ... @@ -649,6 +713,7 @@ export default {
this.$http.get('/api-web/fault/base/config/queryKpiInfo',{},function (res){
if(res && res.data){
that.alarmList=res.data;
that.kpiId=that.alarmList[0].kpiId;
}
})
... ... @@ -673,6 +738,8 @@ export default {
}
this.$http.post('/api-web/fault/conf/rule/saveOrUpdate',params,function (res){
if(res && res.success){
that.targetId=res.map.bFaultRule.targetId;
that.faultConfId=res.map.bFaultRule.faultConfId;
that.$global.showMsg('保存成功')
// that.alarmList=res.data;
}else{
... ... @@ -708,6 +775,19 @@ export default {
if(this.type=='npm'){
this.getAppList();
}
},
//返回首页
goBackIndex(){
this.$emit('backIndex','back')
},
//判断是否保存了模块
isSaveModel(){
if(!this.faultConfId){
this.$global.showMsg('请先保存模块','warning');
return false;
}else{
return true;
}
}
... ...
<el-dialog v-model="networkMonitorVisible" :title="titleName" width="60%" @close="closeDialog">
<el-dialog v-model="networkMonitorVisible" :title="titleName" width="90%" @close="closeDialog">
<el-row v-if="!tableVisible">
<el-col :span="6">
<div class="grid-content bg-purple network-monitor-popup-left">
... ... @@ -38,7 +38,7 @@
<div class="context-body">
<el-row v-if="!addSetLIstVisible">
<el-col :span="4" v-for="(itemNode,index) in nodeData">
<el-col :span="3" v-for="(itemNode,index) in nodeData">
<div class="list-step flex-div-start">
<div class="list-step-top flex-div">
<el-tooltip
... ... @@ -57,9 +57,9 @@
<li>添加节点</li>
</ul>
</template>
<div @click="addTableList(true)" :class="['step-img',{'isActive':itemNode[0].nodeName}]">
<div @click="addTableList(true)" :class="['step-img','flex-div-center',{'isActive':itemNode[0].nodeName}]">
<i v-if="itemNode[0].nodeName" class="icon-delete-right" @click.stop="deleteNode(item,index)"></i>
<i class="icon-step"><img :src="'/src/style/img/restypeimg/'+itemNode[0].path" alt=""></i>
<i class="icon-step flex-div-center"><img :src="'/src/style/img/restypeimg/'+itemNode[0].resType+'.png'" alt=""></i>
</div>
</el-tooltip>
<!-- <span :class="['list-line',{'isActive':item.nodeName && index<nodeData.length}]"></span>-->
... ...
... ... @@ -201,11 +201,13 @@ export default {
let addRes=(row,index)=>{
console.log("row",row,proxy.nodeData)
let bNetNodeList=row;
proxy.iconArr.map((v,i)=>{
if(row.resType==v.resType){
row.path=v.path;
}
})
bNetNodeList.isAdd=false;
// proxy.iconArr.map((v,i)=>{
// if(row.resType==v.resType){
// row.path=v.path;
// }
// })
//flag表示线或点 true点 false线
if(proxy.flag){
if(!proxy.nodeName){
... ... @@ -215,16 +217,16 @@ export default {
bNetNodeList.nodeName=proxy.nodeName;
bNetNodeList.type='dot';
proxy.backLink(bNetNodeList);
proxy.backLink(bNetNodeList,index);
}
}else{
bNetNodeList.type='line';
proxy.backLink(bNetNodeList);
proxy.backLink(bNetNodeList,index);
}
}
let backLink=(row)=>{
let backLink=(row,index)=>{
proxy.tableVisible=false;
let arr=proxy.nodeData;
... ... @@ -235,7 +237,14 @@ export default {
if(proxy.flag){
//插入的是点
console.log("isadd",row.isAdd)
// if(row.isAdd){
//isAdd为true代表是添加
proxy.nodeData.splice(length-1,0,[row]);
// }else{
//isAdd为false代表是修改
// proxy.nodeData.splice(index,1,[row]);
// }
}else{
//插入的是线
proxy.nodeData[length-2].push(row);
... ... @@ -244,7 +253,7 @@ export default {
}else{
proxy.nodeData.push([row]);
proxy.nodeData.push([{nodeName:'',id:''}])
proxy.nodeData.push([{nodeName:'',id:'',isAdd:true}])
}
console.log(" proxy.nodeData", proxy.nodeData,proxy.nodeData.length)
... ... @@ -360,13 +369,13 @@ export default {
if(res && res.data){
// let resData=res.data.reverse();
let resData=res.data;
resData.map((item,index)=>{
that.iconArr.map((v,i)=>{
if(item.resType==v.resType){
item.path=v.path;
}
})
})
// resData.map((item,index)=>{
// that.iconArr.map((v,i)=>{
// if(item.resType==v.resType){
// item.path=v.path;
// }
// })
// })
let arr=[];
for(let i=0;i<resData.length;i+=2){
arr.push(resData.slice(i,i+2))
... ... @@ -376,7 +385,7 @@ export default {
console.log('nodedata',that.nodeData,that.nodeData.length)
if(that.nodeData.length>0){
that.addSetLIstVisible=false;
that.nodeData.push([{nodeName:'',id:''}])
that.nodeData.push([{nodeName:'',id:'',isAdd:true}])
}else{
that.addSetLIstVisible=true;
... ... @@ -443,7 +452,11 @@ export default {
},
//关闭弹框
closeDialog(){
this.$emit('callback', this.networkMonitorList);
let obj={
networkMonitorList:this.networkMonitorList,
targetId:this.targetId
}
this.$emit('callback', obj);
},
... ... @@ -464,7 +477,7 @@ export default {
},
mounted () {
this.getAllIcon();
// this.getAllIcon();
this.setBizId();
this.getNetLinkList();
// this.getNodeData();
... ...
<component :is="componentItem" :diagnosisData="diagnosisData" @getItem="getItem" @getItemDetail="getItemDetail" :detailData="detailData" />
<component :is="componentItem" :diagnosisData="diagnosisData" @backIndex="backIndexFun" @getItem="getItem" @getItemDetail="getItemDetail" :detailData="detailData" />
<!--<FaultAddIndex></FaultAddIndex>-->
\ No newline at end of file
... ...
... ... @@ -73,6 +73,12 @@ export default {
proxy.componentItem=obj.componentName;
proxy.detailData=obj.item;
}
//返回首页回调函数
let backIndexFun=(val)=>{
console.log('gogogo',val)
// proxy.componentItem=val;
proxy.getListData();
}
return {
... ... @@ -83,7 +89,8 @@ export default {
diagnosisData,
getItem,
getItemDetail,
detailData
detailData,
backIndexFun
}
}
... ...
... ... @@ -43,24 +43,12 @@
<cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog"
@hidedialog="closeFaultDetailDialog" :showFooter="false">
<template v-slot>
<div>
<div style="text-align: left;height:720px;max-height:720px;overflow-y: auto">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-timeline-item v-for="item in faultDetailDetailInfo.items" center :timestamp="item.faultTypeName" placement="top" :color="item.color" :hollow="true">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/2 20:46</p>
<!-- <result-item :faultType="item.faultType" :faultNo="faultDetailDetailInfo.faultNo"></result-item>-->
<component v-bind:is="item.components" :faultType="item.faultType" :faultNo="faultDetailDetailInfo.faultNo" />
</el-card>
</el-timeline-item>
</el-timeline>
... ...
const faultDetail = () => {
const {proxy} = Vue.getCurrentInstance();
const { proxy } = Vue.getCurrentInstance();
let showFaultDetailDialog = Vue.ref(false);
let faultDetailDialogTitle = Vue.ref('');
let faultDetailDetailInfo = Vue.ref({
faultNo:'',
items:[{
faultType:'BASE',
faultTypeName:'基础',
components:'result-item',
color:'#67C23A'
},{
faultType:'NETLINK',
faultTypeName:'网络链路',
components:'result-item',
color:'#409EFF'
},{
faultType:'NPM',
faultTypeName:'NPM',
components:'result-item',
color:'#E6A23C'
},{
faultType:'APM',
faultTypeName:'APM',
components:'result-item',
color:'#F56C6C'
}]
});
let closeFaultDetailDialog = (flg) =>{
/**
* 关闭弹框
* <p>
* 作者： Wang
* 时间：2021/12/13 20:14
*/
let closeFaultDetailDialog = (flg) => {
showFaultDetailDialog.value = flg;
}
/**
* 设置弹框信息
* @param row
*/
let settingDetail = (row) =>{
// 设置标题
faultDetailDialogTitle.value = `${row.faultBody}诊断报告`;
faultDetailDetailInfo.value.faultNo = row.faultNo;
}
return {
settingDetail,
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
closeFaultDetailDialog,
faultDetailDetailInfo
}
}
export default {
name: 'resIndex',
template: '',
components: {},
components: {
'result-item':Vue.defineAsyncComponent(
() => myImport('components/page/faultDiagnosis/result/item/index')
)
},
data() {
return {
props: {
... ... @@ -29,6 +76,7 @@ export default {
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight - 20);
// 搜索表单内容
let searchForm = Vue.ref({
keyword: '',
... ... @@ -43,6 +91,9 @@ export default {
label: '故障主体',
click: function (row) {
// 展示弹框
closeFaultDetailDialog(true);
// 设置相信信息
settingDetail(row);
}
}, {
prop: 'createTime',
... ... @@ -50,6 +101,27 @@ export default {
}, {
prop: 'faultState',
label: '故障状态'
}, {
prop: 'solveway',
label: '处理方式'
}, {
prop: 'solvetime',
label: '处理时间'
}, {
prop: 'solveby',
label: '处理人'
}, {
prop: 'duration',
label: '持续时长'
}, {
prop: 'reason',
label: '原因分析'
}, {
prop: 'solution',
label: '处理方案'
}, {
prop: 'influencescope',
label: '影响范围'
}],
dataList: [],
total: 0
... ... @@ -82,14 +154,15 @@ export default {
let getPageInfo = ({page, limit}) => {
searchForm.value.page = page;
searchForm.value.pageSize = limit;
// 下一页搜索
getPage();
}
const {
settingDetail,
showFaultDetailDialog,
faultDetailDialogTitle,
faultDetailDetailInfo,
closeFaultDetailDialog
} = faultDetail();
... ... @@ -105,7 +178,14 @@ export default {
list,
getPage,
getPageInfo,
handleClick
handleClick,
// 告警需求弹框
settingDetail,
showFaultDetailDialog,
faultDetailDialogTitle,
faultDetailDetailInfo,
closeFaultDetailDialog
}
}
}
... ...
... ... @@ -3,30 +3,68 @@
<div class="search">
<div class="condition">
<el-form-item>
<el-input v-model="formInline.user" placeholder="输入关键字"></el-input>
<el-input v-model="searchForm.keyword" placeholder="输入关键字"
@keydown.enter.native="getPage"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formInline.region" placeholder="故障分类">
<!--<el-form-item>
<el-select v-model="searchForm.category" placeholder="故障分类">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form-item>-->
</div>
<div class="btns">
<el-form-item>
<el-button type="primary" @click="onSubmit">搜索</el-button>
<el-button type="primary" @click="getPage">搜索</el-button>
</el-form-item>
</div>
</div>
<cm-table-page :columns="[]" :dataList="[]"
@loaddata="getPage" :showIndex="true"
<div class="search-table">
<cm-table-page :columns="list.columns"
:dataList="list.dataList"
:total="list.total"
@loaddata="getPageInfo"
:showIndex="true"
:showSelection="true"
:pageSizes="[10,50,90, 200, 300, 400]" :pageSize="limit"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 105)"
:maxWidth="max">
:showBorder="true"
:showPage="true"
:showTools="true"
:height="(height - 105)">
<template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="handleClick(scope.row,scope.$index)">
处理
</el-button>
</template>
</cm-table-page>
</div>
</div>
<!-- 弹框区域 -->
<cm-dialog :title="faultDetailDialogTitle" width="80%" :showDialogVisible="showFaultDetailDialog"
@hidedialog="closeFaultDetailDialog" :showFooter="false">
<template v-slot>
<div>
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>Update Github template</h4>
<p>Tom committed 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
</cm-dialog>
</div>
... ...
const faultDetail = () => {
const {proxy} = Vue.getCurrentInstance();
let showFaultDetailDialog = Vue.ref(false);
let faultDetailDialogTitle = Vue.ref('');
/**
* 关闭弹框
* <p>
* 作者： Wang
* 时间：2021/12/13 20:14
*/
let closeFaultDetailDialog = (flg) => {
showFaultDetailDialog.value = flg;
}
return {
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
}
}
export default {
name: 'resIndex',
template: '',
components: {
},
components: {},
data() {
return {
props : {
label:'label',
children:'children'
props: {
label: 'label',
children: 'children'
}
}
},
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -20);
let height = Vue.ref(window.innerHeight - 20);
let formInline = Vue.ref({
user: '',
region: '',
// 搜索表单内容
let searchForm = Vue.ref({
keyword: '',
page: 1,
pageSize: 10
});
// 列表展示结果
let list = Vue.ref({
columns: [{
prop: 'faultBody',
label: '故障主体',
click: function (row) {
// 展示弹框
closeFaultDetailDialog(true);
// 设置标题
faultDetailDialogTitle.value = `${row.faultBody}诊断报告`;
}
}, {
prop: 'createTime',
label: '发生时间'
}, {
prop: 'faultState',
label: '故障状态'
}],
dataList: [],
total: 0
});
/**
* 分页查询
* <p>
* 作者： Wang
* 时间：2021/12/13 16:51
*/
let getPage = () => {
proxy.$http.get(`/api-web/fault/page`, searchForm.value, function (res) {
if (res && res.data) {
list.value.dataList = res.data;
}
});
}
let handleClick = (row, index) => {
}
/**
* 分页切换
* <p>
* 作者： Wang
* 时间：2021/12/13 17:06
*/
let getPageInfo = ({page, limit}) => {
searchForm.value.page = page;
searchForm.value.pageSize = limit;
// 下一页搜索
getPage();
}
const {
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
} = faultDetail();
// 挂载完
Vue.onMounted(() => {
// 初始化加载页面
getPage();
})
return {
height,
formInline
searchForm,
list,
getPage,
getPageInfo,
handleClick,
// 告警需求弹框
showFaultDetailDialog,
faultDetailDialogTitle,
closeFaultDetailDialog
}
}
}
... ...
... ... @@ -7,9 +7,11 @@
<div class="asset-overview-tip">
<div class="tip yxqk_tips_div">
<div class="asset-tip">
<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
<!-- // Start Wang 2021/12/14 14:48 去除悬浮 -->
<!--<p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>-->
<p> <i class="tip-i"></i> <span>资产总量</span></p>
<!--悬浮提示信息-->
<div class="yxqk_tips_container" v-show="isShow" >
<!--<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" class="tipDiv">
<li v-for="(item,index) in assetOverviewDataAll">
... ... @@ -18,13 +20,11 @@
</li>
</div>
</ul>
</div>
</div>-->
<!-- // End Wang 2021/12/14 14:48 去除悬浮 -->
</div>
<b id="yxjk_total_resource">{{totalData}}</b>
</div>
<div id="all_resource_status" :class="['yxqk__pie',pieClass]">
<span id="yxjk_resource_health_text">{{healthStatusName}}</span>
... ... @@ -34,20 +34,43 @@
</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 assetOverviewDataAll">
<img :src="'src/assets/images/zjdp/'+item.code+'.png'">
<img :src="'src/assets/images/zjdp/'+item.alias+'.png'">
<div style="margin-left: .02rem;">
<el-popover placement="right-start" trigger="click" @show="showPopover(item)" popper-class="assets-popper-class layout2">
<template #reference>
<div>
<p>{{item.name}}</p>
<div class="listNum">
<b>{{item.num}}</b><span>台</span>
<b>{{item.value}}</b><span>台</span>
</div>
</div>
</template>
<div style="display: flex;height: 100%">
<div class="left-item">
<div class="left-item-top">
{{item.name}}
</div>
<div class="left-item-bottom">
<b>{{item.value}}</b><span>台</span>
</div>
</div>
<div class="right-item" >
<div v-if="list.length == 0" class="text">
<span>暂无数据</span>
</div>
<div v-else v-for="d in list" class="text">
<div class="dd"></div>
<div class="name">{{d.name}}</div>
<div class="value">{{d.value}}</div>
<div class="unit">台</div>
</div>
</div>
</div>
</el-popover>
</div>
</li>
</div>
... ...
... ... @@ -39,52 +39,64 @@ export default {
proxy.totalData=data.count;
}
//分类总量
if(data && data.object){
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.object,function (i,v) {
$.each(data.data,function (i,v) {
if(i<6){
showData.push(v)
}
/* const resType = v.code;
if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
if(resType.indexOf('HOST_MINICOMPUTER_PARTITION') >= 0 ) { minicomputer_partition += v.num; }
if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }*/
});
/* showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
showData.push({name:"存储",num:storage,code:'STORAGE'});
showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});*/
//类型统计
proxy.assetOverviewData=showData;
proxy.assetOverviewDataAll=data.object;
proxy.assetOverviewDataAll=data.data;
//悬浮提示
}
});
})
const showTip=()=>{
proxy.isShow=true;
}
const hideTip=()=>{
proxy.isShow=false;
}
// Start Wang 2021/12/14 14:47 展示资产详情
let list = Vue.ref([]);
let obj = Vue.ref({});
/**
* 显示时触发
* <p>
* 作者： Wang
* 时间：2021/12/14 15:06
*/
let showPopover = (item) =>{
let itemId = item.id;
if(obj.value[itemId]){
list.value = obj.value[itemId];
}
// 获取数据
proxy.$http.get('/api-web/bigScreen/getSeedSataus',{id:itemId},function (res){
if(res && res.data){
list.value = res.data;
if(res.data.length > 0){
obj.value[itemId] = res.data;
}
}
},null,false)
}
// End Wang 2021/12/14 14:47 展示资产详情
return{
showTip,
hideTip
hideTip,
list,
showPopover
}
}
}
... ...