Skip to content

T
ty_patentSys
Commit 4f28031f by liudx
Options

导出专利模板

parent 2a3ab40a
Showing with 516 additions and 187 deletions
package-lock.json
...@@ -2383,6 +2383,11 @@ ...@@ -2383,6 +2383,11 @@
"@xtuc/long": "4.2.2" "@xtuc/long": "4.2.2"
} }
}, },
"@xmldom/xmldom": {
"version": "0.8.10",
"resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
},
"@xtuc/ieee754": { "@xtuc/ieee754": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
...@@ -4915,6 +4920,22 @@ ...@@ -4915,6 +4920,22 @@
"esutils": "^2.0.2" "esutils": "^2.0.2"
} }
}, },
"docxtemplater": {
"version": "3.37.12",
"resolved": "https://registry.npmmirror.com/docxtemplater/-/docxtemplater-3.37.12.tgz",
"integrity": "sha512-KX+5dNZ1Nu0+6Tr2XNldmw9uHCyUn/ei0Uuaa6P37drgGFIoRiVHgMjKDzIaa32qd4u0sbHnYYJ+yWTwSDujLw==",
"requires": {
"@xmldom/xmldom": "^0.8.8"
}
},
"docxtemplater-image-module-free": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/docxtemplater-image-module-free/-/docxtemplater-image-module-free-1.1.1.tgz",
"integrity": "sha512-aWOzVQN7ggDYjfoy3pTTNrcrZ7/CJrQcI9cT+hmyHE6nRLR67nt5yPFPe9hm9VWbfYIED2fi+3itOnF0TE/RWQ==",
"requires": {
"xmldom": "^0.1.27"
}
},
"dom-align": { "dom-align": {
"version": "1.12.4", "version": "1.12.4",
"resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz", "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
...@@ -5943,6 +5964,11 @@ ...@@ -5943,6 +5964,11 @@
} }
} }
}, },
"file-saver": {
"version": "2.0.5",
"resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"file-uri-to-path": { "file-uri-to-path": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
...@@ -7650,6 +7676,11 @@ ...@@ -7650,6 +7676,11 @@
"verror": "1.10.0" "verror": "1.10.0"
} }
}, },
"jszip-utils": {
"version": "0.1.0",
"resolved": "https://registry.npmmirror.com/jszip-utils/-/jszip-utils-0.1.0.tgz",
"integrity": "sha512-tBNe0o3HAf8vo0BrOYnLPnXNo5A3KsRMnkBFYjh20Y3GPYGfgyoclEMgvVchx0nnL+mherPi74yLPIusHUQpZg=="
},
"killable": { "killable": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmmirror.com/killable/-/killable-1.0.1.tgz", "resolved": "https://registry.npmmirror.com/killable/-/killable-1.0.1.tgz",
...@@ -9027,6 +9058,21 @@ ...@@ -9027,6 +9058,21 @@
"pinkie": "^2.0.0" "pinkie": "^2.0.0"
} }
}, },
"pizzip": {
"version": "3.1.4",
"resolved": "https://registry.npmmirror.com/pizzip/-/pizzip-3.1.4.tgz",
"integrity": "sha512-08yol1Of5Og1E0a1R56c+Z1jVkvfTEBUouwG9WYwCqpj8BjdcpEpLgZsrdLFNQYRgtxK0OOe0JpmBWJdrPr6Dg==",
"requires": {
"pako": "^2.1.0"
},
"dependencies": {
"pako": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
}
}
},
"pkg-dir": { "pkg-dir": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz", "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
...@@ -13316,6 +13362,11 @@ ...@@ -13316,6 +13362,11 @@
"async-limiter": "~1.0.0" "async-limiter": "~1.0.0"
} }
}, },
"xmldom": {
"version": "0.1.31",
"resolved": "https://registry.npmmirror.com/xmldom/-/xmldom-0.1.31.tgz",
"integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
},
"xtend": { "xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
......
package.json
...@@ -12,8 +12,13 @@ ...@@ -12,8 +12,13 @@
"axios": "^1.4.0", "axios": "^1.4.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
"docxtemplater": "^3.37.12",
"docxtemplater-image-module-free": "^1.1.1",
"echarts": "^5.4.2", "echarts": "^5.4.2",
"echarts-wordcloud": "^2.1.0", "echarts-wordcloud": "^2.1.0",
"file-saver": "^2.0.5",
"jszip-utils": "^0.1.0",
"pizzip": "^3.1.4",
"postcss-px2rem": "^0.3.0", "postcss-px2rem": "^0.3.0",
"px2rem-loader": "^0.1.9", "px2rem-loader": "^0.1.9",
"vue": "^3.0.0", "vue": "^3.0.0",
......
src/components/EchartsCloud.vue
...@@ -85,9 +85,6 @@ export default { ...@@ -85,9 +85,6 @@ export default {
); );
}, },
}, },
//位置相关设置
// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
// Default to be put in the center and has 75% x 80% size.
left: "center", left: "center",
top: "center", top: "center",
right: null, right: null,
......
src/components/EchartsCon.vue
...@@ -7,9 +7,7 @@ import * as echarts from "echarts"; ...@@ -7,9 +7,7 @@ import * as echarts from "echarts";
export default { export default {
name: "EchartsCon", name: "EchartsCon",
data() { data() {
return { return {};
};
}, },
props: { props: {
id: { id: {
...@@ -86,14 +84,32 @@ export default { ...@@ -86,14 +84,32 @@ export default {
this.init(); this.init();
}, },
methods: { methods: {
// hover() {
// let chart = echarts.init(document.getElementById(this.id));
// chart.on("mousemove", function (params) {
// console.log(params.event.offsetX);
// // let echartsraodar = document.getElementById("echartsraodar");
// // let tooldiv = echartsraodar.getElementsByTagName("div")[1];
// // tooldiv.style.width= '320px';
// // tooldiv.style.wordBreak='break-all'
// // console.log(tooldiv.innerHTML);
// console.log(params);
// if (params.name == "技术质量") {
// // tooldiv.innerHTML = '从有效专利占专利申请总量比例、有效发明专利占有效专利比例和风险专利占全部申请专利的比例分析'
// }
// // chart.setOption(that.option);
// });
// },
init() { init() {
let chart = echarts.init(document.getElementById(this.id));
let chart = echarts.init(document.getElementById(this.id));
chart.setOption(this.option);
chart.setOption(this.option);
// let that = this;
// window.addEventListener("resize", chart.resize); // window.addEventListener("resize", chart.resize);
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped></style>
src/router/index.js
...@@ -126,7 +126,18 @@ const routes = [ ...@@ -126,7 +126,18 @@ const routes = [
component: userInfo, component: userInfo,
}, },
] ]
} },
// {
// path: '/404',
// name: 'NotFound',
// component: () => import('@/views/NotFound/Index.vue')
// },
// // 所有未定义路由，全部重定向到404页
// {
// path: '/:pathMatch(.*)',
// redirect: '/404'
// }
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
// // route level code-splitting // // route level code-splitting
......
src/views/company/companyDetails.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<a-breadcrumb-item>专利</a-breadcrumb-item> <a-breadcrumb-item>专利</a-breadcrumb-item>
<a-breadcrumb-item>公司详情</a-breadcrumb-item> <a-breadcrumb-item>公司详情</a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
<div class="back_btn">返回</div> <div class="back_btn" @click="backbtn">返回</div>
<div class="details_title"> <div class="details_title">
<div class="company_num"> <div class="company_num">
<span>{{ "山西煤炭进出口集团有限公司" }}</span> <span>{{ "山西煤炭进出口集团有限公司" }}</span>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="btn_group"> <div class="btn_group">
<span><img src="@/static/patent/icon-dc.png" alt="" />导出</span> <span @click="daochu()"><img src="@/static/patent/icon-dc.png" alt="" />导出</span>
<span v-if="follow" <span v-if="follow"
><img src="@/static/patent/icon-gz.png" alt="" />关注</span ><img src="@/static/patent/icon-gz.png" alt="" />关注</span
> >
...@@ -118,6 +118,10 @@ export default { ...@@ -118,6 +118,10 @@ export default {
getCurrentAnchor() { getCurrentAnchor() {
return "#technicalSummary"; return "#technicalSummary";
}, },
//返回上一页
backbtn(){
this.$router.go(-1)
}
}, },
created() {}, created() {},
}; };
...@@ -141,6 +145,7 @@ export default { ...@@ -141,6 +145,7 @@ export default {
position: absolute; position: absolute;
right: 80px; right: 80px;
top: 10px; top: 10px;
cursor: pointer;
} }
.nav_bread { .nav_bread {
height: 50px; height: 50px;
......
src/views/company/cooperation.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="company_con"> <div class="company_con">
<div class="company_con_left"> <div class="company_con_left">
<!-- 联合申请 --> <!-- 联合申请 -->
<div class="company_con1" id=""> <div class="company_con1" id="jointApplication">
<h2 class="title">联合申请</h2> <h2 class="title">联合申请</h2>
<p> <p>
在遇到技术创新难题时，企业往往会借助外部机构的研究优势和实力来共同研发解决。在某个技术领域企业的产学研合作次数越多，可以反映企业在该技术领域布局的意愿更强烈。同时，关注产学研合作的主要伙伴，可进一步分析企业在主要布局领域的技术依赖程度和权属纠纷可能性。该企业与其他公司、高校、研究所等机构共进行了6次产学研合作。其中，与山西凌志达煤业有限公司最为密切，合作次数为6次，与该企业合作次数最多的申请人如下图所示。 在遇到技术创新难题时，企业往往会借助外部机构的研究优势和实力来共同研发解决。在某个技术领域企业的产学研合作次数越多，可以反映企业在该技术领域布局的意愿更强烈。同时，关注产学研合作的主要伙伴，可进一步分析企业在主要布局领域的技术依赖程度和权属纠纷可能性。该企业与其他公司、高校、研究所等机构共进行了6次产学研合作。其中，与山西凌志达煤业有限公司最为密切，合作次数为6次，与该企业合作次数最多的申请人如下图所示。
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<EchartsCon :option="option1" :id="'echarts1'"></EchartsCon> <EchartsCon :option="option1" :id="'echarts1'"></EchartsCon>
</div> </div>
<!-- 专利购买 --> <!-- 专利购买 -->
<div class="company_con1" id=""> <div class="company_con1" id="PatentPurchase">
<h2 class="title">专利购买</h2> <h2 class="title">专利购买</h2>
<p> <p>
分析该企业专利购买历史，了解该企业向哪些专利权人购买了专利，以及购买了哪些专利。如果该企业购买专利数量较多，需要关注这些外购专利是否为企业的核心专利，进而分析企业的研发能力。该企业向山西凌志达煤业有限公司购买专利最多，为6件。 分析该企业专利购买历史，了解该企业向哪些专利权人购买了专利，以及购买了哪些专利。如果该企业购买专利数量较多，需要关注这些外购专利是否为企业的核心专利，进而分析企业的研发能力。该企业向山西凌志达煤业有限公司购买专利最多，为6件。
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
style="font-size: 20px; color: #1C1C28; font-weight: bold" style="font-size: 20px; color: #1C1C28; font-weight: bold"
title="技术合作" title="技术合作"
/> />
<a-anchor-link href="#businessInfo" title="联合申请" /> <a-anchor-link href="#jointApplication" title="联合申请" />
<a-anchor-link href="#shareholder" title="专利购买" /> <a-anchor-link href="#PatentPurchase" title="专利购买" />
</a-anchor> </a-anchor>
<div id="components-back-top-demo-custom"> <div id="components-back-top-demo-custom">
......
src/views/company/overview.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="company_con"> <div class="company_con">
<div class="company_con_left"> <div class="company_con_left">
<!-- 研发规模 --> <!-- 研发规模 -->
<div class="company_con1" id=""> <div class="company_con1" id="researchDevelopment ">
<h2 class="title">研发规模</h2> <h2 class="title">研发规模</h2>
<a-descriptions <a-descriptions
bordered bordered
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</a-descriptions> </a-descriptions>
</div> </div>
<!-- 研发可持续性 --> <!-- 研发可持续性 -->
<div class="company_con1" id=""> <div class="company_con1" id="ResearchSustainable">
<h2 class="title">研发可持续性</h2> <h2 class="title">研发可持续性</h2>
<p> <p>
企业的总专利申请量为7件，最早专利申请是2018年，企业在2018年的专利申请量最多，为6件且专利授权率为50.00%。 企业的总专利申请量为7件，最早专利申请是2018年，企业在2018年的专利申请量最多，为6件且专利授权率为50.00%。
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
></EchartsCon> ></EchartsCon>
</div> </div>
<!-- 专利结构分析 --> <!-- 专利结构分析 -->
<div class="company_con1" id=""> <div class="company_con1" id="PatentAnalysis">
<h2 class="title">专利结构分析</h2> <h2 class="title">专利结构分析</h2>
<p> <p>
专利结构可从专利类型以及专利基本法律状态两个方面进行分析。从专利类型来看，一般在评估专利技术质量时，普遍认为发明>实用新型>外观。因此，关注发明专利的占比高低，可以帮助了解企业历史研发的技术质量水平。从专利基本法律状态来看，关注失效专利的占比，可以帮助了解企业当前持有技术的质量水平。该企业的专利数量为7件，其中发明专利4件，占比57.14%；失效专利4件，占比57.14%。 专利结构可从专利类型以及专利基本法律状态两个方面进行分析。从专利类型来看，一般在评估专利技术质量时，普遍认为发明>实用新型>外观。因此，关注发明专利的占比高低，可以帮助了解企业历史研发的技术质量水平。从专利基本法律状态来看，关注失效专利的占比，可以帮助了解企业当前持有技术的质量水平。该企业的专利数量为7件，其中发明专利4件，占比57.14%；失效专利4件，占比57.14%。
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</div> </div>
</div> </div>
<!-- 技术领域布局 --> <!-- 技术领域布局 -->
<div class="company_con1" id=""> <div class="company_con1" id="TechnicalLayout">
<h2 class="title">技术领域布局</h2> <h2 class="title">技术领域布局</h2>
<p> <p>
特定周期内，某个主题关键词出现的次数越多，则企业在该主题领域的技术布局越多。通过算法分析，该企业近期主要专注在履带式、运输车、液压支架、支架搬运车、运输设备等技术领域 特定周期内，某个主题关键词出现的次数越多，则企业在该主题领域的技术布局越多。通过算法分析，该企业近期主要专注在履带式、运输车、液压支架、支架搬运车、运输设备等技术领域
...@@ -90,11 +90,10 @@ ...@@ -90,11 +90,10 @@
style="font-size: 20px; color: #1c1c28; font-weight: bold" style="font-size: 20px; color: #1c1c28; font-weight: bold"
title="研发概要" title="研发概要"
/> />
<a-anchor-link href="#businessInfo" title="研发规模" /> <a-anchor-link href="#researchDevelopment" title="研发规模" />
<a-anchor-link href="#shareholder" title="研发可持续性" /> <a-anchor-link href="#ResearchSustainable" title="研发可持续性" />
<!-- <a-anchor-link href="#appAera" title="应用领域" /> --> <a-anchor-link href="#PatentAnalysis" title="专利结构分析" />
<a-anchor-link href="#keyPerson" title="专利结构分析" /> <a-anchor-link href="#TechnicalLayout" title="技术领域布局" />
<a-anchor-link href="#investment" title="技术领域布局" />
</a-anchor> </a-anchor>
<div id="components-back-top-demo-custom"> <div id="components-back-top-demo-custom">
......
src/views/company/technology.vue
...@@ -3,18 +3,48 @@ ...@@ -3,18 +3,48 @@
<div class="company_con"> <div class="company_con">
<div class="company_con_left"> <div class="company_con_left">
<!-- 科创能力分析 --> <!-- 科创能力分析 -->
<div class="company_con1" id=""> <div class="company_con1" id="Ability">
<h2 class="title">科创能力分析</h2> <h2 class="title">科创能力分析</h2>
<div style="display: flex;"> <div style="display: flex; position: relative">
<EchartsCon <!-- <EchartsCon
:option="option1" :option="option1"
:id="'echarts1'" :id="'echartsraodar'"
class="echarts" class="echarts"
></EchartsCon> ></EchartsCon> -->
<!-- <div class="hover">111</div> --> <div
<EchartsCon :option="option2" :id="'echarts2'"></EchartsCon> id="echartsraodar"
class="echarts"
style="width: 100%; height: 300px"
></div>
<div
class="hover"
v-if="hover"
ref="hover"
:style="{ left: left, top: top }"
>
{{ con }}
</div>
<EchartsCon :option="option2" :id="'echartsscatter'"></EchartsCon>
</div> </div>
</div>
</div>
<div class="company_con_anchor">
<a-anchor>
<a-anchor-link
style="font-size: 20px; color: #1C1C28; font-weight: bold"
title="科创能力评价"
/>
<a-anchor-link href="#Ability" title="科创能力分析" />
</a-anchor>
<div id="components-back-top-demo-custom">
<a-back-top>
<div class="ant-back-top-inner">
<img src="@/static/common/icon-top.png" alt="">
回到顶部
</div>
</a-back-top>
<!-- <div class="back">回到顶部</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -22,6 +52,7 @@ ...@@ -22,6 +52,7 @@
</template> </template>
<script> <script>
import * as echarts from "echarts";
import EchartsCon from "../../components/EchartsCon"; import EchartsCon from "../../components/EchartsCon";
export default { export default {
name: "technology", name: "technology",
...@@ -30,65 +61,39 @@ export default { ...@@ -30,65 +61,39 @@ export default {
}, },
data() { data() {
return { return {
option1: null,
option2: null, option2: null,
hover: false,
con: "",
}; };
}, },
mounted() {
this.getOption1();
},
created() { created() {
this.init(); this.getOption2();
}, },
methods: { methods: {
init() {
this.getOption1();
this.getOption2();
},
getOption1() { getOption1() {
this.option1 = { let chart = echarts.init(document.getElementById("echartsraodar"));
// tooltip: { let option1 = {
// show: true,
// trigger:'axis',
// formatter: function (params) {
// console.log(params);
// // let str = "";
// // if (params.name == "") {
// // str =
// // "从有效专利占专利申请总量比例、有效发明专利占有效专利比例和风险专利占全部申请专利的比例分析";
// // }
// // return str;
// },
// },
tooltip: {
trigger: "axis",
formatter: function (params) {
console.log(params);
// let str = "";
// if (params.name == "") {
// str =
// "从有效专利占专利申请总量比例、有效发明专利占有效专利比例和风险专利占全部申请专利的比例分析";
// }
// return str;
},
},
radar: [ radar: [
{ {
indicator: [ indicator: [
{ text: "公司竞争力", max: 150 }, { text: "公司竞争力", max: 150 },
{ text: "技术质量 ", max: 150 }, { text: "技术质量", max: 150 },
{ text: "技术体量", max: 150 }, { text: "技术体量", max: 150 },
], ],
center: ["50%", "50%"], center: ["50%", "50%"],
radius: 120, radius: 120,
triggerEvent: true,
}, },
], ],
series: [ series: [
{ {
type: "radar", type: "radar",
radarIndex: 0, radarIndex: 0,
tooltip: {
trigger: "item",
},
areaStyle: { areaStyle: {
color: "#73A3F2", color: "#73A3F2",
}, },
...@@ -114,23 +119,52 @@ export default { ...@@ -114,23 +119,52 @@ export default {
}, },
}, },
], ],
// data: [
// {
// name: "公司竞争力",
// value: 50,
// },
// {
// name: "技术质量",
// value: 50,
// },
// {
// name: "技术体量",
// value: 50,
// },
// ],
}, },
], ],
}; };
chart.setOption(option1);
//在name上移动
let that = this;
chart.on("mousemove", function (params) {
console.log(params.event.offsetX);
that.hover = true;
that.$nextTick(() => {
that.$refs.hover.style.left = params.event.offsetX + "px";
that.$refs.hover.style.top = params.event.offsetY + "px";
});
if (params.name == "技术质量") {
that.con =
"从有效专利占专利申请总量比例、有效发明专利占有效专利比例和风险专利占全部申请专利的比例分析";
} else if (params.name == "公司竞争力") {
that.con = "从公司资质类别、公司规模、对外投资和公司融资分析";
} else if (params.name == "技术体量") {
that.con = "从专利申请总量、有效专利总量和近3年专利申请增速分析";
}
});
chart.on("mouseout", function (params) {
console.log(params.event.offsetX);
that.hover = false;
// that.$nextTick(() => {
// that.$refs.hover.style.left = params.event.offsetX;
// that.$nextTick(() => {
// // that.left = params.event.offsetX + "px";
// // that.top = params.event.offsetY + "px";
// that.$refs.hover.style.left = params.event.offsetX+'px';
// that.$refs.hover.style.top = params.event.offsetY+'px';
// });
// console.log( that.top)
// console.log(that.$refs.hover)
// });
// if (params.name == "技术质量") {
// that.con =
// "从有效专利占专利申请总量比例、有效发明专利占有效专利比例和风险专利占全部申请专利的比例分析";
// // tooldiv.innerHTML =
// }
// chart.setOption(that.option);
});
}, },
getOption2() { getOption2() {
var data = [ var data = [
...@@ -156,17 +190,14 @@ export default { ...@@ -156,17 +190,14 @@ export default {
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
datalength.push(0); datalength.push(0);
} }
// var databg = []
// for (var i = 0; i < data.length; i++) {
// databg.push(data[data.length - 1].value);
// }
this.option2 = { this.option2 = {
grid: { grid: {
left: "11%", left: "11%",
top: "12%", top: "5%",
right: "10%", right: "10%",
bottom: "8%", bottom: "15%",
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
...@@ -177,9 +208,10 @@ export default { ...@@ -177,9 +208,10 @@ export default {
}, },
}, },
], ],
legend:{ legend: {
show:true, show: true,
data:['均值','公司'] data: ["均值", "公司"],
bottom:'0%',
}, },
yAxis: [ yAxis: [
{ {
...@@ -220,7 +252,7 @@ export default { ...@@ -220,7 +252,7 @@ export default {
z: 2, z: 2,
}, },
{ {
name: "公司", name: "均值",
type: "scatter", type: "scatter",
stack: "圆", stack: "圆",
yAxisIndex: 0, yAxisIndex: 0,
...@@ -238,7 +270,7 @@ export default { ...@@ -238,7 +270,7 @@ export default {
z: 2, z: 2,
}, },
{ {
name: "均值", name: "公司",
type: "scatter", type: "scatter",
stack: "圆", stack: "圆",
yAxisIndex: 0, yAxisIndex: 0,
...@@ -302,39 +334,51 @@ export default { ...@@ -302,39 +334,51 @@ export default {
line-height: 28px; line-height: 28px;
} }
.echarts { .echarts {
position: relative; // position: relative;
} }
.hover { .hover {
position: absolute; position: absolute;
top: 13.5%; z-index: 999999;
left: 40%; // left: 0;
width: 320px;
// height: 76px;
background: #ffffff;
box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.16);
border-radius: 8px 8px 8px 8px;
opacity: 1;
padding: 10px;
} }
} }
} }
.company_con_anchor { .company_con_anchor {
margin-top: 15px; margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold; font-weight: bold;
color: #666666; color: #1C1C28;
:deep(.ant-anchor-link-title) { :deep(.ant-anchor-link-title) {
color: #666666; color: #1C1C28;
margin-bottom: 15px;
} }
:deep(.ant-anchor-link-active > .ant-anchor-link-title) { :deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff; color: #1890ff;
} }
:deep(.ant-anchor-ink::before){
width: 8px;
background-color: #F5F5F5;
}
:deep(.ant-anchor-wrapper) { :deep(.ant-anchor-wrapper) {
background-color: #fff; background-color: #fff;
padding-left: 10px; padding-left: 10px;
color: #666666; color: #1C1C28;
height: 350px; height: 350px;
margin-left: 10px; margin-left: 10px;
padding: 30px 15px 0; padding: 30px 15px 0;
} }
#components-back-top-demo-custom .ant-back-top { #components-back-top-demo-custom .ant-back-top {
bottom: 55%; // bottom: 50%;
right: 20%; // right: 18.5%;
right: 370px;
top: 350px;
} }
#components-back-top-demo-custom .ant-back-top-inner { #components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px; margin-top: 20px;
...@@ -343,6 +387,7 @@ export default { ...@@ -343,6 +387,7 @@ export default {
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
border-radius: 8px;
} }
} }
.back { .back {
......
src/views/history/index.vue
<template> <template>
<div class="hsitory">
<a-breadcrumb class="nav_bread">
<a-breadcrumb-item>首页</a-breadcrumb-item>
<a-breadcrumb-item>浏览记录</a-breadcrumb-item>
<a-breadcrumb-item>公司详情</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template> </template>
<script> <script>
export default { export default {
name:'history', name: "history",
data(){ data() {
return{ return {};
}
}, },
components: { components: {},
methods: {},
}, created() {},
methods:{ };
},
created(){
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.history{
</style> padding: 0 30px;
\ No newline at end of file width: calc(100%);
background-color: #ebebeb;
position: relative;
}
.nav_bread {
height: 50px;
padding: 20px 3px;
background-color: #ebebeb;
}
</style>
src/views/patent/index.vue
...@@ -297,6 +297,8 @@ export default { ...@@ -297,6 +297,8 @@ export default {
path: "/patentDetails", path: "/patentDetails",
query: { query: {
id: record.mysql_id, id: record.mysql_id,
zlcode:record.gkh,
title:record.title
}, },
}); });
}, },
...@@ -358,6 +360,7 @@ export default { ...@@ -358,6 +360,7 @@ export default {
padding: 0 30px; padding: 0 30px;
width: calc(100%); width: calc(100%);
// height: calc(100% - 65px); // height: calc(100% - 65px);
min-height: 830px;
background-color: #ebebeb; background-color: #ebebeb;
position: relative; position: relative;
.nav_bread { .nav_bread {
......
src/views/patent/patentDetails.vue
...@@ -5,13 +5,19 @@ ...@@ -5,13 +5,19 @@
<a-breadcrumb-item>专利</a-breadcrumb-item> <a-breadcrumb-item>专利</a-breadcrumb-item>
<a-breadcrumb-item>专利详情</a-breadcrumb-item> <a-breadcrumb-item>专利详情</a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
<div class="back_btn">返回</div> <div class="back_btn" @click="backbtn">返回</div>
<div class="details_title"> <div class="details_title">
<div class="patent_num">{{ "CN109775565B" }}</div> <div class="patent_num">{{ zlcode }}</div>
<div class="patent_title">{{ "一种大直径单桩单钩水下翻桩方法" }}</div> <div class="patent_title">{{ title }}</div>
</div> </div>
<div class="btn_group"> <div class="btn_group">
<span><img src="@/static/patent/icon-dc.png" alt="" />导出</span> <span @click="daochu(details)"
><img
src="@/static/patent/icon-dc.png"
alt=""
/>导出</span
>
<span v-if="follow" <span v-if="follow"
><img src="@/static/patent/icon-gz.png" alt="" />关注</span ><img src="@/static/patent/icon-gz.png" alt="" />关注</span
> >
...@@ -96,30 +102,36 @@ ...@@ -96,30 +102,36 @@
:column="2" :column="2"
:labelStyle="{ background: '#F2F9FC' }" :labelStyle="{ background: '#F2F9FC' }"
> >
<a-descriptions-item label="申请人(原始)" <a-descriptions-item label="申请人(原始)">{{
>{{ details.sqrys }}</a-descriptions-item details.sqrys
> }}</a-descriptions-item>
<a-descriptions-item label="专利权人(当前)" <a-descriptions-item label="专利权人(当前)">{{
>{{details.zlqrjgs}}</a-descriptions-item details.zlqrjgs
> }}</a-descriptions-item>
<a-descriptions-item label="申请人" <a-descriptions-item label="申请人">{{
>{{ details.zlr }}</a-descriptions-item details.zlr
> }}</a-descriptions-item>
<a-descriptions-item label="专利权人" <a-descriptions-item label="专利权人">{{
>{{ details.zlqr }}</a-descriptions-item details.zlqr
> }}</a-descriptions-item>
<a-descriptions-item label="申请人(工商)" <a-descriptions-item label="申请人(工商)">{{
>{{ details.sqrgs }}</a-descriptions-item details.sqrgs
> }}</a-descriptions-item>
<a-descriptions-item label="专利权人(机构树)" <a-descriptions-item label="专利权人(机构树)">{{
>{{ details.zlqrjgs }}</a-descriptions-item details.zlqrjgs
> }}</a-descriptions-item>
<a-descriptions-item label="申请人(机构树)" <a-descriptions-item label="申请人(机构树)">{{
>{{ details.sqrjgs }}</a-descriptions-item details.sqrjgs
> }}</a-descriptions-item>
<a-descriptions-item label="代理人">{{ details.dlr }}</a-descriptions-item> <a-descriptions-item label="代理人">{{
<a-descriptions-item label="发明人">{{ details.fmr }}</a-descriptions-item> details.dlr
<a-descriptions-item label="代理机构">{{ details.dljg }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="发明人">{{
details.fmr
}}</a-descriptions-item>
<a-descriptions-item label="代理机构">{{
details.dljg
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>
<!-- 地址 --> <!-- 地址 -->
...@@ -130,12 +142,18 @@ ...@@ -130,12 +142,18 @@
:column="2" :column="2"
:labelStyle="{ background: '#F2F9FC' }" :labelStyle="{ background: '#F2F9FC' }"
> >
<a-descriptions-item label="申请人国">{{ details.sqrg }}</a-descriptions-item> <a-descriptions-item label="申请人国">{{
<a-descriptions-item label="公开国">{{ details.gkg }}</a-descriptions-item> details.sqrg
<a-descriptions-item label="申请人地址">{{ details.sqr_address }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="专利权人地址" <a-descriptions-item label="公开国">{{
>{{ details.zlqr_address }}</a-descriptions-item details.gkg
> }}</a-descriptions-item>
<a-descriptions-item label="申请人地址">{{
details.sqr_address
}}</a-descriptions-item>
<a-descriptions-item label="专利权人地址">{{
details.zlqr_address
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>
<!-- 统计信息 --> <!-- 统计信息 -->
...@@ -146,10 +164,18 @@ ...@@ -146,10 +164,18 @@
:column="2" :column="2"
:labelStyle="{ background: '#F2F9FC' }" :labelStyle="{ background: '#F2F9FC' }"
> >
<a-descriptions-item label="引用数量">{{ details.yy_num }}</a-descriptions-item> <a-descriptions-item label="引用数量">{{
<a-descriptions-item label="权利要求数">{{ details.qlyq_num }}</a-descriptions-item> details.yy_num
<a-descriptions-item label="被引用数量">{{ details.byy_num }}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="同族数量">{{ details.tzzl_num }}</a-descriptions-item> <a-descriptions-item label="权利要求数">{{
details.qlyq_num
}}</a-descriptions-item>
<a-descriptions-item label="被引用数量">{{
details.byy_num
}}</a-descriptions-item>
<a-descriptions-item label="同族数量">{{
details.tzzl_num
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>
<!-- 分类号 --> <!-- 分类号 -->
...@@ -160,20 +186,22 @@ ...@@ -160,20 +186,22 @@
:column="2" :column="2"
:labelStyle="{ background: '#F2F9FC' }" :labelStyle="{ background: '#F2F9FC' }"
> >
<a-descriptions-item label="IPC分类号">{{ details.ipcflh }}</a-descriptions-item> <a-descriptions-item label="IPC分类号">{{
<a-descriptions-item label="战略新兴产业分类号" details.ipcflh
>{{ details.zlxxxcy }}</a-descriptions-item }}</a-descriptions-item>
> <a-descriptions-item label="战略新兴产业分类号">{{
<a-descriptions-item label="国民经济分类号" details.zlxxxcy
>{{ details.gmjjfl }}</a-descriptions-item }}</a-descriptions-item>
> <a-descriptions-item label="国民经济分类号">{{
<a-descriptions-item label="双十产业集群分类号" details.gmjjfl
>{{ details.sscyjqfl }}</a-descriptions-item }}</a-descriptions-item>
> <a-descriptions-item label="双十产业集群分类号">{{
details.sscyjqfl
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>
</div> </div>
<div class="patent_con_anchor"> <div class="company_con_anchor">
<a-anchor> <a-anchor>
<!-- <a-anchor-link href="#technicalSummary" title="AI技术摘要" /> --> <!-- <a-anchor-link href="#technicalSummary" title="AI技术摘要" /> -->
<a-anchor-link href="#summary" title="摘要" /> <a-anchor-link href="#summary" title="摘要" />
...@@ -188,9 +216,12 @@ ...@@ -188,9 +216,12 @@
<div id="components-back-top-demo-custom"> <div id="components-back-top-demo-custom">
<a-back-top> <a-back-top>
<div class="ant-back-top-inner">回到顶部</div> <div class="ant-back-top-inner">
<img src="@/static/common/icon-top.png" alt="" />
回到顶部
</div>
</a-back-top> </a-back-top>
<div class="back">回到顶部</div> <!-- <div class="back">回到顶部</div> -->
</div> </div>
</div> </div>
<div class="patent_con_right"> <div class="patent_con_right">
...@@ -245,15 +276,44 @@ ...@@ -245,15 +276,44 @@
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts";
import "echarts-wordcloud";
import { DownOutlined } from "@ant-design/icons-vue"; import { DownOutlined } from "@ant-design/icons-vue";
import { patentDetail } from "../../utils/indexApi"; import { patentDetail } from "../../utils/indexApi";
import EchartsCloud from "../../components/EchartsCloud.vue"; import EchartsCloud from "../../components/EchartsCloud.vue";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import ImageModule from "docxtemplater-image-module-free";
function base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
if (!base64Regex.test(dataURL)) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
let binaryString;
if (typeof window !== "undefined") {
binaryString = window.atob(stringBase64);
} else {
binaryString = new Buffer(stringBase64, "base64").toString("binary");
}
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
const ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes.buffer;
}
export default { export default {
name: "patentDetails", name: "patentDetails",
data() { data() {
return { return {
value: undefined, value: undefined,
count: 161, count: 161,
zlcode: "",
title: "",
follow: true, follow: true,
value1: [], value1: [],
details: {}, details: {},
...@@ -327,10 +387,133 @@ export default { ...@@ -327,10 +387,133 @@ export default {
} }
}); });
}, },
//返回上一页
backbtn() {
this.$router.go(-1);
},
//导出word
daochu(details) {
var that = this;
let date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
var today = year + "年" + month + "月" + day + "日";
var chartDom1 = document.getElementById("techAera");
let myChart1 = null;
myChart1 = echarts.init(chartDom1);
// // 第一个echrts
myChart1.setOption({
series: [
{
type: "wordCloud",
gridSize: 10,
sizeRange: [14, 60],
rotationRange: [0, 0],
//随机生成字体颜色
// maskImage: maskImage,
textStyle: {
color: function () {
return (
"rgb(" +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
},
},
left: "center",
top: "center",
right: null,
bottom: null,
width: "200%",
height: "200%",
//数据
data: that.techArr,
},
],
});
setTimeout(() => {
// 加setTimeout是为了让echarts渲染完成后生成图片
JSZipUtils.getBinaryContent("patent.docx", function (error, content) {
// 抛出异常
if (error) {
throw error;
}
const opts = {
centered: false,
fileType: "docx",
};
opts.getImage = function (tagValue) {
if (tagValue.size && tagValue.data) {
return base64DataURLToArrayBuffer(tagValue.data);
}
return base64DataURLToArrayBuffer(tagValue);
};
opts.getSize = function (_, tagValue) {
if (tagValue.size && tagValue.data) {
return tagValue.size;
}
return [630, 500];
};
// 创建一个JSZip实例，内容为模板的内容
const zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
const doc = new docxtemplater().loadZip(zip);
doc.setOptions({
nullGetter: function () {
//设置空值 undefined 为''
return "";
},
});
// 设置图片模块
doc.attachModule(new ImageModule(opts));
// 设置模板变量的值
doc.setData({
...details,
today,
image1: myChart1.getDataURL({
pixelRatio: 5, //导出的图片分辨率比率,默认是1
backgroundColor: "#fff", //图表背景色
excludeComponents: ["toolbox"], //忽略组件的列表
type: "png", //图片类型支持png和jpeg
}),
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
console.error("导出报表失败");
throw error;
}
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
const out = doc.getZip().generate({
type: "blob",
mimeType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
// 将目标文件对象保存为目标类型的文件，并命名
saveAs(out, `专利详情报告.docx`);
});
}, 1000);
},
}, },
created() { created() {
this.$store.commit("setcurrent", "专利"); this.$store.commit("setcurrent", "专利");
let id = this.$route.query.id; let id = this.$route.query.id;
this.zlcode = this.$route.query.zlcode;
this.title = this.$route.query.title;
//初始化专利详情 //初始化专利详情
this.init(id); this.init(id);
}, },
...@@ -355,6 +538,7 @@ export default { ...@@ -355,6 +538,7 @@ export default {
position: absolute; position: absolute;
right: 80px; right: 80px;
top: 10px; top: 10px;
cursor: pointer;
} }
.nav_bread { .nav_bread {
height: 50px; height: 50px;
...@@ -435,28 +619,36 @@ export default { ...@@ -435,28 +619,36 @@ export default {
} }
} }
} }
.patent_con_anchor { .company_con_anchor {
margin-top: 15px; margin-top: 15px;
width: 150px;
height: 500px;
font-weight: bold; font-weight: bold;
color: #666666; color: #1c1c28;
// background-color: #fff;
:deep(.ant-anchor-link-title) { :deep(.ant-anchor-link-title) {
color: #666666; color: #1c1c28;
margin-bottom: 10px;
} }
:deep(.ant-anchor-link-active > .ant-anchor-link-title) { :deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff; color: #1890ff;
} }
:deep(.ant-anchor-ink::before) {
width: 8px;
background-color: #f5f5f5;
}
:deep(.ant-anchor-wrapper) { :deep(.ant-anchor-wrapper) {
background-color: #fff; background-color: #fff;
padding-left: 10px; padding-left: 10px;
color: #666666; color: #1c1c28;
height: 350px;
width: 150px;
margin-left: 10px;
padding: 30px 15px 0;
} }
#components-back-top-demo-custom .ant-back-top { #components-back-top-demo-custom .ant-back-top {
bottom: 55%; // bottom: 50%;
left: 57%; // right: 18.5%;
right: 780px;
top: 350px;
} }
#components-back-top-demo-custom .ant-back-top-inner { #components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px; margin-top: 20px;
...@@ -465,6 +657,7 @@ export default { ...@@ -465,6 +657,7 @@ export default {
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
border-radius: 8px;
} }
} }
.back { .back {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment