add fullscreen

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-04-10 14:07:42 +08:00
parent e2f4183d0b
commit 8d4470db21
2 changed files with 41 additions and 6 deletions

View File

@ -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 {

View File

@ -48,7 +48,7 @@ import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
import Container from "./dashboard/components/Container.vue"; import Container from "./dashboard/components/Container.vue";
import ChartContainer from "./dashboard/components/ChartContainer.vue"; import ChartContainer from "./dashboard/components/ChartContainer.vue";
import FtoChart from "./dashboard/charts/Fto.vue"; import FtoChart from "./dashboard/charts/Fto.vue";
import ChipInvestChart from './dashboard/charts/ChipInvest.vue'; import ChipInvestChart from "./dashboard/charts/ChipInvest.vue";
export default { export default {
name: "Index", name: "Index",
@ -58,7 +58,7 @@ export default {
DbContainer: Container, DbContainer: Container,
ChartContainer, ChartContainer,
FtoChart, FtoChart,
ChipInvestChart ChipInvestChart,
}, },
data() { data() {
return { return {
@ -145,7 +145,7 @@ export default {
left: 54px; left: 54px;
height: 100vh; height: 100vh;
width: calc(100vw - 54px); width: calc(100vw - 54px);
z-index: 1000; z-index: 1001;
color: #fff; color: #fff;
} }