修改总览布局

src/components/relation/overview/CardList.vue

@@ -41,111 +41,109 @@
                     :content="relation.RelationTypeName"
                     placement="top"
                 >
-              <p class="relation-title reset-test reset-title">{{relation.RelationTypeName}}</p>
+                  <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>
+                  <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"
-                    style="z-index: 3;position:relative;"
-                >
-                  <i class="iconfont icon-warn icon"/>
-                </el-tooltip>
-              </p>
-              </div>
-              <article>
-                <el-col
-                    :span="13"
-                    class="main-object "
-                >
-                  <p class="object">主要连接对象</p>
+                <p class="relation-title-icon reset-test fr">
                   <el-tooltip
-                      :content="relation.ConneObject"
+                      :content="relation.Note"
                       placement="top"
+                      style="z-index: 3;position:relative;"
                   >
-                  <p
-                      class="group reset-title"
-                      :title="relation.ConneObject"
-                  >{{relation.ConneObject}}</p>
+                    <i class="iconfont icon-warn icon"/>
                   </el-tooltip>
-                </el-col>
-                <el-col
-                    :span="1"
-                    class="main-object ">&nbsp;
-                </el-col>
-                <el-col
-                    :span="10"
-                    class="main-object"
-                >
-                  <p class="line-number">连接数量</p>
-                  <p class="line-number">{{relation.count}}</p>
-                </el-col>
-              </article>
-              <p class="last-computed">
-                <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>
-                <span v-show="relation.ComputationalState === 5">计算失败</span>
-                <span v-show="relation.ComputingTime">最后一次计算时间 {{relation.ComputingTime}}</span>
-                <el-tooltip
-                    content="启动计算"
-                    placement="top"
-                >
-                  <el-badge
-                      class="item float-right"
-                      :is-dot="relation.ComputationalState === 2"
-                  >
-                    <el-button
-                        @click="computed(relation)"
-                        :disabled="!relation.IsSource && !relation.IsAutomatic"
-                        circle
-                        type="primary"
-                        plain
-                        icon="iconfont icon-changyongtubiao-mianxing-"
-
-                    >
-                      <!--style="background: #000;color: #fff"-->
-                    </el-button>
-                  </el-badge>
-                </el-tooltip>
-                <el-tooltip
-                    content="手动编辑"
-                    placement="top"
-                >
-                  <el-button
-                      :disabled="relation.Manual === 1"
-                      :style="{'border':(relation.Manual=== 1? '1px solid #DCDFE6' :'')}"
-                      @click="manual(relation)"
-                      circle
-                      class="float-right"
-                      type="primary"
-                      plain
-                      icon="iconfont icon-bianji"
-                  >
-                  </el-button>
+                </p>
+              </div>
+              <article>
+                <el-row>
+                  <el-col :span="13" >
+                    <div class="grid-content">
+                      <p class="object">主要连接对象</p>
+                      <el-tooltip
+                          :content="relation.ConneObject"
+                          placement="top"
+                      >
+                        <p class="group reset-title">{{relation.ConneObject}}</p>
+                      </el-tooltip>
+                    </div>
+                  </el-col>
+                  <el-col :span="1">
+                    <div class="grid-content">
+                      <p class="thread"></p>
+                    </div>
+                  </el-col>
+                  <el-col :span="10">
+                    <div class="grid-content ">
+                      <p class="line-number">连接数量</p>
+                      <p :class="relation.count > 1? 'line-number-show' :'line-number-hide'">{{relation.count}}</p>
+                      <p class="last-computed">
+                        <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>
+                        <span v-show="relation.ComputationalState === 5">计算失败</span>
+                        <span v-show="relation.ComputingTime">最后一次计算时间 {{relation.ComputingTime}}</span>
+                        <el-tooltip
+                            content="启动计算"
+                            placement="top"
+                        >
+                          <el-badge
+                              class="item float-right"
+                              :is-dot="relation.ComputationalState === 2"
+                          >
+                            <el-button
+                                @click="computed(relation)"
+                                :disabled="!relation.IsSource && !relation.IsAutomatic"
+                                circle
+                                type="primary"
+                                plain
+                                icon="iconfont icon-changyongtubiao-mianxing-"
 
