monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 10375436efe9eae24ad854562d298a5348a75292 1 parent 867a17cc

优化

Inline Side-by-side
Showing 19 changed files with 772 additions and 19 deletions
1 -# **shuo'ming说明** 1 +# **说明**
2 - hg-monitor-web-base 基于天津现有功能作为基类 2 - hg-monitor-web-base 基于天津现有功能作为基类
3 - hg-monitor-web-new 最新开发版本 3 - hg-monitor-web-new 最新开发版本
4 -- hg-monitor-web-tj 天津10月后的个性化开发 4 +- hg-monitor-web-tj 天津21年10月后的个性化开发
5 5
6 说明说明注意事项 版本开发，天津版本的开发可在base中修改，然后将代码复制到hg-monitor-web-tj代码中 6 说明说明注意事项 版本开发，天津版本的开发可在base中修改，然后将代码复制到hg-monitor-web-tj代码中
7 7
@@ -55,6 +55,84 @@ @@ -55,6 +55,84 @@
55 <ul class="icon_lists dib-box"> 55 <ul class="icon_lists dib-box">
56 56
57 <li class="dib"> 57 <li class="dib">
  58 + <span class="icon iconfont">&#xe60c;</span>
  59 + <div class="name">AK-BT_对勾_B</div>
  60 + <div class="code-name">&amp;#xe60c;</div>
  61 + </li>
  62 +
  63 + <li class="dib">
  64 + <span class="icon iconfont">&#xe617;</span>
  65 + <div class="name">对勾选中</div>
  66 + <div class="code-name">&amp;#xe617;</div>
  67 + </li>
  68 +
  69 + <li class="dib">
  70 + <span class="icon iconfont">&#xe62a;</span>
  71 + <div class="name">对勾</div>
  72 + <div class="code-name">&amp;#xe62a;</div>
  73 + </li>
  74 +
  75 + <li class="dib">
  76 + <span class="icon iconfont">&#xe60e;</span>
  77 + <div class="name">对勾_块</div>
  78 + <div class="code-name">&amp;#xe60e;</div>
  79 + </li>
  80 +
  81 + <li class="dib">
  82 + <span class="icon iconfont">&#xe640;</span>
  83 + <div class="name">进度条-对勾</div>
  84 + <div class="code-name">&amp;#xe640;</div>
  85 + </li>
  86 +
  87 + <li class="dib">
  88 + <span class="icon iconfont">&#xe686;</span>
  89 + <div class="name">叉</div>
  90 + <div class="code-name">&amp;#xe686;</div>
  91 + </li>
  92 +
  93 + <li class="dib">
  94 + <span class="icon iconfont">&#xe6e7;</span>
  95 + <div class="name">对，勾</div>
  96 + <div class="code-name">&amp;#xe6e7;</div>
  97 + </li>
  98 +
  99 + <li class="dib">
  100 + <span class="icon iconfont">&#xe618;</span>
  101 + <div class="name">规范－导航栏－叉</div>
  102 + <div class="code-name">&amp;#xe618;</div>
  103 + </li>
  104 +
  105 + <li class="dib">
  106 + <span class="icon iconfont">&#xe654;</span>
  107 + <div class="name">地图找房_交叉</div>
  108 + <div class="code-name">&amp;#xe654;</div>
  109 + </li>
  110 +
  111 + <li class="dib">
  112 + <span class="icon iconfont">&#xe730;</span>
  113 + <div class="name">对勾</div>
  114 + <div class="code-name">&amp;#xe730;</div>
  115 + </li>
  116 +
  117 + <li class="dib">
  118 + <span class="icon iconfont">&#xe733;</span>
  119 + <div class="name">对勾</div>
  120 + <div class="code-name">&amp;#xe733;</div>
  121 + </li>
  122 +
  123 + <li class="dib">
  124 + <span class="icon iconfont">&#xe6b5;</span>
  125 + <div class="name">操作-对勾</div>
  126 + <div class="code-name">&amp;#xe6b5;</div>
  127 + </li>
  128 +
  129 + <li class="dib">
  130 + <span class="icon iconfont">&#xe60b;</span>
  131 + <div class="name">AK-BT_对勾_A</div>
  132 + <div class="code-name">&amp;#xe60b;</div>
  133 + </li>
  134 +
  135 + <li class="dib">
