专利详情优化

RMS-FrontEnd/src/assets/css/activeDiv.scss

@@ -0,0 +1,126 @@
+  /* 拖拽相关样式 */
+    /*包围div样式*/
+    .box {
+        display: flex;
+        justify-content: space-around;
+        width: 100%;
+        height: 100%;
+        margin: 10px 0px;
+        overflow: hidden;
+        box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
+    }
+    /*左侧div样式*/
+    .left {
+        // width: calc(32% - 10px);  
+        height: 100%;
+        background: #FFFFFF;
+        // float: left;
+    }
+    /*拖拽区div样式*/
+    .resize {
+        cursor: col-resize;
+        // float: left;
+        // position: relative;
+        // top: 45%;
+        
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        // padding-top: 25%;
+       
+        background-color: #d6d6d6;
+        /*z-index: 99999;*/
+        font-size: 32px;
+        color: white;
+        div{
+            
+            background-size: cover;
+            background-position: center;
+            border-radius: 5px;
+            width: 10px;
+            height: 50px;
+        }
+    }
+    /*右侧div'样式*/
+    .mid {
+        // float: left;
+        // width: 68%;   
+        height: 100%;
+        background: #fff;
+        box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
+    }
+    .box1{
+        width: 100%;
+        height: 100%;
+        
+    }
+    /*拖拽区div样式*/
+    .resize1 {
+        cursor: col-resize;
+        // position: relative;
+        // top: 45%;
+        // background-color: #d6d6d6;
+        background-color: rgba(50, 50, 50, 0.3);
+        // border-radius: 5px;
+        margin: -10px 5px;
+        width: 10px;
+        // height: 100%;
+        background-size: cover;
+        background-position: center;
+        /*z-index: 99999;*/
+        font-size: 32px;
+        color: white;
+        span{
+            position: relative;
+            top: 45%;
+            border-radius: 5px;
+            background-color: #d6d6d6; 
+            height: 50px;
+            display: flex;
+            flex-direction: column;
+            color: white;
+        }
+        span:hover{
+            color: #444444;
+        }
+    }
+    .resize2 {
+        cursor: row-resize;
+        // position: relative;
+        // top: 45%;
+        // background-color: #d6d6d6;
+        background-color: rgba(50, 50, 50, 0.3);
+        // border-radius: 5px;
+        margin: 5px 0;
+        width: 100%;
+        height: 10px;
+        background-size: cover;
+        background-position: center;
+        /*z-index: 99999;*/
+        font-size: 20px;
+        color: white;
+        p{
+            // position: relative;
+            // top: 45%;
+            margin:0 auto;
+            border-radius: 5px;
+            background-color: #d6d6d6; 
+            width: 50px;
+            height: 10px;
+            // color: white;
+            text-align: center;
+            // display: flex;
+            span{
+                margin-right:5px
+            }
+           
+        }
+        p:hover{
+            color: #444444;
+        }
+    }
+    /*拖拽区鼠标悬停样式*/
+    .resize:hover {
+        color: #444444;
+    }
+    

RMS-FrontEnd/src/utils/directives.js

@@ -12,8 +12,211 @@ const draggable = (el, binding) => {
     startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
 };
  
