update 文档对比

src/views/documentTool/documentComparison/DocumentDataComparison.vue

@@ -36,19 +36,36 @@
     <div class="can-scroll-content">
       <div class="detail-content">
         <div class="detail-content-left">
-          <div class="detail-content-left-header"
+          <div class="standard-catalogue part-common" :class="{'hide-catalogue': !leftCatalogueShow}">
-               :title="resultData.serialNumberLeft + resultData.fileNameLeft">
+            <div class="catalogue-show" @click="changeLeftCatalogueShow">
-            {{ this.resultData.serialNumberLeft }}&nbsp;
+              <a-icon :type="leftCatalogueShow ? 'left' : 'right'" />
-            {{ this.resultData.fileNameLeft }}
+            </div>
-          </div>
+            <div class="part-title" v-show="leftCatalogueShow">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
-          <div class="detail-content-content-left">
+            <div class="has-title-part-content" v-show="leftCatalogueShow">
-            <a-tree
+              <a-tree
-              class="draggable-tree"
+                class="draggable-tree"
-              @select="onSelectLeft"
+                :selected-keys="leftTreeSelectedKeys"
-              :tree-data="resultData.menuLeft"
+                :replace-fields="{key: 'menuId'}"
-            />
+                @select="onSelectLeft"
+                :tree-data="resultData.menuLeft">
+                <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
+                <template slot="title" slot-scope="{title}">
+                  <!-- 目录前三个和有子集的标题加粗 -->
+                  <span :style="title.indexOf('.')===-1?'font-weight: 600;':''">{{ title }}</span>
+                </template>
+              </a-tree>
+            </div>
           </div>
           <div class="detail-content-content-right-top">
+            <!--标准名称-->
+            <div class="standard-name">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ resultData.serialNumberLeft }} {{ resultData.fileNameLeft }}
+                </template>
+                <span>{{ resultData.serialNumberLeft }} {{ resultData.fileNameLeft }}</span>
+              </a-tooltip>
+            </div>
             <div class="detail-content-content-right">
               <div class="detail-content-content-right-data" @click="detailLeft(index,item)"
                    v-for="(item,index) in resultData.textLeft" :key="index"
@@ -62,25 +79,36 @@
           </div>
         </div>
         <div class="detail-content-right">
-          <div class="detail-content-left-header">
+          <div class="standard-catalogue part-common" :class="{'hide-catalogue': !rightCatalogueShow}">
-                <span class="detail-content-left-header-text"
+            <div class="catalogue-show" @click="changeRightCatalogueShow">
-                      :title="resultData.serialNumberRight + resultData.fileNameRight">
+              <a-icon :type="rightCatalogueShow ? 'left' : 'right'" />
-                   {{ this.resultData.serialNumberRight }}&nbsp;
+            </div>
-                   {{ this.resultData.fileNameRight }}
+            <div class="part-title" v-show="rightCatalogueShow">{{ $t('standardRegulationLibrary.standardCatalogue') }}</div>
-                </span>
+            <div class="has-title-part-content" v-show="rightCatalogueShow">
-            <!--                <span class="detail-content-left-header-text-right">-->
+              <a-tree
-            <!--                    <span style="color: #9B9DA9">相似度:</span>-->
+                class="draggable-tree"
-            <!--                    <span style="color: #E83030">98%</span>-->
+                :selected-keys="rightTreeSelectedKeys"
-            <!--                 </span>-->
+                :replace-fields="{key: 'menuId'}"
-          </div>
+                @select="onSelectRight"
-          <div class="detail-content-content-left">
+                :tree-data="resultData.menuRight">
-            <a-tree
+                <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
-              class="draggable-tree"
+                <template slot="title" slot-scope="{title}">
-              @select="onSelectRight"
+                  <!-- 目录前三个和有子集的标题加粗 -->
-              :tree-data="resultData.menuRight"
+                  <span :style="title.indexOf('.')===-1?'font-weight: 600;':''">{{ title }}</span>
-            />
+                </template>
+              </a-tree>
+            </div>
           </div>
           <div class="detail-content-content-right-right-top">
