From 0c496e7063f67a8b1af9ff3e2680d896e8d9d158 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: Mon, 09 Oct 2023 10:00:52 +0800
Subject: [PATCH] 更新图表
---
src/views/bigScreen/index.vue | 36 ++++++++++++++++++++++++------------
1 files changed, 24 insertions(+), 12 deletions(-)
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index f7775c5..e41e39d 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -1,39 +1,51 @@
<template>
- <div class="system-role-container">
- 6666666
+ <div class="screen-container">
+ <screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import screen from './components/screen.vue'
+import screenfull from 'screenfull'
+import { ElMessage, ElMessageBox } from 'element-plus';
+
// 定义接口来定义对象的类型
-interface TableData {
-
-}
interface TableDataState {
-
+ isScreenfull: boolean
}
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: { screen },
setup() {
- const roleDialogRef = ref();
const state = reactive<TableDataState>({
-
+ isScreenfull: false,
});
// 页面加载时
onMounted(() => {
});
- return {
- ...toRefs(state)
+
+ const clickFullscreen =() => {
+ if(!screenfull.isEnabled){
+ ElMessage.error('浏览器不支持')
+ return false
+ }
+ screenfull.toggle();
+ }
+
+ return {
+ clickFullscreen,
+ ...toRefs(state)
};
}
});
</script>
<style lang="scss" scoped>
-
+.screen-container{
+ height: calc(100vh - 144px);
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2