58 <span class="icon iconfont">&#xe600;</span> 136 <span class="icon iconfont">&#xe600;</span>
59 <div class="name">文件</div> 137 <div class="name">文件</div>
60 <div class="code-name">&amp;#xe600;</div> 138 <div class="code-name">&amp;#xe600;</div>
@@ -300,9 +378,9 @@ @@ -300,9 +378,9 @@
300 <pre><code class="language-css" 378 <pre><code class="language-css"
301 >@font-face { 379 >@font-face {
302 font-family: 'iconfont'; 380 font-family: 'iconfont';
303 - src: url('iconfont.woff2?t=1632902475934') format('woff2'),  
304 - url('iconfont.woff?t=1632902475934') format('woff'),  
305 - url('iconfont.ttf?t=1632902475934') format('truetype'); 381 + src: url('iconfont.woff2?t=1632921801844') format('woff2'),
  382 + url('iconfont.woff?t=1632921801844') format('woff'),
  383 + url('iconfont.ttf?t=1632921801844') format('truetype');
306 } 384 }
307 </code></pre> 385 </code></pre>
308 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> 386 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -329,6 +407,123 @@ @@ -329,6 +407,123 @@
329 <ul class="icon_lists dib-box"> 407 <ul class="icon_lists dib-box">
330 408
331 <li class="dib"> 409 <li class="dib">
  410 + <span class="icon iconfont icon-bt_duigou_B"></span>
  411 + <div class="name">
  412 + AK-BT_对勾_B
  413 + </div>
  414 + <div class="code-name">.icon-bt_duigou_B
  415 + </div>
  416 + </li>
  417 +
  418 + <li class="dib">
  419 + <span class="icon iconfont icon-duigouxuanzhong"></span>
  420 + <div class="name">
  421 + 对勾选中
  422 + </div>
  423 + <div class="code-name">.icon-duigouxuanzhong
  424 + </div>
  425 + </li>
  426 +
  427 + <li class="dib">
  428 + <span class="icon iconfont icon-confirm-line"></span>
  429 + <div class="name">
  430 + 对勾
  431 + </div>
  432 + <div class="code-name">.icon-confirm-line
  433 + </div>
  434 + </li>
  435 +
  436 + <li class="dib">
  437 + <span class="icon iconfont icon-duigou_kuai"></span>
  438 + <div class="name">
  439 + 对勾_块
  440 + </div>
  441 + <div class="code-name">.icon-duigou_kuai
  442 + </div>
  443 + </li>
  444 +
  445 + <li class="dib">
  446 + <span class="icon iconfont icon-duigou3"></span>
  447 + <div class="name">
  448 + 进度条-对勾
  449 + </div>
  450 + <div class="code-name">.icon-duigou3
  451 + </div>
  452 + </li>
  453 +
  454 + <li class="dib">
  455 + <span class="icon iconfont icon-cha"></span>
  456 + <div class="name">
  457 + 叉
  458 + </div>
  459 + <div class="code-name">.icon-cha
  460 + </div>
  461 + </li>
  462 +
  463 + <li class="dib">
  464 + <span class="icon iconfont icon-duigou4"></span>
  465 + <div class="name">
  466 + 对，勾
  467 + </div>
  468 + <div class="code-name">.icon-duigou4
  469 + </div>
  470 + </li>
  471 +
  472 + <li class="dib">
  473 + <span class="icon iconfont icon-guifandaohanglancha"></span>
  474 + <div class="name">
  475 + 规范－导航栏－叉
  476 + </div>
  477 + <div class="code-name">.icon-guifandaohanglancha
  478 + </div>
  479 + </li>
  480 +
  481 + <li class="dib">
  482 + <span class="icon iconfont icon-ziyuan"></span>
  483 + <div class="name">
  484 + 地图找房_交叉
  485 + </div>
  486 + <div class="code-name">.icon-ziyuan
  487 + </div>
  488 + </li>
  489 +
  490 + <li class="dib">
  491 + <span class="icon iconfont icon-duigou"></span>
  492 + <div class="name">
  493 + 对勾
  494 + </div>
  495 + <div class="code-name">.icon-duigou
  496 + </div>
  497 + </li>
  498 +
  499 + <li class="dib">
  500 + <span class="icon iconfont icon-duigou1"></span>
  501 + <div class="name">
  502 + 对勾
  503 + </div>
  504 + <div class="code-name">.icon-duigou1
  505 + </div>
  506 + </li>
  507 +
  508 + <li class="dib">
  509 + <span class="icon iconfont icon-duigou2"></span>
  510 + <div class="name">
  511 + 操作-对勾
  512 + </div>
  513 + <div class="code-name">.icon-duigou2
  514 + </div>
  515 + </li>
  516 +
  517 + <li class="dib">
  518 + <span class="icon iconfont icon-bt_duigou_a"></span>
  519 + <div class="name">
  520 + AK-BT_对勾_A
  521 + </div>
  522 + <div class="code-name">.icon-bt_duigou_a
  523 + </div>
  524 + </li>
  525 +
  526 + <li class="dib">
