Skip to content

G
GaoQuIncubator
Commit fe0bd946 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

图表接口更换、数据格式化 孵化面积显示特殊处理

parent a3a7726c
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 158 deletions
src/views/Screen/index.vue
View file @ fe0bd946
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
<div class="ct-box"> <div class="ct-box">
<div class="wrap"> <div class="wrap">
<ul> <ul>
<li v-for="(item, i) in sjzlList"> <li v-for="(item, i) in sjzlList" :class="{'specialBefore': item.unit&&item.name.length>5}">
<font>{{ item.num }}</font> <font>{{ item.num }}<span>{{item.unit}}</span></font>
<h6>{{ item.name }}</h6> <h6>{{ item.name }}</h6>
</li> </li>
</ul> </ul>
...@@ -106,6 +106,7 @@ ...@@ -106,6 +106,7 @@
import { Highchart } from "@/assets/js/chartTemplates.js"; import { Highchart } from "@/assets/js/chartTemplates.js";
import cuAmap from "@/components/AMap"; import cuAmap from "@/components/AMap";
import request from "@/utils/request"; import request from "@/utils/request";
import { Tools } from '@/assets/js/common.js';
let resizeTimeout; let resizeTimeout;
...@@ -143,6 +144,7 @@ ...@@ -143,6 +144,7 @@
md1: [], // 数据总览 md1: [], // 数据总览
md3: [], // 产品 md3: [], // 产品
}, },
incubatorId: ''
}; };
}, },
components: { cuAmap }, components: { cuAmap },
...@@ -168,16 +170,7 @@ ...@@ -168,16 +170,7 @@
this.navActive = 0; this.navActive = 0;
// 获取总览数据
setTimeout(() => {
this.sjzl();
this.srph();
this.qycxcysjfx();
// this.byqyjnzsrphb();
// this.byqyndsjsfbhqs();
this.zfqyndsjsfbhqs();
}, 900);
this.getRoleInfo(); this.getRoleInfo();
}); });
...@@ -200,8 +193,11 @@ ...@@ -200,8 +193,11 @@
} }
}); });
}, },
goOverview() { goOverview() { // 切换总览数据，接口的全部
location.href = "/home/overview"; // location.href = "/home/overview";
this.incubatorId = ''
this.getAllApi()
}, },
goBackendHome() { goBackendHome() {
location.href = "/home/enterprise"; location.href = "/home/enterprise";
...@@ -268,24 +264,49 @@ ...@@ -268,24 +264,49 @@
this.infoWindow.setContent(content); this.infoWindow.setContent(content);
this.infoWindow.open(this.map, marker.getPosition()); this.infoWindow.open(this.map, marker.getPosition());
}, },
getAllApi(){
this.sjzl()
this.srph();
this.qycxcysjfx();
this.byqyjnzsrphb();
this.byqyndsjsfbhqs();
this.zfqyndsjsfbhqs();
},
sjzl() { sjzl() {
// 孵化数据总览 // 孵化数据总览
request({ request({
url: "api/homePage/incubatorOverview?size=9", url: "api/homePage/incubatorOverview?size=9",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
this.sjzlList = res.body || []; const tempresult = res.body || [];
const result = tempresult.map((item)=>{
if(item.name === '孵化器剩余面积'){
item.unit = '(m²)'
}
return item
})
this.sjzlList = result;
}); });
}, },
srph() { srph() {
// 在孵企业今年总收入排行榜 // 在孵企业今年总收入排行榜
request({ request({
url: "api/homePage/incubatorLeaderboard", url: "api/homePage/incubatorIncomeRanking",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
const list = res.body.slice(0, 7) || []; const listtemp = res.body.slice(0, 7) || [];
var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"]; const list = listtemp.map((item, index)=>{
item.name = item.companyName
item.value = item.grossIncome
return item
})
var colors = [ "#fbbb2a", "#0cb4c3", "#4c97ff", "#ff8371", "#b2e2fe" , "#427fff", "#8dbffa"]; // "#08b2c0"
var chartData = Highchart.formatSeriesList(list, { var chartData = Highchart.formatSeriesList(list, {
value: "value", value: "value",
colors: colors, colors: colors,
...@@ -295,9 +316,6 @@ ...@@ -295,9 +316,6 @@
chart: { chart: {
type: "bar", type: "bar",
marginTop: getPxByRem(0.15), marginTop: getPxByRem(0.15),
// marginBottom: 10,
// bottom:10,
// left:40,
marginBottom: getPxByRem(0.45), marginBottom: getPxByRem(0.45),
marginRight: getPxByRem(0.3), marginRight: getPxByRem(0.3),
}, },
...@@ -323,24 +341,6 @@ ...@@ -323,24 +341,6 @@
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色 lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
// title: {
// style: {
// color: "#eee",
// fontSize: "0.18rem",
// },
// },
// title: {
// text: "(万元)",
// // margin: 0,
// style: {
// color: "#00F0FF",
// fontSize: "0.17rem",
// },
// // rotation: 0,
// // align: "high",
// // y: -45,
// // x: 85,
// },
labels: { labels: {
overflow: "justify", overflow: "justify",
style: { style: {
...@@ -399,6 +399,9 @@ ...@@ -399,6 +399,9 @@
request({ request({
url: "api/homePage/enterpriseInnovationAnalysis", url: "api/homePage/enterpriseInnovationAnalysis",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
const list = res.body || []; const list = res.body || [];
// var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"]; // var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
...@@ -475,11 +478,20 @@ ...@@ -475,11 +478,20 @@
byqyjnzsrphb() { byqyjnzsrphb() {
// 毕业企业今年总收入排行榜 // 毕业企业今年总收入排行榜
request({ request({
url: "api/homePage/incubatorLeaderboard", url: "api/homePage/graduatedIncomeRanking",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
const list = res.body.slice(0, 7) || []; const listtemp = res.body.slice(0, 7) || [];
var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"]; const list = listtemp.map((item, index)=>{
item.name = item.companyName
item.value = item.grossIncome
return item
})
var colors = [ "#fbbb2a", "#0cb4c3", "#4c97ff", "#ff8371", "#b2e2fe" , "#427fff", "#8dbffa"]; // "#08b2c0"
var chartData = Highchart.formatSeriesList(list, { var chartData = Highchart.formatSeriesList(list, {
value: "value", value: "value",
colors: colors, colors: colors,
...@@ -488,11 +500,9 @@ ...@@ -488,11 +500,9 @@
chartConfig: { chartConfig: {
chart: { chart: {
type: "bar", type: "bar",
marginTop: 20, marginTop: getPxByRem(0.15),
// marginBottom: 10, marginBottom: getPxByRem(0.45),
// bottom:10, marginRight: getPxByRem(0.3),
// left:40,
marginRight: 30,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -500,11 +510,11 @@ ...@@ -500,11 +510,11 @@
labels: { labels: {
x: -5, x: -5,
style: { style: {
fontSize: "0.17rem", fontSize: "0.14rem",
}, },
formatter: function () { formatter: function () {
return this.value.length > 5 return this.value.length > 5
? this.value.substring(0, 5) + "..." ? this.value.substring(0, 7)
: this.value; : this.value;
}, },
}, },
...@@ -516,28 +526,11 @@ ...@@ -516,28 +526,11 @@
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色 lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
// title: {
// style: {
// color: "#eee",
// fontSize: "0.18rem",
// },
// },
// title: {
// text: "(万元)",
// // margin: 0,
// style: {
// color: "#00F0FF",
// fontSize: "0.17rem",
// },
// // rotation: 0,
// // align: "high",
// // y: -45,
// // x: 85,
// },
labels: { labels: {
overflow: "justify", overflow: "justify",
style: { style: {
fontSize: "0.18rem", // 设置 Y 轴标签的字体大小 fontSize: "0.18rem", // 设置 Y 轴标签的字体大小
color: '#00F0FF',
}, },
}, },
}, },
...@@ -572,7 +565,7 @@ ...@@ -572,7 +565,7 @@
enabled: true, enabled: true,
color: "#FFFFFF", color: "#FFFFFF",
align: "right", align: "right",
format: "{point.y:.2f}", // :.1f 为保留 1 位小数 format: "{point.y:.2f}万", // :.1f 为保留 1 位小数
}, },
}, },
], ],
...@@ -584,91 +577,20 @@ ...@@ -584,91 +577,20 @@
list, list,
opts opts
); );
}); });
}, },
byqyndsjsfbhqs() { byqyndsjsfbhqs() {
//孵化企业年度上缴税费变化趋势 //孵化企业年度上缴税费变化趋势
request({ request({
url: "api/homePage/incubatorTaxTrend", url: "api/homePage/graduatedTaxTrend",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
let list = res.body || []; let list = res.body || [];
// list = {
// names: [
// {
// name: "上缴税费",
// key: "num",
// },
// ],
// list: [
// {
// date: "2021年111",
// values: {
// num: 100,
// },
// },
// {
// date: "2023年",
// values: {
// num: 41,
// },
// },
// {
// date: "2024年",
// values: {
// num: 533,
// },
// },
// {
// date: "2025年",
// values: {
// num: 303,
// },
// },
// {
// date: "2026年",
// values: {
// num: 306,
// },
// },
// {
// date: "2027年",
// values: {
// num: 309,
// },
// },
// {
// date: "2028年",
// values: {
// num: 312,
// },
// },
// {
// date: "2029年",
// values: {
// num: 315,
// },
// },
// {
// date: "2030年",
// values: {
// num: 318,
// },
// },
// {
// date: "2031年",
// values: {
// num: 321,
// },
// },
// {
// date: "2032年",
// values: {
// num: 324,
// },
// },
// ],
// };
var chartData = Highchart.seriesDataFormat(list, { var chartData = Highchart.seriesDataFormat(list, {
datekey: "date", datekey: "date",
dataReverse: true, dataReverse: true,
...@@ -678,10 +600,10 @@ ...@@ -678,10 +600,10 @@
var opts = { var opts = {
chartConfig: { chartConfig: {
chart: { chart: {
marginTop: 40, marginTop: getPxByRem(0.4),
marginLeft: 50, marginLeft: getPxByRem(0.5),// 50,
marginBottom: 45, marginBottom: getPxByRem(0.45),
marginRight: 20, marginRight: getPxByRem(0.2),
}, },
xAxis: { xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
...@@ -710,8 +632,8 @@ ...@@ -710,8 +632,8 @@
}, },
rotation: 0, rotation: 0,
align: "high", align: "high",
y: -15, y: getPxByRem(-0.15),
x: 45, x: getPxByRem(0.4),
}, },
labels: { labels: {
style: { style: {
...@@ -751,6 +673,9 @@ ...@@ -751,6 +673,9 @@
request({ request({
url: "api/homePage/incubatorTaxTrend", url: "api/homePage/incubatorTaxTrend",
method: "get", method: "get",
params: {
incubatorId: this.incubatorId
}
}).then((res) => { }).then((res) => {
let list = res.body || []; let list = res.body || [];
var chartData = Highchart.seriesDataFormat(list, { var chartData = Highchart.seriesDataFormat(list, {
...@@ -830,7 +755,7 @@ ...@@ -830,7 +755,7 @@
); );
}); });
}, },
getIncubatorMarkers() { getIncubatorMarkers() {
request({ request({
url: "api/homePage/incubatorLocation", url: "api/homePage/incubatorLocation",
...@@ -864,9 +789,19 @@ ...@@ -864,9 +789,19 @@
//鼠标点击marker弹出自定义的信息窗体 //鼠标点击marker弹出自定义的信息窗体
marker.on("click", () => { marker.on("click", () => {
// VUE.infoWindow.open(VUE.map, marker.getPosition()); // VUE.infoWindow.open(VUE.map, marker.getPosition());
this.incubatorId = item.extraData.id // 设置当前孵化器id
this.showInfoWindow(marker, item.extraData); this.showInfoWindow(marker, item.extraData);
this.getAllApi()
}); });
}); });
// 获取大屏各接口数据
setTimeout(() => { // 保证获取到当前登录的孵化器id后进行接口请求显示
if(!Tools.isHighTech() && result.length){ // 如果是孵化器用户, 则设置当前孵化器id
this.incubatorId = result[0].id
}
this.getAllApi()
}, 900);
}); });
}, },
}, },
...@@ -1295,7 +1230,6 @@ ...@@ -1295,7 +1230,6 @@
align-items: center; align-items: center;
position: relative; position: relative;
padding-left: 0.5rem; padding-left: 0.5rem;
&:before { &:before {
content: ""; content: "";
height: 0.44rem; height: 0.44rem;
...@@ -1306,15 +1240,19 @@ ...@@ -1306,15 +1240,19 @@
top: 0.35rem; top: 0.35rem;
position: absolute; position: absolute;
left: 0.2rem; left: 0.2rem;
// left: 0.04rem;
//background-image:url('~@/assets/images/layout/md31_i1.png'); //background-image:url('~@/assets/images/layout/md31_i1.png');
} }
h6 { h6 {
font-size: 0.19rem; // font-size: 0.19rem;
color: #dcebff; // color: #dcebff;
margin-top: 0.17rem; // margin-top: 0.17rem;
font-size: .16rem;
color: #dcebff;
margin-top: 0.17rem;
} }
font { font {
font-size: 0.45rem; font-size: 0.45rem;
font-family: diget year; font-family: diget year;
// margin-top: 0.15rem; // margin-top: 0.15rem;
line-height: 0.33rem; line-height: 0.33rem;
...@@ -1326,6 +1264,11 @@ ...@@ -1326,6 +1264,11 @@
); );
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
span{
font-family: MicrosoftYaHei;
font-size: 0.18rem;
font-weight: bold;
}
} }
} }
li:nth-child(1) { li:nth-child(1) {
...@@ -1360,6 +1303,14 @@ ...@@ -1360,6 +1303,14 @@
} }
} }
} }
.specialBefore{// 针对孵化面积特殊处理类
font{
font-size: 0.35rem !important;
}
&:before {
left: 0.04rem !important;
}
}
.a-md32 { .a-md32 {
height: 3.7rem; height: 3.7rem;
} }
......
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