monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 92f2b7e00d80646a219324bced61fcd4ef9b35f8 1 parent 6ca8e23b

CMDB数据同步功能静态页面搭建及路由配置 #1

Inline Side-by-side
Showing 7 changed files with 374 additions and 0 deletions
<title>监控对接CMDB功能</title>
<iframe src="/vue3/index.html#/cmdbdatasync" frameborder="0" class="layadmin-iframe" style="height: 99.5%!important;"/>
... ...
... ... @@ -109,6 +109,12 @@ const routes = [{
name: 'esDataIndex',
component: () => myImport('views/esData/index'),
},
//监控对接CMDB功能
{
path: '/cmdbdatasync',
name: 'cmdbdatasync',
component: () => myImport('views/cmdbdatasync/index'),
},
];
// hash模式： createWebHashHistory
... ...
<div class="cmdbdatasyncEdit-container" style="min-height: 500px;">
<div class="search-table">
<cm-table-page :columns="columns" :dataList="editTbaleData"
:showIndex="true"
@loaddata = "loaddata"
:showSelection="false"
:showBorder="true"
:loading="false"
:pageSize="pageSize"
:showPage="false"
:showTools="false"
:height="height - 110">
<template #default="{row,prop,column}">
<div>
<el-input v-model="row[prop]" placeholder="Please input" />
<!--<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changeProperty(row,prop,column)" v-model="row[prop]"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option label="是" :value="0"></el-option>
<el-option label="否" :value="1"></el-option>
</el-select>-->
</div>
</template>
</cm-table-page>
</div>
<div class="save-button" style="text-align:right;">
<el-button type="primary" style="margin-top:20px;margin-right:10px;" @click="saveEdit">确定</el-button>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'cmdbdatasyncEdit',
template: '',
components: {
},
props: {
tableData:{
type:Object,
default: {}
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let editTbaleData=Vue.ref(props.tableData.dataList);
let columns=Vue.ref(props.tableData.columns)
//保存编辑
let saveEdit=()=>{
//保存接口 todo
let param={
editTbaleData:editTbaleData.value,
visibility:false
}
emit("callbackedit",param)
}
// 挂载完
Vue.onMounted(() => {
})
return {
height,
editTbaleData,
columns,
saveEdit
}
}
}
... ...
<div class="container" :style="{'height':height+'px','max-height':height+'px','display':'flex'}">
<div class="async-left-tree" style="width:200px;overflow-x: auto;background: #fff;border-right:1px solid #f2f2f2;">
<el-tree style="padding-top:10px;" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
node-key="id" :default-checked-keys="checkedKeys"
/>
</div>
<div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px','flex':'1'}">
<div class="search">
<div class="condition">
<el-form-item >
<el-input v-model="search.keyword" placeholder="关键字"></el-input>
</el-form-item>
<el-form-item >
<el-button @click="getDataList">查询</el-button>
</el-form-item>
<el-form-item >
<el-button @click="handleEdit">编辑</el-button>
</el-form-item>
<el-form-item >
<el-button @click="handleRefresh">同步</el-button>
</el-form-item>
</div>
</div>
<div class="search-table">
<cm-table-page :columns="tableData.columns" :dataList="tableData.dataList"
:showIndex="true"
:total="tableData.count"
@loaddata = "loaddata"
@selectionChange="selectionChange"
:showSelection="true"
:showBorder="true"
:loading="false"
:pageSize="pageSize"
:showPage="true"
:showTools="true"
:height="height - 110">
<template #default="{row,prop,column}">
<div v-if="prop == 'resName'">
<span class="resName-span" style="cursor: pointer;color:#1e9fff" @click="goResDetail(row.resId,row.resName,row.resType)">{{row.resName}}</span>
</div>
</template>
<template #tools="{scope}">
<div class="list-handle">
<span class="icon-bg" @click="handleEdit(1,scope.row)"><i class="el-icon-edit-outline" title="编辑"></i></span>
<span class="icon-bg" @click="handleRefresh(1,scope.row)"><i class="el-icon-refresh" title="同步"></i></span>
</div>
</template>
</cm-table-page>
</div>
</div>
</div>
<!--弹框-->
<cm-dialog :title="dialog.title" width="90%" :showDialogVisible="dialog.show" @hidedialog="hideDialog" :showFooter="false">
<template v-slot>
<cmdbdatasyncEdit :tableData="dialog.tableData" @callbackedit="callbackedit"/>
</template>
</cm-dialog>
... ...
export default {
name: 'cmdbdatasync',
template: '',
components: {
'cmdbdatasyncEdit': Vue.defineAsyncComponent(
() => myImport('views/cmdbdatasync/cmdbdatasyncEdit/index')
)
},
props: [],
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight);
let treeData=Vue.ref([
{
label: '计算机设备计算机设备计算机设备计算机设备计算机设备',
id:1,
children: [
{
label: '小型机分区',
id:"1-1",
},
{
label: 'PC服务器',
id:'1-2',
children:[]
},
],
},
{
label: '虚拟化',
id:2,
children: [
{
label: 'VMWARE',
id:'2-1',
children: [
{
label: 'vm资源池',
id:"2-1-1",
children: []
},
],
},
{
label: '虚拟机',
id:"2-2",
},
],
},
{
label: '存储设备',
id:'3',
children: [
{
label: '共享存储',
id:'3-1',
},
],
}]) // 所有的树结点
let handleNodeClick=(data,node)=>{
console.log("*(*(*(",node,data);
getDataList();
}
let search = Vue.ref({
keyword: '',
pageNum: 1,
pageSize: 20,
});
//表格字段
let tableData = Vue.ref({
count:0,
dataList: [{
resName:'资源一'
},{
resName:'资源34'
}],
columns: [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
width: '250'
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'host',
label: 'IP地址',
sortable: true,
align: 'center',
width: '200'
}, {
prop: 'type',
label: '日志来源',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'program',
label: '日志类型',
sortable: true,
align: 'center',
width: '200'
},
{
prop: 'message',
label: '日志内容',
sortable: true,
align: 'center',
},
]
})
let dialog = Vue.ref({
title : "编辑",
show:false,
tableData : {}
});
let loaddata = ({page, limit}) => {
search.value.pageNum = page;
search.value.pageSize = limit;
}
let hideDialog = (flg) => {
dialog.value.show = flg;
}
//全选事件
let selectionData=Vue.ref([]);//选择的数据
let selectionChange= (val) =>{
selectionData.value=val;
}
// 处理弹框
let handle = (row) =>{
hideDialog(true);
dialog.value.tableData.dataList= row;
dialog.value.tableData.columns=tableData.value.columns;
}
//编辑
let handleEdit = (flag,row) =>{
if(flag==1){
handle([row]);
}else{
if(selectionData.value.length>0){
handle(selectionData.value);
}else{
proxy.$global.showMsg('请选择数据','warning')
}
}
}
//同步 todo
let handleRefresh = (flag,row) =>{
if(flag==1){
//单个同步 row-->对象
}else{
//多选同步 selectionData.value-->数组
}
}
//编辑返回数据
let callbackedit=(obj)=>{
console.log("***",obj.editTbaleData,obj.visibility)
hideDialog(obj.visibility)
//obj.editTbaleData编辑后的数据，todo
// getDataList();//获取列表数据
}
//查看资源详情
let goResDetail=(resId,resName,resType)=>{
proxy.$global.openDetail(resId, resType, proxy);
}
//获取资源树数据 todo
let getResData=()=>{
proxy.$http.post(`/api-web/`, {}, function (res) {
if (res && res.data) {
treeData.value = res.data;
}
});
}
// 获取列表 todo
let getDataList = () => {
let params={
pageNum: search.value.pageNum,
pageSize: search.value.pageSize,
keyword:search.value.keyword
}
proxy.$http.post(`/api-web/`, params, function (res) {
if (res && res.object) {
tableData.value.dataList = res.object;
tableData.value.count = parseInt(res.object.total);
} else {
tableData.value.dataList = [];
tableData.value.count = 0;
}
});
}
// 挂载完
Vue.onMounted(() => {
// getDataList();//获取列表数据
// getResData();//获取资源树数据
})
return {
treeData,
handleNodeClick,
getResData,
height,
search,
dialog,
hideDialog,
selectionChange,
selectionData,
handle,
loaddata,
tableData,
getDataList,
handleEdit,
handleRefresh,
callbackedit,
goResDetail,
}
}
}
... ...
... ... @@ -176,6 +176,12 @@ const routes = [{
name: 'esDataIndex',
component: () => myImport('views/esData/index'),
},
//监控对接CMDB功能
{
path: '/cmdbdatasync',
name: 'cmdbdatasync',
component: () => myImport('views/cmdbdatasync/index'),
},
];
// hash模式： createWebHashHistory
... ...