main
liudan
3 days ago
parent
a5624a9fd0
commit
a1453b7082
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 486 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 212 KiB |
@ -0,0 +1,957 @@ |
|||||||
|
<template> |
||||||
|
<div class="infoContent"> |
||||||
|
<div class="left"> |
||||||
|
<div class="title"> |
||||||
|
<span>数量统计</span> |
||||||
|
<div class="all">全部</div> |
||||||
|
</div> |
||||||
|
<div class="totalInfo"> |
||||||
|
<img src="../assets/leftborder.png" class="border" alt=""> |
||||||
|
<div class="leftContainer"> |
||||||
|
<div class="leftTop"> |
||||||
|
<div class="section"> |
||||||
|
<div class="sec1"> |
||||||
|
<img src="../assets/btn.png" alt=""> |
||||||
|
<div class="peopleNum"> |
||||||
|
<span>当日出纳</span> |
||||||
|
<span>3</span> |
||||||
|
<span>人</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="section1"> |
||||||
|
<div class="numContent" v-for="(item,index) in nList" :key="index"> |
||||||
|
<img src="../assets/bbg.png" class="borderNum" alt=""> |
||||||
|
<div class="numItem"> |
||||||
|
<img :src="item.pic" alt=""> |
||||||
|
<div class="numText">{{item.text}}</div> |
||||||
|
<div class="num">{{item.num}}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="leftTop section2"> |
||||||
|
<div style="width: 100%;height: 100%;" id="main"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<img src="../assets/centerBorder.png" class="centerborder" alt=""> |
||||||
|
<div class="title"> |
||||||
|
<span>数量统计</span> |
||||||
|
</div> |
||||||
|
<div class="centerContent"> |
||||||
|
<div class="circleInfo"> |
||||||
|
<div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/lan.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #96BFFE;">1672</span> |
||||||
|
<span style="color: #96BFFE;">噪音</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/lv.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #00F1FF;">1672</span> |
||||||
|
<span style="color: #00F1FF;">CH2O</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/huang.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #F6EC58;">1672</span> |
||||||
|
<span style="color: #F6EC58;">NH3</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/lv.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #00F1FF;">1672</span> |
||||||
|
<span style="color: #00F1FF;">SO2</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/huang.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #F6EC58;">1672</span> |
||||||
|
<span style="color: #F6EC58;">H2</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="circleIem"> |
||||||
|
<img src="../assets/hong.png" alt=""> |
||||||
|
<div class="itemInfo"> |
||||||
|
<span style="color: #FFC0D4;">1672</span> |
||||||
|
<span style="color: #FFC0D4;">NO2</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="line"> |
||||||
|
<div style="height:50%" id="center1"></div> |
||||||
|
<div style="height:50%" id="center2"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="deviceAlarm"> |
||||||
|
<img src="../assets/rightborder1.png" alt="" class="deviceBorder"> |
||||||
|
<div class="title"> |
||||||
|
<span>设备告警信息</span> |
||||||
|
</div> |
||||||
|
<div class="deviceContent"> |
||||||
|
<vue-seamless-scroll :class-option="classOption" :data="listData" class="warp"> |
||||||
|
<div class="item" v-for="(item, index) in listData" :key="index"> |
||||||
|
{{item.title}} |
||||||
|
</div> |
||||||
|
</vue-seamless-scroll> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="videoList"> |
||||||
|
<img src="../assets/rightborder2.png" alt="" class="videoBorder"> |
||||||
|
<div class="title"> |
||||||
|
<span>视频列表</span> |
||||||
|
</div> |
||||||
|
<div class="videoContent"> |
||||||
|
<img src="../assets/v1.png" alt=""> |
||||||
|
<img src="../assets/v2.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from 'echarts'; |
||||||
|
export default { |
||||||
|
name:'page1', |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
nList:[ |
||||||
|
{pic:require('../assets/n1.png'),text:'压缩机',num:888}, |
||||||
|
{pic:require('../assets/n2.png'),text:'温度',num:888}, |
||||||
|
{pic:require('../assets/n3.png'),text:'运行时长',num:888}, |
||||||
|
{pic:require('../assets/n4.png'),text:'累计垃圾量',num:888}, |
||||||
|
], |
||||||
|
classOption:{ |
||||||
|
step: 0.2 |
||||||
|
}, |
||||||
|
listData: [ |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "设备告警信息信息信息信息信息信息信息信息信息信息信息信息信息", |
||||||
|
} |
||||||
|
], |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
updateClock() { |
||||||
|
let now = new Date(); |
||||||
|
let year = now.getFullYear(); |
||||||
|
let month = now.getMonth() + 1; |
||||||
|
let day = now.getDate(); |
||||||
|
let hours = now.getHours(); |
||||||
|
let minutes = now.getMinutes(); |
||||||
|
let seconds = now.getSeconds(); |
||||||
|
month = month < 10 ? '0' + month : month; |
||||||
|
day = day < 10 ? '0' + day : day; |
||||||
|
hours = hours < 10 ? '0' + hours : hours; |
||||||
|
minutes = minutes < 10 ? '0' + minutes : minutes; |
||||||
|
seconds = seconds < 10 ? '0' + seconds : seconds; |
||||||
|
let timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; |
||||||
|
this.timeText = timeString |
||||||
|
}, |
||||||
|
setNum(){ |
||||||
|
// 基于准备好的dom，初始化echarts实例 |
||||||
|
let myChart1 = echarts.init(document.getElementById('main')); |
||||||
|
myChart1.setOption({ |
||||||
|
title: { |
||||||
|
textStyle: { //标题内容的样式 |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontFamily: "Microsoft YaHei", |
||||||
|
fontSize: '1.6rem' |
||||||
|
}, |
||||||
|
text: '不同时间段垃圾转运量统计', |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '1%', |
||||||
|
right: '1%', |
||||||
|
bottom: '2%', |
||||||
|
top:'14%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: ['00:00','01:00','02:00','03:00','04:00','05:00','06:00',' 07:00','08:00'], |
||||||
|
// 修改坐标轴标签样式 |
||||||
|
// axisLabel: { |
||||||
|
// textStyle: { |
||||||
|
// color: '#ffffff', |
||||||
|
// fontStyle: 'normal', |
||||||
|
// fontWeight: "400", |
||||||
|
// fontSize: '1.2rem' |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
|
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
// // 修改坐标轴标签样式 |
||||||
|
|
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: '#fff', // 分割线颜色 |
||||||
|
opacity:0.3, |
||||||
|
type: 'dashed', // 分割线类型 |
||||||
|
width: 1 // 分割线宽度 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: [20, 60, 70, 80, 50, 40, 50,65,90], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
lineStyle: { |
||||||
|
color: '#F6B221', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
}, |
||||||
|
|
||||||
|
// 添加区域渐变效果 |
||||||
|
areaStyle: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(246,178,33,0)' // 渐变颜色 |
||||||
|
}, { |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(246,178,33,0.79)' // 渐变颜色 |
||||||
|
}]) |
||||||
|
}, |
||||||
|
}] |
||||||
|
}); |
||||||
|
// window.onresize = function() { |
||||||
|
// myChart1.resize(); |
||||||
|
// }; |
||||||
|
}, |
||||||
|
setCenterOne(){ |
||||||
|
// 基于准备好的dom，初始化echarts实例 |
||||||
|
let myChart2 = echarts.init(document.getElementById('center1')); |
||||||
|
myChart2.setOption({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '1%', |
||||||
|
right: '1%', |
||||||
|
bottom: '4%', |
||||||
|
top:'14%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: [1,2,3,4,5,6,7,8,9,10,11,12], |
||||||
|
// 修改坐标轴标签样式 |
||||||
|
|
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
|
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
// 修改坐标轴标签样式 |
||||||
|
|
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: '#fff', // 分割线颜色 |
||||||
|
opacity:0.3, |
||||||
|
type: 'dashed', // 分割线类型 |
||||||
|
width: 1 // 分割线宽度 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
data: [20, 60, 70, 80, 50, 70, 50,65,90,40,20,10], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
lineStyle: { |
||||||
|
color: '#0AAFD0', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
}, |
||||||
|
|
||||||
|
// 添加区域渐变效果 |
||||||
|
areaStyle: { |
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(4,13,22,0)' // 渐变颜色 |
||||||
|
}, { |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(10,175,208,0.79)' // 渐变颜色 |
||||||
|
}]) |
||||||
|
}, |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
// window.onresize = function() { |
||||||
|
// myChart2.resize(); |
||||||
|
// }; |
||||||
|
}, |
||||||
|
setCenterTwo(){ |
||||||
|
// 基于准备好的dom，初始化echarts实例 |
||||||
|
let myChart3 = echarts.init(document.getElementById('center2')); |
||||||
|
myChart3.setOption({ |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '1%', |
||||||
|
right: '1%', |
||||||
|
bottom: '14%', |
||||||
|
top:'14%', |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
data: [1,2,3,4,5,6,7,8,9,10,11,12], |
||||||
|
// 修改坐标轴标签样式 |
||||||
|
|
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
|
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
// 修改坐标轴标签样式 |
||||||
|
|
||||||
|
textStyle: { |
||||||
|
color: '#ffffff', |
||||||
|
fontStyle: 'normal', |
||||||
|
fontWeight: "400", |
||||||
|
fontSize: '1.2rem' |
||||||
|
}, |
||||||
|
// 修改坐标轴线的样式 |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: '#FFFFFF', // 线的颜色 |
||||||
|
width: 0.7 // 线宽 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: '#fff', // 分割线颜色 |
||||||
|
opacity:0.3, |
||||||
|
type: 'dashed', // 分割线类型 |
||||||
|
width: 1 // 分割线宽度 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
data: [20, 60, 70, 80, 50, 40, 50,65,90,80,70,60], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
smooth:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#31B9FF', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [10, 20, 30, 40, 50, 40, 45,65,80,70,60,50], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
smooth:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#16EA76', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [50,10, 20, 30, 40, 50, 40, 45,65,80,70,60], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
smooth:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#FFA200', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [50,10, 70,60,20, 30, 40, 50, 40, 45,65,80,], |
||||||
|
type: 'line', |
||||||
|
showSymbol: false, |
||||||
|
smooth:true, |
||||||
|
lineStyle: { |
||||||
|
color: '#FF6262', // 线条颜色 |
||||||
|
width: 2, // 线条宽度 |
||||||
|
type: 'solid' // 线条类型 |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
// window.onresize = function() { |
||||||
|
// myChart3.resize(); |
||||||
|
// }; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.setNum() |
||||||
|
this.setCenterOne() |
||||||
|
this.setCenterTwo() |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@font-face { |
||||||
|
font-family: "myfont"; |
||||||
|
src: url('../assets/DIN-Condensed-Bold-2.ttf') format('truetype'); |
||||||
|
} |
||||||
|
.infoContent{ |
||||||
|
// flex:1; |
||||||
|
height:100%; |
||||||
|
padding: 0 0 2rem 0; |
||||||
|
display: flex; |
||||||
|
overflow: hidden; |
||||||
|
.left{ |
||||||
|
width:28%; |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
position: relative; |
||||||
|
.title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top:0rem; |
||||||
|
left:5.3rem; |
||||||
|
z-index:9; |
||||||
|
width: calc(100% - 6.3rem); |
||||||
|
span{ |
||||||
|
font-family: "myfont", sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 2.4rem; |
||||||
|
color: #DFEEF3; |
||||||
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.all{ |
||||||
|
background: #3F87F6; |
||||||
|
border-radius: 0.8rem; |
||||||
|
// width: 6rem; |
||||||
|
// height: 3.2rem; |
||||||
|
padding:0.2rem 1.6rem; |
||||||
|
text-align: center; |
||||||
|
line-height: 3.2rem; |
||||||
|
|
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.6rem; |
||||||
|
color: #DFEEF3; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.totalInfo{ |
||||||
|
flex:1; |
||||||
|
position: relative; |
||||||
|
// width:100%; |
||||||
|
// border: 1px solid #fff; |
||||||
|
// border-image-source: url("../assets/leftborder.png"); |
||||||
|
// border-image-slice: 100 235 100 235; |
||||||
|
// border-image-width: 100px 220px 100px 220px; |
||||||
|
// border-image-repeat: round; |
||||||
|
.border{ |
||||||
|
width:100%; |
||||||
|
height:auto; |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
height:100%; |
||||||
|
width:100%; |
||||||
|
left:0; |
||||||
|
z-index:0; |
||||||
|
} |
||||||
|
.leftContainer{ |
||||||
|
position: relative; |
||||||
|
z-index:2; |
||||||
|
height:calc(100% - 7.3rem); |
||||||
|
margin-left:3.6rem; |
||||||
|
margin-right:1.6rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
margin-top:7.3rem; |
||||||
|
} |
||||||
|
.leftTop{ |
||||||
|
height:calc(50%); |
||||||
|
// flex:1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.section{ |
||||||
|
position: relative; |
||||||
|
z-index:2; |
||||||
|
.sec1{ |
||||||
|
width: 100%; |
||||||
|
// margin: 7.3rem auto 5rem auto; |
||||||
|
// padding-left: 2.4rem; |
||||||
|
// margin-top:7.3rem; |
||||||
|
position: relative; |
||||||
|
&>img{ |
||||||
|
width:100%; |
||||||
|
} |
||||||
|
.peopleNum{ |
||||||
|
position: absolute; |
||||||
|
top: 40%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
left: 50%; |
||||||
|
&>:first-child{ |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.6rem; |
||||||
|
color: #FFFFFF; |
||||||
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
&>:nth-child(2){ |
||||||
|
margin-left:2rem; |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 3rem; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
&>:nth-child(3){ |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 1.6rem; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.section1{ |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
// width: 90%; |
||||||
|
// margin: 0 auto; |
||||||
|
// height:100%; |
||||||
|
flex:1; |
||||||
|
// margin-top:5rem; |
||||||
|
.numContent{ |
||||||
|
width:calc(50% - 1rem); |
||||||
|
margin-top: 2rem; |
||||||
|
position: relative; |
||||||
|
// height:50%; |
||||||
|
.borderNum{ |
||||||
|
position: absolute; |
||||||
|
left:0; |
||||||
|
top:0; |
||||||
|
width:100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.numItem{ |
||||||
|
// position: absolute; |
||||||
|
// z-index: 3; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
// top: 0; |
||||||
|
// left: 0; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
img{ |
||||||
|
max-height:25%; |
||||||
|
height:auto; |
||||||
|
width: fit-content; |
||||||
|
} |
||||||
|
.numText{ |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.6rem; |
||||||
|
color: #3F87F6; |
||||||
|
margin:1.5rem 0; |
||||||
|
margin: 1% 0; |
||||||
|
} |
||||||
|
.num{ |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 2rem; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.section2{ |
||||||
|
padding-top:5.3rem; |
||||||
|
height:calc(30vh) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
.center{ |
||||||
|
flex:1; |
||||||
|
position: relative; |
||||||
|
.centerborder{ |
||||||
|
width:100%; |
||||||
|
height:auto; |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
height:100%; |
||||||
|
width:100%; |
||||||
|
left:0; |
||||||
|
z-index:0; |
||||||
|
} |
||||||
|
.centerContent{ |
||||||
|
|
||||||
|
position: relative; |
||||||
|
z-index:1; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
position: absolute; |
||||||
|
top:0rem; |
||||||
|
left:5.3rem; |
||||||
|
z-index:9; |
||||||
|
span{ |
||||||
|
font-family: "myfont", sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 2.4rem; |
||||||
|
color: #DFEEF3; |
||||||
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.centerContent{ |
||||||
|
height: calc(100% - 7.3rem); |
||||||
|
margin-left: 3.6rem; |
||||||
|
margin-right: 1.6rem; |
||||||
|
margin-top: 7.3rem; |
||||||
|
|
||||||
|
.circleInfo{ |
||||||
|
width: 100%; |
||||||
|
height:40%; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
&>div{ |
||||||
|
width:76%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
} |
||||||
|
.circleIem{ |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&>img{ |
||||||
|
width:14.4rem; |
||||||
|
height: 13.7rem; |
||||||
|
} |
||||||
|
.itemInfo{ |
||||||
|
position: absolute; |
||||||
|
left:50%; |
||||||
|
top:50%; |
||||||
|
transform: translate(-50%,-50%); |
||||||
|
// border:1px solid red; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
&>:first-child{ |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 2.4rem; |
||||||
|
|
||||||
|
} |
||||||
|
&>:nth-child(2){ |
||||||
|
font-family: Source Han Sans CN; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.3rem; |
||||||
|
color: #F6EC58; |
||||||
|
// margin-top:1.3rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.line{ |
||||||
|
width:100%; |
||||||
|
// height: 60%; |
||||||
|
height: calc(46vh); |
||||||
|
// display: flex; |
||||||
|
// flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
width: 28%; |
||||||
|
flex-shrink: 0; |
||||||
|
|
||||||
|
.deviceAlarm{ |
||||||
|
height:30%; |
||||||
|
border: 1px solid transparent; |
||||||
|
position: relative; |
||||||
|
.title{ |
||||||
|
position: absolute; |
||||||
|
top:0rem; |
||||||
|
left:5.3rem; |
||||||
|
z-index:9; |
||||||
|
span{ |
||||||
|
font-family: "myfont", sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 2.4rem; |
||||||
|
color: #DFEEF3; |
||||||
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.deviceBorder{ |
||||||
|
width:100%; |
||||||
|
height:auto; |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
height:100%; |
||||||
|
width:100%; |
||||||
|
left:0; |
||||||
|
z-index:0; |
||||||
|
|
||||||
|
} |
||||||
|
.deviceContent{ |
||||||
|
height: calc(100% - 6rem); |
||||||
|
margin-left: 3.6rem; |
||||||
|
margin-right: 2.6rem; |
||||||
|
margin-top: 5rem; |
||||||
|
position: relative; |
||||||
|
z-index:4; |
||||||
|
.warp { |
||||||
|
height: 100%; |
||||||
|
// width: 100%; |
||||||
|
color:#fff; |
||||||
|
margin: 0 auto; |
||||||
|
overflow: hidden; |
||||||
|
// margin:2rem; |
||||||
|
.item{ |
||||||
|
padding:1.2rem 1.5rem; |
||||||
|
// background: linear-gradient(90deg, rgba(5,10,26,0.1),rgba(63,135,246,0.16)); |
||||||
|
background: linear-gradient(-90deg, rgba(5,10,26,0.1), #0B2146); |
||||||
|
// opacity: 0.16; |
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.4rem; |
||||||
|
color: #DFEEF3; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.videoList{ |
||||||
|
height:70%; |
||||||
|
border: 1px solid transparent; |
||||||
|
position: relative; |
||||||
|
.title{ |
||||||
|
position: absolute; |
||||||
|
top:1.2rem; |
||||||
|
left:5.3rem; |
||||||
|
z-index:9; |
||||||
|
span{ |
||||||
|
font-family: "myfont", sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 2.4rem; |
||||||
|
color: #DFEEF3; |
||||||
|
background: linear-gradient(0deg, #0C8DF8 0%, #AFD1FF 100%); |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
.videoBorder{ |
||||||
|
width:100%; |
||||||
|
height:auto; |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
height:100%; |
||||||
|
width:100%; |
||||||
|
left:0; |
||||||
|
z-index:0; |
||||||
|
} |
||||||
|
.videoContent{ |
||||||
|
height: calc(100% - 8rem); |
||||||
|
margin-left: 3.6rem; |
||||||
|
margin-right: 3rem; |
||||||
|
margin-top: 7rem; |
||||||
|
overflow: auto; |
||||||
|
position: relative; |
||||||
|
z-index:4; |
||||||
|
padding-right:1rem; |
||||||
|
img{ |
||||||
|
width:100%; |
||||||
|
height: auto; |
||||||
|
margin-bottom:3.2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
/* 整个滚动条 */ |
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0.8rem; /* 对于垂直滚动条，设置宽度 */ |
||||||
|
height: 0.8rem; /* 对于水平滚动条，设置高度 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条轨道 */ |
||||||
|
::-webkit-scrollbar-track { |
||||||
|
background: #12274D; /* 背景颜色 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条的滑块 */ |
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
background: #3F87F6; /* 滑块颜色 */ |
||||||
|
border-radius: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* 滑块hover效果 */ |
||||||
|
::-webkit-scrollbar-thumb:hover { |
||||||
|
background: #555; /* 滑块hover颜色 */ |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,446 @@ |
|||||||
|
<template> |
||||||
|
<div class="infoContent"> |
||||||
|
<div class="left"> |
||||||
|
|
||||||
|
<div> |
||||||
|
<img src="../assets/pageborder.png" alt=""> |
||||||
|
<div class="item"> |
||||||
|
<div class="num">226</div> |
||||||
|
<div class="text">当日在岗人员数量</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<div class="num" style="color:#3AF3FF">168</div> |
||||||
|
<div class="text">当日在运行设备数量</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="center" v-if="mapText=='map1'"> |
||||||
|
<div id="map" style="width: 100%; height: 100%;"></div> |
||||||
|
</div> |
||||||
|
<div class="center1" v-if="mapText=='map2'"> |
||||||
|
<div id="mapContainer" class="map"></div> |
||||||
|
<img id="mapSvg" v-show="false" hidden style="width:1000px;height:1000px" src="../assets/map.png"> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div> |
||||||
|
<img src="../assets/pageborder.png" alt=""> |
||||||
|
<div class="item"> |
||||||
|
<div class="num">26</div> |
||||||
|
<div class="text">当日累计转运垃圾量(吨)</div> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<div class="num" style="color:#F62D45">300</div> |
||||||
|
<div class="text">当日告警条数</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
||||||
|
import * as echarts from 'echarts'; |
||||||
|
export default { |
||||||
|
name:'page1', |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
mapText:'map1', |
||||||
|
map:null, |
||||||
|
AMap:null, |
||||||
|
list:[ |
||||||
|
{longitude:116.345447,latitude:39.917521}, |
||||||
|
{longitude:116.352314,latitude:39.916205}, |
||||||
|
{longitude:116.327509,latitude:39.919101}, |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
setMap(){ |
||||||
|
AMapLoader.load({ |
||||||
|
key: '3c01d0f0e3a43db3208c27ac0d0e8686', |
||||||
|
version: '2.0', |
||||||
|
plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] |
||||||
|
}).then((AMap) => { |
||||||
|
this.AMap = AMap |
||||||
|
this.map = new AMap.Map('map', { |
||||||
|
zoom: 13, |
||||||
|
mapStyle: 'amap://styles/darkblue', |
||||||
|
center: [116.345447,39.917521] // 中心点坐标 |
||||||
|
}); |
||||||
|
this.setMarks() |
||||||
|
}).catch(e => { |
||||||
|
console.log(e); |
||||||
|
}); |
||||||
|
}, |
||||||
|
setMarks() { |
||||||
|
this.list.forEach((item, index) => { |
||||||
|
let myIcon = new AMap.Icon({ |
||||||
|
image: require('../assets/tu1.png'), // 图标图片地址 |
||||||
|
// size: new AMap.Size(51, 67), // 图标大小 |
||||||
|
imageSize: new AMap.Size(25, 33), |
||||||
|
offset: new AMap.Pixel(-25, -25) // 图标偏移量 |
||||||
|
}); |
||||||
|
let myIcon1 = new AMap.Icon({ |
||||||
|
image: require('../assets/tu2.png'), |
||||||
|
// size: new AMap.Size(50, 50), |
||||||
|
imageSize: new AMap.Size(25, 33), |
||||||
|
offset: new AMap.Pixel(-25, -25) |
||||||
|
}); |
||||||
|
let marker = new this.AMap.Marker({ |
||||||
|
position: [item.longitude, item.latitude], |
||||||
|
icon: index==1?myIcon:myIcon1, |
||||||
|
extData: { item }, |
||||||
|
}); |
||||||
|
this.map.add(marker); |
||||||
|
marker.on('click', (e) => { |
||||||
|
// 获取item , 这个getExtData()是AMap.Marker的扩展方法 |
||||||
|
let item = e.target.getExtData().item; |
||||||
|
console.log(item); |
||||||
|
console.log(e); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
async initMap(){ |
||||||
|
|
||||||
|
try { |
||||||
|
const response = await import('../assets/110108.json'); |
||||||
|
let geoJson = response |
||||||
|
let dom = document.getElementById('mapContainer'); |
||||||
|
console.log(dom) |
||||||
|
let myChart = echarts.init(dom, null, { |
||||||
|
renderer: 'canvas', |
||||||
|
useDirtyRect: false |
||||||
|
}); |
||||||
|
|
||||||
|
let option = {}; |
||||||
|
echarts.registerMap('js', geoJson); |
||||||
|
option = { |
||||||
|
geo: [ |
||||||
|
{ |
||||||
|
map: 'js', |
||||||
|
zlevel:5, |
||||||
|
visualMap:false, |
||||||
|
top:50, |
||||||
|
// roam: true, |
||||||
|
aspectScale:1, |
||||||
|
zoom:1, |
||||||
|
emphasis:{ |
||||||
|
disabled:true, //5.3.1开始支持 |
||||||
|
focus: 'none', |
||||||
|
itemStyle:{ |
||||||
|
color: "#00ff00", // 背景 |
||||||
|
borderWidth:0,// 边框宽度0 |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
selectedMode:false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
tooltip:{ |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
areaColor: { |
||||||
|
image: document.getElementById('mapSvg'), |
||||||
|
repeat: 'repeat', // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat' |
||||||
|
width:'100%', |
||||||
|
height:'100%' |
||||||
|
// opacity:0.8, |
||||||
|
|
||||||
|
}, |
||||||
|
borderColor: "#30A2CE", // 边框颜色 |
||||||
|
borderWidth:1, |
||||||
|
// backgroundColor: { // 设置背景图片 |
||||||
|
// image: '../assets/ditu.png', // 背景图片的URL |
||||||
|
// repeat: 'repeat', // 背景图片不重复 |
||||||
|
// }, |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
{ |
||||||
|
map: 'js', |
||||||
|
top:51, |
||||||
|
aspectScale:1, |
||||||
|
zoom:1, |
||||||
|
zlevel:4, |
||||||
|
emphasis:{ |
||||||
|
disabled:true, //5.3.1开始支持 |
||||||
|
focus: 'none', |
||||||
|
itemStyle:{ |
||||||
|
color: "#ff0000", // 背景 |
||||||
|
borderWidth:0,// 边框宽度0 |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
// color: '#eee' |
||||||
|
}, |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
tooltip:{ |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
color: 'transparent', // 背景 |
||||||
|
borderWidth:3,// 边框宽度 |
||||||
|
borderColor: "#70B9D6", // 边框颜色 |
||||||
|
shadowBlur:3, |
||||||
|
shadowColor: "#70B9D6" |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
map: 'js', |
||||||
|
top:54, |
||||||
|
zlevel:3, |
||||||
|
aspectScale:1, |
||||||
|
zoom:1, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
tooltip:{ |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
color: 'transparent', // 背景 |
||||||
|
borderWidth:3, // 边框宽度 |
||||||
|
borderColor: "#30A2CE", // 边框颜色 |
||||||
|
shadowBlur:8, |
||||||
|
shadowOffsetX:4, |
||||||
|
shadowOffsetY:4, |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
show: true, |
||||||
|
trigger: 'item', //触发类型。item,axis,none |
||||||
|
enterable: true,//鼠标是否可进入提示框浮层中，默认为false， |
||||||
|
showContent: true, //是否显示提示框浮层 |
||||||
|
triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none) |
||||||
|
showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。 |
||||||
|
textStyle: { |
||||||
|
color: 'white', |
||||||
|
}, |
||||||
|
|
||||||
|
padding: [0, 0], |
||||||
|
hideDelay: 10, |
||||||
|
backgroundColor:'transparent', |
||||||
|
borderColor: "transparent", |
||||||
|
transitionDuration: 1, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。 |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'scatter', |
||||||
|
coordinateSystem: 'geo', // 基于地理坐标系 |
||||||
|
zlevel:9, |
||||||
|
symbolSize:30, |
||||||
|
tooltip:{show: true}, |
||||||
|
// symbol:"path://M9.37373 0.279204V6.1875H6.00371V4.32158C6.00371 4.16746 5.87848 4.04237 5.72418 4.04237H4.55835C4.40405 4.04237 4.27882 4.16746 4.27882 4.32158V6.1875H3.49439V4.32158C3.49439 4.16746 3.36916 4.04237 3.21486 4.04237H2.04902C1.89472 4.04237 1.76949 4.16746 1.76949 4.32158V6.1875H0.403768C0.180888 6.1875 0 6.36818 0 6.5908V9.23931H11.0883V10.2877H0V15.5968C0 15.8194 0.180888 16.0001 0.403768 16.0001H17.1697C17.3928 16.0001 17.5735 15.8194 17.5735 15.5968V6.5908C17.5735 6.36818 17.3926 6.1875 17.1697 6.1875H15.7209V0.279204C15.7209 0.125083 15.5957 0 15.4414 0H13.3391C13.1848 0 13.0595 0.125083 13.0595 0.279204V6.1875H12.0351V0.279204C12.0351 0.125083 11.9099 0 11.7556 0H9.65326C9.49896 0 9.37373 0.125083 9.37373 0.279204ZM1.16409 11.915H3.04577V14.1729H1.16409V11.915ZM6.38359 11.915H4.50191V14.1729H6.38359V11.915ZM7.84068 11.915H9.72236V14.1729H7.84068V11.915ZM13.0602 11.915H11.1785V14.1729H13.0602V11.915ZM14.5154 11.915H16.397V14.1729H14.5154V11.915Z", |
||||||
|
symbol:"image://"+require("../assets/tu1.png"), |
||||||
|
// itemStyle: { |
||||||
|
// color:(params)=>{ |
||||||
|
// return 'orange' |
||||||
|
// } |
||||||
|
// }, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
name: '图标1', |
||||||
|
value: [116.243084,40.076118], |
||||||
|
symbol:"image://"+require("../assets/tu1.png"), |
||||||
|
symbolSize: [29, 38] // 设置图标大小 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '图标1', |
||||||
|
value: [116.273983,39.997786], |
||||||
|
symbol:"image://"+require("../assets/tu1.png"), |
||||||
|
symbolSize: [29, 38] // 设置图标大小 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '图标2', |
||||||
|
value: [116.296986,39.960692], |
||||||
|
symbol: "image://"+require("../assets/tu2.png"), |
||||||
|
symbolSize: [29, 38] |
||||||
|
} |
||||||
|
], |
||||||
|
// data: [[116.243084,40.076118],[116.296986,39.960692],[116.273983,39.997786],[116.313809,39.970428],[116.313465,40.041169]] |
||||||
|
|
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
|
myChart.setOption(option,true); |
||||||
|
window.addEventListener('resize', ()=>{ |
||||||
|
myChart.resize() |
||||||
|
}); |
||||||
|
} catch (error) { |
||||||
|
console.error('Fetch error:', error); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
this.$nextTick(()=>{ |
||||||
|
this.setMap() |
||||||
|
this.initMap() |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@font-face { |
||||||
|
font-family: "myfont"; |
||||||
|
src: url('../assets/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf') format('truetype'); |
||||||
|
} |
||||||
|
.infoContent{ |
||||||
|
// flex:1; |
||||||
|
height:100%; |
||||||
|
// padding: 0 0 2rem 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
.left{ |
||||||
|
position: absolute; |
||||||
|
z-index:2; |
||||||
|
height:100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
left:2.6rem; |
||||||
|
|
||||||
|
&>div{ |
||||||
|
background-color: #000925; |
||||||
|
position: relative; |
||||||
|
img{ |
||||||
|
height:calc(50vh); |
||||||
|
width:auto; |
||||||
|
} |
||||||
|
.item{ |
||||||
|
|
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
width:100%; |
||||||
|
height:50%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.num{ |
||||||
|
font-family: "myfont"; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 6rem; |
||||||
|
color: #01A0F3; |
||||||
|
} |
||||||
|
.text{ |
||||||
|
margin-top:2.8rem; |
||||||
|
|
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.8rem; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
} |
||||||
|
&>.item:nth-of-type(1){ |
||||||
|
top:0; |
||||||
|
} |
||||||
|
&>.item:nth-of-type(2){ |
||||||
|
|
||||||
|
top:50% !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.center{ |
||||||
|
// flex:1; |
||||||
|
height:100%; |
||||||
|
width:100%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
} |
||||||
|
.center1{ |
||||||
|
height:100%; |
||||||
|
width: 80%; |
||||||
|
.map{ |
||||||
|
width:100%; |
||||||
|
height:100%; |
||||||
|
} |
||||||
|
} |
||||||
|
.right{ |
||||||
|
position: absolute; |
||||||
|
z-index:2; |
||||||
|
height:100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
right:2.6rem; |
||||||
|
&>div{ |
||||||
|
background-color: #000925; |
||||||
|
position: relative; |
||||||
|
img{ |
||||||
|
height:calc(50vh); |
||||||
|
width:auto; |
||||||
|
} |
||||||
|
.item{ |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
width:100%; |
||||||
|
height:50%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
.num{ |
||||||
|
font-family: "myfont"; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 6rem; |
||||||
|
color: #F6B221; |
||||||
|
} |
||||||
|
.text{ |
||||||
|
margin-top:2.8rem; |
||||||
|
|
||||||
|
font-family: Microsoft YaHei; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 1.8rem; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
} |
||||||
|
&>.item:nth-of-type(1){ |
||||||
|
top:0; |
||||||
|
} |
||||||
|
&>.item:nth-of-type(2){ |
||||||
|
|
||||||
|
top:50% !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
/* 整个滚动条 */ |
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0.8rem; /* 对于垂直滚动条，设置宽度 */ |
||||||
|
height: 0.8rem; /* 对于水平滚动条，设置高度 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条轨道 */ |
||||||
|
::-webkit-scrollbar-track { |
||||||
|
background: #12274D; /* 背景颜色 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* 滚动条的滑块 */ |
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
background: #3F87F6; /* 滑块颜色 */ |
||||||
|
border-radius: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* 滑块hover效果 */ |
||||||
|
::-webkit-scrollbar-thumb:hover { |
||||||
|
background: #555; /* 滑块hover颜色 */ |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue