monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit b580cf993729ab8d1b56a9c34bc7d655434e11e4 1 parent 8482d6ae

资源列表

Inline Side-by-side
Showing 5 changed files with 121 additions and 18 deletions
... ... @@ -2,12 +2,12 @@
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px;">
<el-table-column v-if="showIndex" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
<el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" />
<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
:width="item.width">
<template #default="scope" v-if="item.prop =='resName'">
<!--<template #default="scope" v-if="item.prop =='resName'">
<el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link>
</template>
<template #default="scope" v-else>
... ... @@ -23,6 +23,23 @@
<span v-else>
{{scope.row[item.prop]}}
</span>
</template>-->
<template #default="scope">
<slot :row="scope.row" :prop="item.prop" :column="item">
<div v-if="typeof(item.render) == 'function'" >
<div v-if="typeof(item.click) == 'function'">
<el-link :type="linkType" :underline="isLink" @click="item.click(scope.row)" v-html="item.render(scope.row)"></el-link>
</div>
<div v-else>
<el-link :type="linkType" :underline="isLink" v-html="item.render(scope.row)"></el-link>
</div>
</div>
<span v-else>
{{scope.row[item.prop]}}
</span>
</slot>
</template>
</el-table-column>
</el-table>
... ...
... ... @@ -2,12 +2,47 @@
<el-row :gutter="5" >
<el-col :span="4" >
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
<el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/>
<div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
<el-link type="info" :underline="false"><i class="iconfont icon-liebiao"></i> 资源类型</el-link>
</div>
<el-tree :data="treeData" :default-expanded-keys="[1]" node-key="id" @node-click="handleNodeClick"/>
</div>
</el-col>
<el-col :span="20" >
<div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" >
<div style="height: 80px;text-align: left;width: 80%;margin-left: 10px;margin-top: 10px;">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="资源名称">
<el-input v-model="searchForm.resName" placeholder="请输入资源名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
<cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true"
:showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
:showPage="true" :height="(height - 80)">
<template #default="{row,prop,column}">
<el-link v-if="prop == 'resPositon' || prop == 'cabinetNo'" :underline="true" @click="cellClick(row,prop,column)">{{row[prop]}}</el-link>
<el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop]}}</el-link>
</template>
</cm-table-page>
</div>
</el-col>
</el-row>
<cm-dialog :title="cellDetail.title" width="60%" :showDialogVisible="dialogFlg" :showFooter="true" @hidedialog="showDialog" :showOkBtn="false" cancelText="关闭">
<template v-slot>
<img v-if="cellDetail.prop == 'cabinetNo'" src="/vue3/src/assets/images/res/img01.png" style="width: 50%">
<img v-if="cellDetail.prop == 'resPositon'" src="/vue3/src/assets/images/res/img02.jpg" style="width: 50%">
<!--<div v-if="cellDetail.prop == 'cabinetNo'" :style="{'background-image':'url(/vue3/src/assets/images/res/img01.png)'}" > </div>
<div v-if="cellDetail.prop == 'resPositon'" :style="{'background-image':'url(/vue3/src/assets/images/res/img02.png)'}" > </div>-->
<div>
{{cellDetail.row[cellDetail.prop]}}
</div>
</template>
</cm-dialog>
</div>
... ...
... ... @@ -17,47 +17,98 @@ export default {
setup() {
const {proxy} = Vue.getCurrentInstance();
let height = Vue.ref(window.innerHeight -10);
// 树数据
const treeData = Vue.ref([]);
const tableData = Vue.ref([]);
const dialog = Vue.ref({
title: '资源类型配置',
activeName: ''
// 表格数据对象
const obj = Vue.ref({});
// 当前点击
const currentNode = Vue.ref({});
// 搜索框内容
const searchForm = Vue.ref({
resName:''
});
const dialogVisible = Vue.ref(false);
// 弹框
let showDialog = () => {
dialogVisible.value = true;
}
// 单元格点及保存的数据
let cellDetail = Vue.ref({});
// 展示U位弹框
let dialogFlg = Vue.ref(false);
// const dialog = Vue.ref({
// title: '资源类型配置',
// activeName: ''
// });
// const dialogVisible = Vue.ref(false);
//
// // 弹框
// let showDialog = () => {
// dialogVisible.value = true;
// }
// 获取左侧树结构
let loadTree = () => {
proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) {
if (res && res.data) {
treeData.value = res.data
currentNode.value = res.data[0];
loadResList();
}
});
}
let loadResList = () =>{
if(currentNode.value){
proxy.$http.get(`/api-web/v32/res/list/list/${currentNode.value.id}`, {}, function (res) {
if (res && res.object) {
obj.value = res.object
}
});
}
}
let handleNodeClick =(data) =>{
console.log(data)
currentNode.value = data;
loadResList();
}
// 展示机房或者机柜信息
let showDialog = (flg) =>{
dialogFlg.value = flg;
}
let cellClick = (row,prop,column) =>{
showDialog(true);
cellDetail.value['prop'] = prop;
cellDetail.value['row'] = row;
cellDetail.value['title'] = column.label + '详情';
}
// 挂载完
Vue.onMounted(() => {
loadTree();
console.log('onMounted');
})
return {
/*showDialog,
dialogVisible,
dialog*/
currentNode,
treeData,
searchForm,
height,
obj,
handleNodeClick,
loadResList,
dialogFlg,
showDialog,
dialogVisible,
tableData,
dialog
cellDetail,
cellClick
}
}
}
... ...