+            <!--标准名称-->
+            <div class="standard-name">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ resultData.serialNumberRight }} {{ resultData.fileNameRight }}
+                </template>
+                <span>{{ resultData.serialNumberRight }} {{ resultData.fileNameRight }}</span>
+              </a-tooltip>
+            </div>
             <div class="detail-content-content-right-right">
               <div class="detail-content-content-right-data-right" @click="detailRight(index,item)"
                    v-for="(item,index) in resultData.textRight" :key="index"
@@ -149,7 +177,11 @@ export default {
       isMatching: true, // 自动匹配是否开启
       dataLeft: {},
       dataRight: {},
-      pageFrom: null
+      pageFrom: null,
+      leftCatalogueShow: true, // 左侧的标准目录是否展示
+      rightCatalogueShow: true, // 右侧的标准目录是否展示
+      leftTreeSelectedKeys: [], // 左侧被选中树节点
+      rightTreeSelectedKeys: [] // 右侧被选中树节点
     }
   },
   mounted () {
@@ -298,6 +330,7 @@ export default {
     },
     // 点击左侧文档内容
     detailLeft (num, item) {
+      this.leftTreeSelectedKeys = [item.menuId]
       const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
       if (detailLeftColor && detailLeftColor.length > 0) {
         detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
@@ -332,6 +365,7 @@ export default {
     },
     // 点击右侧文档内容
     detailRight (num, item) {
+      this.rightTreeSelectedKeys = [item.menuId]
       const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
       if (detailRightColor && detailRightColor.length > 0) {
         detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
@@ -385,38 +419,134 @@ export default {
     onSelectLeft (selectedKeys, exports) {
       const node = exports.node.$vnode.data.props.dataRef
       const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
-      const detailContent = document.getElementsByClassName('detail-content-content-right-top')
+      const detailLeftContent = document.getElementsByClassName('detail-content-content-right')[0]
-      if (!node.parentId) {
+      let dataItem, num
-        detailContent[0].scrollTop = 0
+      for (let i = 0; i < this.resultData.textLeft.length; i++) {
+        if (node.menuId === this.resultData.textLeft[i].menuId) {
+          dataItem = this.resultData.textLeft[i]
+          num = i
+          detailLeftContent.scrollTop = detailLeft[i].offsetTop - 150
+          break
+        }
+      }
+      // 处理数据框选
+      const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
+      if (detailLeftColor && detailLeftColor.length > 0) {
+        detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
+      }
+      if (dataItem.id === this.dataLeft.id && !this.isMatching) {
+        this.dataLeft = {}
         return
       }
-      for (let i = 0; i < this.resultData.textLeft.length; i++) {
+      if (detailLeft && detailLeft.length > 0) {
-        if (node.parentId && node.menuId === this.resultData.textLeft[i].menuId) {
+        detailLeft[num].classList.add('detail-content-content-right-data-color')
-          detailContent[0].scrollTop = detailLeft[i].offsetTop - 150
+      }
+      this.dataLeft = dataItem
+      this.dataLeft.numIndex = num
+      // 处理选中右侧树
+      if (this.isMatching) {
+        const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
+        const detailRightContent = document.getElementsByClassName('detail-content-content-right-right')[0]
+        let rightDataItem, rightNum
+        for (let i = 0; i < this.resultData.textRight.length; i++) {
+          if (node.menuId === this.resultData.textRight[i].menuId) {
+            rightDataItem = this.resultData.textLeft[i]
+            rightNum = i
+            detailRightContent.scrollTop = detailRight[i].offsetTop - 150
+            break
+          }
+        }
+        // 处理选中右侧数据
+        if (!rightDataItem) {
           return
         }
+        const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
+        if (detailRightColor && detailRightColor.length > 0) {
+          detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
+        }
+        if (rightDataItem.id === this.dataRight.id && !this.isMatching) {
+          this.dataRight = {}
+          return
+        }
+        if (detailRight && detailRight.length > 0) {
+          detailRight[rightNum].classList.add('detail-content-content-right-data-color-right')
+        }
+        this.dataRight = rightDataItem
+        this.dataRight.numIndex = rightNum
       }
     },
     // 右侧树选中
     onSelectRight (selectedKeys, exports) {
       const node = exports.node.$vnode.data.props.dataRef
       const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
-      const detailContent = document.getElementsByClassName('detail-content-content-right-right-top')
+      const detailRightContent = document.getElementsByClassName('detail-content-content-right-right')[0]
-      if (!node.parentId) {
+      let rightDataItem, rightNum
-        detailContent[0].scrollTop = 0
+      for (let i = 0; i < this.resultData.textRight.length; i++) {
+        if (node.menuId === this.resultData.textRight[i].menuId) {
+          rightDataItem = this.resultData.textLeft[i]
+          rightNum = i
+          detailRightContent.scrollTop = detailRight[i].offsetTop - 150
+          break
+        }
+      }
+      // 处理选中右侧数据
+      if (!rightDataItem) {
         return
       }
-      for (let i = 0; i < this.resultData.textRight.length; i++) {
+      const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-        if (node.parentId && node.menuId === this.resultData.textRight[i].menuId) {
+      if (detailRightColor && detailRightColor.length > 0) {
-          detailContent[0].scrollTop = detailRight[i].offsetTop - 150
+        detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
+      }
+      if (rightDataItem.id === this.dataRight.id && !this.isMatching) {
+        this.dataRight = {}
+        return
+      }
+      if (detailRight && detailRight.length > 0) {
+        detailRight[rightNum].classList.add('detail-content-content-right-data-color-right')
+      }
+      this.dataRight = rightDataItem
+      this.dataRight.numIndex = rightNum
+      if (this.isMatching) {
+        const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
+        const detailLeftContent = document.getElementsByClassName('detail-content-content-right')[0]
+        let dataItem, num
+        for (let i = 0; i < this.resultData.textLeft.length; i++) {
+          if (node.menuId === this.resultData.textLeft[i].menuId) {
+            dataItem = this.resultData.textLeft[i]
+            num = i
+            detailLeftContent.scrollTop = detailLeft[i].offsetTop - 150
+            break
+          }
+        }
+        // 处理数据框选
+        if (!dataItem) {
           return
         }
+        const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
+        if (detailLeftColor && detailLeftColor.length > 0) {
+          detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
+        }
+        if (dataItem.id === this.dataLeft.id && !this.isMatching) {
+          this.dataLeft = {}
+          return
+        }
+        if (detailLeft && detailLeft.length > 0) {
+          detailLeft[num].classList.add('detail-content-content-right-data-color')
+        }
+        this.dataLeft = dataItem
+        this.dataLeft.numIndex = num
       }
     },
     handleBack () {
       this.$router.push({
         path: '/documentTool/documentComparison'
       })
+    },
+    changeLeftCatalogueShow () {
+      this.leftCatalogueShow = !this.leftCatalogueShow
+    },
+    changeRightCatalogueShow () {
+      this.rightCatalogueShow = !this.rightCatalogueShow
     }
   }
 }
@@ -469,6 +599,7 @@ export default {
 
 .detail-content {
   height: calc(100% - 131px);
+  background-color: #eff1f4;
 }
 
 .detail-content-left {
@@ -476,18 +607,18 @@ export default {
   float: left;
   height: 100%;
   border-right: 2px #EFF1F3 solid;
-  padding: 24px 32px;
   box-sizing: border-box;
   border-bottom: 2px #EFF1F3 solid;
+  display: flex;
 }
 
 .detail-content-right {
   width: 50%;
   height: 100%;
   float: left;
-  padding: 24px 32px;
   box-sizing: border-box;
   border-bottom: 2px #EFF1F3 solid;
+  display: flex;
 }
 
 .detail-content-left-header {
@@ -558,46 +689,58 @@ export default {
 }
 
 .detail-content-content-right-top {
-  height: calc(100% - 48px);
+  height: 100%;
   overflow-y: auto;
   transition: all 1s;
   scroll-behavior: smooth;
 }
 
 .detail-content-content-right-right-top {
-  height: calc(100% - 48px);
+  height: 100%;
   overflow-y: auto;
   transition: all 1s;
   scroll-behavior: smooth;
+
+  .standard-name {
+    margin-right: 0;
+  }
+
+  .detail-content-content-right-right {
+    margin-right: 0;
+    width: calc(100% - 10px);
+  }
 }
 
 .detail-content-content-right {
-  width: 100%;
+  height: calc(100% - 25px - 40px);
+  width: calc(100% - 20px);
   display: inline-block;
-
+  margin: 0 10px 0 10px;
+  overflow: auto;
 }
 
 .detail-content-content-right-right {
-  width: 100%;
+  height: calc(100% - 25px - 40px);
+  width: calc(100% - 20px);
   display: inline-block;
+  margin: 0 10px 0 10px;
+  overflow: auto;
 }
 
 .detail-content-content-right-data {
-  padding: 22px 24px;
+  padding: 16px 20px;
   box-sizing: border-box;
   border: 1px solid #EFF1F3;
-  border-radius: 4px;
-  margin-bottom: 22px;
   cursor: pointer;
+  background-color: white;
 }
 
 .detail-content-content-right-data-right {
-  padding: 22px 24px;
+  padding: 16px 20px;
   box-sizing: border-box;
   border: 1px solid #EFF1F3;
-  border-radius: 4px;
-  margin-bottom: 22px;
   cursor: pointer;
+  background-color: white;
 }
 
 .detail-content-content-right-data:last-child {
@@ -663,11 +806,11 @@ export default {
 }
 
 .detail-content-content-right-data-color {
-  border: 1px red solid;
+  border: 2px red solid;
 }
 
 .detail-content-content-right-data-color-right {
-  border: 1px red solid;
+  border: 2px red solid;
 }
 
 ::v-deep .delClass {
@@ -679,4 +822,97 @@ export default {
   background: rgba(85, 183, 255, .6);
   font-weight: 700;
 }
+
+/deep/ .ant-tree li span.ant-tree-switcher {
+  float: right;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+.part-common {
+  border-radius: 8px;
+  background: #FFFFFF;
+}
+
+.standard-catalogue {
+  height: calc(100% - 20px);
+  width: 15%;
+  min-width: 200px;
+  margin: 10px 10px 10px 0;
+  position: relative;
+
+  /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: transparent !important;
+    color: @primary-color;
+  }
+
+  .catalogue-show {
+    position: absolute;
+    width: 12px;
+    height: 24px;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: @primary-color;
+    border-radius: 0 12px 12px 0;
+    cursor: pointer;
+    color: white;
+
+    .anticon {
+      left: -2px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.hide-catalogue {
+  width: 0;
+  min-width: 0;
+}
+
+.part-title {
+  height: 40px;
+  background: rgba(213, 44, 38, 0.12);
+  border-radius: 8px 8px 0 0;
+  line-height: 40px;
+  padding: 0 24px;
+  font-size: 16px;
+  font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+  font-weight: 600;
+  color: #1D2129;
+}
+
+.has-title-part-content {
+  height: calc(100% - 40px);
+  overflow: auto;
+  padding: 0 20px;
+}
+
+.standard-name {
+  margin: 10px 10px 5px 10px;
+  height: 40px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+}
+
+.standard-name > span {
+  font-size: 16px;
+  font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+  font-weight: 600;
+  color: #1D2129;
+  flex: 1;
+  width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
 </style>