332 <span class="icon iconfont icon-wenjian"></span> 527 <span class="icon iconfont icon-wenjian"></span>
333 <div class="name"> 528 <div class="name">
334 文件 529 文件
@@ -699,6 +894,110 @@ @@ -699,6 +894,110 @@
699 894
700 <li class="dib"> 895 <li class="dib">
701 <svg class="icon svg-icon" aria-hidden="true"> 896 <svg class="icon svg-icon" aria-hidden="true">
  897 + <use xlink:href="#icon-bt_duigou_B"></use>
  898 + </svg>
  899 + <div class="name">AK-BT_对勾_B</div>
  900 + <div class="code-name">#icon-bt_duigou_B</div>
  901 + </li>
  902 +
  903 + <li class="dib">
  904 + <svg class="icon svg-icon" aria-hidden="true">
  905 + <use xlink:href="#icon-duigouxuanzhong"></use>
  906 + </svg>
  907 + <div class="name">对勾选中</div>
  908 + <div class="code-name">#icon-duigouxuanzhong</div>
  909 + </li>
  910 +
  911 + <li class="dib">
  912 + <svg class="icon svg-icon" aria-hidden="true">
  913 + <use xlink:href="#icon-confirm-line"></use>
  914 + </svg>
  915 + <div class="name">对勾</div>
  916 + <div class="code-name">#icon-confirm-line</div>
  917 + </li>
  918 +
  919 + <li class="dib">
  920 + <svg class="icon svg-icon" aria-hidden="true">
  921 + <use xlink:href="#icon-duigou_kuai"></use>
  922 + </svg>
  923 + <div class="name">对勾_块</div>
  924 + <div class="code-name">#icon-duigou_kuai</div>
  925 + </li>
  926 +
  927 + <li class="dib">
  928 + <svg class="icon svg-icon" aria-hidden="true">
  929 + <use xlink:href="#icon-duigou3"></use>
  930 + </svg>
  931 + <div class="name">进度条-对勾</div>
  932 + <div class="code-name">#icon-duigou3</div>
  933 + </li>
  934 +
  935 + <li class="dib">
  936 + <svg class="icon svg-icon" aria-hidden="true">
  937 + <use xlink:href="#icon-cha"></use>
  938 + </svg>
  939 + <div class="name">叉</div>
  940 + <div class="code-name">#icon-cha</div>
  941 + </li>
  942 +
  943 + <li class="dib">
  944 + <svg class="icon svg-icon" aria-hidden="true">
  945 + <use xlink:href="#icon-duigou4"></use>
  946 + </svg>
  947 + <div class="name">对，勾</div>
  948 + <div class="code-name">#icon-duigou4</div>
  949 + </li>
  950 +
  951 + <li class="dib">
  952 + <svg class="icon svg-icon" aria-hidden="true">
  953 + <use xlink:href="#icon-guifandaohanglancha"></use>
  954 + </svg>
  955 + <div class="name">规范－导航栏－叉</div>
  956 + <div class="code-name">#icon-guifandaohanglancha</div>
  957 + </li>
  958 +
  959 + <li class="dib">
  960 + <svg class="icon svg-icon" aria-hidden="true">
  961 + <use xlink:href="#icon-ziyuan"></use>
  962 + </svg>
  963 + <div class="name">地图找房_交叉</div>
  964 + <div class="code-name">#icon-ziyuan</div>
  965 + </li>
  966 +
  967 + <li class="dib">
  968 + <svg class="icon svg-icon" aria-hidden="true">
  969 + <use xlink:href="#icon-duigou"></use>
  970 + </svg>
  971 + <div class="name">对勾</div>
  972 + <div class="code-name">#icon-duigou</div>
  973 + </li>
  974 +
  975 + <li class="dib">
  976 + <svg class="icon svg-icon" aria-hidden="true">
  977 + <use xlink:href="#icon-duigou1"></use>
  978 + </svg>
  979 + <div class="name">对勾</div>
  980 + <div class="code-name">#icon-duigou1</div>
  981 + </li>
  982 +
  983 + <li class="dib">
  984 + <svg class="icon svg-icon" aria-hidden="true">
  985 + <use xlink:href="#icon-duigou2"></use>
  986 + </svg>
  987 + <div class="name">操作-对勾</div>
  988 + <div class="code-name">#icon-duigou2</div>
  989 + </li>
  990 +
  991 + <li class="dib">
  992 + <svg class="icon svg-icon" aria-hidden="true">
  993 + <use xlink:href="#icon-bt_duigou_a"></use>
  994 + </svg>
  995 + <div class="name">AK-BT_对勾_A</div>
  996 + <div class="code-name">#icon-bt_duigou_a</div>
  997 + </li>
  998 +
  999 + <li class="dib">
  1000 + <svg class="icon svg-icon" aria-hidden="true">
