monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 7573b68499fdf492bc1d11a50bbea0fd47e3c727 2 parents a0c4c027 71fe7f9f

Merge branch 'master-500-dev-lushangqing' into 'master-500-dev' 

基本信息二得名称后添加查看拓扑图标及信息图标一直展示



See merge request !54
Inline Side-by-side
Showing 3 changed files with 94 additions and 20 deletions
@@ -63,6 +63,14 @@ export const monitorTreeShape = { @@ -63,6 +63,14 @@ export const monitorTreeShape = {
63 // value: '18' 63 // value: '18'
64 // }, 64 // },
65 { 65 {
  66 + type: 'el-switch',
  67 + label: '分类型',
  68 + name: 'isType',
  69 + required: false,
  70 + placeholder: '',
  71 + value: true
  72 + },
  73 + {
66 type: 'vue-color', 74 type: 'vue-color',
67 label: '字体颜色', 75 label: '字体颜色',
68 name: 'titleColor', 76 name: 'titleColor',
@@ -12,15 +12,35 @@ @@ -12,15 +12,35 @@
12 </div> 12 </div>
13 <!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>--> 13 <!-- <dynamicTableComponents :formData="dtInformationData"></dynamicTableComponents>-->
14 <div class="basic-ul-right" :style="borderStyleF" > 14 <div class="basic-ul-right" :style="borderStyleF" >
15 - <div @mouseenter="mouseFun" @mouseleave="leaveFun" v-if="informationData[0].isDisplay=='1'">  
16 - <el-row class="backColor">  
17 - <el-col class="padding-10" :style="[borderStlye,tableTitleStyle]" aria-colspan="2">  
18 - <span class="link-type" :style="tableTitleStyle" @click="goTrend(informationData[0])">{{informationData[0].name}}</span>  
19 -<!-- <a class="link-type" :style="tableTitleStyle" :href="jkAddress.jkUrl" target="_blank"></a>-->  
20 - <i class="el-icon-info" v-if="visible" @click="resTopo"/>  
21 - </el-col>  
22 - </el-row>  
23 - </div> 15 + <div v-if="informationDataAll[0].isDisplay=='1'" >
  16 + <el-row class="backColor" :style="bodyTitleStyle">
  17 + <el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
  18 + <span class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
  19 + <el-tooltip v-model="visible" :manual="true" placement="right-start">
  20 + <template #content>
  21 + <div class="basic-tbody-all basic-border-nowrap" :style="wrapStyle">
  22 + <el-row class="basic-item" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationDataAll" :key="index">
  23 + <el-col :style="[lineHeightStyle]" v-if="index>0" class="basic-border basic-item-title basic-flex" :span="10">
  24 + {{ item.name }}
  25 + </el-col>
  26 + <el-col :style="[lineHeightStyle]" v-if="index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
  27 + </el-col>
  28 + </el-row>
  29 + </div>
  30 + </template>
  31 + <i class="el-icon-info"@mouseenter="visible = true"/>
  32 + </el-tooltip>
  33 + <el-tooltip
  34 + class="box-item"
  35 + effect="dark"
  36 + content="查看拓扑图"
  37 + placement="top"
  38 + >
  39 + <i class="el-icon-orange" @click="resTopo(item)" ></i>
  40 + </el-tooltip>
  41 + </el-col>
  42 + </el-row>
  43 + </div>
24 <div class="basic-tbody basic-border-wrap" :style="wrapStyle"> 44 <div class="basic-tbody basic-border-wrap" :style="wrapStyle">
25 <el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationData" :key="index"> 45 <el-row class="basic-item" :style="itemStyle" v-if="item.isDisplay=='1' && index>0" v-for="(item,index) in informationData" :key="index">
26 <!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">--> 46 <!-- <el-col :style="headStyle" v-if="attrKey.attrKeyVal.indexOf(item.code)>0 && index>0" class="basic-border basic-item-title basic-flex backColor" :span="10">-->
@@ -32,7 +52,7 @@ @@ -32,7 +52,7 @@
32 </el-col> 52 </el-col>
33 <!-- && attrKey.attrKeyVal.includes(item.code)--> 53 <!-- && attrKey.attrKeyVal.includes(item.code)-->
34 </el-row> 54 </el-row>
35 - <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="informationData.length%2==0"> 55 + <el-row class="basic-item 111" :style="[itemStyle,borderStlyeLast]" v-if="optionsSetUp.isTowColumn && informationData.length%2==0">
36 <el-col class="basic-border basic-item-title basic-flex" :span="10"> 56 <el-col class="basic-border basic-item-title basic-flex" :span="10">
37 </el-col> 57 </el-col>
38 <el-col class="basic-border basic-flex basic-item-content" :span="14"><span></span> 58 <el-col class="basic-border basic-flex basic-item-content" :span="14"><span></span>
@@ -173,6 +193,18 @@ @@ -173,6 +193,18 @@
173 "border-top-color": headStyle.borderColor, 193 "border-top-color": headStyle.borderColor,
174 }; 194 };
175 }, 195 },
  196 + //信息表格内容标题样式
  197 + bodyTitleStyle(){
  198 + const headStyle = this.optionsSetUp;
  199 + return{
  200 + "border-bottom-style": headStyle.isLine ? "solid" : "none",
  201 + "border-bottom-width": headStyle.borderWidth + "px",
  202 + "border-bottom-color":headStyle.borderColor,
  203 + "border-right-style": headStyle.isLine ? "solid" : "none",
  204 + "border-right-width": headStyle.borderWidth + "px",
  205 + "border-right-color":headStyle.borderColor,
  206 + }
  207 + },
