monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit c935427ec68976c25ec1aaeb34be4c16290c670f 2 parents 8a0a7267 38af7231

Merge branch 'master-500-dev-ztq1' into 'master-500-dev' 

快照概览页面优化，快照管理接口调用



See merge request !740
Inline Side-by-side
Showing 4 changed files with 311 additions and 151 deletions
... ... @@ -4,30 +4,53 @@
<div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
<el-form :inline="true">
<el-form-item>
<el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyword" placeholder="关键字检索" />
<el-input clearable :size="$global.elementConfig.size.input" v-model="queryParams.keyWord" placeholder="关键字检索" />
</el-form-item>
<el-form-item>
<el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.bizType" placeholder="资源类型">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
<el-dropdown>
<cm-res-type-tree-input @callback="getResType" clearable collapseTags multiple/>
</el-dropdown>
<!-- <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.resType" placeholder="资源类型">-->
<!-- <el-option label="Zone one" value="shanghai" />-->
<!-- <el-option label="Zone two" value="beijing" />-->
<!-- </el-select>-->
</el-form-item>
<el-form-item>
<el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.devType" placeholder="业务类型">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
<el-dropdown>
<cm-biz-type-tree-input @callback="getBizType" clearable collapseTags multiple/>
</el-dropdown>
<!-- <el-select clearable :size="$global.elementConfig.size.input" v-model="queryParams.busId" placeholder="业务类型">-->
<!-- <el-option label="Zone one" value="shanghai" />-->
<!-- <el-option label="Zone two" value="beijing" />-->
<!-- </el-select>-->
</el-form-item>
<el-form-item>
<el-button :size="$global.elementConfig.size.button" type="primary">查询</el-button>
<el-button @click="handleQuery" :size="$global.elementConfig.size.button" type="primary">查询</el-button>
</el-form-item>
</el-form>
<el-button-group>
<el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>
<el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>
<el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button>
<el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近七日</el-button>
<el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
<el-popover
v-model:visible="visiblePopover"
:width="420"
placement="bottom-end">
<template #reference>
<el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
</template>
<el-date-picker
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleChangeDatetime"
v-model="datetimerange"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-popover>
</el-button-group>
</div>
</div>
... ... @@ -52,22 +75,31 @@
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 110"
:loading="false"
:pageSize="search.pageSize"
:pageSize="queryParams.pageSize"
:showBorder="true"
:showIndex="true"
:showPage="true"
:showSelection="false"
:showTools="true"
:total="tableData.count"
:total="queryParams.count"
@loaddata="loaddata">
<template #tools="{scope}">
<div class="list-handle">
<el-tootip effect="dark"
content="详情"
placement="top">
<span class="icon-bg" style="color: #69a1f6">
<i class="el-icon-document"></i>
</span>
<span class="icon-bg" style="color:#dd3532">
</el-tootip>
<el-tootip effect="dark"
content="删除"
placement="top">
<span class="icon-bg" style="color:#dd3532" @click="handleDel(scope.row)">
<i class="el-icon-delete"></i>
</span>
</el-tootip>
</div>
</template>
</cm-table-page>
... ...
... ... @@ -5,56 +5,25 @@ export default {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let formSize = Vue.ref('default');
let datetimerange = Vue.ref([]);
let visiblePopover = Vue.ref(false);
let queryParams = Vue.ref({
keyword:undefined,
bizType:undefined,
devType:undefined,
})
let btnGroupType = Vue.ref(0);
let search = Vue.ref({
program: '',
sortBy: 'dbTime',
scopeBy: 'dbTimeStr.keyword',
keyword: '',
type: 'syslog',
keyWord:'',
resType:'',
busId:'',
time:"today",
pageNum: 1,
pageSize: 10,
dateTime: [],
resType: '',
});
count:0,
})
let btnGroupType = Vue.ref(0);
//表格字段
let tableData = Vue.ref({
count: 0,
dataList: [
{
logDate:"PC服务器",
resName:"稽核服务器jhxc1",
resTypeName:"95.16.16.93",
host:"陈婷婷",
type:"",
program:"高鹏",
message:"刘文",
}, {
logDate:"",
resName:"",
resTypeName:"",
host:"",
type:"",
program:"",
message:"",
},{
logDate:"",
resName:"",
resTypeName:"",
host:"",
type:"",
program:"",
message:"",
},
],
dataList: [],
columns: [
{
prop: 'logDate',
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
... ... @@ -68,40 +37,40 @@ export default {
width: '250'
},
{
prop: 'resTypeName',
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'host',
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'type',
prop: 'busTypeName',
label: '所属业务系统',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'program',
prop: 'nickname',
label: '业务系统负责人',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'message',
prop: 'createUser',
label: '快照负责人',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'message',
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
... ... @@ -111,32 +80,67 @@ export default {
})
let loaddata = ({page, limit}) => {
search.value.pageNum = page;
search.value.pageSize = limit;
queryParams.value.pageNum = page;
queryParams.value.pageSize = limit;
getDataList();
}
let getResType = (arr) => {
let types = arr.map(function (v) {
return v.id;
});
queryParams.value.resType = types.join(',');
}
let getBizType = (arr) => {
let types = arr.map(function (v) {
return v.busId;
});
queryParams.value.busId = types.join(',');
}
// 获取列表
let getDataList = () => {
// console.log(queryParams.value);
proxy.$http.get(`/api-web/snapshot/manage/getList`,queryParams.value,(res)=>{
// console.log(res.data);
tableData.value.dataList = res.data;
queryParams.value.count = res.count;
},(err)=>{
console.log(err);
})
};
// 查询事件
let handleQuery = ()=> {
queryParams.value.pageSize=10;
queryParams.value.pageNum=1;
getDataList();
}
// 按钮组点击事件
let handleBtnGroup = (val)=>{
console.log(btnGroupType.value);
btnGroupType.value = val;
console.log(val);
queryParams.value.time = val;
if (val == 4){
visiblePopover.value = !visiblePopover.value;
}else{
getDataList();
getEchartsData();
}
};
// echarts
let bizChartsRefs = Vue.ref(null);
let devChartsRefs = Vue.ref(null);
let snapshotChartsRefs = Vue.ref(null)
let snapshotChartsRefs = Vue.ref(null);
let bizCharts = Vue.ref('')
let devCharts = Vue.ref('')
let snapshotCharts = Vue.ref('')
let getEcharts = ()=>{
let bizCharts = echarts.init(bizChartsRefs.value);
bizCharts = echarts.init(bizChartsRefs.value);
let bizOption = {
grid:{
top:"14%",
bottom:"8%"
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'item'
... ... @@ -144,7 +148,7 @@ export default {
color:"#60a0f7",
xAxis: {
type: 'category',
data: ['PC服务器', '虚拟化', '共享存储', '路由器', '数据库'],
data: [],
axisTick:false,
},
yAxis: {
... ... @@ -162,7 +166,7 @@ export default {
},
series: [
{
data: [120, 200, 150, 80, 70,],
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
... ... @@ -173,11 +177,13 @@ export default {
}
bizCharts.setOption(bizOption);
let devCharts = echarts.init(devChartsRefs.value);
devCharts = echarts.init(devChartsRefs.value);
let devOption = {
grid:{
top:"14%",
bottom:"8%"
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'item'
... ... @@ -185,7 +191,7 @@ export default {
color:"#60a0f7",
xAxis: {
type: 'category',
data: ['电子税务局', '税库银系统', '电子底账', '出口退税', '数字人事'],
data: [],
axisTick:false,
},
yAxis: {
... ... @@ -203,7 +209,7 @@ export default {
},
series: [
{
data: [120, 200, 150, 80, 70,],
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
... ... @@ -214,11 +220,13 @@ export default {
}
devCharts.setOption(devOption);
let snapshotCharts = echarts.init(snapshotChartsRefs.value);
snapshotCharts = echarts.init(snapshotChartsRefs.value);
let shapshotOption = {
grid:{
top:"14%",
bottom:"8%"
top:"8%",
bottom:"8%",
left:"4%",
containLabel:true,
},
tooltip: {
trigger: 'item'
... ... @@ -226,7 +234,7 @@ export default {
color:"#60a0f7",
xAxis: {
type: 'category',
data: ['07-06', '07-05', '07-04', '07-03', '07-02'],
data: [],
axisTick:false,
},
yAxis: {
... ... @@ -244,7 +252,7 @@ export default {
},
series: [
{
data: [120, 200, 150, 80, 70,],
data: [],
type: 'bar',
barWidth: 26,//设置柱状图大小
itemStyle:{
... ... @@ -256,8 +264,116 @@ export default {
snapshotCharts.setOption(shapshotOption);
}
let getEchartsData = ()=>{
let obj = {
time:queryParams.value.time,
}
let resTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/resTypeTop`,obj,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
resTypeData.xaxis.push(item.xaxis);
resTypeData.yaxis.push(item.yaxis)
})
bizCharts.setOption({
xAxis:{
data:resTypeData.xaxis,
},
series:[
{
data:resTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let busTypeData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/busTop`,obj,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
busTypeData.xaxis.push(item.xaxis);
busTypeData.yaxis.push(item.yaxis)
})
devCharts.setOption({
xAxis:{
data:busTypeData.xaxis,
},
series:[
{
data:busTypeData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
let snapshotNumData = {
xaxis:[],
yaxis:[],
}
proxy.$http.get(`/api-web/snapshot/manage/snapshotNum`,obj,(res)=>{
// console.log(res.object);
res.object.forEach(item=>{
snapshotNumData.xaxis.push(item.xaxis);
snapshotNumData.yaxis.push(item.yaxis)
})
snapshotCharts.setOption({
xAxis:{
data:snapshotNumData.xaxis,
},
series:[
{
data:snapshotNumData.yaxis
}
]
});
},(err)=>{
console.log(err);
})
}
// 时间范围快捷键 修改事件
let handleChangeDatetime = (value)=>{
visiblePopover.value = false;
queryParams.value.time = value.join(',');
getDataList();
getEchartsData();
}
// 表格删除事件
let handleDel = (row)=>{
// console.log(row);
proxy.$global.confirm("确认删除吗？", function () {
deleteItems([row.resId],[row.batchNo]);
})
}
//删除
let deleteItems = (ids,nos) => {
let params = {
resId: ids.toString(),
batchNo:nos.toString(),
}
proxy.$http.get('/api-web/snapshot/his/delete', params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
handleQuery()
}
})
}
Vue.onMounted(()=>{
getEcharts();
getDataList();
getEchartsData();
})
return{
... ... @@ -265,12 +381,19 @@ export default {
formSize,
queryParams,
tableData,
search,
btnGroupType,
bizChartsRefs,
devChartsRefs,
snapshotChartsRefs,
handleBtnGroup,
datetimerange,
visiblePopover,
handleChangeDatetime,
getResType,
getBizType,
handleQuery,
loaddata,
handleDel,
}
}
}
\ No newline at end of file
... ...
... ... @@ -3,11 +3,28 @@
<div class="search">
<div class="condition esData-conditon" style="justify-content: end;width: 100%;">
<el-button-group>
<el-button @click="handleBtnGroup(0)" :type="btnGroupType==0?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup(1)" :type="btnGroupType==1?'primary':''">近七日</el-button>
<el-button @click="handleBtnGroup(2)" :type="btnGroupType==2?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup(3)" :type="btnGroupType==3?'primary':''">近90天</el-button>
<el-button @click="handleBtnGroup(4)" :type="btnGroupType==4?'primary':''">自定义</el-button>
<el-button @click="handleBtnGroup('today')" :type="queryParams.time=='today'?'primary':''">今天</el-button>
<el-button @click="handleBtnGroup('week')" :type="queryParams.time=='week'?'primary':''">近七日</el-button>
<el-button @click="handleBtnGroup('month')" :type="queryParams.time=='month'?'primary':''">近30天</el-button>
<el-button @click="handleBtnGroup('quarter')" :type="queryParams.time=='quarter'?'primary':''">近90天</el-button>
<el-popover
v-model:visible="visiblePopover"
:width="420"
placement="bottom-end">
<template #reference>
<el-button @click="handleBtnGroup(4)" :type="queryParams.time!='today' && queryParams.time!='week' && queryParams.time!='month' && queryParams.time!='quarter'?'primary':''">自定义</el-button>
</template>
<el-date-picker
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
@change="handleChangeDatetime"
v-model="datetimerange"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-popover>
</el-button-group>
</div>
</div>
... ... @@ -37,13 +54,13 @@
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:height="height - 110"
:loading="false"
:pageSize="search.pageSize"
:pageSize="queryParams.pageSize"
:showBorder="true"
:showIndex="true"
:showPage="true"
:showSelection="false"
:showTools="true"
:total="tableData.count"
:total="queryParams.count"
@loaddata="loaddata">
<template #tools="{scope}">
<div class="list-handle">
... ...
... ... @@ -5,50 +5,23 @@ export default {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let btnGroupType = Vue.ref(0);
let search = Vue.ref({
program: '',
sortBy: 'dbTime',
scopeBy: 'dbTimeStr.keyword',
keyword: '',
type: 'syslog',
let datetimerange = Vue.ref([]);
let visiblePopover = Vue.ref(false);
let queryParams = Vue.ref({
keyWord:'',
resType:'',
busId:'',
time:"today",
pageNum: 1,
pageSize: 10,
dateTime: [],
resType: '',
});
count:0,
})
//表格字段
let tableData = Vue.ref({
count: 0,
dataList: [
{
logDate:"PC服务器",
resName:"稽核服务器jhxc1",
resTypeName:"95.16.16.93",
host:"陈婷婷",
type:"",
program:"高鹏",
message:"刘文",
}, {
logDate:"",
resName:"",
resTypeName:"",
host:"",
type:"",
program:"",
message:"",
},{
logDate:"",
resName:"",
resTypeName:"",
host:"",
type:"",
program:"",
message:"",
},
],
dataList: [],
columns: [
{
prop: 'logDate',
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
... ... @@ -62,40 +35,40 @@ export default {
width: '250'
},
{
prop: 'resTypeName',
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'host',
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'type',
prop: 'busTypeName',
label: '所属业务系统',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'program',
prop: 'nickname',
label: '业务系统负责人',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'message',
prop: 'createUser',
label: '快照负责人',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'message',
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
... ... @@ -105,8 +78,8 @@ export default {
})
let loaddata = ({page, limit}) => {
search.value.pageNum = page;
search.value.pageSize = limit;
queryParams.value.pageNum = page;
queryParams.value.pageSize = limit;
getDataList();
}
// 获取列表
... ... @@ -116,7 +89,12 @@ export default {
// 按钮组点击事件
let handleBtnGroup = (val)=>{
btnGroupType.value = val;
queryParams.value.time = val;
if (val == 4){
visiblePopover.value = !visiblePopover.value;
}else{
}
};
// echarts
... ... @@ -124,8 +102,12 @@ export default {
let devChartsRefs = Vue.ref(null);
let snapshotChartsRefs = Vue.ref(null);
let peopleSSChartsRefs = Vue.ref(null);
let bizCharts = Vue.ref('');
let devCharts = Vue.ref('');
let snapshotCharts = Vue.ref('');
let peopleSSCharts = Vue.ref('');
let getEcharts = ()=>{
let bizCharts = echarts.init(bizChartsRefs.value);
bizCharts = echarts.init(bizChartsRefs.value);
let bizOption = {
grid:{
top:"14%",
... ... @@ -166,7 +148,7 @@ export default {
}
bizCharts.setOption(bizOption);
let devCharts = echarts.init(devChartsRefs.value);
devCharts = echarts.init(devChartsRefs.value);
let devOption = {
grid:{
top:"14%",
... ... @@ -207,7 +189,7 @@ export default {
}
devCharts.setOption(devOption);
let snapshotCharts = echarts.init(snapshotChartsRefs.value);
snapshotCharts = echarts.init(snapshotChartsRefs.value);
let shapshotOption = {
grid:{
top:"14%",
... ... @@ -296,23 +278,29 @@ export default {
peopleSSCharts.setOption(peopleOption);
}
// 时间范围快捷键 修改事件
let handleChangeDatetime = (value)=>{
visiblePopover.value = false;
queryParams.value.time = value.join(',');
}
Vue.onMounted(()=>{
getEcharts();
})
Vue.onMounted(()=>{
})
return {
height,
search,
tableData,
queryParams,
btnGroupType,
handleBtnGroup,
bizChartsRefs,
devChartsRefs,
snapshotChartsRefs,
peopleSSChartsRefs,
datetimerange,
visiblePopover,
handleChangeDatetime
}
}
}
\ No newline at end of file
... ...