|
|
|
|
@ -1,12 +1,75 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="content"> |
|
|
|
|
<iframe |
|
|
|
|
src="/static/index.html" |
|
|
|
|
width="100%" |
|
|
|
|
height="100%" |
|
|
|
|
ref="iframeDom" |
|
|
|
|
frameborder="0" |
|
|
|
|
></iframe> |
|
|
|
|
<div class="container_box"> |
|
|
|
|
<div class="left_box"> |
|
|
|
|
<div class="left_top"> |
|
|
|
|
<div class="time_box"> |
|
|
|
|
<div style="font-size: 0.4rem; color: #fff">{{ time }}</div> |
|
|
|
|
<div class="date_box"> |
|
|
|
|
<div style="font-size: 0.18rem; color: #fff">{{ date }}</div> |
|
|
|
|
<div style="font-size: 0.18rem; color: #fff">{{ week }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="weather_box"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_cen"> |
|
|
|
|
<div class="title_box"> |
|
|
|
|
<div class="left_tit">收件量</div> |
|
|
|
|
<div class="right_tit"> |
|
|
|
|
<div class="btn">收</div> |
|
|
|
|
<div class="btn">发</div> |
|
|
|
|
<div class="btn">到</div> |
|
|
|
|
<div class="btn">派</div> |
|
|
|
|
<div class="btn">签</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cen_con"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="left_bot"> |
|
|
|
|
<div class="title_box"> |
|
|
|
|
<div class="tit">村点信息</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_box"> |
|
|
|
|
<div class="center_top"> |
|
|
|
|
<div class="top_tit">莒县物流服务中心</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cen_data"> |
|
|
|
|
<div class="data_top"> |
|
|
|
|
<div class="left_btn"> |
|
|
|
|
<div class="txt">按日</div> |
|
|
|
|
<div class="txt">按月</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_time">数据更新时间:2022-01-09</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="center_cen"></div> |
|
|
|
|
<div class="cen_bot"> |
|
|
|
|
<div class="echarts"></div> |
|
|
|
|
<div class="echarts"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_box"> |
|
|
|
|
<div class="full_btn"> |
|
|
|
|
<img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt=""> |
|
|
|
|
<img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_top"> |
|
|
|
|
<div class="title_box"> |
|
|
|
|
<div class="tit">派件入库量占比</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_center"> |
|
|
|
|
<div class="title_box"> |
|
|
|
|
<div class="tit">车辆行驶里程</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right_bot"> |
|
|
|
|
<div class="title_box"> |
|
|
|
|
<div class="tit">车辆报警</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
@ -14,18 +77,364 @@ |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
src:'' |
|
|
|
|
timer: null, |
|
|
|
|
day: "", |
|
|
|
|
time: "", |
|
|
|
|
date: "", |
|
|
|
|
week: "", |
|
|
|
|
isFullFlag:false, |
|
|
|
|
isSupport:false |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.getTime(); |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.isSupport=document.fullscreenEnabled |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
clickFun(){ |
|
|
|
|
if (this.isSupport) { |
|
|
|
|
if (document.fullscreenElement) { |
|
|
|
|
//document.exitFullscreen()退出全屏模式的方法 |
|
|
|
|
document.exitFullscreen(); |
|
|
|
|
this.isFullFlag = false; |
|
|
|
|
} else { |
|
|
|
|
//requestFullscreen(),请求全屏的方法 |
|
|
|
|
document.documentElement.requestFullscreen(); |
|
|
|
|
this.isFullFlag = true; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
console.log(this.isFullFlag) |
|
|
|
|
// this.isFullFlag =!this.isFullFlag |
|
|
|
|
// if (!screenfull.enabled) { |
|
|
|
|
// this.$message({ |
|
|
|
|
// message: 'Your browser does not work', |
|
|
|
|
// type: 'warning' |
|
|
|
|
// }) |
|
|
|
|
// return false |
|
|
|
|
// } |
|
|
|
|
// screenfull.toggle() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
fn(str) { |
|
|
|
|
let num = null; |
|
|
|
|
str >= 10 ? (num = str) : (num = "0" + str); |
|
|
|
|
return num; |
|
|
|
|
}, |
|
|
|
|
getWeek(e) { |
|
|
|
|
let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; |
|
|
|
|
this.week = arr[e]; |
|
|
|
|
}, |
|
|
|
|
getTime() { |
|
|
|
|
//获取当前时间 |
|
|
|
|
this.timer = setInterval(() => { |
|
|
|
|
var date = new Date(); |
|
|
|
|
var year = date.getFullYear(); //当前年份 |
|
|
|
|
var month = date.getMonth(); //当前月份 |
|
|
|
|
var data = date.getDate(); //天 |
|
|
|
|
var hours = date.getHours(); //小时 |
|
|
|
|
var minute = date.getMinutes(); //分 |
|
|
|
|
var second = date.getSeconds(); //秒 |
|
|
|
|
this.day = date.getDay(); //获取当前星期几 |
|
|
|
|
this.getWeek(this.day); |
|
|
|
|
this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second); |
|
|
|
|
this.date = year + "/" + (month + 1) + "/" + data; |
|
|
|
|
}, 1000); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
.content{ |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.container_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: absolute; |
|
|
|
|
background: url(~@/assets/images/index_bg.png); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.left_box { |
|
|
|
|
width: 25%; |
|
|
|
|
height: 100%; |
|
|
|
|
background: url(~@/assets/images/line_img.png) top right repeat-y; |
|
|
|
|
|
|
|
|
|
.left_top { |
|
|
|
|
width: 90%; |
|
|
|
|
height: 12%; |
|
|
|
|
border: 1px solid #0e94ea; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 0.1rem; |
|
|
|
|
|
|
|
|
|
.time_box { |
|
|
|
|
width: 49%; |
|
|
|
|
height: 100%; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
|
|
.date_box { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-around; |
|
|
|
|
align-items: center; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_cen { |
|
|
|
|
width: 90%; |
|
|
|
|
height: 45%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 0.1rem; |
|
|
|
|
.title_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.42rem; |
|
|
|
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.left_tit { |
|
|
|
|
color: #fff; |
|
|
|
|
width: 30%; |
|
|
|
|
display: flex; |
|
|
|
|
padding-left: 0.4rem; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
} |
|
|
|
|
.right_tit { |
|
|
|
|
width: 65%; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
height: 70%; |
|
|
|
|
border: 0.5px solid #0e94ea; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 0.3rem; |
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
width: 20%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
border-right: 0.5px solid #0e94ea; |
|
|
|
|
cursor: pointer; |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
border-right: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.cen_con { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 89%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left_bot { |
|
|
|
|
width: 90%; |
|
|
|
|
height: 39%; |
|
|
|
|
// background: red; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 0.1rem; |
|
|
|
|
|
|
|
|
|
.title_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.42rem; |
|
|
|
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
|
|
.tit { |
|
|
|
|
width: 30%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding-left: 0.4rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.center_box { |
|
|
|
|
width: 45%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.center_top{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 8.8%; |
|
|
|
|
background: red; |
|
|
|
|
background: url(~@/assets/images/title_border.png) bottom center no-repeat; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.top_tit{ |
|
|
|
|
color: #cdddf7; |
|
|
|
|
font-size: 0.52rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.cen_data{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 15%; |
|
|
|
|
|
|
|
|
|
.data_top{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 30%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
.left_btn{ |
|
|
|
|
width: 15%; |
|
|
|
|
border: 1px solid #0e94ea; |
|
|
|
|
height: 65%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
border-radius: 0.1rem; |
|
|
|
|
margin-left: 0.1rem; |
|
|
|
|
|
|
|
|
|
.txt{ |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
color: #fff; |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
border-right: 1px solid #0e94ea; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
&:last-child{ |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right_time{ |
|
|
|
|
width: 25%; |
|
|
|
|
height: 100%; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 0.18rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.center_cen{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 46%; |
|
|
|
|
background: red; |
|
|
|
|
} |
|
|
|
|
.cen_bot{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: 30%; |
|
|
|
|
display: flex; |
|
|
|
|
// background: green; |
|
|
|
|
|
|
|
|
|
.echarts{ |
|
|
|
|
width: 50%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right_box { |
|
|
|
|
width: 30%; |
|
|
|
|
height: 100%; |
|
|
|
|
background: url(~@/assets/images/line_img.png) top left repeat-y; |
|
|
|
|
|
|
|
|
|
.full_btn{ |
|
|
|
|
width: 92%; |
|
|
|
|
height: 3%; |
|
|
|
|
// background: red; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_top{ |
|
|
|
|
width: 92%; |
|
|
|
|
height: 30%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
margin-top: 0.1rem; |
|
|
|
|
|
|
|
|
|
.title_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.42rem; |
|
|
|
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
|
|
|
background-size:100% 100% ; |
|
|
|
|
|
|
|
|
|
.tit { |
|
|
|
|
width: 30%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding-left: 0.4rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_center{ |
|
|
|
|
width: 92%; |
|
|
|
|
height: 45%; |
|
|
|
|
// background: red; |
|
|
|
|
margin:0 auto; |
|
|
|
|
.title_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.42rem; |
|
|
|
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
|
|
|
background-size:100% 100% ; |
|
|
|
|
|
|
|
|
|
.tit { |
|
|
|
|
width: 30%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding-left: 0.4rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right_bot{ |
|
|
|
|
width: 92%; |
|
|
|
|
height: 20%; |
|
|
|
|
// background: green; |
|
|
|
|
margin:0 auto; |
|
|
|
|
.title_box { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.42rem; |
|
|
|
|
background: url(~@/assets/images/box_title.png) top left no-repeat; |
|
|
|
|
background-size:100% 100% ; |
|
|
|
|
|
|
|
|
|
.tit { |
|
|
|
|
width: 30%; |
|
|
|
|
height: 100%; |
|
|
|
|
font-size: 0.2rem; |
|
|
|
|
color: #fff; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding-left: 0.4rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
jinna
3 years ago
