Skip to content

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

css better

parent 04ba5133
Hide whitespace changes
Inline Side-by-side
Showing with 178 additions and 153 deletions
src/views/Screen/index.vue
View file @ fd8d4144
...@@ -7,10 +7,15 @@ ...@@ -7,10 +7,15 @@
<div class="b1_bg"> <div class="b1_bg">
<h2>威海高新区科技企业孵化信息平台</h2> <h2>威海高新区科技企业孵化信息平台</h2>
</div> </div>
<div v-if="isTechUser" class="go-back" @click="goOverview"> <div v-if="isTechUser" class="go-back" @click="goOverview">
<a>总览</a> <a>总览</a>
</div> </div>
<div v-if="isTechUser" class="go-back" style="right: .1rem;left: auto;" @click="goBackendHome"> <div
v-if="isTechUser"
class="go-back"
style="right: 0.1rem; left: auto"
@click="goBackendHome"
>
<a>进入后台</a> <a>进入后台</a>
</div> </div>
</header> </header>
...@@ -121,10 +126,10 @@ export default { ...@@ -121,10 +126,10 @@ export default {
}; };
}, },
components: { cuAmap }, components: { cuAmap },
computed:{ computed: {
isTechUser(){ isTechUser() {
return localStorage.getItem('groupIdByloginType')*1===2 return localStorage.getItem("groupIdByloginType") * 1 === 2;
} },
}, },
mounted() { mounted() {
var that = this; var that = this;
...@@ -149,39 +154,38 @@ export default { ...@@ -149,39 +154,38 @@ export default {
this.srph(); this.srph();
this.qycxcysjfx(); this.qycxcysjfx();
this.fhqfhqysjfx(); // this.byqyjnzsrphb();
this.fhqyndsjsfbhqs(); // this.byqyndsjsfbhqs();
this.zfqyndsjsfbhqs(); this.zfqyndsjsfbhqs();
}, 900); }, 900);
this.getRoleInfo() this.getRoleInfo();
}); });
}, },
methods: { methods: {
getRoleInfo(){ getRoleInfo() {
// 数据总览 // 数据总览
request({ request({
url: "auth/info", url: "auth/info",
method: "get", method: "get",
}).then((res) => { }).then((res) => {
if (!res.error && res.user) { if (!res.error && res.user) {
// 设置全局登录用户类别标记 // 设置全局登录用户类别标记
localStorage.setItem( localStorage.setItem(
"groupIdByloginType", "groupIdByloginType",
res.user.jobs.length && res.user.jobs[0]["id"] res.user.jobs.length && res.user.jobs[0]["id"]
); );
}else{ } else {
location = '/login' location = "/login";
} }
}); });
}, },
goOverview(){ goOverview() {
location.href = '/home/overview' location.href = "/home/overview";
}, },
goBackendHome(){ goBackendHome() {
location.href = '/home/enterprise' location.href = "/home/enterprise";
}, },
initMap() { initMap() {
var VUE = this; var VUE = this;
VUE.map = new AMap.Map("container", { VUE.map = new AMap.Map("container", {
...@@ -192,7 +196,7 @@ export default { ...@@ -192,7 +196,7 @@ export default {
console.log(VUE.map, "map"); console.log(VUE.map, "map");
// addMarker(); // addMarker();
this.getIncubatorMarkers() this.getIncubatorMarkers();
//实例化信息窗体 //实例化信息窗体
VUE.infoWindow = new AMap.InfoWindow({ VUE.infoWindow = new AMap.InfoWindow({
...@@ -201,18 +205,19 @@ export default { ...@@ -201,18 +205,19 @@ export default {
offset: new AMap.Pixel(30, 70), offset: new AMap.Pixel(30, 70),
}); });
VUE.infoWindow.on("open", () => { VUE.infoWindow.on("open", () => {
// 关闭信息框 // 关闭信息框
document.getElementById("closeInfoWindowBtn").onclick = function() { document.getElementById("closeInfoWindowBtn").onclick = function () {
VUE.infoWindow.close(); VUE.infoWindow.close();
}; };
document.getElementById("goMoreBtn").onclick = function() { document.getElementById("goMoreBtn").onclick = function () {
// alert(this.getAttribute('data-id')) // alert(this.getAttribute('data-id'))
// VUE.$route.push('/home/enterprise') // VUE.$route.push('/home/enterprise')
if(VUE.isTechUser){ if (VUE.isTechUser) {
location.href = "/home/overview?id=" + this.getAttribute("data-id"); location.href = "/home/overview?id=" + this.getAttribute("data-id");
}else{ } else {
location.href = "/home/enterprise?id=" + this.getAttribute("data-id"); location.href =
"/home/enterprise?id=" + this.getAttribute("data-id");
} }
}; };
}); });
...@@ -221,16 +226,24 @@ export default { ...@@ -221,16 +226,24 @@ export default {
const content = `<div class="popupBgImage" style=""> const content = `<div class="popupBgImage" style="">
<h4>详细信息</h4><i id="closeInfoWindowBtn"></i> <h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
<dl> <dl>
<dd class="textEllipsis"><font>孵化器名称：</font><span :title="${item.incubatorName}">${item.incubatorName}</span></dd> <dd class="textEllipsis"><font>孵化器名称：</font><span :title="${
<dd class="textEllipsis"><font>运营机构：</font><span :title="${item.operatingAgency}">${item.operatingAgency}</span></dd> item.incubatorName
<dd class="textEllipsis"><font>在孵企业：</font><span :title="${item.incubatorCount}">${item.incubatorCount || 0}家</span></dd> }">${item.incubatorName}</span></dd>
<dd class="textEllipsis"><font>毕业企业：</font><span :title="${item.graduationCount}">${item.graduationCount || 0}家</span></dd> <dd class="textEllipsis"><font>运营机构：</font><span :title="${
item.operatingAgency
}">${item.operatingAgency}</span></dd>
<dd class="textEllipsis"><font>在孵企业：</font><span :title="${
item.incubatorCount
}">${item.incubatorCount || 0}家</span></dd>
<dd class="textEllipsis"><font>毕业企业：</font><span :title="${
item.graduationCount
}">${item.graduationCount || 0}家</span></dd>
<dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd> <dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd> <dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
</dl> </dl>
<button type="button" id="goMoreBtn" data-id="${ <button type="button" id="goMoreBtn" data-id="${item.id}">${
item.id this.isTechUser ? "更多" : "进入后台"
}">${this.isTechUser?'更多':'进入后台'}</button> }</button>
</div>`; </div>`;
this.infoWindow.setContent(content); this.infoWindow.setContent(content);
this.infoWindow.open(this.map, marker.getPosition()); this.infoWindow.open(this.map, marker.getPosition());
...@@ -261,11 +274,11 @@ export default { ...@@ -261,11 +274,11 @@ export default {
chartConfig: { chartConfig: {
chart: { chart: {
type: "bar", type: "bar",
marginTop:20, marginTop: 20,
// marginBottom: 10, // marginBottom: 10,
// bottom:10, // bottom:10,
// left:40, // left:40,
marginRight:30, marginRight: 30,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -275,9 +288,11 @@ export default { ...@@ -275,9 +288,11 @@ export default {
style: { style: {
fontSize: "0.17rem", fontSize: "0.17rem",
}, },
formatter: function() { formatter: function () {
return this.value.length > 5 ? this.value.substring(0, 5) + '...' : this.value; return this.value.length > 5
} ? this.value.substring(0, 5) + "..."
: this.value;
},
}, },
}, },
yAxis: { yAxis: {
...@@ -285,8 +300,8 @@ export default { ...@@ -285,8 +300,8 @@ export default {
// max: 1000, // max: 1000,
visible: true, visible: true,
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#f7f7f7', // 设置 Y 轴坐标轴线颜色 lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
// title: { // title: {
// style: { // style: {
// color: "#eee", // color: "#eee",
...@@ -306,34 +321,35 @@ export default { ...@@ -306,34 +321,35 @@ export default {
// // x: 85, // // x: 85,
// }, // },
labels: { labels: {
overflow: 'justify', overflow: "justify",
style: { style: {
fontSize: '0.18rem' // 设置 Y 轴标签的字体大小 fontSize: "0.18rem", // 设置 Y 轴标签的字体大小
} },
} },
}, },
plotOptions: { plotOptions: {
bar: { bar: {
dataLabels: { dataLabels: {
enabled: true, enabled: true,
allowOverlap: true, // 允许数据标签重叠 allowOverlap: true, // 允许数据标签重叠
style: { style: {
fontSize: '0.18rem', // 设置数据标签的字体大小 fontSize: "0.18rem", // 设置数据标签的字体大小
fontWeight: 'bold' // 设置数据标签的字体粗细 fontWeight: "bold", // 设置数据标签的字体粗细
} },
} },
}
}, },
tooltip: { },
shared: true, tooltip: {
useHTML: true, shared: true,
headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>', useHTML: true,
pointFormat: '<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' + headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
'</td>' + pointFormat:
'<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' +
"</td>" +
'<td style="text-align: left"><b>{point.y:.1f}万元</b></td></tr>', '<td style="text-align: left"><b>{point.y:.1f}万元</b></td></tr>',
footerFormat: '</table>', footerFormat: "</table>",
valueDecimals: 2 valueDecimals: 2,
}, },
series: [ series: [
{ {
name: "", name: "",
...@@ -401,7 +417,11 @@ export default { ...@@ -401,7 +417,11 @@ export default {
cursor: "pointer", cursor: "pointer",
showInLegend: true, showInLegend: true,
dataLabels: { dataLabels: {
format: "<b>{point.name}</b>: {point.percentage:.1f} %", textOutline: "none", // 禁用文本轮廓
enabled: true,
format:
'<span style="color:{point.color}">{point.name}: {point.percentage:.1f}%</span>', // 标签颜色与图形颜色一致
// format: "<b>{point.name}</b>: {point.percentage:.1f} %",
style: { style: {
fontSize: "0.17rem", // 设置系列文本的字体大小 fontSize: "0.17rem", // 设置系列文本的字体大小
}, },
...@@ -427,9 +447,9 @@ export default { ...@@ -427,9 +447,9 @@ export default {
); );
}); });
}, },
fhqfhqysjfx() { byqyjnzsrphb() {
// 毕业企业今年总收入排行榜 // 毕业企业今年总收入排行榜
request({ request({
url: "api/homePage/incubatorLeaderboard", url: "api/homePage/incubatorLeaderboard",
method: "get", method: "get",
}).then((res) => { }).then((res) => {
...@@ -443,11 +463,11 @@ export default { ...@@ -443,11 +463,11 @@ export default {
chartConfig: { chartConfig: {
chart: { chart: {
type: "bar", type: "bar",
marginTop:20, marginTop: 20,
// marginBottom: 10, // marginBottom: 10,
// bottom:10, // bottom:10,
// left:40, // left:40,
marginRight:30, marginRight: 30,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
...@@ -457,9 +477,11 @@ export default { ...@@ -457,9 +477,11 @@ export default {
style: { style: {
fontSize: "0.17rem", fontSize: "0.17rem",
}, },
formatter: function() { formatter: function () {
return this.value.length > 5 ? this.value.substring(0, 5) + '...' : this.value; return this.value.length > 5
} ? this.value.substring(0, 5) + "..."
: this.value;
},
}, },
}, },
yAxis: { yAxis: {
...@@ -467,8 +489,8 @@ export default { ...@@ -467,8 +489,8 @@ export default {
// max: 1000, // max: 1000,
visible: true, visible: true,
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#f7f7f7', // 设置 Y 轴坐标轴线颜色 lineColor: "#f7f7f7", // 设置 Y 轴坐标轴线颜色
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
// title: { // title: {
// style: { // style: {
// color: "#eee", // color: "#eee",
...@@ -488,34 +510,35 @@ export default { ...@@ -488,34 +510,35 @@ export default {
// // x: 85, // // x: 85,
// }, // },
labels: { labels: {
overflow: 'justify', overflow: "justify",
style: { style: {
fontSize: '0.18rem' // 设置 Y 轴标签的字体大小 fontSize: "0.18rem", // 设置 Y 轴标签的字体大小
} },
} },
}, },
plotOptions: { plotOptions: {
bar: { bar: {
dataLabels: { dataLabels: {
enabled: true, enabled: true,
allowOverlap: true, // 允许数据标签重叠 allowOverlap: true, // 允许数据标签重叠
style: { style: {
fontSize: '0.18rem', // 设置数据标签的字体大小 fontSize: "0.18rem", // 设置数据标签的字体大小
fontWeight: 'bold' // 设置数据标签的字体粗细 fontWeight: "bold", // 设置数据标签的字体粗细
} },
} },
}
}, },
tooltip: { },
shared: true, tooltip: {
useHTML: true, shared: true,
headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>', useHTML: true,
pointFormat: '<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' + headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>',
'</td>' + pointFormat:
'<tr><td class="toolTipHeader" style="color: {series.color};font-size:20px;">{series.name} ' +
"</td>" +
'<td style="text-align: left"><b>{point.y:.1f}万元</b></td></tr>', '<td style="text-align: left"><b>{point.y:.1f}万元</b></td></tr>',
footerFormat: '</table>', footerFormat: "</table>",
valueDecimals: 2 valueDecimals: 2,
}, },
series: [ series: [
{ {
name: "", name: "",
...@@ -538,7 +561,7 @@ export default { ...@@ -538,7 +561,7 @@ export default {
); );
}); });
}, },
fhqyndsjsfbhqs() { byqyndsjsfbhqs() {
//孵化企业年度上缴税费变化趋势 //孵化企业年度上缴税费变化趋势
request({ request({
url: "api/homePage/incubatorTaxTrend", url: "api/homePage/incubatorTaxTrend",
...@@ -633,11 +656,11 @@ export default { ...@@ -633,11 +656,11 @@ export default {
marginTop: 40, marginTop: 40,
marginLeft: 50, marginLeft: 50,
marginBottom: 45, marginBottom: 45,
marginRight:20, marginRight: 20,
}, },
xAxis: { xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色 lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
type: "category", type: "category",
categories: categories, categories: categories,
labels: { labels: {
...@@ -650,9 +673,9 @@ export default { ...@@ -650,9 +673,9 @@ export default {
}, },
yAxis: { yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色 lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线 // tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
title: { title: {
text: "(万元)", text: "(万元)",
margin: 0, margin: 0,
...@@ -793,11 +816,11 @@ export default { ...@@ -793,11 +816,11 @@ export default {
marginTop: 40, marginTop: 40,
marginLeft: 50, marginLeft: 50,
marginBottom: 45, marginBottom: 45,
marginRight:20, marginRight: 20,
}, },
xAxis: { xAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色 lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
type: "category", type: "category",
categories: categories, categories: categories,
labels: { labels: {
...@@ -810,9 +833,9 @@ export default { ...@@ -810,9 +833,9 @@ export default {
}, },
yAxis: { yAxis: {
lineWidth: 1, // 设置 Y 轴坐标轴线宽度 lineWidth: 1, // 设置 Y 轴坐标轴线宽度
lineColor: '#2CCBFF', // 设置 Y 轴坐标轴线颜色 lineColor: "#2CCBFF", // 设置 Y 轴坐标轴线颜色
// tickLength: 0, // 不显示刻度线 // tickLength: 0, // 不显示刻度线
gridLineWidth: 0, // 也可以设置不显示网格线 gridLineWidth: 0, // 也可以设置不显示网格线
title: { title: {
text: "(万元)", text: "(万元)",
margin: 0, margin: 0,
...@@ -859,13 +882,13 @@ export default { ...@@ -859,13 +882,13 @@ export default {
}); });
}, },
getIncubatorMarkers(){ getIncubatorMarkers() {
request({ request({
url: "api/homePage/incubatorLocation", url: "api/homePage/incubatorLocation",
method: "get", method: "get",
}).then((res) => { }).then((res) => {
let result = res.body || [] let result = res.body || [];
var markers = result.map((item, index)=>{ var markers = result.map((item, index) => {
return { return {
position: [item.longitude, item.latitude], position: [item.longitude, item.latitude],
extraData: { extraData: {
...@@ -873,38 +896,39 @@ export default { ...@@ -873,38 +896,39 @@ export default {
incubatorName: item.incubatorName, incubatorName: item.incubatorName,
operatingAgency: item.operatingAgency, operatingAgency: item.operatingAgency,
incubatorCount: item.incubatorCount, incubatorCount: item.incubatorCount,
graduationCount: item.graduationCount, graduationCount: item.graduationCount,
totalArea: item.totalArea, totalArea: item.totalArea,
totalIncome: item.totalIncome, totalIncome: item.totalIncome,
} },
} };
}) });
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照 // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach((item, index) => { markers.forEach((item, index) => {
var marker = new AMap.Marker({ var marker = new AMap.Marker({
map: this.map, map: this.map,
// position: [116.481181, 39.989792], // position: [116.481181, 39.989792],
position: [item.position[0], item.position[1]], position: [item.position[0], item.position[1]],
icon: "/static/images/marker-dp.png", icon: "/static/images/marker-dp.png",
imageSize: new AMap.Size(22, 22), imageSize: new AMap.Size(22, 22),
}); });
//鼠标点击marker弹出自定义的信息窗体 //鼠标点击marker弹出自定义的信息窗体
marker.on("click", () => { marker.on("click", () => {
// VUE.infoWindow.open(VUE.map, marker.getPosition()); // VUE.infoWindow.open(VUE.map, marker.getPosition());
this.showInfoWindow(marker, item.extraData); this.showInfoWindow(marker, item.extraData);
});
}); });
}) });
});
}, },
}, },
}; };
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.amap-icon{ // 高德地图样式覆盖 .amap-icon {
img{ // 高德地图样式覆盖
width:0.52rem !important; img {
width: 0.52rem !important;
height: 0.52rem !important; height: 0.52rem !important;
} }
} }
...@@ -1293,15 +1317,16 @@ export default { ...@@ -1293,15 +1317,16 @@ export default {
.a-md31 { .a-md31 {
height: 3.2rem; height: 3.2rem;
position: relative; position: relative;
&::after{ &::after {
position: absolute; position: absolute;
top: 62%; top: 60%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
content: ""; content: "";
width: 499px; width: 92%;
height: 1px; height: 1px;
background: linear-gradient(to right, #cfb8b8 50%, transparent 50%) repeat; background: linear-gradient(to right, #cfb8b8 50%, transparent 50%)
repeat;
background-size: 10px 2px; background-size: 10px 2px;
} }
ul { ul {
...@@ -1321,7 +1346,7 @@ export default { ...@@ -1321,7 +1346,7 @@ export default {
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;
......
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