sgxt_web/src/views/backOfficeSystem/SemanticAnalysis/components/showDetails.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>