Skip to content

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

amap marker

parent 6f319043
Hide whitespace changes
Inline Side-by-side
Showing with 670 additions and 481 deletions
src/views/Screen/index.vue
View file @ 83516382
<template>
<div class="Screen cm-layout">
<div class="a_0">
<cu-amap
ref="amap"
:options="amapOptions()"
/>
<!-- <cu-amap ref="amap" :options="amapOptions()" /> -->
<div id="container"></div>
<div class="a0_">
<header id="header">
<div class="b1_bg">
......@@ -17,7 +14,7 @@
</div>
</header>
</div>
<div class="map-mask"></div>
<div class="map-mask"></div>
</div>
<div class="b_0">
<section class="b0_" id="b0_">
......@@ -102,502 +99,623 @@
<script>
import { reqApi } from "@/assets/js/httpApi.js";
import { Highchart } from "@/assets/js/chartTemplates.js";
import cuAmap from '@/components/AMap';
import request from '@/utils/request'
import cuAmap from "@/components/AMap";
import request from "@/utils/request";
//关闭信息窗体
function closeInfoWindow(mapEle) {
mapEle.clearInfoWindow();
}
export default {
data() {
return {
map: null,
infoWindow: null,
navActive: null,
sjzlList: [],
srphList: [],
sjzlList: [],
srphList: [],
view0: {
md1: [], // 数据总览
md3: [], // 产品
},
};
},
components: {cuAmap },
components: { cuAmap },
mounted() {
var that = this;
this.$nextTick(() => {
/**
* 1、地图渲染
* 1-1、地图坐标点定位回显，marker事件添加
* 2、接口数据获取
* 3、图表渲染
* 4、定时刷新接口操作
* 5、调整窗口大小，重新加载处理
*
*
*/
this.navActive = 0
// 获取总览数据
this.sjzl()
this.srph()
this.qycxcysjfx()
this.fhqfhqysjfx()
this.fhqyndsjsfbhqs()
this.zfqyndsjsfbhqs()
// const map = new AMap.Map('map', {
// resizeEnable: true,
// center: [116.397128, 39.916527], // 设置中心坐标
// zoom: 10, // 设置缩放级别
// viewMode: '3D' // 3D视图
// });
})
/**
* 1、地图渲染
* 1-1、地图坐标点定位回显，marker事件添加
* 2、接口数据获取
* 3、图表渲染
* 4、定时刷新接口操作
* 5、调整窗口大小，重新加载处理
*
*
*/
this.initMap();
this.navActive = 0;
// 获取总览数据
this.sjzl();
this.srph();
this.qycxcysjfx();
this.fhqfhqysjfx();
this.fhqyndsjsfbhqs();
this.zfqyndsjsfbhqs();
// const map = new AMap.Map('map', {
// resizeEnable: true,
// center: [116.397128, 39.916527], // 设置中心坐标
// zoom: 10, // 设置缩放级别
// viewMode: '3D' // 3D视图
// });
});
},
methods: {
sjzl () { // 数据总览
request({
url: 'api/homePage/incubatorOverview?size=9',
method: 'get'
}) .then((res) => {
this.sjzlList = res.body || [];
});
},
srph () { // 收入排行
request({
url: 'api/homePage/incubatorLeaderboard',
method: 'get'
}) .then((res) => {
const list = res.body || [];
var colors = [
"#ff8371",
"#08b2c0",
"#427fff",
"#8dbffa",
"#b2e2fe",
];
var chartData = Highchart.formatSeriesList(list, {
value: "value",
colors: colors,
});
var opts = {
chartConfig: {
chart: {
type: "bar",
marginBottom: 10,
},
xAxis: {
type: "category",
lineWidth: 1,
labels: {
x: -5,
},
},
yAxis: {
visible: false,
},
series: [
{
name: "",
data: chartData.seriesData,
dataLabels: {
enabled: true,
color: "#FFFFFF",
align: "right",
format: "{point.y:.1f}", // :.1f 为保留 1 位小数
},
},
],
initMap() {
var VUE = this;
VUE.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.481181, 39.989792],
zoom: 13,
});
console.log(VUE.map, "map");
addMarker();
//添加marker标记
function addMarker() {
VUE.map.clearMap();
var marker = new AMap.Marker({
map: VUE.map,
position: [116.481181, 39.989792],
icon: "/static/images/marker-dp.png",
});
//鼠标点击marker弹出自定义的信息窗体
marker.on("click", function () {
VUE.infoWindow.open(VUE.map, marker.getPosition());
});
}
const item = {};
//实例化信息窗体
var title =
'方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
content = `<div class="popupBgImage" style="">
<h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
<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>
<button type="button">更多</button>
</div>`;
VUE.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
anchor: "top-center",
// content: createInfoWindow(title, content),
content,
offset: new AMap.Pixel(30, 70),
open: function(){
}
});
VUE.infoWindow.on('open',function(){ // 关闭信息框
document.getElementById("closeInfoWindowBtn").onclick = () => {
VUE.infoWindow.close();
};
})
// document.getElementById("closeInfoWindowBtn").onclick = () => {
// this.closeInfo();
// };
},
closeInfo() {
this.infoWindow.close();
},
sjzl() {
// 数据总览
request({
url: "api/homePage/incubatorOverview?size=9",
method: "get",
}).then((res) => {
this.sjzlList = res.body || [];
});
},
srph() {
// 收入排行
request({
url: "api/homePage/incubatorLeaderboard",
method: "get",
}).then((res) => {
const list = res.body || [];
var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"];
var chartData = Highchart.formatSeriesList(list, {
value: "value",
colors: colors,
});
var opts = {
chartConfig: {
chart: {
type: "bar",
marginBottom: 10,
},
xAxis: {
type: "category",
lineWidth: 1,
labels: {
x: -5,
},
isSeriesData: true,
};
Highchart.template.rich(document.querySelector('.srphWrapper'), list, opts);
});
},
qycxcysjfx () { //企业创新创业数据分析
request({
url: 'api/homePage/enterpriseInnovationAnalysis',
method: 'get'
}) .then((res) => {
const list = res.body || [];
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} %",
},
},
},
yAxis: {
visible: false,
},
series: [
{
name: "",
data: chartData.seriesData,
dataLabels: {
enabled: true,
color: "#FFFFFF",
align: "right",
format: "{point.y:.1f}", // :.1f 为保留 1 位小数
},
series: [
{
type: "pie",
innerSize: "70%",
name: "设备数量",
data: seriesData,
},
],
},
isSeriesData: true,
};
// Highchart.template.pie(wrap34, list, opts);
Highchart.template.rich(document.querySelector('.qycxcysjfxWrapper'), list, opts);
});
},
fhqfhqysjfx () { //孵化器孵化企业数据分析
request({
url: 'api/homePage/incubatorEnterpriseNumber',
method: 'get'
}) .then((res) => {
const list = res.body || [];
var opts = {
chartConfig: {
chart: {
type: "column",
marginBottom: 50,
},
xAxis: {
type: "category",
labels: {
rotation: -25, // 设置轴标签旋转角度
},
},
],
},
isSeriesData: true,
};
Highchart.template.rich(
document.querySelector(".srphWrapper"),
list,
opts
);
});
},
qycxcysjfx() {
//企业创新创业数据分析
request({
url: "api/homePage/enterpriseInnovationAnalysis",
method: "get",
}).then((res) => {
const list = res.body || [];
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",
},
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.fhqfhqysjfxWrapper'), list, opts);
});
},
fhqyndsjsfbhqs () { //孵化企业年度上缴税费变化趋势
request({
url: 'api/homePage/incubatorTaxTrend',
method: 'get'
}) .then((res) => {
let list = res.body || [];
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,
},
},
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} %",
},
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(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.fhqyndsjsfbhqsWrapper'), list, opts);
});
},
zfqyndsjsfbhqs () { // 在孵企业年度上缴税费变化趋势
request({
url: 'api/homePage/incubatorTaxTrend',
method: 'get'
}) .then((res) => {
let list = res.body || [];
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",
},
},
series: [
{
type: "pie",
innerSize: "70%",
name: "设备数量",
data: seriesData,
},
],
},
isSeriesData: true,
};
// Highchart.template.pie(wrap34, list, opts);
Highchart.template.rich(
document.querySelector(".qycxcysjfxWrapper"),
list,
opts
);
});
},
fhqfhqysjfx() {
//孵化器孵化企业数据分析
request({
url: "api/homePage/incubatorEnterpriseNumber",
method: "get",
}).then((res) => {
const list = res.body || [];
var opts = {
chartConfig: {
chart: {
type: "column",
marginBottom: 50,
},
xAxis: {
type: "category",
labels: {
rotation: -25, // 设置轴标签旋转角度
},
},
},
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(
document.querySelector(".fhqfhqysjfxWrapper"),
list,
opts
);
});
},
fhqyndsjsfbhqs() {
//孵化企业年度上缴税费变化趋势
request({
url: "api/homePage/incubatorTaxTrend",
method: "get",
}).then((res) => {
let list = res.body || [];
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)"],
],
},
yAxis: {
title: {
text: "(万元)",
margin: 0,
style: {
color: "#eee",
fontSize: "10px",
},
rotation: 0,
align: "high",
y: -10,
x: 25,
},
},
],
},
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(
document.querySelector(".fhqyndsjsfbhqsWrapper"),
list,
opts
);
});
},
zfqyndsjsfbhqs() {
// 在孵企业年度上缴税费变化趋势
request({
url: "api/homePage/incubatorTaxTrend",
method: "get",
}).then((res) => {
let list = res.body || [];
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)"],
],
},
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(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.zfqyndsjsfbhqsWrapper'), list, opts);
});
},
],
},
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(
document.querySelector(".zfqyndsjsfbhqsWrapper"),
list,
opts
);
});
},
amapOptions(cmap) {
var self = this;
var VUE = this;
return {
zoom: 13,
center: [122.050189, 37.515189],
//showLabel: true,
//pitch: 40,
onload: function (cmap) {
console.log("onload ________________ ", self, cmap);
const form = {
longitude: 122.050189,
latitude: 37.515189,
};
self.cmap = cmap;
// debugger
VUE.cmap = cmap;
var center = cmap.options.center;
var lng = form.longitude || center[0],
lat = form.latitude || center[1];
if (lng && lat) {
cmap.setCenter([lng, lat]);
addMarker();
// // 添加标记
// cmap.addMarker({
// lnglat: [lng, lat],
// title: "",
// content: markerContent,
// offset: new AMap.Pixel(-13, -30),
// draggable: true,
// click: function () {
// infoWindow.open(cmap, marker.getPosition()); // 打开信息窗口
// },
// });
// //鼠标点击marker弹出自定义的信息窗体
// AMap.event.addListener(cmap, "click", function () {
// infoWindow.open(map, marker.getPosition());
// });
}
},
click: function (e, cmap) {
console.log("click ________________ ", cmap);
},
};
},
amapOptions(cmap){
var self = this;
return {
zoom:13,
center:[122.050189, 37.515189],
//showLabel: true,
//pitch: 40,
onload: function(cmap){
console.log('onload ________________ ', self, cmap);
self.cmap = cmap;
},
click: function(e, cmap){
console.log('click ________________ ', cmap);
},
};
},
// 首页
module0(m, t, f, dmIndex, view) {
var self = this,
......@@ -606,7 +724,7 @@ export default {
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");
......@@ -690,9 +808,7 @@ export default {
// 孵化总收入排行榜
(m.reqSrph = function () {
m.srph().then(function (list) {
});
m.srph().then(function (list) {});
})();
// md4
......@@ -1421,6 +1537,11 @@ export default {
</script>
<style lang="scss" scope>
#container {
height: 100%;
width: 100%;
background-color: #29557a;
}
@font-face {
font-family: "diget year";
src: url("~@/assets/fonts/DS-Digital.ttf");
......@@ -1554,7 +1675,7 @@ export default {
justify-content: center;
pointer-events: none;
h2 {
font-size: 0.4rem;
font-size: 0.4534rem;
line-height: 1;
margin: 0.23rem 0 0 0rem;
font-weight: bold;
......@@ -2163,10 +2284,78 @@ export default {
/* 弹窗背景图 */
.popupBgImage {
color: #fff;
width: 3.86rem;
height: 3.66rem;
font-size: 0.12rem;
padding: 0.1rem;
background-image: url("/static/images/frame1.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: relative;
button {
width: 1.5rem;
height: 0.4rem;
background: #00d2ff;
border-radius: 0.04rem;
font-size: 0.19rem;
color: #fff;
border: none;
outline: none;
margin-left: 50%;
margin-top: 0.14rem;
transform: translateX(-50%);
cursor: pointer;
}
dl {
padding: 0 0.4rem;
}
dd {
margin-top: 0.08rem;
margin-bottom: 0.08rem;
}
dd > font {
// 标题
font-size: 0.19rem;
color: #00f0ff;
}
dd > span {
// 值
font-size: 0.19rem;
color: #fff;
}
i {
background-image: url("~@/assets/images/dpNew/close_icon.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
display: block;
width: 0.21rem;
height: 0.21rem;
position: absolute;
top: 0.21rem;
right: 0.21rem;
}
h4 {
width: 2.58rem;
height: 0.5rem;
text-align: center;
line-height: 0.5rem;
margin: 0 auto;
margin-top: 0.21rem;
// background: linear-gradient(90deg, rgba(4,205,255,0) 0%, rgba(4,205,255,0.98) 51%, rgba(4,205,255,0) 100%);
// opacity: 0.82;
font-family: SimHei;
font-weight: 400;
font-size: 0.24rem;
color: #ffffff;
background-image: url("~@/assets/images/dpNew/title2.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
}
/* 加载动画 */
......
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