Merge branch 'ww' into 'main'

feat: add up and down record jump online record page

See merge request huang/yun-teng-iot-front!465

@@ -244,7 +244,6 @@
     // selectedTotal.value = unref(selectedRowKeys).length;
     pendingTotal.value = unref(pendingTotal) - currentPageSelectRows.length;
     selectedTotal.value = unref(selectedTotal) + currentPageSelectRows.length;
-    console.log(unref(pendingTotal));
 
     clearPendingSelectedRowKeys();
     handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows));

 <script setup lang="ts">
-  import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
-  import { ReloadOutlined, AppstoreOutlined } from '@ant-design/icons-vue';
+  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
@@ -21,7 +21,7 @@
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { AuthIcon } from '/@/components/Widget';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
 
   const listColumn = ref(5);
@@ -34,6 +34,7 @@
     size: 'small',
     showTotal: (total: number) => `共 ${total} 条数据`,
     current: 1,
+    pageSize: unref(listColumn) * 2,
     onChange: (page: number) => {
       pagination.current = page;
       getListData();
@@ -63,16 +64,16 @@
   async function getListData(value: Recordable = {}) {
     try {
       loading.value = true;
-      const pageSize = 4 * unref(listColumn);
+      const pageSize = unref(listColumn) * 2;
       const { items, total } = await getPage({
         organizationId: unref(organizationId),
         ...value,
         page: pagination.current!,
         pageSize,
       });
+
       dataSource.value = items;
-      pagination.total = total;
-      pagination.pageSize = pageSize;
+      Object.assign(pagination, { total, pageSize });
     } catch (error) {
     } finally {
       loading.value = false;
@@ -138,6 +139,11 @@
     } catch (error) {}
   };
 
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
   const listEl = ref<Nullable<ComponentElRef>>(null);
 
   onMounted(() => {
@@ -180,23 +186,7 @@
             <Authority :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
             </Authority>
-            <Popover :trigger="['hover']">
-              <template #content>
-                <div class="w-50">
-                  <div>每行显示数量</div>
-                  <Slider
-                    v-model:value="listColumn"
-                    :max="12"
-                    :min="4"
-                    :marks="{ 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 }"
-                    @change="getListData"
-                  />
-                </div>
-              </template>
-              <Button type="primary">
-                <AppstoreOutlined />
-              </Button>
-            </Popover>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <Tooltip title="刷新">
               <Button type="primary" @click="getListData">
                 <ReloadOutlined @click="getListData" />
@@ -256,28 +246,6 @@
                   ]"
                   :trigger="['hover']"
                 />
-                <!-- <Dropdown
-                  :dropMenuList="[
-                    {
-                      text: '编辑',
-                      auth: ConfigurationPermission.UPDATE,
-                      icon: 'clarity:note-edit-line',
-                      event: '',
-                      onClick: handleCreateOrUpdate.bind(null, item),
-                    },
-                    {
-                      text: '删除',
-                      auth: ConfigurationPermission.DELETE,
-                      icon: 'ant-design:delete-outlined',
-                      color: 'error',
-                      event: '',
-                      onClick: handleDelete.bind(null, item),
-                    },
-                  ]"
-                  :trigger="['hover']"
-                >
-                  <EllipsisOutlined key="ellipsis" />
-                </Dropdown> -->
               </template>
               <Card.Meta>
                 <template #title>
@@ -308,6 +276,10 @@
     height: 24px;
   }
 
+  .configuration-list:deep(.ant-card-body) {
+    padding: 16px !important;
+  }
+
   .configuration-list:deep(.ant-list-empty-text) {
     @apply w-full h-full flex justify-center items-center;
   }

