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