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

 
<template>

<div class="patent-articles" >
    <el-container v-loading="loading">
      <!-- <el-aside width="250px" class="patent-articles-menu">
        <el-container>
          <el-header style="height: 180px;">
            <patent-list :patent-id="patentId" :project-id="projectId" @on-change="onChange" />
          </el-header>
          <el-main>
            <patent-image v-if="patent.image" :project-id="projectId" :patent="patent" :patent-id="patentId" @refresh="getPatent(patentId)"></patent-image>
          </el-main>
        </el-container>
      </el-aside> -->
      <el-container >
        <el-header class="patent-articles-title">
          <div class="patent-articles-title-box">
            <div style="position:relative">
              <img src="@/assets/visual/fixed.png" width="20px" height="20px" v-if="fix===true && !showEvidence" @click="qx" style="position:absolute;top:5px;left:5px"/>
              <img src="@/assets/visual/unfixed.png" width="20px" height="20px" v-if="fix===false && !showEvidence"  @click="gd" style="position:absolute;top:5px;left:5px"/>
              <!-- <div>
                 <patent-list :patent-id="patentId" :project-id="projectId" @on-change="onChange" />
              </div> -->
               <div>
              <span v-html="getViewDom(patent.publicNo)"></span>
              <el-tag type="primary" effect="dark" size="mini" class="margin-left_10">{{ patent.simpleStatus }}</el-tag>
              <el-tag v-if="taskId" :type="patentStatus2=='0'?'info':'primary'" effect="dark" size="mini" class="margin-left_10" style="cursor: pointer" @click="changeStatus(patentStatus2)">{{ patentStatus[patentStatus2] }}</el-tag>
            </div>
            <div style="color: #6b6868; font-size: 15px;border-bottom: 1px solid #e6e6e6;padding-bottom: 5px;">
              <span v-html="getViewDom2(patent, 'name')"></span>
              <el-link type="primary" @click.native="handleChange(patent, 'name')" style="margin-left: 10px;margin-top: -3px;">
                <span v-if="!patent.change">切换译文</span>
                <span v-else>切换原文</span>
              </el-link>
            </div>
              <div style="position: absolute;right: 0;top:0;">
                <PatentMark :patentNo="patent.patentNo" @biaozhu="getBiaoZhu"></PatentMark>
              </div>
            </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 }}
              <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>
              </el-tooltip>
            </div>
          </div>
        </el-header>
        <el-main class="patent-articles-content" style="padding-left:30px">
          <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" v-bind="$attrs" :type1='type' :isTrue="isTrue" @openContrast='openContrast'  :project-id="projectId" :patent="patent" :patent-id="patentId" :signPatentNo="signPatentNo" :patentNo="this.activeMenu == 'patentWorth'?[patentNo?patentNo:productPublicNo]: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="{height:(radio == 4 || radio == 5)?height:'280px'}"  style="width:450px;height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
              <component :is="activeMenu2" v-bind="$attrs" :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==false">
                <div class="patent-articles-option">
                  <el-tabs v-model="activeOption" type="card">
                    <el-tab-pane label="标引" name="PatentField"></el-tab-pane>
                    <!-- <el-tab-pane label="高亮" name="PatentKeywordsHighlight"></el-tab-pane> -->
                    <!-- <el-tab-pane label="注释" name="PatentAnnotation" :disabled="!($permission('/workspace/details/notes') && $r(projectId,[1,2]))"></el-tab-pane> -->
                  </el-tabs>
                </div>
              </el-header>
              <el-main>
                <keep-alive>
                  <component :is="activeOption" :project-id="projectId" :patent-id="patentId" :publicNo="publicNo" :reportId="reportId" :patentNo1="patentNo"></component>
                    <component :is="activeOption" :project-id="projectId" :patent-id="patentId" :publicNo="publicNo" :reportId="reportId" :patentNo1="patentNo"></component>
                </keep-alive>
              </el-main>
            </el-container>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <div class="content-main" style="padding-left:40px"></div>
  </div>
</template>
<script>
import { changeTranslation, patentKeywordsHighlight } from '../common/mixins'
import PatentList from './components/PatentList'
import PatentField from './components/PatentField'
import PatentAnnotation from './components/PatentAnnotation'
import PatentBasic from "./components/PatentBasic"
import PatentPDF from "./components/PatentPDF"
import PatentImage from "./components/PatentImage"
import PatentRight from "./components/PatentRight"
import PatentInstruction from "./components/PatentInstruction"
import PatentFamily from "./components/PatentFamily"
import PatentStatus from "./components/PatentStatus"
import PatentKeywordsHighlight from '../common/PatentKeywordsHighlight.vue'
import ContrastIndex from './ContrastIndex'
import Examination from './components/history/examination.vue'
import File from './components/history/file.vue'
import Invalid from './components/history/invalid.vue'
import Litigation from './components/history/litigation.vue'
import Other from './components/history/other.vue'
import { getPatentCountry } from "@/utils";

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'

