|
@@ -7,6 +7,7 @@ |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<header class="dashboard-header"> |
|
|
<header class="dashboard-header"> |
|
|
|
|
|
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div> |
|
|
<h1>发电玻璃智能管控平台地图总览</h1> |
|
|
<h1>发电玻璃智能管控平台地图总览</h1> |
|
|
<span class="side left">晴转多云 14℃</span> |
|
|
<span class="side left">晴转多云 14℃</span> |
|
|
<span class="side right">23:12|星期一|2023.12.13</span> |
|
|
<span class="side right">23:12|星期一|2023.12.13</span> |
|
@@ -14,15 +15,38 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import screenfull from "screenfull"; |
|
|
|
|
|
import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png"; |
|
|
|
|
|
import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: "DashboardHeader", |
|
|
name: "DashboardHeader", |
|
|
components: {}, |
|
|
components: {}, |
|
|
props: {}, |
|
|
props: {}, |
|
|
data() { |
|
|
data() { |
|
|
return {}; |
|
|
|
|
|
|
|
|
return { |
|
|
|
|
|
isFullscreen: false, |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
btnStyle() { |
|
|
|
|
|
return { |
|
|
|
|
|
backgroundImage: `url(${ |
|
|
|
|
|
this.isFullscreen ? fullscreenExitIcon : fullscreenIcon |
|
|
|
|
|
})`, |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
toggleFullscreen() { |
|
|
|
|
|
screenfull.toggle(); |
|
|
|
|
|
this.isFullscreen = !this.isFullscreen; |
|
|
|
|
|
// 矫正宽度 |
|
|
|
|
|
const el = document.querySelector(".dashboard-factory-all"); |
|
|
|
|
|
el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)"; |
|
|
|
|
|
el.style.left = this.isFullscreen ? "0" : "54px"; |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
computed: {}, |
|
|
|
|
|
methods: {}, |
|
|
|
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
@@ -34,6 +58,17 @@ export default { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: grid; |
|
|
display: grid; |
|
|
place-content: center; |
|
|
place-content: center; |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 2vw; |
|
|
|
|
|
height: 2vw; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
right: 1.18vw; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
background-position: 0 0; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
h1 { |
|
|
h1 { |
|
|