|
@@ -15,26 +15,26 @@
|
|
|
>
|
|
|
<el-card style="margin-top: -20px">
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col :span="24" class="clear">
|
|
|
- <div class="fl"><span>操作人:</span><span></span></div>
|
|
|
- <div class="fr">
|
|
|
- <span class="s"> </span><span>表示相同的点</span>
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="clear"
|
|
|
+ style="line-height: 28px; height: 28px; font-size: 15px;margin:0 0 10px 0"
|
|
|
+ >
|
|
|
+ <div class="fl">
|
|
|
+ <span>操作人:</span
|
|
|
+ ><span v-if="sitem">{{ sitem.action_name }}</span>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="clear">
|
|
|
- <span>操作时间:</span><span></span>
|
|
|
<div class="fr">
|
|
|
- <span class="w"> </span><span>表示不同的点</span>
|
|
|
+ <span>操作时间:</span><span v-if="sitem">{{ sitem.addtime }}</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <div class="contrast-title">操作前</div>
|
|
|
- <div class="contrast-main" v-html="x"></div>
|
|
|
+ <div class="contrast-title" style="margin:0 0 10px 0">操作前:</div>
|
|
|
+ <div class="contrast-main" style="line-height: 25px;max-height:480px;height:100%;overflow-y: scroll;" v-html="x"></div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <div class="contrast-title">操作前</div>
|
|
|
- <div class="contrast-main" v-html="y">
|
|
|
- </div>
|
|
|
+ <div class="contrast-title" style="margin:0 0 10px 0">操作后:</div>
|
|
|
+ <div class="contrast-main" style="line-height: 25px;max-height:480px;height:100%;overflow-y: scroll;" v-html="y"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
@@ -43,13 +43,9 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
name: "contrastModel",
|
|
|
- props: ["showModel", "id", "sitem"],
|
|
|
+ props: ["showModel", "id", "sitem"],
|
|
|
data() {
|
|
|
return {
|
|
|
- a: "作为一个软 阿大幅度 让我无法惹我 !",
|
|
|
- b: "作为一个软 阿大幅度 234324324 让我无法惹我",
|
|
|
- x: "",
|
|
|
- y: "",
|
|
|
loading: true,
|
|
|
showModelThis: this.showModel,
|
|
|
};
|
|
@@ -71,146 +67,204 @@ export default {
|
|
|
methods: {
|
|
|
async initForm() {
|
|
|
this.loading = true;
|
|
|
- function StringBuffer() {
|
|
|
- this.__strings__ = [];
|
|
|
- }
|
|
|
- StringBuffer.prototype.append = function (str) {
|
|
|
- this.__strings__.push(str);
|
|
|
- return this;
|
|
|
- };
|
|
|
- //格式化字符串
|
|
|
- StringBuffer.prototype.appendFormat = function (str) {
|
|
|
- for (var i = 1; i < arguments.length; i++) {
|
|
|
- var parent = "\\{" + (i - 1) + "\\}";
|
|
|
- var reg = new RegExp(parent, "g");
|
|
|
- str = str.replace(reg, arguments[i]);
|
|
|
- }
|
|
|
+ const { action_item, action_after } = this.sitem;
|
|
|
+ // function htmlStringToArray(str) {
|
|
|
+ // var temp = document.createElement("iframe");
|
|
|
+ // temp.style.display = "none";
|
|
|
+ // document.body.appendChild(temp);
|
|
|
+ // var doc = temp.contentWindow.document;
|
|
|
+ // doc.open();
|
|
|
+ // doc.write(str);
|
|
|
+ // doc.close();
|
|
|
|
|
|
- this.__strings__.push(str);
|
|
|
- return this;
|
|
|
- };
|
|
|
- StringBuffer.prototype.toString = function () {
|
|
|
- return this.__strings__.join("");
|
|
|
- };
|
|
|
- StringBuffer.prototype.clear = function () {
|
|
|
- this.__strings__ = [];
|
|
|
- };
|
|
|
- StringBuffer.prototype.size = function () {
|
|
|
- return this.__strings__.length;
|
|
|
- };
|
|
|
+ // var array = htmlNodeToArray(doc.documentElement);
|
|
|
+ // temp.parentNode.removeChild(temp);
|
|
|
+ // return array;
|
|
|
+ // }
|
|
|
|
|
|
- var flag = 1;
|
|
|
+ // function htmlNodeToArray(node) {
|
|
|
+ // if (node.nodeType == 1) {
|
|
|
+ // var array = [node.tagName];
|
|
|
+ // if (node.childNodes.length) {
|
|
|
+ // for (var i = 0, child; (child = node.childNodes[i]); i++) {
|
|
|
+ // if (child.nodeType == 1 || child.nodeType == 3) {
|
|
|
+ // array.push(htmlNodeToArray(child));
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // } else if (node.innerText) {
|
|
|
+ // array.push([node.innerText]);
|
|
|
+ // }
|
|
|
+ // return array;
|
|
|
+ // } else if (node.nodeType == 3) {
|
|
|
+ // return [node.nodeValue];
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // console.log( htmlStringToArray(this.b));
|
|
|
|
|
|
- function getHighLightDifferent(a, b) {
|
|
|
- //console.log("输入:" + a);
|
|
|
- //console.log("输入:" + b);
|
|
|
+ // this.matchHTML();
|
|
|
|
|
|
- var temp = getDiffArray(a, b);
|
|
|
- var a1 = getHighLight(a, temp[0]);
|
|
|
- //console.log("输出:" + a1);
|
|
|
+ this.x = action_item;
|
|
|
+ this.y = action_after;
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ matchHTML() {
|
|
|
+ console.log(this.b);
|
|
|
+ // let pattern = /<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;
|
|
|
+ let pattern = /<[^>]+>/g;
|
|
|
+ // let pattern = /<(?:[^"'>]|"[^"]*"|'[^']*')*>/g;
|
|
|
+ // let pattern = /<(?:[^"'>]|(["'])[^"']*\1)*>/g;
|
|
|
+ console.log(this.b.match(pattern));
|
|
|
+ },
|
|
|
+ // async initForm() {
|
|
|
+ // this.loading = true;
|
|
|
+ // const { action_item, action_after } = this.sitem;
|
|
|
+ // this.a = action_item;
|
|
|
+ // this.b = action_after;
|
|
|
+ // function StringBuffer() {
|
|
|
+ // this.__strings__ = [];
|
|
|
+ // }
|
|
|
+ // StringBuffer.prototype.append = function (str) {
|
|
|
+ // this.__strings__.push(str);
|
|
|
+ // return this;
|
|
|
+ // };
|
|
|
+ // //格式化字符串
|
|
|
+ // StringBuffer.prototype.appendFormat = function (str) {
|
|
|
+ // for (var i = 1; i < arguments.length; i++) {
|
|
|
+ // var parent = "\\{" + (i - 1) + "\\}";
|
|
|
+ // var reg = new RegExp(parent, "g");
|
|
|
+ // str = str.replace(reg, arguments[i]);
|
|
|
+ // }
|
|
|
|
|
|
- var a2 = getHighLight(b, temp[1]);
|
|
|
- //console.log("输出:" + a2);
|
|
|
- //console.log(flag);
|
|
|
- return new Array(a1, a2);
|
|
|
- }
|
|
|
+ // this.__strings__.push(str);
|
|
|
+ // return this;
|
|
|
+ // };
|
|
|
+ // StringBuffer.prototype.toString = function () {
|
|
|
+ // return this.__strings__.join("");
|
|
|
+ // };
|
|
|
+ // StringBuffer.prototype.clear = function () {
|
|
|
+ // this.__strings__ = [];
|
|
|
+ // };
|
|
|
+ // StringBuffer.prototype.size = function () {
|
|
|
+ // return this.__strings__.length;
|
|
|
+ // };
|
|
|
|
|
|
- function getHighLight(source, temp) {
|
|
|
- var result = new StringBuffer();
|
|
|
- var sourceChars = source.split("");
|
|
|
- var tempChars = temp.split("");
|
|
|
- var flag = false;
|
|
|
- for (var i = 0; i < sourceChars.length; i++) {
|
|
|
- if (tempChars[i] != " ") {
|
|
|
- if (i == 0) {
|
|
|
- result.append("<span style='color:blue'>");
|
|
|
- result.append(sourceChars[i]);
|
|
|
- } else if (flag) {
|
|
|
- result.append(sourceChars[i]);
|
|
|
- } else {
|
|
|
- result.append("<span style='color:blue'>");
|
|
|
- result.append(sourceChars[i]);
|
|
|
- }
|
|
|
- flag = true;
|
|
|
- if (i == sourceChars.length - 1) {
|
|
|
- result.append("</span>");
|
|
|
- }
|
|
|
- } else if (flag == true) {
|
|
|
- result.append("</span>");
|
|
|
- result.append(sourceChars[i]);
|
|
|
- flag = false;
|
|
|
- } else {
|
|
|
- result.append(sourceChars[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- return result.toString();
|
|
|
- }
|
|
|
+ // var flag = 1;
|
|
|
|
|
|
- function getDiffArray(a, b) {
|
|
|
- var result = new Array();
|
|
|
- //选取长度较小的字符串用来穷举子串
|
|
|
- if (a.length < b.length) {
|
|
|
- var start = 0;
|
|
|
- var end = a.length;
|
|
|
- result = getDiff(a, b, start, end);
|
|
|
- } else {
|
|
|
- var start = 0;
|
|
|
- var end = b.length;
|
|
|
- result = getDiff(b, a, 0, b.length);
|
|
|
- result = new Array(result[1], result[0]);
|
|
|
- }
|
|
|
- return result;
|
|
|
- }
|
|
|
+ // function getHighLightDifferent(a, b) {
|
|
|
+ // //console.log("输入:" + a);
|
|
|
+ // //console.log("输入:" + b);
|
|
|
|
|
|
- //将a的指定部分与b进行比较生成比对结果
|
|
|
- function getDiff(a, b, start, end) {
|
|
|
- var result = new Array(a, b);
|
|
|
- var len = result[0].length;
|
|
|
- while (len > 0) {
|
|
|
- for (var i = start; i < end - len + 1; i++) {
|
|
|
- var sub = result[0].substring(i, i + len);
|
|
|
- var idx = -1;
|
|
|
- if ((idx = result[1].indexOf(sub)) != -1) {
|
|
|
- result[0] = setEmpty(result[0], i, i + len);
|
|
|
- result[1] = setEmpty(result[1], idx, idx + len);
|
|
|
- if (i > 0) {
|
|
|
- //递归获取空白区域左边差异
|
|
|
- result = getDiff(result[0], result[1], start, i);
|
|
|
- }
|
|
|
- if (i + len < end) {
|
|
|
- //递归获取空白区域右边差异
|
|
|
- result = getDiff(result[0], result[1], i + len, end);
|
|
|
- }
|
|
|
- len = 0; //退出while循环
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- len = parseInt(len / 2);
|
|
|
- //len = len - 1;
|
|
|
- //console.log(len);
|
|
|
- }
|
|
|
- //console.log(result.join(""));
|
|
|
- return result;
|
|
|
- }
|
|
|
+ // var temp = getDiffArray(a, b);
|
|
|
+ // var a1 = getHighLight(a, temp[0]);
|
|
|
+ // //console.log("输出:" + a1);
|
|
|
|
|
|
- //将字符串s指定的区域设置成空格
|
|
|
- function setEmpty(s, start, end) {
|
|
|
- var array = s.split("");
|
|
|
- for (var i = start; i < end; i++) {
|
|
|
- array[i] = " ";
|
|
|
- }
|
|
|
- return array.join("");
|
|
|
- }
|
|
|
- let list = getHighLightDifferent(this.a, this.b);
|
|
|
- this.x = list[0];
|
|
|
- this.y = list[1];
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
+ // var a2 = getHighLight(b, temp[1]);
|
|
|
+ // //console.log("输出:" + a2);
|
|
|
+ // //console.log(flag);
|
|
|
+ // return new Array(a1, a2);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function getHighLight(source, temp) {
|
|
|
+ // var result = new StringBuffer();
|
|
|
+ // var sourceChars = source.split("");
|
|
|
+ // var tempChars = temp.split("");
|
|
|
+ // var flag = false;
|
|
|
+ // for (var i = 0; i < sourceChars.length; i++) {
|
|
|
+ // if (tempChars[i] != " ") {
|
|
|
+ // if (i == 0) {
|
|
|
+ // result.append("<span style='color:blue'>");
|
|
|
+ // result.append(sourceChars[i]);
|
|
|
+ // } else if (flag) {
|
|
|
+ // result.append(sourceChars[i]);
|
|
|
+ // } else {
|
|
|
+ // result.append("<span style='color:blue'>");
|
|
|
+ // result.append(sourceChars[i]);
|
|
|
+ // }
|
|
|
+ // flag = true;
|
|
|
+ // if (i == sourceChars.length - 1) {
|
|
|
+ // result.append("</span>");
|
|
|
+ // }
|
|
|
+ // } else if (flag == true) {
|
|
|
+ // result.append("</span>");
|
|
|
+ // result.append(sourceChars[i]);
|
|
|
+ // flag = false;
|
|
|
+ // } else {
|
|
|
+ // result.append(sourceChars[i]);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // return result.toString();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // function getDiffArray(a, b) {
|
|
|
+ // var result = new Array();
|
|
|
+ // //选取长度较小的字符串用来穷举子串
|
|
|
+ // if (a.length < b.length) {
|
|
|
+ // var start = 0;
|
|
|
+ // var end = a.length;
|
|
|
+ // result = getDiff(a, b, start, end);
|
|
|
+ // } else {
|
|
|
+ // var start = 0;
|
|
|
+ // var end = b.length;
|
|
|
+ // result = getDiff(b, a, 0, b.length);
|
|
|
+ // result = new Array(result[1], result[0]);
|
|
|
+ // }
|
|
|
+ // return result;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // //将a的指定部分与b进行比较生成比对结果
|
|
|
+ // function getDiff(a, b, start, end) {
|
|
|
+ // var result = new Array(a, b);
|
|
|
+ // var len = result[0].length;
|
|
|
+ // while (len > 0) {
|
|
|
+ // for (var i = start; i < end - len + 1; i++) {
|
|
|
+ // var sub = result[0].substring(i, i + len);
|
|
|
+ // var idx = -1;
|
|
|
+ // if ((idx = result[1].indexOf(sub)) != -1) {
|
|
|
+ // result[0] = setEmpty(result[0], i, i + len);
|
|
|
+ // result[1] = setEmpty(result[1], idx, idx + len);
|
|
|
+ // if (i > 0) {
|
|
|
+ // //递归获取空白区域左边差异
|
|
|
+ // result = getDiff(result[0], result[1], start, i);
|
|
|
+ // }
|
|
|
+ // if (i + len < end) {
|
|
|
+ // //递归获取空白区域右边差异
|
|
|
+ // result = getDiff(result[0], result[1], i + len, end);
|
|
|
+ // }
|
|
|
+ // len = 0; //退出while循环
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // len = parseInt(len / 2);
|
|
|
+ // //len = len - 1;
|
|
|
+ // //console.log(len);
|
|
|
+ // }
|
|
|
+ // //console.log(result.join(""));
|
|
|
+ // return result;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // //将字符串s指定的区域设置成空格
|
|
|
+ // function setEmpty(s, start, end) {
|
|
|
+ // var array = s.split("");
|
|
|
+ // for (var i = start; i < end; i++) {
|
|
|
+ // array[i] = " ";
|
|
|
+ // }
|
|
|
+ // return array.join("");
|
|
|
+ // }
|
|
|
+ // let list = getHighLightDifferent(this.a, this.b);
|
|
|
+ // this.x = list[0];
|
|
|
+ // this.y = list[1];
|
|
|
+ // // console.log(this.a);
|
|
|
+ // // console.log(this.b);
|
|
|
+ // // console.log(this.x);
|
|
|
+ // // console.log(this.y);
|
|
|
+ // this.loading = false;
|
|
|
+ // },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.account {
|
|
|
+
|
|
|
}
|
|
|
</style>
|