Authored by 王涛

资源视图优化

@@ -43,6 +43,7 @@ @@ -43,6 +43,7 @@
43 sessionStorage.setItem('workflow', res1[0].workflow); 43 sessionStorage.setItem('workflow', res1[0].workflow);
44 sessionStorage.setItem('mp3', res2[0].mp3); 44 sessionStorage.setItem('mp3', res2[0].mp3);
45 sessionStorage.setItem('jimuReport', res1[0].jimuReport); 45 sessionStorage.setItem('jimuReport', res1[0].jimuReport);
  46 + sessionStorage.setItem('cmdbWeb', res1[0].cmdbWeb);
46 }) 47 })
47 }); 48 });
48 layui.config({ 49 layui.config({
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 <el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" /> 6 <el-table-column v-if="showSelection && columns.length > 0" type="selection" width="55" />
7 7
8 <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align " 8 <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align "
9 - :width="item.width"> 9 + :width="getWidth(item.width)">
10 <template #default="scope"> 10 <template #default="scope">
11 <slot :row="scope.row" :prop="item.prop" :column="item"> 11 <slot :row="scope.row" :prop="item.prop" :column="item">
12 <div v-if="typeof(item.render) == 'function'" > 12 <div v-if="typeof(item.render) == 'function'" >
@@ -72,6 +72,10 @@ export default { @@ -72,6 +72,10 @@ export default {
72 type: Boolean, 72 type: Boolean,
73 default: false 73 default: false
74 }, 74 },
  75 + maxWidth:{
  76 + type: Number,
  77 + default: window.innerWidth
  78 + },
75 79
76 }, 80 },
77 data() { 81 data() {
@@ -80,11 +84,35 @@ export default { @@ -80,11 +84,35 @@ export default {
80 setup(props, {attrs, slots, emit}) { 84 setup(props, {attrs, slots, emit}) {
81 let currentPage = Vue.ref(1); 85 let currentPage = Vue.ref(1);
82 let pageSize = Vue.ref(props.pageSize); 86 let pageSize = Vue.ref(props.pageSize);
83 - // let sizeArr = props.pageSizes;  
84 - // if(sizeArr && sizeArr.length > 0){  
85 - // pageSize.value = sizeArr[0]  
86 - // }  
87 - // console.log('======',pageSize.value); 87 +
  88 +
  89 + /**
  90 + * 获取宽度
  91 + * <p>
  92 + * 作者: Wang
  93 + * 时间:2021/11/16 16:19
  94 + */
  95 +
  96 + let getWidth = (width) =>{
  97 + let maxWidth = (function (){
  98 + let cols = props.columns;
  99 + if(cols && cols.length > 0){
  100 + // 求和
  101 + let w = 0;
  102 + cols.forEach(function (v) {
  103 + w += parseFloat(v.width) ;
  104 + })
  105 +
  106 +
  107 + if(w < props.maxWidth){
  108 + return props.maxWidth / w * width;
  109 + }
  110 + }
  111 + return width;
  112 + })();
  113 +
  114 + return maxWidth;
  115 + }
88 116
89 117
90 let callback = () =>{ 118 let callback = () =>{
@@ -143,7 +171,8 @@ export default { @@ -143,7 +171,8 @@ export default {
143 handleSizeChange, 171 handleSizeChange,
144 handleCurrentChange, 172 handleCurrentChange,
145 prePage, 173 prePage,
146 - nextPage 174 + nextPage,
  175 + getWidth
147 } 176 }
148 } 177 }
149 } 178 }
@@ -148,11 +148,29 @@ global.openGraphEditor = (topoId) =>{ @@ -148,11 +148,29 @@ global.openGraphEditor = (topoId) =>{
148 * 打开资产列表 148 * 打开资产列表
149 * @param topoId 149 * @param topoId
150 */ 150 */
151 -global.openCmdbAssets = (resId) =>{  
152 - let url = `${sessionStorage.getItem('graphEditorOrigin')}/jgraph/grapheditor/index.html?access_token=${localStorage.getItem('access_token')}&id=${resId}`; 151 +global.openCmdbAssets = (resTypeId, resId, proxy) => {
  152 +
  153 + let preUrl = sessionStorage.getItem('cmdbWeb');
  154 + if(!preUrl){
  155 + global.showMsg("获取CMDB系统地址失败,请配置!","error");
  156 + return;
  157 + }
  158 +
153 let height = window.innerHeight; 159 let height = window.innerHeight;
154 let width = window.innerWidth; 160 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}`); 161 + // 获取资源类型对应的cmddb的资源类型
  162 + proxy.$http.get(`/api-web/v32/res/cmdb/${resTypeId}`, {}, function (res) {
  163 + if (res && res.success) {
  164 + let obj = res.object;
  165 + let cmdVal = obj.cmdbValue;
  166 +
  167 + let url =`${preUrl}/#/CI/configuration-item/detail?objId=${cmdVal}&id=${resId}`
  168 +
  169 + window.open(url,"_blank",`left=100,fullscreen,toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=${width}, height=${height}`);
  170 + } else {
  171 + proxy.$global.showMsg('没有查询到关联数据,请配置!', "error");
  172 + }
  173 + });
156 } 174 }
157 175
158 /** 176 /**
@@ -8,12 +8,13 @@ let http = { @@ -8,12 +8,13 @@ let http = {
8 }, 8 },
9 reqErr: function (xhr) { 9 reqErr: function (xhr) {
10 try{ 10 try{
11 - http.proxy.$global.showMsg("服务异常,请联系管理员!","error");  
12 let isUnauthorized = xhr.statusText == 'Unauthorized' 11 let isUnauthorized = xhr.statusText == 'Unauthorized'
13 if (isUnauthorized || (xhr && xhr.responseJSON && xhr.responseJSON.resp_code && xhr.responseJSON.resp_code == '401')) { 12 if (isUnauthorized || (xhr && xhr.responseJSON && xhr.responseJSON.resp_code && xhr.responseJSON.resp_code == '401')) {
14 // 登录超时,刷新当前页面===>跳转到登录页面 13 // 登录超时,刷新当前页面===>跳转到登录页面
15 - // window.location.reload();  
16 - window.top.location.href = localStorage.getItem('loginUrl'); 14 + window.top.location.reload();
  15 + //window.top.location.href = localStorage.getItem('loginUrl');
  16 + } else {
  17 + http.proxy.$global.showMsg("服务异常,请联系管理员!","error");
17 } 18 }
18 }catch (e){ 19 }catch (e){
19 } 20 }
@@ -53,7 +54,7 @@ let http = { @@ -53,7 +54,7 @@ let http = {
53 errFunc(); 54 errFunc();
54 } 55 }
55 // console.log("==>", requestUrl, xhr, textStatus) 56 // console.log("==>", requestUrl, xhr, textStatus)
56 - http.reqErr(textStatus.status); 57 + http.reqErr(xhr);
57 }, 58 },
58 success: function (data, textStatus, jqXHR) { 59 success: function (data, textStatus, jqXHR) {
59 if (callback) { 60 if (callback) {
@@ -99,7 +100,7 @@ let http = { @@ -99,7 +100,7 @@ let http = {
99 loading.close(); 100 loading.close();
100 } 101 }
101 // console.log("==>", requestUrl, xhr, textStatus) 102 // console.log("==>", requestUrl, xhr, textStatus)
102 - http.reqErr(textStatus.status); 103 + http.reqErr(xhr);
103 104
104 if (errFunc) { 105 if (errFunc) {
105 errFunc(); 106 errFunc();
@@ -147,7 +148,7 @@ let http = { @@ -147,7 +148,7 @@ let http = {
147 error: function (xhr, textStatus) { 148 error: function (xhr, textStatus) {
148 loading.close(); 149 loading.close();
149 // console.log("==>", requestUrl, xhr, textStatus) 150 // console.log("==>", requestUrl, xhr, textStatus)
150 - http.reqErr(textStatus.status); 151 + http.reqErr(xhr);
151 http.proxy.$global.showMsg("上传失败,请您确认文件是否存在!","error"); 152 http.proxy.$global.showMsg("上传失败,请您确认文件是否存在!","error");
152 153
153 }, 154 },
@@ -46,6 +46,7 @@ @@ -46,6 +46,7 @@
46 sessionStorage.setItem('workflow', res1[0].workflow); 46 sessionStorage.setItem('workflow', res1[0].workflow);
47 sessionStorage.setItem('mp3', res2[0].mp3); 47 sessionStorage.setItem('mp3', res2[0].mp3);
48 sessionStorage.setItem('jimuReport', res1[0].jimuReport); 48 sessionStorage.setItem('jimuReport', res1[0].jimuReport);
  49 + sessionStorage.setItem('cmdbWeb', res1[0].cmdbWeb);
49 }) 50 })
50 }); 51 });
51 layui.config({ 52 layui.config({
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 +<div style="display: flex;flex-wrap: nowrap">
  2 + <div style="width: calc(100% - 50px)">
  3 + <el-progress
  4 + :text-inside="true"
  5 + :stroke-width="20"
  6 + :percentage="textValue"
  7 + :status="status">
  8 + <span>{{textValue == '' ? ' ' : textValue }} %</span>
  9 + </el-progress>
  10 + </div>
  11 + <div style="width: 50px">{{textString == '' ? ' - ' : textString }} </div>
  12 +</div>
@@ -4,21 +4,25 @@ export default { @@ -4,21 +4,25 @@ export default {
4 components: {}, 4 components: {},
5 props: { 5 props: {
6 // 百分比数字,例如:50%,percentage= 50 6 // 百分比数字,例如:50%,percentage= 50
7 - percentage: { 7 + textValue: {
8 type: Number, 8 type: Number,
9 default: 0 9 default: 0
10 }, 10 },
11 - // 展示文字  
12 - percentageText: {  
13 - type: String,  
14 - default: ''  
15 - }, 11 +
16 // 状态 success/exception/warning 12 // 状态 success/exception/warning
17 status: { 13 status: {
18 type: String, 14 type: String,
19 default: 'success' 15 default: 'success'
20 }, 16 },
21 - 17 + resId: {
  18 + type: String,
  19 + default: ''
  20 + },
  21 + // 文本
  22 + textString: {
  23 + type: String,
  24 + default: 0
  25 + },
22 }, 26 },
23 data() { 27 data() {
24 return { 28 return {
1 <div> 1 <div>
2 <el-dropdown> 2 <el-dropdown>
3 <span class="el-dropdown-link" @click="openDetail"> 3 <span class="el-dropdown-link" @click="openDetail">
4 - {{resName}} 4 + {{textString}}
5 <el-icon class="el-icon--right"> 5 <el-icon class="el-icon--right">
6 <arrow-down/> 6 <arrow-down/>
7 </el-icon> 7 </el-icon>
@@ -9,13 +9,13 @@ @@ -9,13 +9,13 @@
9 <template #dropdown> 9 <template #dropdown>
10 <el-dropdown-menu> 10 <el-dropdown-menu>
11 <el-dropdown-item v-if="start" title="收藏" @click="showDialog(true)"> 11 <el-dropdown-item v-if="start" title="收藏" @click="showDialog(true)">
12 - <i class="iconfont icon-shoucang" style="color: #FEB61E"/> 12 + <i class="iconfont icon-shoucang" style="color: #FEB61E"/>收藏
13 </el-dropdown-item> 13 </el-dropdown-item>
14 <el-dropdown-item v-if="topo" title="拓扑" @click="openTopoPage"> 14 <el-dropdown-item v-if="topo" title="拓扑" @click="openTopoPage">
15 - <i class="iconfont icon-wangluotuopu" style="color: #FEB61E"/> 15 + <i class="iconfont icon-wangluotuopu" style="color: #FEB61E"/>拓扑
16 </el-dropdown-item> 16 </el-dropdown-item>
17 <el-dropdown-item v-if="assets" title="资产" @click="openCmdbAssets"> 17 <el-dropdown-item v-if="assets" title="资产" @click="openCmdbAssets">
18 - <i class="iconfont icon-assets" style="color: #FEB61E"/> 18 + <i class="iconfont icon-assets" style="color: #FEB61E"/>资产
19 </el-dropdown-item> 19 </el-dropdown-item>
20 </el-dropdown-menu> 20 </el-dropdown-menu>
21 </template> 21 </template>
@@ -23,17 +23,14 @@ @@ -23,17 +23,14 @@
23 23
24 <cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showDialog" @okfunc="saveStart"> 24 <cm-dialog title="收藏" width="500px" :showDialogVisible="dialogFlg" @hidedialog="showDialog" @okfunc="saveStart">
25 <template v-slot> 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> 26 + <div style="text-align: center;">
  27 + <el-select v-model="favIds" multiple placeholder="请选择" style="margin: 3px">
  28 + <el-option v-for="(item ,index) in favData"
  29 + :key="index"
  30 + :label="item.name"
  31 + :value="item.value" >
  32 + </el-option>
  33 + </el-select>
37 </div> 34 </div>
38 </template> 35 </template>
39 </cm-dialog> 36 </cm-dialog>
@@ -4,7 +4,7 @@ export default { @@ -4,7 +4,7 @@ export default {
4 components: {}, 4 components: {},
5 props: { 5 props: {
6 // 资源名称 6 // 资源名称
7 - resName: { 7 + textString: {
8 type: String, 8 type: String,
9 default: 0 9 default: 0
10 }, 10 },
@@ -25,6 +25,10 @@ export default { @@ -25,6 +25,10 @@ export default {
25 type: String, 25 type: String,
26 default: '' 26 default: ''
27 }, 27 },
  28 + resTypeId: {
  29 + type: String,
  30 + default: ''
  31 + },
28 32
29 }, 33 },
30 data() { 34 data() {
@@ -45,15 +49,13 @@ export default { @@ -45,15 +49,13 @@ export default {
45 * 时间:2021/11/9 18:30 49 * 时间:2021/11/9 18:30
46 */ 50 */
47 let showDialog = (flg) => { 51 let showDialog = (flg) => {
48 - dialogFlg.value = flg;  
49 -  
50 if (favData.value.length == 0) { 52 if (favData.value.length == 0) {
51 // 加载收藏文件列表 53 // 加载收藏文件列表
52 proxy.$http.get(`/api-web/favorites/treeSelectData`, {}, function (res) { 54 proxy.$http.get(`/api-web/favorites/treeSelectData`, {}, function (res) {
53 if (res && res.data && res.data.length > 0) { 55 if (res && res.data && res.data.length > 0) {
54 let arr = []; 56 let arr = [];
55 - let getChilds = (arr) => {  
56 - arr.forEach(function (v) { 57 + let getChilds = (list) => {
  58 + list.forEach(function (v) {
57 if (v.children && v.children.length > 0) { 59 if (v.children && v.children.length > 0) {
58 getChilds(v.children); 60 getChilds(v.children);
59 } else { 61 } else {
@@ -61,10 +63,15 @@ export default { @@ -61,10 +63,15 @@ export default {
61 } 63 }
62 }) 64 })
63 } 65 }
  66 + getChilds(res.data);
64 favData.value = arr; 67 favData.value = arr;
  68 + dialogFlg.value = flg;
  69 + } else {
  70 + proxy.$global.showMsg("没有查询到收藏夹,请先添加!","warning")
65 } 71 }
66 }); 72 });
67 - 73 + } else {
  74 + dialogFlg.value = flg;
68 } 75 }
69 } 76 }
70 77
@@ -76,12 +83,12 @@ export default { @@ -76,12 +83,12 @@ export default {
76 */ 83 */
77 let saveStart = () => { 84 let saveStart = () => {
78 if (props.resId == '') { 85 if (props.resId == '') {
79 - proxy.$global.showMsg("资源Id不存在,确认!") 86 + proxy.$global.showMsg("资源编号不存在,请确认!","warning")
80 return; 87 return;
81 } 88 }
82 89
83 let params = { 90 let params = {
84 - favIds: favIds, 91 + favIds: favIds.value.join(','),
85 resId: props.resId 92 resId: props.resId
86 } 93 }
87 proxy.$http.post(`/api-web/favorites/save/fav`, params, function (res) { 94 proxy.$http.post(`/api-web/favorites/save/fav`, params, function (res) {
@@ -95,14 +102,14 @@ export default { @@ -95,14 +102,14 @@ export default {
95 102
96 let openTopoPage = () => { 103 let openTopoPage = () => {
97 if (props.resId == '') { 104 if (props.resId == '') {
98 - proxy.$global.showMsg("资源Id不存在,确认!") 105 + proxy.$global.showMsg("资源编号不存在,请确认!","warning")
99 return; 106 return;
100 } 107 }
101 108
102 // 查询topoId 109 // 查询topoId
103 proxy.$http.get(`/api-web/mxgraph/generateByResId`, {resId: props.resId}, function (res) { 110 proxy.$http.get(`/api-web/mxgraph/generateByResId`, {resId: props.resId}, function (res) {
104 - if (response && response.success) {  
105 - let topoId = response.str; 111 + if (res && res.success) {
  112 + let topoId = res.str;
106 proxy.$global.openGraphEditor(topoId) 113 proxy.$global.openGraphEditor(topoId)
107 } else { 114 } else {
108 proxy.$global.showMsg('生成资源拓扑失败!', "error"); 115 proxy.$global.showMsg('生成资源拓扑失败!', "error");
@@ -111,12 +118,26 @@ export default { @@ -111,12 +118,26 @@ export default {
111 } 118 }
112 119
113 let openDetail = () => { 120 let openDetail = () => {
114 - 121 + if (props.resId == '') {
  122 + proxy.$global.showMsg("资源编号不存在,请确认!","warning")
  123 + return;
  124 + }
115 } 125 }
116 126
117 127
118 let openCmdbAssets = () => { 128 let openCmdbAssets = () => {
119 - proxy.$global.openCmdbAssets(props.resId); 129 + if (props.resId == '') {
  130 + proxy.$global.showMsg("资源编号不存在,请确认!","warning")
  131 + return;
  132 + }
  133 +
  134 + if (props.resTypeId == '') {
  135 + proxy.$global.showMsg("资源类型不存在,请确认!","warning")
  136 + return;
  137 + }
  138 +
  139 + proxy.$global.openCmdbAssets(props.resTypeId, props.resId, proxy);
  140 +
120 } 141 }
121 142
122 return { 143 return {
1 -<el-tag :type="type" effect="dark">  
2 - {{ text }} 1 +<el-tag :type="type" checked effect="dark">
  2 + {{ textString == '' ? ' - ' : textString}}
3 </el-tag> 3 </el-tag>
@@ -4,13 +4,17 @@ export default { @@ -4,13 +4,17 @@ export default {
4 components: {}, 4 components: {},
5 props: { 5 props: {
6 6
7 - // 类型 danger success warning 7 + // 类型 danger success warning info
8 type: { 8 type: {
9 type: String, 9 type: String,
10 - default: 'success' 10 + default: 'info'
11 }, 11 },
12 // 文本 12 // 文本
13 - text: { 13 + textString: {
  14 + type: String,
  15 + default: '未知'
  16 + },
  17 + resId: {
14 type: String, 18 type: String,
15 default: '' 19 default: ''
16 }, 20 },
@@ -36,7 +36,7 @@ let configPageEdit = (columns, currentNode) => { @@ -36,7 +36,7 @@ let configPageEdit = (columns, currentNode) => {
36 // 获取属性标识的配置 36 // 获取属性标识的配置
37 let code = row.colType; 37 let code = row.colType;
38 38
39 - if (fieldsObj.value[code] && Object.keys(fieldsObj.value[code]).length > 0) { 39 + if (fieldsObj.value[code] && Object.keys(fieldsObj.value[code]).length > 0 && code != 'CMDB') {
40 row.colTypeExtend = ''; 40 row.colTypeExtend = '';
41 return; 41 return;
42 } 42 }
@@ -30,10 +30,20 @@ @@ -30,10 +30,20 @@
30 30
31 <cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true" 31 <cm-table-page :columns="obj.columns" :dataList="obj.maps" @loaddata="getPage" :showIndex="true"
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)" :maxWidth="max">
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].value}}</a>  
36 - <el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop].value}}</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 == undefined ? '' : row[prop].value }}</a>
  36 +
  37 + <component v-else-if="row[prop] && row[prop].props && row[prop].props.colComponents " v-bind:is="row[prop].props.colComponents"
  38 + :resId="row.resId"
  39 + :textValue="row[prop].value"
  40 + :resTypeId="currentNode.id"
  41 + :textString="row[prop].value"></component>
  42 +
  43 +
  44 +
  45 +
  46 + <el-link v-else :underline="false" @click="item.click(scope.row)">{{row[prop].value == undefined ? '' : row[prop].value }}</el-link>
37 </template> 47 </template>
38 </cm-table-page> 48 </cm-table-page>
39 </div> 49 </div>
@@ -65,6 +65,13 @@ export default { @@ -65,6 +65,13 @@ export default {
65 65
66 let total = Vue.ref(0); 66 let total = Vue.ref(0);
67 67
  68 + // 计算减去左侧树的宽度
  69 + let max = (function (){
  70 + let right = window.innerWidth;
  71 + let treeWidth = (right / 24) * 4;
  72 + return right - treeWidth ;
  73 + })();
  74 +
68 // 获取左侧树结构 75 // 获取左侧树结构
69 let loadTree = () => { 76 let loadTree = () => {
70 proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) { 77 proxy.$http.get("/api-web/v32/res/list/tree", {}, function (res) {
@@ -151,6 +158,7 @@ export default { @@ -151,6 +158,7 @@ export default {
151 openCabinet, 158 openCabinet,
152 cabinetNoSrc, 159 cabinetNoSrc,
153 total, 160 total,
  161 + max,
154 162
155 // 配置页面 163 // 配置页面
156 showConfig, configObj, showConfigDialog 164 showConfig, configObj, showConfigDialog