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 @@ @@ -2,12 +2,12 @@
2 <!-- 表格--> 2 <!-- 表格-->
3 <el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height" 3 <el-table :border="showBorder" v-loading="loading" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
4 style="width: 100%;margin: 0px 0px;"> 4 style="width: 100%;margin: 0px 0px;">
5 - <el-table-column v-if="showIndex" type="index" :label="indexLabel" align="center" width="50"/>  
6 - <el-table-column v-if="showSelection" type="selection" width="55" /> 5 + <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
  6 + <el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" />
7 7
8 <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 " 8 <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 "
9 :width="item.width"> 9 :width="item.width">
10 - <template #default="scope" v-if="item.prop =='resName'"> 10 + <!--<template #default="scope" v-if="item.prop =='resName'">
11 <el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link> 11 <el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link>
12 </template> 12 </template>
13 <template #default="scope" v-else> 13 <template #default="scope" v-else>
@@ -23,6 +23,23 @@ @@ -23,6 +23,23 @@
23 <span v-else> 23 <span v-else>
24 {{scope.row[item.prop]}} 24 {{scope.row[item.prop]}}
25 </span> 25 </span>
  26 + </template>-->
  27 +
  28 + <template #default="scope">
  29 + <slot :row="scope.row" :prop="item.prop" :column="item">
  30 + <div v-if="typeof(item.render) == 'function'" >
  31 + <div v-if="typeof(item.click) == 'function'">
  32 + <el-link :type="linkType" :underline="isLink" @click="item.click(scope.row)" v-html="item.render(scope.row)"></el-link>
  33 + </div>
  34 + <div v-else>
  35 + <el-link :type="linkType" :underline="isLink" v-html="item.render(scope.row)"></el-link>
  36 + </div>
  37 + </div>
  38 + <span v-else>
  39 + {{scope.row[item.prop]}}
  40 + </span>
  41 + </slot>
  42 +
26 </template> 43 </template>
27 </el-table-column> 44 </el-table-column>
28 </el-table> 45 </el-table>
@@ -2,12 +2,47 @@ @@ -2,12 +2,47 @@
2 <el-row :gutter="5" > 2 <el-row :gutter="5" >
3 <el-col :span="4" > 3 <el-col :span="4" >
4 <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}"> 4 <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}">
5 - <el-tree :data="treeData" :default-expanded-keys="[1]" @node-click="handleNodeClick"/> 5 + <div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold">
  6 + <el-link type="info" :underline="false"><i class="iconfont icon-liebiao"></i> 资源类型</el-link>
  7 + </div>
  8 + <el-tree :data="treeData" :default-expanded-keys="[1]" node-key="id" @node-click="handleNodeClick"/>
6 </div> 9 </div>
7 </el-col> 10 </el-col>
8 <el-col :span="20" > 11 <el-col :span="20" >
9 <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" > 12 <div class="cm-card" :style="{'min-height':height+'px','height':'100%'}" >
  13 + <div style="height: 80px;text-align: left;width: 80%;margin-left: 10px;margin-top: 10px;">
  14 + <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  15 + <el-form-item label="资源名称">
  16 + <el-input v-model="searchForm.resName" placeholder="请输入资源名称"></el-input>
  17 + </el-form-item>
  18 +
  19 + <el-form-item>
  20 + <el-button type="primary" @click="onSubmit">查询</el-button>
  21 + </el-form-item>
  22 + </el-form>
  23 + </div>
  24 + <cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true"
  25 + :showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
  26 + :showPage="true" :height="(height - 80)">
  27 + <template #default="{row,prop,column}">
  28 + <el-link v-if="prop == 'resPositon' || prop == 'cabinetNo'" :underline="true" @click="cellClick(row,prop,column)">{{row[prop]}}</el-link>
  29 + <el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop]}}</el-link>
  30 + </template>
  31 + </cm-table-page>
10 </div> 32 </div>
11 </el-col> 33 </el-col>
12 </el-row> 34 </el-row>
  35 +
  36 + <cm-dialog :title="cellDetail.title" width="60%" :showDialogVisible="dialogFlg" :showFooter="true" @hidedialog="showDialog" :showOkBtn="false" cancelText="关闭">
  37 + <template v-slot>
  38 +
  39 + <img v-if="cellDetail.prop == 'cabinetNo'" src="/vue3/src/assets/images/res/img01.png" style="width: 50%">
  40 + <img v-if="cellDetail.prop == 'resPositon'" src="/vue3/src/assets/images/res/img02.jpg" style="width: 50%">
  41 + <!--<div v-if="cellDetail.prop == 'cabinetNo'" :style="{'background-image':'url(/vue3/src/assets/images/res/img01.png)'}" > </div>
  42 + <div v-if="cellDetail.prop == 'resPositon'" :style="{'background-image':'url(/vue3/src/assets/images/res/img02.png)'}" > </div>-->
  43 + <div>
  44 + {{cellDetail.row[cellDetail.prop]}}
  45 + </div>
  46 + </template>
  47 + </cm-dialog>
