bugfix:

1、播放统计-根据时间筛选报错乱码
2、页面无法滚动问题
3、增加minio配置

smsb-admin/src/main/resources/application.yml

@@ -45,6 +45,9 @@ server:
   # zlm4j 服务IP
   zlm4j:
     ip: 117.73.3.135
+  # minio 访问IP
+  minio:
+    ip: 117.73.3.135
 
 # 日志配置
 logging:

smsb-plus-ui/src/views/smsb/dashboard/device.vue

@@ -1,104 +1,120 @@
 <template>
-  <el-container>
-    <el-header>
-      <el-card shadow="hover" style="margin-top: 10px">
-        <el-row justify="end" align="middle">
-          <el-col :span="19" style="text-align: right">
-            <el-radio-group v-model="timeRadio" size="small" @change="handleDateRangeChange">
-              <!--              <el-radio-button label="今日" value="today" />-->
-              <el-radio-button label="近7天" value="week" />
-              <el-radio-button label="近30天" value="month" />
-            </el-radio-group>
-          </el-col>
-          <el-col :span="5" style="text-align: right">
-            <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
-              end-placeholder="结束日期" style="margin-left: 10px; margin-right: 30px" />
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-header>
-
-    <el-main style="margin-top: 20px">
-      <el-row :gutter="20">
-        <el-col :span="6" v-for="(item, index) in stats" :key="index">
-          <el-card shadow="hover" class="stat-card">
-            <h3>{{ item.label }}</h3>
-            <p :class="['number', item.class]">{{ item.value }}</p>
+  <div class="play-dashboard-root">
+    <div class="play-dashboard-page">
+      <el-container>
+        <el-header>
+          <el-card shadow="hover" style="margin-top: 10px">
+            <el-row justify="end" align="middle">
+              <el-col :span="19" style="text-align: right">
+                <el-radio-group v-model="timeRadio" size="small" @change="handleDateRangeChange">
+                  <!--              <el-radio-button label="今日" value="today" />-->
+                  <el-radio-button label="近7天" value="week"/>
+                  <el-radio-button label="近30天" value="month"/>
+                  <el-radio-button label="自定义" value="diy"/>
+                </el-radio-group>
+              </el-col>
+              <el-col :span="5" style="text-align: right">
+                <el-date-picker v-model="dateRange" type="daterange" @change="handleDateRangeChange" range-separator="-"
+                                start-placeholder="开始日期"
+                                :disabled="diyFlag" :clearable="false" end-placeholder="结束日期"
+                                style="margin-left: 10px; margin-right: 30px"/>
+              </el-col>
+            </el-row>
           </el-card>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20" style="margin-top: 20px">
-        <el-col :span="18">
+        </el-header>
+
+        <el-main style="margin-top: 20px">
           <el-row :gutter="20">
-            <el-col :span="8">
-              <el-card shadow="hover">
-                <h3>类型占比</h3>
-                <div ref="typePie" class="chart-placeholder"></div>
-              </el-card>
-            </el-col>
-            <el-col :span="8">
-              <el-card shadow="hover">
-                <h3>告警级别</h3>
-                <div ref="alarmLevel" class="chart-placeholder"></div>
-              </el-card>
-            </el-col>
-            <el-col :span="8">
-              <el-card shadow="hover">
-                <h3>告警问题统计</h3>
-                <div ref="alarmCount" class="chart-placeholder"></div>
+            <el-col :span="6" v-for="(item, index) in stats" :key="index">
+              <el-card shadow="hover" class="stat-card">
+                <h3>{{ item.label }}</h3>
+                <p :class="['number', item.class]">{{ item.value }}</p>
               </el-card>
             </el-col>
           </el-row>
           <el-row :gutter="20" style="margin-top: 20px">
-            <el-col :span="12">
-              <el-card shadow="hover">
-                <h3>在线时长排行</h3>
-                <div ref="onlineTime" class="chart-placeholder"></div>
-              </el-card>
+            <el-col :span="18">
+              <el-row :gutter="20">
+                <el-col :span="8">
+                  <el-card shadow="hover">
+                    <h3>类型占比</h3>
+                    <div ref="typePie" class="chart-placeholder"></div>
+                  </el-card>
+                </el-col>
+                <el-col :span="8">
+                  <el-card shadow="hover">
+                    <h3>告警级别</h3>
+                    <div ref="alarmLevel" class="chart-placeholder"></div>
+                  </el-card>
+                </el-col>
+                <el-col :span="8">
+                  <el-card shadow="hover">
+                    <h3>告警问题统计</h3>
+                    <div ref="alarmCount" class="chart-placeholder"></div>
+                  </el-card>
+                </el-col>
+              </el-row>
+              <el-row :gutter="20" style="margin-top: 20px">
+                <el-col :span="12">
+                  <el-card shadow="hover">
+                    <h3>在线时长排行</h3>
+                    <div ref="onlineTime" class="chart-placeholder"></div>
+                  </el-card>
+                </el-col>
+                <el-col :span="12">
+                  <el-card shadow="hover">
+                    <h3>告警数量排行</h3>
+                    <div ref="alarmNum" class="chart-placeholder"></div>
+                  </el-card>
+                </el-col>
+              </el-row>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="6">
               <el-card shadow="hover">
