|
@@ -1,343 +0,0 @@
|
|
|
-export const patentKeywordsHighlight = {
|
|
|
-
|
|
|
- computed: {
|
|
|
- highlight() {
|
|
|
- return this.$store.state.patent.highlight
|
|
|
- },
|
|
|
- contrastList() {
|
|
|
- return this.$store.state.report.contrastList
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- window.mouseenter1=this.mouseenter1
|
|
|
- window.mouseleave1=this.mouseleave1
|
|
|
- },
|
|
|
- methods: {
|
|
|
- mouseenter1(e, id) {
|
|
|
- var dom = document.getElementsByClassName(id)
|
|
|
- var message = this.getMessage(id)
|
|
|
- // 普通for循环可以拿到dom节点,forEach是拿不到dom节点
|
|
|
- for (let i = 0; i < dom.length - 1; i++){
|
|
|
- dom[i].classList.add('greenColor')
|
|
|
- this.getChildNodesAdd(dom[i].childNodes)
|
|
|
- }
|
|
|
- // e.target是获取当前的,dom获取的是所有的class相同的节点
|
|
|
- e.target.parentNode.classList.add("pizhuLightHeigh");
|
|
|
- if (message.remark) {
|
|
|
- e.target.parentNode.appendChild(this.addPara(message.remark,e));
|
|
|
- }
|
|
|
- },
|
|
|
- // 添加背景色
|
|
|
- getChildNodesAdd(dom) {
|
|
|
- if (dom.length > 0) {
|
|
|
- for (let m = 0; m < dom.length; m++){
|
|
|
- if (dom[m].nodeType == 1) {
|
|
|
- dom[m].classList.add('greenColor')
|
|
|
- }
|
|
|
- if (dom[m].childNodes.length > 0) {
|
|
|
- this.getChildNodesAdd(dom[m].childNodes)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 删除背景色
|
|
|
- getChildNodesRemove(dom) {
|
|
|
- if (dom.length > 0) {
|
|
|
- for (let m = 0; m < dom.length; m++){
|
|
|
- if (dom[m].nodeType == 1) {
|
|
|
- dom[m].classList.remove('greenColor')
|
|
|
- }
|
|
|
- if (dom[m].childNodes.length > 0) {
|
|
|
- this.getChildNodesRemove(dom[m].childNodes)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getMessage(Id) {
|
|
|
- return this.contrastList.find(item => {
|
|
|
- return item.id == Id
|
|
|
- })
|
|
|
- },
|
|
|
- addPara(val, e) {
|
|
|
- //创建div标签
|
|
|
- var p = document.createElement("div");
|
|
|
- //添加class
|
|
|
- p.classList.add('showPiZhu')
|
|
|
- if (e.clientY - 200 < 200 && e.clientX + 200 > document.documentElement.clientWidth) {
|
|
|
- p.setAttribute('style','left:-200px')
|
|
|
- }else if ((e.clientX + 200 > document.documentElement.clientWidth && e.clientY + 200 > document.documentElement.clientHeight) || e.clientX + 200 > document.documentElement.clientWidth) {
|
|
|
- p.setAttribute('style','bottom:25px;left:-200px;')
|
|
|
- } else if((e.clientY + 200 > document.documentElement.clientHeight && e.clientX-200 < 200) || (e.clientY + 200 > document.documentElement.clientHeight && e.clientX-200 > 200)) {
|
|
|
- p.setAttribute('style','bottom:20px;left:10px')
|
|
|
- }
|
|
|
- //创建文本节点
|
|
|
- var text = document.createTextNode(val);
|
|
|
- //将文本节点追加到元素节点中
|
|
|
- p.appendChild(text);
|
|
|
- return p
|
|
|
- },
|
|
|
- mouseleave1(e, id) {
|
|
|
- var dom = document.getElementsByClassName(id)
|
|
|
- e.target.parentNode.classList.remove("pizhuLightHeigh");
|
|
|
- var message = this.getMessage(id)
|
|
|
- if (message.remark) {
|
|
|
- document.getElementsByClassName('showPiZhu')[0].remove()
|
|
|
- }
|
|
|
- for (let i = 0; i < dom.length - 1; i++){
|
|
|
- dom[i].classList.remove('greenColor')
|
|
|
- this.getChildNodesRemove(dom[i].childNodes)
|
|
|
- }
|
|
|
- },
|
|
|
- getViewDom1(row, field,key) {
|
|
|
- if(!row){
|
|
|
- return '';
|
|
|
- }
|
|
|
- var html = ''
|
|
|
- if(row.length == 1){
|
|
|
- var str = row[0][key]
|
|
|
- if(!str){
|
|
|
- return ''
|
|
|
- }
|
|
|
- var arr = str.split(/\r\n/g)
|
|
|
- arr.forEach(item=>{
|
|
|
- html = html + `<p class="common"> ${item} </p>`
|
|
|
- })
|
|
|
- }else{
|
|
|
- row.forEach(item => {
|
|
|
- if(item[key]){
|
|
|
- html = html + `<p class="common"> ${item[key]} </p>`
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- return this.getViewDom(html,field)
|
|
|
- },
|
|
|
- getViewDom(text, field) {
|
|
|
- if(!text){
|
|
|
- return ""
|
|
|
- }
|
|
|
- if (this.contrastList.length > 0) {
|
|
|
- for (let i = 0; i < this.contrastList.length; i++) {
|
|
|
- if (this.contrastList[i].patentNo == this.patent.patentNo) {
|
|
|
- if (this.contrastList[i].scratchField.indexOf(field) != -1) {
|
|
|
- var a = {
|
|
|
- color: this.contrastList[i].color,
|
|
|
- Type: this.contrastList[i].scratchType,
|
|
|
- Id: this.contrastList[i].id,
|
|
|
- column: this.contrastList[i].scratchField,
|
|
|
- index: Number(this.contrastList[i].position),
|
|
|
- text: this.contrastList[i].text,
|
|
|
- remark: this.contrastList[i].remark,
|
|
|
- temNode: text
|
|
|
- }
|
|
|
- text = this.AddClass1(a);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- if (!this.highlight.enable || !text) {
|
|
|
- return text
|
|
|
- }
|
|
|
- try {
|
|
|
-
|
|
|
- this.highlight.configs.map(item => {
|
|
|
- const keywords = item.keywords.split(';')
|
|
|
- for (let keyword of keywords) {
|
|
|
- if (!keyword) {
|
|
|
- continue
|
|
|
- }
|
|
|
- let sText = text
|
|
|
- let num = -1
|
|
|
- const rStr = new RegExp(keyword, "g")
|
|
|
- const rHtml = new RegExp("\<.*?\>", "ig")
|
|
|
- const sKey = `<span style="background: ${item.color};color: #fff">${keyword}</span>`
|
|
|
- const aHtml = sText.match(rHtml)
|
|
|
- sText = sText.replace(rHtml, '{~}')
|
|
|
- sText = sText.replace(rStr, sKey)
|
|
|
- sText = sText.replace(/{~}/g, () => {
|
|
|
- num++
|
|
|
- return aHtml[num]
|
|
|
- })
|
|
|
- text = sText
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- } catch (e) {
|
|
|
- }
|
|
|
- return text
|
|
|
- },
|
|
|
- SplitHtmlTag1(el) {
|
|
|
- let temInnerHtml = el.trim();
|
|
|
- let pattern = /<[^>]+>/g;
|
|
|
- let Indexs = [];
|
|
|
- let i = 0
|
|
|
- var match = null
|
|
|
- while ((match = pattern.exec(temInnerHtml)) != null) {
|
|
|
- Indexs[i] = match;
|
|
|
- i++;
|
|
|
- }
|
|
|
- var splitStrings = new Array();
|
|
|
- i = 0;
|
|
|
- var currentIndex = 0;
|
|
|
- for (var index = 0; index < Indexs.length; index++) {
|
|
|
- if (Indexs[index].index > currentIndex) {
|
|
|
- splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, Indexs[index].index), "type": "text" };
|
|
|
- i++;
|
|
|
- splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
|
|
|
- i++;
|
|
|
- } else {
|
|
|
- splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
|
|
|
- i++;
|
|
|
- }
|
|
|
- currentIndex = Indexs[index].index + Indexs[index][0].length;
|
|
|
- }
|
|
|
- if (currentIndex < temInnerHtml.length) {
|
|
|
- splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, temInnerHtml.length), "type": "text" };
|
|
|
- }
|
|
|
-
|
|
|
- return splitStrings;
|
|
|
-
|
|
|
- },
|
|
|
- AddClass1(selectObject) {
|
|
|
- let el = selectObject.temNode;
|
|
|
- // 将当前页面获取到的字符串进行处理,返回当前页面所有的标签及文本
|
|
|
- var splitStrings = this.SplitHtmlTag1(el);
|
|
|
- let bgColor = selectObject.color;
|
|
|
- // 添加线及高亮
|
|
|
- let startTag = '<span class="' + selectObject.Id + '" id="' + selectObject.Id + '" style="background-color:' + selectObject.color + '">';
|
|
|
- if (selectObject.Type == 0) {
|
|
|
- startTag = '<span class="' + selectObject.Id + '" id="' + selectObject.Id + '" style="border-bottom:2px solid ' + selectObject.color + '">';
|
|
|
- }
|
|
|
- if (selectObject.Type == 2) {
|
|
|
- startTag = '<span class = "' + selectObject.Id + '" id="' + selectObject.Id + '" style = "text-decoration-line: underline;text-decoration-style: wavy ;text-decoration-color: ' + selectObject.color + '">';
|
|
|
- }
|
|
|
- // let imgTag = '<span class="' + selectObject.Id + '" style="background-color:white !important;"><i class="el-icon-location-outline" style="vertical-align: super;background-color:white !important;" onclick="selectMark(\'' + selectObject.Id + '\')" onmouseenter="mouseenter1(event,\'' + selectObject.Id + '\')" onmouseleave="mouseleave1(event,\'' + selectObject.Id + '\')"></i></span>';
|
|
|
- let imgTag = '<span class="' + selectObject.Id + '" style="background-color:white !important;"><i class="iconfont icon-xinxi3" style="vertical-align: super;background-color:white !important;" onclick="selectMark(\'' + selectObject.Id + '\')" onmouseenter="mouseenter1(event,\'' + selectObject.Id + '\')" onmouseleave="mouseleave1(event,\'' + selectObject.Id + '\')"></i></span>';
|
|
|
- let endTag = '</span>';
|
|
|
- let elText = '';
|
|
|
-
|
|
|
- splitStrings.forEach(function (item) {
|
|
|
- if (item.type == 'text') {
|
|
|
- elText = elText + item.text;
|
|
|
- }
|
|
|
- });
|
|
|
- let Indexs = [];
|
|
|
- let i = 0
|
|
|
- if (selectObject.index < 0) {
|
|
|
- let pattern = new RegExp(selectObject.text.replace(/[\r\n]/g, "").replace(/\ +/g, ""), "g");
|
|
|
- while ((match = pattern.exec(elText)) != null) {
|
|
|
- Indexs[i] = match;
|
|
|
- i++;
|
|
|
- }
|
|
|
- } else {
|
|
|
- Indexs[i] = [selectObject.text];
|
|
|
- Indexs[i].index = selectObject.index;
|
|
|
- }
|
|
|
- Indexs.forEach(function (match) {
|
|
|
- let currentIndex = 0;
|
|
|
- let temSplitStrings = new Array();
|
|
|
- splitStrings.forEach(function (item) {
|
|
|
- if (item.type == 'text') {
|
|
|
- if (item.text) {
|
|
|
- if (match.index >= currentIndex && match.index < (currentIndex + item.text.length)) {
|
|
|
- if (selectObject.column.indexOf('权利要求') != -1) {
|
|
|
- item.text = item.text.replace(/\r/g, ' ')
|
|
|
- if (item.text.match(/\r/g)) {
|
|
|
- match.index -= 1
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- if (selectObject.column.indexOf('说明书') != -1) {
|
|
|
- // var b = selectObject.temNode.replace(/<[^>]+>/g, '')
|
|
|
- // if (b.substring(0, match.index).indexOf('\r') == -1) {
|
|
|
- // var a = b.substring(0, match.index).match(/\n/g)
|
|
|
- // if (a) {
|
|
|
- // match.index -= a.length
|
|
|
- // }
|
|
|
- // }
|
|
|
- item.text = item.text.replace(/\r/g, "")
|
|
|
- }
|
|
|
-
|
|
|
- if ((match.index + match[0].length) <= (currentIndex + item.text.length) && item.text.indexOf(match[0]) != -1) {
|
|
|
-
|
|
|
- if (match.index > currentIndex) {
|
|
|
- temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
|
|
|
- }
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- temSplitStrings.push({ text: match[0], type: 'text' });
|
|
|
- temSplitStrings.push({ text: imgTag, type: 'tag' });
|
|
|
- // }
|
|
|
- temSplitStrings.push({ text: endTag, type: 'tag' });
|
|
|
-
|
|
|
- if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
|
|
|
- temSplitStrings.push({ text: item.text.substring((match.index + match[0].length) - currentIndex), type: 'text' });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.text.indexOf(match[0]) != -1) {
|
|
|
- if (match.index > currentIndex) {
|
|
|
- temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
|
|
|
- }
|
|
|
- if (temSplitStrings.length > 1) {
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- } else {
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- }
|
|
|
-
|
|
|
- temSplitStrings.push({ text: item.text.substring(match.index - currentIndex), type: 'text' });
|
|
|
- temSplitStrings.push({ text: endTag, type: 'tag' });
|
|
|
- } else {
|
|
|
- temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- temSplitStrings.push({ text: item.text.substring( match.index - currentIndex,item.text.length), type: 'text' });
|
|
|
- temSplitStrings.push({ text: endTag, type: 'tag' });
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if ((match.index + match[0].length) <= (currentIndex + item.text.length) && (match.index + match[0].length) > currentIndex) {
|
|
|
-
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- temSplitStrings.push({ text: item.text.substring(0, match.index + match[0].length - currentIndex), type: 'text' });
|
|
|
-
|
|
|
- temSplitStrings.push({ text: imgTag, type: 'tag' });
|
|
|
-
|
|
|
- temSplitStrings.push({ text: endTag, type: 'tag' });
|
|
|
- if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
|
|
|
- temSplitStrings.push({ text: item.text.substring((match.index + match[0].length - currentIndex)), type: 'text' });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (match.index < currentIndex && (match.index + match[0].length) >= (currentIndex + item.text.length)) {
|
|
|
-
|
|
|
- temSplitStrings.push({ text: startTag, type: 'tag' });
|
|
|
- temSplitStrings.push(item);
|
|
|
- temSplitStrings.push({ text: endTag, type: 'tag' });
|
|
|
- } else {
|
|
|
-
|
|
|
- temSplitStrings.push(item);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- currentIndex = currentIndex + item.text.length;
|
|
|
- } else {
|
|
|
- temSplitStrings.push(item);
|
|
|
- }
|
|
|
- } else {
|
|
|
- temSplitStrings.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- splitStrings = temSplitStrings;
|
|
|
- });
|
|
|
-
|
|
|
- let temInnerHtml = '';
|
|
|
- splitStrings.forEach(function (item) {
|
|
|
- temInnerHtml = temInnerHtml + item.text;
|
|
|
- });
|
|
|
- return temInnerHtml;
|
|
|
-
|
|
|
- },
|
|
|
- }
|
|
|
-}
|