布局文档对比

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

@@ -1154,6 +1154,10 @@ module.exports = {
   noComparisonDocumentSelected:'No comparison document selected',
   RemarkInfo:'Remarks Info',
   initiateDocumentComparison:'Initiate Document Comparison',
+  comparativeComments:'Comparative Comments',
+  viewTheComparisonResults:'View The Comparison Results',
+  addFullTextComment:'Add Full Text Comment',
+  turnOffAutomaticMatching:'Turn Off Automatic Matching',
   Deriveconformanceresults:'Derive Conformance Results',
   Regulatorycompliancekanban:'Regulatory Compliance Kanban',
 }

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

@@ -1160,4 +1160,8 @@ module.exports = {
   noComparisonDocumentSelected:'未选择对比文档',
   RemarkInfo:'备注信息',
   initiateDocumentComparison:'发起文档对比',
+  comparativeComments:'对比评论',
+  viewTheComparisonResults:'查看对比结果',
+  addFullTextComment:'添加全文评论',
+  turnOffAutomaticMatching:'关闭自动匹配',
 }

jero-web/src/components/layouts/TabLayout.vue

@@ -97,6 +97,7 @@
           this.$route.path == '/handshakeProcess' ||
           this.$route.path == '/projectStatusAndProgress' ||
           this.$route.path == '/TaskPlanList' ||
+          this.$route.path == '/documentDataComparison' ||
           this.$route.path == '/initiateDocumentComparison' ||
           this.$route.path == '/evaluationProcess' ||
           this.$route.path == '/evaluationResultsClause' ||

jero-web/src/config/router.config.js

@@ -387,6 +387,11 @@ export const constantRouterMap = [
     name: 'initiateDocumentComparison',
     component: () => import(/* webpackChunkName: "user" */ '@/views/documentTools/documentComparison/components/initiateComparison')
   },