702 <use xlink:href="#icon-wenjian"></use> 1001 <use xlink:href="#icon-wenjian"></use>
703 </svg> 1002 </svg>
704 <div class="name">文件</div> 1003 <div class="name">文件</div>
1 @font-face { 1 @font-face {
2 font-family: "iconfont"; /* Project id 2843738 */ 2 font-family: "iconfont"; /* Project id 2843738 */
3 - src: url('iconfont.woff2?t=1632902475934') format('woff2'),  
4 - url('iconfont.woff?t=1632902475934') format('woff'),  
5 - url('iconfont.ttf?t=1632902475934') format('truetype'); 3 + src: url('iconfont.woff2?t=1632921801844') format('woff2'),
  4 + url('iconfont.woff?t=1632921801844') format('woff'),
  5 + url('iconfont.ttf?t=1632921801844') format('truetype');
6 } 6 }
7 7
8 .iconfont { 8 .iconfont {
@@ -13,6 +13,58 @@ @@ -13,6 +13,58 @@
13 -moz-osx-font-smoothing: grayscale; 13 -moz-osx-font-smoothing: grayscale;
14 } 14 }
15 15
  16 +.icon-bt_duigou_B:before {
  17 + content: "\e60c";
  18 +}
  19 +
  20 +.icon-duigouxuanzhong:before {
  21 + content: "\e617";
  22 +}
  23 +
  24 +.icon-confirm-line:before {
  25 + content: "\e62a";
  26 +}
  27 +
  28 +.icon-duigou_kuai:before {
  29 + content: "\e60e";
  30 +}
  31 +
  32 +.icon-duigou3:before {
  33 + content: "\e640";
  34 +}
  35 +
  36 +.icon-cha:before {
  37 + content: "\e686";
  38 +}
  39 +
  40 +.icon-duigou4:before {
  41 + content: "\e6e7";
  42 +}
  43 +
  44 +.icon-guifandaohanglancha:before {
  45 + content: "\e618";
  46 +}
  47 +
  48 +.icon-ziyuan:before {
  49 + content: "\e654";
  50 +}
  51 +
  52 +.icon-duigou:before {
  53 + content: "\e730";
  54 +}
  55 +
  56 +.icon-duigou1:before {
  57 + content: "\e733";
  58 +}
  59 +
  60 +.icon-duigou2:before {
  61 + content: "\e6b5";
  62 +}
  63 +
  64 +.icon-bt_duigou_a:before {
  65 + content: "\e60b";
  66 +}
  67 +
