布局文档对比

jero-web/src/common/lang/en-us.js

@@ -1161,4 +1161,6 @@ module.exports = {
   Deriveconformanceresults:'Derive Conformance Results',
   Regulatorycompliancekanban:'Regulatory Compliance Kanban',
   exportComparisonReport:'Export Comparison Report',
+  comparisonDifferenceComment:'Comparison Difference Comment',
+  fullTextComments:'Full text comments',
 }

jero-web/src/common/lang/zh-cn.js

@@ -1165,4 +1165,6 @@ module.exports = {
   addFullTextComment:'添加全文评论',
   turnOffAutomaticMatching:'关闭自动匹配',
   exportComparisonReport:'导出对比报告',
+  comparisonDifferenceComment:'对比差异评论',
+  fullTextComments:'全文评论',
 }

jero-web/src/views/documentTools/documentComparison/components/comparisonResults.vue

@@ -11,7 +11,7 @@
         <div class="doc-detail-right">
           <div @click="exportComparisonReportClick" class="operator-text-text"
                :title="$t('exportComparisonReport')">
-            <a-icon type="eye"/>
+            <a-icon type="export" />
             {{$t('exportComparisonReport')}}
           </div>
           <div @click="commentClick" class="operator-text-text"
@@ -23,7 +23,7 @@
       </div>
       <div style="padding-top: 68px;background: #fff">
         <div class="detail-content">
-          <div class="detail-content-header">
+          <div class="detail-content-header" style="margin-bottom: 20px">
             <a-checkbox @change="onChange" style="margin-left: 20px;float: left"></a-checkbox>
             <div class="detail-content-header-content">
               <div class="detail-content-header-content-left">
@@ -37,11 +37,165 @@
               </div>
             </div>
           </div>
-          <a-checkbox-group @change="onChange">
+          <a-checkbox-group @change="onChange" style="width: 100%;overflow: overlay;height: calc(100vh - 300px)">
             <div class="detail-content-content">
-
+              <a-checkbox value="A" class="detail-checkbox">
+              </a-checkbox>
+              <div class="detail-content-content-text">
+                <div class="detail-content-content-text-left">
+                  <div class="detail-content-left">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板
+                      sdf kdsf kljsfkldsfdsfdsf
+                    </div>
+                  </div>
+                  <div class="detail-content-right">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板收到反是馈就但是罚款决定书发的科技示范
+                    </div>
+                  </div>
+                  <div class="detail-content-bottom">
+                    <div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
+                      <a-icon type="message"/>
+                      {{$t('comparisonDifferenceComment')}}:
+                    </div>
+                    <div class="detail-content-bottom-right">
+                      差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-content-content-text-right">
+                  <span class="text-button-one">
+                   <a class="text-button">{{$t('edit')}}</a>
+                   <a class="text-button">{{$t('delete')}}</a>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="detail-content-content">
+              <a-checkbox value="A" class="detail-checkbox">
+              </a-checkbox>
+              <div class="detail-content-content-text">
+                <div class="detail-content-content-text-left">
+                  <div class="detail-content-left">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板
+                      sdf kdsf kljsfkldsfdsfdsf
+                    </div>
+                  </div>
+                  <div class="detail-content-right">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板收到反是馈就但是罚款决定书发的科技示范
+                    </div>
+                  </div>
+                  <div class="detail-content-bottom">
+                    <div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
+                      <a-icon type="message"/>
+                      {{$t('comparisonDifferenceComment')}}:
+                    </div>
+                    <div class="detail-content-bottom-right">
+                      差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-content-content-text-right">
+                  <span class="text-button-one">
+                   <a class="text-button">{{$t('edit')}}</a>
+                   <a class="text-button">{{$t('delete')}}</a>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="detail-content-content">
+              <a-checkbox value="A" class="detail-checkbox">
+              </a-checkbox>
+              <div class="detail-content-content-text">
+                <div class="detail-content-content-text-left">
+                  <div class="detail-content-left">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板
+                      sdf kdsf kljsfkldsfdsfdsf
+                    </div>
+                  </div>
+                  <div class="detail-content-right">
+                    <div class="detail-content-left-top">
+                      <span>第10条</span>
+                      <span style="margin-left: 10px">光反射器</span>
+                    </div>
+                    <div class="detail-content-left-button">
+                      12. 附加光反射器，可以是贴纸，具有以下规格： a) 正面左右两侧呈白色或淡黄色； b) 背面左右两侧呈红色； c) 防护板收到反是馈就但是罚款决定书发的科技示范
+                    </div>
+                  </div>
+                  <div class="detail-content-bottom">
+                    <div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
+                      <a-icon type="message"/>
+                      {{$t('comparisonDifferenceComment')}}:
+                    </div>
+                    <div class="detail-content-bottom-right">
+                      差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-content-content-text-right">
+                  <span class="text-button-one">
+                   <a class="text-button">{{$t('edit')}}</a>
+                   <a class="text-button">{{$t('delete')}}</a>
+                  </span>
+                </div>
+              </div>
             </div>
           </a-checkbox-group>
