|
@@ -0,0 +1,126 @@
|
|
|
+<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>
|