Skip to content

T
ty_patentSys
Commit 919b54c7 by hanxiao
Options

联调专利排名人、受让省份接口

parent ad826b85
Showing with 159 additions and 141 deletions
src/components/EchartsCon.vue
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
}, },
height: { height: {
type: String, type: String,
default: "300px", default: "100%",
}, },
option: { option: {
type: Object, type: Object,
......
src/utils/screen.js
...@@ -5,5 +5,14 @@ export const patentAuthorized = p => post('/api/dataScreen/patentAuthorized', p) ...@@ -5,5 +5,14 @@ export const patentAuthorized = p => post('/api/dataScreen/patentAuthorized', p)
export const patentTransform = p => get('/api/dataScreen/patentTransform', {}); export const patentTransform = p => get('/api/dataScreen/patentTransform', {});
//专利发展趋势图 //专利发展趋势图
export const patentDevelop = p => post('/api/dataScreen/patentDevelop', p); export const patentDevelop = p => post('/api/dataScreen/patentDevelop', p);
//专利受让省份排名
export const patentSSProvince = p => post('/api/dataScreen/patentSSProvince', p);
//大屏标题文字
export const patentHead = p => get('/api/dataScreen/patentHead', {});
//专利发明人排名
export const patentInventor = p => post('/api/dataScreen/patentInventor', p);
src/views/screen/components/patentMap.vue
<template> <template>
<div>
<div class="center_top_imgs"> <div class="center_top_imgs">
<div class="top_img1 text"> <div class="top_img1 text">
<div>专利数量</div> <div>专利数量</div>
<div><span>50595</span>项</div> <div>
<span>{{ patent_num }}</span
>项
</div>
</div> </div>
<div class="top_img2 text"> <div class="top_img2 text">
<div>专利数量</div> <div>发明数量</div>
<div><span>50595</span>项</div> <div>
<span>{{ inventor_num }}</span
>项
</div>
</div> </div>
<div class="top_img3 text"> <div class="top_img3 text">
<div>专利数量</div> <div>专利转让量</div>
<div><span>50595</span>项</div> <div>
<span>{{ transfer_num }}</span
>项
</div>
</div> </div>
<div class="top_img4 text"> <div class="top_img4 text">
<div>专利数量</div> <div>合作申请量</div>
<div><span>50595</span>项</div> <div><span>50595</span>项</div>
</div> </div>
</div> </div>
...@@ -22,24 +30,32 @@ ...@@ -22,24 +30,32 @@
<img src="@/static/screen/bg-zlzhldqyt.png" alt="" /> <img src="@/static/screen/bg-zlzhldqyt.png" alt="" />
<span class="text_title">专利转化落地区域图</span> <span class="text_title">专利转化落地区域图</span>
</div> </div>
<div style="height: 300px" id="area11"></div> <div class="echarts_container">
<EchartsCon :id="'area'" :option="option1" v-if="option1"></EchartsCon>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { patentTransform } from "@/utils/screen.js"; import EchartsCon from "@/components/EchartsCon.vue";
import { patentTransform, patentHead } from "@/utils/screen.js";
import axios from "axios"; import axios from "axios";
export default { export default {
name: "patentMap", name: "patentMap",
data() { data() {
return { return {
option1: null, option1: null,
inventor_num: null,
patent_num: null,
transfer_num: null,
}; };
}, },
components: {}, components: {
EchartsCon,
},
methods: { methods: {
init() { init() {
this.getMap(); this.getMap();
this.getTextData();
}, },
getMap() { getMap() {
let dataNum = []; let dataNum = [];
...@@ -66,12 +82,23 @@ export default { ...@@ -66,12 +82,23 @@ export default {
this.getMapOption(dataNum, dataPosition, dataScatter); this.getMapOption(dataNum, dataPosition, dataScatter);
}); });
}, },
//获取文字数据
getTextData() {
patentHead().then((res) => {
if (res.code == 0) {
this.inventor_num = res.data.inventor_num;
this.patent_num = res.data.patent_num;
this.transfer_num = res.data.transfer_num;
}
});
},
//获取地图 //获取地图
getMapOption(dataNum, dataPosition, dataScatter) { getMapOption(dataNum, dataPosition, dataScatter) {
const myChart = echarts.init(document.getElementById("area11"));
axios.get("/map_json/shanxi.json").then((res) => { axios.get("/map_json/shanxi.json").then((res) => {
echarts.registerMap("shanxi", res.data); echarts.registerMap("shanxi", res.data);
var option = {
this.option1 = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: function (params) { formatter: function (params) {
...@@ -209,7 +236,6 @@ export default { ...@@ -209,7 +236,6 @@ export default {
}, },
], ],
}; };
myChart.setOption(option);
}); });
}, },
}, },
...@@ -243,6 +269,9 @@ export default { ...@@ -243,6 +269,9 @@ export default {
// -webkit-text-fill-color: transparent; // -webkit-text-fill-color: transparent;
} }
} }
.echarts_container {
height: 70%;
}
.center_top_imgs { .center_top_imgs {
height: 140px; height: 140px;
width: 100%; width: 100%;
......
src/views/screen/components/patentPerson.vue
...@@ -3,28 +3,28 @@ ...@@ -3,28 +3,28 @@
<div class="center_left_title"> <div class="center_left_title">
<span>专利受让省份排名</span> <span>专利受让省份排名</span>
<div class="center_left_title_btn"> <div class="center_left_title_btn">
<span <span :class="[type1 == 1 ? 'active' : '']" @click="changeType(1)"
:class="[type1 == 'apply_num' ? 'active' : '']"
@click="changeType('apply_num')"
>申请量</span >申请量</span
> >
<span <span :class="[type1 == 2 ? 'active' : '']" @click="changeType(2)"
:class="[type1 == 'publish_num' ? 'active' : '']"
@click="changeType('publish_num')"
>公布量</span >公布量</span
> >
<span <span :class="[type1 == 3 ? 'active' : '']" @click="changeType(3)"
:class="[type1 == 'authorize_num' ? 'active' : '']"
@click="changeType('authorize_num')"
>授权量</span >授权量</span
> >
<a-select
ref="select"
v-model:value="yearValue"
@change="handleChange"
:options="yearOptions"
>
</a-select>
</div> </div>
</div> </div>
<div class="echarts_container"> <div class="echarts_container">
<EchartsCon <EchartsCon
:id="'123'" :id="'province'"
:option="option1" :option="option1"
:height="'140px'"
v-if="option1" v-if="option1"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -49,16 +49,15 @@ ...@@ -49,16 +49,15 @@
ref="select" ref="select"
v-model:value="yearValue1" v-model:value="yearValue1"
@change="changeYear" @change="changeYear"
:options="options1" :options="yearOptions"
> >
</a-select> </a-select>
</div> </div>
</div> </div>
<div class="echarts_container"> <div class="echarts_container">
<EchartsCon <EchartsCon
:id="'456'" :id="'rank'"
:option="option2" :option="option2"
:height="'140px'"
v-if="option2" v-if="option2"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -66,7 +65,7 @@ ...@@ -66,7 +65,7 @@
</template> </template>
<script> <script>
import EchartsCon from "@/components/EchartsCon.vue"; import EchartsCon from "@/components/EchartsCon.vue";
import { patentType, patentAuthorized } from "@/utils/screen.js"; import { patentSSProvince, patentInventor } from "@/utils/screen.js";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
export default { export default {
...@@ -118,11 +117,10 @@ export default { ...@@ -118,11 +117,10 @@ export default {
yearValue: 3, yearValue: 3,
option1: null, option1: null,
option2: null, option2: null,
type1: "apply_num", type1: 1,
type2: 1, type2: 1,
options1: [], options1: [],
yearValue1: null, yearValue1: 3,
yearValue2: null,
}; };
}, },
components: { components: {
...@@ -148,14 +146,10 @@ export default { ...@@ -148,14 +146,10 @@ export default {
//获取专利类型数据 //获取专利类型数据
getTypeData() { getTypeData() {
let data = []; let data = [];
patentType({ type: this.type1, year: this.yearValue }).then((res) => { patentSSProvince({ type: this.type1, year: this.yearValue }).then(
(res) => {
if (res.code == 0 && res.data.length > 0) { if (res.code == 0 && res.data.length > 0) {
res.data.forEach((item) => { data = [...res.data];
data.push({
name: item.name,
value: item.num,
});
});
this.getOption(data); this.getOption(data);
} else if (res.code == 0 && res.data.length == 0) { } else if (res.code == 0 && res.data.length == 0) {
data = []; data = [];
...@@ -163,83 +157,43 @@ export default { ...@@ -163,83 +157,43 @@ export default {
} else { } else {
message.error(res.msg); message.error(res.msg);
} }
}); }
);
}, },
//修改时间 //修改专利受让省份排名时间
handleChange() { handleChange() {
this.getTypeData(); this.getTypeData();
}, },
//修改专利授权时间 //修改专利发明人排名时间
changeYear() { changeYear(){
let xdata = [ this.getCompareData();
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
ydata1 = [],
ydata2 = [];
patentAuthorized({
start_year: this.yearValue1,
end_year: this.yearValue2,
type: this.type2,
}).then((res) => {
res.data.start_year.forEach((item) => {
ydata1.push(item.value);
});
res.data.end_year.forEach((item) => {
ydata2.push(item.value);
});
this.getCompareOption(xdata, ydata1, ydata2);
});
}, },
//获取专利授权对比
//获取专利发明人排名
getCompareData() { getCompareData() {
let xdata = [ let data = {
"1月", xData: [],
"2月", yData: [],
"3月", };
"4月", patentInventor({
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
ydata1 = [],
ydata2 = [];
this.yearValue1 = this.options1[0].value;
this.yearValue2 = this.options1[1].value;
patentAuthorized({
start_year: this.yearValue1,
end_year: this.yearValue2,
type: this.type2, type: this.type2,
year: this.yearValue1,
page: 1,
size: 20,
}).then((res) => { }).then((res) => {
res.data.start_year.forEach((item) => { res.data.list.forEach((item) => {
ydata1.push(item.value); data.xData.push(item.name);
}); data.yData.push(item.value);
res.data.end_year.forEach((item) => {
ydata2.push(item.value);
}); });
this.getCompareOption(xdata, ydata1, ydata2);
this.getCompareOption(data);
}); });
}, },
getOption(data) { getOption(data) {
const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"]; // const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"];
this.option1 = { this.option1 = {
tooltip: { tooltip: {
show: false, show: true,
}, },
legend: { legend: {
top: "center", top: "center",
...@@ -271,9 +225,9 @@ export default { ...@@ -271,9 +225,9 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: (params) => { // color: (params) => {
return colorList[params.dataIndex]; // return colorList[params.dataIndex];
}, // },
}, },
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10, shadowBlur: 10,
...@@ -284,8 +238,8 @@ export default { ...@@ -284,8 +238,8 @@ export default {
], ],
}; };
}, },
//专利授权对比图option //专利发明人排名option
getCompareOption(xdata, ydata1, ydata2) { getCompareOption(data) {
this.option2 = { this.option2 = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -298,7 +252,7 @@ export default { ...@@ -298,7 +252,7 @@ export default {
textStyle: { textStyle: {
color: "#fff", color: "#fff",
}, },
backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色 backgroundColor: "rgba(45, 67, 119, 1)", //设置背景颜色
}, },
grid: { grid: {
left: "3%", left: "3%",
...@@ -309,7 +263,7 @@ export default { ...@@ -309,7 +263,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xdata, data: data.xData,
axisPointer: { axisPointer: {
type: "shadow", type: "shadow",
}, },
...@@ -364,13 +318,13 @@ export default { ...@@ -364,13 +318,13 @@ export default {
}, },
series: [ series: [
{ {
data: ydata1, data: data.yData,
name: this.yearValue1, // name: this.yearValue1,
type: "bar", type: "bar",
barWidth: "8px", barWidth: "8px",
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgba(255, 100, 102, 1)", color: "rgba(68, 174, 248, 1)",
borderRadius: [5, 5, 0, 0], borderRadius: [5, 5, 0, 0],
}, },
}, },
...@@ -383,35 +337,53 @@ export default { ...@@ -383,35 +337,53 @@ export default {
formatter: "{c}", formatter: "{c}",
}, },
}, },
],
dataZoom: [
{ {
data: ydata2, id: "dataZoomY",
name: this.yearValue2, xAxisIndex: [0, 1],
type: "bar", show: true, //是否显示滑动条，不影响使用
barWidth: "8px", type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
itemStyle: { orient: "horizontal",
normal: { startValue: 0, // 从头开始。
color: "rgba(68, 174, 248, 1)", endValue: 9, // 一次性展示个
borderRadius: [5, 5, 0, 0], height: 3,
}, bottom:0,
}, borderColor: "transparent",
label: { fillerColor: "rgba(205,205,205,1)",
show: false, zoomLock: true,
position: "top", showDataShadow: false, //是否显示数据阴影 默认auto
fontSize: 12, backgroundColor: "transparent",
color: "#F5F5F5", showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
offset: [0, -5], realtime: true, //是否实时更新
formatter: "{c}", filterMode: "filter",
handleIcon: "circle",
handleStyle: {
color: "rgba(205,205,205,1)",
borderColor: "rgba(205,205,205,1)",
},
// handleSize: '80%',
moveHandleSize: 0,
brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
}, },
{
type: "inside",
xAxisIndex: [0, 1],
orient: "horizontal",
zoomOnMouseWheel: false, //滚轮是否触发缩放
moveOnMouseMove: true, //鼠标滚轮触发滚动
moveOnMouseWheel: true,
bottom:0,
}, },
], ],
}; };
}, },
//切换专利类型 //切换专利受让省份类型
changeType(type) { changeType(type) {
this.type1 = type; this.type1 = type;
this.getTypeData(); this.getTypeData();
}, },
//切换专利授权类型 //切换专利发明人排名类型
changeAuth(type) { changeAuth(type) {
this.type2 = type; this.type2 = type;
this.getCompareData(); this.getCompareData();
...@@ -428,6 +400,8 @@ export default { ...@@ -428,6 +400,8 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.center_left_echarts { .center_left_echarts {
padding: 0 15px 0 5px;
height: 45%;
.center_left_title { .center_left_title {
background: url("../../../static/screen/title-long.png") no-repeat; background: url("../../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -439,7 +413,7 @@ export default { ...@@ -439,7 +413,7 @@ export default {
font-style: italic; font-style: italic;
color: #f6f9fe; color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42); text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px; padding-left: 25px;
padding-top: 6px; padding-top: 6px;
.center_left_title_btn { .center_left_title_btn {
font-size: 14px; font-size: 14px;
...@@ -477,6 +451,7 @@ export default { ...@@ -477,6 +451,7 @@ export default {
.echarts_container { .echarts_container {
// height: 120px; // height: 120px;
margin-top: 40px; margin-top: 40px;
height: 70%;
} }
} }
</style> </style>
src/views/screen/components/patentType.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<EchartsCon <EchartsCon
:id="'123'" :id="'123'"
:option="option1" :option="option1"
:height="'140px'"
v-if="option1" v-if="option1"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<EchartsCon <EchartsCon
:id="'456'" :id="'456'"
:option="option2" :option="option2"
:height="'140px'"
v-if="option2" v-if="option2"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -442,6 +442,8 @@ export default { ...@@ -442,6 +442,8 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.center_left_echarts { .center_left_echarts {
padding: 0 15px;
height: 45%;
.center_left_title { .center_left_title {
background: url("../../../static/screen/title-long.png") no-repeat; background: url("../../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -453,7 +455,7 @@ export default { ...@@ -453,7 +455,7 @@ export default {
font-style: italic; font-style: italic;
color: #f6f9fe; color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42); text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px; padding-left: 25px;
padding-top: 6px; padding-top: 6px;
.center_left_title_btn { .center_left_title_btn {
font-size: 14px; font-size: 14px;
...@@ -491,6 +493,7 @@ export default { ...@@ -491,6 +493,7 @@ export default {
.echarts_container { .echarts_container {
// height: 120px; // height: 120px;
margin-top: 40px; margin-top: 40px;
height: 70%;
} }
} }
</style> </style>
src/views/screen/index.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<patentMap></patentMap> <patentMap></patentMap>
</div> </div>
<div class="center_right"> <div class="center_right">
<!-- <patentPerson></patentPerson> --> <patentPerson></patentPerson>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
<EchartsCon <EchartsCon
:id="'patent_trend'" :id="'patent_trend'"
:option="option5" :option="option5"
:height="'150px'"
v-if="option5" v-if="option5"
></EchartsCon> ></EchartsCon>
</div> </div>
...@@ -55,7 +54,7 @@ ...@@ -55,7 +54,7 @@
<div class="bottom_title"> <div class="bottom_title">
<span>专利产业布局分布（山西十大产业）</span> <span>专利产业布局分布（山西十大产业）</span>
</div> </div>
<div class="rank_con"> <!-- <div class="rank_con">
<div class="rank_con_left"> <div class="rank_con_left">
<div class="rank_progress" v-for="item in rankArr"> <div class="rank_progress" v-for="item in rankArr">
<span class="index1 index" v-if="item.index === '1'">{{ <span class="index1 index" v-if="item.index === '1'">{{
...@@ -147,7 +146,7 @@ ...@@ -147,7 +146,7 @@
<span class="num4 num">{{ item.num }}个</span> <span class="num4 num">{{ item.num }}个</span>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -515,6 +514,7 @@ export default { ...@@ -515,6 +514,7 @@ export default {
background-size: 100%; background-size: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
// height: 885px; // height: 885px;
header { header {
background-image: url("../../static/screen/bg-top-logo.png"); background-image: url("../../static/screen/bg-top-logo.png");
...@@ -546,9 +546,10 @@ export default { ...@@ -546,9 +546,10 @@ export default {
.bottom { .bottom {
// height: 120px; // height: 120px;
display: flex; display: flex;
height: 28%;
justify-content: space-evenly;
.bottom_echart { .bottom_echart {
width: 50%; width: 48%;
.bottom_title { .bottom_title {
background: url("../../static/screen/title-long.png") no-repeat; background: url("../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -696,5 +697,6 @@ export default { ...@@ -696,5 +697,6 @@ export default {
.echarts_container { .echarts_container {
// height: 120px; // height: 120px;
margin-top: 20px; margin-top: 20px;
height: 70%;
} }
</style> </style>
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