import PatentMark from './components/PatentMark.vue'
export default {
  mixins: [patentKeywordsHighlight, changeTranslation,splitScreen1],
  components: {
    ContrastIndex,
    PatentList,
    PatentField,
    PatentAnnotation,
    PatentKeywordsHighlight,
    PatentBasic,
    PatentPDF,
    PatentImage,
    PatentRight,
    PatentFamily,
    PatentStatus,
    PatentInstruction,
    Examination,
    File,
    Invalid,
    Litigation,
    Other,
    Permit,
    ProductManage,
    PatentWorth,
    PatentMark
  },
  props:['patentMessage','publicNo','signPatentNo','reportId','type','isTrue',"taskId","patentStatus2A",'showEvidence'],
  // props: {
  //   'patentMessage':String,
  //   'publicNo':String,
  //   'signPatentNo':String,
  //   'reportId':{
  //     default:null
  //   },
   
  // },
  data() {
    return {
      // visible2:false,
      patentStatus:{
        '0':'未读',
        '1':'已读'
      },
      patentStatus2:'',
      showcard: true,
      fix: false,
      showRight: false,
      patentId: parseInt(this.$route.params.id || 0),
      projectId: parseInt(this.$route.query.id || 0),
      patent: {},
      activeMenu: 'PatentBasic',
      componentName: 'PatentBasic',
      activeOption: 'PatentField',
      loading: false,
      patentNo:"",
      productPublicNo:"",
      menuList: [
        {
          value: 'PatentBasic',
          label: '基础信息'
        },
        {
          value: 'PatentRight',
          label: '权利要求'
        },
        {
          value: 'PatentImage',
          label: '附图'
        },
        {
          value: 'PatentInstruction',
          label: '说明书文本'
        },
        {
          value: 'PatentFamily',
          label: '同族专利'
        },
        {
          value: 'PatentStatus',
          label: '法律状态'
        },
        {
          value: 'PatentPDF',
          label: '说明书'
        },
        // {
        //   value: 'PatentExport',
        //   label: '导出文档'
        // },
        {
          value:'Permit',
          show:this.$permission('/rms/patent/worth')?false:true,
          label:'许可历史'
        },
        {
          value:'ProductManage',
          show:this.$permission('/rms/product')?false:true,
          label:'商品化'
        },
        {
          value:'patentWorth',
          show:this.$permission('/rms/patent/worth')?false:true,
          label:'价值曲线'
        }
      ],
      menuList2: [
        {
          value: 'Examination',
          label: '审查历史'
        },
        // {
        //   value: 'File',
        //   label: '申请案卷'
        // },
        {
          value: 'Invalid',
          label: '无效记录'
        },
        {
          value: 'Litigation',
          label: '诉讼历史'
        },
        {
          value: 'Other',
          label: '其他参考资料'
        },
      ],
      
    }
  },
  created() {
    this.patentNo = this.$route.query.patentNo
    // productPublicNo接收产品相关专利的专利号
    this.productPublicNo = this.$route.query.publicNo
    // console.log(this.patentMessage)
    // this.onChange(this.patentMessage)
  },
  watch: {
   
    publicNo(val) {
      // console.log(val);
      if (this.fix != true) {
          this.getPatent(val)
        }
    },
    patentMessage(val, oldval) {
      if (val) {
        this.patentId = val
        // console.log(val,oldval)
        if (val == oldval || this.fix == false) {
          this.showcard = false
        }
        if (val != oldval) {
          this.showcard = true
        }

        if (this.fix != true) {
          this.getPatent(val)
        }

      }
    },
    fix(val) {
      this.$emit('on-change', val)
    },
    // visible2(val){
    //   if(val){
    //     this.$emit('getVisible',true)
    //     this.visible2 = false
    //   }
    // },
    patentStatus2(val) {
      let value = {
        patentNo: this.publicNo,
        patentStatus2:this.patentStatus2
      }
      this.$emit("patentStatusEmit",value)
    },
    patentStatus2A(val) {
      if (this.publicNo==val.patentNo) {
        this.patentStatus2=val.patentStatus2
      }
    }
  },
  mounted() {
    if(this.publicNo || this.productPublicNo){
      let publicNo=this.publicNo?this.publicNo:this.productPublicNo
      this.getPatent(publicNo)
    }
    // if(this.signPatentNo){
    //   console.log(this.signPatentNo)
    //   this.getContrastList()
    // }
    
  },
  methods: {
     //获取需要跳转的批注
     getBiaoZhu(val) {
      if (val.scratchField == '摘要') {
        this.activeMenu = 'PatentBasic'
      } else { 
        this.activeMenu = this.menuList.find(item => {
          return val.scratchField.indexOf(item.label)!=-1
        }).value
          if (val.scratchField.indexOf('译文') !=-1) {
          this.activeName = '1'
          } else {
            this.activeName='0'
          }
      }
      this.handleSelect(this.activeMenu)
      
        this.tiaozhuan(val.id,val)
    },
    tiaozhuan(id) {
      const href = `#${id}`
      const anchor = document.createElement('a');
        anchor.href = href;
        anchor.style.display = "none";
        document.body.appendChild(anchor);
        setTimeout(function () {
          anchor.click();
          document.body.removeChild(anchor);
        }, 66);
        return true;
    },
    openContrast(val){
      this.$emit('openContrast',val)
    },
    // getContrastList(){
    //   var a = {
    //     patentNo:this.signPatentNo,
    //     reportId:this.reportId
    //   }
    //   this.$api.selectCompareRecord1(a).then(response=>{
    //     if(response.code == 200){
    //       // console.log(response.data)
    //       var a = this.$store.state.report.contrastList
         
    //         response.data.forEach(item => {
    //           a.push(item)
    //         });
         
         
    //        this.$store.commit('SET_PATENT_CONTRAST', a)
    //     }
    //   })
    // },
    qx() {
      this.fix = false

    },
    gd() {
      this.fix = true
    },
    changePageTitle() {
      document.title = `${this.patent.publicNo} ${this.patent.name || ''}`
    },
    // async onChange(data) {
    //   await this.getPatent(data.id)
    //   await this.$router.push({
    //     path: '/workspace/folder/' + data.id,
    //     query: {
    //       id: this.projectId,
    //     }
    //   })
    //   this.patentId = data.id
    //   this.changePageTitle()
    // },
    async getPatent(publicNo) {
      // console.log(publicNo)
      this.loading = true
      const response = await this.$api.PatentByPatentNo({patentNo : publicNo})
      // console.log(response)
      this.patent = response.data
      if(this.taskId){
         this.getPatentStatus(response.data.patentNo)
      }
      // if (this.publicNo == this.patent.publicNo) {
      //   this.showcard = false
      // }
      const country = getPatentCountry(this.patent.patentNo)
      let change = false
      if (country !== 'CN') {
        change = true
      }
      this.$set(this.patent, 'change', change)
      this.$set(this.patent, 'change2', change)
      this.loading = false
      this.changePageTitle()
    },
    // async getPatent(id) {
    //   this.loading = true
    //   const response = await this.$api.getPatentById(id, { projectId: this.projectId })
    //   // console.log(this.publicNo)
    //   this.patent = response.data
    //   if (this.publicNo == this.patent.publicNo) {
    //     this.showcard = false
    //   }
    //   const country = getPatentCountry(this.patent.patentNo)
    //   let change = false
    //   if (country !== 'CN') {
    //     change = true
    //   }
    //   this.$set(this.patent, 'change', change)
    //   this.$set(this.patent, 'change2', change)
    //   this.loading = false
    //   this.changePageTitle()
    // },
    handleSelect2(index, path) {

    },
    handleSelect(index) {
      
      if (index === 'PatentExport') {
        const router = this.$router.resolve({
          path: '/export/patent',
          query: {
            id: this.projectId,
            patent: this.patent.id,
          }
        })
        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
    },
    //查询任务下专利状态
    getPatentStatus(patentNo){
      var a = {
        taskID:this.taskId,
        patentNo:patentNo
      }
      // console.log(this.patentNo);
      this.$api.getPatentStatus(a).then(response=>{
        if(response.code == 200){
          this.patentStatus2 = response.data
        }
      })
    },
    //修改已读未读
    changeStatus(val){
      if(val == '0'){
        var a = {
          taskID:this.taskId,
          patentNo:this.publicNo
        }
        this.$api.updatePatentStatus(a).then(response=>{
          if(response.code == 200){
            this.patentStatus2 = '1'
          }
        })
      }
      
    },
    //获取状态
    getStatus(val){
      this.patentStatus2 = val
    },
  }
}
</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-left1 {
      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>