monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by XuHaoJie
Commit 5a2d6fe98cbd0794b7003c0045848a9a23182acb 2 parents 0d805186 3689e094

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

Inline Side-by-side
Showing 54 changed files with 1547 additions and 373 deletions
  1 +# 代码包路径
  2 +````
  3 +【后端】 hg-platform\business-center\view-center-project\view-center-zj\src\main\java\com\honggroup\manageapi\bdialtestconfig
  4 +````
  5 +
  6 +### 说明
  7 +````
  8 +文档管理是一个组件，文档管理和回收站使用传参的方式，来控制读取数据的接口；
  9 +````
  10 +
  11 +## 配置文件修改
  12 +**api-gateway**</br>
  13 +配置节点security:oauth2:ignored追加配置文件:**,/api-web/manage/bustype/getAllBusId,/api-web/manage/bdialtest/getTaskIdAndBusId**
  14 +````
  15 +# 增加配置文件
  16 +security:
  17 + oauth2:
  18 + ignored: /test163/** , /api-auth/** , /doc.html ,/test111 ,/api-user/users-anon/login, /api-user/users/save,/api-web/datavis/**,/api-web/bigScreen/**, /user-center/users-anon/login,/document.html,**/v2/api-docs,/oauth/** ,/login.html ,/user/login,/**/**.css ,/**/**.js ,/getVersion,/api-web/manage/bustype/getAllBusId,/api-web/manage/bdialtest/getTaskIdAndBusId
  19 +
  20 +````
  21 +
  22 +## 涉及工程
  23 +> 1、view-center
@@ -2,11 +2,15 @@ @@ -2,11 +2,15 @@
2 [https://hgkj.5upm.com/task-view-73.html](任务地址) 2 [https://hgkj.5upm.com/task-view-73.html](任务地址)
3 3
4 # 代码包路径 4 # 代码包路径
5 -````【前端】【组件】hg-monitor-web\hg-monitor-web-base\src\main\resources\static\vue3\src\components\common\document 5 +````
  6 +【前端】【组件】hg-monitor-web\hg-monitor-web-base\src\main\resources\static\vue3\src\components\common\document
6 【前端】【文档管理】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\index.* 7 【前端】【文档管理】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\index.*
7 【前端】【回收站】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\documentRecycle.* 8 【前端】【回收站】hg-monitor-web\hg-monitor-web-zj\src\main\resources\static\vue3\src\views\documentationManagement\documentRecycle.*
8 【后端】hg-platform\business-center\inspection-report\src\main\java\com\honggroup\report\controller\FileManageMentController.java 9 【后端】hg-platform\business-center\inspection-report\src\main\java\com\honggroup\report\controller\FileManageMentController.java
  10 +````
  11 +
9 ### 说明 12 ### 说明
  13 +````
10 文档管理是一个组件，文档管理和回收站使用传参的方式，来控制读取数据的接口； 14 文档管理是一个组件，文档管理和回收站使用传参的方式，来控制读取数据的接口；
11 ```` 15 ````
12 16
@@ -55,6 +55,30 @@ @@ -55,6 +55,30 @@
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">&#xe615;</span>
  59 + <div class="name">资产</div>
  60 + <div class="code-name">&amp;#xe615;</div>
  61 + </li>
  62 +
  63 + <li class="dib">
  64 + <span class="icon iconfont">&#xe61f;</span>
  65 + <div class="name">收藏</div>
  66 + <div class="code-name">&amp;#xe61f;</div>
  67 + </li>
  68 +
  69 + <li class="dib">
  70 + <span class="icon iconfont">&#xe835;</span>
  71 + <div class="name">网络拓扑</div>
  72 + <div class="code-name">&amp;#xe835;</div>
  73 + </li>
  74 +
  75 + <li class="dib">
  76 + <span class="icon iconfont">&#xe622;</span>
  77 + <div class="name">收藏</div>
  78 + <div class="code-name">&amp;#xe622;</div>
  79 + </li>
  80 +
  81 + <li class="dib">
58 <span class="icon iconfont">&#xe613;</span> 82 <span class="icon iconfont">&#xe613;</span>
59 <div class="name">虚拟桌面</div> 83 <div class="name">虚拟桌面</div>
60 <div class="code-name">&amp;#xe613;</div> 84 <div class="code-name">&amp;#xe613;</div>
@@ -564,9 +588,9 @@ @@ -564,9 +588,9 @@
564 <pre><code class="language-css" 588 <pre><code class="language-css"
565 >@font-face { 589 >@font-face {
566 font-family: 'iconfont'; 590 font-family: 'iconfont';
567 - src: url('iconfont.woff2?t=1635930253141') format('woff2'),  
568 - url('iconfont.woff?t=1635930253141') format('woff'),  
569 - url('iconfont.ttf?t=1635930253141') format('truetype'); 591 + src: url('iconfont.woff2?t=1636448687987') format('woff2'),
  592 + url('iconfont.woff?t=1636448687987') format('woff'),
  593 + url('iconfont.ttf?t=1636448687987') format('truetype');
570 } 594 }
571 </code></pre> 595 </code></pre>
572 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> 596 <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -593,6 +617,42 @@ @@ -593,6 +617,42 @@
593 <ul class="icon_lists dib-box"> 617 <ul class="icon_lists dib-box">
594 618
595 <li class="dib"> 619 <li class="dib">
  620 + <span class="icon iconfont icon-assets"></span>
  621 + <div class="name">
  622 + 资产
  623 + </div>
  624 + <div class="code-name">.icon-assets
  625 + </div>
  626 + </li>
  627 +
  628 + <li class="dib">
  629 + <span class="icon iconfont icon-shoucang"></span>
  630 + <div class="name">
  631 + 收藏
  632 + </div>
  633 + <div class="code-name">.icon-shoucang
  634 + </div>
  635 + </li>
  636 +
  637 + <li class="dib">
  638 + <span class="icon iconfont icon-wangluotuopu"></span>
  639 + <div class="name">
  640 + 网络拓扑
  641 + </div>
  642 + <div class="code-name">.icon-wangluotuopu
  643 + </div>
  644 + </li>
  645 +
  646 + <li class="dib">
  647 + <span class="icon iconfont icon-shoucang1"></span>
  648 + <div class="name">
  649 + 收藏
  650 + </div>
  651 + <div class="code-name">.icon-shoucang1
  652 + </div>
  653 + </li>
  654 +
  655 + <li class="dib">
596 <span class="icon iconfont icon-xunizhuomian"></span> 656 <span class="icon iconfont icon-xunizhuomian"></span>
597 <div class="name"> 657 <div class="name">
598 虚拟桌面 658 虚拟桌面
@@ -1359,6 +1419,38 @@ @@ -1359,6 +1419,38 @@
1359 1419
1360 <li class="dib"> 1420 <li class="dib">
1361 <svg class="icon svg-icon" aria-hidden="true"> 1421 <svg class="icon svg-icon" aria-hidden="true">
  1422 + <use xlink:href="#icon-assets"></use>
  1423 + </svg>
  1424 + <div class="name">资产</div>
  1425 + <div class="code-name">#icon-assets</div>
  1426 + </li>
  1427 +
  1428 + <li class="dib">
  1429 + <svg class="icon svg-icon" aria-hidden="true">
  1430 + <use xlink:href="#icon-shoucang"></use>
  1431 + </svg>
  1432 + <div class="name">收藏</div>
  1433 + <div class="code-name">#icon-shoucang</div>
  1434 + </li>
  1435 +
  1436 + <li class="dib">
  1437 + <svg class="icon svg-icon" aria-hidden="true">
  1438 + <use xlink:href="#icon-wangluotuopu"></use>
  1439 + </svg>
  1440 + <div class="name">网络拓扑</div>
  1441 + <div class="code-name">#icon-wangluotuopu</div>
  1442 + </li>
  1443 +
  1444 + <li class="dib">
  1445 + <svg class="icon svg-icon" aria-hidden="true">
  1446 + <use xlink:href="#icon-shoucang1"></use>
  1447 + </svg>
  1448 + <div class="name">收藏</div>
  1449 + <div class="code-name">#icon-shoucang1</div>
  1450 + </li>
  1451 +
  1452 + <li class="dib">
  1453 + <svg class="icon svg-icon" aria-hidden="true">
1362 <use xlink:href="#icon-xunizhuomian"></use> 1454 <use xlink:href="#icon-xunizhuomian"></use>
1363 </svg> 1455 </svg>
1364 <div class="name">虚拟桌面</div> 1456 <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=1635930253141') format('woff2'),  
4 - url('iconfont.woff?t=1635930253141') format('woff'),  
5 - url('iconfont.ttf?t=1635930253141') format('truetype'); 3 + src: url('iconfont.woff2?t=1636448687987') format('woff2'),
  4 + url('iconfont.woff?t=1636448687987') format('woff'),
  5 + url('iconfont.ttf?t=1636448687987') format('truetype');
6 } 6 }
7 7
8 .iconfont { 8 .iconfont {
@@ -13,6 +13,22 @@ @@ -13,6 +13,22 @@
13 -moz-osx-font-smoothing: grayscale; 13 -moz-osx-font-smoothing: grayscale;
14 } 14 }
15 15
  16 +.icon-assets:before {
  17 + content: "\e615";
  18 +}
  19 +
  20 +.icon-shoucang:before {
  21 + content: "\e61f";
  22 +}
  23 +
  24 +.icon-wangluotuopu:before {
  25 + content: "\e835";
  26 +}
  27 +
  28 +.icon-shoucang1:before {
  29 + content: "\e622";
  30 +}
  31 +
16 .icon-xunizhuomian:before { 32 .icon-xunizhuomian:before {
17 content: "\e613"; 33 content: "\e613";
18 } 34 }
@@ -6,6 +6,34 @@ @@ -6,6 +6,34 @@
6 "description": "", 6 "description": "",
7 "glyphs": [ 7 "glyphs": [
8 { 8 {
  9 + "icon_id": "1369418",
  10 + "name": "资产",
  11 + "font_class": "assets",
  12 + "unicode": "e615",
  13 + "unicode_decimal": 58901
  14 + },
  15 + {
  16 + "icon_id": "5318188",
  17 + "name": "收藏",
  18 + "font_class": "shoucang",
  19 + "unicode": "e61f",
  20 + "unicode_decimal": 58911
  21 + },
  22 + {
  23 + "icon_id": "6510093",
  24 + "name": "网络拓扑",
  25 + "font_class": "wangluotuopu",
  26 + "unicode": "e835",
  27 + "unicode_decimal": 59445
  28 + },
  29 + {
  30 + "icon_id": "7588122",
  31 + "name": "收藏",
  32 + "font_class": "shoucang1",
  33 + "unicode": "e622",
  34 + "unicode_decimal": 58914
  35 + },
  36 + {
9 "icon_id": "4675111", 37 "icon_id": "4675111",
10 "name": "虚拟桌面", 38 "name": "虚拟桌面",
11 "font_class": "xunizhuomian", 39 "font_class": "xunizhuomian",
@@ -128,12 +128,34 @@ global.viewer = (path,proxy) =>{ @@ -128,12 +128,34 @@ global.viewer = (path,proxy) =>{
128 if (res && res.success) { 128 if (res && res.success) {
129 window.open("/src/lib/extend/pdfjs/web/viewer.html?test=" + encodeURIComponent(res.str)); 129 window.open("/src/lib/extend/pdfjs/web/viewer.html?test=" + encodeURIComponent(res.str));
130 } else { 130 } else {
131 - global.showMsg(data.msg,"error") 131 + global.showMsg((res.msg == undefined || res.msg == '' || res.msg == null) ? "该文档不支持预览！" : res.msg,"error")
132 } 132 }
133 }) 133 })
134 } 134 }
135 135
136 /** 136 /**
  137 + * 拓扑
  138 + * @param path
  139 + */
  140 +global.openGraphEditor = (topoId) =>{
  141 + let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${topoId}`;
  142 + let height = window.innerHeight;
  143 + let width = window.innerWidth;
  144 + window.open(url,"_blank",`toolbar=no, location=no, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=no, width=${width}, height=${height}`);
  145 +}
  146 +
  147 +/**
  148 + * 打开资产列表
  149 + * @param topoId
  150 + */
  151 +global.openCmdbAssets = (resId) =>{
  152 + let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${resId}`;
  153 + let height = window.innerHeight;
  154 + let width = window.innerWidth;
  155 + window.open(url,"_blank",`toolbar=no, location=no, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=no, width=${width}, height=${height}`);
  156 +}
  157 +
  158 +/**
137 * 将文件转成base64 159 * 将文件转成base64
138 * @param file 160 * @param file
139 * @returns {Promise<String>} 161 * @returns {Promise<String>}
@@ -8,7 +8,7 @@ let http = { @@ -8,7 +8,7 @@ let http = {
8 }, 8 },
9 reqErr: function (xhr) { 9 reqErr: function (xhr) {
10 try{ 10 try{
11 - 11 + http.proxy.$global.showMsg("服务异常，请联系管理员！","error");
12 let isUnauthorized = xhr.statusText == 'Unauthorized' 12 let isUnauthorized = xhr.statusText == 'Unauthorized'
13 if (isUnauthorized || (xhr && xhr.responseJSON && xhr.responseJSON.resp_code && xhr.responseJSON.resp_code == '401')) { 13 if (isUnauthorized || (xhr && xhr.responseJSON && xhr.responseJSON.resp_code && xhr.responseJSON.resp_code == '401')) {
14 // 登录超时，刷新当前页面===>跳转到登录页面 14 // 登录超时，刷新当前页面===>跳转到登录页面
@@ -39,3 +39,6 @@ @@ -39,3 +39,6 @@
39 @import "../css/cloudPlatform.css"; 39 @import "../css/cloudPlatform.css";
40 40
41 @import "../css/navTabs.css"; 41 @import "../css/navTabs.css";
  42 +
  43 +/*对比分析*/
  44 +@import "../css/analysis.css";
  1 +.analysis-index-container{
  2 + display: flex;
  3 + justify-content: center;
  4 + margin-top: 30px;
  5 +}
  6 +.iconAdd{
  7 + width:50%;
  8 + height:240px;
  9 + color:#00b3fe;
  10 + cursor: pointer;
  11 + border:1px dot-dash #00b3fe;
  12 + display: flex;
  13 + justify-content: center;
  14 + align-items: center;
  15 +}
  16 +/*add页面*/
  17 +.analysis-add-container{
  18 + height: 100%;
  19 + background-color: #f6f6f6;
  20 +}
  21 +.add-top{
  22 + background-color: #FFFFFF;
  23 + padding:20px;
  24 + margin-bottom: 20px;
  25 + width: 100%;
  26 +}
  27 +.add-bottom{
  28 + background-color: #FFFFFF;
  29 + padding:20px 30px;
  30 + width: 100%;
  31 +}
  32 +.classLine{
  33 + width:100%;
  34 +}
  35 +.add-top-title{
  36 + text-align: left;
  37 +}
  38 +.add-top-select{
  39 + display: flex;
  40 + justify-content: space-between;
  41 +}
  42 +.bottom-condition{
  43 + padding:0 20px;
  44 + display: flex;
  45 + flex-flow: column;
  46 + justify-content: space-around;
  47 +}
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 } 58 }
59 .screen-left { 59 .screen-left {
60 height: 100%; 60 height: 100%;
61 - width: 30%; 61 + width: 26%;
62 } 62 }
63 .screen-left #left-top { 63 .screen-left #left-top {
64 height: 56%; 64 height: 56%;
@@ -68,9 +68,12 @@ @@ -68,9 +68,12 @@
68 height: 43.8%; 68 height: 43.8%;
69 position: relative; 69 position: relative;
70 } 70 }
  71 +.screen-left #left-bottom .declare-lineChart{
  72 + height: 100%;
  73 +}
