jinna
3 years ago
parent
8d10b93b24
commit
340d4121c9
11 changed files with 8759 additions and 1616 deletions
|
After Width: | Height: | Size: 500 B |
|
After Width: | Height: | Size: 392 B |
@ -0,0 +1,28 @@ |
|||||||
|
// 除IE外各浏览器全屏、退出全屏的方法
|
||||||
|
export function isFullscreen(element, state) { |
||||||
|
let isFullscreen = |
||||||
|
document.fullScreenElement || |
||||||
|
document.msFullscreenElement || |
||||||
|
document.mozFullScreenElement || |
||||||
|
document.webkitFullscreenElement || |
||||||
|
false; |
||||||
|
if (!isFullscreen) { |
||||||
|
if (element.requestFullscreen) { |
||||||
|
element.requestFullscreen(); |
||||||
|
} else if (element.mozRequestFullScreen) { |
||||||
|
element.mozRequestFullScreen(); |
||||||
|
} else if (element.webkitRequestFullscreen) { |
||||||
|
element.webkitRequestFullscreen(); |
||||||
|
} else if (element.msRequestFullscreen) { |
||||||
|
element.msRequestFullscreen(); |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (document.exitFullscreen) { |
||||||
|
document.exitFullscreen(); |
||||||
|
} else if (document.mozCancelFullScreen) { |
||||||
|
document.mozCancelFullScreen(); |
||||||
|
} else if (document.webkitExitFullscreen) { |
||||||
|
document.webkitExitFullscreen(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,11 @@ |
|||||||
|
import Cookies from "js-cookie"; |
||||||
|
/** |
||||||
|
* 存token |
||||||
|
* @param {*} |
||||||
|
*/ |
||||||
|
export function setToken(val) { |
||||||
|
if (window.location.protocol === "https:") { |
||||||
|
return Cookies.set("scs_token", val, { sameSite: "none", secure: true }); |
||||||
|
} |
||||||
|
return Cookies.set("scs_token", val); |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -1,31 +1,440 @@ |
|||||||
<template> |
<template> |
||||||
<div class="content"> |
<div class="container_box"> |
||||||
<iframe |
<div class="left_box"> |
||||||
src="/static/index.html" |
<div class="left_top"> |
||||||
width="100%" |
<div class="time_box"> |
||||||
height="100%" |
<div style="font-size: 0.4rem; color: #fff">{{ time }}</div> |
||||||
ref="iframeDom" |
<div class="date_box"> |
||||||
frameborder="0" |
<div style="font-size: 0.18rem; color: #fff">{{ date }}</div> |
||||||
></iframe> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
data(){ |
data() { |
||||||
return { |
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 lang="scss" scoped> |
||||||
|
.container_box { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
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 { |
||||||
</script> |
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; |
||||||
|
|
||||||
<style> |
&:last-child { |
||||||
.content{ |
border-right: none; |
||||||
width: 100%; |
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.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%; |
height: 100%; |
||||||
overflow: hidden; |
|
||||||
} |
.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; |
||||||
|
|
||||||
</style> |
&: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> |
||||||
|
|||||||
Loading…
Reference in new issue