monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 1809c94af5ae66d9cfca13fe30732dba26edeabf 2 parents eb930e18 033d2da1

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

…master-v32-lushangqing
Inline Side-by-side
Showing 19 changed files with 1405 additions and 51 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
}
}
}
... ...
<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
}
}
}
... ...
... ... @@ -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
}
}
}
... ...