71 .screen-middle { 74 .screen-middle {
72 height: 100%; 75 height: 100%;
73 - width: 40%; 76 + width: 44%;
74 margin-top: 0.5%; 77 margin-top: 0.5%;
75 margin-left: 0.2%; 78 margin-left: 0.2%;
76 margin-right: 0.2%; 79 margin-right: 0.2%;
@@ -85,14 +88,16 @@ @@ -85,14 +88,16 @@
85 .width-86{ 88 .width-86{
86 width:86%; 89 width:86%;
87 margin-bottom: 10px; 90 margin-bottom: 10px;
  91 + align-items: flex-end;
88 } 92 }
89 .middle-right{ 93 .middle-right{
90 - flex: 1; 94 + width: 20%;
  95 + /*flex: 1;*/
91 position: relative; 96 position: relative;
92 left: -5%; 97 left: -5%;
93 display: flex; 98 display: flex;
94 flex-flow: column; 99 flex-flow: column;
95 - justify-content: space-around; 100 + justify-content: center;
96 } 101 }
97 .deduction-bottom{ 102 .deduction-bottom{
98 height:40%; 103 height:40%;
@@ -108,8 +113,12 @@ @@ -108,8 +113,12 @@
108 /*height: 32%;*/ 113 /*height: 32%;*/
109 position: relative; 114 position: relative;
110 } 115 }
  116 +.middle-left-declare{
  117 + width:100%;
  118 +}
111 .middle-left-declare-rate{ 119 .middle-left-declare-rate{
112 height: 36%; 120 height: 36%;
  121 + width:86%;
113 122
114 } 123 }
115 .screen-middle #middle-bottom { 124 .screen-middle #middle-bottom {
@@ -130,7 +139,7 @@ @@ -130,7 +139,7 @@
130 } 139 }
131 140
132 .screen-right #right-top { 141 .screen-right #right-top {
133 - height: 32%; 142 + height: 30%;
134 position: relative; 143 position: relative;
135 } 144 }
136 .screen-right #right-center { 145 .screen-right #right-center {
@@ -148,6 +157,9 @@ @@ -148,6 +157,9 @@
148 } 157 }
149 .cpu-dropdown{ 158 .cpu-dropdown{
150 text-align: right; 159 text-align: right;
  160 + position: absolute;
  161 + right: 10px;
  162 + z-index: 1;
151 } 163 }
152 .cpu-dropdown .el-dropdown .el-dropdown-selfdefine{ 164 .cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
153 color:#ffffff; 165 color:#ffffff;
@@ -173,22 +185,22 @@ @@ -173,22 +185,22 @@
173 } 185 }
174 .screen-bottom #bottom-one { 186 .screen-bottom #bottom-one {
175 height: 100%; 187 height: 100%;
176 - width: 25%; 188 + width: 26%;
177 position: relative; 189 position: relative;
178 } 190 }
179 .screen-bottom #bottom-two { 191 .screen-bottom #bottom-two {
180 height: 100%; 192 height: 100%;
181 - width: 25%; 193 + width: 22%;
182 position: relative; 194 position: relative;
183 } 195 }
184 .screen-bottom #bottom-three { 196 .screen-bottom #bottom-three {
185 height: 100%; 197 height: 100%;
186 - width: 25%; 198 + width: 22%;
187 position: relative; 199 position: relative;
188 } 200 }
189 .screen-bottom #bottom-four { 201 .screen-bottom #bottom-four {
190 height: 100%; 202 height: 100%;
191 - width: 25%; 203 + width: 30%;
192 position: relative; 204 position: relative;
193 } 205 }
194 .icon-arrow{ 206 .icon-arrow{
@@ -28,7 +28,14 @@ @@ -28,7 +28,14 @@
28 width: 300px; 28 width: 300px;
29 } 29 }
30 30
31 -.yfyw-user .el-input__inner, .el-textarea__inner { 31 +.yfyw-user .el-input__inner {
  32 + border: none;
  33 + border-bottom: solid 1px #DCDFE6;
  34 + border-bottom-left-radius: 0;
  35 + border-bottom-right-radius: 0;
  36 +}
  37 +
  38 +.yfyw-user .el-textarea__inner {
32 border: none; 39 border: none;
33 border-bottom: solid 1px #DCDFE6; 40 border-bottom: solid 1px #DCDFE6;
34 border-bottom-left-radius: 0; 41 border-bottom-left-radius: 0;
@@ -60,7 +60,7 @@ body{font-size: 15px;} @@ -60,7 +60,7 @@ body{font-size: 15px;}
60 60
61 } 61 }
62 .declare-lineChart{ 62 .declare-lineChart{
63 - height:100%; 63 + height:50%;
64 } 64 }
65 .monitoring-bar{ 65 .monitoring-bar{
66 height:50%; 66 height:50%;
@@ -75,6 +75,7 @@ body{font-size: 15px;} @@ -75,6 +75,7 @@ body{font-size: 15px;}
75 } 75 }
76 .performance-lineChart{ 76 .performance-lineChart{
77 margin-top:30px; 77 margin-top:30px;
  78 + flex: 1;
78 } 79 }
79 .screen-res{ 80 .screen-res{
80 width:45%; 81 width:45%;
@@ -82,6 +83,11 @@ body{font-size: 15px;} @@ -82,6 +83,11 @@ body{font-size: 15px;}
82 .screen-performance{ 83 .screen-performance{
83 width:55%; 84 width:55%;
84 } 85 }
  86 +.performance-container{
  87 + height:100%;
  88 + display: flex;
  89 + flex-flow: column;
  90 +}
85 .performance-container .container-title{ 91 .performance-container .container-title{
86 margin-left:40px; 92 margin-left:40px;
87 } 93 }
  1 +<el-progress type="dashboard" :percentage="percentage" :status="status">
  2 + <template #default="{ percentage }">
  3 + <span class="percentage-value">{{ percentage }}%</span>
  4 + <span class="percentage-label">{{percentageText}}</span>
  5 + </template>
  6 +</el-progress>
  7 +
  8 +<!--
  9 +<el-progress
  10 + :text-inside="true"
  11 + :stroke-width="20"
  12 + :percentage="50"
  13 + status="exception" >
  14 + <span>Content</span>
  15 +</el-progress>
  16 +-->
  1 +export default {
  2 + name: 'resConfigIndex',
  3 + template: '',
  4 + components: {},
  5 + props: {
  6 + // 百分比数字，例如：50%，percentage= 50
  7 + percentage: {
  8 + type: Number,
  9 + default: 0
  10 + },
  11 + // 展示文字
  12 + percentageText: {
  13 + type: String,
  14 + default: ''
  15 + },
  16 + // 状态 success/exception/warning
  17 + status: {
  18 + type: String,
  19 + default: 'success'
  20 + },
  21 +
  22 + },
  23 + data() {
  24 + return {
  25 + }
  26 + },
  27 + setup(props, {attrs, slots, emit}) {
  28 + }
  29 +}
  1 +<div>
  2 + <el-dropdown>
  3 + <span class="el-dropdown-link" @click="openDetail">
  4 + {{resName}}
  5 + <el-icon class="el-icon--right">
  6 + <arrow-down/>
  7 + </el-icon>
  8 + </span>
  9 + <template #dropdown>
  10 + <el-dropdown-menu>
  11 + <el-dropdown-item v-if="start" title="收藏" @click="showDialog(true)">
  12 + <i class="iconfont icon-shoucang" style="color: #FEB61E"/>
  13 + </el-dropdown-item>
  14 + <el-dropdown-item v-if="topo" title="拓扑" @click="openTopoPage">
  15 + <i class="iconfont icon-wangluotuopu" style="color: #FEB61E"/>
  16 + </el-dropdown-item>
  17 + <el-dropdown-item v-if="assets" title="资产" @click="openCmdbAssets">
  18 + <i class="iconfont icon-assets" style="color: #FEB61E"/>
  19 + </el-dropdown-item>
  20 + </el-dropdown-menu>
  21 + </template>
  22 + </el-dropdown>
  23 +
  24 + <cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showDialog" @okfunc="saveStart">
  25 + <template v-slot>
  26 + <div style="padding: 10px" style="display: flex">
  27 + <div v-for="(v,k) in fieldsValueObj[currentRow.id].props" style="width: 50%">
  28 + <div style="text-align: left;padding-left: 10px;">{{v}}</div>
  29 + <el-select v-model="favIds" multiple placeholder="请选择" style="margin: 3px">
  30 + <el-option v-for="(item ,index) in favData"
  31 + :key="index"
  32 + :label="item.name"
  33 + :value="item.value" >
  34 + </el-option>
  35 + </el-select>
  36 + </div>
  37 + </div>
  38 + </template>
  39 + </cm-dialog>
  40 +
  41 +</div>
  1 +export default {
  2 + name: 'resConfigIndex',
  3 + template: '',
  4 + components: {},
  5 + props: {
  6 + // 资源名称
  7 + resName: {
  8 + type: String,
  9 + default: 0
  10 + },
  11 + // 展示文字 收藏、拓扑、资产 'start,topo,assets'
  12 + start: {
  13 + type: Boolean,
  14 + default: true
  15 + },
  16 + topo: {
  17 + type: Boolean,
  18 + default: true
  19 + },
  20 + assets: {
  21 + type: Boolean,
  22 + default: true
  23 + },
  24 + resId: {
  25 + type: String,
  26 + default: ''
  27 + },
  28 +
  29 + },
  30 + data() {
  31 + return {}
  32 + },
  33 + setup(props, {attrs, slots, emit}) {
  34 +
  35 + const {proxy} = Vue.getCurrentInstance();
  36 +
  37 + let dialogFlg = Vue.ref(false);
  38 + let favIds = Vue.ref([]);
  39 + let favData = Vue.ref([]);
  40 +
  41 + /**
  42 + * 展示收藏弹框
  43 + * <p>
  44 + * 作者： Wang
  45 + * 时间：2021/11/9 18:30
  46 + */
  47 + let showDialog = (flg) => {
  48 + dialogFlg.value = flg;
  49 +
  50 + if (favData.value.length == 0) {
  51 + // 加载收藏文件列表
  52 + proxy.$http.get(`/api-web/favorites/treeSelectData`, {}, function (res) {
  53 + if (res && res.data && res.data.length > 0) {
  54 + let arr = [];
  55 + let getChilds = (arr) => {
  56 + arr.forEach(function (v) {
  57 + if (v.children && v.children.length > 0) {
  58 + getChilds(v.children);
  59 + } else {
  60 + arr.push(v);
  61 + }
  62 + })
  63 + }
  64 + favData.value = arr;
  65 + }
  66 + });
  67 +
  68 + }
  69 + }
  70 +
  71 + /**
  72 + * 保存收藏
  73 + * <p>
  74 + * 作者： Wang
  75 + * 时间：2021/11/9 18:29
  76 + */
  77 + let saveStart = () => {
  78 + if (props.resId == '') {
  79 + proxy.$global.showMsg("资源Id不存在，确认！")
  80 + return;
  81 + }
  82 +
  83 + let params = {
  84 + favIds: favIds,
  85 + resId: props.resId
  86 + }
  87 + proxy.$http.post(`/api-web/favorites/save/fav`, params, function (res) {
  88 + if (res && res.success) {
  89 + proxy.$global.showMsg("收藏成功！")
  90 + }
  91 + });
  92 +
  93 + }
  94 +
  95 +
  96 + let openTopoPage = () => {
  97 + if (props.resId == '') {
  98 + proxy.$global.showMsg("资源Id不存在，确认！")
  99 + return;
  100 + }
  101 +
  102 + // 查询topoId
  103 + proxy.$http.get(`/api-web/mxgraph/generateByResId`, {resId: props.resId}, function (res) {
  104 + if (response && response.success) {
  105 + let topoId = response.str;
  106 + proxy.$global.openGraphEditor(topoId)
  107 + } else {
  108 + proxy.$global.showMsg('生成资源拓扑失败!', "error");
  109 + }
  110 + });
  111 + }
  112 +
  113 + let openDetail = () => {
  114 +
  115 + }
  116 +
  117 +
  118 + let openCmdbAssets = () => {
  119 + proxy.$global.openCmdbAssets(props.resId);
  120 + }
  121 +
  122 + return {
  123 + dialogFlg,
  124 + showDialog,
  125 + saveStart,
  126 + favIds,
  127 + favData,
  128 +
  129 + openTopoPage,
  130 + openDetail,
  131 + openCmdbAssets
  132 + }
  133 + }
  134 +}
  1 +<el-tag :type="type" effect="dark">
  2 + {{ text }}
  3 +</el-tag>
  1 +export default {
  2 + name: 'resConfigIndex',
  3 + template: '',
  4 + components: {},
  5 + props: {
  6 +
  7 + // 类型 danger success warning
  8 + type: {
  9 + type: String,
  10 + default: 'success'
  11 + },
  12 + // 文本
  13 + text: {
  14 + type: String,
  15 + default: ''
  16 + },
  17 +
  18 + },
  19 + data() {
  20 + return {
  21 + }
  22 + },
  23 + setup(props, {attrs, slots, emit}) {
  24 + }
  25 +}
@@ -5,19 +5,20 @@ @@ -5,19 +5,20 @@
5 <div style="text-align: left;padding-left: 10px;padding-top: 3px;font-weight: bold"> 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> 6 <el-link type="info" :underline="false"><i class="iconfont icon-liebiao"></i> 资源类型</el-link>
7 </div> 7 </div>
8 - <el-tree :data="treeData" :props="props" > 8 + <el-tree :data="treeData" :props="props" @node-click="handleConfigNodeClick">
9 <template #default="{ node, data }"> 9 <template #default="{ node, data }">
10 - <div style="position: relative;flex-direction: row;width: 100%;"> 10 + <!--<div style="display: flex;flex-direction: row;width: 100%;">
11 <div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;" 11 <div style="width: calc(100% - 60px);max-width: calc(100% - 60px);overflow: hidden;text-overflow: ellipsis;text-align: left;"
12 @click="handleConfigNodeClick(data)" :title="node.label"> 12 @click="handleConfigNodeClick(data)" :title="node.label">
13 {{node.label }} 13 {{node.label }}
14 </div> 14 </div>
15 - <div style="width: 60px;float: right"> 15 + <div style="width: 60px;">
16 <a @click="editType(data)" style="margin-right: 10px;"> 16 <a @click="editType(data)" style="margin-right: 10px;">
17 <i class="el-icon-setting"></i> 17 <i class="el-icon-setting"></i>
18 </a> 18 </a>
19 </div> 19 </div>
20 - </div> 20 + </div>-->
  21 + {{node.label }}
21 </template> 22 </template>
22 </el-tree> 23 </el-tree>
23 </div> 24 </div>
@@ -39,6 +40,10 @@ @@ -39,6 +40,10 @@
39 </template> 40 </template>
40 </el-dropdown> 41 </el-dropdown>
41 <el-button type="primary" @click="saveConfig" style="margin-left: 10px">保存</el-button> 42 <el-button type="primary" @click="saveConfig" style="margin-left: 10px">保存</el-button>
  43 +
  44 + <el-button type="primary" @click="showTreeNodeDialog(true)" style="margin-left: 10px">
  45 + <i class="el-icon-setting"></i>
  46 + </el-button>
42 </div> 47 </div>
43 48
44 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true" 49 <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
@@ -61,6 +66,21 @@ @@ -61,6 +66,21 @@
61 <el-option label="否" :value="1"></el-option> 66 <el-option label="否" :value="1"></el-option>
62 </el-select> 67 </el-select>
63 </div> 68 </div>
  69 +
  70 + <div v-else-if="prop == 'colComponents'">
  71 + <!-- 展示下拉选项 -->
  72 + <el-select placeholder="请选择" size="small" style="width: 100%"
  73 + @change="changeProperty(row,prop,column)" v-model="row.colComponents"
  74 + :multiple="false"
  75 + collapse-tags clearable filterable placeholder="请选择">
  76 + <el-option label="无" :value="''"></el-option>
  77 + <el-option label="资源名称" :value="'resNameComponents'"></el-option>
  78 + <el-option label="状态组件" :value="'statusComponents'"></el-option>
  79 + <el-option label="使用率组件" :value="'rateComponents'"></el-option>
  80 + </el-select>
  81 + </div>
  82 +
  83 +
64 <div v-else-if="['colType'].indexOf(prop) != -1"> 84 <div v-else-if="['colType'].indexOf(prop) != -1">
65 <el-select placeholder="选择类型" size="small" style="width: 100%" 85 <el-select placeholder="选择类型" size="small" style="width: 100%"
66 @change="getColType(row)" v-model="row.colType" :multiple="false" 86 @change="getColType(row)" v-model="row.colType" :multiple="false"
@@ -71,25 +91,27 @@ @@ -71,25 +91,27 @@
71 </el-option> 91 </el-option>
72 </el-select> 92 </el-select>
73 </div> 93 </div>
74 - <div v-else-if="['colTypeQueryFields'].indexOf(prop) != -1">  
75 - <span v-if="Object.keys(fieldsObj).length == 0 || fieldsObj.propertyType == 'INPUT' || row.colType == 'INPUT'"> - </span> 94 + <div v-else-if="['colTypeExtend'].indexOf(prop) != -1">
  95 + <span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
76 96
77 - <el-select v-else-if="fieldsObj.propertyType == 'LIST'" placeholder="请选择扩展属性" 97 + <el-select v-else-if="fieldsObj[row.colType] && fieldsObj[row.colType].propertyType == 'LIST'" placeholder="请选择扩展属性"
78 size="small" style="width: 100%" 98 size="small" style="width: 100%"
79 - @change="getColTypeExtVal(row)" v-model="row.colTypeQueryFields" 99 + v-model="row.colTypeExtend"
80 :multiple="false" 100 :multiple="false"
81 collapse-tags clearable filterable placeholder="请选择"> 101 collapse-tags clearable filterable placeholder="请选择">
82 - <el-option v-for="(value,key) in fieldsObj.object" :key="index"  
83 - :label="value[fieldsObj.text]"  
84 - :value="value[fieldsObj.value]"> 102 + <el-option v-for="(value,key) in fieldsObj[row.colType].object" :key="index"
  103 + :label="value[fieldsObj[row.colType].text]"
  104 + :value="value[fieldsObj[row.colType].value]">
85 </el-option> 105 </el-option>
86 </el-select> 106 </el-select>
87 </div> 107 </div>
88 108
89 - <div v-else-if="prop == 'colTypeVal'">  
90 - <span v-if="fieldsValueObj == undefined || fieldsValueObj[row.id] == undefined || Object.keys(fieldsValueObj) == 0"> - </span>  
91 - <el-button v-else icon="el-icon-setting" @click="showSettingCmDialog(true,row)" size="mini"  
92 - style="margin-left: 10px"></el-button> 109 + <div v-else-if="prop == 'colTypeExtendProps'">
  110 +
  111 + <span v-if="row.colType == '' || row.colType == null || row.colType == 'INPUT'"> - </span>
  112 +
  113 + <el-button v-else @click="showSettingCmDialog(true,row)" size="mini"
  114 + style="margin-left: 10px"> <i class="el-icon-setting"></i></el-button>
93 </div> 115 </div>
94 116
95 <div v-else> 117 <div v-else>
@@ -109,7 +131,7 @@ @@ -109,7 +131,7 @@
109 <template #tools> 131 <template #tools>
110 <el-table-column fixed="right" label="操作" width="80" align="center"> 132 <el-table-column fixed="right" label="操作" width="80" align="center">
111 <template #default="scope"> 133 <template #default="scope">
112 - <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)"> 134 + <el-button type="text" size="small" @click.prevent="deleteRow(row,scope.$index)">
113 <i class="el-icon-delete"/> 135 <i class="el-icon-delete"/>
114 </el-button> 136 </el-button>
115 </template> 137 </template>
@@ -136,4 +158,31 @@ @@ -136,4 +158,31 @@
136 </div> 158 </div>
137 </template> 159 </template>
138 </cm-dialog> 160 </cm-dialog>
  161 +
  162 + <cm-dialog :title="`${currentNode.label}类型属性配置`" width="500px" :showDialogVisible="treeNodeDialogFlg" @hidedialog="showTreeNodeDialog" @okfunc="saveTreeNodeConfig">
  163 + <template v-slot>
  164 + <el-form
  165 + label-width="120px"
  166 + ref="ruleForm"
  167 + :model="treeNodeForm"
  168 + :rules="treeNodeFormRules"
  169 + label-position="right"
  170 + label-width="120px">
  171 +
  172 + <el-form-item label="配置信息" prop="name">
  173 + <el-input :size="$global.elementSize" v-model="treeNodeForm.options" clearable ></el-input>
  174 + </el-form-item>
  175 +
  176 + <el-form-item label="详情页配置函数" prop="type">
  177 + <el-input :size="$global.elementSize" v-model="treeNodeForm.detailFunc" type="textarea" clearable></el-input>
  178 + </el-form-item>
  179 +
  180 +
  181 + <el-form-item label="查询视图" prop="sort">
  182 + <el-input :size="$global.elementSize" v-model="treeNodeForm.veiwName" clearable readonly></el-input>
  183 + </el-form-item>
  184 +
  185 + </el-form>
  186 + </template>
  187 + </cm-dialog>
139 </div> 188 </div>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 * 配置页面编辑属性 2 * 配置页面编辑属性
3 * @returns {{editColProps: {}}} 3 * @returns {{editColProps: {}}}
4 */ 4 */
5 -let configPageEdit = () => { 5 +let configPageEdit = (columns, currentNode) => {
6 const {proxy} = Vue.getCurrentInstance(); 6 const {proxy} = Vue.getCurrentInstance();
7 // 编辑属性 7 // 编辑属性
8 let editColProps = Vue.ref({}); 8 let editColProps = Vue.ref({});
@@ -33,13 +33,24 @@ let configPageEdit = () => { @@ -33,13 +33,24 @@ let configPageEdit = () => {
33 * 时间：2021/10/27 14:34 33 * 时间：2021/10/27 14:34
34 */ 34 */
35 let getColType = (row) => { 35 let getColType = (row) => {
36 -  
37 // 获取属性标识的配置 36 // 获取属性标识的配置
38 let code = row.colType; 37 let code = row.colType;
39 - proxy.$http.get(`/api-web/v32/res/list/detail/col/${code}`, {}, function (res) {  
40 - if (res && res.object) {  
41 - fieldsObj.value = res.object;  
42 - row.colTypeQueryFields = ''; 38 +
  39 + if (fieldsObj.value[code] && Object.keys(fieldsObj.value[code]).length > 0) {
  40 + row.colTypeExtend = '';
  41 + return;
  42 + }
  43 +
  44 + let params = {
  45 + resTypeId: currentNode.value.id,
  46 + colType: row.colType,
  47 + colTypeExtendProps: row.colTypeExtendProps,
  48 + colTypeExtend: row.colTypeExtend
  49 + }
  50 +
  51 + proxy.$http.get(`/api-web/v32/res/config/detail/colTypes`, params, function (res) {
  52 + if (res && res.map) {
  53 + fieldsObj.value = res.map;
43 } 54 }
44 }); 55 });
45 } 56 }
@@ -50,30 +61,55 @@ let configPageEdit = () => { @@ -50,30 +61,55 @@ let configPageEdit = () => {
50 * 作者： Wang 61 * 作者： Wang
51 * 时间：2021/10/27 14:34 62 * 时间：2021/10/27 14:34
52 */ 63 */
53 - let getColTypeExtVal = (row) => { 64 + let getColTypeExtVal = (flg, row) => {
  65 + let colTypeExtend = row.colTypeExtend;
  66 + let rowProps = row.colTypeExtendProps;
  67 + if(!colTypeExtend || colTypeExtend == '' || colTypeExtend == null){
  68 + proxy.$global.showMsg("请选择关联扩展属性！", "warning")
  69 + return;
  70 + }
  71 +
  72 + if(fieldsValueObj.value[row.id] && Object.keys(fieldsValueObj.value[row.id]).length >0){
  73 + return;
  74 + }
54 // 获取属性标识的配置 75 // 获取属性标识的配置
55 let params = { 76 let params = {
  77 + resTypeId: currentNode.value.id,
56 colType: row.colType, 78 colType: row.colType,
57 - colTypeQueryFields: row.colTypeQueryFields 79 + colTypeExtendProps: rowProps,
  80 + colTypeExtend: colTypeExtend
58 } 81 }
59 - proxy.$http.get(`/api-web/v32/res/list/detail/setting`, params, function (res) { 82 + proxy.$http.get(`/api-web/v32/res/config/detail/setting`, params, function (res) {
60 if (res && res.object) { 83 if (res && res.object) {
61 fieldsValueObj.value[row.id] = res.object; 84 fieldsValueObj.value[row.id] = res.object;
  85 +
  86 + let defVal = JSON.parse(rowProps);
  87 + if(defVal){
  88 + settingVal.value[row.id] = defVal;
  89 + } else {
62 settingVal.value[row.id] = {}; 90 settingVal.value[row.id] = {};
63 } 91 }
  92 + settingCmDialogFlg.value = flg;
  93 + } else {
  94 + proxy.$global.showMsg("该属性无需配置！", "warning")
  95 + }
64 }); 96 });
65 97
66 } 98 }
67 99
68 let showSettingCmDialog = (flg, row) => { 100 let showSettingCmDialog = (flg, row) => {
69 - settingCmDialogFlg.value = flg; 101 +
70 if (flg == true && row) { 102 if (flg == true && row) {
71 currentRow.value = row; 103 currentRow.value = row;
72 - // 记载已配置的属性  
73 - if(row.setting && row.setting[row.id]){ 104 + // 加载已配置的属性
  105 + if (row.setting && row.setting[row.id]) {
74 settingVal.value[row.id] = row.setting[row.id] 106 settingVal.value[row.id] = row.setting[row.id]
  107 + } else {
  108 + getColTypeExtVal(flg, row);
  109 + return;
75 } 110 }
76 } 111 }
  112 + settingCmDialogFlg.value = flg;
77 } 113 }
78 114
79 let getSettingDetail = () => { 115 let getSettingDetail = () => {
@@ -98,12 +134,76 @@ let configPageEdit = () => { @@ -98,12 +134,76 @@ let configPageEdit = () => {
98 } 134 }
99 } 135 }
100 136
  137 +/**
  138 + * 展示配置属性
  139 + * <p>
  140 + * 作者： Wang
  141 + * 时间：2021/11/8 16:30
  142 + */
  143 +const treeNodeConfig = (currentNode) => {
  144 +
  145 + const {proxy} = Vue.getCurrentInstance();
  146 +
  147 + let treeNodeDialogFlg = Vue.ref(false);
  148 + let treeNodeForm = Vue.ref({
  149 + options: '',
  150 + detailFunc: '',
  151 + veiwName: ''
  152 + });
  153 +
  154 + let treeNodeFormRules = Vue.ref({});
  155 +
  156 + /**
  157 + * 展示树节点配置
  158 + * <p>
  159 + * 作者： Wang
  160 + * 时间：2021/11/8 16:33
  161 + */
  162 + let showTreeNodeDialog = (flg) => {
  163 + if (flg && flg == true && currentNode.value.map) {
  164 + treeNodeForm.value = {
  165 + id: currentNode.value.id,
  166 + options: currentNode.value.map.options,
  167 + detailFunc: currentNode.value.map.detailFunc,
  168 + veiwName: currentNode.value.map.veiwName
  169 + }
  170 + }
  171 + treeNodeDialogFlg.value = flg;
  172 + }
  173 +
  174 +
  175 + /**
  176 + * 保存树节点配置
  177 + */
  178 + let saveTreeNodeConfig = () => {
  179 + proxy.$http.get(`/api-web/v32/res/config/saveTreeConfig`, treeNodeForm.value, function (res) {
  180 + if (res && res.success) {
  181 + proxy.$global.showMsg("保存成功！")
  182 + }
  183 + });
  184 + }
  185 +
  186 + return {
  187 + treeNodeDialogFlg,
  188 + showTreeNodeDialog,
  189 + saveTreeNodeConfig,
  190 + treeNodeForm,
  191 + treeNodeFormRules
  192 + }
  193 +}
  194 +
101 export default { 195 export default {
102 name: 'resConfigIndex', 196 name: 'resConfigIndex',
103 template: '', 197 template: '',
104 components: { 198 components: {
105 - 'property-edit': Vue.defineAsyncComponent(  
106 - () => myImport('components/page/assets/propertyedit/index') 199 + 'rateComponents': Vue.defineAsyncComponent(
  200 + () => myImport('components/page/res/rateComponents/index')
  201 + ),
  202 + 'resNameComponents': Vue.defineAsyncComponent(
  203 + () => myImport('components/page/res/resNameComponents/index')
  204 + ),
  205 + 'statusComponents': Vue.defineAsyncComponent(
  206 + () => myImport('components/page/res/statusComponents/index')
107 ), 207 ),
108 }, 208 },
109 data() { 209 data() {
@@ -114,7 +214,7 @@ export default { @@ -114,7 +214,7 @@ export default {
114 } 214 }
115 } 215 }
116 }, 216 },
117 - setup() { 217 + setup(props, {attrs, slots, emit}) {
118 const {proxy} = Vue.getCurrentInstance(); 218 const {proxy} = Vue.getCurrentInstance();
119 let height = Vue.ref((window.innerHeight - 10) * 0.8); 219 let height = Vue.ref((window.innerHeight - 10) * 0.8);
120 let currentNode = Vue.ref({}); 220 let currentNode = Vue.ref({});
@@ -139,7 +239,16 @@ export default { @@ -139,7 +239,16 @@ export default {
139 getSettingDetail, 239 getSettingDetail,
140 currentRow, 240 currentRow,
141 settingVal 241 settingVal
142 - } = configPageEdit() 242 + } = configPageEdit(columns, currentNode)
  243 +
  244 +
  245 + const {
  246 + treeNodeDialogFlg,
  247 + showTreeNodeDialog,
  248 + saveTreeNodeConfig,
  249 + treeNodeForm,
  250 + treeNodeFormRules
  251 + } = treeNodeConfig(currentNode);
143 252
144 253
145 // 获取左侧树结构 254 // 获取左侧树结构
@@ -147,11 +256,11 @@ export default { @@ -147,11 +256,11 @@ export default {
147 proxy.$http.get("/api-web/v32/res/list/config/tree", {}, function (res) { 256 proxy.$http.get("/api-web/v32/res/list/config/tree", {}, function (res) {
148 if (res && res.data) { 257 if (res && res.data) {
149 let arr = []; 258 let arr = [];
150 - res.data.forEach(function (v){ 259 + res.data.forEach(function (v) {
151 arr.push({ 260 arr.push({
152 - id:v.id,  
153 - label:v.label,  
154 - children:v.children 261 + id: v.id,
  262 + label: v.label,
  263 + children: v.children
155 }); 264 });
156 }) 265 })
157 266
@@ -171,7 +280,7 @@ export default { @@ -171,7 +280,7 @@ export default {
171 treeNodeId: currentNode.value.id, 280 treeNodeId: currentNode.value.id,
172 loadDefault: defList.value.length == 0 ? 1 : 0 281 loadDefault: defList.value.length == 0 ? 1 : 0
173 } 282 }
174 - proxy.$http.get(`/api-web/v32/res/list/config`, params, function (res) { 283 + proxy.$http.get(`/api-web/v32/res/config/list`, params, function (res) {
175 if (res && res.object) { 284 if (res && res.object) {
176 columns.value = res.object.columns; 285 columns.value = res.object.columns;
177 dataList.value = res.object.datas; 286 dataList.value = res.object.datas;
@@ -179,6 +288,10 @@ export default { @@ -179,6 +288,10 @@ export default {
179 let arr = res.object.defaultList; 288 let arr = res.object.defaultList;
180 if (arr && arr.length > 0) { 289 if (arr && arr.length > 0) {
181 defList.value = arr; 290 defList.value = arr;
  291 +
  292 + // 加载一个数据的类型
  293 + getColType(arr[0]);
  294 +
182 } 295 }
183 } 296 }
184 }); 297 });
@@ -191,8 +304,22 @@ export default { @@ -191,8 +304,22 @@ export default {
191 * 作者： Wang 304 * 作者： Wang
192 * 时间：2021/10/28 17:55 305 * 时间：2021/10/28 17:55
193 */ 306 */
  307 + let clickIndex = 0;
194 let handleConfigNodeClick = (data) => { 308 let handleConfigNodeClick = (data) => {
195 if (data) { 309 if (data) {
  310 +
  311 + let isExistArr = dataList.value.filter(function (v) {
  312 + if (v.isAdd && v.isAdd == 1) {
  313 + return v;
  314 + }
  315 + })
  316 + if (isExistArr.length > 0) {
  317 + proxy.$global.confirm("有已添未保存的配置数据，是否清空？", function () {
  318 + currentNode.value = data;
  319 + getConfigData();
  320 + })
  321 + return;
  322 + }
196 currentNode.value = data; 323 currentNode.value = data;
197 getConfigData(); 324 getConfigData();
198 } 325 }
@@ -218,6 +345,9 @@ export default { @@ -218,6 +345,9 @@ export default {
218 data['isQuery'] = 1; 345 data['isQuery'] = 1;
219 data['colIsTd'] = 1; 346 data['colIsTd'] = 1;
220 data['status'] = 0; 347 data['status'] = 0;
  348 + data['resListId'] = currentNode.value.id;
  349 + // 排序
  350 + data['colSort'] = 100;
221 // 新增状态 351 // 新增状态
222 data['isAdd'] = 1; 352 data['isAdd'] = 1;
223 353
@@ -236,11 +366,56 @@ export default { @@ -236,11 +366,56 @@ export default {
236 return; 366 return;
237 } 367 }
238 // 添加 368 // 添加
239 - dataList.value.splice(0, 0, item); 369 + let newData = {...item};
  370 + newData['resListId'] = currentNode.value.id;
  371 + dataList.value.splice(0, 0, newData);
240 } 372 }
241 // 保存 373 // 保存
242 let saveConfig = () => { 374 let saveConfig = () => {
243 - console.log(dataList.value) 375 +
  376 + let arr = dataList.value;
  377 + if (arr.length == 0) {
  378 + proxy.$global.showMsg("请添加配置项！", 'warning');
  379 + return;
  380 + }
  381 +
  382 + let msg = "";
  383 + arr.filter(function (v, i) {
  384 + if (v.colAlias == '' || v.colKey == '') {
  385 + msg += `请填写第${(i + 1)}行的属性名称或者标识！`
  386 + } else if (v.colWidth == '' || v.colWidth == null || v.colWidth < 0) {
  387 + msg += `第${(i + 1)}行的列宽不能为空或者小于0！`
  388 + } else if (v.colWidth == '' || v.colSort == null || v.colSort < 0) {
  389 + msg += `请填写第${(i + 1)}行的排序不能为空或者小于0！`
  390 + }
  391 + })
  392 +
  393 + if (msg != '') {
  394 + proxy.$global.showMsg(msg, 'warning');
  395 + return;
  396 + }
  397 +
  398 + // 保存时，将v['setting']转换为string
  399 + arr.forEach(function (v) {
  400 + v['setting'] = JSON.stringify(v['setting']);
  401 + })
  402 +
  403 + /**
  404 + * 保存配置
  405 + * <p>
  406 + * 作者： Wang
  407 + * 时间：2021/11/9 15:19
  408 + */
  409 + proxy.$http.post(`/api-web/v32/res/config/saveResTypeConfig/${currentNode.value.id}`, arr, function (res) {
  410 + if (res && res.success) {
  411 + proxy.$global.showMsg("保存成功！");
  412 +
  413 + // 刷新当前列表数据
  414 + getConfigData();
  415 + } else {
  416 + proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "保存成功！", "error");
  417 + }
  418 + });
244 } 419 }
245 420
246 /** 421 /**
@@ -249,11 +424,22 @@ export default { @@ -249,11 +424,22 @@ export default {
249 * 作者： Wang 424 * 作者： Wang
250 * 时间：2021/10/26 19:47 425 * 时间：2021/10/26 19:47
251 */ 426 */
252 - let deleteRow = (index) => {  
253 - proxy.$global.confirm("确认删除该行配置吗？", function () {  
254 - dataList.value.splice(index, 1);  
255 - 427 + let deleteRow = (row,index) => {
  428 + proxy.$global.confirm("确认删除该配置项吗？", function () {
  429 + if(row.isAdd && row.isAdd == 1){
256 proxy.$global.showMsg("删除成功！") 430 proxy.$global.showMsg("删除成功！")
  431 + dataList.value.splice(index, 1);
  432 + } else {
  433 + // 删除配置项
  434 + proxy.$http.post(`/api-web/v32/res/config/deleteResTypeConfig/${row.id}`, {}, function (res) {
  435 + if (res && res.success) {
  436 + proxy.$global.showMsg("删除成功！");
  437 + dataList.value.splice(index, 1);
  438 + } else {
  439 + proxy.$global.showMsg(res.msg && res.msg != '' ? res.msg : "删除失败！", "error");
  440 + }
  441 + });
  442 + }
257 }) 443 })
258 } 444 }
259 445
@@ -286,7 +472,14 @@ export default { @@ -286,7 +472,14 @@ export default {
286 showSettingCmDialog, 472 showSettingCmDialog,
287 getSettingDetail, 473 getSettingDetail,
288 currentRow, 474 currentRow,
289 - settingVal 475 + settingVal,
  476 +
  477 + // 树节点配置
  478 + treeNodeDialogFlg,
  479 + showTreeNodeDialog,
  480 + saveTreeNodeConfig,
  481 + treeNodeForm,
  482 + treeNodeFormRules
290 } 483 }
291 } 484 }
292 } 485 }
@@ -104,6 +104,12 @@ const routes = [{ @@ -104,6 +104,12 @@ const routes = [{
104 path: '/zjdaping', 104 path: '/zjdaping',
105 name: 'zjdaping', 105 name: 'zjdaping',
106 component: () => myImport('views/zjdaping/index') 106 component: () => myImport('views/zjdaping/index')
  107 + },
  108 + {
  109 + path: '/analysis',
  110 + name: 'analysis',
  111 + // component: () => myImport('views/analysis/components/addIndex/index')
  112 + component: () => myImport('views/analysis/components/add/index')
107 } 113 }
108 ]; 114 ];
109 115
  1 +<div class="analysis-add-container">
  2 + <el-row>
  3 + <div class="add-top">
  4 + <el-row>
  5 + <el-col :span="16" class="add-top-title">
  6 + <el-button type="primary">这里是场景名称</el-button>
  7 + </el-col>
  8 + <el-col :span="8" class="add-top-select">
  9 + <el-dropdown>
  10 + <el-button type="primary">
  11 + 时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
  12 + </el-button>
  13 + <template #dropdown>
  14 + <el-dropdown-menu>
  15 + <el-dropdown-item>Action 1</el-dropdown-item>
  16 + <el-dropdown-item>Action 2</el-dropdown-item>
  17 + <el-dropdown-item>Action 3</el-dropdown-item>
  18 + <el-dropdown-item>Action 4</el-dropdown-item>
  19 + <el-dropdown-item>Action 5</el-dropdown-item>
  20 + </el-dropdown-menu>
  21 + </template>
  22 + </el-dropdown>
  23 + <el-dropdown>
  24 + <el-button type="primary">
  25 + 契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
  26 + </el-button>
  27 + <template #dropdown>
  28 + <el-dropdown-menu>
  29 + <el-dropdown-item>Action 1</el-dropdown-item>
  30 + <el-dropdown-item>Action 2</el-dropdown-item>
  31 + <el-dropdown-item>Action 3</el-dropdown-item>
  32 + <el-dropdown-item>Action 4</el-dropdown-item>
  33 + <el-dropdown-item>Action 5</el-dropdown-item>
  34 + </el-dropdown-menu>
  35 + </template>
  36 + </el-dropdown>
  37 + <el-button type="primary">保存按钮</el-button>
  38 + </el-col>
  39 + </el-row>
  40 + <el-row>
  41 + <el-col :span="24">
  42 + <div class="classLine">
  43 + <lineChart></lineChart>
  44 + </div>
  45 +
  46 +
  47 + </el-col>
  48 + </el-row>
  49 + </div>
  50 + </el-row>
  51 + <el-row>
  52 + <div class="add-bottom">
  53 + <el-row>
  54 + <el-col :span="6" class="bottom-condition">
  55 + <el-row>
  56 + <el-col :span="24">
  57 + <el-dropdown>
  58 + <el-button >
  59 + 电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
  60 + </el-button>
  61 + <template #dropdown>
  62 + <el-dropdown-menu>
  63 + <el-dropdown-item>Action 1</el-dropdown-item>
  64 + <el-dropdown-item>Action 2</el-dropdown-item>
  65 + <el-dropdown-item>Action 3</el-dropdown-item>
  66 + <el-dropdown-item>Action 4</el-dropdown-item>
  67 + <el-dropdown-item>Action 5</el-dropdown-item>
  68 + </el-dropdown-menu>
  69 + </template>
  70 + </el-dropdown>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row>
  74 + <el-col :span="24">
  75 + <el-dropdown>
  76 + <el-button >
  77 + 资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
  78 + </el-button>
  79 + <template #dropdown>
  80 + <el-dropdown-menu>
  81 + <el-dropdown-item>Action 1</el-dropdown-item>
  82 + <el-dropdown-item>Action 2</el-dropdown-item>
  83 + <el-dropdown-item>Action 3</el-dropdown-item>
  84 + <el-dropdown-item>Action 4</el-dropdown-item>
  85 + <el-dropdown-item>Action 5</el-dropdown-item>
  86 + </el-dropdown-menu>
  87 + </template>
  88 + </el-dropdown>
  89 + </el-col>
  90 + </el-row>
  91 + <el-row>
  92 + <el-col :span="24">
  93 + <el-dropdown>
  94 + <el-button >
  95 + 指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
  96 + </el-button>
  97 + <template #dropdown>
  98 + <el-dropdown-menu>
  99 + <el-dropdown-item>Action 1</el-dropdown-item>
  100 + <el-dropdown-item>Action 2</el-dropdown-item>
  101 + <el-dropdown-item>Action 3</el-dropdown-item>
  102 + <el-dropdown-item>Action 4</el-dropdown-item>
  103 + <el-dropdown-item>Action 5</el-dropdown-item>
  104 + </el-dropdown-menu>
  105 + </template>
  106 + </el-dropdown>
  107 + </el-col>
  108 + </el-row>
  109 + <el-row>
  110 + <el-col :span="24">
  111 + <el-input v-model="input" placeholder="Please input" />
  112 + </el-col>
  113 + </el-row>
  114 +
  115 + </el-col>
  116 + <el-col :span="18">
  117 + <el-tabs type="border-card">
  118 + <el-tab-pane label="User">
  119 + <el-table :data="tableData" border style="width: 100%">
  120 + <el-table-column prop="date" label="Date" width="180" />
  121 + <el-table-column prop="name" label="Name" width="180" />
  122 + <el-table-column prop="address" label="Address" />
  123 + </el-table>
  124 + </el-tab-pane>
  125 + <el-tab-pane label="Config">Config</el-tab-pane>
  126 + <el-tab-pane label="Role">Role</el-tab-pane>
  127 + <el-tab-pane label="Task">Task</el-tab-pane>
  128 + </el-tabs>
  129 + </el-col>
  130 + </el-row>
  131 + </div>
  132 + </el-row>
  133 +</div>
  1 +export default {
  2 + name: 'addIndex',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 + tableData: [
  8 + {
  9 + date: '2016-05-03',
  10 + name: 'Tom',
  11 + address: 'No. 189, Grove St, Los Angeles',
  12 + },
  13 + {
  14 + date: '2016-05-02',
  15 + name: 'Tom',
  16 + address: 'No. 189, Grove St, Los Angeles',
  17 + },
  18 + {
  19 + date: '2016-05-04',
  20 + name: 'Tom',
  21 + address: 'No. 189, Grove St, Los Angeles',
  22 + },
  23 + {
  24 + date: '2016-05-01',
  25 + name: 'Tom',
  26 + address: 'No. 189, Grove St, Los Angeles',
  27 + },
  28 + ],
  29 +
  30 + }
  31 + },
  32 + setup(){
  33 +
  34 + }
  35 +}
  1 +<div class="analysis-index-container">
  2 + <div class="iconAdd">
  3 + 点击添加比对分析
  4 + </div>
  5 +</div>
  1 +export default {
  2 + name: 'addIndex',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 +
  12 + }
  13 +}
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Title</title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
  1 +export default {
  2 + name: 'analysis',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 +
  12 + }
  13 +}
@@ -8,79 +8,132 @@ export default { @@ -8,79 +8,132 @@ export default {
8 }, 8 },
9 data(){ 9 data(){
10 return { 10 return {
  11 + titleFontSize:20,
11 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/sxview/getBusinessAvailability', 13 apiUrl:'/api-web/sxview/getBusinessAvailability',
13 - resourceStatisticsData:'', 14 + kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
  15 + busId:'247c0c978f574285bf642f55611ea75d',
  16 + performanceData:'',
  17 + xAxisData:'',
  18 + yAxisData:'',
14 optionData:'', 19 optionData:'',
15 - ySeriesCommon:[],  
16 - titleFontSize: 30, 20 + ySeriesCommon:[]
17 21
18 } 22 }
19 }, 23 },
20 computed: { 24 computed: {
21 comtitleTextStyle () { 25 comtitleTextStyle () {
22 return { 26 return {
23 - fontSize: this.titleFontSize / 1.2 + 'px' 27 + fontSize: this.titleFontSize / 2.1 + 'px'
24 } 28 }
25 }, 29 },
26 comtitleImgStyle () { 30 comtitleImgStyle () {
27 return { 31 return {
28 - height: this.titleFontSize * 2.1 + 'px' 32 + height: this.titleFontSize * 1.8 + 'px'
29 } 33 }
30 } 34 }
31 }, 35 },
32 setup(props, {attrs, slots, emit}) { 36 setup(props, {attrs, slots, emit}) {
33 const {proxy} = Vue.getCurrentInstance(); 37 const {proxy} = Vue.getCurrentInstance();
  38 + const xAxisData=Vue.ref();
  39 + const yAxisData=Vue.ref([]);
  40 + const legendData=Vue.ref([]);
34 41
35 - 42 + // 半透明的颜色值
  43 + const colorArr1 = [
  44 + 'rgba(151,213,244, 0.8)',
  45 + 'rgba(239,224,167, 0.8)',
  46 + 'rgba(229,171,209, 0.8)',
  47 + 'rgba(151,170,255, 0.8)'
  48 + ]
  49 + // 全透明的颜色值
  50 + const colorArr2 = [
  51 + 'rgba(151,213,244, 0)',
  52 + 'rgba(239,224,167, 0)',
  53 + 'rgba(229,171,209, 0)',
  54 + 'rgba(151,170,255, 0)'
  55 + ]
36 // 挂载完 56 // 挂载完
37 -  
38 Vue.onMounted(() => { 57 Vue.onMounted(() => {
39 proxy.screenAdapter(); 58 proxy.screenAdapter();
40 proxy.getData(); 59 proxy.getData();
41 60
42 }) 61 })
43 - const getData=()=> {  
44 - $.get(proxy.domainName + proxy.apiUrl, function (res) { 62 + const getData=()=>{
  63 + let params = {
  64 + kpiIds: proxy.kpiIds,
  65 + busId: proxy.busId,
  66 + startTime:'',
  67 + endTime:'',
  68 + access_token:localStorage.getItem('access_token')
  69 + };
  70 + $.get(proxy.domainName +proxy.apiUrl,params,function (res) {
45 const data = res; 71 const data = res;
46 - if (data && data.data) {  
47 - let resData = data.data; 72 + if (data ) {
  73 + if(data.map){
  74 + let resData=data.map;
  75 + proxy.legendData=resData.legend;
  76 + proxy.xAxisData=resData.x;
  77 + proxy.yAxisData=resData.y;
  78 + }else{
  79 + let nullArr=[];
  80 + for(let i=0;i<4;i++){
  81 + nullArr.push(i)
  82 + proxy.legendData.push({
  83 + name:''
  84 + })
  85 + }
  86 + proxy.xAxisData=nullArr;
  87 + for(let i=0;i<4;i++){
  88 + proxy.yAxisData.push(nullArr);
  89 +
  90 + }
48 91
49 } 92 }
50 - // proxy.optionInit();  
51 93
52 - })  
53 94
54 proxy.optionInit(); 95 proxy.optionInit();
  96 +
  97 + }
  98 +
  99 + })
  100 + // proxy.optionInit();
  101 +
55 } 102 }
56 103
57 const optionInit=()=>{ 104 const optionInit=()=>{
58 105
59 - let data3=[350, 350, 350, 350, 350, 350, 350];  
60 - let data4=[220, 182, 191, 234, 290, 330, 310];  
61 - let data2=[100, 100, 100, 100, 100, 100, 100];  
62 - let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52]; 106 + let data3=proxy.yAxisData[0];
  107 + let data4=proxy.yAxisData[3];
  108 + let data2=proxy.yAxisData[2];
  109 + let data1=proxy.yAxisData[1];
63 110
64 let min1=proxy.calMin([data1,data2]); 111 let min1=proxy.calMin([data1,data2]);
65 let max1=proxy.calMax([data1,data2]); 112 let max1=proxy.calMax([data1,data2]);
66 let min2=proxy.calMin([data3,data4]); 113 let min2=proxy.calMin([data3,data4]);
67 let max2=proxy.calMax([data3,data4]); 114 let max2=proxy.calMax([data3,data4]);
68 - //业务双y轴数据  
69 - proxy.ySeriesCommon=[ 115 + proxy.legendData.map((item,index)=>{
  116 + let i=0;
  117 + if(index%2==0 ||index%3==0){
  118 + i=0;
  119 + }else{
  120 + i=1;
  121 + }
  122 + proxy.ySeriesCommon.push(
70 { 123 {
71 - name:'可用性', 124 + name:item,
72 type: 'line', 125 type: 'line',
73 smooth:true, 126 smooth:true,
74 // stack: 'Total', 127 // stack: 'Total',
75 show:false, 128 show:false,
76 - data:data3,  
77 - yAxisIndex:1, 129 + data:proxy.yAxisData[index],
  130 + yAxisIndex:i,
78 showSymbol:false, 131 showSymbol:false,
79 itemStyle : { 132 itemStyle : {
80 normal : { 133 normal : {
81 - color:"#97d5f4",//tooltip里的小圆点颜色 134 + color:colorArr1[index],//tooltip里的小圆点颜色
82 lineStyle:{ 135 lineStyle:{
83 - color:'#97d5f4', 136 + color:colorArr1[index],
84 width:1 137 width:1
85 } 138 }
86 } 139 }
@@ -88,97 +141,32 @@ export default { @@ -88,97 +141,32 @@ export default {
88 areaStyle: { 141 areaStyle: {
89 // color:'rgba(151,213,244,0.4)', 142 // color:'rgba(151,213,244,0.4)',
90 normal:{ 143 normal:{
91 - color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变 144 + color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
92 offset: 0, 145 offset: 0,
93 - color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明 146 + color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
94 }, { 147 }, {
95 offset: 1, 148 offset: 1,
96 - color: 'rgba(151,213,244,0.1)' 149 + color: colorArr2[index]
97 }]) 150 }])
98 } 151 }
99 152
100 }, 153 },
101 }, 154 },
102 - {  
103 - name:'成功率',  
104 - type: 'line',  
105 - smooth:true,  
106 - // stack: 'Total',  
107 - show:false,  
108 - data:data1,  
109 - yAxisIndex:0,  
110 - showSymbol:false,  
111 - itemStyle : {  
112 - normal : {  
113 - color:"#efe0a7",//tooltip里的小圆点颜色  
114 - lineStyle:{  
115 - color:'#efe0a7',  
116 - width:1  
117 - }  
118 - }  
119 - },  
120 - areaStyle: {  
121 - color:'rgba(239,224,167,0)'  
122 - },  
123 - },  
124 - {  
125 - name:'响应率',  
126 - type: 'line',  
127 - smooth:true,  
128 - // stack: 'Total',  
129 - show:false,  
130 - data:data2,  
131 - yAxisIndex:0,  
132 - showSymbol:false,  
133 - itemStyle : {  
134 - normal : {  
135 - color:"#e5abd1",//tooltip里的小圆点颜色  
136 - lineStyle:{  
137 - color:'#e5abd1',  
138 - width:1  
139 - }  
140 - }  
141 - },  
142 - areaStyle: {  
143 - color:'rgba(229,171,209,0)'  
144 - },  
145 - },  
146 - {  
147 - name:'交易量',  
148 - type: 'line',  
149 - smooth:true,  
150 - // stack: 'Total',  
151 - show:false,  
152 - data:data4,  
153 - yAxisIndex:1,  
154 - showSymbol:false,  
155 - itemStyle : {  
156 - normal : {  
157 - color:"#97aaff",//tooltip里的小圆点颜色  
158 - lineStyle:{  
159 - color:'#97aaff',  
160 - width:1,  
161 - }  
162 - }  
163 - },  
164 - areaStyle: {  
165 - color:'rgba(151,170,255,0)'  
166 - },  
167 - }  
168 - ] 155 + )
  156 + })
  157 + //业务双y轴数据
  158 +
169 // let xAxisDataLength=proxy.ySeriesCommon[0].length; 159 // let xAxisDataLength=proxy.ySeriesCommon[0].length;
170 let xAxisData=[]; 160 let xAxisData=[];
171 - for(let i=0;i<=24;i++){  
172 - if(i%4==0){  
173 - xAxisData.push(i+':00') 161 + if(proxy.xAxisData){
  162 + proxy.xAxisData.map((item,index)=>{
  163 + if(index%20==0){
  164 + xAxisData.push(item)
174 165
175 } 166 }
176 - }  
177 - let legendData=[];  
178 - $.each(proxy.ySeriesCommon,function (i,v){  
179 - legendData.push(v.name)  
180 }) 167 })
181 - proxy.legendData=legendData; 168 +
  169 + }
182 proxy.optionData = { 170 proxy.optionData = {
183 title: { 171 title: {
184 text: '' 172 text: ''
@@ -308,6 +296,9 @@ export default { @@ -308,6 +296,9 @@ export default {
308 calMin, 296 calMin,
309 optionInit, 297 optionInit,
310 getData, 298 getData,
  299 + xAxisData,
  300 + yAxisData,
  301 + legendData,
311 screenAdapter 302 screenAdapter
312 } 303 }
313 } 304 }
1 export default { 1 export default {
2 name: 'BandwidthCpu', 2 name: 'BandwidthCpu',
3 template: '', 3 template: '',
  4 + props:['commandVal'],
4 components: { 5 components: {
5 'LineChart': Vue.defineAsyncComponent( 6 'LineChart': Vue.defineAsyncComponent(
6 () => myImport('views/zjdaping/components/lineChart/index') 7 () => myImport('views/zjdaping/components/lineChart/index')
@@ -8,28 +9,22 @@ export default { @@ -8,28 +9,22 @@ export default {
8 }, 9 },
9 data () { 10 data () {
10 return { 11 return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/bigScreen/monitoring?function=',
11 optionData:'', 14 optionData:'',
12 - allData: {  
13 - polyline: {  
14 - title: "带宽占用监控",  
15 - unit: "MB",  
16 - data: [{  
17 - name: "入带宽",  
18 - data: ["12","15","21","18","20","37","45","23","12","5","7","14"]  
19 - }, {  
20 - name: "出带宽",  
21 - data: ["22","35","41","68","70","57","45","33","24","15","7","10"]  
22 - }]  
23 - },  
24 - xAxis: {  
25 - today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]  
26 - }  
27 - }, 15 + allData: '',
  16 + newCommandVal:this.commandVal,
28 startValue: 0, // 区域缩放的起点值 17 startValue: 0, // 区域缩放的起点值
29 endValue: 6, // 区域缩放的终点值 18 endValue: 6, // 区域缩放的终点值
30 timerId: null // 定时器的标识 19 timerId: null // 定时器的标识
31 } 20 }
32 }, 21 },
  22 + setUp(){
  23 + const allData=ref({});
  24 + return{
  25 + allData
  26 + }
  27 + },
33 mounted () { 28 mounted () {
34 this.getData() 29 this.getData()
35 window.addEventListener('resize', this.screenAdapter) 30 window.addEventListener('resize', this.screenAdapter)
@@ -39,15 +34,60 @@ export default { @@ -39,15 +34,60 @@ export default {
39 window.removeEventListener('resize', this.screenAdapter) 34 window.removeEventListener('resize', this.screenAdapter)
40 clearInterval(this.timerId) 35 clearInterval(this.timerId)
41 }, 36 },
  37 + watch:{
  38 + commandVal(newValue, oldValue) {
  39 + this.newCommandVal=newValue
  40 + this.getData()
  41 + }
  42 +
  43 + },
42 methods: { 44 methods: {
43 45
44 - async getData () {  
45 - // await this.$http.get()  
46 - // const { data: ret } = await this.$http.get('bandwidthcpu')  
47 - // this.allData = ret  
48 - // console.log(ret)  
49 - this.updateChart()  
50 - this.startInterval() 46 + getData () {
  47 + let that=this;
  48 + $.get(this.domainName +this.apiUrl+this.newCommandVal,function (ret){
  49 + if(ret){
  50 + let dataArr=[];
  51 + let xAxisData=[];
  52 + if(ret.ports && ret.ports.length>1 ){
  53 + ret.ports.map((item,index)=>{
  54 +
  55 + dataArr.push({
  56 + name:item.name,
  57 + data:item.data.y,
  58 + })
  59 +
  60 + })
  61 + xAxisData=ret.ports[0].x
  62 + }else{
  63 + for(let i=0;i<12;i++){
  64 + dataArr.push('0')
  65 + }
  66 + }
  67 +
  68 + that.allData= {
  69 + polyline: {
  70 + title: "带宽占用监控",
  71 + unit: "MB",
  72 + data:dataArr
  73 + /*data: [{
  74 + name: "入带宽",
  75 + data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
  76 + }, {
  77 + name: "出带宽",
  78 + data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
  79 + }]*/
  80 + },
  81 + xAxis: {
  82 + // today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
  83 + today: xAxisData
  84 + }
  85 + }
  86 + that.updateChart()
  87 + that.startInterval()
  88 + }
  89 +
  90 + })
51 }, 91 },
52 updateChart () { 92 updateChart () {
53 // 半透明的颜色值 93 // 半透明的颜色值
@@ -84,7 +84,6 @@ export default { @@ -84,7 +84,6 @@ export default {
84 }) 84 })
85 this.allData = retData 85 this.allData = retData
86 86
87 - console.log('111',this.allData)  
88 this.updateChart() 87 this.updateChart()
89 }, 88 },
90 updateChart () { 89 updateChart () {
@@ -92,10 +91,11 @@ export default { @@ -92,10 +91,11 @@ export default {
92 ['22%', '65%'], 91 ['22%', '65%'],
93 ['66%', '65%'] 92 ['66%', '65%']
94 ] 93 ]
  94 +
95 const seriesArr = this.allData.map((item, index) => { 95 const seriesArr = this.allData.map((item, index) => {
96 const dataArr = [] 96 const dataArr = []
  97 + if(item.data){
97 item.data.map(inner => { 98 item.data.map(inner => {
98 - console.log(inner)  
99 dataArr.push({ 99 dataArr.push({
100 name: inner.name, 100 name: inner.name,
101 value: inner.num, 101 value: inner.num,
@@ -104,6 +104,14 @@ export default { @@ -104,6 +104,14 @@ export default {
104 }*/ 104 }*/
105 }) 105 })
106 }) 106 })
  107 + }else{
  108 + dataArr.push({
  109 + name: '暂无数据',
  110 + value: 0
  111 +
  112 + })
  113 + }
  114 +
107 return { 115 return {
108 type: 'pie', 116 type: 'pie',
109 radius: ['28%', '42%'], 117 radius: ['28%', '42%'],
@@ -122,8 +130,6 @@ export default { @@ -122,8 +130,6 @@ export default {
122 data: dataArr 130 data: dataArr
123 } 131 }
124 }) 132 })
125 - console.log("8**",seriesArr)  
126 -  
127 const dataOption = { 133 const dataOption = {
128 series: seriesArr 134 series: seriesArr
129 } 135 }
@@ -16,10 +16,10 @@ export default { @@ -16,10 +16,10 @@ export default {
16 unit: "cpu%", 16 unit: "cpu%",
17 data: [{ 17 data: [{
18 name: "80.12.97.2", 18 name: "80.12.97.2",
19 - data: ["12","15","21","18","20","37","45","23","12","5","7","14"] 19 + datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
20 }, { 20 }, {
21 name: "80.12.77.3", 21 name: "80.12.77.3",
22 - data: ["22","35","41","68","70","57","45","33","24","15","7","10"] 22 + datas: ["22","35","41","68","70","57","45","33","24","15","7","10"]
23 }] 23 }]
24 }, 24 },
25 xAxis: { 25 xAxis: {
@@ -30,6 +30,9 @@ export default { @@ -30,6 +30,9 @@ export default {
30 endValue: 9, // 区域缩放的终点值 30 endValue: 9, // 区域缩放的终点值
31 timerId: null, // 定时器的标识 31 timerId: null, // 定时器的标识
32 titleFontSize: 30, 32 titleFontSize: 30,
  33 + kpiIds:'KPI20352505',
  34 + resId:'4c582c0603654352ba4f905e88a56863',
  35 + resId1:'adeeddd6023a4157be523ac5d3b60ed6',
33 36
34 curve: 'KPIDA0ACBBP', 37 curve: 'KPIDA0ACBBP',
35 rateTitle: 'KPIDA0ACBBK', 38 rateTitle: 'KPIDA0ACBBK',
@@ -49,23 +52,81 @@ export default { @@ -49,23 +52,81 @@ export default {
49 clearInterval(this.timerId) 52 clearInterval(this.timerId)
50 }, 53 },
51 methods: { 54 methods: {
52 -  
53 - getData (that) { 55 + getData1(that){
54 const { proxy } = Vue.getCurrentInstance(); 56 const { proxy } = Vue.getCurrentInstance();
55 - /* var params = {  
56 - curve: that.curve,  
57 - rateTitle: that.rateTitle,  
58 - numerTitle: that.numerTitle 57 +
  58 + var params = {
  59 + resId: that.resId1,
  60 + kpiIds: that.kpiIds,
  61 + subResId: 'vmem',
  62 + startTime:'',
  63 + endTime:'',
  64 + access_token:localStorage.getItem("access_token")
59 }; 65 };
60 - proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {  
61 - if(res.success){  
62 - console.log('9**',res.obj)  
63 - that.allData = res.obj;  
64 - that.updateChart() 66 + // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
  67 + var res={
  68 + code:'0',
  69 + data:{
  70 + kpiUnit:'%',
  71 + names:['20:10','21:10','22:15','23:15'],
  72 + series:[
  73 + {
  74 + name:'89.12.97.3',
  75 + datas:[0.8,1,1,1,1,0.7,1,1],
  76 + flag:'vmem'
  77 + }
  78 + ]
65 } 79 }
66 - });*/ 80 + }
  81 + if(res && res.data){
  82 + let resData=res.data;
  83 + that.allData.polyline.data.push(resData.series)
67 that.updateChart() 84 that.updateChart()
68 85
  86 + }
  87 + // });
  88 + },
  89 +
  90 + getData (that) {
  91 + const { proxy } = Vue.getCurrentInstance();
  92 + var params = {
  93 + resId: that.resId,
  94 + kpiIds: that.kpiIds,
  95 + subResId: 'vmem',
  96 + startTime:'',
  97 + endTime:'',
  98 + access_token:localStorage.getItem("access_token")
  99 + };
  100 + // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
  101 + var res={
  102 + code:'0',
  103 + data:{
  104 + kpiUnit:'%',
  105 + names:['20:10','21:10','22:15','23:15'],
  106 + series:[
  107 + {
  108 + name:'89.12.97.2',
  109 + datas:[1,1,1,1,1,1,1,1],
  110 + flag:'vmem'
  111 + }
  112 + ]
  113 + }
  114 + }
  115 + if(res && res.data){
  116 + let resData=res.data;
  117 + that.allData = {
  118 + polyline: {
  119 + title: "申报库CPU监控",
  120 + unit: "cpu%",
  121 + data: resData.series
  122 + },
  123 + xAxis: {
  124 + today:resData.names
  125 + }
  126 + };
  127 + that.getData1(that)
  128 + }
  129 + // });
69 130
70 }, 131 },
71 updateChart () { 132 updateChart () {
@@ -89,15 +150,16 @@ export default { @@ -89,15 +150,16 @@ export default {
89 ] 150 ]
90 const timeArr = this.allData.xAxis.today 151 const timeArr = this.allData.xAxis.today
91 const seriesArr = this.allData.polyline.data; 152 const seriesArr = this.allData.polyline.data;
  153 + const title=this.allData.polyline.title;
  154 + const unit=this.allData.polyline.unit;
92 155
93 - this.declareNumer = this.allData.polyline.declareNumer  
94 let seriesData=[]; 156 let seriesData=[];
95 157
96 $.each(seriesArr,function (index,item){ 158 $.each(seriesArr,function (index,item){
97 seriesData .push({ 159 seriesData .push({
98 name: item.name, 160 name: item.name,
99 type: 'line', 161 type: 'line',
100 - data: item.data, 162 + data: item.datas,
101 smooth: true, 163 smooth: true,
102 showSymbol:false, 164 showSymbol:false,
103 itemStyle : { 165 itemStyle : {
@@ -137,7 +199,7 @@ export default { @@ -137,7 +199,7 @@ export default {
137 let xAxisData=timeArr; 199 let xAxisData=timeArr;
138 this.optionData = { 200 this.optionData = {
139 title: { 201 title: {
140 - text: '申报库CPU监控', 202 + text: title,
141 left: 'center', 203 left: 'center',
142 bottom: '8%', 204 bottom: '8%',
143 textStyle: { 205 textStyle: {
@@ -87,7 +87,6 @@ export default { @@ -87,7 +87,6 @@ export default {
87 }; 87 };
88 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) { 88 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
89 if(res.success){ 89 if(res.success){
90 - console.log('9**',res.obj)  
91 that.allData = res.obj; 90 that.allData = res.obj;
92 that.updateChart() 91 that.updateChart()
93 // that.startInterval() 92 // that.startInterval()
@@ -158,9 +157,10 @@ export default { @@ -158,9 +157,10 @@ export default {
158 157
159 }, 158 },
160 grid: { 159 grid: {
  160 + top:'3%',
161 left: '3%', 161 left: '3%',
162 right: '4%', 162 right: '4%',
163 - bottom: '3%', 163 + bottom: '2%',
164 containLabel: true, 164 containLabel: true,
165 }, 165 },
166 xAxis: { 166 xAxis: {
1 -<div class="declare-report">  
2 - <div class="declare-report-top" :style="comtitlesizeStyle"> 1 +<div class="declare-report" >
  2 + <div class="declare-report-top" :style="comtitlesizeStyle" id="declareReport_ref">
3 <el-row> 3 <el-row>
4 <el-col :span="24"> 4 <el-col :span="24">
5 <div class="grid-content bg-purple-dark"> 5 <div class="grid-content bg-purple-dark">
1 export default { 1 export default {
2 - name: 'declarePolyline', 2 + name: 'declareReport',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
5 data () { 5 data () {
@@ -19,27 +19,29 @@ export default { @@ -19,27 +19,29 @@ export default {
19 comtitletextStyle () { 19 comtitletextStyle () {
20 return { 20 return {
21 color: '#23ffff', 21 color: '#23ffff',
22 - fontSize: this.titleFontSize / 1.2 + 'px' 22 + fontSize: this.titleFontSize * 3 + 'px'
23 } 23 }
24 }, 24 },
25 comtitlesizeStyle () { 25 comtitlesizeStyle () {
26 return { 26 return {
27 - fontSize: this.titleFontSize / 2 + 'px' 27 + fontSize: this.titleFontSize *2 + 'px'
28 } 28 }
29 }, 29 },
30 comimgsizeStyle () { 30 comimgsizeStyle () {
31 return { 31 return {
32 - width: this.titleFontSize / 1.5 + 'px' 32 + width: this.titleFontSize * 3 + 'px'
33 } 33 }
34 }, 34 },
35 comboxtextStyle () { 35 comboxtextStyle () {
36 return { 36 return {
37 - fontSize: this.titleFontSize / 3 + 'px' 37 + fontSize: this.titleFontSize * 2 + 'px'
38 } 38 }
39 } 39 }
40 }, 40 },
41 mounted () { 41 mounted () {
42 this.getData(this) 42 this.getData(this)
  43 + window.addEventListener('resize', this.screenAdapter)
  44 + this.screenAdapter()
43 }, 45 },
44 46
45 methods: { 47 methods: {
@@ -52,7 +54,6 @@ export default { @@ -52,7 +54,6 @@ export default {
52 }; 54 };
53 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) { 55 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
54 if(res.success){ 56 if(res.success){
55 - console.log('111',res.obj)  
56 that.allData = res.obj; 57 that.allData = res.obj;
57 const declareRate = that.allData.polyline.declareRate 58 const declareRate = that.allData.polyline.declareRate
58 if(declareRate.indexOf('.') > 0){ 59 if(declareRate.indexOf('.') > 0){
@@ -65,6 +66,9 @@ export default { @@ -65,6 +66,9 @@ export default {
65 } 66 }
66 }); 67 });
67 68
  69 + },
  70 + screenAdapter () {
  71 + this.titleFontSize = document.getElementById('declareReport_ref').offsetWidth / 100 * 3.6
68 } 72 }
69 73
70 } 74 }
@@ -6,7 +6,7 @@ export default { @@ -6,7 +6,7 @@ export default {
6 return { 6 return {
7 chartInstance: null, 7 chartInstance: null,
8 allData: null, 8 allData: null,
9 - titleFontSize: 30, 9 + titleFontSize: 20,
10 // 扣款金额 10 // 扣款金额
11 deductionAmount: '0.00', 11 deductionAmount: '0.00',
12 // 扣款笔数 12 // 扣款笔数
@@ -19,41 +19,41 @@ export default { @@ -19,41 +19,41 @@ export default {
19 computed: { 19 computed: {
20 comboximgleftStyle () { 20 comboximgleftStyle () {
21 return { 21 return {
22 - height: this.titleFontSize * 12.5 + 'px', 22 + height: this.titleFontSize *10 + 'px',
23 // marginTop: this.titleFontSize * 3.5 + 'px', 23 // marginTop: this.titleFontSize * 3.5 + 'px',
24 // marginLeft: this.titleFontSize + 'px' 24 // marginLeft: this.titleFontSize + 'px'
25 } 25 }
26 }, 26 },
27 comboximgrightStyle () { 27 comboximgrightStyle () {
28 return { 28 return {
29 - height: this.titleFontSize * 12.5 + 'px', 29 + height: this.titleFontSize *10 + 'px',
30 // marginTop: this.titleFontSize * 3.5 + 'px' 30 // marginTop: this.titleFontSize * 3.5 + 'px'
31 } 31 }
32 }, 32 },
33 comcontextStyle () { 33 comcontextStyle () {
34 return { 34 return {
35 - fontSize: this.titleFontSize *3.5 + 'px' 35 + fontSize: this.titleFontSize + 'px'
36 } 36 }
37 }, 37 },
38 comtitlesizeStyle () { 38 comtitlesizeStyle () {
39 return { 39 return {
40 - height: this.titleFontSize * 8.5 + 'px', 40 + height: this.titleFontSize * 7 + 'px',
41 // width: this.titleFontSize * 6 + 'px' 41 // width: this.titleFontSize * 6 + 'px'
42 } 42 }
43 }, 43 },
44 comtitleTextStyle () { 44 comtitleTextStyle () {
45 return { 45 return {
46 - fontSize: this.titleFontSize *3.3 + 'px' 46 + fontSize: this.titleFontSize /1.3 + 'px'
47 } 47 }
48 }, 48 },
49 comnumberTextStyle () { 49 comnumberTextStyle () {
50 return { 50 return {
51 - fontSize: this.titleFontSize *3.2 + 'px' 51 + fontSize: this.titleFontSize /0.5 + 'px'
52 } 52 }
53 }, 53 },
54 comnumberUnitStyle () { 54 comnumberUnitStyle () {
55 return { 55 return {
56 - fontSize: this.titleFontSize * 2 + 'px' 56 + fontSize: this.titleFontSize / 0.6 + 'px'
57 } 57 }
58 } 58 }
59 }, 59 },
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 <div class="grid-content bg-purple" style="text-align:left;"> 6 <div class="grid-content bg-purple" style="text-align:left;">
7 <span > 7 <span >
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 - <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">  
10 - <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 9 + <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-month-1.png">
  10 +<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
11 </span> 11 </span>
12 </div> 12 </div>
13 </el-col> 13 </el-col>
@@ -39,17 +39,17 @@ export default { @@ -39,17 +39,17 @@ export default {
39 computed: { 39 computed: {
40 comboximgStyle () { 40 comboximgStyle () {
41 return { 41 return {
42 - height: this.titleFontSize * 4.5 + 'px' 42 + height: this.titleFontSize * 4.3 + 'px'
43 } 43 }
44 }, 44 },
45 comTitleimgStyle () { 45 comTitleimgStyle () {
46 return { 46 return {
47 - width: this.titleFontSize * 12 + 'px' 47 + width: this.titleFontSize * 10 + 'px'
48 } 48 }
49 }, 49 },
50 comTitleSizeStyle () { 50 comTitleSizeStyle () {
51 return { 51 return {
52 - fontSize: this.titleFontSize / 1.5 + 'px' 52 + fontSize: this.titleFontSize / 1.6 + 'px'
53 } 53 }
54 }, 54 },
55 comtitlimgStyle () { 55 comtitlimgStyle () {
@@ -153,7 +153,6 @@ export default { @@ -153,7 +153,6 @@ export default {
153 }; 153 };
154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) { 154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
155 if(res.success){ 155 if(res.success){
156 - console.log(res.map)  
157 const map = res.map 156 const map = res.map
158 // 左边数 157 // 左边数
159 if(map.leftNumber){ 158 if(map.leftNumber){
@@ -194,7 +193,6 @@ export default { @@ -194,7 +193,6 @@ export default {
194 let xs = num[1] 193 let xs = num[1]
195 // 整数部分处理，增加, 194 // 整数部分处理，增加,
196 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') 195 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
197 - console.log("444",intPartFormat)  
198 if (xs != null) { 196 if (xs != null) {
199 if(places == 0){ 197 if(places == 0){
200 return intPartFormat + '.' + xs 198 return intPartFormat + '.' + xs
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 <div class="grid-content bg-purple" style="text-align:left;"> 6 <div class="grid-content bg-purple" style="text-align:left;">
7 <span> 7 <span>
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 - <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">  
10 - <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 9 + <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-today.png">
  10 +<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
11 </span> 11 </span>
12 </div> 12 </div>
13 </el-col> 13 </el-col>
@@ -39,17 +39,17 @@ export default { @@ -39,17 +39,17 @@ export default {
39 computed: { 39 computed: {
40 comboximgStyle () { 40 comboximgStyle () {
41 return { 41 return {
42 - height: this.titleFontSize * 4.5 + 'px' 42 + height: this.titleFontSize * 4.3 + 'px'
43 } 43 }
44 }, 44 },
45 comTitleimgStyle () { 45 comTitleimgStyle () {
46 return { 46 return {
47 - width: this.titleFontSize * 12 + 'px' 47 + width: this.titleFontSize * 10 + 'px'
48 } 48 }
49 }, 49 },
50 comTitleSizeStyle () { 50 comTitleSizeStyle () {
51 return { 51 return {
52 - fontSize: this.titleFontSize / 1.5 + 'px' 52 + fontSize: this.titleFontSize / 1.6 + 'px'
53 } 53 }
54 }, 54 },
55 comtitlimgStyle () { 55 comtitlimgStyle () {
@@ -153,15 +153,12 @@ export default { @@ -153,15 +153,12 @@ export default {
153 }; 153 };
154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) { 154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
155 if(res.success){ 155 if(res.success){
156 - console.log(res.map)  
157 const map = res.map 156 const map = res.map
158 // 左边数 157 // 左边数
159 - console.log(map.leftNumber)  
160 if(map.leftNumber){ 158 if(map.leftNumber){
161 that.declaredAmountNumber = map.leftNumber 159 that.declaredAmountNumber = map.leftNumber
162 } 160 }
163 // 右边数 161 // 右边数
164 - console.log(map.rightNumber)  
165 if(map.rightNumber){ 162 if(map.rightNumber){
166 that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1) 163 that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
167 } 164 }
@@ -196,7 +193,6 @@ export default { @@ -196,7 +193,6 @@ export default {
196 let xs = num[1] 193 let xs = num[1]
197 // 整数部分处理，增加, 194 // 整数部分处理，增加,
198 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') 195 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
199 - console.log("444",intPartFormat)  
200 if (xs != null) { 196 if (xs != null) {
201 if(places == 0){ 197 if(places == 0){
202 return intPartFormat + '.' + xs 198 return intPartFormat + '.' + xs
1 <div class="com-container" id="responsemonitor_ref"> 1 <div class="com-container" id="responsemonitor_ref">
2 - <div class="cpu-dropdown">  
3 - <el-dropdown @command="handleCommand" >  
4 - <span class="el-dropdown-link">  
5 - 请选择  
6 - <i class="icon-arrow"></i>  
7 - </span>  
8 - <template #dropdown>  
9 - <el-dropdown-menu>  
10 - <el-dropdown-item command="max">最大值</el-dropdown-item>  
11 - <el-dropdown-item command="ave">平均值</el-dropdown-item>  
12 - <el-dropdown-item command="min">最小值</el-dropdown-item>  
13 2
14 - </el-dropdown-menu>  
15 - </template>  
16 - </el-dropdown>  
17 - </div>  
18 <!-- <div class="com-chart" id="responsemonitor_ref"></div>--> 3 <!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
19 - <LineChart :optionData="optionData" v-if="optionData"></LineChart> 4 + <LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
20 5
21 </div> 6 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
  4 + props:['commandVal'],
4 components: { 5 components: {
5 'LineChart': Vue.defineAsyncComponent( 6 'LineChart': Vue.defineAsyncComponent(
6 () => myImport('views/zjdaping/components/lineChart/index') 7 () => myImport('views/zjdaping/components/lineChart/index')
@@ -8,28 +9,28 @@ export default { @@ -8,28 +9,28 @@ export default {
8 }, 9 },
9 data () { 10 data () {
10 return { 11 return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/bigScreen/monitoring?function=',
11 optionData:'', 14 optionData:'',
12 titleFontSize:'30', 15 titleFontSize:'30',
13 - allData: {  
14 - polyline: {  
15 - title: "系统响应请求数监控",  
16 - unit: "MB",  
17 - data: {  
18 - name: "请求相应数/秒",  
19 - data: ["1200","1500","2100","1800","2000","3700","4500","2300","1200","500","700","140"]  
20 - }  
21 - },  
22 - xAxis: {  
23 - today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]  
24 - }  
25 - }, 16 + allData: '',
  17 + newCommandVal:this.commandVal,
26 startValue: 0, // 区域缩放的起点值 18 startValue: 0, // 区域缩放的起点值
27 endValue: 6, // 区域缩放的终点值 19 endValue: 6, // 区域缩放的终点值
28 timerId: null // 定时器的标识 20 timerId: null // 定时器的标识
29 } 21 }
30 }, 22 },
  23 + setUp(){
  24 + const allData=ref({});
  25 + // const commandVal=ref();
  26 + // const optionData=ref({});
  27 + return{
  28 + allData,
  29 + // optionData
  30 + // commandVal
  31 + }
  32 + },
31 mounted () { 33 mounted () {
32 - this.initChart()  
33 this.getData() 34 this.getData()
34 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
35 this.screenAdapter() 36 this.screenAdapter()
@@ -38,53 +39,54 @@ export default { @@ -38,53 +39,54 @@ export default {
38 window.removeEventListener('resize', this.screenAdapter) 39 window.removeEventListener('resize', this.screenAdapter)
39 clearInterval(this.timerId) 40 clearInterval(this.timerId)
40 }, 41 },
41 - methods: {  
42 - initChart () {  
43 - /* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))  
44 - const initOption = {  
45 - grid: {  
46 - top: '15%',  
47 - left: '5%',  
48 - right: '4%',  
49 - bottom: '3%',  
50 - containLabel: true  
51 - },  
52 - legend: {  
53 - right: '2%',  
54 - top: '5%' 42 + watch:{
  43 + commandVal(newValue, oldValue) {
  44 + this.newCommandVal=newValue
  45 + this.getData()
  46 + }
  47 +
55 }, 48 },
56 - xAxis: {  
57 - type: 'category',  
58 - boundaryGap: false,  
59 - axisLabel: {  
60 - textStyle: {  
61 - color: '#E6E8EB' 49 + methods: {
  50 + getData () {
  51 + let that=this;
  52 + // await this.$http.get()
  53 + // const { data: ret } = await proxy.$http.get('bigScreen/monitoring?function=')
  54 + $.get(this.domainName +this.apiUrl+this.newCommandVal,(ret)=>{
  55 + if(ret){
  56 + let dataArr=[];
  57 + let xAxisData='';
  58 + if(ret.concurrence){
  59 + dataArr=ret.concurrence.data.y
  60 + xAxisData=ret.concurrence.data.x
  61 + }else{
  62 + for(let i=0;i<12;i++){
  63 + dataArr.push('0')
62 } 64 }
  65 +
63 } 66 }
64 - },  
65 - yAxis: {  
66 - type: 'value',  
67 - splitLine: {  
68 - show: false  
69 - },  
70 - axisLabel: {  
71 - textStyle: {  
72 - color: '#E6E8EB' 67 +
  68 + that.allData= {
  69 + polyline: {
  70 + title:"系统响应请求数监控",
  71 + unit: "MB",
  72 + data: {
  73 + name: "请求相应数/秒",
  74 + data: dataArr
73 } 75 }
  76 + },
  77 + xAxis: {
  78 + // today: ["10", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
  79 + today:xAxisData
74 } 80 }
75 } 81 }
  82 + that.updateChart()
  83 + that.startInterval()
76 } 84 }
77 - this.chartInstance.setOption(initOption)*/  
78 - },  
79 - async getData () {  
80 - // await this.$http.get()  
81 - // const { data: ret } = await this.$http.get('responsemonitor')  
82 - // this.allData = ret  
83 - // console.log(ret)  
84 - this.updateChart()  
85 - this.startInterval() 85 + })
  86 +
86 }, 87 },
87 updateChart () { 88 updateChart () {
  89 + console.log("ddd",this.allData)
88 // 半透明的颜色值 90 // 半透明的颜色值
89 const colorArr1 = [ 91 const colorArr1 = [
90 'rgba(11, 168, 44, 0.5)', 92 'rgba(11, 168, 44, 0.5)',
@@ -106,7 +108,6 @@ export default { @@ -106,7 +108,6 @@ export default {
106 const timeArr = this.allData.xAxis.today 108 const timeArr = this.allData.xAxis.today
107 const seriesData = this.allData.polyline.data.data 109 const seriesData = this.allData.polyline.data.data
108 const seriesName = this.allData.polyline.data.name 110 const seriesName = this.allData.polyline.data.name
109 - console.log(seriesName)  
110 // 图例的数据 111 // 图例的数据
111 // const legendArr = this.allData.polyline.data.map(item => { 112 // const legendArr = this.allData.polyline.data.map(item => {
112 // return item.name 113 // return item.name
@@ -205,6 +206,7 @@ export default { @@ -205,6 +206,7 @@ export default {
205 }; 206 };
206 207
207 }, 208 },
  209 +
208 screenAdapter () { 210 screenAdapter () {
209 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6 211 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
210 const adapterOption = { 212 const adapterOption = {
@@ -138,7 +138,6 @@ export default { @@ -138,7 +138,6 @@ export default {
138 kpiIdValue: that.kpiIdValue 138 kpiIdValue: that.kpiIdValue
139 }; 139 };
140 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) { 140 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
141 - console.log(res.data)  
142 if(res.success){ 141 if(res.success){
143 that.allData = res.data 142 that.allData = res.data
144 that.updateChart() 143 that.updateChart()
1 <div class="screen-container" id="bgscreen_ref"> 1 <div class="screen-container" id="bgscreen_ref">
2 <header class="screen-header" :style="screenheaderStyle"> 2 <header class="screen-header" :style="screenheaderStyle">
3 <div> 3 <div>
4 - <img style="width: 100%" src="/vue3/src/assets/images/digitalDp/header_border_dark.png" alt=""> 4 + <img style="width: 100%" src="/vue3/src/assets/images/digitalDp/head-bg.png" alt="">
5 </div> 5 </div>
6 - <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span> 6 +<!-- <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>-->
7 <div class="title-left"> 7 <div class="title-left">
8 - <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog"> 8 + <img src="/vue3/src/assets/images/digitalDp/icon-time.png" :style="timelogoStyle" class="timelog">
9 <span :style="datetimeStyle" >{{dateTime}}</span> 9 <span :style="datetimeStyle" >{{dateTime}}</span>
10 </div> 10 </div>
11 </header> 11 </header>
@@ -66,8 +66,24 @@ @@ -66,8 +66,24 @@
66 <Availability></Availability> 66 <Availability></Availability>
67 </div> 67 </div>
68 <div id="right-bottom"> 68 <div id="right-bottom">
  69 + <div class="cpu-dropdown">
  70 + <el-dropdown @command="handleCommand" >
  71 + <span class="el-dropdown-link">
  72 + {{commandName}}
  73 + <i class="icon-arrow"></i>
  74 + </span>
  75 + <template #dropdown>
  76 + <el-dropdown-menu class="cpuDropdown">
  77 + <el-dropdown-item command="max">最大值</el-dropdown-item>
  78 + <el-dropdown-item command="avg">平均值</el-dropdown-item>
  79 + <el-dropdown-item command="min">最小值</el-dropdown-item>
  80 +
  81 + </el-dropdown-menu>
  82 + </template>
  83 + </el-dropdown>
  84 + </div>
69 <!-- 系统响应监控 折线 --> 85 <!-- 系统响应监控 折线 -->
70 - <ResponseMonitor></ResponseMonitor> 86 + <ResponseMonitor :commandVal="commandVal" ref="responseRef"></ResponseMonitor>
71 </div> 87 </div>
72 </section> 88 </section>
73 </div> 89 </div>
@@ -87,7 +103,7 @@ @@ -87,7 +103,7 @@
87 </div> 103 </div>
88 <div id="bottom-four"> 104 <div id="bottom-four">
89 <!-- 带宽占用监控 折线 --> 105 <!-- 带宽占用监控 折线 -->
90 - <BandwidthCpu></BandwidthCpu> 106 + <BandwidthCpu :commandVal="commandVal" ref="bandwidthRef" ></BandwidthCpu>
91 </div> 107 </div>
92 </section> 108 </section>
93 </div> 109 </div>
@@ -52,7 +52,9 @@ export default { @@ -52,7 +52,9 @@ export default {
52 return { 52 return {
53 titleFontSize: 30, 53 titleFontSize: 30,
54 dateTime: '00-00-00 00:00:00', 54 dateTime: '00-00-00 00:00:00',
55 - colorData:['#0D45FE','#00FFB9','#A35CFF'] 55 + colorData:['#0D45FE','#00FFB9','#A35CFF'],
  56 + commandName:'最大值',
  57 + commandVal:'max'
56 } 58 }
57 }, 59 },
58 computed: { 60 computed: {
@@ -85,6 +87,21 @@ export default { @@ -85,6 +87,21 @@ export default {
85 }, 87 },
86 timeFormat (number) { 88 timeFormat (number) {
87 return number.length == 1 ? ('0' + number) : number 89 return number.length == 1 ? ('0' + number) : number
  90 + },
  91 + handleCommand(command){
  92 + console.log("newVal",command)
  93 + this.commandVal=command;
  94 + console.log("ne",this.commandVal)
  95 + if(command=='max'){
  96 + this.commandName="最大值";
  97 + }else if(command=='min'){
  98 + this.commandName="最小值";
  99 + }else{
  100 + this.commandName="平均值";
  101 + }
  102 + // this.$refs.responseRef.getData();
  103 + // this.$refs.bandwidthRef.getData();
  104 +
88 } 105 }
89 }, 106 },
90 mounted () { 107 mounted () {
@@ -32,8 +32,8 @@ @@ -32,8 +32,8 @@
32 :showBorder="true" :currentPage="currentPage" :total="total" :loading="false" 32 :showBorder="true" :currentPage="currentPage" :total="total" :loading="false"
33 :showPage="true" :height="(height - 95)"> 33 :showPage="true" :height="(height - 95)">
34 <template #default="{row,prop,column}"> 34 <template #default="{row,prop,column}">
35 - <a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop]}}</a>  
36 - <el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop]}}</el-link> 35 + <a href="javascript:void(0)" v-if="prop == 'resPositon' || prop == 'cabinetNo'" style="border-bottom: solid 1px blue;margin-bottom: 3px;height: 30px;font-size: 15px;" @click="cellClick(row,prop,column)">{{row[prop].value}}</a>
  36 + <el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop].value}}</el-link>
37 </template> 37 </template>
38 </cm-table-page> 38 </cm-table-page>
39 </div> 39 </div>
@@ -11,8 +11,6 @@ const configPage = () => { @@ -11,8 +11,6 @@ const configPage = () => {
11 dialogFlg.value = flg; 11 dialogFlg.value = flg;
12 } 12 }
13 13
14 -  
15 -  
16 return { 14 return {
17 showConfig: dialogFlg, 15 showConfig: dialogFlg,
18 configObj:configPage, 16 configObj:configPage,
@@ -20,7 +18,6 @@ const configPage = () => { @@ -20,7 +18,6 @@ const configPage = () => {
20 } 18 }
21 } 19 }
22 20
23 -  
24 export default { 21 export default {
25 name: 'resIndex', 22 name: 'resIndex',
26 template: '', 23 template: '',
@@ -28,6 +25,15 @@ export default { @@ -28,6 +25,15 @@ export default {
28 'res-config': Vue.defineAsyncComponent( 25 'res-config': Vue.defineAsyncComponent(
29 () => myImport('components/page/res/treeconfig/index') 26 () => myImport('components/page/res/treeconfig/index')
30 ), 27 ),
  28 + 'rateComponents': Vue.defineAsyncComponent(
  29 + () => myImport('components/page/res/rateComponents/index')
  30 + ),
  31 + 'resNameComponents': Vue.defineAsyncComponent(
  32 + () => myImport('components/page/res/resNameComponents/index')
  33 + ),
  34 + 'statusComponents': Vue.defineAsyncComponent(
  35 + () => myImport('components/page/res/statusComponents/index')
  36 + ),
31 }, 37 },
32 data() { 38 data() {
33 return { 39 return {
@@ -40,21 +40,15 @@ @@ -40,21 +40,15 @@
40 <div class="declare-title"> 40 <div class="declare-title">
41 <div class="declare-bg volume-today"></div> 41 <div class="declare-bg volume-today"></div>
42 </div> 42 </div>
43 - <div class="volume-today-container" v-for="(item,index) in volumeData"> 43 + <div v-if="volumdData" class="volume-today-container" v-for="(item,index) in volumeData">
44 <span class="volume-text">{{item.name}}</span> 44 <span class="volume-text">{{item.name}}</span>
45 <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span> 45 <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
46 <span class="volume-num">{{item.num1}}</span> 46 <span class="volume-num">{{item.num1}}</span>
47 </div> 47 </div>
48 - <!-- <div class="volume-today-container">  
49 - <span class="volume-text">涉税文书</span>  
50 - <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>  
51 - <span class="volume-num num-doc">{{volumeNumDoc}}</span> 48 + <div class="volume-today-container" v-else style="justify-content: center;">
  49 + <span>暂无数据</span>
52 </div> 50 </div>
53 - <div class="volume-today-container">  
54 - <span class="volume-text">网上申报</span>  
55 - <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>  
56 - <span class="volume-num num-net">{{volumeNumNet}}</span>  
57 - </div>--> 51 +
58 </div> 52 </div>
59 </div> 53 </div>
60 <div class="declare-right"> 54 <div class="declare-right">
@@ -74,7 +74,6 @@ export default { @@ -74,7 +74,6 @@ export default {
74 74
75 }) 75 })
76 const optionInit=()=>{ 76 const optionInit=()=>{
77 - console.log("3232",proxy.ySeriesCommon)  
78 let xAxisDataLength=proxy.ySeriesCommon[0].length; 77 let xAxisDataLength=proxy.ySeriesCommon[0].length;
79 let xAxisData=[]; 78 let xAxisData=[];
80 for(let i=1;i<=xAxisDataLength;i++){ 79 for(let i=1;i<=xAxisDataLength;i++){
@@ -8,34 +8,35 @@ export default { @@ -8,34 +8,35 @@ export default {
8 data(){ 8 data(){
9 return { 9 return {
10 domainName:'http://192.168.0.245:8180/api-web', 10 domainName:'http://192.168.0.245:8180/api-web',
  11 + myChart:'',
  12 + titleFontSize:30,
11 yAxisData:'',//y序列的数据 13 yAxisData:'',//y序列的数据
12 seriesData:[],//y轴数据 14 seriesData:[],//y轴数据
  15 + newOptionData:this.optionData,
13 chartId:'line-echart' 16 chartId:'line-echart'
14 17
15 } 18 }
16 }, 19 },
  20 + watch:{
  21 + optionData(newValue,oldValue){
  22 + this.newOptionData=newValue
  23 + this.chartSetOption()
  24 + }
  25 + },
17 setup(props, {attrs, slots, emit}) { 26 setup(props, {attrs, slots, emit}) {
18 const {proxy} = Vue.getCurrentInstance(); 27 const {proxy} = Vue.getCurrentInstance();
19 -  
20 // 挂载完 28 // 挂载完
21 Vue.onMounted(() => { 29 Vue.onMounted(() => {
22 - /*$.get(proxy.domainName,function(res){ 30 + proxy.chartSetOption()
23 31
24 - })*/  
25 - /* proxy.yAxisData=props.yAxisData;  
26 - proxy.seriesData=props.seriesData;  
27 - proxy.chartId=props.chartId;  
28 - // const chartDom = document.getElementById('line-echart-declare');  
29 - console.log("**!/",proxy.seriesData)  
30 - let xAxisDataLength=proxy.seriesData[0].data.length;  
31 - let xAxisData=[];  
32 - for(let i=1;i<=xAxisDataLength;i++){  
33 - xAxisData.push(i)  
34 - }*/ 32 + })
  33 + const chartSetOption=()=>{
35 const chartDom=proxy.$el 34 const chartDom=proxy.$el
36 const myChart = echarts.init(chartDom); 35 const myChart = echarts.init(chartDom);
  36 + proxy.myChart=myChart;
  37 + /* window.addEventListener('resize', proxy.screenAdapter)
  38 + proxy.screenAdapter()*/
37 let option=props.optionData; 39 let option=props.optionData;
38 - console.log("testLIne0",chartDom,option)  
39 40
40 /* option = { 41 /* option = {
41 title: { 42 title: {
@@ -96,12 +97,33 @@ export default { @@ -96,12 +97,33 @@ export default {
96 };*/ 97 };*/
97 98
98 option && myChart.setOption(option); 99 option && myChart.setOption(option);
  100 + }
99 101
100 - }) 102 +
  103 + const screenAdapter= ()=> {
  104 + proxy.titleFontSize = proxy.myChart.offsetWidth / 100 * 3.6
  105 + const adapterOption = {
  106 + legend: {
  107 + itemWidth: proxy.titleFontSize,
  108 + itemHeight: proxy.titleFontSize,
  109 + itemGap: proxy.titleFontSize,
  110 + textStyle: {
  111 + fontSize: proxy.titleFontSize / 2
  112 + }
  113 + }
  114 + }
  115 + proxy.myChart.setOption(adapterOption)
  116 + proxy.myChart.resize()
  117 + }
101 118
102 119
103 return{ 120 return{
  121 + chartSetOption,
  122 + screenAdapter
104 123
105 } 124 }
  125 + },
  126 + unmounted () {
  127 + // window.removeEventListener('resize', this.screenAdapter)
106 } 128 }
107 } 129 }
@@ -10,13 +10,31 @@ export default { @@ -10,13 +10,31 @@ export default {
10 return { 10 return {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/sxview/getBusinessAvailability', 12 apiUrl:'/api-web/sxview/getBusinessAvailability',
13 - resourceStatisticsData:'', 13 + kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
  14 + busId:'247c0c978f574285bf642f55611ea75d',
  15 + performanceData:'',
  16 + xAxisData:'',
  17 + yAxisData:'',
14 optionData:'', 18 optionData:'',
15 ySeriesCommon:[] 19 ySeriesCommon:[]
16 } 20 }
17 }, 21 },
18 setup(props, {attrs, slots, emit}) { 22 setup(props, {attrs, slots, emit}) {
19 const {proxy} = Vue.getCurrentInstance(); 23 const {proxy} = Vue.getCurrentInstance();
  24 + // 半透明的颜色值
  25 + const colorArr1 = [
  26 + 'rgba(151,213,244, 0.8)',
  27 + 'rgba(239,224,167, 0.8)',
  28 + 'rgba(229,171,209, 0.8)',
  29 + 'rgba(151,170,255, 0.8)'
  30 + ]
  31 + // 全透明的颜色值
  32 + const colorArr2 = [
  33 + 'rgba(151,213,244, 0)',
  34 + 'rgba(239,224,167, 0)',
  35 + 'rgba(229,171,209, 0)',
  36 + 'rgba(151,170,255, 0)'
  37 + ]
20 38
21 39
22 // 挂载完 40 // 挂载完
@@ -25,33 +43,88 @@ export default { @@ -25,33 +43,88 @@ export default {
25 43
26 }) 44 })
27 const getData=()=>{ 45 const getData=()=>{
28 - $.get(proxy.domainName +proxy.apiUrl,function (res) { 46 + let params = {
  47 + kpiIds: proxy.kpiIds,
  48 + busId: proxy.busId,
  49 + startTime:'',
  50 + endTime:'',
  51 + access_token:localStorage.getItem('access_token')
  52 + };
  53 + $.get(proxy.domainName +proxy.apiUrl,params,function (res) {
29 const data = res; 54 const data = res;
30 - if (data && data.data) {  
31 - let resData=data.data; 55 + console.log("ttttt",data)
  56 + if (data && data.map) {
  57 + let resData=data.map;
  58 + proxy.legendData=resData.legend;
  59 + proxy.xAxisData=resData.x;
  60 + proxy.yAxisData=resData.y;
  61 +
32 62
33 } 63 }
34 - // proxy.optionInit(); 64 + proxy.optionInit();
35 65
36 }) 66 })
37 - proxy.optionInit(); 67 + // proxy.optionInit();
38 68
39 } 69 }
40 const optionInit=()=>{ 70 const optionInit=()=>{
41 71
42 - let data3=[350, 350, 350, 350, 350, 350, 350]; 72 + let data3=proxy.yAxisData[0];
43 let data4=[220, 182, 191, 234, 290, 330, 310]; 73 let data4=[220, 182, 191, 234, 290, 330, 310];
44 - let data2=[100, 100, 100, 100, 100, 100, 100];  
45 - let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52]; 74 + let data2=proxy.yAxisData[2];
  75 + let data1=proxy.yAxisData[1];
46 76
47 let min1=proxy.calMin([data1,data2]); 77 let min1=proxy.calMin([data1,data2]);
48 let max1=proxy.calMax([data1,data2]); 78 let max1=proxy.calMax([data1,data2]);
49 let min2=proxy.calMin([data3,data4]); 79 let min2=proxy.calMin([data3,data4]);
50 let max2=proxy.calMax([data3,data4]); 80 let max2=proxy.calMax([data3,data4]);
  81 +
  82 + proxy.legendData.map((item,index)=>{
  83 + let i=0;
  84 + if(index%2==0 ||index%3==0){
  85 + i=0;
  86 + }else{
  87 + i=1;
  88 + }
  89 + proxy.ySeriesCommon.push(
  90 + {
  91 + name:item,
  92 + type: 'line',
  93 + smooth:true,
  94 + // stack: 'Total',
  95 + show:false,
  96 + data:proxy.yAxisData[index],
  97 + yAxisIndex:i,
  98 + showSymbol:false,
  99 + itemStyle : {
  100 + normal : {
  101 + color:colorArr1[index],//tooltip里的小圆点颜色
  102 + lineStyle:{
  103 + color:colorArr1[index],
  104 + width:1
  105 + }
  106 + }
  107 + },
  108 + areaStyle: {
  109 + // color:'rgba(151,213,244,0.4)',
  110 + normal:{
  111 + color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
  112 + offset: 0,
  113 + color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
  114 + }, {
  115 + offset: 1,
  116 + color: colorArr2[index]
  117 + }])
  118 + }
  119 +
  120 + },
  121 + },
  122 + )
  123 + })
51 //业务双y轴数据 124 //业务双y轴数据
52 - proxy.ySeriesCommon=[ 125 + /* proxy.ySeriesCommon=[
53 { 126 {
54 - name:'可用性', 127 + name:proxy.legendData[0],
55 type: 'line', 128 type: 'line',
56 smooth:true, 129 smooth:true,
57 // stack: 'Total', 130 // stack: 'Total',
@@ -83,7 +156,7 @@ export default { @@ -83,7 +156,7 @@ export default {
83 }, 156 },
84 }, 157 },
85 { 158 {
86 - name:'成功率', 159 + name:proxy.legendData[1],
87 type: 'line', 160 type: 'line',
88 smooth:true, 161 smooth:true,
89 // stack: 'Total', 162 // stack: 'Total',
@@ -148,20 +221,18 @@ export default { @@ -148,20 +221,18 @@ export default {
148 color:'rgba(151,170,255,0)' 221 color:'rgba(151,170,255,0)'
149 }, 222 },
150 } 223 }
151 - ] 224 + ]*/
152 // let xAxisDataLength=proxy.ySeriesCommon[0].length; 225 // let xAxisDataLength=proxy.ySeriesCommon[0].length;
153 let xAxisData=[]; 226 let xAxisData=[];
154 - for(let i=0;i<=24;i++){  
155 - if(i%4==0){  
156 - xAxisData.push(i+':00') 227 + if(proxy.xAxisData){
  228 + proxy.xAxisData.map((item,index)=>{
  229 + if(index%20==0){
  230 + xAxisData.push(item)
157 231
158 } 232 }
159 - }  
160 - let legendData=[];  
161 - $.each(proxy.ySeriesCommon,function (i,v){  
162 - legendData.push(v.name)  
163 }) 233 })
164 - proxy.legendData=legendData; 234 +
  235 + }
165 proxy.optionData = { 236 proxy.optionData = {
166 title: { 237 title: {
167 text: '' 238 text: ''
@@ -187,9 +258,10 @@ export default { @@ -187,9 +258,10 @@ export default {
187 258
188 }, 259 },
189 grid: { 260 grid: {
  261 + top:'2%',
190 left: '3%', 262 left: '3%',
191 right: '4%', 263 right: '4%',
192 - bottom: '3%', 264 + // bottom: '3%',
193 containLabel: true, 265 containLabel: true,
194 }, 266 },
195 xAxis: { 267 xAxis: {