monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 0f6801bf9e0cb9afe79d98a2cb52d72aab2c8e1a 1 parent 2740205b

【1463】创建快照和查看历史快照

Inline Side-by-side
Showing 7 changed files with 215 additions and 1 deletions
... ... @@ -3329,6 +3329,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
//lsq 2022-04-25 增加ping详情提交按钮
title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`;
title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`;
if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
/*
title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
... ... @@ -3354,6 +3356,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
//lsq 2022-04-25 增加ping详情提交按钮
title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="历史数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
title += `<a class="layui-icon res-view-history" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="快照历史记录" style="top: -3px;float: right;"> <img width="20" src="/src/style/img/snapshothistory.png" ></a>`;
title += `<a class="layui-icon res-view-addSnapshot" data-id=${resId} lay-tips="创建快照" style="top: -3px;float: right; margin-right: 10px"> <img width="20" src="/src/style/img/snapshotadd.png" ></a>`;
if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
/*
title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
... ... @@ -3645,7 +3649,39 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
});
});
//end lsq 2022-04-24
$('a.res-view-addSnapshot').unbind('click').on('click', function () {
var resId = $(this).data('id');
layer.confirm('将创建该资源的所有快照信息，请确认', {
btn: ['确定', '取消'] //按钮
}, function () {
admin.req({
url: common.domainName + '/api-web/snapshot/his/add?access_token=' + layui.sessions.getToken().access_token +'&resId=' + resId
, type: 'get'
, done: function (res) {
if (res.success) {
layer.msg('操作成功！', {offset: '15px', icon: 1, time: 2000});
} else {
layer.msg('操作失败，请与管理员联系！', {offset: '15px', icon: 7, time: 2000});
}
}
});
});
});
$('a.res-view-history').unbind('click').on('click', function () {
let name = $(this).data('resname')+' |'+$(this).data('restypename')+' |'+$(this).data('ip')+' |'+'历史快照数据';
let paramStr = '?resId=' + $(this).data('id');
layer.open({
title: [name, 'font-size:18px;'],
type: 2,
area: ['90%', '90%'],
shadeClose: true,//开启遮罩层
id: 'res-history',
content: ['/vue3/index.html#/vue3/snapshot/history' + paramStr, 'no'],
cancel: function () {
clearTimeout();
}
});
});
// 查看资产配置信息
$('a.res-view-assets-details').unbind('click').on('click', function () {
var $that = $(this);
... ...
... ... @@ -155,6 +155,12 @@ const routes = [{
name: 'snapshot',
component: () => myImport('views/snapshot/index')
},
//快照历史
{
path: '/vue3/snapshot/history',
name: 'snapshotHistory',
component: () => myImport('views/snapshot/history/index')
},
];
// hash模式： createWebHashHistory
... ...
<div :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}"
class="container">
<div :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"
class="cm-card">
<div class="search">
<div class="condition ping">
<el-form-item>
<el-date-picker
:size="$global.elementConfig.size.input"
end-placeholder="开始时间"
placeholder="开始时间"
type="datetime"
v-model="search.startTime"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-date-picker
:size="$global.elementConfig.size.input"
end-placeholder="结束时间"
placeholder="结束时间"
type="datetime"
v-model="search.endTime"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button :size="$global.elementConfig.size.button" type="primary" @click="getDataList">查询</el-button>
</el-form-item>
</div>
</div>
<div class="search-table">
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList" :height="(height - 110)"
:loading="false" :pageSize="search.pageSize" :showBorder="true"
:showIndex="true" :showPage="true" :showSelection="true"
:showTools="true" :total="tableData.count" @loaddata="loaddata">
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg">
<i @click="goResDetail(scope.row.resName,scope.row.resType)" class="el-icon-view" title="查看详情"></i>
</span>
<span class="icon-bg">
<i @click="handleDelete(scope.row)" class="el-icon-delete" title="删除"></i>
</span>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
... ...
export default {
name: 'snapshotHistory',
template: '',
components: {},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let resId = Vue.ref('');
let search = Vue.ref({
pageNum: 1,
pageSize: 20,
startTime: '',
endTime: '',
keyWord: ''
});
//表格字段
let tableData = Vue.ref({
count: 0,
dataList: [],
columns: [
{
prop: 'createUser',
label: '快照创建人',
sortable: true,
align: 'center',
width: '250'
},
{
prop: 'createTime',
label: '快照创建时间',
sortable: true,
align: 'center',
width: '300'
},
{
prop: 'batchNo',
label: '批次号',
sortable: true,
align: 'center',
}
]
})
// 获取列表
let getDataList = () => {
let params = {
resId: resId.value,
startTime: search.value.startTime,
endTime: search.value.endTime,
keyWord: search.value.keyword
}
proxy.$http.get(`/api-web/snapshot/his/getList`, params, function (res) {
if (res.success) {
tableData.value.dataList = res.data;
tableData.value.count = res.count;
} else {
tableData.value.dataList = [];
tableData.value.count = 0;
}
});
}
//删除快照历史数据
let handleDelete = (row) =>{
let params = {
resId: resId.value,
batchNo: row.batchNo
}
proxy.$global.confirm('将永久删除该快照历史数据，请确认', function () {
proxy.$http.get(`/api-web/snapshot/his/delete`, params, function (res) {
if (res.success) {
proxy.$global.showMsg("删除成功","success");
getDataList();
} else {
proxy.$global.showMsg("删除失败","error");
}
});
});
}
//获取resId
let getResId = () => {
resId.value = proxy.$route.query.resId;
}
let loaddata = ({page, limit}) => {
search.value.pageNum = page;
search.value.pageSize = limit;
getDataList();
}
//查看资源详情
let goResDetail = (resName, resType) => {
proxy.$global.openDetail(resId.value, resType, proxy);
}
// 挂载完
Vue.onMounted(() => {
getResId();
getDataList();
})
return {
height,
resId,
getDataList,
tableData,
search,
loaddata,
goResDetail,
handleDelete
}
}
}
... ...
... ... @@ -250,6 +250,12 @@ const routes = [{
name: 'snapshot',
component: () => myImport('views/snapshot/index')
},
//快照历史
{
path: '/vue3/snapshot/history',
name: 'snapshotHistory',
component: () => myImport('views/snapshot/history/index')
},
];
// hash模式： createWebHashHistory
... ...