127 lines
3.1 KiB
Vue
127 lines
3.1 KiB
Vue
<template>
|
|
<div style="padding: 10px 15px;">
|
|
<div class="flex align-center just-between" style="width: 100%;">
|
|
<div class="searchToolTitle">
|
|
{{ title }}
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" plain @click="handleClose">关闭</el-button>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, index) in model" :key="index">
|
|
<div class="searchTsubTitle">{{ data[item.value] }}</div>
|
|
<formNewModel v-model="item.model" :formList="item.inputs" ref="elform" :rules="rules" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, toRaw, computed, watch, nextTick, onMounted, getCurrentInstance } from "vue";
|
|
import formNewModel from "./formNewModel.vue"
|
|
import emitter from "@/utils/eventBus.js";
|
|
const { proxy } = getCurrentInstance()
|
|
const rules = ref([])
|
|
const elform = ref()
|
|
const props = defineProps({
|
|
listData: {
|
|
type: String,
|
|
default: ''
|
|
}, title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
|
|
})
|
|
const data = {
|
|
10: "实体识别分析",
|
|
20: "事件识别分析",
|
|
30: "关系识别分析",
|
|
40: "特征识别分析",
|
|
}
|
|
const model = ref()
|
|
const numberData = 0
|
|
const jx = (val) => {
|
|
if (val) {
|
|
const jsonObject = val;
|
|
if (Array.isArray(jsonObject)) {
|
|
model.value = jsonObject.reduce((acc, cur) => {
|
|
const key = Object.keys(cur)[0];
|
|
const prefix = key.substring(0, 2);
|
|
if (!acc[prefix] && prefix !== '50' && prefix !== '60') {
|
|
acc[prefix] = {
|
|
inputs: [],
|
|
model: {},
|
|
value: prefix
|
|
};
|
|
}
|
|
if (prefix === '50' || prefix === '60') {
|
|
acc[10].inputs.push({ label: cur[key].name, prop: key, type: "input", width: "33%" });
|
|
acc[10].model[key] = cur[key].content ? cur[key].content : '-';
|
|
} else {
|
|
acc[prefix].inputs.push({ label: cur[key].name, prop: key, type: "input", width: "33%" });
|
|
acc[prefix].model[key] = cur[key].content == '-' || cur[key].content == '' || cur[key].content == '无' ? '/' : cur[key].content;
|
|
}
|
|
return acc;
|
|
}, {});
|
|
} else {
|
|
const str = JSON.parse(jsonObject);
|
|
jx(str)
|
|
numberData++
|
|
if (numberData == 3) {
|
|
numberData=0
|
|
return
|
|
}
|
|
}
|
|
|
|
} else {
|
|
model.value = []
|
|
proxy.$message({ type: "error", message: "解析失败" });
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
const json = props.listData;
|
|
const jsonString = JSON.parse(json);
|
|
jx(jsonString)
|
|
})
|
|
watch(() => props.listData, (val) => {
|
|
if (val) {
|
|
const json = val;
|
|
const jsonString = JSON.parse(json);
|
|
jx(jsonString)
|
|
}
|
|
},{deep:true})
|
|
const handleClose = () => {
|
|
emitter.emit('showDetails', true)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.searchToolTitle {
|
|
font-size: 18px;
|
|
font-family: 'verdana';
|
|
position: relative;
|
|
color: #000;
|
|
}
|
|
|
|
.searchToolTitle::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 80px;
|
|
border-radius: 5px;
|
|
height: 4px;
|
|
background-color: #0386fb;
|
|
background: linear-gradient(90deg, #0aa1ff 2%, #ffffff 100%);
|
|
}
|
|
|
|
.searchTsubTitle {
|
|
font-size: 16px;
|
|
font-family: 'verdana';
|
|
color: #000;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|