-                <h3>告警数量排行</h3>
-                <div ref="alarmNum" class="chart-placeholder"></div>
+                <h3>告警清单</h3>
+                <el-table v-loading="loading" :data="alarmList" row-key="id">
+                  <el-table-column label="设备名称" align="left" prop="deviceName" width="100" :show-overflow-tooltip="true" />
+                  <el-table-column label="告警等级" align="center" prop="errorLevel" width="80">
+                    <template #default="scope">
+                      <dict-tag :options="smsb_device_error_level" :value="scope.row.errorLevel" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="告警类型" align="center" prop="errorType" width="80">
+                    <template #default="scope">
+                      <dict-tag :options="smsb_device_error_type" :value="scope.row.errorType"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="创建时间" align="left" prop="createTime" width="160"/>
+                </el-table>
               </el-card>
             </el-col>
           </el-row>
-        </el-col>
-        <el-col :span="6">
-          <el-card shadow="hover">
-            <h3>告警清单</h3>
-            <el-table v-loading="loading" :data="alarmList" row-key="id">
-              <el-table-column label="设备名称" align="left" prop="deviceName" width="100" :show-overflow-tooltip="true" />
-              <el-table-column label="告警等级" align="center" prop="errorLevel" width="80">
-                <template #default="scope">
-                  <dict-tag :options="smsb_device_error_level" :value="scope.row.errorLevel" />
-                </template>
-              </el-table-column>
-              <el-table-column label="告警类型" align="center" prop="errorType" width="80">
-                <template #default="scope">
-                  <dict-tag :options="smsb_device_error_type" :value="scope.row.errorType" />
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" align="left" prop="createTime" width="160" />
-            </el-table>
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+        </el-main>
+      </el-container>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 // console.log('[device.vue] setup called');
-import { reactive } from 'vue';
-import { deviceStatistics } from '@/api/smsb/device/device';
+import {reactive} from 'vue';
+import {deviceStatistics} from '@/api/smsb/device/device';
 import * as echarts from 'echarts';
-import { DeviceErrorRecordQuery, DeviceErrorRecordVO } from '@/api/smsb/device/errorRecord_type';
-import { alarmCountByLevel, alarmCountByType, alarmNumTop, listDeviceErrorRecord, onlineTimeTop } from '@/api/smsb/device/errorRecord';
+import {DeviceErrorRecordQuery, DeviceErrorRecordVO} from '@/api/smsb/device/errorRecord_type';
+import {
+  alarmCountByLevel,
+  alarmCountByType,
+  alarmNumTop,
+  listDeviceErrorRecord,
+  onlineTimeTop
+} from '@/api/smsb/device/errorRecord';
 
 const alarmList = ref<DeviceErrorRecordVO[]>([]);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { smsb_device_error_level, smsb_device_error_type } = toRefs<any>(proxy?.useDict('smsb_device_error_level', 'smsb_device_error_type'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {
+  smsb_device_error_level,
+  smsb_device_error_type
+} = toRefs<any>(proxy?.useDict('smsb_device_error_level', 'smsb_device_error_type'));
 const total = ref(0);
 const loading = ref(true);
 const timeRadio = ref('week');
@@ -108,6 +124,7 @@ const alarmLevel = ref();
 const alarmCount = ref();
 const alarmNum = ref();
 const onlineTime = ref();
+const diyFlag = ref(true);
 const dialogData = reactive<DialogPageData<DeviceErrorRecordQuery>>({
   dialogQueryParams: {
     pageNum: 1,
@@ -136,14 +153,23 @@ const handleDateRangeChange = () => {
       break;
     case 'week':
       startDate.setDate(today.getDate() - 7);
+      dateRange.value = [formatDate(startDate), formatDate(endDate)];
+      diyFlag.value = true;
       break;
     case 'month':
       startDate.setMonth(today.getMonth() - 1);
+      dateRange.value = [formatDate(startDate), formatDate(endDate)];
+      diyFlag.value = true;
+      break;
+    case "diy" :
+      diyFlag.value = false;
+      dateRange.value = [formatDate(new Date(dateRange.value[0])), formatDate(new Date(dateRange.value[1]))];
       break;
     default:
-      throw new Error('Invalid range type');
+      break;
+    // throw new Error('Invalid range type');
   }
-  dateRange.value = [formatDate(startDate), formatDate(endDate)];
+  console.log(dateRange.value);
   alarmCountData();
   getAlarmLevel();
   getAlarmNumTop();
@@ -425,10 +451,6 @@ onMounted(() => {
   handleDateRangeChange();
   getDeviceStatistics();
   getAlarmList();
-  alarmCountData();
-  getAlarmLevel();
-  getAlarmNumTop();
-  getOnlineTimeTop();
 });
 </script>
 
@@ -459,4 +481,9 @@ onMounted(() => {
   /*background: #f5f5f5;*/
   border-radius: 8px;
 }
+
+.play-dashboard-root {
+  height: 100vh;
+  overflow-y: auto;
+}
 </style>