xiaoshi_system/src/views/patentMining/components/projectPath.vue

<template>
  <!-- 项目流程 -->
  <div class="projectPath" style="width: 100%;height:100%;">
    <span>项目流程</span>
    <el-divider></el-divider>
    <svg viewBox="0 0 1800 400" width="100%" height="100%">
      <g transform=translate(0,0) class="svgG">
        <rect width="200" height="120" :fill="getColor('创新点流程')" @click="toFilePage('创新点流程')"> </rect>
        <text x="30" y="65">创新点流程</text>
        <circle cx="150" cy="60" r="16" stroke-width="1" stroke="#fff" :fill="getColor('创新点流程')" />
        <text :x="getNumber('创新点流程') >9? '140':'145'" y="65" fill="#fff">{{ getNumber('创新点流程') }}</text>
        <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>
      <g transform="translate(360,0)" class="svgG">
        <rect width="200" height="120" :fill="getColor('查新检索')" @click="toFilePage('查新检索')"> </rect>
        <text x="30" y="65">查新检索</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('查新检索')" />
        <text :x="getNumber('查新检索') >9? '140':'145'" y="65" fill="#fff">{{ getNumber('查新检索') }}</text>
        <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>
      <g transform="translate(720,0)" class="svgG">
        <rect width="200" height="120" :fill="getColor('保护主题规划')" @click="toFilePage('保护主题规划')"> </rect>
        <text x="30" y="65">保护主题规划</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('保护主题规划')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('保护主题规划') }}</text>
        <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>
      <g transform="translate(1080,0)" class="svgG">
        <rect width="200" height="120" :fill="getColor('独权撰写')" @click="toFilePage('独权撰写')"> </rect>
        <text x="30" y="65">独权撰写</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('独权撰写')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('独权撰写') }}</text>
        <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>
      <g transform="translate(1440,0)" class="svgG">
        <rect width="200" height="120" :fill="getColor('从权撰写')" @click="toFilePage('从权撰写')"> </rect>
        <text x="30" y="65">从权撰写</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('从权撰写')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('从权撰写') }}</text>
        <line x1="100" y1="120" x2="100" y2="190" stroke='#333'></line>
        <polygon points="95,190,100,200,105,190"></polygon>
      </g>
      <!-- <g transform="translate(1080,200)" class="svgG">
        <rect width="200" height="120" :fill="getColor('从权撰写')" @click="toFilePage('从权撰写')">  </rect>
        <text x="30" y="65">从权撰写</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('从权撰写')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('从权撰写') }}</text>
        <line x1="0" y1="60" x2="-150" y2="60" stroke='#333'></line>
        <polygon points="-150,55,-160,60,-150,65"></polygon>
      </g> -->
      <g transform="translate(1440,200)" class="svgG">
        <rect width="200" height="120" :fill="getColor('申请文件定稿')" @click="toFilePage('申请文件定稿')"> </rect>
        <text x="30" y="65">申请文件定稿</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('申请文件定稿')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('申请文件定稿') }}</text>
        <line x1="0" y1="60" x2="-150" y2="60" stroke='#333'></line>
        <polygon points="-150,55,-160,60,-150,65"></polygon>
      </g>
      <g transform="translate(1080,200)" class="svgG">
        <rect width="200" height="120" :fill="getColor('说明书规划撰写')" @click="toFilePage('说明书规划撰写')"> </rect>
        <text x="15" y="65" xml:space='preserve'>说明书规划撰写
        </text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('说明书规划撰写')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('说明书规划撰写') }}</text>
      </g>

    </svg>


  </div>
</template>

<script>
export default {
  data() {
    return {
      numObj: {
        '创新点流程':12,
        '查新检索': 0,
        '保护主题规划': 0,
        '独权撰写': 0,
        '从权撰写': 0,
        '申请文件定稿': 0,
        '说明书规划撰写': 0,
      },
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    // 获取文件数量
    getNumber(str) {
      return this.numObj[str]
    },
    // 获取背景颜色
    getColor(str) {
     return this.getNumber(str)>0?'#5ed325':'pink'
    },
    // 跳转文件列表界面
    toFilePage(str) {
      console.log(str);
    },
  },
}
</script>

<style lang="scss">
.projectPath {
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.projectPath{
  .svgG{
    cursor: pointer;
  }
}
</style>