Skip to content

T
ty_patentSys
Commit 5e5a28c5 by hanxiao
Options

修改仪表盘细节

parent fe103c83
Showing with 170 additions and 25 deletions
src/utils/screen.js
......@@ -13,6 +13,9 @@ export const patentHead = p => get('/api/dataScreen/patentHead', {});
export const patentInventor = p => post('/api/dataScreen/patentInventor', p);
//产业排名
export const patentIndustryTopN = p => get('/api/dataScreen/patentIndustryTopN', {});
//项目合作方
export const projectPartner = p => get('/api/dataScreen/projectPartner', {});
......
src/views/home/index.vue
......@@ -85,7 +85,6 @@ export default {
},
methods: {
changepage(name) {
switch (name) {
case "企业":
this.$router.push({
......
src/views/login/index.vue
......@@ -126,7 +126,6 @@ export default {
methods: {
//账号登录
login() {
console.log(this.formState.password);
let param = AES_Encrypt(
JSON.stringify({
login_name: this.formState.username,
......
src/views/screen/components/patentMap.vue
......@@ -23,17 +23,20 @@
</div>
<div class="top_img4 text">
<div>合作申请量</div>
<div><span>50595</span>项</div>
<div><span>{{ application_num }}</span>项</div>
</div>
</div>
<div class="map_title_box">
<div class="map_title">
<img src="@/static/screen/bg-zlzhldqyt.png" alt="" />
<span class="text_title">
<span class="active" @click="changeMap(1)">
专利转化落地区域图 &nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; &nbsp;</span
<span :class="[maptab == 1 ? 'active' : '']" @click="changeMap(1)">
专利转化落地区域图</span
>
<span @click="changeMap(2)"> 项目合作方区域图 </span>
&nbsp; &nbsp; &nbsp;| &nbsp; &nbsp; &nbsp;
<span :class="[maptab == 2 ? 'active' : '']" @click="changeMap(2)">
项目合作方区域图
</span>
</span>
</div>
<!-- <div class="map_title">
......@@ -49,7 +52,7 @@
<script>
import * as echarts from "echarts";
import EchartsCon from "@/components/EchartsCon.vue";
import { patentTransform, patentHead } from "@/utils/screen.js";
import { patentTransform, patentHead, projectPartner } from "@/utils/screen.js";
import axios from "axios";
export default {
name: "patentMap",
......@@ -59,6 +62,8 @@ export default {
inventor_num: null,
patent_num: null,
transfer_num: null,
application_num:null,
maptab: 1,
};
},
components: {
......@@ -100,7 +105,7 @@ export default {
if (res.code == 0) {
this.inventor_num = res.data.inventor_num;
this.patent_num = res.data.patent_num;
this.application_num = res.data.application_num;
this.transfer_num = res.data.transfer_num;
}
});
......@@ -137,7 +142,7 @@ export default {
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#3B5077',
borderColor: "#3B5077",
areaColor: {
type: "radial",
x: 0.5,
......@@ -170,12 +175,16 @@ export default {
],
series: [
{
name: "山西市数据",
// name: "山西",
type: "map",
map: "shanxi", // 自定义扩展图表类型
aspectScale: 1,
zoom: 0.65, // 缩放
showLegendSymbol: true,
// silent: true,
select: {
disabled: true,
},
label: {
normal: {
show: true,
......@@ -191,11 +200,11 @@ export default {
borderWidth: 0.2,
},
emphasis: {
areaColor: '#8cd3ef',
color:'#fff'
areaColor: "#8cd3ef",
color: "#fff",
},
},
layoutCenter: ["50%", "38%"],
layoutSize: "120%",
markPoint: {
......@@ -277,12 +286,147 @@ export default {
};
});
},
//切换地图
changeMap(){
//获取项目和作地图
getProjectMap(dataNum) {
axios.get("/map_json/shanxi.json").then((res) => {
echarts.registerMap("shanxi", res.data);
}
this.option1 = {
tooltip: {
trigger: "item",
formatter: function (params) {
if (params.seriesType == "map") {
return params.data.name + ":" + params.data.value;
}
},
},
visualMap: {
show: false,
// min: 0,
// max: 100,
left: "left",
top: "bottom",
text: ["高", "低"],
calculable: true,
inRange: {
color: ["rgba(20,60,100,0.5)", "rgba(20,60,150,0.5)", "#2961AD"],
// ['绿色', '#黄色', '#粉色', '#肉色', '#紫色']
},
},
geo: [
{
map: "shanxi",
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "38%"],
layoutSize: "120%",
show: true,
roam: false,
label: {
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "#3B5077",
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
},
},
emphasis: {
areaColor: "#8cd3ef",
borderWidth: 0,
},
},
emphasis: {
//地图高亮
itemStyle: {
color: "#93EBF8",
},
},
},
],
series: [
{
name: "山西省数据",
type: "map",
map: "shanxi", // 自定义扩展图表类型
aspectScale: 1,
zoom: 0.65, // 缩放
showLegendSymbol: true,
label: {
normal: {
show: true,
textStyle: { color: "#fff", fontSize: "120%" },
},
},
select: {
disabled: true,
},
itemStyle: {
normal: {
areaColor: "rgba(20,60,100,0.5)",
borderColor: "#fff",
borderWidth: 0.2,
},
emphasis: {
areaColor: "#8cd3ef",
color: "#fff",
},
},
layoutCenter: ["50%", "38%"],
layoutSize: "120%",
markPoint: {
symbol: "none",
},
data: dataNum,
},
],
};
});
},
getProjectData() {
let dataNum = [];
projectPartner().then((res) => {
res.data.forEach((item) => {
dataNum.push({
name: item.name,
value: item.value,
});
});
this.getProjectMap(dataNum);
});
},
//切换地图
changeMap(tab) {
this.maptab = tab;
if (tab == 1) {
this.getMap();
} else {
this.getProjectData();
}
},
//获取项目合作图
},
mounted() {
this.init();
......@@ -307,7 +451,7 @@ export default {
font-family: "jiangcheng";
font-weight: normal;
font-size: 20px;
color: #ccc;
color: #bbb;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
background: linear-gradient(
......
src/views/screen/components/patentPerson.vue
......@@ -40,7 +40,7 @@
>发明专利</span
>
<span :class="[type2 == 3 ? 'active' : '']" @click="changeAuth(3)"
>使用新型</span
>实用新型</span
>
<span :class="[type2 == 4 ? 'active' : '']" @click="changeAuth(4)"
>外观设计</span
......
src/views/screen/components/patentType.vue
......@@ -47,7 +47,7 @@
>发明专利</span
>
<span :class="[type2 == 3 ? 'active' : '']" @click="changeAuth(3)"
>使用新型</span
>实用新型</span
>
<span :class="[type2 == 4 ? 'active' : '']" @click="changeAuth(4)"
>外观设计</span
......@@ -428,7 +428,7 @@ export default {
//切换专利授权类型
changeAuth(type) {
this.type2 = type;
this.getCompareData();
this.changeYear();
},
},
beforeMount() {
......@@ -464,7 +464,7 @@ export default {
color: #bbcdef;
opacity: 0.8;
span {
padding: 5px 10px;
padding: 5px 8px 5px 0;
cursor: pointer;
}
.active {
......
src/views/screen/index.vue
<template>
<div class="screen">
<header>太原理工大学专利成果转移转化智能推荐系统</header>
<header>太原理工大学专利成果转移转化仪表盘</header>
<div class="center">
<div class="center_left">
<patentType></patentType>
......@@ -238,7 +238,7 @@ export default {
//获取专利发展趋势图
this.getTrend();
//获取产业排名
// this.getTopN();
this.getTopN();
},
//修改时间
handleChange() {
......@@ -425,7 +425,7 @@ export default {
type: "line",
smooth: true,
symbol: "none", // 不显示连接点
name: "使用新型",
name: "实用新型",
data: data.yData3,
areaStyle: {
color: {
......
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