|
@@ -6,24 +6,29 @@
|
|
|
<el-col :span="24">
|
|
|
<div class="lol-container">
|
|
|
<div class="head">
|
|
|
- <div class="weather"><span id="showTime"></span></div>
|
|
|
+ <div class="weather">
|
|
|
+ <span id="showTime"></span>
|
|
|
+ <el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
|
|
|
+ <el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
<h1>设备运维数据中心</h1>
|
|
|
</div>
|
|
|
|
|
|
<div class="mainbox">
|
|
|
<ul class="clearfix">
|
|
|
<li>
|
|
|
- <div class="boxall" style="height:400px;">
|
|
|
+ <div class="boxall" style="flex: 2;">
|
|
|
<div class="alltitle">设备利用率趋势</div>
|
|
|
<div class="navboxall" id="echart5" style="height: 95%;"></div>
|
|
|
</div>
|
|
|
- <div class="boxall" style="height:300px; overflow: hidden;">
|
|
|
+ <div class="boxall" style="flex: 1.5; overflow: hidden;">
|
|
|
<div class="alltitle">单台设备累计借用时长排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
|
<span>排名</span><span>设备名称</span><span>设备编号</span><span>借用时长</span>
|
|
|
</div>
|
|
|
- <div class="wrap" style="height: 220px;">
|
|
|
+ <div class="wrap" style="height: 85%">
|
|
|
<ul>
|
|
|
<li v-for="(hero, index) in heroData" :key="index" style="width: 100%;">
|
|
|
<div
|
|
@@ -145,7 +150,7 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <el-table :data="teamRankings" style="width: 100%;height: 258px;">
|
|
|
+ <el-table :data="teamRankings" style="width: 100%;height: 75%;">
|
|
|
<el-table-column type="index" label="排名" width="80" />
|
|
|
<el-table-column prop="device_name" label="设备名称" />
|
|
|
<!-- <el-table-column prop="device_code" label="设备编码" /> -->
|
|
@@ -189,7 +194,7 @@
|
|
|
<div class="wraptit">
|
|
|
<span>排名</span><span>用户名称</span><span>总借用次数</span>
|
|
|
</div>
|
|
|
- <div class="wrap" style="height: 230px;">
|
|
|
+ <div class="wrap" style="height:85%;">
|
|
|
<ul>
|
|
|
<li v-for="(hero, index) in userList" :key="index" style="width: 100%;">
|
|
|
<div
|
|
@@ -227,6 +232,7 @@ import { useRouter } from 'vue-router';
|
|
|
import { request } from '/@/utils/service';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { GetList } from '../devicelabel/api'
|
|
|
+import { FullScreen, Aim } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
|
|
|
|
@@ -251,9 +257,34 @@ let global: any = {
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'home',
|
|
|
+ components: {
|
|
|
+ FullScreen,
|
|
|
+ Aim
|
|
|
+ },
|
|
|
setup() {
|
|
|
|
|
|
const scrollOffset = ref(0)
|
|
|
+ const isFullscreen = ref(false)
|
|
|
+
|
|
|
+ // 切换全屏
|
|
|
+ const toggleFullScreen = () => {
|
|
|
+ const element = document.querySelector('.home-container') as HTMLElement;
|
|
|
+ if (!element) return;
|
|
|
+
|
|
|
+ if (!document.fullscreenElement) {
|
|
|
+ element.requestFullscreen().then(() => {
|
|
|
+ isFullscreen.value = true;
|
|
|
+ }).catch(err => {
|
|
|
+ console.error(`全屏错误: ${err.message}`);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ document.exitFullscreen().then(() => {
|
|
|
+ isFullscreen.value = false;
|
|
|
+ }).catch(err => {
|
|
|
+ console.error(`退出全屏错误: ${err.message}`);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
let intervalId: number | null = null
|
|
|
const rowHeight = 50
|
|
|
const visibleRows = 6
|
|
@@ -978,6 +1009,8 @@ export default defineComponent({
|
|
|
fetchRankings,
|
|
|
scrollOffset,
|
|
|
...toRefs(state),
|
|
|
+ isFullscreen,
|
|
|
+ toggleFullScreen,
|
|
|
};
|
|
|
|
|
|
},
|
|
@@ -1084,8 +1117,28 @@ export default defineComponent({
|
|
|
$homeNavLengh: 8;
|
|
|
|
|
|
.home-container {
|
|
|
-
|
|
|
overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &:fullscreen {
|
|
|
+ background: #000d4a;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+
|
|
|
+ .lol-data-section {
|
|
|
+ height: 100vh;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lol-container {
|
|
|
+ height: 100vh;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.home-card-one,
|
|
|
.home-card-two,
|
|
@@ -1339,13 +1392,28 @@ $homeNavLengh: 8;
|
|
|
right: 20px;
|
|
|
top: 0;
|
|
|
line-height: 85px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+
|
|
|
+ .fullscreen-btn {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mainbox {
|
|
|
- /* min-height: 600px; */
|
|
|
- /* height: 100vh; */
|
|
|
+ height: calc(100vh - 105px);
|
|
|
padding: 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
.boxall {
|
|
|
border: 1px solid rgba(25, 186, 139, 0.17);
|
|
@@ -1435,10 +1503,24 @@ $homeNavLengh: 8;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
list-style: none;
|
|
|
+ height: 100%;
|
|
|
|
|
|
li {
|
|
|
width: 32%;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .boxall {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .navboxall {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.wrap {
|
|
@@ -1613,4 +1695,5 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|