Skip to content

T
ty_patentSys
Commit 8716cb8b by liudx
Options

新增公司详情页面

parent 6b85d2ea
Showing with 705 additions and 30 deletions
src/components/EchartsCon.vue
......@@ -21,7 +21,7 @@ export default {
},
height: {
type: String,
default: "100%",
default: "300px",
},
option: {
type: Object,
......
src/utils/request.js
......@@ -2,7 +2,7 @@ import axios from 'axios';
import store from '../store/index'
// 环境的切换
axios.defaults.baseURL = 'https://taiyuan-patent.mayanan.cn/';
axios.defaults.baseURL = 'http://39.100.39.50:5089';
// 请求超时时间
axios.defaults.timeout = 50000;
// post请求头
......
src/views/company/cooperation.vue
<template>
<div>
3333333333
<div class="company_con">
<div class="company_con_left">
<!-- 联合申请 -->
<div class="company_con1" id="">
<h2 class="title">联合申请</h2>
<p>
在遇到技术创新难题时，企业往往会借助外部机构的研究优势和实力来共同研发解决。在某个技术领域企业的产学研合作次数越多，可以反映企业在该技术领域布局的意愿更强烈。同时，关注产学研合作的主要伙伴，可进一步分析企业在主要布局领域的技术依赖程度和权属纠纷可能性。该企业与其他公司、高校、研究所等机构共进行了6次产学研合作。其中，与山西凌志达煤业有限公司最为密切，合作次数为6次，与该企业合作次数最多的申请人如下图所示。
</p>
<EchartsCon :option="option1" :id="'echarts1'"></EchartsCon>
</div>
<!-- 专利购买 -->
<div class="company_con1" id="">
<h2 class="title">专利购买</h2>
<p>
分析该企业专利购买历史，了解该企业向哪些专利权人购买了专利，以及购买了哪些专利。如果该企业购买专利数量较多，需要关注这些外购专利是否为企业的核心专利，进而分析企业的研发能力。该企业向山西凌志达煤业有限公司购买专利最多，为6件。
</p>
<EchartsCon :option="option2" :id="'echarts2'"></EchartsCon>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'cooperation'
}
import EchartsCon from "../../components/EchartsCon";
export default {
name: "cooperation",
data() {
return {
option1: null,
};
},
components: {
EchartsCon,
},
created() {
this.init();
},
methods: {
init() {
this.getOptions1();
this.getOptions2();
},
getOptions1() {
let points = [
{
name: "山西煤炭进出口集团有限公司",
symbolSize: 40,
category: 0,
},
{
name: "企业1",
symbolSize: 40,
category: 1,
},
{
name: "院校1",
symbolSize: 40,
category: 2,
},
{
name: "院校2",
symbolSize: 40,
category: 2,
},
];
let links = [
{
source: "山西煤炭进出口集团有限公司",
target: "企业1",
},
{
source: "山西煤炭进出口集团有限公司",
target: "院校1",
},
{
source: "山西煤炭进出口集团有限公司",
target: "院校2",
},
];
this.option1 = {
// animationDurationUpdate: 1500,
// animationEasingUpdate: "quinticInOut",
// color: ["#83e0ff", "#45f5ce", "#b158ff"],
legend:{
show:true,
data:['搜索的企业','企业','院校']
},
series: [
{
type: "graph",
layout: "force",
force: {
repulsion: 1500,
edgeLength: 30,
},
roam: true,
label: {
normal: {
show: true,
},
},
data: points,
links: links,
lineStyle: {
normal: {
opacity: 0.9,
width: 5,
curveness: 0,
},
},
categories: [{ name: "搜索的企业" }, { name: "企业" }, { name: "院校" }],
},
],
};
},
getOptions2(){
const dataList = [{
name: "Mon",
value: 260,
},
{
name: "Tue",
value: 220,
},
{
name: "Wed",
value: 200,
},
{
name: "Thu",
value: 160,
},
{
name: "Fri",
value: 140,
},]
this.option2 = {
tooltip: {
show: false,
},
grid: {
top: "5%",
left: "3%",
right: "2%",
bottom: "1%",
containLabel: true,
},
xAxis: {
type: "value",
axisLabel: {
color: "#333",
},
splitLine: {
show: true,
lineStyle: {
// color: "rgba(21, 200, 221,0.2)",
},
},
},
yAxis: {
type: "category",
axisLabel: {
color: "#333",
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: dataList.map(r => r.name),
},
series: [
{
name: "地市资源排行",
type: "bar",
// symbol: "path://M1 1,L140 1,L140 15,L1 15,Z",
// symbolKeepAspect: false,
// stack: "triangle",
barWidth: 16,
label: {
show: true,
position: "right",
// color: "#3EFFE8",
fontSize: 12,
formatter: "{c}",
},
data: dataList,
},
],
};
}
},
};
</script>
<style lang="less" scoped>
.company_con {
clear: both;
position: relative;
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
.company_con_left {
.company_con1 {
width: 1400px;
// height: 175px;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
opacity: 1;
padding: 40px 30px;
margin: 15px 0;
.title {
color: #1c1c28;
font-size: 18px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: bold;
line-height: 28px;
}
.desc {
font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #1c1c28;
line-height: 28px;
}
.ecahrsThree {
display: flex;
width: 100%;
justify-content: space-between;
}
}
:deep(.ant-table-thead > tr > th) {
background-color: #f2f9fc;
}
}
.company_con_anchor {
margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold;
color: #666666;
:deep(.ant-anchor-link-title) {
color: #666666;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
</style>
\ No newline at end of file
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
height: 350px;
margin-left: 10px;
padding: 30px 15px 0;
}
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
right: 20%;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
}
.back {
display: none;
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
}
</style>
src/views/company/overview.vue
......@@ -349,25 +349,84 @@ export default {
this.option3 = {
//你的代码
title: {
text: "分类资金统计",
left: "center",
top: "5%",
text: "专利类型分布图",
left: "25%",
bottom: "5%",
},
//color: colors,
tooltip: {
trigger: "item",
},
legend: {
orient: "vertical",
align: "auto",
right: "10%",
top: "middle",
itemWidth: 13,
itemHeight: 13,
textStyle: {
color: "#333",
fontSize: 14,
series: [
{
name: "分类资金统计",
type: "pie",
radius: ["30%", "60%"],
center: ["35%", "50%"],
label: {
formatter: "{b}：{d}%", // 用来换行
},
data: [
{ value: 6, name: "实用新型" },
{ value: 10, name: "发明" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
this.option4 = {
//你的代码
title: {
text: "专利状态分布图",
left: "25%",
bottom: "5%",
},
//color: colors,
tooltip: {
trigger: "item",
},
series: [
{
name: "分类资金统计",
type: "pie",
radius: ["30%", "60%"],
center: ["35%", "50%"],
label: {
formatter: "{b}：{d}%", // 用来换行
},
data: [
{ value: 6, name: "审中" },
{ value: 10, name: "有效" },
{ value: 20, name: "失效" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
this.option5 = {
//你的代码
title: {
text: "有效专利分布图",
left: "25%",
bottom: "5%",
},
//color: colors,
tooltip: {
trigger: "item",
},
series: [
{
......@@ -379,8 +438,8 @@ export default {
formatter: "{b}：{d}%", // 用来换行
},
data: [
{ value: 6, name: "安全" },
{ value: 10, name: "工艺" },
{ value: 6, name: "实用新型" },
{ value: 10, name: "发明" },
],
emphasis: {
itemStyle: {
......
src/views/company/technology.vue
<template>
<div>
444444444444
<div class="company_con">
<div class="company_con_left">
<!-- 科创能力分析 -->
<div class="company_con1" id="">
<h2 class="title">科创能力分析</h2>
<div style="display: flex;">
<EchartsCon
:option="option1"
:id="'echarts1'"
class="echarts"
></EchartsCon>
<div class="hover">111</div>
<EchartsCon :option="option2" :id="'echarts2'"></EchartsCon>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'technology'
}
import EchartsCon from "../../components/EchartsCon";
export default {
name: "technology",
components: {
EchartsCon,
},
data() {
return {
option1: null,
option2: null,
};
},
created() {
this.init();
},
methods: {
init() {
this.getOption1();
this.getOption2();
},
getOption1() {
this.option1 = {
// tooltip: {
// 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: [
{
indicator: [
{ text: "公司竞争力", max: 150 },
{ text: "技术质量 ", max: 150 },
{ text: "技术体量", max: 150 },
],
center: ["50%", "50%"],
radius: 120,
},
],
series: [
{
type: "radar",
radarIndex: 0,
tooltip: {
trigger: "item",
},
areaStyle: {
color: "#73A3F2",
},
lineStyle: {
color: "#0263FF",
},
itemStyle: {
color: "#0263FF",
},
data: [
{
value: [100, 93, 50],
name: "分值",
areaStyle: {
color: "#73A3F2",
},
lineStyle: {
color: "#0263FF",
},
itemStyle: {
color: "#0263FF",
},
},
],
// data: [
// {
// name: "公司竞争力",
// value: 50,
// },
// {
// name: "技术质量",
// value: 50,
// },
// {
// name: "技术体量",
// value: 50,
// },
// ],
},
],
};
},
getOption2() {
var data = [
{
name: "技术体量",
value: 52,
},
{
name: "技术质量",
value: 41,
},
{
name: "公司竞争力",
value: 70,
},
]; //已排序好的数组
var ydata = [];
for (var i = 0; i < data.length; i++) {
ydata.push(data[i].name);
}
var datalength = [];
for (var i = 0; i < data.length; i++) {
datalength.push(0);
}
// var databg = []
// for (var i = 0; i < data.length; i++) {
// databg.push(data[data.length - 1].value);
// }
this.option2 = {
grid: {
left: "11%",
top: "12%",
right: "10%",
bottom: "8%",
containLabel: true,
},
xAxis: [
{
show: true,
axisLabel: {
formatter: "{value}%",
},
},
],
legend:{
show:true,
data:['均值','公司']
},
yAxis: [
{
axisTick: "none",
axisLine: "none",
offset: "10",
axisLabel: {
textStyle: {
color: "#666",
fontSize: "12",
},
},
data: ydata,
},
{
axisLine: {
lineStyle: {
color: "#fff",
},
},
data: [],
},
],
series: [
{
name: "条",
type: "bar",
stack: "圆",
yAxisIndex: 0,
data: data,
barWidth: 8,
itemStyle: {
normal: {
color: "#eee",
barBorderRadius: 5,
},
},
z: 2,
},
{
name: "公司",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: [0, 0, 0],
label: false,
symbolSize: 12,
itemStyle: {
normal: {
borderColor: "#FE8700",
borderWidth: 4,
color: "#fff",
opacity: 1,
},
},
z: 2,
},
{
name: "均值",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: [10, 10, 10],
label: false,
symbolSize: 12,
itemStyle: {
normal: {
borderColor: "#0263FF",
borderWidth: 4,
color: "#fff",
opacity: 1,
},
},
// z: 2
},
{
name: "白框",
type: "bar",
yAxisIndex: 1,
barGap: "-100%",
data: [100, 100, 100],
barWidth: 6,
itemStyle: {
normal: {
color: "#eee",
barBorderRadius: 5,
},
},
z: 0,
},
],
};
},
},
};
</script>
<style lang="less" scoped>
.company_con {
clear: both;
position: relative;
display: flex;
justify-content: flex-start;
background-color: #f3f3f6;
.company_con_left {
.company_con1 {
width: 1400px;
// height: 175px;
background: #ffffff;
border-radius: 8px 8px 8px 8px;
opacity: 1;
padding: 40px 30px;
margin: 15px 0;
.title {
color: #1c1c28;
font-size: 18px;
font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
font-weight: bold;
</style>
\ No newline at end of file
line-height: 28px;
}
.echarts {
position: relative;
}
.hover {
position: absolute;
top: 13.5%;
left: 40%;
}
}
}
.company_con_anchor {
margin-top: 15px;
// width: 150px;
// height: 350px;
font-weight: bold;
color: #666666;
:deep(.ant-anchor-link-title) {
color: #666666;
}
:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
color: #1890ff;
}
:deep(.ant-anchor-wrapper) {
background-color: #fff;
padding-left: 10px;
color: #666666;
height: 350px;
margin-left: 10px;
padding: 30px 15px 0;
}
#components-back-top-demo-custom .ant-back-top {
bottom: 55%;
right: 20%;
}
#components-back-top-demo-custom .ant-back-top-inner {
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
}
.back {
display: none;
margin-top: 20px;
width: 150px;
height: 60px;
background-color: #fff;
text-align: center;
line-height: 60px;
}
}
</style>
vue.config.js
......@@ -18,7 +18,7 @@ module.exports = {
// 配置不同的后台API地址
proxy: {
'/api': {
target: 'https://taiyuan-patent.mayanan.cn',
target: 'http://39.100.39.50:5089',
ws: false,
changeOrigin: true,
pathRewrite: {
......
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