-                </el-tooltip>
-                <el-tooltip
-                    content="设定设备对象源/末端"
-                    placement="top"
-                    v-if="relation.IsSource"
-                >
-                  <el-button
-                      @click="equipment"
-                      type="primary"
-                      plain
-                      circle
-                      class="float-right"
-                      icon="iconfont icon-23 "
-                      style="transform: rotate(90deg);"
-                  >
-                  </el-button>
-                </el-tooltip>
-              </p>
+                            >
+                              <!--style="background: #000;color: #fff"-->
+                            </el-button>
+                          </el-badge>
+                        </el-tooltip>
+                        <el-tooltip
+                            content="手动编辑"
+                            placement="top"
+                        >
+                          <el-button
+                              :disabled="relation.Manual === 1"
+                              :style="{'border':(relation.Manual=== 1? '1px solid #DCDFE6' :'')}"
+                              @click="manual(relation)"
+                              circle
+                              class="float-right"
+                              type="primary"
+                              plain
+                              icon="iconfont icon-bianji"
+                          >
+                          </el-button>
+
+                        </el-tooltip>
+                        <el-tooltip
+                            content="设定设备对象源/末端"
+                            placement="top"
+                            v-if="relation.IsSource"
+                        >
+                          <el-button
+                              @click="equipment"
+                              type="primary"
+                              plain
+                              circle
+                              class="float-right"
+                              icon="iconfont icon-23 "
+                              style="transform: rotate(90deg);"
+                          >
+                          </el-button>
+                        </el-tooltip>
+                      </p>
+                    </div>
+                  </el-col>
+                </el-row>
+              </article>
             </el-card>
           </el-col>
         </el-row>
@@ -282,45 +280,74 @@
 
   .container {
     @media (max-width: 1366px) {
-      .relation-title,.group{
-        max-width:150px ;
+      .relation-title {
+        max-width: 160px;
+      }
+
+      .group {
+        white-space: normal !important;
       }
-      .asc{
-        max-width: 180px;
+
+      .asc {
+        max-width: 108px;
+      }
+      .thread{
+        margin-left: 5px !important;
+      }
+      /deep/.el-card__body {
+        padding: 18px !important;
       }
     }
+    .el-row {
+      margin-bottom: 20px;
 
-    @media (max-width: 1440px) {
-      .relation-title,.group{
-        max-width:150px ;
+      &:last-child {
+        margin-bottom: 0;
       }
-      .asc{
-        max-width: 180px;
+    }
+
+    .el-col {
+      border-radius: 4px;
+    }
+
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+
+      .thread {
+        border-left: 1px solid @font-code;
+        margin-left: 10px;
+        min-height: 36px;
+        margin-top: 6px;
       }
     }
-    .reset-title{
+
+    .row-bg {
+      padding: 10px 0;
+      background-color: #f9fafc;
+    }
+
+    .reset-title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-   .reset-test{
-     float: left;
-     text-align: center;
-     height: 40px;
-     line-height: 40px;
-   }
-    .fr{
+
+    .reset-test {
+      float: left;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+    }
+
+    .fr {
       float: right;
     }
+
     .el-card {
-      /*border: 1px solid #000;*/
       margin: 10px 0;
     }
 
-    /*.el-button {*/
-    /*    border: 1px solid #000;*/
-    /*}*/
-
     .relation-text {
       overflow: hidden;
       margin-top: 10px;
@@ -356,6 +383,7 @@
       font-size: 20px;
       font-weight: @font-big;
       margin-right: 10px;
+
       .icon {
         display: block;
         float: right;
@@ -363,10 +391,12 @@
         font-size: 18px;
       }
     }
+
     .relation-title-icon {
       font-size: 20px;
       font-weight: @font-big;
       overflow: hidden;
+
       .icon {
         display: block;
         float: right;
@@ -374,39 +404,41 @@
         font-size: 18px;
       }
     }
+
     .asc {
       font-size: @font-small;
       color: @font-code;
     }
+    .object {
+      font-size: @font-small;
+      color: @font-code;
+      font-weight: @font-big;
+    }
 
-    .main-object {
-      margin: 15px 0;
-      padding-left: 0 !important;
-
-      &:nth-child(even) {
-        border-left: 1px solid @font-code;
-        margin-top: 27px;
-      }
+    .group {
+      color: @color-text;
+      font-weight: @font-big;
+    }
 
-      .object {
-        font-size: @font-small;
-        color: @font-code;
-        font-weight: @font-big;
-      }
+    .line-number {
+      font-size: @font-small;
+      color: @font-code;
+      font-weight: @font-big;
+    }
 
-      .group {
-        color: @color-text;
-        font-weight: @font-big;
-      }
+    .line-number-show {
+      color: @color-text;
+      font-weight: @font-big;
+    }
 
-      .line-number {
-        font-size: @font-small;
-        color: @font-code;
-        font-weight: @font-big;
-      }
+    .line-number-hide {
+      color: @font-code;
+      font-weight: @font-big;
     }
 
 
+
+
     article {
       overflow: hidden;
     }