Skip to content

T
ty_patentSys
Commit f1f00a84 by hanxiao
Options

添加大屏地图

parent 87772722
Showing with 571 additions and 90 deletions
src/views/home/index.vue
......@@ -76,9 +76,6 @@ export default {
],
followList: [],
innovateList: [
"山煤国际能源集团股份有限公司",
"山煤国际能源集团股份有限公司",
"山煤国际能源集团股份有限公司",
],
};
},
......@@ -119,10 +116,10 @@ export default {
});
break;
case "仪表盘":
// let routeUrl = this.$router.resolve({
// path: "/screen",
// });
// window.open(routeUrl.href, "_blank");
let routeUrl = this.$router.resolve({
path: "/screen",
});
window.open(routeUrl.href, "_blank");
break;
}
},
......
src/views/screen/components/patentMap.vue 0 → 100644
<template>
<div>
<div class="center_top_imgs">
<div class="top_img1">
<div>专利数量</div>
<div><span>50595</span>项</div>
</div>
<div class="top_img2"></div>
<div class="top_img3"></div>
<div class="top_img4"></div>
</div>
<div>
<!-- <h2>专利转化落地区域图</h2> -->
</div>
<div style="height: 300px" id="area11"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
name: "patentMap",
data() {
return {
option1: null,
};
},
components: {},
methods: {
init() {
this.getMap();
},
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%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.3
}
}
},
tooltip: {
// 悬浮框
trigger: "item", // 触发条件
backgroundColor: "RGBA(136, 123, 135, 0.8)",
formatter: "{b}<br/>案件数{c}", // 自定义显示数据
textStyle: {
color: "#ffffff",
},
},
series: [
{
type: "map",
mapType: "shanxi",
zoom: 1.2,
top: "5%",
x: "center",
label: {
show: true, // 显示
},
itemStyle: {
normal: {
// 静态的时候显示的默认样式
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [
{
offset: 0,
color: "RGBA(40, 99, 113, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "RGBA(28, 79, 105, 0.6)", // 100% 处的颜色
},
],
}, // 地图颜色
borderColor: "#886364", // 边框颜色
},
emphasis: {
// 鼠标移入动态的时候显示的默认样式
borderWidth: 2, // 边框宽度
areaColor: "#ffffff", // 地图颜色
},
},
// 数据
data: [
{
name: "太原市",
value: "1202",
},
{
name: "晋城市",
value: "396",
},
{
name: "长治",
value: "1125",
},
{
name: "临汾",
value: "635",
},
],
},
{
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3, // 尾迹线条曲直度
color: "yellow",
},
},
data:[
[
[112.531079,37.863924],
[118,45]
],
[
[112.531079,37.863924],
[130,45]
]
]
},
],
};
myChart.setOption(option);
console.log(option);
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="less" scoped>
.center_top_imgs {
height: 140px;
width: 100%;
display: flex;
.top_img1 {
width: 25%;
height: 100%;
background: url("~@/static/screen/icon-zlsl.png") no-repeat;
background-size: 100% 100%;
}
.top_img2 {
width: 25%;
height: 100%;
background: url("~@/static/screen/icon-fmsl.png") no-repeat;
background-size: 100% 100%;
}
.top_img3 {
width: 25%;
height: 100%;
background: url("~@/static/screen/icon-zlzrl.png") no-repeat;
background-size: 100% 100%;
}
.top_img4 {
width: 25%;
height: 100%;
background: url("~@/static/screen/icon-hzsql.png") no-repeat;
background-size: 100% 100%;
}
}
</style>
src/views/screen/components/patentType.vue 0 → 100644
<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')"
>申请量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
>公布量</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>授权量</span
>
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@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="'123'" :option="option1" :height="'200px'"></EchartsCon>
</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')"
>专利总量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
>发明专利</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>使用新型</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>外观设计</span
>
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@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="'456'" :option="option2" :height="'200px'"></EchartsCon>
</div>
</div>
</template>
<script>
import EchartsCon from "@/components/EchartsCon.vue";
export default {
name: "patentType",
data() {
return {
option1: null,
option2: null,
};
},
components: {
EchartsCon,
},
methods: {
init() {
this.typeOption();
this.compareOption();
},
//获取专利类型
typeOption() {
const chartOption = [
{
name: "发明专利",
value: 100,
},
{
name: "实用新型",
value: 100,
},
{
name: "外观设计",
value: 100,
},
];
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,
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() {
let myData3 = [
"联庄村",
"唐家堡村",
"小山村",
"高泉村",
"寒树村",
"寒水村",
"中化村 ",
"金华村",
"好地掌村",
"庙川村",
];
let jch = [200, 340, 320, 220, 360, 300, 160, 400, 250, 280];
let tph = [160, 300, 280, 180, 300, 240, 120, 340, 200, 250];
this.option2 = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
textStyle: {
color: "#fff",
},
backgroundColor: "rgba(45, 67, 119, 0.8)", //设置背景颜色
formatter: "{b}：{c}",
},
// grid: {
// left: "3%",
// right: "3%",
// bottom: "1%",
// top: "18%",
// containLabel: true,
// },
xAxis: {
type: "category",
data: myData3,
axisPointer: {
type: "shadow",
},
axisLabel: {
color: "rgba(255, 255, 255, .8)",
interval: 0,
rotate: 30,
margin: 15,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(45, 67, 119, 0.8)",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
},
yAxis: {
type: "value",
// name: "(户)",
nameTextStyle: {
color: "#B5C5D4",
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(45, 67, 119, 0.8)",
},
},
min: 0,
axisLabel: {
show: true,
color: "#B5C5D4",
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
// width: 0.5,
color: "rgba(45, 67, 119, 1)",
type: "dashed",
},
},
},
series: [
{
data: jch,
name: "监测户",
type: "bar",
barWidth: "8px",
itemStyle: {
normal: {
color: "rgba(255, 100, 102, 1)",
borderRadius: [5, 5, 0, 0],
},
},
label: {
show: false,
position: "top",
fontSize: 12,
color: "#F5F5F5",
offset: [0, -5],
formatter: "{c}",
},
},
{
data: tph,
name: "脱贫户",
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}",
},
},
],
};
},
},
beforeMount() {
this.init();
},
};
</script>
<style lang="less" scoped>
.center_left_echarts {
.center_left_title {
background: url("../../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%;
font-size: 20px;
height: 39px;
width: 100%;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px;
padding-top: 6px;
.center_left_title_btn {
font-size: 14px;
font-family: "jiangcheng";
font-weight: normal;
color: #bbcdef;
opacity: 0.8;
span {
padding: 5px 10px;
cursor: pointer;
}
.active {
color: #fff;
text-shadow: 0px 2px 8px #f6f9fe;
}
:deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
background-color: #2d58b8;
color: #99b1dd;
}
:deep(.ant-select-dropdown) {
background-color: #1052df !important;
}
}
}
}
</style>
src/views/screen/index.vue
......@@ -3,42 +3,13 @@
<header>太原理工大学专利成果转移转化智能推荐系统</header>
<div class="center">
<div class="center_left">
<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')"
>申请量</span
>
<span
:class="[activeTrend == 2 ? 'active' : '']"
@click="changetrend('2')"
>公布量</span
>
<span
:class="[activeTrend == 3 ? 'active' : '']"
@click="changetrend('3')"
>授权量</span
>
<a-select
ref="select"
v-model:value="value1"
style="width: 120px"
@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="''" :option="option5" :height="'200px'"></EchartsCon>
</div>
<patentType></patentType>
</div>
<div class="center_map">
<patentMap></patentMap>
</div>
<div class="center_right">
<patentType></patentType>
</div>
</div>
<div class="bottom">
......@@ -80,7 +51,7 @@
<EchartsCon
:id="'patent_trend'"
:option="option5"
:height="'200px'"
:height="'260px'"
></EchartsCon>
</div>
<div class="bottom_echart">
......@@ -185,8 +156,9 @@
</div>
</template>
<script>
import EchartsCon from "../../components/EchartsCon.vue";
import EchartsCon from "@/components/EchartsCon.vue";
import patentType from "./components/patentType.vue";
import patentMap from "./components/patentMap.vue";
export default {
name: "screen",
data() {
......@@ -255,6 +227,8 @@ export default {
},
components: {
EchartsCon,
patentType,
patentMap
},
methods: {
init() {
......@@ -489,53 +463,20 @@ export default {
}
.center {
height: 70%;
.center_left{
width: 30%;
.center_left_echarts{
.center_left_title{
background: url("../../static/screen/title-long.png") no-repeat;
background-size: 100% 100%;
font-size: 20px;
height: 39px;
width: 100%;
font-family: "jiangcheng";
font-weight: normal;
font-style: italic;
color: #f6f9fe;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
padding-left: 30px;
padding-top: 6px;
.center_left_title_btn {
font-size: 14px;
font-family: "jiangcheng";
font-weight: normal;
color: #bbcdef;
opacity: 0.8;
span {
padding: 5px 10px;
cursor: pointer;
}
.active {
color: #fff;
text-shadow: 0px 2px 8px #f6f9fe;
}
:deep(
.ant-select:not(.ant-select-customize-input) .ant-select-selector
) {
background-color: #2d58b8;
color: #99b1dd;
}
:deep(.ant-select-dropdown) {
background-color: #1052df !important;
}
}
}
display: flex;
.center_left {
width: 28%;
}
}
.center_map{
width: 44%;
}
.center_right{
width: 28%;
}
}
.bottom {
height: 275px;
height: 380px;
display: flex;
.bottom_echart {
......
vue.config.js
......@@ -18,7 +18,7 @@ module.exports = {
// 配置不同的后台API地址
proxy: {
'/api': {
target: 'http://39.100.39.50:5089/api',
target: 'http://39.98.37.63:5089/api',
ws: false,
changeOrigin: true,
pathRewrite: {
......
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