Skip to content

T
ty_patentSys
Commit 6075e303 by hanxiao
Options

添加大屏页面

parent f1f00a84
Showing with 377 additions and 226 deletions
src/utils/screen.js 0 → 100644
import { get, post, put, Delete } from './request'
export const patentType = p => post('/api/dataScreen/patentType', p);
\ No newline at end of file
src/views/screen/components/patentMap.vue
...@@ -33,75 +33,91 @@ export default { ...@@ -33,75 +33,91 @@ export default {
getMap() { getMap() {
const myChart = echarts.init(document.getElementById("area11")); const myChart = echarts.init(document.getElementById("area11"));
axios.get("/map_json/shanxi.json").then((res) => { axios.get("/map_json/shanxi.json").then((res) => {
console.log(res);
// [112.531079,37.863924]
echarts.registerMap("shanxi", res.data); echarts.registerMap("shanxi", res.data);
// 注册矢量地图数据
var option = { var option = {
geo: { geo: [
map: 'shanxi', {
zoom: 1, map: "shanxi",
aspectScale: 0.95, aspectScale: 1,
layoutCenter: ['50%', '50%'], // 地图位置 zoom: 0.65,
// layoutSize: '108%', layoutCenter: ["50%", "50%"],
layoutSize: "150%",
itemStyle: { show: true,
normal: { roam: false,
shadowColor: '#276fce', label: {
shadowOffsetX: 0, emphasis: {
shadowOffsetY: 15, show: false,
opacity: 0.3 },
} },
}
}, itemStyle: {
tooltip: { normal: {
// 悬浮框 borderColor: "#c0f3fb",
trigger: "item", // 触发条件 borderWidth: 1,
backgroundColor: "RGBA(136, 123, 135, 0.8)", shadowColor: "#8cd3ef",
formatter: "{b}<br/>案件数{c}", // 自定义显示数据 shadowOffsetY: 10,
textStyle: { shadowBlur: 120,
color: "#ffffff", areaColor: "transparent",
},
},
}, },
}, ],
series: [ series: [
{ {
name: "山西市数据",
type: "map", type: "map",
mapType: "shanxi", map: "shanxi", // 自定义扩展图表类型
zoom: 1.2, aspectScale: 1,
top: "5%", zoom: 0.65, // 缩放
x: "center", showLegendSymbol: true,
label: { label: {
show: true, // 显示 normal: {
show: true,
textStyle: { color: "#fff", fontSize: "120%" },
},
// emphasis: {
// show: false,
// },
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(255,255,255,0.8)",
textStyle: {
color: "#666",
decoration: "none",
},
formatter: "{b}:{c}",
}, },
itemStyle: { itemStyle: {
normal: { normal: {
// 静态的时候显示的默认样式
areaColor: { areaColor: {
type: "radial", type: "linear",
x: 0.5, x: 1200,
y: 0.5, y: 0,
r: 0.9, x2: 0,
y2: 0,
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "RGBA(40, 99, 113, 1)", // 0% 处的颜色 color: "rgba(3,27,78,0.75)", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: "RGBA(28, 79, 105, 0.6)", // 100% 处的颜色 color: "rgba(58,149,253,0.75)", // 50% 处的颜色
}, },
], ],
}, // 地图颜色 global: true, // 缺省为 false
borderColor: "#886364", // 边框颜色 },
}, borderColor: "#fff",
emphasis: { borderWidth: 0.2,
// 鼠标移入动态的时候显示的默认样式
borderWidth: 2, // 边框宽度
areaColor: "#ffffff", // 地图颜色
}, },
}, },
// 数据 layoutCenter: ["50%", "50%"],
layoutSize: "150%",
markPoint: {
symbol: "none",
},
data: [ data: [
{ {
name: "太原市", name: "太原市",
...@@ -112,11 +128,11 @@ export default { ...@@ -112,11 +128,11 @@ export default {
value: "396", value: "396",
}, },
{ {
name: "长治", name: "长治市",
value: "1125", value: "1125",
}, },
{ {
name: "临汾", name: "临汾市",
value: "635", value: "635",
}, },
], ],
...@@ -124,36 +140,102 @@ export default { ...@@ -124,36 +140,102 @@ export default {
{ {
type: "lines", type: "lines",
zlevel: 2, zlevel: 2,
label: {
show: false,
},
effect: { effect: {
show: true, show: true,
period: 4, // 箭头指向速度，值越小速度越快 period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重 trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标 symbol: "arrow", //箭头图标
symbolSize: 5, // 图标大小 symbolSize: 6, //图标大小
}, },
lineStyle: { lineStyle: {
normal: { normal: {
width: 1, // 尾迹线条宽度 color: "#FBDEDE",
opacity: 1, // 尾迹线条透明度 width: 2, //尾迹线条宽度
curveness: 0.3, // 尾迹线条曲直度 opacity: 1, //尾迹线条透明度
color: "yellow", curveness: 0.3, //尾迹线条曲直度
shadowColor: "rgba(255, 200, 113, 0.2)",
shadowBlur: 10,
}, },
}, },
data:[ data: [
[ [
[112.531079,37.863924], [112.531079, 37.863924],
[118,45] [114, 39],
], ],
[ [
[112.531079,37.863924], [112.531079, 37.863924],
[130,45] [112, 39],
] ],
] ],
}, },
// {
// type: "effectScatter",
// coordinateSystem: "geo",
// symbolSize: 10,
// rippleEffect: {
// // 坐标点动画
// period: 3,
// scale: 5,
// brushType: "fill",
// },
// label: {
// normal: {
// show: true,
// position: "right",
// formatter: "{b}",
// color: "#f28813",
// fontWeight: "bold",
// fontSize: 14,
// },
// },
// data: [
// {
// name: "太原市",
// value: [112.531079, 37.863924],
// },
// {
// name: "晋城市",
// value: [112, 39],
// },
// {
// name: "长治市",
// value: "1125",
// },
// {
// name: "临汾市",
// value: "635",
// },
// ],
// symbolSize: function (val) {
// return 8;
// },
// showEffectOn: "render",
// rippleEffect: {
// brushType: "stroke",
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: "{b}",
// position: "left",
// show: false,
// },
// },
// itemStyle: {
// normal: {
// color: "#FBDEDE",
// shadowBlur: 15,
// shadowColor: "#FBDEDE",
// },
// },
// zlevel: 1,
// },
], ],
}; };
myChart.setOption(option); myChart.setOption(option);
console.log(option);
}); });
}, },
}, },
......
src/views/screen/components/patentType.vue
<template> <template>
<div> <div class="center_left_echarts">
<div class="center_left_echarts"> <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 == 'apply_num' ? 'active' : '']"
:class="[activeTrend == 1 ? 'active' : '']" @click="changeType('apply_num')"
@click="changetrend('1')" >申请量</span
>申请量</span >
> <span
<span :class="[type1 == 'publish_num' ? 'active' : '']"
:class="[activeTrend == 2 ? 'active' : '']" @click="changeType('publish_num')"
@click="changetrend('2')" >公布量</span
>公布量</span >
> <span
<span :class="[type1 == 'authorize_num' ? 'active' : '']"
:class="[activeTrend == 3 ? 'active' : '']" @click="changeType('authorize_num')"
@click="changetrend('3')" >授权量</span
>授权量</span >
> <a-select
<a-select ref="select"
ref="select" v-model:value="yearValue"
v-model:value="value1" @change="handleChange"
style="width: 120px" :options="yearOptions"
@change="handleChange" >
> </a-select>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled
>Disabled</a-select-option
>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select>
</div>
</div> </div>
<EchartsCon :id="'123'" :option="option1" :height="'200px'"></EchartsCon>
</div> </div>
<div class="center_left_echarts"> <div class="echarts_container">
<div class="center_left_title"> <EchartsCon
<span>专利授权对比图</span> :id="'123'"
<div class="center_left_title_btn"> :option="option1"
<span :height="'170px'"
:class="[activeTrend == 1 ? 'active' : '']" v-if="option1"
@click="changetrend('1')" ></EchartsCon>
>专利总量</span </div>
> </div>
<span <div class="center_left_echarts">
:class="[activeTrend == 2 ? 'active' : '']" <div class="center_left_title">
@click="changetrend('2')" <span>专利授权对比图</span>
>发明专利</span <div class="center_left_title_btn">
> <span
<span :class="[activeTrend == 1 ? 'active' : '']"
:class="[activeTrend == 3 ? 'active' : '']" @click="changeAuth('1')"
@click="changetrend('3')" >专利总量</span
>使用新型</span >
> <span
<span :class="[activeTrend == 2 ? 'active' : '']"
:class="[activeTrend == 3 ? 'active' : '']" @click="changeAuth('2')"
@click="changetrend('3')" >发明专利</span
>外观设计</span >
> <span
<a-select :class="[activeTrend == 3 ? 'active' : '']"
ref="select" @click="changeAuth('3')"
v-model:value="value1" >使用新型</span
style="width: 120px" >
@change="handleChange" <span
> :class="[activeTrend == 3 ? 'active' : '']"
<a-select-option value="jack">Jack</a-select-option> @click="changeAuth('3')"
<a-select-option value="lucy">Lucy</a-select-option> >外观设计</span
<a-select-option value="disabled" disabled >
>Disabled</a-select-option <a-select
> ref="select"
<a-select-option value="Yiminghe">yiminghe</a-select-option> v-model:value="value1"
</a-select> style="width: 120px"
</div> @change="handleChange"
:options="yearOptions"
>
</a-select>
</div> </div>
<EchartsCon :id="'456'" :option="option2" :height="'200px'"></EchartsCon>
</div> </div>
<EchartsCon :id="'456'" :option="option2" :height="'200px'"></EchartsCon>
</div> </div>
</template> </template>
<script> <script>
import EchartsCon from "@/components/EchartsCon.vue"; import EchartsCon from "@/components/EchartsCon.vue";
import { patentType } from "@/utils/screen.js";
import { message } from "ant-design-vue";
export default { export default {
name: "patentType", name: "patentType",
data() { data() {
return { return {
yearOptions: [
{
value: 1,
label: "今年",
},
{
value: 2,
label: "近两年",
},
{
value: 3,
label: "近三年",
},
{
value: 4,
label: "近四年",
},
{
value: 5,
label: "近五年",
},
{
value: 6,
label: "近六年",
},
{
value: 7,
label: "近七年",
},
{
value: 8,
label: "近八年",
},
{
value: 9,
label: "近九年",
},
{
value: 10,
label: "近十年",
},
],
yearValue: 3,
option1: null, option1: null,
option2: null, option2: null,
type1: "apply_num",
}; };
}, },
components: { components: {
...@@ -94,76 +136,35 @@ export default { ...@@ -94,76 +136,35 @@ export default {
}, },
methods: { methods: {
init() { init() {
this.typeOption(); this.getTypeData();
this.compareOption(); this.getCompareData();
}, },
//获取专利类型 //获取专利类型数据
typeOption() { getTypeData() {
const chartOption = [ let data = [];
{ patentType({ type: this.type1, year: this.yearValue }).then((res) => {
name: "发明专利", if (res.code == 0 && res.data.length > 0) {
value: 100, res.data.forEach((item) => {
}, data.push({
{ name: item.name,
name: "实用新型", value: item.num,
value: 100, });
}, });
{ this.getOption(data);
name: "外观设计", } else if (res.code == 0 && res.data.length == 0) {
value: 100, data = [];
}, this.getOption(data);
]; } else {
const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"]; message.error(res.msg);
this.option1 = { }
tooltip: { });
show: false, },
}, //修改时间
legend: { handleChange(){
top: "center", this.getTypeData()
left: "10%",
orient: "vertical",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
selectedMode: false,
textStyle: {
color: "#fff",
fontFamily: "jiangcheng",
},
},
series: [
{
name: "Access From",
type: "pie",
center: ["50%", "50%"],
radius: ["20%", "50%"],
label: {
show: true,
position: "inside",
color: "#fff",
formatter: "{d}%",
},
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: (params) => {
return colorList[params.dataIndex];
},
},
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
// silent: true,
data: chartOption,
},
],
};
}, },
//获取专利授权对比 //获取专利授权对比
compareOption() { getCompareData() {
let myData3 = [ let myData3 = [
"联庄村", "联庄村",
"唐家堡村", "唐家堡村",
...@@ -250,7 +251,7 @@ export default { ...@@ -250,7 +251,7 @@ export default {
show: true, show: true,
lineStyle: { lineStyle: {
// width: 0.5, // width: 0.5,
color: "rgba(45, 67, 119, 1)", color: "rgba(45, 67, 119, 1)",
type: "dashed", type: "dashed",
}, },
}, },
...@@ -265,7 +266,6 @@ export default { ...@@ -265,7 +266,6 @@ export default {
normal: { normal: {
color: "rgba(255, 100, 102, 1)", color: "rgba(255, 100, 102, 1)",
borderRadius: [5, 5, 0, 0], borderRadius: [5, 5, 0, 0],
}, },
}, },
label: { label: {
...@@ -300,10 +300,67 @@ export default { ...@@ -300,10 +300,67 @@ export default {
], ],
}; };
}, },
getOption(data) {
const colorList = ["#1E78FF", "#E94C5B", "#2EC59A"];
this.option1 = {
tooltip: {
show: false,
},
legend: {
top: "center",
left: "10%",
orient: "vertical",
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 8,
textStyle: {
color: "#fff",
fontFamily: "jiangcheng",
},
},
series: [
{
type: "pie",
center: ["50%", "50%"],
radius: ["20%", "50%"],
label: {
show: true,
position: "inside",
color: "#fff",
formatter: "{d}%",
},
labelLine: {
show: false,
},
itemStyle: {
normal: {
color: (params) => {
return colorList[params.dataIndex];
},
},
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
// silent: true,
data: data,
},
],
};
},
//切换专利类型
changeType(type) {
this.type1 = type;
this.getTypeData();
},
}, },
beforeMount() { beforeMount() {
this.init(); this.init();
}, },
mounted() {
this.getOption();
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -337,12 +394,26 @@ export default { ...@@ -337,12 +394,26 @@ export default {
} }
:deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) { :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
background-color: #2d58b8; background-color: #2d58b8;
color: #99b1dd; color: #f6f9fe;
font-family: Arial, sans-serif;
} }
:deep(.ant-select-dropdown) { :deep(.ant-select-dropdown) {
background-color: #1052df !important; background-color: #1052df !important;
} }
:deep(.ant-select) {
width: 90px !important;
float: right;
}
:deep(
.ant-select-single.ant-select-show-arrow .ant-select-selection-item
) {
padding-right: 10px;
}
} }
} }
.echarts_container {
// height: 120px;
margin-top: 40px;
}
} }
</style> </style>
src/views/screen/index.vue
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<header>太原理工大学专利成果转移转化智能推荐系统</header> <header>太原理工大学专利成果转移转化智能推荐系统</header>
<div class="center"> <div class="center">
<div class="center_left"> <div class="center_left">
<patentType></patentType> <!-- <patentType></patentType> -->
</div> </div>
<div class="center_map"> <div class="center_map">
<patentMap></patentMap> <patentMap></patentMap>
</div> </div>
<div class="center_right"> <div class="center_right">
<patentType></patentType> <!-- <patentType></patentType> -->
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
...@@ -39,19 +39,14 @@ ...@@ -39,19 +39,14 @@
@focus="focus" @focus="focus"
@change="handleChange" @change="handleChange"
> >
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="disabled" disabled
>Disabled</a-select-option
>
<a-select-option value="Yiminghe">yiminghe</a-select-option>
</a-select> </a-select>
</div> </div>
</div> </div>
<EchartsCon <EchartsCon
:id="'patent_trend'" :id="'patent_trend'"
:option="option5" :option="option5"
:height="'260px'" :height="'120px'"
></EchartsCon> ></EchartsCon>
</div> </div>
<div class="bottom_echart"> <div class="bottom_echart">
...@@ -228,7 +223,7 @@ export default { ...@@ -228,7 +223,7 @@ export default {
components: { components: {
EchartsCon, EchartsCon,
patentType, patentType,
patentMap patentMap,
}, },
methods: { methods: {
init() { init() {
...@@ -446,6 +441,7 @@ export default { ...@@ -446,6 +441,7 @@ export default {
background-image: url("../../static/screen/bg-all.png"); background-image: url("../../static/screen/bg-all.png");
background-size: 100%; background-size: 100%;
width: 100%; width: 100%;
height: 100%;
// height: 885px; // height: 885px;
header { header {
background-image: url("../../static/screen/bg-top-logo.png"); background-image: url("../../static/screen/bg-top-logo.png");
...@@ -462,21 +458,20 @@ export default { ...@@ -462,21 +458,20 @@ export default {
text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66); text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66);
} }
.center { .center {
height: 70%; height: 65%;
display: flex; display: flex;
.center_left { .center_left {
width: 28%; width: 28%;
} }
.center_map{ .center_map {
width: 44%; width: 44%;
} }
.center_right{ .center_right {
width: 28%; width: 28%;
} }
} }
.bottom { .bottom {
height: 380px; height: 120px;
display: flex; display: flex;
.bottom_echart { .bottom_echart {
...@@ -521,7 +516,7 @@ export default { ...@@ -521,7 +516,7 @@ export default {
} }
} }
.rank_con { .rank_con {
height: 90%; height:160px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
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