|
@@ -7,7 +7,7 @@
|
|
|
<div class="lol-container">
|
|
|
<div class="head">
|
|
|
<div class="weather">
|
|
|
- <span id="showTime"></span>
|
|
|
+ <span id="showTime" style="font-size: 20px;"></span>
|
|
|
<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
|
|
|
<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
|
|
|
</el-button>
|
|
@@ -59,21 +59,21 @@
|
|
|
<div class="data-overview">
|
|
|
<div class="data-card total-devices">
|
|
|
<div class="card-content">
|
|
|
- <div class="card-title">设备总数</div>
|
|
|
+ <div class="card-title">设备总库存数</div>
|
|
|
<div class="card-value">{{ devicedata?.total_devices ?? 0 }}<span
|
|
|
class="card-unit"></span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-card borrowed">
|
|
|
<div class="card-content">
|
|
|
- <div class="card-title">已借出</div>
|
|
|
+ <div class="card-title">在借数</div>
|
|
|
<div class="card-value">{{ devicedata?.borrowed_devices ?? 0 }}<span
|
|
|
class="card-unit"></span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-card available">
|
|
|
<div class="card-content">
|
|
|
- <div class="card-title">可用设备</div>
|
|
|
+ <div class="card-title">在库数</div>
|
|
|
<div class="card-value">{{ devicedata?.available_devices ?? 0 }}<span
|
|
|
class="card-unit"></span></div>
|
|
|
</div>
|
|
@@ -129,7 +129,7 @@
|
|
|
<div class="alltitle">单台设备累计借用次数排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
|
- <span>排名</span><span>设备名称</span><span>标签名</span><span>借用次数</span>
|
|
|
+ <span>排名</span><span>设备名称</span><span>设备编号</span><span>借用次数</span>
|
|
|
</div>
|
|
|
<div class="wrap" :style="isFullscreen?'height: 85%':'height: 60%'">
|
|
|
<ul>
|
|
@@ -161,7 +161,7 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '310px' }">
|
|
|
+ <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '310px', overflow: 'hidden' }">
|
|
|
<div class="alltitle">活跃用户排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
@@ -900,21 +900,29 @@ export default defineComponent({
|
|
|
echart3.setOption(option);
|
|
|
};
|
|
|
|
|
|
+ const formatRange = (s) => {
|
|
|
+ const m = String(s).match(/^(\d{1,2})-(\d{1,2})至(\d{1,2})-(\d{1,2})$/);
|
|
|
+ if (!m) return s;
|
|
|
+ const [, m1, d1, m2, d2] = m;
|
|
|
+ return m1 === m2 ? `${m1}-${d1}至${d2}` : `${m1}-${d1}至${m2}-${d2}`;
|
|
|
+ };
|
|
|
|
|
|
//更新利用趋势图
|
|
|
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),
|
|
|
+ data: monthlyData.map(item => formatRange(item.date)),
|
|
|
axisLabel: {
|
|
|
color: '#fff',
|
|
|
- rotate: 0, // 旋转45度,避免标签重叠
|
|
|
+ rotate: 20, // 旋转45度,避免标签重叠
|
|
|
interval: 0, // 显示所有标签
|
|
|
- fontSize: 10, // 调整字体大小
|
|
|
+ fontSize: 12, // 调整字体大小
|
|
|
margin: 15 // 增加标签与轴的距离
|
|
|
},
|
|
|
axisTick: {
|
|
@@ -927,7 +935,7 @@ export default defineComponent({
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '月度利用率',
|
|
|
+ name: '利用率',
|
|
|
type: 'line', // 或 'bar',看你想要什么样的图
|
|
|
data: monthlyData.map(item => item.utilization_rate),
|
|
|
smooth: true,
|