修改

src/views/main/monitor/components/LiveBroadcast.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
     <BasicForm @register="registerForm" />
-    <List
-      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 8 }"
-      :data-source="list"
-    >
-      <template #renderItem="{ item }">
-        <List-item>
-          <LiveBroadcastItem :url="socketUrl" :item="item" />
-        </List-item>
-      </template>
-    </List>
+    <div class="min-h-400px">
+      <List
+        :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 8 }"
+        :data-source="list"
+      >
+        <template #renderItem="{ item }">
+          <List-item>
+            <LiveBroadcastItem :url="socketUrl" :item="item" />
+          </List-item>
+        </template>
+      </List>
+    </div>
+
     <div class="text-right">
       <a-pagination
         size="small"

src/views/main/monitor/components/Playback.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
     <BasicForm @register="registerForm" />
-    <List
-      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 8 }"
-      :data-source="list"
-    >
-      <template #renderItem="{ item }">
-        <List-item>
-          <LiveBroadcastItem :recommend="false" :url="socketUrl" :item="item" />
-        </List-item>
-      </template>
-    </List>
+    <div class="min-h-400px">
+      <List
+        :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 8 }"
+        :data-source="list"
+      >
+        <template #renderItem="{ item }">
+          <List-item>
+            <LiveBroadcastItem :recommend="false" :url="socketUrl" :item="item" />
+          </List-item>
+        </template>
+      </List>
+    </div>
+
     <div class="text-right">
       <a-pagination
         size="small"
@@ -111,7 +114,10 @@
       component: 'RangePicker',
       required: true,
       componentProps: {
-        format: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm',
+        showTime: {
+          format: 'HH:mm',
+        },
         placeholder: ['开始时间', '结束时间'],
         disabledDate: (current) => {
           return current && current > dayjs().endOf('day')
@@ -174,7 +180,7 @@
           const { username, password, ip, passage } = cur.extends
           cur.extends.rtsp_url = `rtsp://${username}:${password}@${ip}:9200/cam/playback?channel=${passage}&subtype=0&starttime=${dayjs(
             params.start_time,
-          ).format('YYYY_MM_DD_HH_mm_ss')}&endtime=${dayjs(params.start_time).format(
+          ).format('YYYY_MM_DD_HH_mm_ss')}&endtime=${dayjs(params.end_time).format(
             'YYYY_MM_DD_HH_mm_ss',
           )}`
           console.log(cur.extends.rtsp_url)

src/views/main/monitor/index.vue

@@ -5,11 +5,9 @@
         <template v-for="item in achieveList" :key="item.key">
           <a-tab-pane>
             <template #tab>
-              <span>
-                <component :is="item.iconComponent" />
-                {{ item.name }}</span
-              >
+              <span> {{ item.name }}</span>
             </template>
+
             <component :is="item.component" />
           </a-tab-pane>
         </template>