Skip to content

T
ty_patentSys
Commit 919b54c7 by hanxiao
Options

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

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