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> |
||||
<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> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return { |
||||
src:'' |
||||
data() { |
||||
return { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
.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; |
||||
|
||||
<style> |
||||
.content{ |
||||
width: 100%; |
||||
&: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%; |
||||
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