index2.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. export const patentKeywordsHighlight = {
  2. computed: {
  3. highlight() {
  4. return this.$store.state.patent.highlight
  5. },
  6. contrastList() {
  7. return this.$store.state.report.contrastList
  8. }
  9. },
  10. mounted() {
  11. window.mouseenter1=this.mouseenter1
  12. window.mouseleave1=this.mouseleave1
  13. },
  14. methods: {
  15. mouseenter1(e, id) {
  16. var dom = document.getElementsByClassName(id)
  17. var message = this.getMessage(id)
  18. // 普通for循环可以拿到dom节点,forEach是拿不到dom节点
  19. for (let i = 0; i < dom.length - 1; i++){
  20. dom[i].classList.add('greenColor')
  21. this.getChildNodesAdd(dom[i].childNodes)
  22. }
  23. // e.target是获取当前的,dom获取的是所有的class相同的节点
  24. e.target.parentNode.classList.add("pizhuLightHeigh");
  25. if (message.remark) {
  26. e.target.parentNode.appendChild(this.addPara(message.remark,e));
  27. }
  28. },
  29. // 添加背景色
  30. getChildNodesAdd(dom) {
  31. if (dom.length > 0) {
  32. for (let m = 0; m < dom.length; m++){
  33. if (dom[m].nodeType == 1) {
  34. dom[m].classList.add('greenColor')
  35. }
  36. if (dom[m].childNodes.length > 0) {
  37. this.getChildNodesAdd(dom[m].childNodes)
  38. }
  39. }
  40. }
  41. },
  42. // 删除背景色
  43. getChildNodesRemove(dom) {
  44. if (dom.length > 0) {
  45. for (let m = 0; m < dom.length; m++){
  46. if (dom[m].nodeType == 1) {
  47. dom[m].classList.remove('greenColor')
  48. }
  49. if (dom[m].childNodes.length > 0) {
  50. this.getChildNodesRemove(dom[m].childNodes)
  51. }
  52. }
  53. }
  54. },
  55. getMessage(Id) {
  56. return this.contrastList.find(item => {
  57. return item.id == Id
  58. })
  59. },
  60. addPara(val, e) {
  61. //创建div标签
  62. var p = document.createElement("div");
  63. //添加class
  64. p.classList.add('showPiZhu')
  65. if (e.clientY - 200 < 200 && e.clientX + 200 > document.documentElement.clientWidth) {
  66. p.setAttribute('style','left:-200px')
  67. }else if ((e.clientX + 200 > document.documentElement.clientWidth && e.clientY + 200 > document.documentElement.clientHeight) || e.clientX + 200 > document.documentElement.clientWidth) {
  68. p.setAttribute('style','bottom:25px;left:-200px;')
  69. } else if((e.clientY + 200 > document.documentElement.clientHeight && e.clientX-200 < 200) || (e.clientY + 200 > document.documentElement.clientHeight && e.clientX-200 > 200)) {
  70. p.setAttribute('style','bottom:20px;left:10px')
  71. }
  72. //创建文本节点
  73. var text = document.createTextNode(val);
  74. //将文本节点追加到元素节点中
  75. p.appendChild(text);
  76. return p
  77. },
  78. mouseleave1(e, id) {
  79. var dom = document.getElementsByClassName(id)
  80. e.target.parentNode.classList.remove("pizhuLightHeigh");
  81. var message = this.getMessage(id)
  82. if (message.remark) {
  83. document.getElementsByClassName('showPiZhu')[0].remove()
  84. }
  85. for (let i = 0; i < dom.length - 1; i++){
  86. dom[i].classList.remove('greenColor')
  87. this.getChildNodesRemove(dom[i].childNodes)
  88. }
  89. },
  90. getViewDom1(row, field,key) {
  91. if(!row){
  92. return '';
  93. }
  94. var html = ''
  95. if(row.length == 1){
  96. var str = row[0][key]
  97. if(!str){
  98. return ''
  99. }
  100. var arr = str.split(/\r\n/g)
  101. arr.forEach(item=>{
  102. html = html + `<p class="common"> ${item} </p>`
  103. })
  104. }else{
  105. row.forEach(item => {
  106. if(item[key]){
  107. html = html + `<p class="common"> ${item[key]} </p>`
  108. }
  109. })
  110. }
  111. return this.getViewDom(html,field)
  112. },
  113. getViewDom(text, field) {
  114. if(!text){
  115. return ""
  116. }
  117. if (this.contrastList.length > 0) {
  118. for (let i = 0; i < this.contrastList.length; i++) {
  119. if (this.contrastList[i].patentNo == this.patent.patentNo) {
  120. if (this.contrastList[i].scratchField.indexOf(field) != -1) {
  121. var a = {
  122. color: this.contrastList[i].color,
  123. Type: this.contrastList[i].scratchType,
  124. Id: this.contrastList[i].id,
  125. column: this.contrastList[i].scratchField,
  126. index: Number(this.contrastList[i].position),
  127. text: this.contrastList[i].text,
  128. remark: this.contrastList[i].remark,
  129. temNode: text
  130. }
  131. text = this.AddClass1(a);
  132. }
  133. }
  134. }
  135. }
  136. if (!this.highlight.enable || !text) {
  137. return text
  138. }
  139. try {
  140. this.highlight.configs.map(item => {
  141. const keywords = item.keywords.split(';')
  142. for (let keyword of keywords) {
  143. if (!keyword) {
  144. continue
  145. }
  146. let sText = text
  147. let num = -1
  148. const rStr = new RegExp(keyword, "g")
  149. const rHtml = new RegExp("\<.*?\>", "ig")
  150. const sKey = `<span style="background: ${item.color};color: #fff">${keyword}</span>`
  151. const aHtml = sText.match(rHtml)
  152. sText = sText.replace(rHtml, '{~}')
  153. sText = sText.replace(rStr, sKey)
  154. sText = sText.replace(/{~}/g, () => {
  155. num++
  156. return aHtml[num]
  157. })
  158. text = sText
  159. }
  160. })
  161. } catch (e) {
  162. }
  163. return text
  164. },
  165. SplitHtmlTag1(el) {
  166. let temInnerHtml = el.trim();
  167. let pattern = /<[^>]+>/g;
  168. let Indexs = [];
  169. let i = 0
  170. var match = null
  171. while ((match = pattern.exec(temInnerHtml)) != null) {
  172. Indexs[i] = match;
  173. i++;
  174. }
  175. var splitStrings = new Array();
  176. i = 0;
  177. var currentIndex = 0;
  178. for (var index = 0; index < Indexs.length; index++) {
  179. if (Indexs[index].index > currentIndex) {
  180. splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, Indexs[index].index), "type": "text" };
  181. i++;
  182. splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
  183. i++;
  184. } else {
  185. splitStrings[i] = { "text": Indexs[index][0], "type": "tag" };
  186. i++;
  187. }
  188. currentIndex = Indexs[index].index + Indexs[index][0].length;
  189. }
  190. if (currentIndex < temInnerHtml.length) {
  191. splitStrings[i] = { "text": temInnerHtml.substring(currentIndex, temInnerHtml.length), "type": "text" };
  192. }
  193. return splitStrings;
  194. },
  195. AddClass1(selectObject) {
  196. let el = selectObject.temNode;
  197. // 将当前页面获取到的字符串进行处理,返回当前页面所有的标签及文本
  198. var splitStrings = this.SplitHtmlTag1(el);
  199. let bgColor = selectObject.color;
  200. // 添加线及高亮
  201. let startTag = '<span class="' + selectObject.Id + '" id="' + selectObject.Id + '" style="background-color:' + selectObject.color + '">';
  202. if (selectObject.Type == 0) {
  203. startTag = '<span class="' + selectObject.Id + '" id="' + selectObject.Id + '" style="border-bottom:2px solid ' + selectObject.color + '">';
  204. }
  205. if (selectObject.Type == 2) {
  206. startTag = '<span class = "' + selectObject.Id + '" id="' + selectObject.Id + '" style = "text-decoration-line: underline;text-decoration-style: wavy ;text-decoration-color: ' + selectObject.color + '">';
  207. }
  208. // 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>';
  209. 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>';
  210. let endTag = '</span>';
  211. let elText = '';
  212. splitStrings.forEach(function (item) {
  213. if (item.type == 'text') {
  214. elText = elText + item.text;
  215. }
  216. });
  217. let Indexs = [];
  218. let i = 0
  219. if (selectObject.index < 0) {
  220. let pattern = new RegExp(selectObject.text.replace(/[\r\n]/g, "").replace(/\ +/g, ""), "g");
  221. while ((match = pattern.exec(elText)) != null) {
  222. Indexs[i] = match;
  223. i++;
  224. }
  225. } else {
  226. Indexs[i] = [selectObject.text];
  227. Indexs[i].index = selectObject.index;
  228. }
  229. Indexs.forEach(function (match) {
  230. let currentIndex = 0;
  231. let temSplitStrings = new Array();
  232. splitStrings.forEach(function (item) {
  233. if (item.type == 'text') {
  234. if (item.text) {
  235. if (match.index >= currentIndex && match.index < (currentIndex + item.text.length)) {
  236. if (selectObject.column.indexOf('权利要求') != -1) {
  237. item.text = item.text.replace(/\r/g, ' ')
  238. if (item.text.match(/\r/g)) {
  239. match.index -= 1
  240. }
  241. }
  242. if (selectObject.column.indexOf('说明书') != -1) {
  243. // var b = selectObject.temNode.replace(/<[^>]+>/g, '')
  244. // if (b.substring(0, match.index).indexOf('\r') == -1) {
  245. // var a = b.substring(0, match.index).match(/\n/g)
  246. // if (a) {
  247. // match.index -= a.length
  248. // }
  249. // }
  250. item.text = item.text.replace(/\r/g, "")
  251. }
  252. if ((match.index + match[0].length) <= (currentIndex + item.text.length) && item.text.indexOf(match[0]) != -1) {
  253. if (match.index > currentIndex) {
  254. temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
  255. }
  256. temSplitStrings.push({ text: startTag, type: 'tag' });
  257. temSplitStrings.push({ text: match[0], type: 'text' });
  258. temSplitStrings.push({ text: imgTag, type: 'tag' });
  259. // }
  260. temSplitStrings.push({ text: endTag, type: 'tag' });
  261. if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
  262. temSplitStrings.push({ text: item.text.substring((match.index + match[0].length) - currentIndex), type: 'text' });
  263. }
  264. } else {
  265. if (item.text.indexOf(match[0]) != -1) {
  266. if (match.index > currentIndex) {
  267. temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
  268. }
  269. if (temSplitStrings.length > 1) {
  270. temSplitStrings.push({ text: startTag, type: 'tag' });
  271. } else {
  272. temSplitStrings.push({ text: startTag, type: 'tag' });
  273. }
  274. temSplitStrings.push({ text: item.text.substring(match.index - currentIndex), type: 'text' });
  275. temSplitStrings.push({ text: endTag, type: 'tag' });
  276. } else {
  277. temSplitStrings.push({ text: item.text.substring(0, match.index - currentIndex), type: 'text' });
  278. temSplitStrings.push({ text: startTag, type: 'tag' });
  279. temSplitStrings.push({ text: item.text.substring( match.index - currentIndex,item.text.length), type: 'text' });
  280. temSplitStrings.push({ text: endTag, type: 'tag' });
  281. }
  282. }
  283. } else {
  284. if ((match.index + match[0].length) <= (currentIndex + item.text.length) && (match.index + match[0].length) > currentIndex) {
  285. temSplitStrings.push({ text: startTag, type: 'tag' });
  286. temSplitStrings.push({ text: item.text.substring(0, match.index + match[0].length - currentIndex), type: 'text' });
  287. temSplitStrings.push({ text: imgTag, type: 'tag' });
  288. temSplitStrings.push({ text: endTag, type: 'tag' });
  289. if ((match.index + match[0].length) < (currentIndex + item.text.length)) {
  290. temSplitStrings.push({ text: item.text.substring((match.index + match[0].length - currentIndex)), type: 'text' });
  291. }
  292. } else {
  293. if (match.index < currentIndex && (match.index + match[0].length) >= (currentIndex + item.text.length)) {
  294. temSplitStrings.push({ text: startTag, type: 'tag' });
  295. temSplitStrings.push(item);
  296. temSplitStrings.push({ text: endTag, type: 'tag' });
  297. } else {
  298. temSplitStrings.push(item);
  299. }
  300. }
  301. }
  302. currentIndex = currentIndex + item.text.length;
  303. } else {
  304. temSplitStrings.push(item);
  305. }
  306. } else {
  307. temSplitStrings.push(item);
  308. }
  309. });
  310. splitStrings = temSplitStrings;
  311. });
  312. let temInnerHtml = '';
  313. splitStrings.forEach(function (item) {
  314. temInnerHtml = temInnerHtml + item.text;
  315. });
  316. return temInnerHtml;
  317. },
  318. }
  319. }