scd_tools_ui/src/pages/netStructPicture/components/soureFile.vue

<!-- 源文件 -->
<template>
  <div class="source" v-loading="loading">
    <el-input
    v-model="text"
    :rows="2"
    type="textarea"
  />
  </div>
</template>
<script setup>
import { onMounted, watch, ref, inject } from "vue";
import { getSourcexml } from "@/api/iedNetwork";
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps({
  checkData: {
    type: Object,
    default: () => {},
  },
  delScdId:{
    type:String,
    default: '',
  }
});
const loading = ref(true);
const text = ref("");
const setPrefix = function (prefixIndex) {
  let result = "";
  let span = "    "; //缩进长度
  let output = [];
  for (let i = 0; i < prefixIndex; ++i) {
    output.push(span);
  }
  result = output.join("");
  return result;
};
const formateXml = function (xmlStr) {
  let text = xmlStr;
  //使用replace去空格
  text = text
    "\n" +
    text
      .replace(/(<\w+)(\s.*?>)/g, ($0, name, props) => {
        return name + " " + props.replace(/\s+(\w+=)/g, " $1");
      })
      .replace(/>\s*?</g, ">\n<");

  //处理注释，对注释进行编码
  text = text
    .replace(/\n/g, "\r")
    .replace(/<!--(.+?)-->/g, function ($0, text) {
      return "<!--" + escape(text) + "-->";
    })
    .replace(/\r/g, "\n");

  //调整格式  以压栈方式递归调整缩进
  let rgx =
    /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm;
  let nodeStack = [];
  let output = text.replace(
    rgx,
    ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) => {
      let isClosed =
        isCloseFull1 == "/" ||
        isCloseFull2 == "/" ||
        isFull1 == "/" ||
        isFull2 == "/";
      let prefix = "";
      if (isBegin == "!") {
        //!开头
        prefix = setPrefix(nodeStack.length);
      } else {
        if (isBegin != "/") {
          ///开头
          prefix = setPrefix(nodeStack.length);
          if (!isClosed) {
            //非关闭标签
            nodeStack.push(name);
          }
        } else {
          nodeStack.pop(); //弹栈
          prefix = setPrefix(nodeStack.length);
        }
      }
      return "\n" + prefix + all;
    }
  );
  let outputText = output.substring(1);

  //还原注释内容
  outputText = outputText
    .replace(/\n/g, "\r")
    .replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
      if (prefix.charAt(0) == "\r") prefix = prefix.substring(1);
      // 解码
      text = window.unescape(text).replace(/\r/g, "\n");
      let ret = "\n" + prefix + "<!--" + text.replace(/^\s*/gm, prefix) + "-->";
      return ret;
    });
  return outputText;

};
const getHtml = async () => {
  const res = await getSourcexml({
    scd_id: scdIdValue,
    ied_name: props.checkData.ied_name,
  });
  text.value = formateXml(res.data);
  if (res) {
    loading.value = false;
  }
};
watch(
  () => props.checkData,
  (newValue) => {
    text.value = "";
    loading.value = true;
    if (newValue != null) {
      getHtml();
    }
  }
);
let scdIdValue = '';
onMounted(() => {
  if (props.delScdId) {
    scdIdValue = props.delScdId;
  } else {
    scdIdValue = route.query.id;
  }
  getHtml();
});
</script>
<style scoped lang="scss">
.source {
  margin: 12px;
  border-radius: 2px;
}
:deep(.el-textarea__inner){
  height: 69vh;
}
.cont {
  border: 1px solid #d3d1d1;
  padding: 10px;
}
</style>