+const dragControllerDiv=(el, binding)=>{
+  var resize = el.children[1];
+  var left =el.children[0];
+  var mid = el.children[2];
+  var box = el;
+  // if(!resize){
+  //   return false
+  // }
+  resize.onmousedown = function (e) {
+    //颜色改变提醒
+    resize.style.background = '#818181';
+    var startX = e.clientX;
+    resize.left = resize.offsetLeft;
+    // 鼠标拖动事件
+    document.onmousemove = function (e) {
+        var endX = e.clientX;
+        var moveLen = resize.left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+        var maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+
+        if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
+        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
+
+        resize.style.left = moveLen; // 设置左侧区域的宽度
+
+            left.style.width = moveLen + 'px';
+           if(mid){
+            mid.style.width = (box.clientWidth - moveLen - 10) + 'px';
+           }
+        
+    };
+    // 鼠标松开事件
+    document.onmouseup = function (evt) {
+        //颜色恢复
+        resize.style.background = '#d6d6d6';
+        document.onmousemove = null;
+        document.onmouseup = null;
+        resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+    };
+    resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+    return false;
+};
+ 
+};
+const dragControllerDiv1=(el,binding)=>{
+  var resize1 = el.children[2];
+  var resize2 = el.children[1];
+  var left = el.children[0];
+  var mid = el.children[3];
+  var box = el;
+  if(resize2){
+    dragControllerDiv2(el,binding)
+    // return false
+  }
+      // 鼠标按下事件
+      resize1.onmousedown = function (e) {
+        var flex = box.style.flexDirection
+        switch (flex) {
+          case 'row-reverse':
+            resize1.left = mid.offsetWidth;
+              break;
+          case 'row':
+            resize1.left = left.offsetWidth;
+              break;
+          case 'column-reverse':
+              break;
+          case 'column':
+              break;
+          default:
+              break;
+      }
+          //颜色改变提醒
+          resize1.style.background = '#818181';
+          var startX = e.clientX;
+          // resize1.left = resize1.offsetLeft-50;
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+             
+              var endX = e.clientX;
+              var moveLen = resize1.left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+              var maxT = box.clientWidth - resize1.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+
+              if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
+              if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
+
+              // resize1.style.left = moveLen; // 设置左侧区域的宽度
+
+                  switch (flex) {
+                      case 'row-reverse':
+                          mid.style.width = moveLen + 'px';
+                          if(left){
+                           left.style.width = (box.clientWidth - moveLen - 10) + 'px';
+                          }
+                          break;
+                      case 'row':
+                          left.style.width = moveLen + 'px';
+                          if(mid){
+                              mid.style.width = (box.clientWidth - moveLen - 10) + 'px';
+                          }
+                          break;
+                      case 'column-reverse':
+                          
+                          break;
+                      case 'column':
+                          
+                          break;
+                      default:
+                          break;
+                  }
+             
+              
+          };
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+              //颜色恢复
+              resize1.style.background = '#d6d6d6';
+              document.onmousemove = null;
+              document.onmouseup = null;
+              resize1.releaseCapture && resize1.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize1.setCapture && resize1.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        }
+};
+const dragControllerDiv2=(el,binding)=> {
+  var resize1 = el.children[1];
+  // var resize2 = el.children[1];
+  var left = el.children[0];
+  var mid = el.children[3];
+  var box = el
+  var boxClientHeight = box.clientHeight
+  mid.style.width = '100%'
+  left.style.width = '100%'
+      // 鼠标按下事件
+      resize1.onmousedown = function (e) {
+          var flex = box.style.flexDirection
+          switch (flex) {
+              case 'row-reverse':
+                 
+                  break;
+              case 'row':
+                  
+                  break;
+              case 'column-reverse':
+                  resize1.top = mid.offsetHeight;
+                  break;
+              case 'column':
+                  resize1.top = left.offsetHeight;
+                  break;
+              default:
+                  break;
+          }
+          //颜色改变提醒
+          resize1.style.background = '#818181';
+          var startX = e.clientY;
+          // resize1[i].top = resize1[i].offsetTop;
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+              
+              var endX = e.clientY;
+              var moveLen = resize1.top + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+              var maxT = boxClientHeight- resize1.offsetHeight; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+              if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为32px
+              if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
+
+              resize1.style.top = moveLen; // 设置左侧区域的宽度
+                  switch (flex) {
+                      case 'row-reverse':
+                         
+                          break;
+                      case 'row':
+                          
+                          break;
+                      case 'column-reverse':
+                          mid.style.height = moveLen + 10 + 'px';
+                          if(left){
+                              left.style.height = (boxClientHeight - moveLen ) + 'px';
+                          }
+                          break;
+                      case 'column':
+                          left.style.height = moveLen + 10 + 'px';
+                          if(mid){
+                              mid.style.height = (boxClientHeight - moveLen ) + 'px';
+                          }
+                          break;
+                      default:
+                          break;
+                  }
+             
+          };
+          // 鼠标松开事件
+          document.onmouseup = function (evt) {
+              //颜色恢复
+              resize1.style.background = '#d6d6d6';
+              document.onmousemove = null;
+              document.onmouseup = null;
+              resize1.releaseCapture && resize1.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize1.setCapture && resize1.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        }
+};
 const directives = {
     draggable,
+    dragControllerDiv,
+    dragControllerDiv1,
 };
 // 这种写法可以批量注册指令
 export default {

RMS-FrontEnd/src/views/components/articles/ContrastIndex.vue

@@ -37,7 +37,18 @@
             </div>
            
             <div  style="  position: relative;">
-              <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" @click.native="handleSelect(item.value)" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false ">{{ item.label }}</el-link>
+              <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" @click.native="handleSelect(item.value)" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false ">
+              {{ item.label }}
+              <span v-if="item.value == 'PatentImage'|| item.value=='PatentPDF'" @click.stop="ending(item.value)">
+                  <el-popover
+                    placement="right"
+                    width="400"
+                    trigger="click">
+                    <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"  :label="item.value">{{item.label}}</el-radio>
+                    <i class="el-icon-setting" slot="reference"></i>
+                  </el-popover>
+                </span>
+              </el-link>
               <el-link v-for="item in menuList2" :type="activeMenu === item.value ? 'primary' : undefined" @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
               <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top" v-if="showcard==false">
                 <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px;position: absolute; right: 10px; margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight"></i>
@@ -46,8 +57,18 @@
           </div>
         </el-header>
         <el-main class="patent-articles-content" style="padding-left:30px">
-          <div class="patent-articles-content-left" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
-            <component :is="componentName" :type1='type' :isTrue="isTrue" @openContrast='openContrast' :project-id="projectId" :patent="patent" :patent-id="patentId" :signPatentNo="signPatentNo" :patentNo="this.activeMenu == 'patentWorth'?[patentNo]:patentNo" :publicNo="publicNo" :domId="patentNo + '2'" :reportId="reportId" @refresh="getPatent(patent.patentNo)"></component>
+          <div class="patent-articles-content-left1" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
+            <div class="dom1 box1" v-dragControllerDiv1 style="display:flex;width:100%">
+              <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;padding-bottom:10px" :style="{height:height}">
+                <component :is="componentName" :type1='type' :isTrue="isTrue" @openContrast='openContrast' :project-id="projectId" :patent="patent" :patent-id="patentId" :signPatentNo="signPatentNo" :patentNo="this.activeMenu == 'patentWorth'?[patentNo]:patentNo" :publicNo="publicNo" :domId="patentNo + '2'" :reportId="reportId" @refresh="getPatent(patent.patentNo)"></component>
+              </div>
+              <div class="resize2" title="收缩侧边栏" v-show="(radio == 2 || radio == 3) && activeMenu != activeMenu2"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
+              <div class="resize1" title="收缩侧边栏" v-show="(radio == 4 || radio == 5) && activeMenu != activeMenu2"><span>⋮</span></div>
+            <div v-show="radio != 1 && activeMenu != activeMenu2" class="mid1" style="width:450px;height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
+              <component :is="activeMenu2" :project-id="projectId" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
+            </div>
+            </div>
+          
           </div>
           <div class="patent-articles-content-right" v-if="showRight">
             <el-container>
@@ -99,8 +120,10 @@ import Permit from './components/history/permit.vue'
 import ProductManage from '@/views/product/components/product.vue'
 import PatentWorth from './components/history/components/echarts/components/echarts.vue'
 
+import { splitScreen1 } from '../common/SplitScreen'
+
 export default {
-  mixins: [patentKeywordsHighlight, changeTranslation],
+  mixins: [patentKeywordsHighlight, changeTranslation,splitScreen1],
   components: {
     ContrastIndex,
     PatentList,
@@ -385,6 +408,11 @@ export default {
         window.open(router.href, '_blank');
         return false
       }
+      if(index == this.activeMenu2){
+        this.activeMenu2 = ''
+        this.radio = 1
+        this.changePosition(this.radio)
+      }
       this.activeMenu = index
       this.componentName = index
     },
@@ -457,7 +485,7 @@ export default {
     padding: 0;
     height: 100%;
     overflow: hidden;
-    .patent-articles-content-left {
+    .patent-articles-content-left1 {
       float: left;
       height: 100%;
       overflow-y: auto;

RMS-FrontEnd/src/views/components/articles/index.vue

@@ -24,15 +24,15 @@
       <patent-list v-if="taskId" :patent-id="patentId" :project-id="projectId" @on-change="onChange" :taskId="taskId" :location="location1" :state="state" :ban='ban'/>
     </div>       
   </div>
-  <!-- <el-button @click="two">对比</el-button> -->
-  <el-container style=" border: 1px solid #eee" :style="{height:height+'px'}">
-    <el-container v-show="width!='100%'">
-    <el-aside style="margin:0;" width="100%" >
+
+
+  <div class="box" ref="box" v-dragControllerDiv>
+    <div class="left" v-show="width!='100%'" :style="{width:width}"><!--左侧div内容-->
       <contrast-index v-if="signPatentNo" :reportType="reportType" :publicNo="signPatentNo" :signPatentNo="signPatentNo"  @getVisible="getVisible" :type="type" :reportId="reportId" :isTrue="isTrue" @openContrast='openContrast' :taskId="taskId" @patentStatusEmit="patentStatusEmit" :patentStatus2A="patentStatus2A"/>
       <contrast-index v-else :patentMessage="message" :reportType="reportType" :publicNo="pNo" @on-change='changefix' @getVisible="getVisible" :type="type" :reportId="reportId" :isTrue="isTrue" @openContrast='openContrast' :taskId="taskId" @patentStatusEmit="patentStatusEmit" :patentStatus2A="patentStatus2A"/>
-    </el-aside>
-    </el-container>
-    <el-aside :style="{width:width}">
+    </div>
+    <div class="resize" title="收缩侧边栏"   v-show="width!='100%'"><span>⋮</span></div>
+    <div class="mid" :style="{width:width}"><!--右侧div内容-->
       <div class="patent-articles" >
         <el-container v-loading="loading">
           <!-- <el-aside width="250px" class="patent-articles-menu">
@@ -66,8 +66,19 @@
                 </div>
                 </div>
               
-                <div style="  position: relative;">
-                  <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
+                <div style=" position: relative;">
+                  <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">
+                  {{ item.label }}
+                  <span v-if="item.value == 'PatentImage'|| item.value=='PatentPDF'" @click.stop="ending(item.value)">
+                      <el-popover
+                        placement="right"
+                        width="400"
+                        trigger="click">
+                        <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"  :label="item.value">{{item.label}}</el-radio>
+                        <i class="el-icon-setting" slot="reference"></i>
+                      </el-popover>
+                    </span>
+                  </el-link>
                   <el-link v-for="item in menuList2" :type="activeMenu === item.value ? 'primary' : undefined" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
                   <el-tooltip class="item" effect="dark" :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top">
                     <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px;position: absolute; right: 10px; margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight"></i>
@@ -77,7 +88,16 @@
             </el-header>
             <el-main class="patent-articles-content" style="padding-left:30px">
               <div class="patent-articles-content-left" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
-                <component :is="componentName" :reportType="reportType"  @getVisible="getVisible" :project-id="projectId" @isTrues="getIsTrue" :isTrue="isTrue" :type1="type" :patent="patent" :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'" :reportId="reportId" :patent-id="patentId" @openContrast='openContrast' @refresh="getPatent(patent.patentNo)" ></component>
+                <div class="dom box1" v-dragControllerDiv1 style="display:flex;width:100%">
+                  <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;padding-bottom:10px" :style="{height:height}">
+                    <component :is="componentName" :reportType="reportType"  @getVisible="getVisible" :project-id="projectId" @isTrues="getIsTrue" :isTrue="isTrue" :type1="type" :patent="patent" :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'" :reportId="reportId" :patent-id="patentId" @openContrast='openContrast' @refresh="getPatent(patent.patentNo)" ></component>
+                  </div>
+                  <div class="resize2" title="收缩侧边栏"  v-show="(radio == 2 || radio == 3) && activeMenu != activeMenu2"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
+                  <div class="resize1" title="收缩侧边栏"  v-show="(radio == 4 || radio == 5) && activeMenu != activeMenu2"><span>⋮</span></div>
+                  <div v-show="radio != 1 && activeMenu != activeMenu2" class="mid1"  style="width:450px;height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
+                    <component :is="activeMenu2" :project-id="projectId" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
+                  </div>
+                </div>
               </div>
               <div class="patent-articles-content-right" v-if="showRight">
                 <el-container>
@@ -103,10 +123,11 @@
         </el-container>
         <div class="content-main" style="padding-left:40px"></div>
       </div>
-    </el-aside>
+    </div>
+  </div>
 
-   
-  </el-container>
+
+  
 
   <el-dialog title="添加对比" v-draggable :visible.sync="visible" width="1000px" :before-close="close">
     <el-form :model="ruleForm" ref="ruleForm" label-width="100px" label-position="left">
@@ -194,8 +215,10 @@ import Permit from './components/history/permit.vue'
 import ProductManage from '@/views/product/components/product.vue'
 import PatentWorth from './components/history/components/echarts/components/echarts.vue'
 
+import { splitScreen } from '../common/SplitScreen'
+
 export default {
-  mixins: [patentKeywordsHighlight, changeTranslation],
+  mixins: [patentKeywordsHighlight, changeTranslation,splitScreen],
   props:['patentNo','taskId1','location','state'],
   components: {
     ContrastIndex,
@@ -343,14 +366,14 @@ export default {
       // imgList: [],
       file:[],
       patentNo1:this.patentNo,
-      height:null
+      // height:null
     }
   },
   
   created() {
   },
   mounted() {
-    this.height = document.querySelector('.patent-content').offsetHeight>500?document.querySelector('.patent-content').offsetHeight + 90:500
+    // this.height = document.querySelector('.patent-content').offsetHeight>500?document.querySelector('.patent-content').offsetHeight + 90:500
     this.params = this.$s.getSession('params')
     window.selectMark = this.selectMark
     this.signPatentNo = this.$s.getSession('params').signPatentNo
@@ -364,6 +387,9 @@ export default {
     }
     this.getPatent(this.patentNo)
       // console.log(this.reportId);
+      // this.$nextTick(()=>{
+      //       this.$set(this,'height',document.getElementsByClassName('patent-articles-content-left')[1].offsetHeight + 20 + 'px')
+      //    })
   },
   watch:{
     patentNo(val){
@@ -858,6 +884,11 @@ if(index!=-1){
         window.open(router.href, '_blank');
         return false
       }
+      if(index == this.activeMenu2){
+        this.activeMenu2 = ''
+        this.radio = 1
+        this.changePosition(this.radio)
+      }
       this.activeMenu = index
       this.componentName = index
     }
@@ -876,6 +907,7 @@ if(index!=-1){
 }
 </style>
 <style lang="scss">
+@import '@/assets/css/activeDiv.scss';
 .content-main{
   width:80% !important ;
   background-color: skyblue !important;
@@ -948,6 +980,7 @@ if(index!=-1){
 </style>
 
 <style lang="scss" scoped>
+
   .avatar-uploader-icon {
     background-color: #fbfdff;
     border: 1px dashed #c0ccda;

RMS-FrontEnd/src/views/components/common/SplitScreen.js

@@ -0,0 +1,182 @@
+export const splitScreen = {
+    data() {
+        return {
+            radio:1,
+            height:null,
+            positionList:[
+                {
+                    label:'tab展示',
+                    value:1
+                },
+                {
+                    label:'上边展示',
+                    value:2
+                },
+                {
+                    label:'下边展示',
+                    value:3
+                },
+                {
+                    label:'左边展示',
+                    value:4
+                },
+                {
+                    label:'右边展示',
+                    value:5
+                },
+            ],
+            activeMenu2:'',
+        }
+    },
+    watch:{
+        activeMenu2(){
+            this.radio = 1
+            this.changePosition(this.radio)
+          },
+    },
+    mounted() {
+        this.$nextTick(()=>{
+            this.$set(this,'height',document.getElementsByClassName('patent-articles-content-left')[0].offsetHeight +20 + 'px')
+            
+         })
+    },
+    methods: {
+        ending(val){
+            this.activeMenu2 = val
+            return false
+          },
+        //修改附图展示方式
+    changePosition(val){
+        var dom = document.getElementsByClassName('dom')
+        var height = document.getElementsByClassName('patent-articles-content-left')[0].offsetHeight+20
+        // console.log(height)
+        var left1 = document.getElementsByClassName('left1')
+        var mid1 = document.getElementsByClassName('mid1')
+        switch(val){
+          case 1://tab展示
+            dom[0].style.flexDirection = ''
+            this.height = (height) + 'px'
+            this.$nextTick(()=>{
+              left1[0].style.width = '100%'
+            })
+            break;
+          case 2://上边展示
+            dom[0].style.flexDirection = 'column-reverse'
+            this.height = (height - 300) + 'px'
+            this.$nextTick(()=>{
+              mid1[0].style.width = '100%'
+              left1[0].style.width = '100%'
+            })
+            break;
+          case 3://下边展示
+            dom[0].style.flexDirection = 'column'
+            this.height = (height - 400) + 'px'
+            this.$nextTick(()=>{
+              mid1[0].style.width = '100%'
+              left1[0].style.width = '100%'
+            })
+            break;
+          case 4://左边展示
+            dom[0].style.flexDirection = 'row-reverse'
+            this.height = (height) + 'px'
+            break;
+          case 5://右边展示
+            dom[0].style.flexDirection = 'row'
+            this.height = (height) + 'px'
+            break;    
+        }
+      },
+    },
+}
+export const splitScreen1 = {
+    data() {
+        return {
+            radio:1,
+            height:null,
+            positionList:[
+                {
+                    label:'tab展示',
+                    value:1
+                },
+                {
+                    label:'上边展示',
+                    value:2
+                },
+                {
+                    label:'下边展示',
+                    value:3
+                },
+                {
+                    label:'左边展示',
+                    value:4
+                },
+                {
+                    label:'右边展示',
+                    value:5
+                },
+            ],
+            activeMenu2:'',
+        }
+    },
+    watch:{
+        activeMenu2(){
+            this.radio = 1
+            this.changePosition(this.radio)
+          },
+    },
+    mounted() {
+        this.$nextTick(()=>{
+            this.$set(this,'height',document.getElementsByClassName('patent-articles-content-left')[0].offsetHeight+20  + 'px')
+            if(this.height == '20px'){
+                this.$set(this,'height',document.getElementsByClassName('patent-articles-content-left1')[0].offsetHeight+20  + 'px')
+            }
+         })
+    },
+    methods: {
+        ending(val){
+            this.activeMenu2 = val
+            return false
+          },
+        //修改附图展示方式
+        changePosition(val){
+            var dom = document.getElementsByClassName('dom1')
+            var height = document.getElementsByClassName('patent-articles-content-left1')[0].offsetHeight + 20
+            // var left1 = document.getElementsByClassName('left1')
+            // var mid1 = document.getElementsByClassName('mid1')
+            // console.log(left1)
+            switch(val){
+              case 1://tab展示
+                dom[0].style.flexDirection = ''
+                this.height = (height) + 'px'
+                // this.$nextTick(()=>{
+                //   left1[0].style.width = '100%'
+                // })
+                break;
+              case 2://上边展示
+                dom[0].style.flexDirection = 'column-reverse'
+                this.height = (height - 300) + 'px'
+                // this.$nextTick(()=>{
+                //   mid1[0].style.width = '100%'
+                //   left1[0].style.width = '100%'
+                // })
+                break;
+              case 3://下边展示
+                dom[0].style.flexDirection = 'column'
+                this.height = (height - 400) + 'px'
+                // this.$nextTick(()=>{
+                //   mid1[0].style.width = '100%'
+                //   left1[0].style.width = '100%'
+                // })
+                break;
+              case 4://左边展示
+                dom[0].style.flexDirection = 'row-reverse'
+                this.height = (height) + 'px'
+                break;
+              case 5://右边展示
+                dom[0].style.flexDirection = 'row'
+                this.height = (height) + 'px'
+                break;    
+            }
+          },
+    },
+}

RMS-FrontEnd/src/views/report/FTO/FTOPage/FTOContrast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height:100%">
       <Contrast-Product :patentNo="patentNo" :reportId1="reportId" :coordination="coordination" :taskWorkRemak="taskWorkRemak" :taskId1="taskId" :location="location" :state="state" ></Contrast-Product>
   </div>
 </template>

RMS-FrontEnd/src/views/report/FTO/FTOPage/components/ContrasrProduct.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="top:0px;left:0px;">
+  <div style="height:100%">
     <div style="display:flex;justify-content: space-between;align-items: center;">
       <div :style="{visibility: !coordinationA&&!isShow1?'visible':'hidden'}" >
         <el-tooltip class="item" effect="dark" content="返回任务页面" placement="top-start">
@@ -26,11 +26,10 @@
       </div>
     </div>
 
-    <!-- <el-button @click="two">对比</el-button> -->
-    <el-container style=" border: 1px solid #eee">
-      <!-- <el-container :style="{width:width}" > -->
-      <el-aside style="margin:0;" :style="{ width: width , position: 'relative'}" >
-        <el-link type="primary" v-if="reportType == 3 || reportType == 4" @click="changeProduct" style="position: absolute;right: 10px;top: 10px;margin-bottom:10px;z-index: 111;">切换<span>{{ showProduct?'特征信息':'产品信息' }}</span></el-link>
+
+    <div class="box" ref="box" v-dragControllerDiv>
+    <div class="left" :style="{width:width , position: 'relative'}"><!--左侧div内容-->
+      <el-link type="primary" v-if="reportType == 3 || reportType == 4" @click="changeProduct" style="position: absolute;right: 10px;top: 10px;margin-bottom:10px;z-index: 111;">切换<span>{{ showProduct?'特征信息':'产品信息' }}</span></el-link>
         <div v-show="showProduct">
             <Product-Message :reportId="reportId" :row="row" :noEdit="isEdit"></Product-Message>
         </div>
@@ -38,11 +37,10 @@
           <Patent-Features v-if="type == '2'||type=='1' || reportType == 4" :taskId="taskId" :patentNo="patentNo1" :reportId="reportId" :coordination="coordinationA" :FeaturesNumber="FeaturesNumber" :taskWorkRemak="taskWorkRemakA" :type="type" @isRead="isRead" ></Patent-Features>
           <patent-Message v-else :publicNo="patentNo1" :reportId="reportId" :taskId="taskId" @patentStatusEmit="patentStatusEmit" :patentStatus2A="patentStatus2A" :switchValue="switchValue"></patent-Message>
         </div>
-        
-      </el-aside>
-      <!-- </el-container> -->
-      <el-main v-show="width != '100%'" :style="{ width: 'calc(100% - ' + width + ')' ,position: 'relative'}">
-        <el-link type="primary" v-if="reportType == 3 || reportType == 4" @click="changeProduct2" style="position: absolute;right: 10px;top: 10px;margin-bottom:10px;z-index: 111;">切换<span>{{ showProduct2?'标的专利信息':'产品信息' }}</span></el-link>
+    </div>
+    <div class="resize" title="收缩侧边栏"   v-show="width!='100%'"><span>⋮</span></div>
+    <div class="mid" v-show="width!='100%'"  :style="{ width: 'calc(100% - ' + width + ')' ,position: 'relative'}"><!--右侧div内容-->
+      <el-link type="primary" v-if="reportType == 3 || reportType == 4" @click="changeProduct2" style="position: absolute;right: 10px;top: 10px;margin-bottom:10px;z-index: 111;">切换<span>{{ showProduct2?'标的专利信息':'产品信息' }}</span></el-link>
         <div v-show="showProduct2">
             <Product-Message :reportId="reportId" :row="row" :noEdit="isEdit"></Product-Message>
         </div>
@@ -76,7 +74,17 @@
                 <div style="  position: relative;">
                   <el-link v-for="item in menuList" :key="item.value" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show"
                     :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument') : false"
-                    @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
+                    @click.native="handleSelect(item.value)">
+                    {{ item.label }}
+                    <span v-if="item.value == 'PatentImage'|| item.value=='PatentPDF'" @click.stop="ending(item.value)">
+                      <el-popover
+                        placement="right"
+                        width="400"
+                        trigger="click">
+                        <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"  :label="item.value">{{item.label}}</el-radio>
+                        <i class="el-icon-setting" slot="reference"></i>
+                      </el-popover>
+                    </span></el-link>
                   <el-link v-for="item in menuList2" :key="item.value" :type="activeMenu === item.value ? 'primary' : undefined"
                     :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument') : false"
                     @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
@@ -91,9 +99,19 @@
             <el-main class="patent-articles-content" style="padding-left:30px">
               <div class="patent-articles-content-left"
                 :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
-                <!-- @isTrues="getIsTrue"  @openContrast='openContrast' -->
-                <component :is="componentName" :project-id="projectId" :isTrue="isTrue" :type1="type" :patent="patent"
+                <div class="dom box1" v-dragControllerDiv1 style="display:flex;width:100%">
+                  <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;padding-bottom:10px" :style="{height:height}">
+                    <component :is="componentName" :project-id="projectId" :isTrue="isTrue" :type1="type" :patent="patent"
                 :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'" :reportId="reportId" :patent-id="patentId" @refresh="getPatent(patent.patentNo)"></component>
+                  </div>
+                  <div class="resize2" title="收缩侧边栏"  v-show="(radio == 2 || radio == 3) && activeMenu != activeMenu2"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
+                  <div class="resize1" title="收缩侧边栏"  v-show="(radio == 4 || radio == 5) && activeMenu != activeMenu2"><span>⋮</span></div>
+                  <div v-show="radio != 1 && activeMenu != activeMenu2" class="mid1"  style="width:450px;height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
+                    <component :is="activeMenu2" :project-id="projectId" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
+                  </div>
+                </div>
+                <!-- @isTrues="getIsTrue"  @openContrast='openContrast' -->
+                
               </div>
               <div class="patent-articles-content-right" v-if="showRight">
                 <el-container>
@@ -121,8 +139,11 @@
           </el-container>
           <div class="content-main" style="padding-left:40px"></div>
         </div>
-      </el-main>
-    </el-container>
+    </div>
+  </div>
+
+
+
     <sendCollaboration :visibleCollaborations="visibleWork" @collaboration="collaboration" :reportId="reportId" :patentNo1="patentNo1" :reportType="reportType"></sendCollaboration>
     <!-- <el-dialog :visible.sync="dialogVisible">
         <img width="100%" :src="dialogImageUrl" alt="">
@@ -165,8 +186,10 @@ import Permit from '@/views/components/articles/components/history/permit.vue'
 import ProductManage2 from '@/views/product/components/product.vue'
 import PatentWorth from '@/views/components/articles/components/history/components/echarts/components/echarts.vue'
 
+import { splitScreen } from '@/views/components/common/SplitScreen'
+
 export default {
-  mixins: [patentKeywordsHighlight, changeTranslation],
+  mixins: [patentKeywordsHighlight, changeTranslation,splitScreen],
   props: ['patentNo', 'taskId1', 'location', "taskWorkRemak",'state',"reportId1","coordination",'isShow'],
   components: {
     PatentFeatures,
@@ -323,6 +346,10 @@ export default {
       this.value = val
       if (val == true) {
         this.width = '50%'
+        this.$nextTick(()=>{
+            this.$set(this,'height',document.getElementsByClassName('patent-articles-content-left')[0].offsetHeight +20 + 'px')
+            
+         })
       } else {
         this.width = '100%'
       }
@@ -423,6 +450,11 @@ export default {
         window.open(router.href, '_blank');
         return false
       }
+      if(index == this.activeMenu2){
+        this.activeMenu2 = ''
+        this.radio = 1
+        this.changePosition(this.radio)
+      }
       this.activeMenu = index
       this.componentName = index
     },
@@ -570,4 +602,77 @@ export default {
     },
   },
 }
-</script>
+</script>
+
+<style lang="scss">
+@import '@/assets/css/activeDiv.scss';
+.content-main{
+  width:80% !important ;
+  background-color: skyblue !important;
+}
+.patent-articles {
+  width: 100%;
+  height: 100% !important;
+  padding: 0 !important;
+  .patent-articles-menu {
+
+  }
+  .el-menu-item.is-active {
+    background: #ecf5ff !important;
+    color: #409EFF!important;
+  }
+  .patent-articles-title {
+    padding: 0 !important;
+    height: 100px !important;
+    .el-link {
+      margin-right: 20px;
+    }
+    .patent-articles-title-box {
+      font-size: 20px;
+      width: 100%;
+      text-align: center;
+    }
+  }
+  .patent-articles-content {
+    background: #fff;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    .patent-articles-content-left {
+      float: left;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 10px;
+    }
+    .patent-articles-content-right {
+      width: 300px;
+      border-left: 1px solid #e6e6e6;
+      float: right;
+      height: 100%;
+      .el-header {
+        height: 50px !important;
+        position: relative !important;
+      }
+      .el-main {
+        padding: 0 12px !important;
+      }
+      .el-container, .el-main {
+        height: 100%;
+      }
+      .patent-articles-option {
+        position: absolute;
+        bottom: 0;
+        height: 100%;
+        left: 50px;
+        .el-tabs {
+          margin-top: 9px;
+        }
+        .el-tabs__header {
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>

RMS-FrontEnd/src/views/report/FTO/FTOPage/components/PatentFeatures.vue

@@ -134,9 +134,7 @@
               <!-- <div>
                   <el-input type="textarea" style="width:100%" autosize v-model="scope.row.explainText"> {{scope.row.explainText}}</el-input>
               </div> -->
-              <div v-html="scope.row.targetDescription2"  >
-                <!-- {{scope.row.explainText}} -->
-              </div>
+              <div v-html="scope.row.targetDescription2"> </div>
             </template>
           </el-table-column>
           <el-table-column v-if="this.taskWorkRemakA==0" prop="compareResult2" align="center" label="协同比对结果" width="300px">

RMS-FrontEnd/src/views/report/FTO/FTOPage/components/patentMessage.vue

@@ -24,7 +24,18 @@
                 </div>
                
                 <div  style="  position: relative;">
-                    <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
+                    <el-link v-for="item in menuList" :type="activeMenu === item.value ? 'primary' : undefined" v-if="!item.show" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">
+                    {{ item.label }}
+                    <span v-if="item.value == 'PatentImage'|| item.value=='PatentPDF'" @click.stop="ending(item.value)">
+                      <el-popover
+                        placement="right"
+                        width="400"
+                        trigger="click">
+                        <el-radio v-for="(item, index) in positionList" :key="index" v-model="radio" @input="changePosition"  :label="item.value">{{item.label}}</el-radio>
+                        <i class="el-icon-setting" slot="reference"></i>
+                      </el-popover>
+                    </span>
+                    </el-link>
                   <el-link v-for="item in menuList2" :type="activeMenu === item.value ? 'primary' : undefined" :disabled="item.value === 'PatentExport' ? !$permission('/workspace/details/exportDocument'): false " @click.native="handleSelect(item.value)">{{ item.label }}</el-link>
                   <el-tooltip class="item" effect="dark"  :content="(showRight ? '隐藏' : '显示') + '右侧菜单'" placement="top" v-if="showcard==true">
                     <i :class="showRight ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 25px;position: absolute; right: 10px; margin-top: 5px;color: #2f2f2f; cursor: pointer" @click="showRight = !showRight"></i>
@@ -33,9 +44,19 @@
               </div>
             </el-header>
             <el-main class="patent-articles-content" style="padding-left:30px">
-              <div class="patent-articles-content-left" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
+              <div class="patent-articles-content-left1" :style="{ width: showRight ? 'calc(100% - 321px)' : 'calc(100% - 21px)' }">
+                <div class="dom1 box1" v-dragControllerDiv1 style="display:flex;width:100%">
+              <div class="component left1" style="width:100%;overflow-y:auto;overflow-x: hidden;padding-bottom:10px" :style="{height:height}">
                 <component :is="componentName" :project-id="projectId" :patent="patent" :patentNo="[patent.patentNo]" :domId="patent.patentNo + '1'" :reportId="reportId" :patent-id="patentId" @refresh="getPatent(patent.patentNo)"></component>
               </div>
+              <div class="resize2" title="收缩侧边栏" v-show="(radio == 2 || radio == 3) && activeMenu != activeMenu2"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
+              <div class="resize1" title="收缩侧边栏" v-show="(radio == 4 || radio == 5) && activeMenu != activeMenu2"><span>⋮</span></div>
+            <div v-show="radio != 1 && activeMenu != activeMenu2" class="mid1" style="width:450px;height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
+              <component :is="activeMenu2" :project-id="projectId" :patent="patent" :patent-id="patentId" :pdfType1="(patent.pdf && patent.pdf.length>0)?patent.pdf[0].type:2" :sign="true"></component>
+            </div>
+            </div>
+                
+              </div>
               <div class="patent-articles-content-right" v-if="showRight">
                 <el-container>
                   <el-header v-if="showcard==true">
@@ -62,10 +83,6 @@
       </div>
       
     
-    
-     
-      
-    
 </template>
     
 <script>
@@ -96,8 +113,10 @@ import Features from '@/views/components/articles/components/features.vue'
 import Permit from '@/views/components/articles/components/history/permit.vue'
 import ProductManage from '@/views/product/components/product.vue'
 import PatentWorth from '@/views/components/articles/components/history/components/echarts/components/echarts.vue'
+
+import { splitScreen1 } from '@/views/components/common/SplitScreen'
     export default {
-      mixins: [patentKeywordsHighlight, changeTranslation],
+      mixins: [patentKeywordsHighlight, changeTranslation,splitScreen1],
       components: {
             PatentMessage,
             PatentList,
@@ -298,6 +317,11 @@ import PatentWorth from '@/views/components/articles/components/history/componen
         window.open(router.href, '_blank');
         return false
       }
+      if(index == this.activeMenu2){
+        this.activeMenu2 = ''
+        this.radio = 1
+        this.changePosition(this.radio)
+      }
       this.activeMenu = index
       this.componentName = index
     },