13 </div> 48 </div>
@@ -17,47 +17,98 @@ export default { @@ -17,47 +17,98 @@ export default {
17 setup() { 17 setup() {
18 const {proxy} = Vue.getCurrentInstance(); 18 const {proxy} = Vue.getCurrentInstance();
19 let height = Vue.ref(window.innerHeight -10); 19 let height = Vue.ref(window.innerHeight -10);
  20 + // 树数据
20 const treeData = Vue.ref([]); 21 const treeData = Vue.ref([]);
21 - const tableData = Vue.ref([]);  
22 -  
23 - const dialog = Vue.ref({  
24 - title: '资源类型配置',  
25 - activeName: '' 22 + // 表格数据对象
  23 + const obj = Vue.ref({});
  24 + // 当前点击
  25 + const currentNode = Vue.ref({});
  26 + // 搜索框内容
  27 + const searchForm = Vue.ref({
  28 + resName:''
26 }); 29 });
27 - const dialogVisible = Vue.ref(false);  
28 30
29 - // 弹框  
30 - let showDialog = () => {  
31 - dialogVisible.value = true;  
32 - } 31 + // 单元格点及保存的数据
  32 + let cellDetail = Vue.ref({});
  33 +
  34 + // 展示U位弹框
  35 + let dialogFlg = Vue.ref(false);
  36 +
  37 + // const dialog = Vue.ref({
  38 + // title: '资源类型配置',
  39 + // activeName: ''
  40 + // });
  41 + // const dialogVisible = Vue.ref(false);
  42 + //
  43 + // // 弹框
  44 + // let showDialog = () => {
  45 + // dialogVisible.value = true;
  46 + // }
33 47
34 // 获取左侧树结构 48 // 获取左侧树结构
35 let loadTree = () => { 49 let loadTree = () => {
36 proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) { 50 proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) {
37 if (res && res.data) { 51 if (res && res.data) {
38 treeData.value = res.data 52 treeData.value = res.data
  53 + currentNode.value = res.data[0];
  54 +
  55 + loadResList();
39 } 56 }
40 }); 57 });
41 } 58 }
42 59
  60 + let loadResList = () =>{
  61 + if(currentNode.value){
  62 + proxy.$http.get(`/api-web/v32/res/list/list/${currentNode.value.id}`, {}, function (res) {
  63 + if (res && res.object) {
  64 + obj.value = res.object
  65 + }
  66 + });
  67 + }
  68 + }
  69 +
43 let handleNodeClick =(data) =>{ 70 let handleNodeClick =(data) =>{
44 console.log(data) 71 console.log(data)
  72 + currentNode.value = data;
  73 + loadResList();
  74 + }
  75 +
  76 +
  77 + // 展示机房或者机柜信息
  78 + let showDialog = (flg) =>{
  79 + dialogFlg.value = flg;
  80 + }
  81 +
  82 + let cellClick = (row,prop,column) =>{
  83 +
  84 + showDialog(true);
  85 + cellDetail.value['prop'] = prop;
  86 + cellDetail.value['row'] = row;
  87 + cellDetail.value['title'] = column.label + '详情';
45 } 88 }
46 89
47 // 挂载完 90 // 挂载完
48 Vue.onMounted(() => { 91 Vue.onMounted(() => {
49 loadTree(); 92 loadTree();
50 - console.log('onMounted');  
51 }) 93 })
52 94
53 95
54 return { 96 return {
  97 + /*showDialog,
  98 + dialogVisible,
  99 + dialog*/
  100 +
  101 + currentNode,
55 treeData, 102 treeData,
  103 + searchForm,
56 height, 104 height,
  105 + obj,
  106 + handleNodeClick,
  107 + loadResList,
  108 + dialogFlg,
57 showDialog, 109 showDialog,
58 - dialogVisible,  
59 - tableData,  
60 - dialog 110 + cellDetail,
  111 + cellClick
61 } 112 }
62 } 113 }
63 } 114 }