diff --git a/src/views/main/monitor/components/LiveBroadcastItem.vue b/src/views/main/monitor/components/LiveBroadcastItem.vue
index 68f6a0b4..006ffe09 100644
--- a/src/views/main/monitor/components/LiveBroadcastItem.vue
+++ b/src/views/main/monitor/components/LiveBroadcastItem.vue
@@ -15,6 +15,7 @@
     <div class="px-10px">
       <div class="flex justify-end py-4px">
         <a-switch
+          v-if="recommend"
           checked-children="推荐开"
           un-checked-children="推荐关"
           v-model:checked="checked"
@@ -50,6 +51,10 @@
       url: {
         type: String,
       },
+      recommend: {
+        type: Boolean,
+        default: true,
+      },
     },
     setup(props) {
       let player: any | null = null
diff --git a/src/views/main/monitor/components/Playback.vue b/src/views/main/monitor/components/Playback.vue
index ef7f1c04..385b1213 100644
--- a/src/views/main/monitor/components/Playback.vue
+++ b/src/views/main/monitor/components/Playback.vue
@@ -1,31 +1,46 @@
 <template>
   <div>
-    <BasicForm
-      autoFocusFirstItem
-      :labelWidth="0"
-      :schemas="schemas"
-      :rowProps="{ gutter: [16, 0] }"
-      :showActionButtonGroup="false"
-    />
+    <BasicForm @register="registerForm" />
     <List
-      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 1 }"
-      :data-source="data"
+      :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 />
+          <LiveBroadcastItem :recommend="false" :url="socketUrl" :item="item" />
         </List-item>
       </template>
     </List>
+    <div class="text-right">
+      <a-pagination
+        size="small"
+        v-model:current="pageCurrent"
+        v-model:page-size="pageSize"
+        :total="pageTotal"
+        show-less-items
+        showSizeChanger
+        :pageSizeOptions="['8']"
+        :show-total="(total) => `共 ${total} 条数据`"
+        @change="getData"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
-  import { List } from 'ant-design-vue';
-  import { ColEx } from '/@/components/Form/src/types';
-  import LiveBroadcastItem from './LiveBroadcastItem.vue';
+  import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
+  import { List, Pagination } from 'ant-design-vue'
+  import { ColEx } from '/@/components/Form/src/types'
+  import LiveBroadcastItem from './LiveBroadcastItem.vue'
+  import { formatDataByObject } from '/@/utils/index'
+  import { getffmpegip } from '/@/api/sys/other'
+  import dayjs from 'dayjs'
+  import {
+    getGriculturalDeviceBasic,
+    getaGriculturalDevicePoint,
+    getDevices,
+  } from '/@/api/sys/user'
   const colProps: Partial<ColEx> = {
     xs: 24,
     sm: 12,
@@ -33,105 +48,78 @@
     lg: 6,
     xl: 6,
     xxl: 4,
-  };
+  }
   const schemas: FormSchema[] = [
     {
-      field: 'field1',
-      component: 'Select',
+      field: 'base',
+      component: 'ApiSelect',
       label: '',
       colProps,
-      componentProps: {
-        placeholder: '基地',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
+      componentProps: ({ formActionType }) => {
+        return {
+          placeholder: '基地',
+          allowClear: false,
+          api: getGriculturalDeviceBasic,
+          params: {
+            device_type: 1,
           },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
+          labelField: 'name',
+          valueField: 'id',
+          onOptionsChange: (options) => {
+            const { setFieldsValue } = formActionType
+            setFieldsValue({
+              base: options[0].value,
+            })
+          },
+        }
       },
     },
     {
-      field: 'field1',
-      component: 'Select',
+      field: 'point',
+      component: 'ApiSelect',
       label: '',
       colProps,
-      componentProps: {
-        placeholder: '检测点',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
+      componentProps: ({ formModel, formActionType }) => {
+        return {
+          placeholder: '',
+          allowClear: false,
+          api: async (e) => {
+            if (e.agricultural_basic == null) return []
+            const resData = await getaGriculturalDevicePoint(e)
+            return formatDataByObject(resData)
           },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'time',
-      component: 'RangePicker',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: ['开始日期', '结束日期'],
-      },
-    },
-    {
-      field: 'disclosure',
-      component: 'RadioButtonGroup',
-      label: '',
-      colProps: colProps,
-      componentProps: {
-        options: [
-          {
-            label: '今天',
-            value: '1',
-          },
-          {
-            label: '近一周',
-            value: '2',
-          },
-          {
-            label: '近一个月',
-            value: '3',
-          },
-        ],
-      },
-    },
-  ];
+          onOptionsChange: (options) => {
+            const { setFieldsValue } = formActionType
 
-  interface DataItem {
-    title: string;
-  }
-  const data: DataItem[] = [
-    {
-      title: 'Title 1',
+            if (options.length)
+              setFieldsValue({
+                point: options[0].value,
+              })
+          },
+          params: {
+            device_type: 1,
+            agricultural_basic: formModel.base,
+          },
+          labelField: 'label',
+          valueField: 'label',
+        }
+      },
     },
     {
-      title: 'Title 2',
+      field: '[start_time, end_time]',
+      label: '',
+      component: 'RangePicker',
+      required: true,
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: ['开始时间', '结束时间'],
+        disabledDate: (current) => {
+          return current && current > dayjs().endOf('day')
+        },
+      },
+      colProps,
     },
-    {
-      title: 'Title 3',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-  ];
+  ]
 
   export default defineComponent({
     components: {
@@ -139,14 +127,76 @@
       List,
       ListItem: List.Item,
       LiveBroadcastItem,
+      [Pagination.name]: Pagination,
     },
+
     setup() {
-      return {
+      const paginationParams = reactive({
+        pageCurrent: 1,
+        pageTotal: 0,
+        pageSize: 8,
+      })
+
+      const list = ref([])
+      const socketUrl = ref<String | null>(null)
+
+      const [registerForm, { validate, getFieldsValue }] = useForm({
         schemas,
-        data,
-      };
+        autoFocusFirstItem: true,
+        labelWidth: 0,
+        rowProps: { gutter: [16, 0] },
+        showActionButtonGroup: true,
+        submitOnChange: false,
+        autoSubmitOnEnter: false,
+
+        submitFunc: getData,
+      })
+
+      async function getData() {
+        if (!socketUrl.value) {
+          const { ip, port } = await getffmpegip()
+          socketUrl.value = `${ip}:${port}`
+        }
+        await validate()
+        const params = getFieldsValue()
+
+        const { meta, data } = await getDevices({
+          ...params,
+          status: 1,
+          type: 1,
+          per_page: paginationParams.pageSize,
+          page: paginationParams.pageCurrent,
+        })
+
+        paginationParams.pageTotal = meta.total
+
+        list.value = data.reduce((acc, cur) => {
+          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(
+            'YYYY_MM_DD_HH_mm_ss',
+          )}`
+          console.log(cur.extends.rtsp_url)
+
+          acc.push(cur)
+          return acc
+        }, [])
+      }
+
+      onMounted(() => {
+        // getData()
+      })
+
+      return {
+        list,
+        socketUrl,
+        getData,
+        registerForm,
+        ...toRefs(paginationParams),
+      }
     },
-  });
+  })
 </script>
 
 <style scoped></style>