<template>
<div class="word_analyse">
<div class="word_header clearfix">
<span class="word_result">实体识别:</span>
</div>
<div class="word_content clearfix">
<p v-html="textContent"></p>
</div>
</div>
</template>
<script>
import { getNer } from "@/utils/api";
export default {
data() {
return {
textContent: ""
};
},
mounted() { },
methods: {
textNerApi(val) {
if (val) {
let strList = val.split("");
let params = {
data: val
};
getNer(params).then(res => {
if (res.resultCode == "1") {
if (res.result.length > 0) {
for (var i = 0; i < res.result.length; i++) {
var [type, startNum, endNum] = res.result[i];
if (startNum == endNum - 1) {
strList[startNum] = `<span class="class_${type}">${
val[startNum]
}
<div class="bg_text">
${this.setType(type)}
</div>
</span>`;
} else {
strList[
startNum
] = `<span class="class_${type}">${val[startNum]}`;
strList[endNum - 1] = `${val[endNum - 1]}
<div class="bg_text">
${this.setType(type)}
</div>
</span>`;
}
}
this.textContent = strList.join("");
}
} else {
this.$msg.error(res.errorDesc);
}
});
} else {
this.textContent = "";
}
},
setType(type) {
let typeName = "";
switch (type) {
case "ORG":
typeName = "organization";
break;
case "LOC":
typeName = "location";
break;
case "TIME":
typeName = "time";
break;
case "PER":
typeName = "person";
break;
case "NUM":
typeName = "number";
break;
}
return typeName;
}
}
};
</script>
<style lang="scss">
.word_analyse {
background: #f6f6f6;
height: 344px;
padding: 20px 25px 20px 25px;
margin-top: 15px;
.word_result {
float: left;
margin-left: 15px;
font-size: 16px;
height: 34px;
line-height: 34px;
color: #333333;
font-weight: bold;
}
.word_content {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(212, 212, 212, 1);
width: 100%;
height: 258px;
padding: 21px 15px;
margin-top: 7px;
overflow: auto;
p {
font-size: 14px;
line-height: 50px;
span {
position: relative;
display: inline-block;
min-width: 46px;
height: 26px;
text-align: center;
line-height: 26px;
cursor: pointer;
.bg_text {
position: absolute;
top: 54px;
right: 0;
left: 50%;
font-size: 14px;
text-align: center;
display: none;
z-index: 100;
box-sizing: border-box;
color: #fff;
transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
background: #6a6a6a;
&::before {
content: "";
background: url("../../../assets/analyse/sanjiao.png") top center
no-repeat;
position: absolute;
top: -6px;
transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
left: 50%;
width: 14px;
height: 6px;
}
}
&:hover {
.bg_text {
display: block;
}
}
}
span::after {
position: absolute;
top: 25px;
left: 0;
right: 0;
text-align: center;
height: 20px;
min-width: 35px;
line-height: 20px;
color: #fff;
font-size: 14px;
}
.class_ORG {
border: 1px solid #4db1f6;
position: relative;
&::after {
content: "ORG";
background: #4db1f6;
}
.bg_text {
width: 86px;
}
}
.class_NUM {
border: 1px solid #65ce8a;
position: relative;
&::after {
content: "NUM";
background: #65ce8a;
}
.bg_text {
width: 58px;
}
}
.class_LOC {
border: 1px solid #a0aab5;
position: relative;
&::after {
content: "LOC";
background: #a0aab5;
}
.bg_text {
width: 62px;
}
}
.class_PER {
border: 1px solid #e1e271;
position: relative;
&::after {
content: "PER";
background: #e1e271;
}
.bg_text {
width: 54px;
}
}
.class_TIME {
border: 1px solid #45d0d8;
position: relative;
&::after {
content: "TIME";
background: #45d0d8;
}
.bg_text {
width: 34px;
}
}
}
}
}
</style>
根据后台返回的数据给文本增加标识
最新推荐文章于 2022-12-20 21:18:50 发布