xiaoshi_system/src/utils/model/svg/customSvg.vue

<template>
  <!-- 自定义组件 -->
  <div class="customSvg" >
    <!-- 用来存放svg -->
    <div class="svgDiv" v-html="html">
    </div>
    <myPopover :QuestionTotal="QuestionTotal" @questionId="getQuestion"></myPopover>
  </div>
</template>

<script>
import mixins from "./mixins";
import MyPopover from './Popover.vue'
export default {
  components: {
    MyPopover
  },
  mixins: [mixins],
  props: {
    title: {
      type: String,
      default: '竞争对手威胁应对'
    },
  },
  watch: {
    'QuestionTotal'(val) {
      if (val && Object.keys(this.total).length > 0 && Object.keys(this.QuestionTotal).length > 0) {
        this.getHtml()
      }
    },
    'total'(val) {
      if (val && Object.keys(this.total).length > 0 && Object.keys(this.QuestionTotal).length > 0) {
        this.getHtml()
      }
    }
  },
  data() {
    return {
      svgData: [
        {
          title: '专利培育布局',
          value: '../专利培育布局A1.svg'
        },
        {
          title: '产品上市/出口风险控制',
          value: '../产品上市出口风险控制A2.svg'
        },
        {
          title: '侵权纠纷',
          value: '../侵权纠纷A3.svg'
        },
        {
          title: '专利维权',
          value: '../专利维权A4.svg'
        },
        {
          title: 'IPO上市',
          value: '../IPO上市A5.svg'
        },
        {
          title: '专利盘点与运维',
          value: '../专利盘点与运维A6.svg'
        },
        {
          title: '科技与重大立项专利导航',
          value: '../科技与重大立项专利导航A7.svg'
        },
        {
          title: '竞争对手威胁应对',
          value: '../竞争对手威胁应对A8.svg'
        },
      ],
      html: '',
      fileContent:''
    }
  },
  async mounted() {
    await this.init()
  },
  methods: {
    async init() {
      // 需要显示哪一个svg文件
      let show = this.svgData.find(item => {
        return item.title == this.title
      });
      // 展示svg文件
      await fetch(show.value).then(res => res.text()).then(data => {
        this.fileContent = data
        if (Object.keys(this.total).length > 0 && Object.keys(this.QuestionTotal).length > 0) {
          this.getHtml()
        }
      })
    },
    //获取svg内容
    getHtml() {
        var data = this.fileContent
        let reg = new RegExp("\{\{(.+?)\}\}", "g");
        let a = data.match(reg);
        let reg1 = new RegExp("(?<=\{\{)(.*)?(?=\}\})",'g')
        if(a){
          a.forEach(item => {
            var arr = item.match(reg1)[0].split(/\,|\，/)
            if (arr[1].trim() == 1) {
              var value = this.getQuestionTotal(arr[0].trim())
            } else if (arr[1].trim() == 2) {
              var value = this.getTotal(arr[0].trim())
            } else {
              var num = this.getTotal(arr[0].trim())
              var value = num>0?arr[1].trim():'#63769b69'
            }
            data = data.replace(item, value);
          })
        }
        
        this.html = data;
    },
    //查看单个事件流程图
    getQuestion(val){
      console.log(val)
    }
  },
}
</script>

<style lang="scss" scoped>
.customSvg{
  position: relative;
  width: 100%;
  height: 100%;
  .svgDiv{
    position: absolute;
    left: 0; 
    top: 0;
    bottom:0;
    right:0;
    margin:auto;
    width: 100%;
    height: 100%;
  }
}
</style>