Skip to content

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

title change

parent a35ca813
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 479 deletions
src/views/Screen/index.vue
View file @ fd3b0557
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div class="a-md32" id="amd32"> <div class="a-md32" id="amd32">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>孵化总收入排行榜</h4> <h4>在孵企业今年总收入排行榜</h4>
</div> </div>
<div class="ct-box"> <div class="ct-box">
<div class="wrap srphWrapper" id="srphWrapper"></div> <div class="wrap srphWrapper" id="srphWrapper"></div>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<div class="a-md35" id="amd35"> <div class="a-md35" id="amd35">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>孵化器孵化企业数据分析</h4> <h4>毕业企业今年总收入排行榜</h4>
</div> </div>
<div class="ct-box"> <div class="ct-box">
<div class="wrap fhqfhqysjfxWrapper"></div> <div class="wrap fhqfhqysjfxWrapper"></div>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<div class="a-md36" id="amd36"> <div class="a-md36" id="amd36">
<div class="abs-full"> <div class="abs-full">
<div class="m-tt"> <div class="m-tt">
<h4>孵化企业年度上缴税费变化趋势</h4> <h4>毕业企业年度上缴税费变化趋势</h4>
</div> </div>
<div class="ct-box"> <div class="ct-box">
<div class="wrap fhqyndsjsfbhqsWrapper"></div> <div class="wrap fhqyndsjsfbhqsWrapper"></div>
...@@ -276,7 +276,11 @@ export default { ...@@ -276,7 +276,11 @@ export default {
}, },
yAxis: { yAxis: {
min: 0, min: 0,
visible: false, // max: 1000,
visible: true,
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#f7f7f7', // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线
title: { title: {
style: { style: {
color: "#eee", color: "#eee",
...@@ -326,57 +330,6 @@ export default { ...@@ -326,57 +330,6 @@ export default {
opts opts
); );
}); });
// var chart = Highcharts.chart('srphWrapper', {
// isSeriesData: true,
// chart: {
// type: 'bar'
// },
// xAxis: {
// categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
// title: {
// text: null,
// },
// labels: {
// x: -5,
// style: {
// fontSize: "20px",
// },
// },
// },
// yAxis: {
// min: 0,
// title: {
// text: '(万)',
// },
// labels: {
// overflow: 'justify',
// style: {
// fontSize: "20px",
// },
// }
// },
// tooltip: {
// valueSuffix: ' 百万'
// },
// plotOptions: {
// bar: {
// dataLabels: {
// enabled: true,
// allowOverlap: true, // 允许数据标签重叠
// style: {
// fontSize: '20px', // 设置数据标签的字体大小
// fontWeight: 'bold' // 设置数据标签的字体粗细
// }
// }
// }
// },
// series: [{
// name: '',
// data: [107, 31, 635, 203, 2]
// }]
// });
}, },
qycxcysjfx() { qycxcysjfx() {
//企业创新创业数据分析 //企业创新创业数据分析
...@@ -450,27 +403,88 @@ export default { ...@@ -450,27 +403,88 @@ export default {
}); });
}, },
fhqfhqysjfx() { fhqfhqysjfx() {
//孵化器孵化企业数据分析 // 毕业企业今年总收入排行榜
request({ request({
url: "api/homePage/incubatorEnterpriseNumber", url: "api/homePage/incubatorLeaderboard",
method: "get", method: "get",
}).then((res) => { }).then((res) => {
const list = res.body || []; const list = res.body.slice(0, 7) || [];
var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"];
var chartData = Highchart.formatSeriesList(list, {
value: "value",
colors: colors,
});
var opts = { var opts = {
chartConfig: { chartConfig: {
chart: { chart: {
type: "column", type: "bar",
marginBottom: 50, // marginBottom: 10,
bottom:10,
left:40,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
lineWidth: 1,
labels: { labels: {
rotation: -25, // 设置轴标签旋转角度 x: -5,
style: {
fontSize: "0.17rem",
}, },
formatter: function() {
return this.value.length > 5 ? this.value.substring(0, 5) + '...' : this.value;
}
}, },
}, },
yAxis: {
min: 0,
// max: 1000,
visible: true,
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#f7f7f7', // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线
title: {
style: {
color: "#eee",
fontSize: "0.18rem",
},
},
labels: {
overflow: 'justify',
// style: {
// fontSize: '20px' // 设置 Y 轴标签的字体大小
// }
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
style: {
fontSize: '0.19rem', // 设置数据标签的字体大小
fontWeight: 'bold' // 设置数据标签的字体粗细
}
}
}
},
tooltip: {
pointFormat: "<b style='fontSize:24rem;'>{series.name}:</b> <b style='fontSize:24rem;'>{point.y:.1f}%</b>",
},
series: [
{
name: "",
data: chartData.seriesData,
dataLabels: {
enabled: true,
color: "#FFFFFF",
align: "right",
format: "{point.y:.1f}", // :.1f 为保留 1 位小数
},
},
],
},
isSeriesData: true,
}; };
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich( Highchart.template.rich(
document.querySelector(".fhqfhqysjfxWrapper"), document.querySelector(".fhqfhqysjfxWrapper"),
list, list,
...@@ -570,30 +584,45 @@ export default { ...@@ -570,30 +584,45 @@ export default {
var opts = { var opts = {
chartConfig: { chartConfig: {
chart: { chart: {
marginTop: 20, marginTop: 40,
marginLeft: 40, marginLeft: 50,
marginBottom: 35, marginBottom: 45,
marginRight:20,
}, },
xAxis: { xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色
type: "category", type: "category",
categories: categories, categories: categories,
labels: { labels: {
rotation: -20, // 设置轴标签旋转角度 rotation: -20, // 设置轴标签旋转角度
align: "center", align: "center",
style: {
fontSize: "0.17rem",
},
}, },
}, },
yAxis: { yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线
title: { title: {
text: "(万元)", text: "(万元)",
margin: 0, margin: 0,
style: { style: {
color: "#eee", color: "#eee",
fontSize: "10px", fontSize: "0.17rem",
}, },
rotation: 0, rotation: 0,
align: "high", align: "high",
y: -10, y: -15,
x: 25, x: 45,
},
labels: {
style: {
fontSize: "0.17rem", // 设置 Y 轴文字大小
},
}, },
}, },
plotOptions: {}, plotOptions: {},
...@@ -716,10 +745,13 @@ export default { ...@@ -716,10 +745,13 @@ export default {
chartConfig: { chartConfig: {
chart: { chart: {
marginTop: 40, marginTop: 40,
marginLeft: 70, marginLeft: 50,
marginBottom: 35, marginBottom: 45,
marginRight:20,
}, },
xAxis: { xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色
type: "category", type: "category",
categories: categories, categories: categories,
labels: { labels: {
...@@ -731,6 +763,10 @@ export default { ...@@ -731,6 +763,10 @@ export default {
}, },
}, },
yAxis: { yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线
title: { title: {
text: "(万元)", text: "(万元)",
margin: 0, margin: 0,
...@@ -740,8 +776,8 @@ export default { ...@@ -740,8 +776,8 @@ export default {
}, },
rotation: 0, rotation: 0,
align: "high", align: "high",
y: -10, y: -15,
x: 25, x: 45,
}, },
labels: { labels: {
style: { style: {
...@@ -815,412 +851,6 @@ export default { ...@@ -815,412 +851,6 @@ export default {
}); });
}) })
}, },
// 首页
module0(m, t, f, dmIndex, view) {
var self = this,
viewData = self["view" + dmIndex],
fm = f("init"),
thisApi = fm.models[dmIndex];
var wrap32 = view.querySelector("#amd32 .wrap");
var wrap34 = view.querySelector("#amd34 .wrap");
var wrap35 = view.querySelector("#amd35 .wrap");
var wrap36 = view.querySelector("#amd36 .wrap");
// 孵化总收入排行榜
m.srph = function () {
var param = {};
return reqApi.common
.requstEdge("get", "/api/homePage/incubatorLeaderboard", param)
.then((res) => {
return res.body || [];
});
};
// 孵化器地图标记
m.markers = function () {
var param = {};
return reqApi.common
.requstEdge("get", "/api/homePage/incubatorLocation", param)
.then((res) => {
return res.body || [];
});
};
// 产品展示
m.products = function () {
var param = {};
return reqApi.common
.requstEdge("get", "/api/homePage/carouselProduct", param)
.then((res) => {
var list = res.body || [];
for (var item of list) {
item.image = fm.LOCAL_API + "/file/" + item.image;
}
viewData.md3 = list;
});
};
//企业创新创业数据分析
m.md4 = function () {
var param = {};
return reqApi.common
.requstEdge(
"get",
"/api/homePage/enterpriseInnovationAnalysis",
param
)
.then((res) => {
return res.body || [];
});
};
//孵化器孵化企业数据分析
m.md5 = function () {
var param = {};
return reqApi.common
.requstEdge("get", "/api/homePage/incubatorEnterpriseNumber", param)
.then((res) => {
return res.body || [];
});
};
//孵化企业年度上缴税费变化趋势
m.md6 = function () {
var param = {};
return reqApi.common
.requstEdge("get", "/api/homePage/incubatorTaxTrend", param)
.then((res) => {
return res.body || [];
});
};
return (function () {
//
// 监管指标
(m.reqSjzl = function () {
m.sjzl().then(function (list) {
viewData.md1 = list;
});
})();
// 孵化总收入排行榜
(m.reqSrph = function () {
m.srph().then(function (list) {});
})();
// md4
m.md4Chart = function () {
m.md4().then(function (list) {
var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
var seriesFormat = Highchart.formatSeriesList(list, {
value: "num",
colors: colors,
});
var seriesData = seriesFormat.seriesData;
var opts = {
chartConfig: {
chart: {
backgroundColor: "transparent",
//spacing:[0, 0 , 0, 0]
},
title: {
floating: true,
text: "",
verticalAlign: "middle",
y: 22,
floating: true,
style: {
color: "#00f6ff",
},
},
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
},
credits: {
enabled: false,
},
legend: {
itemStyle: { color: "#fff", textOverflow: "ellipsis" },
layout: "horizontal",
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
showInLegend: true,
dataLabels: {
format: "<b>{point.name}</b>: {point.percentage:.1f} %",
},
},
},
series: [
{
type: "pie",
innerSize: "70%",
name: "设备数量",
data: seriesData,
},
],
},
isSeriesData: true,
};
Highchart.template.pie(wrap34, list, opts);
});
};
// md5
m.md5Chart = function () {
m.md5().then(function (list) {
var opts = {
chartConfig: {
chart: {
type: "column",
marginBottom: 50,
},
xAxis: {
type: "category",
labels: {
rotation: -25, // 设置轴标签旋转角度
},
},
},
};
Highchart.template.rich(wrap35, list, opts);
});
};
// md6
m.md6Chart = function () {
m.md6().then(function (list) {
list = {
names: [
{
name: "上缴税费",
key: "num",
},
],
list: [
{
date: "2021年",
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, {
datekey: "date",
dataReverse: true,
});
var categories = chartData.categories;
var series = chartData.series;
var opts = {
chartConfig: {
chart: {
marginTop: 20,
marginLeft: 40,
marginBottom: 35,
},
xAxis: {
type: "category",
categories: categories,
labels: {
rotation: -20, // 设置轴标签旋转角度
align: "center",
},
},
yAxis: {
title: {
text: "(万元)",
margin: 0,
style: {
color: "#eee",
fontSize: "10px",
},
rotation: 0,
align: "high",
y: -10,
x: 25,
},
},
plotOptions: {},
series: [
{
type: "area",
keys: ["y", "rotation"], // rotation is not used here
data: series[0].data,
color: "#19c4fa",
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, "#2aadf3"],
[1, "rgba(25,201,255,0)"],
],
},
},
],
},
isSeriesData: true,
};
Highchart.template.rich(wrap36, list, opts);
});
};
// 首次加载
(m.init = function () {
// 获取孵化器信息
m.markers().then(function (list) {
// 添加标记点
self.Entities.addMarkers(list);
});
// 产品展示
m.products();
// 企业创新创业数据分析
m.md4Chart();
//
m.md5Chart();
//
m.md6Chart();
})();
// 栏目数据加载
m.loadData = function () {
// 这个loadData方法就是用于上面定时任务不断刷新的执行函数。
m.reqSjzl();
};
return {
// 返回的对象是m.tagModel
reload: function (o) {},
timerUpdate: function () {
// 定时刷新的执行方法体
m.loadData();
},
mapClick: function (pick) {
var entity = pick.id;
var id = pick.id,
entity = pick.primitive;
var position = entity.position;
var item = self.Entities.getBbdCollection()[id].data;
var amd8View = qf.UI.popWindow({
pointer: {
point: "bottom",
show: true,
x: 80,
},
closeButton: {},
close: function () {
fg3d.Entity.remove(entity);
},
container: document.createElement("div"), // id || Element对象
html:
'<div class="popupBgImage" style="color:#fff;width:3.21rem;height:2.69rem;font-size:12px;padding:10px;"><h4>详细信息</h4><dl><dd><font>孵化器名称：</font><span>' +
item.incubatorName +
"</span></dd><dd><font>运营机构：</font><span>" +
item.operatingAgency +
"</span></dd><dd><font>在孵企业：</font><span>" +
(item.incubatorCount || 0) +
"家</span></dd><dd><font>毕业企业：</font><span>" +
(item.graduationCount || 0) +
"家</span></dd><dd><font>使用总面积：</font><span>" +
(item.totalArea || 0) +
"(㎡)</span></dd><dd><font>总收入：</font><span>" +
(item.totalIncome || 0) +
"万元</span></dd></dl></div>",
onload: function (md) {
var el = md.el;
},
});
// 创建窗口
var map8View = new fg3d.Plugins.View(position, amd8View.Wrap, {
render: function () {
return {
position: position,
y: -45,
x: -90,
};
},
});
},
unload: function () {
//t.unload();
// 隐藏所有标记
self.Entities.setMarkers({});
},
resize: function () {
m.percarCountChart && m.percarCountChart.reflow();
},
};
})();
},
}, },
}; };
</script> </script>
......
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