1

src/App.vue

@@ -79,6 +79,9 @@ html, body, #app {
 .margin-left_10 {
   margin-left: 10px !important;
 }
+.margin-left_5 {
+  margin-left: 5px !important;
+}
 .padding-left_10 {
   padding-left: 10px;
 }

src/icons/svg/lanweiguanli.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M737 793.25h-112.5V230.75h112.5v562.5z m56.25-618.75H568.25v675h225V174.5zM399.5 793.25H287V230.75h112.5v562.5zM455.75 174.5H230.75v675h225V174.5zM962 62v900h-56.25V62zM118.25 62v900H62V62z" /></svg>

src/icons/svg/tupian.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M810.666667 640V341.333333H213.333333v277.333334l59.733334-55.466667 115.2 98.133333 226.133333-196.266666L810.666667 640z m85.333333-384v512H128V256h768z"  /></svg>

src/utils/model/menuInRow/index copy.vue

@@ -0,0 +1,329 @@
+<template>
+    <div class="menuInRow">
+        <template v-if="showData.length>0">
+            <div class="showMenu" v-menuInRow="getMenuNum">
+                <div v-for="(item,index) in showData" :key="'show'+index" @click.prevent="clickDom(item,index,'show')" class="menuItem" :class="[index >= (surplusNum>0?num:num)?'display_none':'',currentClick == ('show'+index)?'color_red':'']">
+                    <slot name="menuItem" v-if="data.length>0" :row="item">
+                        <div v-html="item[prop.name]"></div>
+                    </slot>
+                    <div v-else v-html="getItemName(item,index,'show')"></div>
+                </div>
+            </div>
+            <div v-if="surplusNum>0" class="hideMenu">
+                <el-dropdown>
+                    <span class="el-dropdown-link">
+                        更多<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item v-for="(item,index) in hideData" :key="'hide'+index" :class="currentClick == ('hide'+index)?'color_red':''" @click.native.prevent="clickDom(item,index,'hide')">
+                            <slot name="menuItem" v-if="data.length>0" :row="item">
+                                <div v-html="item[prop.name]"></div>
+                            </slot>
+                            <div v-else v-html="getItemName(item,index,'hide')"></div>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </template>
+        <template v-if="data.length == 0">
+            <div v-getChildData class="showMenu" v-showDom="'show'" style="display:none">
+                <slot></slot>
+            </div>
+            <div v-if="surplusNum>0" class="hideMenu">
+                <el-dropdown>
+                    <span class="el-dropdown-link">
+                        更多<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown" class="dropdownMenu" v-showDom="'hide'">
+                        <slot></slot>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+async function menuInRowFun(el,binding,childNodes){
+  el.style.whiteSpace = 'nowrap';
+//   el.style.width = 'calc(100% - 60px)'
+  var el_width = el.clientWidth
+  
+  var width = 0
+  var num = 0
+  var surplusNum = 0
+  async function getElementWidthWithMargin(element) {
+    const rect = await element.getBoundingClientRect();
+    return rect.width;
+  }
+//   var widths = []
+  for(var i = 0;i<childNodes.length;i++){
+    let childWidth = await getElementWidthWithMargin(childNodes[i])
+    // widths.push(childWidth)
+    width += childWidth
+    if(width >el_width){
+      break;
+    }
+    num ++
+  }
+  surplusNum = childNodes.length - num
+  binding.value(num,surplusNum)
+//   el.style.width = width - widths[num-1] - 20 + 'px'
+}
+function uuid(len, radix) {
+    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+    var uuid = [], i;
+    radix = radix || chars.length;
+    if (len) {
+      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
+    } else {
+      var r;
+      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+      uuid[14] = '4';
+      for (i = 0; i < 36; i++) {
+        if (!uuid[i]) {
+          r = 0 | Math.random()*16;
+          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+        }
+      }
+    }
+    return uuid.join('');
+  }
+function getMenuItem(el, binding,vnode){
+    var that = vnode.context
+    var childNodes = el.childNodes
+    var data = []
+    for(var i = 0;i<childNodes.length;i++){
+        var child = childNodes[i]
+        var display = child.style.display
+        var name = child.getAttribute('name')
+        if(name != 'menuInRowItem'){
+            continue;
+        }
+        var value = child.getAttribute('value')
+        var highlight = child.getAttribute('highlight')
+        var key = child.getAttribute('key')
+        if(!key){
+            key = uuid(32)
+            child.setAttribute('key',key)
+        }
+        var label = child.outerHTML
+        data.push(
+            {
+                value:value,
+                highlight:highlight,
+                name:label,
+                key:key
+            }
+        )
+    }
+    that.showData = data
+    // binding.value(data)
+}
+export default {
+    directives:{
+        showDom:{
+            bind(el, binding,vnode){
+                
+            },
+        },
+        getChildData:{
+            bind(el, binding,vnode){
+                getMenuItem(el, binding,vnode)
+                // console.log(that.showData)
+            },
+            // componentUpdated(el, binding,vnode) {  
+            //     getMenuItem(el, binding,vnode)
+            // },
+        },
+        menuInRow:{
+            bind(el, binding,vnode) {  
+                var that = vnode.context
+                var childNodes = el.childNodes
+                that.$nextTick(()=>{
+                    menuInRowFun(el, binding,childNodes)
+                    window.addEventListener('resize',()=>{
+                       that.$commonJS.debounce( menuInRowFun(el, binding,childNodes),1000)
+                    })
+                })
+                
+            },  
+            // 如果需要，可以在更新时再次执行逻辑  
+            // componentUpdated(el, binding,vnode) {  
+            //     menuInRowFun(el, binding)
+            // },  
+            unbind(el) {
+                var eventListener = window.eventListeners_
+                if(!eventListener){
+                return false
+                }
+                const listeners = eventListener.resize
+                if(listeners){
+                window.removeEventListener("resize");
+                }
+                
+            },
+        }
+    },
+  components: {},
+  props: {
+    data:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    },
+    prop:{
+        type:String,
+        default:'name'
+    },
+    value:{
+        type:[Number,String],
+        default:0
+    }
+  },
+  data() {
+    return {
+        config:{
+            num:0,
+            surplusNum:0,
+        },
+        num:0,
+        surplusNum:0,
+        showData:this.data,
+        hideData:[],
+        currentClick:null
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+  },
+  methods: {
+    getMenuNum(num,surplusNum){
+        this.num=num||0,
+        this.surplusNum=surplusNum||0
+        // this.showData = this.getShowData()
+        this.hideData = this.getHideData()
+        if(!this.currentClick){
+            var value = Number(this.value)
+            if(value >= num){
+                value = value - num
+                this.currentClick = 'hide'+value
+            }else{
+                this.currentClick = 'show'+value
+            }
+        }
+    },
+    getShowData(){
+        if(this.surplusNum==0){
+            return this.data
+        }else{
+            return this.data.slice(0, this.num)
+        }
+    },
+    getHideData(){
+        if(this.surplusNum==0){
+            return []
+        }
+        return this.showData.slice(-this.surplusNum)
+    },
+    clickDom(item,index,type){
+        if(item.highlight){
+            this.currentClick = type+index
+        }
+        
+        if(this.data.length>0){
+            this.$emit('click',item)
+        }else{
+            this.$emit('click',item.value)
+        }
+        
+    },
+    clickChild(e){
+        this.$emit('click',e)
+    },
+    getItemName(item,index,type){
+        var sign = type+index
+        if(sign == this.currentClick){
+            if(!item.clickName){
+                var style = 'color: red;';
+                item.clickName = this.addStyleToHtmlTags(item.name, style);
+            }
+            return item.clickName
+        }
+        return item.name
+    },
+    addStyleToHtmlTags(htmlString, styleString) {
+        // 创建一个临时的容器元素
+        var tempDiv = document.createElement('div');
+        // 将HTML字符串设置为容器的innerHTML
+        tempDiv.innerHTML = htmlString.trim();
+    
+        // 遍历容器中的所有元素
+        Array.from(tempDiv.getElementsByTagName('*')).forEach(function(element) {
+            // 如果元素已经有style属性，则添加新的样式到现有样式中
+            if (element.style) {
+                element.style.cssText += ';' + styleString;
+            } else {
+                // 否则，直接设置style属性
+                element.setAttribute('style', styleString);
+            }
+        });
+    
+        // 返回修改后的HTML字符串（注意：这将不包含外部容器的标签）
+        return tempDiv.innerHTML;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.menuInRow{
+    display:flex;
+    align-items: center;
+    width:calc(100% - 40px);
+    padding:5px 20px;
+    border-top:1px solid #e6e6e6;
+    overflow:hidden;
+    .showMenu{
+        display:flex;
+        align-items: center;
+        width:calc(100% - 60px);
+    }
+    .menuItem{
+        cursor: pointer;
+        // margin:0 10px;
+        padding:5px 10px;
+        min-width:fit-content
+    }
+    .hideMenu{
+        padding-left:10px;
+        width:50px;
+        min-width:50px;
+        background:white;
+        cursor: pointer;
+    }
+}
+.display_none{
+    opacity: 0;
+    pointer-events: none;
+}
+.color_red>*,.color_red{
+    color:red !important;
+}
+.dropdownMenu>*{
+    width: 200px;
+    min-width: 200px;
+    line-height: 1em;
+    padding: 5px 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+    border-bottom: 1px solid #e6e6e6;
+    cursor: pointer;
+    &:last-child{
+        border-bottom:none;
+    }
+}
+</style>

src/utils/model/menuInRow/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="menuInRow">
-        <template v-if="showData.length>0">
+    <div class="menuInRow" ref="menuInRow">
+        <template v-if="data.length>0">
             <div class="showMenu" v-menuInRow="getMenuNum">
-                <div v-for="(item,index) in showData" :key="'show'+index" @click.prevent="clickDom(item)" class="menuItem" :class="index >= (surplusNum>0?num-1:num)?'display_none':''">
+                <div v-for="(item,index) in showData" :key="'show'+index" @click.prevent="clickDom(item,index,'show')" class="menuItem" :class="[index >= (surplusNum>0?num:num)?'display_none':'',currentClick == ('show'+index)?'color_red':'']">
                     <slot name="menuItem" v-if="data.length>0" :row="item">
                         <div v-html="item[prop.name]"></div>
                     </slot>
-                    <div v-else v-html="item.name"></div>
+                    <div v-else v-html="getItemName(item,index,'show')"></div>
                 </div>
             </div>
             <div v-if="surplusNum>0" class="hideMenu">
@@ -15,92 +15,154 @@
                         更多<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item v-for="(item,index) in hideData" :key="'hide'+index" @click.native.prevent="clickDom(item)">
+                        <el-dropdown-item v-for="(item,index) in hideData" :key="'hide'+index" :class="currentClick == ('hide'+index)?'color_red':''" @click.native.prevent="clickDom(item,index,'hide')">
                             <slot name="menuItem" v-if="data.length>0" :row="item">
                                 <div v-html="item[prop.name]"></div>
                             </slot>
-                            <div v-else v-html="item.name"></div>
+                            <div v-else v-html="getItemName(item,index,'hide')"></div>
                         </el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
             </div>
         </template>
         <template v-if="data.length == 0">
-            <div v-getChildData style="display:none">
+            <div class="showMenu" ref="showMenu1" v-showDom="'show'">
                 <slot></slot>
             </div>
+            <div v-if="surplusNum>0" class="hideMenu" >
+                <el-dropdown trigger="click">
+                    <span class="el-dropdown-link">
+                        更多<i class="el-icon-arrow-down el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown" class="menuInRow_dropdownMenu" v-showDom="'hide'">
+                        <slot></slot>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
         </template>
     </div>
 </template>
 
 <script>
-async function menuInRowFun(el,binding,childNodes){
-  el.style.whiteSpace = 'nowrap';
-//   el.style.width = 'calc(100% - 60px)'
-  var el_width = el.clientWidth
-  
-  var width = 0
-  var num = 0
-  var surplusNum = 0
-  async function getElementWidthWithMargin(element) {
-    const rect = await element.getBoundingClientRect();
-    return rect.width;
-  }
-  var widths = []
-  for(var i = 0;i<childNodes.length;i++){
-    let childWidth = await getElementWidthWithMargin(childNodes[i])
-    widths.push(childWidth)
-    width += childWidth
-    if(width >el_width ){
-      break;
+async function menuInRowFun(el,binding,childNodes,vnode){
+    var that = vnode.context
+    el.style.whiteSpace = 'nowrap';
+    //   el.style.width = 'calc(100% - 60px)'
+    var el_width = el.clientWidth
+    
+    var width = 0
+    var num = 0
+    var surplusNum = 0
+    async function getElementWidthWithMargin(element) {
+        const rect = await element.getBoundingClientRect();
+        return rect.width;
     }
-    num ++
-  }
-  surplusNum = childNodes.length - num
-  binding.value(num,surplusNum)
+    //   var widths = []
+    for(var i = 0;i<childNodes.length;i++){
+        let childWidth = await getElementWidthWithMargin(childNodes[i])
+        // widths.push(childWidth)
+        width += childWidth
+        if(width >el_width){
+        break;
+        }
+        num ++
+    }
+    surplusNum = childNodes.length - num
+    if(surplusNum == 1){
+        if(width <= el_width + 40){
+            num += 1
+            surplusNum = 0
+        }
+    }
+    // binding.value(num,surplusNum)
+    that.getMenuNum(num,surplusNum)
 //   el.style.width = width - widths[num-1] - 20 + 'px'
 }
-function getMenuItem(el, binding,vnode){
+function showDom(el, binding,vnode){
     var that = vnode.context
+    var type = binding.value
     var childNodes = el.childNodes
-    var data = []
-    for(var i = 0;i<childNodes.length;i++){
-        var child = childNodes[i]
-        var name = child.getAttribute('name')
-        if(name != 'menuInRowItem'){
-            continue;
-        }
-        var value = child.getAttribute('value')
-        var label = child.outerHTML
-        data.push(
-            {
-                value:value,
-                name:label
+    for(let i = 0;i<childNodes.length;i++){
+        let child = childNodes[i]
+        let num = i
+        if(type == 'show'){
+            if(num>=that.num){
+                child.style.opacity= 0;
+                child.style['pointer-events']= 'none';
+            }else{
+                child.style.opacity= 1;
+                child.style['pointer-events']= 'auto';
+            }
+        }else if(type == 'hide'){
+            if(num<that.num){
+                child.style.display= 'none';
+                child.style['pointer-events']= 'none';
+            }else{
+                child.style.display= 'block';
+                child.style['pointer-events']= 'auto';
             }
-        )
+        }
+        child.addEventListener('click',()=>{
+            let name = child.getAttribute('value')
+            that.$emit('click',name)
+        })
     }
-    that.showData = data
-    // binding.value(data)
 }
 export default {
     directives:{
-        getChildData:{
-            bind(el, binding,vnode){
-                getMenuItem(el, binding,vnode)
-                // console.log(that.showData)
+        showDom:{
+            inserted(el, binding,vnode){
+                var that = vnode.context
+                var dom = that.$refs.showMenu1
+                var childNodes = dom.childNodes
+                that.$nextTick(async ()=>{
+                    //获取横向可展示的列表数量
+                    await menuInRowFun(dom, binding,childNodes,vnode)
+                    //给对应的节点添加样式
+                    setTimeout(()=>{
+                        showDom(el, binding,vnode) 
+                    },500)
+                    window.addEventListener('resize',()=>{
+                       that.$commonJS.debounce( menuInRowFun(dom, binding,childNodes,vnode),1000)
+                       that.$commonJS.debounce( showDom(el, binding,vnode),1500)
+                    })
+                })
+                
+            },
+            update(el, binding,vnode){
+                var that = vnode.context
+                var dom = that.$refs.showMenu1
+                var childNodes = dom.childNodes
+                that.$nextTick(async ()=>{
+                    //获取横向可展示的列表数量
+                    await menuInRowFun(dom, binding,childNodes,vnode)
+                    //给对应的节点添加样式
+                    setTimeout(()=>{
+                        showDom(el, binding,vnode) 
+                    },500)
+                })
+                
+            },
+            unbind(el) {
+                var eventListener = window.eventListeners_
+                if(!eventListener){
+                    return false
+                }
+                const listeners = eventListener.resize
+                if(listeners){
+                    window.removeEventListener("resize");
+                }
+                
             },
-            // componentUpdated(el, binding,vnode) {  
-            //     getMenuItem(el, binding,vnode)
-            // },
         },
         menuInRow:{
             bind(el, binding,vnode) {  
                 var that = vnode.context
                 var childNodes = el.childNodes
                 that.$nextTick(()=>{
-                    menuInRowFun(el, binding,childNodes)
+                    menuInRowFun(el, binding,childNodes,vnode)
                     window.addEventListener('resize',()=>{
-                       that.$commonJS.debounce( menuInRowFun(el, binding,childNodes),1000)
+                       that.$commonJS.debounce( menuInRowFun(el, binding,childNodes,vnode),1000)
                     })
                 })
                 
@@ -133,6 +195,10 @@ export default {
     prop:{
         type:String,
         default:'name'
+    },
+    value:{
+        type:[Number,String],
+        default:0
     }
   },
   data() {
@@ -144,7 +210,8 @@ export default {
         num:0,
         surplusNum:0,
         showData:this.data,
-        hideData:[]
+        hideData:[],
+        currentClick:null
     };
   },
   watch: {},
@@ -158,6 +225,15 @@ export default {
         this.surplusNum=surplusNum||0
         // this.showData = this.getShowData()
         this.hideData = this.getHideData()
+        if(!this.currentClick){
+            var value = Number(this.value)
+            if(value >= num){
+                value = value - num
+                this.currentClick = 'hide'+value
+            }else{
+                this.currentClick = 'show'+value
+            }
+        }
     },
     getShowData(){
         if(this.surplusNum==0){
@@ -172,21 +248,80 @@ export default {
         }
         return this.showData.slice(-this.surplusNum)
     },
-    clickDom(item){
+    clickDom(item,index,type){
+        if(item.highlight){
+            this.currentClick = type+index
+        }
+        
         if(this.data.length>0){
             this.$emit('click',item)
         }else{
             this.$emit('click',item.value)
         }
         
+    },
+    clickChild(e){
+        this.$emit('click',e)
+    },
+    getItemName(item,index,type){
+        var sign = type+index
+        if(sign == this.currentClick){
+            if(!item.clickName){
+                var style = 'color: red;';
+                item.clickName = this.addStyleToHtmlTags(item.name, style);
+            }
+            return item.clickName
+        }
+        return item.name
+    },
+    addStyleToHtmlTags(htmlString, styleString) {
+        // 创建一个临时的容器元素
+        var tempDiv = document.createElement('div');
+        // 将HTML字符串设置为容器的innerHTML
+        tempDiv.innerHTML = htmlString.trim();
+    
+        // 遍历容器中的所有元素
+        Array.from(tempDiv.getElementsByTagName('*')).forEach(function(element) {
+            // 如果元素已经有style属性，则添加新的样式到现有样式中
+            if (element.style) {
+                element.style.cssText += ';' + styleString;
+            } else {
+                // 否则，直接设置style属性
+                element.setAttribute('style', styleString);
+            }
+        });
+    
+        // 返回修改后的HTML字符串（注意：这将不包含外部容器的标签）
+        return tempDiv.innerHTML;
     }
   },
 };
 </script>
+<style lang="scss">
+.menuInRow_dropdownMenu>*{
+    // width: 200px;
+    // min-width: 200px;
+    line-height: 1em;
+    padding: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+    border-bottom: 1px solid #e6e6e6;
+    cursor: pointer;
+    &:hover{
+        background: #ecf5ff;
+        color:rgb(127,190,255)
+    }
+    &:last-child{
+        border-bottom:none;
+    }
+}
+</style>
 <style lang="scss" scoped>
 .menuInRow{
     display:flex;
     align-items: center;
+    justify-content: space-between;
     width:calc(100% - 40px);
     padding:5px 20px;
     border-top:1px solid #e6e6e6;
@@ -195,15 +330,23 @@ export default {
         display:flex;
         align-items: center;
         width:calc(100% - 60px);
+        overflow:hidden;
+        white-space: nowrap;
+        &>*{
+            cursor: pointer;
+            // margin:0 10px;
+            padding:5px 10px;
+            min-width:fit-content 
+        }
     }
     .menuItem{
         cursor: pointer;
-        margin:0 10px;
+        // margin:0 10px;
         padding:5px 10px;
         min-width:fit-content
     }
     .hideMenu{
-        margin-left:10px;
+        padding-left:10px;
         width:50px;
         min-width:50px;
         background:white;
@@ -214,4 +357,8 @@ export default {
     opacity: 0;
     pointer-events: none;
 }
+.color_red>*,.color_red{
+    color:red !important;
+}
+
 </style>

src/utils/model/menuInRow/menuInRowItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div name="menuInRowItem" :value="name" :label="label" @click.prevent.stop="clickDom">
+  <div name="menuInRowItem" :value="name" :label="label" :highlight='highlight' @click.prevent="clickDom">
     <slot>
         {{ label }}
     </slot>
@@ -18,7 +18,12 @@ export default {
     name:{
         type:[String,Number],
         default:'' 
+    },
+    highlight:{
+        type:Boolean,
+        default:false
     }
+
   },
   data() {
     return {

src/views/components/import/conditionImport/internal_search/searchResult_internal.vue

@@ -18,10 +18,53 @@
                 <span >{{ scope.row }}</span>
               </template>
             </menuInRow> -->
-            <menuInRow @click="clickFun">
-              <menu-in-row-item v-for="item in functionBtnList" :key="item" :name='item' >
-                <span style="color:red;">{{item}}</span>
+            <menuInRow>
+              <!-- <menu-in-row-item v-for="item in functionBtnList" :key="item" :name='item' >
+                <span style="color:black;">{{item}}</span>
+              </menu-in-row-item> -->
+              <menu-in-row-item v-for="item in viewList" :key="item.value" :name="item.value" @click="handleChangeView(item)">
+                <div>
+                  <svg-icon :icon-class="item.svg"></svg-icon>
+                  <span class="margin-left_5" :style="viewSelected === item.value ?'color:red':''">{{item.title}}</span>
+                </div>
               </menu-in-row-item>
+              <menu-in-row-item name="handleAnalyses">
+                <div>
+                  <svg-icon icon-class="图表分析"></svg-icon>
+                  <span class="margin-left_5">图表分析</span>
+                </div>
+              </menu-in-row-item>
+              <menu-in-row-item name="highlight">
+                <div>
+                  <svg-icon icon-class="wodegaoliang"></svg-icon>
+                  <span class="margin-left_5">高亮</span>
+                </div>
+              </menu-in-row-item>
+              <menu-in-row-item name="fieldManage" @click="handleFieldManage">
+                <div>
+                  <svg-icon icon-class="lanweiguanli"></svg-icon>
+                  <span class="margin-left_5">显示栏位管理</span>
+                </div>
+              </menu-in-row-item>
+              <menu-in-row-item name="exportPatent">
+                <div>
+                  <svg-icon icon-class="daochu"></svg-icon>
+                  <span class="margin-left_5">专利导出</span>
+                </div>
+              </menu-in-row-item>
+              <menu-in-row-item name="exportPDF">
+                <div>
+                  <svg-icon icon-class="daochu"></svg-icon>
+                  <span class="margin-left_5">PDF首页导出</span>
+                </div>
+              </menu-in-row-item>
+              <menu-in-row-item name="importPatent">
+                <div>
+                  <svg-icon icon-class="daoru"></svg-icon>
+                  <span class="margin-left_5">导入到项目</span>
+                </div>
+              </menu-in-row-item>
+              
             </menuInRow>
           </div>
           
@@ -135,16 +178,19 @@ export default {
           value: "patent-table-list-view",
           title: "表格视图",
           btn: "el-icon-tickets",
+          svg:'liebiao'
         },
         {
           value: "patent-abstract-list-view",
           title: "摘要视图",
           btn: "el-icon-news",
+          svg:'tuwenliebiao'
         },
         {
           value: "patent-picture-list-view",
           title: "图片视图",
           btn: "el-icon-picture-outline",
+          svg:'tupian'
         },
       ],
       patentNoList: [],

src/views/project/patentCollection/components/views/Abstract.vue

@@ -4,60 +4,27 @@
     <div class="patent-abstract-list-view">
       <div class="patent-abstract-card" v-for="(patent, index) in tableData" :key="index">
         <div class="patent-abstract-card-wrapper">
-          <table class="patent-abstract-card-table">
-            <tbody>
-              <tr>
-                <!-- <td v-if="refresh"><el-checkbox :label="patent.id" @change="changeSelect(patent)"
-                    :checked="selected.indexOf(patent.id) !== -1 || patentNoList.indexOf(patent.patentNo) !== -1"></el-checkbox>
-                </td> -->
-                <td v-if="refresh">
-                  <!-- <el-checkbox :label="patent.patentNo" @change="changeSelect(patent)"></el-checkbox> -->
-                  <el-checkbox-group :value="patentNoList" >
-                    <el-checkbox :label="patent.patentNo" @change="changeSelect(patent)">
-                    </el-checkbox>
-                  </el-checkbox-group>
-                </td>
-                <td>
-                  <div class="patent-abstract-index-container">
-                    <span>{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
-                    <!-- 已读未读 -->
-                    <span v-if="projectId">
-                      <!-- patent.read判断已读未读 -->
-                      <!-- <el-tag :type="patent.read === 0 ? 'danger' : 'success'"
-                        v-if="$permission('/workspace/folder/isRead')" effect="dark" size="small"
-                        @click="handleChangeRead(patent)">{{ readType[patent.read] }}</el-tag>
-                      <el-tag type="info" v-else effect="dark" size="small">{{ readType[patent.read] }}</el-tag> -->
-                    </span>
-
-                  </div>
-                  <div class="picture text-align_center patent-abstract-image-container">
-                    <el-image fit="contain" :src="outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)"
-                      :preview-src-list="[outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)]"
-                      style="margin:0 auto;vertical-align:middle;"
-                      :style="{ width: patent.imgWidth ? patent.imgWidth : '100%', height: patent.imgHeight ? patent.imgHeight : '100%' }">
-                      <div slot="error" class="image-slot">
-                        <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
-                      </div>
-                    </el-image>
-                  </div>
-                  <div class="patent-abstract-pdf-button-container">
-                    <el-button class="width_100" size="small"
-                      type="primary" :loading="patent.downLoadPDF" @click="handleDownload(patent)">PDF 下载</el-button>
-                  </div>
-                </td>
-                <!-- 专利号 -->
-                <td width="850px">
-                  <div class="patent-abstract-title">
-                    <el-link v-if="patent.ifSearch" type="success"
-                      @click.native="handleClick(patent, index)">
+          <div class="patent-abstract-title" style="display:flex;align-items:center;">
+            <div v-if="refresh">
+              <el-checkbox-group :value="patentNoList" >
+                <el-checkbox :label="patent.patentNo" @change="changeSelect(patent)"></el-checkbox>
+              </el-checkbox-group>
+            </div>
+            <div class="margin-left_10">
+              <span>{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}.</span>
+            </div>
+            <div class="margin-left_10">
+              <div>
+                    <el-link v-if="patent.ifSearch" type="success"  @click.native="handleClick(patent, index)">
                       <span v-html="getView(patent, 'patentNo')"></span>
                     </el-link>
                     <template v-else>
                         <span v-html="getView(patent, 'patentNo')"></span>
                         <span>（未匹配到专利）</span>
                     </template>
-                    <el-tag class="margin-left_10" type="primary" effect="dark" size="small" v-if="patent.simpleStatus">{{
-                      simpleStatus[patent.simpleStatus] }}</el-tag>
+                    <el-tag class="margin-left_10" type="primary" effect="dark" size="small" v-if="patent.simpleStatus">
+                      {{simpleStatus[patent.simpleStatus] }}
+                    </el-tag>
                     <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small" @click="openAddRemark(patent)" v-if="noveltySearch && !noveltyIsRemark(patent)">添加查新标注</el-tag>
                     <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small"  v-if="noveltySearch && noveltyIsRemark(patent)" @click="openAddRemark(patent)">已标注</el-tag>
                     <div v-if="(outside&&noveltySearch) || semanteme" style="display:inline-block;width:300px;margin-left:20px;height:20px" >
@@ -65,165 +32,131 @@
                       <span v-else-if="patent.score == 'error'" style="font-size:12px;"></span>
                       <el-progress v-else style="display:inline-block;width:300px;margin-left:20px;" text-color="#000000" :text-inside="true" :stroke-width="20"  :percentage="patent.score"  :color="customColors" ></el-progress>
                     </div>
-                    
                   </div>
-                  <div style="font-size: 13px;">
-                    <el-row>
-                      <el-col :span="24" v-if="t()">
-                        <span class="patent-abstract_label">标题:</span>
-                        <span class="patent-abstract_text">
-                          <span v-html="getView(patent, 'title')"></span>
-                          <el-link v-if="haveTranslatedText(patent, 'title')" type="primary" @click.native="handleChange(patent, 'title')"
-                            style="margin-left: 10px;">
-                            <span v-if="!patent.change">切换译文</span>
-                            <span v-else>切换原文</span>
-                          </el-link>
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <el-row>
-                      <el-col :span="8" v-if="t()">
-                        <span class="patent-abstract_label">申请日:</span>
-                        <span class="patent-abstract_text">
-                          <span v-html="getView(patent, 'appDate')"></span>
-                        </span>
-                      </el-col>
-                      <el-col :span="8" v-if="t()">
-                        <span class="patent-abstract_label">公开/公告日:</span>
-                        <span class="patent-abstract_text">
-                          <span v-if="patent.grantDate" v-html="getView(patent, 'grantDate')"></span>
-                          <span v-else v-html="getView(patent, 'publicDate')"></span>
-                          
-                        </span>
-                      </el-col>
-                      <el-col :span="8" v-if="t()">
-                        <span class="patent-abstract_label">申请号:</span>
-                        <span class="patent-abstract_text">
-                          <span v-html="getView(patent, 'appNo')"></span>
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">权利人:</span>
-                        <span class="patent-abstract_text" v-if="patent.rightHolder">
-                          <!-- <span v-for="(item) in patent.rightHolder.filter(a => a.dataType === 1)" :key="item.name"> -->
-                            <el-link type="primary">
-                              <!-- <span v-html="getView(patent,'rightHolder')"></span> -->
-                              <span v-html="getViewDom(getPersonNames({row:patent,key:'rightHolder',join:'；'}))"></span>
-                            </el-link>
-                            <!-- <span class="patent-abstract_semicolon">;</span> -->
-                          <!-- </span> -->
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">申请人:</span>
-                        <span class="patent-abstract_text" v-if="patent.applicant">
-                          <!-- <span v-for="(item) in patent.applicant.filter(a => a.dataType === 2)" :key="item.name"> -->
-                            <el-link type="primary">
-                              <!-- <span v-html="getView(patent,'applicant')"></span> -->
-                              <span v-html="getViewDom(getPersonNames({row:patent,key:'applicant',join:'；'}))"></span>
-                            </el-link>
-                            <!-- <span class="patent-abstract_semicolon">;</span> -->
-                          <!-- </span> -->
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">发明人:</span>
-                        <span class="patent-abstract_text">
-                          <!-- <span v-for="(item) in patent.inventor" :key="item.name">-->
-                            <el-link type="primary">
-                              <!-- <span v-html="getView(patent, 'inventor')"></span> -->
-                              <span v-html="getViewDom(getPersonNames({row:patent,key:'inventor',join:'；'}))"></span>
-                            </el-link>
-                            <!-- <span class="patent-abstract_semicolon">;</span> -->
-                          <!-- </span>  -->
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">分类号:</span>
-                        <span class="patent-abstract_text">
-                          <el-link type="primary">
-                            <span v-if="patent.patentType == 3 &&  patent.patentNo.substring(0,2) == 'CN'" v-html="getView(patent, 'mloc')"></span>
-                            <span v-else v-html="getView(patent, 'mipc')"></span>
-                          </el-link>
-                        </span>
-                      </el-col>
-                    </el-row>
-                    <!-- <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">IPC分类号:</span>
-                        <span class="patent-abstract_text">
-                          <el-link type="primary">
-                            <span v-html="getView(patent, 'mipc')"></span>
-                          </el-link>
-                        </span>
-                      </el-col>
-                    </el-row> -->
-                    <!-- 三种同族，若要显示需要后台返回同族专利数组（目前未返回） -->
-                    <!-- <el-row v-if="t('simpleFamily')">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">简单同族:</span>
-                        <span class="patent-abstract_text">
-                          <span v-for="(item) in patent.simpleFamilyNum" :key="item">
-                            <el-link type="primary" @click.native="handleFamily(item)">
-                              <span v-html="getView(item)"></span>
-                            </el-link>
-                            <span class="patent-abstract_semicolon">;</span>
-                          </span>
+            </div>
+          </div>
+          <div style="display:flex;align-items:center;">
+            <!-- 左侧图片 -->
+            <div>
+              <div class="patent-abstract-image-container">
+                <el-image fit="contain" lazy 
+                  :src="outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)"
+                  :preview-src-list="[outside?patent.pictureGuid:$commonJS.checkViewer(patent.pictureGuid)]"
+                  style="width:100%;height:100%"
+                >
+                  <div slot="error" class="image-slot">
+                    <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
+                  </div>
+                </el-image>
+              </div>
+              <div class="patent-abstract-pdf-button-container">
+                <el-button class="width_100" size="small"
+                  type="primary" :loading="patent.downLoadPDF" @click="handleDownload(patent)">PDF 下载</el-button>
+              </div>
+            </div>
+            <!-- 右侧内容 -->
+            <div class="margin-left_10">
+              <div style="font-size:14px">
+                <el-row :gutter="10">
+                  <el-col :span="24" v-if="t('title')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">标题:</span>
+                      <span class="patent-abstract_text">
+                        <span v-html="getView(patent, 'title')"></span>
+                        <el-link v-if="haveTranslatedText(patent, 'title')" type="primary" @click.native="handleChange(patent, 'title')"
+                          style="margin-left: 10px;">
+                          <span v-if="!patent.change">切换译文</span>
+                          <span v-else>切换原文</span>
+                        </el-link>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('appDate')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">申请日:</span>
+                      <span class="patent-abstract_text">
+                        <span v-html="getView(patent, 'appDate')"></span>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('grantDate')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">公开/公告日:</span>
+                      <span class="patent-abstract_text">
+                        <span v-if="patent.grantDate" v-html="getView(patent, 'grantDate')"></span>
+                        <span v-else v-html="getView(patent, 'publicDate')"></span>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('appNo')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">申请号:</span>
+                      <span class="patent-abstract_text">
+                        <span v-html="getView(patent, 'appNo')"></span>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('grantNo')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">公开/公告号:</span>
+                      <span class="patent-abstract_text">
+                        <span v-if="patent.grantNo" v-html="getView(patent, 'grantNo')"></span>
+                        <span v-else v-html="getView(patent, 'publicNo')"></span>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('rightHolder')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">权利人:</span>
+                      <myTooltip :content="getPersonNames({row:patent,key:'rightHolder',join:'；'})" effect="light">
+                        <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'rightHolder',join:'；'}))">
                         </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t('inpadocFamily')">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">INPADOC同族:</span>
-                        <span class="patent-abstract_text">
-                          <span v-for="(item) in patent.simpleFamilyNum" :key="item">
-                            <el-link type="primary" @click.native="handleFamily(item)">
-                              <span v-html="getView(item)"></span>
-                            </el-link>
-                            <span class="patent-abstract_semicolon">;</span>
-                          </span>
+                      </myTooltip>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('applicant')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">申请人:</span>
+                      <myTooltip :content="getPersonNames({row:patent,key:'applicant',join:'；'})" effect="light">
+                        <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'applicant',join:'；'}))">
                         </span>
-                      </el-col>
-                    </el-row>
-                    <el-row v-if="t('patSnapFamily')">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">PatSnap同族:</span>
-                        <span class="patent-abstract_text">
-                          <span v-for="(item) in patent.simpleFamilyNum" :key="item">
-                            <el-link type="primary" @click.native="handleFamily(item)">
-                              <span v-html="getView(item)"></span>
-                            </el-link>
-                            <span class="patent-abstract_semicolon">;</span>
+                      </myTooltip>
+                    </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('inventor')">
+                      <div class="patent-abstract">
+                        <span class="patent-abstract_label" style="min-width:fit-content">发明人:</span>
+                        <myTooltip :content="getPersonNames({row:patent,key:'inventor',join:'；'})" effect="light">
+                          <span class="patent-abstract_text color_link noWrap" v-html="getViewDom(getPersonNames({row:patent,key:'inventor',join:'；'}))">
                           </span>
-                        </span>
-                      </el-col>
-                    </el-row> -->
-                    <el-row v-if="t()">
-                      <el-col :span="24">
-                        <span class="patent-abstract_label">摘要:</span>
-                        <div>
-                          <span v-html="getView(patent, 'abstractStr')"></span>
-                          <el-link v-if="haveTranslatedText(patent, 'abstractStr')" type="primary" @click.native="handleChange(patent, 'abstractStr')">
-                            <span v-if="!patent.change2">切换译文</span>
-                            <span v-else>切换原文</span>
-                          </el-link>
-                        </div>
-                      </el-col>
-                    </el-row>
-
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                        </myTooltip>
+                      </div>
+                  </el-col>
+                  <el-col :span="12" v-if="t('mipc')">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">分类号:</span>
+                      <span class="patent-abstract_text">
+                          <span class="color_link" v-if="patent.patentType == 3 &&  patent.patentNo.substring(0,2) == 'CN'" v-html="getView(patent, 'mloc')"></span>
+                          <span class="color_link" v-else v-html="getView(patent, 'mipc')"></span>
+                      </span>
+                    </div>
+                  </el-col>
+                  <el-col :span="24">
+                    <div class="patent-abstract">
+                      <span class="patent-abstract_label">摘要:</span>
+                      <span>
+                        <span v-html="getView(patent, 'abstractStr')"></span>
+                        <el-link v-if="haveTranslatedText(patent, 'abstractStr')" type="primary" @click.native="handleChange(patent, 'abstractStr')">
+                          <span v-if="!patent.change2">切换译文</span>
+                          <span v-else>切换原文</span>
+                        </el-link>
+                      </span>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -395,22 +328,15 @@ export default {
 
     .patent-abstract-card-wrapper {
       padding: 10px;
+      max-width: 1300px;
       min-height: 200px;
-
-      .patent-abstract-card-table {
-        height: 100%;
-
-        .patent-abstract-index-container {
-          font-size: 13px;
-          padding-left: 10px;
-          margin-bottom: 10px;
-
-          .el-tag {
-            margin-left: 10px;
-            cursor: pointer;
-          }
-        }
-
+      .patent-abstract{
+        display: flex;
+        padding: 2px 0;
+      }
+      .color_link{
+        color:#409EFF;
+      }
         .patent-abstract-image-container {
           // padding: 10px;
           border: 1px solid #bcc2cc;
@@ -433,23 +359,10 @@ export default {
           margin-bottom: 5px;
         }
 
-        .patent-custom-field {
-          line-height: 35px;
-          font-size: 14px;
-          border-bottom: 1px solid #ebecf0;
 
-          .name {
-            width: 200px;
-            float: left;
-          }
-
-          .data {
-            width: calc(100% - 200px);
-            float: right;
-          }
-        }
 
         .patent-abstract_label {
+          min-width: fit-content;
           color: #495973;
           padding-right: 8px;
         }
@@ -467,15 +380,6 @@ export default {
           display: inline-block;
           color: #495973;
         }
-
-        tbody,
-        tr,
-        td {
-          height: 100%;
-          vertical-align: top;
-        }
-      }
-
       .el-checkbox__label {
         display: none;
       }

src/views/project/patentCollection/components/views/Picture.vue

@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="picture text-align_center" style="height: 200px;width:100%;line-height:200px;">
-          <el-image fit="contain" :src="outside?item.pictureGuid:$commonJS.checkViewer(item.pictureGuid)"
+          <el-image fit="contain" lazy :src="outside?item.pictureGuid:$commonJS.checkViewer(item.pictureGuid)"
             :preview-src-list="[outside?item.pictureGuid:$commonJS.checkViewer(item.pictureGuid)]" style="margin:0 auto;vertical-align:middle;"
             :style="{ width: item.imgWidth ? item.imgWidth : '100%', height: item.imgHeight ? item.imgHeight : '100%' }">
             <div slot="error" class="image-slot">

src/views/project/patentCollection/components/views/Table.vue

@@ -31,7 +31,7 @@
                 <tr>
                   <td>
                     <div class="patent-abstract-image text-align_center">
-                      <el-image fit="contain" :src="outside?scope.row.pictureGuid:$commonJS.checkViewer(scope.row.pictureGuid)" 
+                      <el-image fit="contain" lazy :src="outside?scope.row.pictureGuid:$commonJS.checkViewer(scope.row.pictureGuid)" 
                         :preview-src-list="[outside?scope.row.pictureGuid:$commonJS.checkViewer(scope.row.pictureGuid)]" style="vertical-align:middle;"
                         >
                         <div slot="error" class="image-slot">