@@ -135,6 +135,11 @@
                     onClick: handleDispatchCustomer.bind(null, record),
                   },
               {
+                label: '上下线记录',
+                icon: 'ant-design:rise-outlined',
+                onClick: handleUpAndDownRecord.bind(null, record),
+              },
+              {
                 label: '删除',
                 auth: 'api:yt:device:delete',
                 icon: 'ant-design:delete-outlined',
@@ -193,6 +198,7 @@
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import { Authority } from '/@/components/Authority';
+  import { useRouter } from 'vue-router';
 
   export default defineComponent({
     name: 'DeviceManagement',
@@ -215,6 +221,7 @@
     setup(_) {
       const { createMessage } = useMessage();
       const go = useGo();
+      const ROUTER = useRouter();
       const immediateStatus = ref(false);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
@@ -405,6 +412,13 @@
         openGatewayDetailDrawer(true, data);
       };
 
+      const handleUpAndDownRecord = (record: Record<'name', string>) => {
+        ROUTER.push({
+          path: '/operation/onlinerecord',
+          query: { deviceName: record.name },
+        });
+      };
+
       return {
         registerTable,
         handleCreate,
@@ -432,6 +446,7 @@
         handleOpenTbDeviceDetail,
         handleOpenGatewayDetail,
         registerGatewayDetailDrawer,
+        handleUpAndDownRecord,
       };
     },
   });

@@ -62,10 +62,13 @@
 
   const loading = ref(false);
 
+  const colNumber = ref(5);
+
   const pagination = reactive<PaginationProps>({
     size: 'small',
     showTotal: (total: number) => `共 ${total} 条数据`,
     current: 1,
+    pageSize: unref(colNumber) * 2,
     onChange: (page: number) => {
       pagination.current = page;
       getDataSource();
@@ -74,8 +77,6 @@
 
   const dataSource = ref<ProfileRecord[]>([]);
 
-  const colNumber = ref(5);
-
   const getSelectAllFlag = computed(() => {
     return unref(dataSource).every((item) => item.checked);
   });
@@ -93,13 +94,14 @@
         setFieldsValue(otherParams);
       }
       const params = getFieldsValue();
+      const pageSize = unref(colNumber) * 2;
       const { items, total } = await deviceConfigGetQuery({
         page: pagination.current,
         pageSize: unref(colNumber) * 2,
         ...params,
         ...otherParams,
       });
-      pagination.total = total;
+      Object.assign(pagination, { total, pageSize });
       dataSource.value = items.map((item) => ({ ...item, checked: false }));
     } catch (error) {
     } finally {
@@ -162,6 +164,12 @@
       throw error;
     }
   };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getDataSource();
+  };
+
   const { query: routeParams } = useRoute();
   onMounted(() => {
     getDataSource(routeParams);
@@ -204,7 +212,7 @@
             </Authority>
 
             <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
-            <CardLayoutButton v-model:value="colNumber" @change="getDataSource" />
+            <CardLayoutButton v-model:value="colNumber" @change="handleCardLayoutChange" />
 
             <Tooltip title="刷新">
               <Button type="primary" @click="getDataSource">

@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { nextTick } from 'vue';
+  import { nextTick, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import OnlineRecordDrawer from './OnlineRecordDrawer.vue';
@@ -58,9 +58,11 @@
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Authority } from '/@/components/Authority';
+  import { useRoute } from 'vue-router';
 
-  const [registerTable, { setProps, reload }] = useTable({
+  const [registerTable, { setProps, reload, getForm }] = useTable({
     title: '上下线记录',
+    immediate: false,
     api: deviceStateLogPage,
     columns,
     showIndexColumn: false,
@@ -117,4 +119,14 @@
       record,
     });
   };
+  const ROUTE = useRoute();
+
+  onMounted(async () => {
+    const formActionType = getForm();
+    const params = ROUTE.query;
+    if (params) {
+      await formActionType.setFieldsValue(params);
+    }
+    await reload();
+  });
 </script>

@@ -70,8 +70,8 @@ const handleGroupDevice = (options: DeviceRecord[]) => {
     }
   });
   const value = Array.from(map.entries()).map(([product, devices]) => ({ product, devices }));
-  console.log(value);
-  return Array.from(map.entries()).map(([product, devices]) => ({ product, devices }));
+
+  return value;
 };
 
 const deviceTableFormSchema: FormSchema[] = [