Skip to content

T
ty_patentSys
Commit 880918b4 by liudx
Options

联调公司详情研发可持续性

parent 318824ab
Showing with 550 additions and 181 deletions
public/company.docx
No preview for this file type
src/components/EchartsCon.vue
...@@ -23,40 +23,7 @@ export default { ...@@ -23,40 +23,7 @@ export default {
}, },
option: { option: {
type: Object, type: Object,
default() { default:{}
return {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
icon: "circle",
orient: "horizontal",
itemGap: 40,
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: 14,
fontWeight: 400,
padding: [4, 0, 0, 0],
},
},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
},
],
};
},
}, },
}, },
computed: { computed: {
...@@ -103,7 +70,6 @@ export default { ...@@ -103,7 +70,6 @@ export default {
// }, // },
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; // let that = this;
......
src/utils/indexApi.js
...@@ -15,6 +15,10 @@ export const industryType = p => get('/api/common/industryType'); ...@@ -15,6 +15,10 @@ export const industryType = p => get('/api/common/industryType');
export const enterpriseSelect = p => post('/api/enterprise/list',p); export const enterpriseSelect = p => post('/api/enterprise/list',p);
//企业详情 //企业详情
export const enterpriseDetail = p => get('/api/enterprise/detail/'+p.id); export const enterpriseDetail = p => get('/api/enterprise/detail/'+p.id);
//企业详情-》研发概要 研发规模
export const researchDevelop = p=>get('/api/enterprise/researchDevelop/'+p.id)
//企业详情-》研发概要 研发可持续性
export const sustainability = p=>get('/api/enterprise/sustainability/'+p.id)
......
src/views/company/companyDetails.vue
...@@ -64,7 +64,10 @@ ...@@ -64,7 +64,10 @@
<companyProfile :baseinfo="baseinfo"></companyProfile> <companyProfile :baseinfo="baseinfo"></companyProfile>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="研发概要" tab="研发概要"> <a-tab-pane key="研发概要" tab="研发概要">
<overview></overview> <overview
:developmentOverview="developmentOverview"
:deveSustain="deveSustain"
></overview>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="技术合作" tab="技术合作"> <a-tab-pane key="技术合作" tab="技术合作">
<cooperation></cooperation> <cooperation></cooperation>
...@@ -97,12 +100,30 @@ ...@@ -97,12 +100,30 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
<div style="width: 70%">
<EchartsCon
:id="'applyTrend'"
:option="option1"
:style="'height:300px'"
></EchartsCon>
<EchartsCon
:id="'patentAuthorize'"
:option="option2"
:style="'height:300px;width:100%;'"
></EchartsCon>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import EchartsCon from "../../components/EchartsCon";
import companyProfile from "./companyProfile.vue"; import companyProfile from "./companyProfile.vue";
import { enterpriseDetail, exportword } from "../../utils/indexApi.js"; import {
enterpriseDetail,
exportword,
researchDevelop,
sustainability,
} from "../../utils/indexApi.js";
import overview from "./overview.vue"; import overview from "./overview.vue";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import cooperation from "./cooperation.vue"; import cooperation from "./cooperation.vue";
...@@ -112,11 +133,32 @@ import PizZip from "pizzip"; ...@@ -112,11 +133,32 @@ import PizZip from "pizzip";
import JSZipUtils from "jszip-utils"; import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import ImageModule from "docxtemplater-image-module-free"; 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: "companyDetails", name: "companyDetails",
data() { data() {
return { return {
id: "",
option1: {},
formState: { formState: {
email: "", email: "",
}, },
...@@ -124,6 +166,8 @@ export default { ...@@ -124,6 +166,8 @@ export default {
email: "", email: "",
value: undefined, value: undefined,
activeKey: "企业概况", activeKey: "企业概况",
developmentOverview: null,
deveSustain:null,
count: 161, count: 161,
follow: true, follow: true,
techArr: [ techArr: [
...@@ -152,6 +196,7 @@ export default { ...@@ -152,6 +196,7 @@ export default {
cooperation, cooperation,
overview, overview,
technology, technology,
EchartsCon,
}, },
methods: { methods: {
openModal() { openModal() {
...@@ -173,15 +218,309 @@ export default { ...@@ -173,15 +218,309 @@ export default {
message.error(res.msg); message.error(res.msg);
} }
}); });
researchDevelop({ id: id }).then((res) => {
if (res.code == 0) {
this.developmentOverview = res.data;
} else {
message.error(res.msg);
}
});
sustainability({ id: id }).then((res) => {
if (res.code == 0) {
this.deveSustain = res.data;
this.getTrend();
this.getAuthorize();
} else {
message.error(res.msg);
}
});
},
//获取专利申请年份趋势
getTrend() {
let xdata = [],
ydata1 = [],
ydata2 = [],
ydata3 = [],
maxdata = [];
this.deveSustain.invent.forEach((item) => {
xdata.push(item[0]);
ydata1.push(item[1]);
});
this.deveSustain.appearance.forEach((item) => {
ydata2.push(item[1]);
});
this.deveSustain.utility.forEach((item) => {
xdata.push(item[0]);
ydata3.push(item[1]);
});
maxdata = ydata1.map((elem, index) => elem + ydata2[index]);
maxdata = maxdata.map((elem, index) => elem + ydata3[index]);
this.option1 = {
legend: {
icon: "circle",
orient: "horizontal",
itemGap: 40,
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: 14,
fontWeight: 400,
padding: [4, 0, 0, 0],
},
},
grid: {
top: "8%",
left: "3%",
right: "0",
bottom: "10%",
containLabel: false,
},
xAxis: {
type: "category",
data: xdata,
axisTick: {
show: false,
},
axisLabel: {
show: true,
// color: "white",
},
axisLine: {
show: false,
},
},
yAxis: {
// 去网格线
splitLine: {
show: false,
},
type: "value",
name: "kW.h",
// 标题名称颜色
nameTextStyle: {
color: "white",
fontSize: 12,
fontWeight: 800,
},
axisLine: {
// show: false ,// 去除轴线
lineStyle: {
lineStyle: {
color: "white",
},
},
},
axisLabel: {
formatter: "{value}",
color: "white", // 文本颜色
},
},
series: [
{
name: "发明专利",
type: "bar",
stack: "total",
label: {
show: true,
color: "white",
formatter: function (parmas) {
return parmas.value == 0 ? "" : parmas.value;
},
},
barWidth: 20,
data: ydata1,
},
{
name: "外观专利",
type: "bar",
stack: "total",
barWidth: 20,
label: {
show: true,
color: "white",
formatter: function (parmas) {
return parmas.value == 0 ? "" : parmas.value;
},
},
data: ydata2,
},
{
name: "实用新型",
type: "bar",
stack: "total",
barWidth: 20,
label: {
show: true,
color: "white",
formatter: function (parmas) {
return parmas.value == 0 ? "" : parmas.value;
},
}, },
data: ydata3,
},
],
// dataZoom: {
// show: true,
// start: 0,
// end: 5,
// },
};
},
//获取历年专利申请及授权
getAuthorize() {
let xdata = [],
ydata1 = [],
ydata2 = [],
ydata3 = [];
this.deveSustain.old_patent_authorization.forEach((item) => {
xdata.push(item[0]);
ydata1.push(item[1]);
});
this.deveSustain.old_patent_application.forEach((item) => {
ydata2.push(item[1]);
});
ydata3 = ydata1.map((elem, index) =>
((elem / ydata2[index]) * 100).toFixed(2)
);
this.option2 = {
//下面就是上图的配置项，关键部分有注释
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
var html = params[0].name + "<br>";
// params[i].marker：对应数据的圆点样式
for (var i = 0; i < params.length - 1; i++) {
html +=
params[i].marker +
params[i].seriesName +
"：" +
params[i].value +
"<br>";
}
//最后一个学生占比数据 添加%
html +=
params[i].marker +
params[i].seriesName +
"：" +
params[i].value +
"%" +
"<br>";
return html;
},
},
//图表选择栏
legend: {
icon: "circle",
top: 20,
// right:0,
// bottom: 0,
itemHeight: 10, //修改icon图形大小
textStyle: {
fontSize: 12,
},
},
grid: {
left: "3%",
right: "4%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
data: xdata,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: "value",
// boundaryGap: [0, 0.01],
name: "专利数量",
axisLine: {
show: false,
},
},
{
type: "value",
// boundaryGap: [0, 0.01],
name: "授权占比",
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}%",
},
},
],
series: [
{
//里层的柱子
name: "授权",
type: "pictorialBar", //象形柱状图
barWidth: 20, //柱子的宽度
data: ydata1, //柱子的数据
symbol: "rect", //柱子的形状
symbolRepeat: true, //是否重复
// symbolOffset: [-40, 0], //柱子的位置
symbolBoundingData: 1, //图形的个数
z: 12, //柱子的层级
label: {
show: true,
position: "top",
// color: "#fff",
formatter: "{c}",
},
},
{
//外层的柱子
name: "申请",
type: "pictorialBar",
barWidth: 20,
//symbolSize: [40, 18], //调整截面形状
// symbolOffset: [-40, 0],
symbol: "rect",
symbolRepeat: true,
symbolBoundingData: 1,
itemStyle: {
color: "",
},
data: ydata2,
label: {
show: true,
position: "top",
// color: "#fff",
formatter: "{c}",
},
},
{
type: "line",
yAxisIndex: 1,
data: ydata3,
name: "授权占比",
itemStyle: {},
},
],
};
},
//导出.overview
daochu() { daochu() {
var that = this; var that = this;
let share_holders = that.baseinfo.share_holders; let share_holders = that.baseinfo.share_holders;
//对模板中股东信息进行修改 //对模板中股东信息进行修改
share_holders.forEach(item=>{ share_holders.forEach((item) => {
item.percent = (item.percent * 100).toFixed(2)+'%'; item.percent = (item.percent * 100).toFixed(2) + "%";
item.amount = Number(item.amount)+'万元' item.amount = Number(item.amount) + "万元";
}) });
//主要人员 //主要人员
let company_marjor = that.baseinfo.company_marjor; let company_marjor = that.baseinfo.company_marjor;
//对外投资 //对外投资
...@@ -195,46 +534,16 @@ export default { ...@@ -195,46 +534,16 @@ export default {
month = month > 9 ? month : "0" + month; month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day; day = day < 10 ? "0" + day : day;
var today = year + "年" + month + "月" + 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,
// },
// ],
// });
var chartDom1 = document.getElementById("applyTrend");
var chartDom2 = document.getElementById("patentAuthorize");
let myChart1 = null;
let myChart2 = null;
myChart1 = echarts.init(chartDom1);
myChart2 = echarts.init(chartDom2);
// // 第一个echrts
myChart1.setOption(this.option1);
myChart2.setOption(this.option2);
setTimeout(() => { setTimeout(() => {
// 加setTimeout是为了让echarts渲染完成后生成图片 // 加setTimeout是为了让echarts渲染完成后生成图片
JSZipUtils.getBinaryContent("company.docx", function (error, content) { JSZipUtils.getBinaryContent("company.docx", function (error, content) {
...@@ -256,7 +565,7 @@ export default { ...@@ -256,7 +565,7 @@ export default {
if (tagValue.size && tagValue.data) { if (tagValue.size && tagValue.data) {
return tagValue.size; return tagValue.size;
} }
return [630, 500]; return [600, 300];
}; };
// 创建一个JSZip实例，内容为模板的内容 // 创建一个JSZip实例，内容为模板的内容
const zip = new PizZip(content); const zip = new PizZip(content);
...@@ -279,13 +588,21 @@ export default { ...@@ -279,13 +588,21 @@ export default {
company_marjor, company_marjor,
company_invest, company_invest,
company_finance, company_finance,
...that.developmentOverview,
...that.deveSustain,
today, today,
// image1: myChart1.getDataURL({ image1: myChart1.getDataURL({
// pixelRatio: 5, //导出的图片分辨率比率,默认是1 pixelRatio: 5, //导出的图片分辨率比率,默认是1
// backgroundColor: "#fff", //图表背景色 backgroundColor: "#fff", //图表背景色
// excludeComponents: ["toolbox"], //忽略组件的列表 excludeComponents: ["toolbox"], //忽略组件的列表
// type: "png", //图片类型支持png和jpeg type: "png", //图片类型支持png和jpeg
// }), }),
image2: myChart2.getDataURL({
pixelRatio: 5, //导出的图片分辨率比率,默认是1
backgroundColor: "#fff", //图表背景色
excludeComponents: ["toolbox"], //忽略组件的列表
type: "png", //图片类型支持png和jpeg
}),
}); });
try { try {
// 用模板变量的值替换所有模板变量 // 用模板变量的值替换所有模板变量
...@@ -323,10 +640,11 @@ export default { ...@@ -323,10 +640,11 @@ export default {
}); });
}, },
}, },
mounted() {},
created() { created() {
let id = this.$route.query.id; this.id = this.$route.query.id;
this.init(id); this.init(this.id);
}, },
}; };
</script> </script>
......
src/views/company/index.vue
...@@ -65,23 +65,29 @@ ...@@ -65,23 +65,29 @@
/> />
</a-config-provider> </a-config-provider>
</a-form-item> </a-form-item>
<a-row><label for="">注册资本</label></a-row>
<a-form-item label="注册资本"> <a-row>
<a-input-number <a-col :span="11">
<a-form-item name="minvalue" :rules="minvalueRules">
<a-input
v-model="formState.capital_nums_min" v-model="formState.capital_nums_min"
style="width: 47%" style="width: 95%"
placeholder="请输入数值" placeholder="请输入数值"
@chane="cccc" ></a-input>
></a-input-number> </a-form-item>
- </a-col>
<a-form-item-rest> <a-col :span="1">-</a-col>
<a-input-number <a-col :span="11">
<a-form-item name="maxvalue" :rules="maxvalueRules">
<a-input
v-model="formState.capital_nums_max" v-model="formState.capital_nums_max"
style="width: 47%" style="width: 95%"
placeholder="请输入数值" placeholder="请输入数值"
></a-input-number> ></a-input>
</a-form-item-rest>
</a-form-item> </a-form-item>
</a-col>
</a-row>
<a-form-item label="企业创新排名"> <a-form-item label="企业创新排名">
<a-select <a-select
v-model:value="valueInnovation" v-model:value="valueInnovation"
...@@ -198,6 +204,7 @@ import { ...@@ -198,6 +204,7 @@ import {
enterpriseList, enterpriseList,
industryType, industryType,
enterpriseSelect, enterpriseSelect,
} from "../../utils/indexApi.js"; } from "../../utils/indexApi.js";
import "dayjs/locale/zh-cn"; import "dayjs/locale/zh-cn";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN"; import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
...@@ -234,10 +241,27 @@ export default { ...@@ -234,10 +241,27 @@ export default {
}, },
filter: [], filter: [],
companylist: [], companylist: [],
minvalueRules: [
{ required: true, message: "请输入ghj", trigger: "blur" },
{ type: "number", message: "年龄必须是一个数值", trigger: "blur" },
{
min: 18,
max: 60,
message: "年龄必须介于18到60之间",
trigger: "blur",
},
],
}; };
}, },
components: {}, components: {},
methods: { methods: {
validateUsername() {
if (value !== "admin") {
callback(new Error("用户名必须是 admin"));
} else {
callback();
}
},
//获取企业列表 //获取企业列表
getCompanyList(keyword) { getCompanyList(keyword) {
let params = { let params = {
...@@ -387,7 +411,7 @@ export default { ...@@ -387,7 +411,7 @@ export default {
...params.area, ...params.area,
...params.company_industry, ...params.company_industry,
...params.qualification, ...params.qualification,
params.innovate params.innovate,
]; ];
if (key == "keyword") { if (key == "keyword") {
params.keyword ? filter.push(params.keyword) : ""; params.keyword ? filter.push(params.keyword) : "";
......
src/views/company/overview.vue
<template> <template>
<div> <div ref="overview">
<div class="company_con"> <div class="company_con">
<div class="company_con_left"> <div class="company_con_left">
<!-- 研发规模 --> <!-- 研发规模 -->
...@@ -10,26 +10,42 @@ ...@@ -10,26 +10,42 @@
:column="2" :column="2"
:labelStyle="{ background: '#F2F9FC' }" :labelStyle="{ background: '#F2F9FC' }"
> >
<a-descriptions-item label="专利申请数量" <a-descriptions-item label="专利申请数量">{{
>Cloud Database</a-descriptions-item developmentOverview.patent_application_num
> }}</a-descriptions-item>
<a-descriptions-item label="非外观专利申请数量" <a-descriptions-item label="非外观专利申请数量">{{
>Prepaid</a-descriptions-item developmentOverview.not_appearance_num
> }}</a-descriptions-item>
<a-descriptions-item label="商标数量">YES</a-descriptions-item> <a-descriptions-item label="商标数量">{{
<a-descriptions-item label="作品著作权登记总数" developmentOverview.company_trademark_num
>2018-04-24 18:00:00</a-descriptions-item }}</a-descriptions-item>
> <a-descriptions-item label="作品著作权登记总数">{{
<a-descriptions-item label="软件著作权登记总数" developmentOverview.company_work_copyright_num
>$80.00</a-descriptions-item }}</a-descriptions-item>
> <a-descriptions-item label="软件著作权登记总数">{{
developmentOverview.company_software_num
}}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>
<!-- 研发可持续性 --> <!-- 研发可持续性 -->
<div class="company_con1" id="ResearchSustainable"> <div class="company_con1" id="ResearchSustainable">
<h2 class="title">研发可持续性</h2> <h2 class="title">研发可持续性</h2>
<p> <p>
企业的总专利申请量为7件，最早专利申请是2018年，企业在2018年的专利申请量最多，为6件且专利授权率为50.00%。 企业的总专利申请量为<span class="color">{{
deveSustain.patent_application_num
}}</span
>件，最早专利申请是<span class="color">
{{ deveSustain.earliest_patent_application_year }} </span
>年，企业在<span class="color">{{
deveSustain.most_patent_application_year
}}</span
>年的专利申请量最多，为<span class="color">{{
deveSustain.most_patent_application_num
}}</span
>件且专利授权率为<span class="color">{{
deveSustain.patent_authorization_rate
}}</span
>。
</p> </p>
<a-radio-group v-model:value="tabchange" style="margin: 8px"> <a-radio-group v-model:value="tabchange" style="margin: 8px">
<a-radio-button value="1">专利申请年份趋势</a-radio-button> <a-radio-button value="1">专利申请年份趋势</a-radio-button>
...@@ -119,11 +135,17 @@ export default { ...@@ -119,11 +135,17 @@ export default {
EchartsCon, EchartsCon,
EchartsCloud, EchartsCloud,
}, },
props: {
developmentOverview: Object,
deveSustain: Object,
},
data() { data() {
return { return {
tabchange: "1", tabchange: "1",
deveSustain: null,
}; };
}, },
beforeMount() { beforeMount() {
this.init(); this.init();
}, },
...@@ -136,14 +158,23 @@ export default { ...@@ -136,14 +158,23 @@ export default {
}, },
//获取专利申请年份趋势 //获取专利申请年份趋势
getTrend() { getTrend() {
let xdata = [],
ydata1 = [],
ydata2 = [],
ydata3 = [],
maxdata = [];
this.deveSustain.invent.forEach((item) => {
xdata.push(item[0]);
ydata1.push(item[1]);
});
this.deveSustain.appearance.forEach((item) => {
ydata2.push(item[1]);
});
this.deveSustain.utility.forEach((item) => {
xdata.push(item[0]);
ydata3.push(item[1]);
});
this.option1 = { this.option1 = {
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // Use axis to trigger tooltip
// type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
// },
// },
legend: { legend: {
icon: "circle", icon: "circle",
orient: "horizontal", orient: "horizontal",
...@@ -157,29 +188,19 @@ export default { ...@@ -157,29 +188,19 @@ export default {
padding: [4, 0, 0, 0], padding: [4, 0, 0, 0],
}, },
}, },
tooltip: {
trigger: "item",
},
grid: { grid: {
top: "8%", top: "10%",
left: "3%", left: "3%",
right: "0", right: "0",
bottom: "10%", bottom: "10%",
containLabel: false, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: xdata,
"1日",
"2日",
"3日",
"4日",
"5日",
"6日",
"7日",
"8日",
"9日",
"10日",
"11日",
"12日",
],
axisTick: { axisTick: {
show: false, show: false,
}, },
...@@ -219,61 +240,66 @@ export default { ...@@ -219,61 +240,66 @@ export default {
}, },
series: [ series: [
{ {
name: "尖", name: "发明专利",
type: "bar", type: "bar",
stack: "total", stack: "total",
label: { label: {
show: false, show: true,
color: "white",
formatter: function (e) { formatter: function (parmas) {
// return e.value ? e.value : ""; return parmas.value == 0 ? "" : parmas.value;
// return e.value ? e.seriesName : "";
},
}, },
itemStyle: {
borderRadius: [0, 0, 4, 4],
}, },
barWidth: 20, barWidth: 20,
emphasis: { data: ydata1,
focus: "series",
},
data: [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
}, },
{ {
name: "峰", name: "外观专利",
type: "bar", type: "bar",
stack: "total", stack: "total",
barWidth: 20, barWidth: 20,
label: { label: {
show: false, show: true,
color: "white",
formatter: "{a}", formatter: function (parmas) {
return parmas.value == 0 ? "" : parmas.value;
}, },
emphasis: {
focus: "series",
}, },
data: [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99], data: ydata2,
}, },
{ {
name: "平", name: "实用新型",
type: "bar", type: "bar",
stack: "total", stack: "total",
barWidth: 20, barWidth: 20,
label: { label: {
show: false, show: true,
color: "white",
formatter: "{a}", formatter: function (parmas) {
return parmas.value == 0 ? "" : parmas.value;
}, },
emphasis: {
focus: "series",
}, },
data: [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99], data: ydata3,
}, },
], ],
}; };
}, },
//获取历年专利申请及授权 //获取历年专利申请及授权
getAuthorize() { getAuthorize() {
let xdata = [],
ydata1 = [],
ydata2 = [],
ydata3 = [];
this.deveSustain.old_patent_authorization.forEach((item) => {
xdata.push(item[0]);
ydata1.push(item[1]);
});
this.deveSustain.old_patent_application.forEach((item) => {
ydata2.push(item[1]);
});
ydata3 = ydata1.map((elem, index) =>
((elem / ydata2[index]) * 100).toFixed(2)
);
this.option2 = { this.option2 = {
//下面就是上图的配置项，关键部分有注释 //下面就是上图的配置项，关键部分有注释
tooltip: { tooltip: {
...@@ -281,6 +307,27 @@ export default { ...@@ -281,6 +307,27 @@ export default {
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
formatter: function (params) {
var html = params[0].name + "<br>";
// params[i].marker：对应数据的圆点样式
for (var i = 0; i < params.length - 1; i++) {
html +=
params[i].marker +
params[i].seriesName +
"：" +
params[i].value +
"<br>";
}
//最后一个学生占比数据 添加%
html +=
params[i].marker +
params[i].seriesName +
"：" +
params[i].value +
"%" +
"<br>";
return html;
},
}, },
//图表选择栏 //图表选择栏
...@@ -302,7 +349,7 @@ export default { ...@@ -302,7 +349,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: ["周一", "周二", "周三", "周四", "周五"], data: xdata,
axisTick: { axisTick: {
show: false, show: false,
}, },
...@@ -326,6 +373,9 @@ export default { ...@@ -326,6 +373,9 @@ export default {
axisLine: { axisLine: {
show: false, show: false,
}, },
axisLabel: {
formatter: "{value}%",
},
}, },
], ],
...@@ -335,7 +385,7 @@ export default { ...@@ -335,7 +385,7 @@ export default {
name: "授权", name: "授权",
type: "pictorialBar", //象形柱状图 type: "pictorialBar", //象形柱状图
barWidth: 20, //柱子的宽度 barWidth: 20, //柱子的宽度
data: [72, 79, 70, 67, 59], //柱子的数据 data: ydata1, //柱子的数据
symbol: "rect", //柱子的形状 symbol: "rect", //柱子的形状
symbolRepeat: true, //是否重复 symbolRepeat: true, //是否重复
// symbolOffset: [-40, 0], //柱子的位置 // symbolOffset: [-40, 0], //柱子的位置
...@@ -344,7 +394,7 @@ export default { ...@@ -344,7 +394,7 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#000", // color: "#fff",
formatter: "{c}", formatter: "{c}",
}, },
}, },
...@@ -361,19 +411,20 @@ export default { ...@@ -361,19 +411,20 @@ export default {
itemStyle: { itemStyle: {
color: "", color: "",
}, },
data: [82, 89, 90, 97, 79], data: ydata2,
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#000", // color: "#fff",
formatter: "{c}", formatter: "{c}",
}, },
}, },
{ {
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [82, 89, 90, 97, 79], data: ydata3,
name: "授权占比", name: "授权占比",
itemStyle: {},
}, },
], ],
}; };
...@@ -437,7 +488,6 @@ export default { ...@@ -437,7 +488,6 @@ export default {
data: [ data: [
{ value: 6, name: "审中" }, { value: 6, name: "审中" },
{ value: 10, name: "有效" }, { value: 10, name: "有效" },
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
...@@ -506,7 +556,11 @@ export default { ...@@ -506,7 +556,11 @@ export default {
]; ];
}, },
}, },
created() {}, created() {
this.deveSustain = this.$props.deveSustain;
this.deveSustain.patent_authorization_rate =
(this.deveSustain.patent_authorization_rate * 100).toFixed(2) + "%";
},
}; };
</script> </script>
...@@ -551,26 +605,29 @@ export default { ...@@ -551,26 +605,29 @@ export default {
background-color: #f2f9fc; background-color: #f2f9fc;
} }
} }
.color {
color: #53a7f0;
}
.company_con_anchor { .company_con_anchor {
margin-top: 15px; margin-top: 15px;
font-weight: bold; font-weight: bold;
color: #1C1C28; color: #1c1c28;
:deep(.ant-anchor-link-title) { :deep(.ant-anchor-link-title) {
color: #1C1C28; color: #1c1c28;
margin-bottom: 15px; 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){ :deep(.ant-anchor-ink::before) {
width: 8px; width: 8px;
background-color: #F5F5F5; background-color: #f5f5f5;
} }
:deep(.ant-anchor-wrapper) { :deep(.ant-anchor-wrapper) {
background-color: #fff; background-color: #fff;
padding-left: 10px; padding-left: 10px;
color: #1C1C28; color: #1c1c28;
height: 350px; height: 350px;
margin-left: 10px; margin-left: 10px;
padding: 30px 15px 0; padding: 30px 15px 0;
......
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