176 //表格标题样式 208 //表格标题样式
177 tableTitleStyle(){ 209 tableTitleStyle(){
178 return{ 210 return{
@@ -274,7 +306,7 @@ @@ -274,7 +306,7 @@
274 methods: { 306 methods: {
275 //右侧最后一个元素边框样式 307 //右侧最后一个元素边框样式
276 borderStyleRight(index){ 308 borderStyleRight(index){
277 - let border='none'; 309 + /* let border='none';
278 if(index+1==this.informationData.length){ 310 if(index+1==this.informationData.length){
279 border='none' 311 border='none'
280 }else{ 312 }else{
@@ -282,7 +314,7 @@ @@ -282,7 +314,7 @@
282 } 314 }
283 return{ 315 return{
284 'border-right':border 316 'border-right':border
285 - } 317 + }*/
286 }, 318 },
287 handlerData() { 319 handlerData() {
288 const resData = this.optionsData; 320 const resData = this.optionsData;
@@ -405,9 +437,18 @@ @@ -405,9 +437,18 @@
405 this.visible = false; 437 this.visible = false;
406 }, 438 },
407 // 439 //
408 - resTopo() {  
409 - this.topoSrc = this.topoAddress.topoUrl;  
410 - this.topoVisible = true; 440 + resTopo(item) {
  441 + // this.topoSrc = this.topoAddress.topoUrl;
  442 + // this.topoVisible = true;
  443 + let param = {
  444 + type:'topology',
  445 + data:{
  446 + resId: item.resId,
  447 + resType: item.resType
  448 + }
  449 +
  450 + }
  451 + window.parent.postMessage(param, '*')
411 }, 452 },
412 //弹框关闭确定 453 //弹框关闭确定
413 hideDialog() { 454 hideDialog() {
@@ -481,8 +522,15 @@ @@ -481,8 +522,15 @@
481 white-space: nowrap; 522 white-space: nowrap;
482 color: #0d82e9; 523 color: #0d82e9;
483 cursor: pointer; 524 cursor: pointer;
  525 + margin-right:5px;
  526 + }
  527 + .box-item{
  528 + margin-left:5px;
  529 + cursor: pointer;
  530 + }
  531 + .el-icon-info{
  532 + cursor: pointer;
484 } 533 }
485 -  
486 .title-name { 534 .title-name {
487 color: rgb(30, 159, 255); 535 color: rgb(30, 159, 255);
488 font-size: 16px; 536 font-size: 16px;
@@ -509,7 +557,7 @@ @@ -509,7 +557,7 @@
509 557
510 } 558 }
511 559
512 - .basic-ul-all { 560 + .basic-tbody-all {
513 .basic-item:nth-child(even) { 561 .basic-item:nth-child(even) {
514 background-color: #262323 !important; 562 background-color: #262323 !important;
515 } 563 }
@@ -533,7 +581,11 @@ @@ -533,7 +581,11 @@
533 //flex-flow: column; 581 //flex-flow: column;
534 flex-wrap: wrap; 582 flex-wrap: wrap;
535 } 583 }
536 - 584 + .basic-border-nowrap{
  585 + display: flex;
  586 + flex-flow: column;
  587 + min-width: 200px;
  588 + }
537 589
538 .basic-img { 590 .basic-img {
539 width: 16px; 591 width: 16px;
@@ -552,7 +604,7 @@ @@ -552,7 +604,7 @@
552 display: inline-block; 604 display: inline-block;
553 } 605 }
554 }*/ 606 }*/
555 - .basic-ul-all { 607 + .basic-tbody-all {
556 .basic-item-content { 608 .basic-item-content {
557 text-align: center; 609 text-align: center;
558 } 610 }
1 <template> 1 <template>
2 <div :style="styleObj" class="treeContainer"> 2 <div :style="styleObj" class="treeContainer">
  3 + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" v-if="optionsSetup.isType">
  4 + <el-tab-pane label="业务" name="first"></el-tab-pane>
  5 + <el-tab-pane label="资源" name="second"></el-tab-pane>
  6 + </el-tabs>
3 <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" 7 <el-tree :style="textStyle" class="tree-div" ref="roleTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
4 node-key="id" :default-checked-keys="checkedKeys" 8 node-key="id" :default-checked-keys="checkedKeys"
5 /> 9 />
@@ -17,6 +21,7 @@ export default { @@ -17,6 +21,7 @@ export default {
17 }, 21 },
18 data() { 22 data() {
19 return { 23 return {
  24 + activeName:'first',
20 defaultProps : { 25 defaultProps : {
21 children: 'children', 26 children: 'children',
22 label: 'label', 27 label: 'label',
@@ -76,6 +81,9 @@ export default { @@ -76,6 +81,9 @@ export default {
76 81
77 }, 82 },
78 methods: { 83 methods: {
  84 + handleClick(tab,event){
  85 + this.handleTableData();
  86 + },
79 handleNodeClick(data){ 87 handleNodeClick(data){
80 console.log(data); 88 console.log(data);
81 this.$store.commit('CHANGE_TREE',data) 89 this.$store.commit('CHANGE_TREE',data)
@@ -83,7 +91,13 @@ export default { @@ -83,7 +91,13 @@ export default {
83 editorOptions() { 91 editorOptions() {
84 this.setOptionsData(); 92 this.setOptionsData();
85 }, 93 },
86 - 94 + //切换类型获取树结构数据
  95 + handleTableData() {
  96 + if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isType) {
  97 + //改变参数值-类型
  98 + this.optionsData.dynamicData.contextData.type = this.activeName;
  99 + }
  100 + },
87 // 数据解析 101 // 数据解析
88 setOptionsData() { 102 setOptionsData() {
89 const optionsData = this.optionsData; // 数据类型 静态 or 动态 103 const optionsData = this.optionsData; // 数据类型 静态 or 动态