Browse Source

1,总览适配1366屏幕。2,信息维护下一步按钮位置。3,信息维护增加维护后清空规则。4,信息维护增加上一步按钮。1,总览适配1366屏幕。2,信息维护下一步按钮位置。3,信息维护增加维护后清空规则。4,信息维护增加上一步按钮。

shaun-sheep 5 years ago
parent
commit
cf8e9073db
2 changed files with 615 additions and 505 deletions
  1. 537 489
      src/components/dialogs/list/batchDialog.vue
  2. 78 16
      src/components/relation/overview/CardList.vue

File diff suppressed because it is too large
+ 537 - 489
src/components/dialogs/list/batchDialog.vue


+ 78 - 16
src/components/relation/overview/CardList.vue

@@ -36,9 +36,20 @@
             >
               <!-- border:none-->
               <!--<div class="mask"></div>-->
-              <p class="relation-title">
-                {{relation.RelationTypeName}}
-                <span class="asc">边类型编码:{{relation.RelationTypeCode}}</span>
+              <div style="overflow: hidden">
+                <el-tooltip
+                    :content="relation.RelationTypeName"
+                    placement="top"
+                >
+              <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
+                </el-tooltip>
+                <el-tooltip
+                    :content="relation.RelationTypeCode"
+                    placement="top"
+                >
+              <p class="asc reset-title reset-test">边类型编码:{{relation.RelationTypeCode}}</p>
+                </el-tooltip>
+              <p class="relation-title-icon reset-test fr">
                 <el-tooltip
                     :content="relation.Note"
                     placement="top"
@@ -47,13 +58,22 @@
                   <i class="iconfont icon-warn icon"/>
                 </el-tooltip>
               </p>
+              </div>
               <article>
                 <el-col
                     :span="13"
                     class="main-object "
                 >
                   <p class="object">主要连接对象</p>
-                  <p class="group">{{relation.ConneObject}}</p>
+                  <el-tooltip
+                      :content="relation.ConneObject"
+                      placement="top"
+                  >
+                  <p
+                      class="group reset-title"
+                      :title="relation.ConneObject"
+                  >{{relation.ConneObject}}</p>
+                  </el-tooltip>
                 </el-col>
                 <el-col
                     :span="1"
@@ -187,7 +207,7 @@
           downloadFile: ' 下载报告文件'
         },
         isComputed: {}, // 当前要计算的对象
-        ManualMaintenance:{},//手动编辑对象
+        ManualMaintenance: {},//手动编辑对象
       }
     },
     computed: {},
@@ -197,7 +217,7 @@
         // alert('explain click')
       },
       RelationType() {
-        this.$emit('RelationType',this.isComputed.RelationType, this.isComputed.ZoneType)
+        this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
 
       },
       computed(relation) {
@@ -218,16 +238,16 @@
       manual(relation) {
         let {Manual, Prompting, RelationTypeName, ComputingTime} = relation;
         let device = Prompting && Prompting.split(','),
-          tips= `请前往以下功能页面维护 <${RelationTypeName}>`,
-          optionTips= `请下载最新最新 <${RelationTypeName}> 数据进行手动维护`,
-          lastTime=`最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
+          tips = `请前往以下功能页面维护 <${RelationTypeName}>`,
+          optionTips = `请下载最新最新 <${RelationTypeName}> 数据进行手动维护`,
+          lastTime = `最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
 
         if (Manual === 2) {
-          this.values={...this.values,device,tips}
+          this.values = {...this.values, device, tips}
           this.$refs.maintain.dialogManualTip = true
         }
         if (Manual === 3) {
-          this.values={...this.values,optionTips,lastTime}
+          this.values = {...this.values, optionTips, lastTime}
           this.$refs.maintain.dialogManualOption = true
         }
         this.ManualMaintenance = relation
@@ -252,6 +272,7 @@
   @pos-absolute: absolute;
   @pos-zero: 0;
   @5px: 5px;
+
   .slave-relation-title {
     color: @font-code;
     font-weight: 600;
@@ -260,6 +281,37 @@
   }
 
   .container {
+    @media (max-width: 1366px) {
+      .relation-title,.group{
+        max-width:150px ;
+      }
+      .asc{
+        max-width: 180px;
+      }
+    }
+
+    @media (max-width: 1440px) {
+      .relation-title,.group{
+        max-width:150px ;
+      }
+      .asc{
+        max-width: 180px;
+      }
+    }
+    .reset-title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+   .reset-test{
+     float: left;
+     text-align: center;
+     height: 40px;
+     line-height: 40px;
+   }
+    .fr{
+      float: right;
+    }
     .el-card {
       /*border: 1px solid #000;*/
       margin: 10px 0;
@@ -303,12 +355,18 @@
     .relation-title {
       font-size: 20px;
       font-weight: @font-big;
-
-      .asc {
-        font-size: @font-small;
-        color: @font-code;
+      margin-right: 10px;
+      .icon {
+        display: block;
+        float: right;
+        color: #555;
+        font-size: 18px;
       }
-
+    }
+    .relation-title-icon {
+      font-size: 20px;
+      font-weight: @font-big;
+      overflow: hidden;
       .icon {
         display: block;
         float: right;
@@ -316,6 +374,10 @@
         font-size: 18px;
       }
     }
+    .asc {
+      font-size: @font-small;
+      color: @font-code;
+    }
 
     .main-object {
       margin: 15px 0;