监控

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

@@ -1,31 +1,43 @@
 <template>
   <div>
-    <BasicForm
+    <BasicForm @register="registerForm" />
-      autoFocusFirstItem
-      :labelWidth="0"
-      :schemas="schemas"
-      :rowProps="{ gutter: [16, 0] }"
-      :showActionButtonGroup="false"
-    />
     <List
       :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5, column: 1 }"
-      :data-source="data"
+      :data-source="list"
     >
       <template #renderItem="{ item }">
         <List-item>
-          <LiveBroadcastItem />
+          <LiveBroadcastItem :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
+        :show-total="(total) => `共 ${total} 条数据`"
+        @change="getData"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
-  import { List } from 'ant-design-vue';
+  import { List, Pagination } from 'ant-design-vue'
-  import { ColEx } from '/@/components/Form/src/types';
+  import { ColEx } from '/@/components/Form/src/types'
-  import LiveBroadcastItem from './LiveBroadcastItem.vue';
+  import LiveBroadcastItem from './LiveBroadcastItem.vue'
+  import { formatDataByObject } from '/@/utils/index'
+  import {
+    getGriculturalDeviceBasic,
+    getaGriculturalDevicePoint,
+    getDevices,
+  } from '/@/api/sys/user'
   const colProps: Partial<ColEx> = {
     xs: 24,
     sm: 12,
@@ -33,74 +45,63 @@
     lg: 6,
     xl: 6,
     xxl: 4,
-  };
+  }
   const schemas: FormSchema[] = [
     {
-      field: 'field1',
+      field: 'base',
-      component: 'Select',
+      component: 'ApiSelect',
       label: '',
       colProps,
-      componentProps: {
+      componentProps: ({ formModel, formActionType }) => {
-        placeholder: '基地',
+        return {
-        options: [
+          placeholder: '基地',
-          {
+          allowClear: false,
-            label: '选项2',
+          api: getGriculturalDeviceBasic,
-            value: '1',
+          params: {
-            key: '1',
+            device_type: 1,
           },
-        ],
+          labelField: 'name',
-        onChange: (e: any) => {
+          valueField: 'id',
-          console.log(e);
+          // onOptionsChange: (options) => {
-        },
+          //   const { setFieldsValue } = formActionType
+          //   setFieldsValue({
+          //     base: options[0].value,
+          //   })
+          // },
+          onChange: (e: any) => {
+            formModel.point = undefined
+            if (!e) return
+            const { updateSchema } = formActionType
+            updateSchema({
+              field: 'point',
+              componentProps: {
+                api: async (e) => {
+                  const resData = await getaGriculturalDevicePoint(e)
+                  return formatDataByObject(resData)
+                },
+                params: {
+                  device_type: 4,
+                  agricultural_basic: e,
+                },
+                labelField: 'label',
+                valueField: 'value',
+              },
+            })
+          },
+        }
       },
     },
     {
-      field: 'field1',
+      field: 'point',
-      component: 'Select',
+      component: 'ApiSelect',
       label: '',
       colProps,
       componentProps: {
+        allowClear: false,
         placeholder: '检测点',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
-          },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
       },
     },
-  ];
+  ]
-
-  interface DataItem {
-    title: string;
-  }
-  const data: DataItem[] = [
-    {
-      title: 'Title 1',
-    },
-    {
-      title: 'Title 2',
-    },
-    {
-      title: 'Title 3',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-    {
-      title: 'Title 4',
-    },
-  ];
 
   export default defineComponent({
     components: {
@@ -108,14 +109,55 @@
       List,
       ListItem: List.Item,
       LiveBroadcastItem,
+      [Pagination.name]: Pagination,
     },
+
     setup() {
-      return {
+      const paginationParams = reactive({
+        pageCurrent: 1,
+        pageTotal: 5000,
+        pageSize: 10,
+      })
+
+      const list = ref([])
+
+      const [registerForm, { setFieldsValue, validate }] = useForm({
         schemas,
-        data,
+        autoFocusFirstItem: true,
-      };
+        labelWidth: 0,
+        rowProps: { gutter: [16, 0] },
+        showActionButtonGroup: false,
+        submitOnChange: true,
+        autoSubmitOnEnter: true,
+
+        submitFunc: getData,
+      })
+
+      async function getData() {
+        const params = await validate()
+        const { meta, data } = await getDevices({
+          ...params,
+          status: 1,
+          type: 1,
+          per_page: paginationParams.pageSize,
+          page: paginationParams.pageCurrent,
+        })
+        paginationParams.pageTotal = meta.total
+        list.value = data
+      }
+
+      onMounted(() => {
+        getData()
+      })
+
+      return {
+        list,
+        getData,
+        registerForm,
+        ...toRefs(paginationParams),
+      }
     },
-  });
+  })
 </script>
 
 <style scoped></style>

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

@@ -5,21 +5,29 @@
         <div class="absolute left-0 w-full top-0 h-full"> </div>
       </div>
     </template>
-    <div class=""> 胡家镇景兴稻虾养殖农民专业合作社-监控点10 </div>
+    <div class="">{{ item.base_name }} </div>
   </Card>
 </template>
 
 <script lang="ts">
-  import { Card } from 'ant-design-vue';
+  import { Card } from 'ant-design-vue'
-  import { defineComponent } from 'vue';
+  import { defineComponent } from 'vue'
   export default defineComponent({
     components: {
       Card,
     },
-    setup() {
+    props: {
-      return {};
+      item: {
+        type: Object,
+        default: () => {},
+      },
     },
-  });
+    setup(props) {
+      return {
+        data: props.item,
+      }
+    },
+  })
 </script>
 
 <style lang="less" scoped>

src/views/main/monitor/index.vue

@@ -19,17 +19,17 @@
 </template>
 
 <script lang="ts">
-  import { VideoCameraOutlined, PlayCircleOutlined } from '@ant-design/icons-vue';
+  import { VideoCameraOutlined, PlayCircleOutlined } from '@ant-design/icons-vue'
-  import { PageWrapper } from '/@/components/Page';
+  import { PageWrapper } from '/@/components/Page'
-  import { Card, Tabs } from 'ant-design-vue';
+  import { Card, Tabs } from 'ant-design-vue'
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref } from 'vue'
-  import LiveBroadcast from './components/LiveBroadcast.vue';
+  import LiveBroadcast from './components/LiveBroadcast.vue'
-  import Playback from './components/Playback.vue';
+  import Playback from './components/Playback.vue'
   export interface TabItem {
-    key: string;
+    key: string
-    name: string;
+    name: string
-    component: string;
+    component: string
-    iconComponent: string;
+    iconComponent: string
   }
   const achieveList: TabItem[] = [
     {
@@ -44,7 +44,7 @@
       component: 'Playback',
       iconComponent: 'PlayCircleOutlined',
     },
-  ];
+  ]
   export default defineComponent({
     components: {
       [Card.name]: Card,
@@ -60,9 +60,9 @@
       return {
         achieveList,
         activeKey: ref('1'),
-      };
+      }
     },
-  });
+  })
 </script>
 
 <style scoped></style>

src/views/visualization/components/SBYXZT.vue

@@ -157,9 +157,8 @@
       async function getData() {
         const resData = await getDevicesNum({
           base_id: props.baseId ?? (Data.currentTab == -99 ? null : Data.currentTab),
+          parent: visualizationStore.getAddresId,
         })
-        console.log(resData)
-
         Object.keys(resData).map((e, index) => {
           Data.list[index].value = resData[e].slice(1)
         })