+  {
+    path: '/documentDataComparison',
+    name: 'documentDataComparison',
+    component: () => import(/* webpackChunkName: "user" */ '@/views/documentTools/documentComparison/components/documentDataComparison')
+  },
   {
     path: '/handshakeProcess',
     name: 'handshakeProcess',

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

@@ -0,0 +1,385 @@
+<template>
+  <div class="doc-detail">
+    <div class="doc-detail-wrap">
+      <div class="doc-detail-header" style="position: fixed;top: 0">
+        <div class="doc-detail-title">
+             <span style="line-height: 66px;display: inline-block;float: left" @click="Fallback">
+               <a-icon type="arrow-left" style="margin-right: 6px;"/>
+             </span>
+          <span> {{$t('DocumentComparison')}}</span>
+        </div>
+        <div class="doc-detail-right">
+          <div @click="viewTheComparisonResultsClick" class="operator-text-text"
+               :title="$t('viewTheComparisonResults')">
+            <a-icon type="eye"/>
+            {{$t('viewTheComparisonResults')}}
+          </div>
+          <div @click="addFullTextCommentClick" class="operator-text-text"
+               :title="$t('addFullTextComment')">
+            <a-icon type="message"/>
+            {{$t('addFullTextComment')}}
+          </div>
+          <div @click="turnOffAutomaticMatchingClick" class="operator-text-text"
+               :title="$t('turnOffAutomaticMatching')">
+            <a-icon type="close-circle"/>
+            {{$t('turnOffAutomaticMatching')}}
+          </div>
+        </div>
+      </div>
+      <div style="padding-top: 68px;background: #fff">
+        <div class="detail-content">
+          <div style="width: 100%;height: auto;overflow: hidden">
+            <div class="detail-content-left">
+              <div class="detail-content-left-header">
+                GB 23145-2020 机动车标准 FMVSS 114 中文.word
+              </div>
+              <div class="detail-content-content-left">
+                <a-tree
+                  class="draggable-tree"
+                  :tree-data="gData"
+                />
+              </div>
+              <div class="detail-content-content-right">
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="detail-content-right">
+              <div class="detail-content-left-header">
+                <span class="detail-content-left-header-text">
+                   GB 23145-2020 机动车标准 FMVSS 114 中文.word
+                </span>
+                <span class="detail-content-left-header-text-right">
+                    <span style="color: #9B9DA9">相似度:</span>
+                    <span style="color: #E83030">98%</span>
+                 </span>
+              </div>
+              <div class="detail-content-content-left">
+                <a-tree
+                  class="draggable-tree"
+                  :tree-data="gData"
+                />
+              </div>
+              <div class="detail-content-content-right">
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+                <div class="detail-content-content-right-data">
+                  <div class="detail-content-content-right-data-text">
+                    1、范围
+                  </div>
+                  <div class="detail-content-content-right-data-text">
+                    本标准规定了汽车用LED光源/模块或含有LED光源/模块的前照灯配光性能、光色温度循环等试验方法和检验规则等，
+                    本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="Remarks">
+            <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+              <div class="box-title-text-Remarks">
+                <div class="title-text-Remarks" :title="$t('comparativeComments')">
+                  <span>{{$t('comparativeComments')}}</span>
+                </div>
+                <a-form-model-item class="itemModel" prop="dreUserIdName">
+                  <a-textarea :placeholder="$t('pleaseEnter')+$t('comparativeComments')"
+                              v-model="formInline.RemarkInfo"
+                              :rows="4"/>
+                </a-form-model-item>
+              </div>
+            </a-form-model>
+          </div>
+          <div class="submit-button">
+            <a-button class="box-button" type="primary" @click="submit">{{$t('preservation')}}</a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'documentDataComparison',
+    data() {
+      return {
+        formInline: {},
+        rules: {},
+        gData: [
+          {
+            title: '0-0sdf dsfdsfdsfdsfds',
+            key: '0-0',
+            children: [
+              {
+                title: '0-0-0sdfdsfdsfdsfdsfdsfdsf',
+                key: '0-0-0'
+              },
+              {
+                title: '0-0-1',
+                key: '0-0-1'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    methods: {
+      Fallback() {
+        this.$router.push({
+          path: '/documentComparison'
+        })
+      },
+      submit() {
+
+      },
+      viewTheComparisonResultsClick() {
+
+      },
+      addFullTextCommentClick() {
+
+      },
+      turnOffAutomaticMatchingClick() {
+
+      }
+    }
+  }
+</script>
+<style>
+  .detail-content-content-left .ant-tree-node-content-wrapper {
+    display: inline-block !important;
+    color: #040B29 !important;
+    width: 100px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+</style>
+<style lang="less" scoped>
+  @import '~@assets/less/common.less';
+
+  .doc-detail {
+    background: #fff;
+    height: 100%;
+
+    .doc-detail-wrap {
+      .doc-detail-header {
+        width: 100%;
+        z-index: 1000;
+        height: 68px;
+        line-height: 68px;
+        padding: 0 0 0 32px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 2px #eff1f3 solid;
+        background: #fff;
+
+        .doc-detail-title {
+          display: inline-block;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          font-size: 20px;
+          font-weight: 400;
+          color: #040B29;
+          line-height: 68px;
+        }
+      }
+    }
+  }
+
+  .detail-content-left {
+    width: 50%;
+    float: left;
+    height: 620px;
+    overflow-y: auto;
+    border-right: 2px #EFF1F3 solid;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+  }
+
+  .detail-content-right {
+    width: 50%;
+    height: 620px;
+    overflow-y: auto;
+    float: left;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+  }
+
+  .detail-content-left-header {
+    width: 100%;
+    font-size: 16px;
+    font-family: Blue Sky Noto;
+    font-weight: 400;
+    color: #040B29;
+    margin-bottom: 24px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-title-text-Remarks {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+    margin-bottom: 10px;
+  }
+
+  .title-text-Remarks {
+    width: 68px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 6px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .Remarks {
+    margin-top: 20px;
+    width: 50%;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .itemModel {
+    width: calc(100% - 232px);
+  }
+
+  .submit-button {
+    width: 100%;
+    margin-top: 20px;
+    text-align: right;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .detail-content-content-left {
+    width: 140px;
+    height: auto;
+    float: left;
+  }
+
+  .detail-content-content-right {
+    width: calc(100% - 150px);
+    display: inline-block;
+    margin-left: 10px;
+    float: left;
+  }
+
+  .detail-content-content-right-data {
+    padding: 22px 24px;
+    box-sizing: border-box;
+    border: 1px solid #EFF1F3;
+    border-radius: 4px;
+    margin-bottom: 22px;
+  }
+
+  .detail-content-content-right-data:last-child {
+    margin-bottom: 0;
+  }
+
+  .detail-content-content-right-data-text {
+    font-size: 16px;
+    font-weight: 400;
+    color: #040B29;
+    word-break: break-word;
+  }
+
+  .detail-content-left-header-text {
+    width: calc(100% - 200px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    font-size: 16px;
+    font-family: Blue Sky Noto;
+    font-weight: 400;
+    color: #040B29;
+  }
+
+  .detail-content-left-header-text-right {
+    text-align: right;
+    display: inline-block;
+    width: 200px;
+    float: right;
+  }
+
+  .doc-detail-right {
+    width: 600px;
+    line-height: 68px;
+    display: flex;
+
+    .doc-detail-btn {
+      margin-left: 10px;
+    }
+  }
+
+  .operator-text-text {
+    cursor: pointer;
+    margin-right: 53px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+    width: 33.3%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: right;
+  }
+</style>

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

@@ -261,7 +261,7 @@
       },
       initiatingProcessClick(){
         let newUrl = this.$router.resolve({
-          path: '/initiateDocumentComparison',
+          path: '/documentDataComparison',
         })
         window.open(newUrl.href, '_blank')
       },