+          <div class="detail-content-content">
+            <a-checkbox value="A" class="detail-checkbox">
+            </a-checkbox>
+            <div class="detail-content-content-text">
+              <div class="detail-content-content-text-left">
+                <div class="detail-content-content-text-left-text">
+                  {{$t('fullTextComments')}}: 文字占位符评论文字内容文字占位符评论文
+                  字内容文字占位符评论文字内容文字
+                  占位符评论文字内容文字占位符评论文字内容文字占
+                  文字占位符评论文字内容文字占位符评论文
+                  字内容文字占位符评论文字内容文字
+                  占位符评论文字内容文字占位符评论文字内容文字占
+                  文字占位符评论文字内容文字占位符评论文
+                  字内容文字占位符评论文字内容文字
+                  占位符评论文字内容文字占位符评论文字内容文字占
+                  文字占位符评论文字内容文字占位符评论文
+                  字内容文字占位符评论文字内容文字
+                  占位符评论文字内容文字占位符评论文字内容文字占
+                  文字占位符评论文字内容文字占位符评论文
+                  字内容文字占位符评论文字内容文字
+                  占位符评论文字内容文字占位符评论文字内容文字占
+                </div>
+              </div>
+              <div class="detail-content-content-text-right">
+                  <span class="text-button-one">
+                   <a class="text-button">{{$t('edit')}}</a>
+                   <a class="text-button">{{$t('delete')}}</a>
+                  </span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -132,7 +286,7 @@
   }
 
   .detail-content {
-    padding: 24px 32px;
+    padding: 24px 32px 0 32px;
     box-sizing: border-box;
   }
 
@@ -182,4 +336,129 @@
     }
   }
 
+  .detail-content-content {
+    width: 100%;
+    height: auto;
+    position: relative;
+    margin-bottom: 24px;
+  }
+
+  .detail-checkbox {
+    margin-left: 28px;
+    float: left;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .detail-content-content-text {
+    width: calc(100% - 56px);
+    margin-left: 56px;
+    border: 1px solid #EFF1F3;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .detail-content-content-text-left {
+      width: calc(100% - 128px);
+      float: left;
+      border-right: 1px solid #EFF1F3;
+      padding: 24px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .detail-content-content-text-right {
+      width: 128px;
+      float: left;
+      height: auto;
+      text-align: center;
+
+      .text-button-one {
+        display: inline-block;
+        width: 128px;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .text-button {
+        margin-right: 8px;
+
+      }
+    }
+  }
+
+  .detail-content-left {
+    width: 50%;
+    display: inline-block;
+    float: left;
+    padding-right: 24px;
+    border-right: 1px #EFF1F3 solid;
+  }
+
+  .detail-content-right {
+    width: 50%;
+    display: inline-block;
+    float: left;
+    padding-left: 24px;
+  }
+
+  .detail-content-left-top {
+    font-size: 16px;
+    font-family: Blue Sky Noto;
+    font-weight: 400;
+    color: #040B29;
+  }
+
+  .detail-content-left-button {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    margin-top: 10px;
+  }
+
+  .detail-content-bottom {
+    width: 100%;
+    margin-top: 14px;
+    padding: 24px;
+    box-sizing: border-box;
+    background: rgba(4, 11, 41, 0.0300);
+    border-radius: 4px;
+    float: left;
+  }
+
+  .detail-content-bottom-left {
+    width: 115px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    float: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .detail-content-bottom-right {
+    width: calc(50% - 115px);
+    float: left;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+  }
+
+  .detail-content-content-text-left-text {
+    width: 100%;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    /*! autoprefixer: off */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    /*! autoprefixer: on;*/
+    text-justify: inter-ideograph;
+    word-break: break-all
+  }
 </style>

jero-web/src/views/documentTools/documentComparison/index.vue

@@ -106,10 +106,10 @@
         //url传参严格按照当前命名
         url: {
           list: '',
-          deleteBatch:'',
+          deleteBatch: ''
         },
         loading: false,
-        dataSource: [],
+        dataSource: [{}],
         selectedRowKeys: [],
         total: 0,
         pageSize: 10,
@@ -203,7 +203,7 @@
       }
     },
     mounted() {
-      this.getList()
+      // this.getList()
     },
     methods: {
       searchQuery() {
@@ -251,21 +251,24 @@
         this.selectedRowKeys = value
       },
       comparisonResultsClick() {
-
+        let newUrl = this.$router.resolve({
+          path: '/comparisonResults'
+        })
+        window.open(newUrl.href, '_blank')
       },
       subscribe() {
 
       },
-      edit(){
+      edit() {
 
       },
-      initiatingProcessClick(){
+      initiatingProcessClick() {
         let newUrl = this.$router.resolve({
-          path: '/comparisonResults',
+          path: '/initiateDocumentComparison'
         })
         window.open(newUrl.href, '_blank')
       },
-      deleteData(val){
+      deleteData(val) {
         let _this = this
         this.$confirm({
           content: _this.$t('ConfirmDelete'),
@@ -280,7 +283,7 @@
             })
           }
         })
-      },
+      }
     }
   }
 </script>