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