专利详情菜单及双视图

src/utils/model/myView/index.vue

@@ -46,6 +46,9 @@
     methods: {
       // 窗口缩放，内容等比例缩放
       EventListener() {
+        if(!this.showView){
+          return
+        }
         var dom = this.$refs.myView
           let len = dom.childNodes.length
           for (var i = 0; i < len; i++) {
@@ -70,6 +73,9 @@
         var display = this.showView?'block':'none'
         if(!this.showView){
             dom.childNodes[0].style.width = '100%'
+        }else{
+          dom.childNodes[0].style.width = '100%'
+          dom.childNodes[2].style.width = '100%'
         }
         dom.style.setProperty('--displays',`${display}`)
       },
@@ -205,7 +211,7 @@
     }
     &>:last-child{
         display: var(--displays) !important;
-        color: red !important;
+        // color: red !important;
     }
     &>*{
       overflow: auto;

src/views/project/patentDetails/components/menu.vue

@@ -12,7 +12,7 @@
               <el-button size="small" @click="goBack()"><i class="iconfont icon-fanhui"></i></el-button>
             </el-tooltip>
             <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="top">
-              <el-button size="small" class="articles-Loop" @click="isRight = !isRight">
+              <el-button size="small" class="articles-Loop" @click="setting">
                 <i class="iconfont icon-shezhi2"></i>
               </el-button>
             </el-tooltip>
@@ -48,7 +48,7 @@
           </div>
         </el-tooltip>
         <el-tooltip :content="isRight ? '设置菜单栏为左侧' : '设置菜单栏为右侧'" placement="right-end">
-          <div class="articles-Loop" @click="isRight = !isRight">
+          <div class="articles-Loop" @click="setting">
             <i class="iconfont icon-shezhi2"></i>
           </div>
         </el-tooltip>
@@ -74,7 +74,7 @@
         <el-tooltip placement="right-end">
           <template slot="content">
             <div>点击查看上一篇专利</div>
-            <div>专利：{{currentLocation - 1!=0? patentList[index-1].patentNo:''}}</div>
+            <div>专利：{{index!=0? patentList[index-1].patentNo:''}}</div>
             <div>数量：{{currentLocation - 1}}</div>
           </template>
           <div class="articles-Loop" @click="prev">
@@ -84,7 +84,7 @@
         <el-tooltip placement="right-end">
           <template slot="content">
             <div>点击查看下一篇专利</div>
-            <div>专利：{{total - currentLocation!=0? patentList[index+1].patentNo:''}}</div>
+            <div>专利：{{(total - currentLocation!=0 && total!=0)? patentList[index+1].patentNo:''}}</div>
             <div>数量：{{total - currentLocation}}</div>
           </template>
           <div class="articles-Loop" @click="next">
@@ -115,12 +115,18 @@ export default {
     },
     patentNo:{
       default:''
+    },
+    //是否在右侧
+    isRight:{
+      default:false
+    },
+    //对比
+    value:{
+      default:false
     }
   },
   data() {
     return {
-        value:false,//对比
-        isRight:false,//是否在右侧
         isContract:true,//是否收缩
         queryParams:{
             current:1,
@@ -195,11 +201,13 @@ export default {
         this.getPatentList()
     },
     goBack(){
-
+      this.$emit('event','goBack')
     },
     contrast(){
-      this.value = !this.value
-      this.$emit('contrast',this.value)
+      this.$emit('event','contrast')
+    },
+    setting(){
+      this.$emit('event','setting')
     },
     //上一篇
     prev(){
@@ -225,6 +233,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .article_menu{
+  border-right:1px solid #e6e6e6;
+  border-left:1px solid #e6e6e6;
 .articles-Loop-div {
     width: 51px;
     height: 100%;

src/views/project/patentDetails/components/patentDetails.vue

@@ -5,11 +5,15 @@
         <div style="width:100%">
           <div style="display: flex;justify-content: space-between;align-items: center;height:50px">
             <div style="text-align: start;padding-left: 10px;position: relative;">
-              <div style="width: 260px;">
-                <img src="@/assets/visual/fixed.png" width="20px" height="20px" v-if="fix === true && value == true"
-                  @click="qx" style="" />
-                <img src="@/assets/visual/unfixed.png" width="20px" height="20px" v-if="fix === false && value == true"
-                  @click="gd" style="" />
+              <!-- <div style="width: 260px;"> -->
+                <img src="@/assets/visual/fixed.png" width="20px" height="20px" v-if="fix === true && value == true" @click="qx" style="" />
+                <img src="@/assets/visual/unfixed.png" width="20px" height="20px" v-if="fix === false && value == true"  @click="gd" style="" />
+                
+              <!-- </div> -->
+             
+            </div>
+            <div>
+              <div>
                 <span v-html="getViewDom(patent.patentNo)"></span>
                 <el-tag type="primary" effect="dark" size="mini" class="margin-left_10" v-if="patent.simpleStatus">{{
                   patent.simpleStatus }}</el-tag>

src/views/project/patentDetails/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="height_100 article">
-    <articleMenu @contrast="contrast" :projectId="projectId" :searchOption="search.searchOption" :patentNo="patentNo" :location="search.location" @getPatentLeft="getPatentLeft" ></articleMenu>
+  <div class="height_100 article" :style="{'flex-direction':isRight?'row-reverse':'row'}">
+    <articleMenu @event="event" :value="showView" :isRight="isRight" :projectId="projectId" :searchOption="search.searchOption" :patentNo="patentNo" :location="search.location" @getPatentLeft="getPatentLeft" ></articleMenu>
     <div class="height_100 content">
-        <my-View :showView="showView">
+        <my-View :showView="showView" >
             <div slot="left" style="width:100%">
               <Patent-Details :patentNo="patentNo" :projectId="projectId" :taskId="taskId"></Patent-Details>
             </div>
@@ -27,6 +27,7 @@ export default {
   data() {
     return {
       showView:false,
+      isRight:false,
       patentNo:this.$route.params.patentNo
     };
   },
@@ -46,8 +47,17 @@ export default {
   created() {},
   mounted() {},
   methods: {
-    contrast(val){
-      this.showView = val
+    event(val){
+      this[val]()
+    },
+    contrast(){
+      this.showView = !this.showView
+    },
+    setting(){
+      this.isRight = !this.isRight
+    },
+    goBack(){
+
     },
     getPatentLeft(val) {
       this.patentNo=val
@@ -66,6 +76,7 @@ export default {
 <style lang="scss" scoped>
 .article{
     display: flex;
+    
     .content{
       width:100%
     }