|
@@ -11,6 +11,9 @@
|
|
<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
|
|
<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
|
|
<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
|
|
<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
|
|
</el-button>
|
|
</el-button>
|
|
|
|
+ <el-button class="settings-btn" type="text" @click="openSettings">
|
|
|
|
+ <el-icon><Setting /></el-icon>
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
<h1>设备运维数据中心</h1>
|
|
<h1>设备运维数据中心</h1>
|
|
</div>
|
|
</div>
|
|
@@ -18,11 +21,11 @@
|
|
<div class="mainbox">
|
|
<div class="mainbox">
|
|
<ul class="clearfix">
|
|
<ul class="clearfix">
|
|
<li>
|
|
<li>
|
|
- <div class="boxall" style="flex: 2;">
|
|
|
|
|
|
+ <div v-if="panelSettings.deviceUtilization" class="boxall" :style="{ flex: !panelSettings.deviceRanking ? 3.5 : 2 }">
|
|
<div class="alltitle">设备利用率趋势</div>
|
|
<div class="alltitle">设备利用率趋势</div>
|
|
<div class="navboxall" id="echart5" style="height: 95%;"></div>
|
|
<div class="navboxall" id="echart5" style="height: 95%;"></div>
|
|
</div>
|
|
</div>
|
|
- <div class="boxall" style="flex: 1.5; overflow: hidden;">
|
|
|
|
|
|
+ <div v-if="panelSettings.deviceRanking" class="boxall" :style="{ flex: !panelSettings.deviceUtilization ? 3.5 : 1.5, overflow: 'hidden' }">
|
|
<div class="alltitle">单台设备累计借用时长排名</div>
|
|
<div class="alltitle">单台设备累计借用时长排名</div>
|
|
<div class="navboxall">
|
|
<div class="navboxall">
|
|
<div class="wraptit">
|
|
<div class="wraptit">
|
|
@@ -50,7 +53,7 @@
|
|
</li>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<li>
|
|
- <div class="boxall" style="height:360px">
|
|
|
|
|
|
+ <div v-if="panelSettings.coreMetrics" class="boxall" :style="{ height: !panelSettings.borrowTrend ? '700px' : '360px' }">
|
|
<div class="alltitle">核心概览指标</div>
|
|
<div class="alltitle">核心概览指标</div>
|
|
<div class="clearfix navboxall" style="height: 100%">
|
|
<div class="clearfix navboxall" style="height: 100%">
|
|
<div class="data-overview">
|
|
<div class="data-overview">
|
|
@@ -99,7 +102,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="boxall" style="height:340px">
|
|
|
|
|
|
+ <div v-if="panelSettings.borrowTrend" class="boxall" :style="{ height: !panelSettings.coreMetrics ? '700px' : '340px' }">
|
|
<div class="alltitle">整体设备借用次数趋势</div>
|
|
<div class="alltitle">整体设备借用次数趋势</div>
|
|
<div class="navboxall" id="echart3" style="height: 95%;"></div>
|
|
<div class="navboxall" id="echart3" style="height: 95%;"></div>
|
|
</div>
|
|
</div>
|
|
@@ -122,7 +125,7 @@
|
|
<el-radio-button label="year">今年</el-radio-button>
|
|
<el-radio-button label="year">今年</el-radio-button>
|
|
</el-radio-group>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
- <div class="boxall" style="height:350px; overflow: hidden;">
|
|
|
|
|
|
+ <div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '350px', overflow: 'hidden' }">
|
|
<div class="alltitle">单台设备累计借用次数排名</div>
|
|
<div class="alltitle">单台设备累计借用次数排名</div>
|
|
<div class="navboxall">
|
|
<div class="navboxall">
|
|
|
|
|
|
@@ -162,33 +165,13 @@
|
|
<el-table-column prop="borrow_count" label="借用次数" />
|
|
<el-table-column prop="borrow_count" label="借用次数" />
|
|
</el-table>
|
|
</el-table>
|
|
|
|
|
|
- <!-- <div class="scroll-table-wrapper"> -->
|
|
|
|
- <!-- 固定表头 -->
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <!-- <div class="wraptit">
|
|
|
|
- <span>排名</span><span>设备名称</span><span>设备编号</span><span>借用次数</span>
|
|
|
|
- </div> -->
|
|
|
|
- <!-- 滚动内容区域 -->
|
|
|
|
- <!-- <div class="scroll-body">
|
|
|
|
- <div class="scroll-inner" :style="{ transform: `translateY(-${scrollOffset}px)` }">
|
|
|
|
- <el-table :data="teamRankings" style="width: 100%" header-row-class-name="hidden-header">
|
|
|
|
- <el-table-column type="index" width="80"/>
|
|
|
|
- <el-table-column prop="device_name"/>
|
|
|
|
- <el-table-column prop="device_code"/>
|
|
|
|
- <el-table-column prop="borrow_count"/>
|
|
|
|
- </el-table>
|
|
|
|
- </div>
|
|
|
|
- </div> -->
|
|
|
|
- <!-- </div> -->
|
|
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
- <div class="boxall" style="height:320px">
|
|
|
|
|
|
+ <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '320px' }">
|
|
<div class="alltitle">活跃用户</div>
|
|
<div class="alltitle">活跃用户</div>
|
|
<div class="navboxall">
|
|
<div class="navboxall">
|
|
<div class="wraptit">
|
|
<div class="wraptit">
|
|
@@ -207,7 +190,6 @@
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- <div class="navboxall" id="echart2" style="height: 95%;"></div> -->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- <div class="boxall" style="height:300px">
|
|
<!-- <div class="boxall" style="height:300px">
|
|
<div class="alltitle">设备维修时间统计</div>
|
|
<div class="alltitle">设备维修时间统计</div>
|
|
@@ -218,6 +200,29 @@
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
|
|
+ <!-- 设置弹窗 -->
|
|
|
|
+ <el-dialog
|
|
|
|
+ v-model="settingsDialogVisible"
|
|
|
|
+ title="面板设置"
|
|
|
|
+ width="500px"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ destroy-on-close
|
|
|
|
+ >
|
|
|
|
+ <div class="panel-settings">
|
|
|
|
+ <el-checkbox v-model="panelSettings.deviceUtilization">设备利用率趋势</el-checkbox>
|
|
|
|
+ <el-checkbox v-model="panelSettings.deviceRanking">单台设备累计借用时长排名</el-checkbox>
|
|
|
|
+ <el-checkbox v-model="panelSettings.coreMetrics">核心概览指标</el-checkbox>
|
|
|
|
+ <el-checkbox v-model="panelSettings.borrowTrend">整体设备借用次数趋势</el-checkbox>
|
|
|
|
+ <el-checkbox v-model="panelSettings.deviceBorrowRanking">单台设备累计借用次数排名</el-checkbox>
|
|
|
|
+ <el-checkbox v-model="panelSettings.activeUsers">活跃用户</el-checkbox>
|
|
|
|
+ </div>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <span class="dialog-footer">
|
|
|
|
+ <el-button @click="() => state.settingsDialogVisible = false">取消</el-button>
|
|
|
|
+ <el-button type="primary" @click="saveSettings">确定</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -232,7 +237,7 @@ import { useRouter } from 'vue-router';
|
|
import { request } from '/@/utils/service';
|
|
import { request } from '/@/utils/service';
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
import { GetList } from '../devicelabel/api'
|
|
import { GetList } from '../devicelabel/api'
|
|
-import { FullScreen, Aim } from '@element-plus/icons-vue'
|
|
|
|
|
|
+import { FullScreen, Aim, Setting } from '@element-plus/icons-vue'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -313,6 +318,15 @@ export default defineComponent({
|
|
today_returned: 0,
|
|
today_returned: 0,
|
|
total_borrows: 0
|
|
total_borrows: 0
|
|
},
|
|
},
|
|
|
|
+ panelSettings: {
|
|
|
|
+ deviceUtilization: true, // 设备利用率趋势
|
|
|
|
+ deviceRanking: true, // 单台设备累计借用时长排名
|
|
|
|
+ coreMetrics: true, // 核心概览指标
|
|
|
|
+ borrowTrend: true, // 整体设备借用次数趋势
|
|
|
|
+ deviceBorrowRanking: true, // 单台设备累计借用次数排名
|
|
|
|
+ activeUsers: true, // 活跃用户
|
|
|
|
+ },
|
|
|
|
+ settingsDialogVisible: false,
|
|
homeOne: [],
|
|
homeOne: [],
|
|
homeThree: [],
|
|
homeThree: [],
|
|
myCharts: [],
|
|
myCharts: [],
|
|
@@ -584,7 +598,12 @@ export default defineComponent({
|
|
initEchartsResize();
|
|
initEchartsResize();
|
|
initTime(); // 初始化时间显示
|
|
initTime(); // 初始化时间显示
|
|
// initHeroScroll(); // 添加英雄数据轮播初始化
|
|
// initHeroScroll(); // 添加英雄数据轮播初始化
|
|
- getList()
|
|
|
|
|
|
+ getList();
|
|
|
|
+ // 从本地存储加载面板设置
|
|
|
|
+ const savedSettings = localStorage.getItem('dashboardPanelSettings');
|
|
|
|
+ if (savedSettings) {
|
|
|
|
+ state.panelSettings = JSON.parse(savedSettings);
|
|
|
|
+ }
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
|
|
|
});
|
|
});
|
|
@@ -995,6 +1014,9 @@ export default defineComponent({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+ const settingsDialogVisible = computed(() => state.settingsDialogVisible);
|
|
|
|
+ const panelSettings = computed(() => state.panelSettings);
|
|
|
|
+
|
|
return {
|
|
return {
|
|
homeLineRef,
|
|
homeLineRef,
|
|
homePieRef,
|
|
homePieRef,
|
|
@@ -1008,11 +1030,25 @@ export default defineComponent({
|
|
handleQuickRange,
|
|
handleQuickRange,
|
|
fetchRankings,
|
|
fetchRankings,
|
|
scrollOffset,
|
|
scrollOffset,
|
|
- ...toRefs(state),
|
|
|
|
|
|
+ devicedata: computed(() => state.devicedata),
|
|
|
|
+ heroData: computed(() => state.heroData),
|
|
|
|
+ userList: computed(() => state.userList),
|
|
|
|
+ teamRankings: computed(() => state.teamRankings),
|
|
|
|
+ settingsDialogVisible,
|
|
|
|
+ panelSettings,
|
|
isFullscreen,
|
|
isFullscreen,
|
|
toggleFullScreen,
|
|
toggleFullScreen,
|
|
|
|
+ // 打开设置弹窗
|
|
|
|
+ openSettings: () => {
|
|
|
|
+ state.settingsDialogVisible = true;
|
|
|
|
+ },
|
|
|
|
+ // 保存设置
|
|
|
|
+ saveSettings: () => {
|
|
|
|
+ state.settingsDialogVisible = false;
|
|
|
|
+ // 可以在这里添加保存到本地存储的逻辑
|
|
|
|
+ localStorage.setItem('dashboardPanelSettings', JSON.stringify(state.panelSettings));
|
|
|
|
+ },
|
|
};
|
|
};
|
|
-
|
|
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
@@ -1694,6 +1730,18 @@ $homeNavLengh: 8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+.panel-settings {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
|
+ gap: 20px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+
|
|
|
|
+ .el-checkbox {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ color: #606266;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|