16 .icon-wenjian:before { 68 .icon-wenjian:before {
17 content: "\e600"; 69 content: "\e600";
18 } 70 }
@@ -6,6 +6,97 @@ @@ -6,6 +6,97 @@
6 "description": "", 6 "description": "",
7 "glyphs": [ 7 "glyphs": [
8 { 8 {
  9 + "icon_id": "4198630",
  10 + "name": "AK-BT_对勾_B",
  11 + "font_class": "bt_duigou_B",
  12 + "unicode": "e60c",
  13 + "unicode_decimal": 58892
  14 + },
  15 + {
  16 + "icon_id": "5712911",
  17 + "name": "对勾选中",
  18 + "font_class": "duigouxuanzhong",
  19 + "unicode": "e617",
  20 + "unicode_decimal": 58903
  21 + },
  22 + {
  23 + "icon_id": "6119227",
  24 + "name": "对勾",
  25 + "font_class": "confirm-line",
  26 + "unicode": "e62a",
  27 + "unicode_decimal": 58922
  28 + },
  29 + {
  30 + "icon_id": "15726782",
  31 + "name": "对勾_块",
  32 + "font_class": "duigou_kuai",
  33 + "unicode": "e60e",
  34 + "unicode_decimal": 58894
  35 + },
  36 + {
  37 + "icon_id": "16160534",
  38 + "name": "进度条-对勾",
  39 + "font_class": "duigou3",
  40 + "unicode": "e640",
  41 + "unicode_decimal": 58944
  42 + },
  43 + {
  44 + "icon_id": "18368038",
  45 + "name": "叉",
  46 + "font_class": "cha",
  47 + "unicode": "e686",
  48 + "unicode_decimal": 59014
  49 + },
  50 + {
  51 + "icon_id": "18406123",
  52 + "name": "对，勾",
  53 + "font_class": "duigou4",
  54 + "unicode": "e6e7",
  55 + "unicode_decimal": 59111
  56 + },
  57 + {
  58 + "icon_id": "650748",
  59 + "name": "规范－导航栏－叉",
  60 + "font_class": "guifandaohanglancha",
  61 + "unicode": "e618",
  62 + "unicode_decimal": 58904
  63 + },
  64 + {
  65 + "icon_id": "1512024",
  66 + "name": "地图找房_交叉",
  67 + "font_class": "ziyuan",
  68 + "unicode": "e654",
  69 + "unicode_decimal": 58964
  70 + },
  71 + {
  72 + "icon_id": "1664366",
  73 + "name": "对勾",
  74 + "font_class": "duigou",
  75 + "unicode": "e730",
  76 + "unicode_decimal": 59184
  77 + },
  78 + {
  79 + "icon_id": "1833856",
  80 + "name": "对勾",
  81 + "font_class": "duigou1",
  82 + "unicode": "e733",
  83 + "unicode_decimal": 59187
  84 + },
  85 + {
  86 + "icon_id": "1915007",
  87 + "name": "操作-对勾",
  88 + "font_class": "duigou2",
  89 + "unicode": "e6b5",
  90 + "unicode_decimal": 59061
  91 + },
  92 + {
  93 + "icon_id": "4198629",
  94 + "name": "AK-BT_对勾_A",
  95 + "font_class": "bt_duigou_a",
  96 + "unicode": "e60b",
  97 + "unicode_decimal": 58891
  98 + },
  99 + {
9 "icon_id": "1118", 100 "icon_id": "1118",
10 "name": "文件", 101 "name": "文件",
11 "font_class": "wenjian", 102 "font_class": "wenjian",
@@ -4,10 +4,10 @@ import org.springframework.boot.SpringApplication; @@ -4,10 +4,10 @@ import org.springframework.boot.SpringApplication;
4 import org.springframework.boot.autoconfigure.SpringBootApplication; 4 import org.springframework.boot.autoconfigure.SpringBootApplication;
5 5
6 @SpringBootApplication 6 @SpringBootApplication
7 -public class HGMonitorWebApplication { 7 +public class HGMonitorNewWebApplication {
8 8
9 public static void main(String[] args) { 9 public static void main(String[] args) {
10 - SpringApplication.run(HGMonitorWebApplication.class, args); 10 + SpringApplication.run(HGMonitorNewWebApplication.class, args);
11 } 11 }
12 12
13 } 13 }
  1 +<title>资源视图</title>
  2 +<iframe src="/vue3/index.html#/res/list" class="layadmin-iframe"/>
1 @import "../icon/iconfont.css"; 1 @import "../icon/iconfont.css";
2 @import "../css/assets.css"; 2 @import "../css/assets.css";
3 3
  4 +/*资源配置*/
  5 +@import "../css/res.css";
4 6
  7 +/*最外层样式*/
  8 +.container{
  9 + background: white;
  10 + background-color: #CCCCCC;
  11 + padding: 3px 3px;
  12 +}
  13 +
  14 +/*
  15 +共通弹框配置样式
  16 +custom-class="config-dialog"
  17 +*/
  18 +.config-dialog .el-dialog__header{
  19 + text-align: left!important;
  20 +}
  21 +
  22 +.config-dialog .el-dialog__body{
  23 + padding: 5px 10px!important;
  24 + padding-bottom: 20px!important;
  25 + min-height: 500px;
  26 +}
  27 +
  28 +
  29 +
  30 +/*加载图标*/
5 .el-loading-spinner .icon-mj{ 31 .el-loading-spinner .icon-mj{
6 width: 70px; 32 width: 70px;
7 height: 70px; 33 height: 70px;
@@ -77,14 +77,5 @@ @@ -77,14 +77,5 @@
77 /*background-color: rgb(249, 249, 249);*/ 77 /*background-color: rgb(249, 249, 249);*/
78 /*}*/ 78 /*}*/
79 79
80 -.assets-configmanager .config-dialog .el-dialog__header{  
81 - text-align: left!important;  
82 -}  
83 -  
84 -.assets-configmanager .config-dialog .el-dialog__body{  
85 - padding: 5px 10px!important;  
86 - padding-bottom: 20px!important;  
87 - min-height: 500px;  
88 -}  
89 80
90 /* 属性配置 -- end */ 81 /* 属性配置 -- end */
  1 +.tree-config {
  2 +}
  3 +
  4 +.tree-config .card-item{
  5 + background-color: white;
  6 + padding: 0px 0px;
  7 + border-radius: 3px;
  8 + text-align: left;
  9 + height: 100%;
  10 +}
  11 +
  12 +.tree-config .tree-node {
  13 + display: flex;
  14 + flex-direction: row;
  15 + width: 100%;
  16 +}
  17 +
  18 +.tree-config .filter-view{
  19 + padding: 10px 20px;
  20 +}
  21 +
  22 +
  23 +.tree-config .tree-node .tree-node-label{
  24 + width: calc(100% - 40px);
  25 + text-align: left;
  26 +}
  27 +
  28 +.tree-config .tree-node .tree-node-tools{
  29 + width: 40px;
  30 + text-align: right;
  31 +}
  32 +.tree-config .tree-node .tree-node-tools a{
  33 + margin: 2px;
  34 +}
  1 +<div class="container tree-config" :style="{'height':height+'px','max-height':height+'px','overflow':'hidden','padding':'0px'}">
  2 + <el-row :gutter="5">
  3 + <el-col :span="4" >
  4 + <div class="card-item">
  5 + <div class="filter-view">
  6 + <el-input v-model="filterText" size="samll" placeholder="请输入关键字" />
  7 + </div>
  8 + <div :style="{'height':height+'px','max-height':(height - 54)+'px','overflow':'auto','padding':'0px'}">
  9 + <el-tree ref="tree" style="padding:6px;" :props="props" :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
  10 + <template #default="{ node, data }">
  11 + <div class="tree-node">
  12 + <div class="tree-node-label">{{ node.label }}</div>
  13 + <div class="tree-node-tools">
  14 + <a @click="append(data)">
  15 + <i class="el-icon-plus"></i>
  16 + </a>
  17 + <a @click="remove(node, data)">
  18 + <i class="el-icon-delete"></i>
  19 + </a>
  20 + </div>
  21 + </div>
  22 + </template>
  23 + </el-tree>
  24 + </div>
  25 + </div>
  26 + </el-col>
  27 + <el-col :span="20" >
  28 + <div class="card-item">
  29 + <div style="padding: 3px 6px;">
  30 + <el-button type="primary" @click="showDialog">添加</el-button>
  31 + <span class="iconfont icon-wenjianjia"></span>
  32 + </div>
  33 + <el-table :data="tableData" style="width: 100%">
  34 + <el-table-column fixed prop="date" label="Date" width="150" />
  35 + <el-table-column prop="name" label="Name" width="120" />
  36 + <el-table-column prop="state" label="State" width="120" />
  37 + <el-table-column prop="city" label="City" width="120" />
  38 + <el-table-column prop="address" label="Address" width="600" />
  39 + <el-table-column prop="zip" label="Zip" width="120" />
  40 + <el-table-column fixed="right" label="Operations" width="120">
  41 + <template #default>
  42 + <el-button type="text" size="small" @click="handleClick">Detail</el-button>
  43 + <el-button type="text" size="small">Edit</el-button>
  44 + </template>
  45 + </el-table-column>
  46 + </el-table>
  47 + </div>
  48 + </el-col>
  49 + </el-row>
  50 +
  51 + <el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
  52 + <el-tabs v-model="dialog.activeName" @tab-click="handleClick">
  53 + <el-tab-pane label="基本信息" name="jbxx">
  54 + </el-tab-pane>
  55 + <el-tab-pane label="基本信息1" name="jbxx1">
  56 + </el-tab-pane>
  57 + <el-tab-pane label="基本信息2" name="jbxx2">
  58 + </el-tab-pane>
  59 + </el-tabs>
  60 + </el-dialog>
  61 +
  62 + <el-dialog top="2vh" title="添加节点" v-model="addDialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
  63 + {{data}}
  64 + </el-dialog>
  65 +
  66 +</div>
  1 +export default {
  2 + name: 'treeconfig',
  3 + template: '',
  4 + components: {},
  5 + data() {
  6 + return {
  7 + props : {
  8 + label:'title',
  9 + children:'children'
  10 + }
  11 + }
  12 + },
  13 + setup() {
  14 + let height = Vue.ref(window.innerHeight - 130);
  15 + const filterText = Vue.ref('');
  16 + const {proxy} = Vue.getCurrentInstance();
  17 + const treeData = Vue.ref([]);
  18 + const tableData = Vue.ref([]);
  19 + let treeNodeData = Vue.ref({});
  20 +
  21 + const dialog = Vue.ref({
  22 + title: '',
  23 + activeName: ''
  24 + });
  25 + const dialogVisible = Vue.ref(false);
  26 + const addDialogVisible = Vue.ref(false);
  27 + // 添加树节点
  28 + let append = (data) => {
  29 + treeNodeData.value = data;
  30 + addDialogVisible.value = true;
  31 + // const newChild = {
  32 + // id: 1111,
  33 + // title: 'testtest',
  34 + // children: []
  35 + // }
  36 + // if (!data.children) {
  37 + // data.children = []
  38 + // }
  39 + // data.children.push(newChild)
  40 + // this.dataSource = [...this.dataSource]
  41 + }
  42 +
  43 + // 删除树节点
  44 + let remove = (node, data) => {
  45 + const parent = node.parent
  46 + const children = parent.data.children || parent.data
  47 + const index = children.findIndex((d) => d.id === data.id)
  48 + children.splice(index, 1)
  49 + this.dataSource = [...this.dataSource]
  50 + }
  51 +
  52 + // 筛选
  53 + let filterNode = (value) => {
  54 + if (!value) return true
  55 +
  56 + let arr = data.filter(function (v) {
  57 + if (v.label.indexOf(value) != -1) {
  58 + return v;
  59 + }
  60 + })
  61 + console.log(arr);
  62 + return arr;
  63 + }
  64 +
  65 +
  66 + // 弹框
  67 + let showDialog = () => {
  68 + dialogVisible.value = true;
  69 + }
  70 +
  71 + // 调用接口
  72 + // 获取左侧树结构
  73 + let loadTree = () => {
  74 + proxy.$http.get("/api-web/home/resType/getTree?notExist=machineroom&table=resources&exist=HOST_MINICOMPUTER_SERVER", {}, function (res) {
  75 + if (res && res.data) {
  76 + treeData.value = res.data
  77 + }
  78 + });
  79 + }
  80 +
  81 + // 监听编辑状态
  82 + Vue.watch(() => filterText.value, (newValue, oldVlaue) => {
  83 + proxy.$refs.tree.filter(newValue)
  84 + });
  85 +
  86 + // 挂载完
  87 + Vue.onMounted(() => {
  88 + loadTree();
  89 + console.log('onMounted');
  90 + })
  91 +
  92 +
  93 + return {
  94 + height,
  95 + treeData,
  96 + append,
  97 + remove,
  98 + filterText,
  99 + filterNode,
  100 + showDialog,
  101 + dialogVisible,
  102 + tableData,
  103 + dialog,
  104 + treeNodeData
  105 + }
  106 + }
  107 +}
@@ -27,6 +27,11 @@ const routes = [{ @@ -27,6 +27,11 @@ const routes = [{
27 path: '/assets/configmanager', 27 path: '/assets/configmanager',
28 name: 'configmanager', 28 name: 'configmanager',
29 component: () => myImport('views/assets/configmanager/index') 29 component: () => myImport('views/assets/configmanager/index')
  30 + },
  31 + {
  32 + path: '/res/list',
  33 + name: 'resList',
  34 + component: () => myImport('views/res/list/index')
30 } 35 }
31 ]; 36 ];
32 37
  1 +<!--:style="{'height':height+'px','max-height':height+'px','overflow':'auto'}"-->
  2 +<div class="container tree-config" >
  3 + <div class="card-item">
  4 + <div style="padding: 3px 6px;text-align: right">
  5 + <el-button type="primary" @click="showDialog">配置</el-button>
  6 + </div>
  7 + <el-table :data="tableData" style="width: 100%">
  8 + <el-table-column fixed prop="date" label="Date" width="150" />
  9 + <el-table-column prop="name" label="Name" width="120" />
  10 + <el-table-column prop="state" label="State" width="120" />
  11 + <el-table-column prop="city" label="City" width="120" />
  12 + <el-table-column prop="address" label="Address" width="600" />
  13 + <el-table-column prop="zip" label="Zip" width="120" />
  14 + <el-table-column fixed="right" label="Operations" width="120">
  15 + <template #default>
  16 + <el-button type="text" size="small" @click="handleClick">Detail</el-button>
  17 + <el-button type="text" size="small">Edit</el-button>
  18 + </template>
  19 + </el-table-column>
  20 + </el-table>
  21 + </div>
  22 +
  23 + <el-dialog top="2vh" :title="dialog.title" v-model="dialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
  24 + <tree-config></tree-config>
  25 + </el-dialog>
  26 +
  27 +</div>
  1 +export default {
  2 + name: 'resIndex',
  3 + template: '',
  4 + components: {
  5 + 'tree-config': Vue.defineAsyncComponent(
  6 + () => myImport('components/page/res/treeconfig/index')
  7 + ),
  8 + },
  9 + data() {
  10 + return {
  11 +
  12 + }
  13 + },
  14 + setup() {
  15 + const {proxy} = Vue.getCurrentInstance();
  16 + let height = Vue.ref(window.innerHeight);
  17 + const tableData = [];
  18 +
  19 + const dialog = Vue.ref({
  20 + title: '资源类型配置',
  21 + activeName: ''
  22 + });
  23 + const dialogVisible = Vue.ref(false);
  24 +
  25 + // 弹框
  26 + let showDialog = () => {
  27 + dialogVisible.value = true;
  28 + }
  29 +
  30 + // 挂载完
  31 + Vue.onMounted(() => {
  32 +
  33 + console.log('onMounted');
  34 + })
  35 +
  36 +
  37 + return {
  38 + height,
  39 + showDialog,
  40 + dialogVisible,
  41 + tableData,
  42 + dialog
  43 + }
  44 + }
  45 +}
@@ -47,6 +47,14 @@ @@ -47,6 +47,14 @@
47 </dependencies> 47 </dependencies>
48 48
49 <build> 49 <build>
  50 + <resources>
  51 + <resource>
  52 + <directory>src/main/java</directory>
  53 + <includes>
  54 + <include>**/**</include>
  55 + </includes>
  56 + </resource>
  57 + </resources>
50 <plugins> 58 <plugins>
51 <plugin> 59 <plugin>
52 <groupId>org.springframework.boot</groupId> 60 <groupId>org.springframework.boot</groupId>