Skip to content

T
ty_patentSys
Commit 6075e303 by hanxiao
Options

添加大屏页面

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