|
@@ -11,8 +11,8 @@
|
|
|
<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
|
|
|
<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
|
|
|
</el-button>
|
|
|
- <el-button class="settings-btn" type="text" @click="openSettings">
|
|
|
- <el-icon><Setting /></el-icon>
|
|
|
+ <el-button class="fullscreen-btn" type="text" @click="openSettings">
|
|
|
+ <el-icon :size="40"><Setting /></el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
<h1>设备运维数据中心</h1>
|
|
@@ -116,22 +116,22 @@
|
|
|
|
|
|
<li>
|
|
|
|
|
|
- <div class="timeselect" style="height:30px">
|
|
|
- <!-- 快捷时间选择 -->
|
|
|
+ <!-- <div class="timeselect" style="height:30px">
|
|
|
+
|
|
|
<el-radio-group class="transparent-radio" v-model="quickRange"
|
|
|
@change="handleQuickRange">
|
|
|
<el-radio-button label="day">今日</el-radio-button>
|
|
|
<el-radio-button label="month">本月</el-radio-button>
|
|
|
<el-radio-button label="year">今年</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
- </div>
|
|
|
- <div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '350px', overflow: 'hidden' }">
|
|
|
+ </div> -->
|
|
|
+ <div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '400px', overflow: 'hidden' }">
|
|
|
<div class="alltitle">单台设备累计借用次数排名</div>
|
|
|
<div class="navboxall">
|
|
|
|
|
|
- <div class="filter-bar"
|
|
|
+ <!-- <div class="filter-bar"
|
|
|
style="margin-bottom: 10px; display: flex; gap: 12px; align-items: center;">
|
|
|
- <!-- 借用类型筛选 -->
|
|
|
+
|
|
|
<el-select class="transparent-select" v-model="selectedType"
|
|
|
placeholder="借用类型" @change="fetchRankings">
|
|
|
<el-option label="全部" value="all" />
|
|
@@ -141,7 +141,7 @@
|
|
|
</el-select>
|
|
|
|
|
|
|
|
|
- <!-- 时间范围筛选 -->
|
|
|
+
|
|
|
<el-date-picker v-model="dateRange" type="daterange"
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
|
|
|
value-format="YYYY-MM-DD" @change="fetchRankings" />
|
|
@@ -151,9 +151,9 @@
|
|
|
<el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <el-table :data="teamRankings" style="width: 100%;height: 75%;">
|
|
|
+ <el-table :data="teamRankings" style="width: 100%;height: 95%;">
|
|
|
<el-table-column type="index" label="排名" width="80" />
|
|
|
<el-table-column prop="device_name" label="设备名称" />
|
|
|
<!-- <el-table-column prop="device_code" label="设备编码" /> -->
|
|
@@ -171,13 +171,13 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '320px' }">
|
|
|
+ <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '310px' }">
|
|
|
<div class="alltitle">活跃用户排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
|
<span>排名</span><span>用户名</span><span>学号/工号</span><span>总借用次数</span>
|
|
|
</div>
|
|
|
- <div class="wrap" :style="isFullscreen?'height: 85%':'height: 61%'">
|
|
|
+ <div class="wrap" :style="isFullscreen?'height: 85%':'height: 60%'">
|
|
|
<ul>
|
|
|
<li v-for="(hero, index) in userList" :key="index" style="width: 100%;padding:5px 0 ;border-bottom: 1px solid #232e63 ;">
|
|
|
<div
|
|
@@ -239,6 +239,7 @@ import { request } from '/@/utils/service';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { GetList } from '../devicelabel/api'
|
|
|
import { FullScreen, Aim, Setting } from '@element-plus/icons-vue'
|
|
|
+import { Session, Local } from '/@/utils/storage';
|
|
|
|
|
|
|
|
|
|
|
@@ -605,9 +606,7 @@ export default defineComponent({
|
|
|
if (savedSettings) {
|
|
|
state.panelSettings = JSON.parse(savedSettings);
|
|
|
}
|
|
|
- nextTick(() => {
|
|
|
-
|
|
|
- });
|
|
|
+ /* fetchRankings(); */
|
|
|
});
|
|
|
// 由于页面缓存原因,keep-alive
|
|
|
onActivated(() => {
|
|
@@ -660,7 +659,15 @@ export default defineComponent({
|
|
|
state.devicedata = res.data;
|
|
|
updateZbCharts(res.data);
|
|
|
}
|
|
|
- const drres = await api.GetDeviceRankList();
|
|
|
+ const borrow_rank = Local.get(`borrow_ranking_filters_${Session.get('userInfo').username}`)
|
|
|
+ const params = {
|
|
|
+ type: borrow_rank.borrowType,//selectedType.value,
|
|
|
+ start_date: borrow_rank.dateRange?.[0],
|
|
|
+ end_date: borrow_rank.dateRange?.[1],
|
|
|
+ tag_id:borrow_rank.deviceTagIds
|
|
|
+ };
|
|
|
+ console.log(borrow_rank);
|
|
|
+ const drres = await api.GetDeviceRankList(params);
|
|
|
if (res.code === 2000) {
|
|
|
state.teamRankings = [...drres.data.borrow_count_ranking].sort(
|
|
|
(a, b) => b.borrow_count - a.borrow_count
|
|
@@ -714,12 +721,13 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
const fetchRankings = async () => {
|
|
|
+ const borrow_rank = Local.get(`borrow_ranking_filters_${Session.get('userInfo').username}`)
|
|
|
try {
|
|
|
const params = {
|
|
|
- type: selectedType.value,
|
|
|
- start_date: dateRange.value?.[0],
|
|
|
- end_date: dateRange.value?.[1],
|
|
|
- tag_id:deviceTagId.value
|
|
|
+ type: borrow_rank.borrowType,//selectedType.value,
|
|
|
+ start_date: borrow_rank.dateRange.value?.[0],
|
|
|
+ end_date: borrow_rank.dateRange.value?.[1],
|
|
|
+ tag_id:borrow_rank.deviceTagIds
|
|
|
};
|
|
|
const res = await api.GetBorrowRanking(params);
|
|
|
if (res.code === 2000) {
|
|
@@ -900,15 +908,24 @@ export default defineComponent({
|
|
|
|
|
|
|
|
|
//更新利用趋势图
|
|
|
- const updateMonthlyUtilizationChart = (monthlyData: Array<{ month: string; rate: number }>) => {
|
|
|
+ const updateMonthlyUtilizationChart = (monthlyData: Array<{ date: string; utilization_rate: number }>) => {
|
|
|
const echart5 = echarts.init(document.getElementById('echart5'));
|
|
|
if (!echart5) return;
|
|
|
-
|
|
|
+ console.log(monthlyData);
|
|
|
const option = {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: monthlyData.map(item => item.date),
|
|
|
- axisLabel: { color: '#fff' }
|
|
|
+ axisLabel: {
|
|
|
+ color: '#fff',
|
|
|
+ rotate: 0, // 旋转45度,避免标签重叠
|
|
|
+ interval: 0, // 显示所有标签
|
|
|
+ fontSize: 10, // 调整字体大小
|
|
|
+ margin: 15 // 增加标签与轴的距离
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true // 刻度线与标签对齐
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
@@ -934,7 +951,8 @@ export default defineComponent({
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
- bottom: '3%',
|
|
|
+ bottom: '15%', // 增加底部空间,为旋转后的标签预留空间
|
|
|
+ top: '10%', // 适当增加顶部空间
|
|
|
containLabel: true
|
|
|
}
|
|
|
};
|
|
@@ -992,6 +1010,12 @@ export default defineComponent({
|
|
|
// 初始化时间显示
|
|
|
const initTime = () => {
|
|
|
const showTime = () => {
|
|
|
+ const timeElement = document.getElementById("showTime");
|
|
|
+ if (!timeElement) {
|
|
|
+ console.warn('时间显示元素未找到');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
const dt = new Date();
|
|
|
const y = dt.getFullYear();
|
|
|
const mt = dt.getMonth() + 1;
|
|
@@ -999,11 +1023,14 @@ export default defineComponent({
|
|
|
const h = dt.getHours();
|
|
|
const m = dt.getMinutes();
|
|
|
const s = dt.getSeconds();
|
|
|
- document.getElementById("showTime")!.innerHTML =
|
|
|
- y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
|
|
|
+ timeElement.innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
|
|
|
};
|
|
|
- showTime();
|
|
|
- setInterval(showTime, 1000);
|
|
|
+
|
|
|
+ // 延迟执行,确保DOM已渲染
|
|
|
+ nextTick(() => {
|
|
|
+ showTime();
|
|
|
+ setInterval(showTime, 1000);
|
|
|
+ });
|
|
|
};
|
|
|
//
|
|
|
/* function echarts_3() {
|