Showing
6 changed files
with
60 additions
and
54 deletions
| @@ -244,7 +244,6 @@ | @@ -244,7 +244,6 @@ | ||
| 244 | // selectedTotal.value = unref(selectedRowKeys).length; | 244 | // selectedTotal.value = unref(selectedRowKeys).length; |
| 245 | pendingTotal.value = unref(pendingTotal) - currentPageSelectRows.length; | 245 | pendingTotal.value = unref(pendingTotal) - currentPageSelectRows.length; |
| 246 | selectedTotal.value = unref(selectedTotal) + currentPageSelectRows.length; | 246 | selectedTotal.value = unref(selectedTotal) + currentPageSelectRows.length; |
| 247 | - console.log(unref(pendingTotal)); | ||
| 248 | 247 | ||
| 249 | clearPendingSelectedRowKeys(); | 248 | clearPendingSelectedRowKeys(); |
| 250 | handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows)); | 249 | handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows)); |
| 1 | <script setup lang="ts"> | 1 | <script setup lang="ts"> |
| 2 | - import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue'; | ||
| 3 | - import { ReloadOutlined, AppstoreOutlined } from '@ant-design/icons-vue'; | 2 | + import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue'; |
| 3 | + import { ReloadOutlined } from '@ant-design/icons-vue'; | ||
| 4 | import { computed, onMounted, reactive, ref, unref } from 'vue'; | 4 | import { computed, onMounted, reactive, ref, unref } from 'vue'; |
| 5 | import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree'; | 5 | import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree'; |
| 6 | import { | 6 | import { |
| @@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
| 21 | import { cloneDeep } from 'lodash'; | 21 | import { cloneDeep } from 'lodash'; |
| 22 | import { usePermission } from '/@/hooks/web/usePermission'; | 22 | import { usePermission } from '/@/hooks/web/usePermission'; |
| 23 | import { useGlobSetting } from '/@/hooks/setting'; | 23 | import { useGlobSetting } from '/@/hooks/setting'; |
| 24 | - import { AuthIcon } from '/@/components/Widget'; | 24 | + import { AuthIcon, CardLayoutButton } from '/@/components/Widget'; |
| 25 | import AuthDropDown from '/@/components/Widget/AuthDropDown.vue'; | 25 | import AuthDropDown from '/@/components/Widget/AuthDropDown.vue'; |
| 26 | 26 | ||
| 27 | const listColumn = ref(5); | 27 | const listColumn = ref(5); |
| @@ -34,6 +34,7 @@ | @@ -34,6 +34,7 @@ | ||
| 34 | size: 'small', | 34 | size: 'small', |
| 35 | showTotal: (total: number) => `共 ${total} 条数据`, | 35 | showTotal: (total: number) => `共 ${total} 条数据`, |
| 36 | current: 1, | 36 | current: 1, |
| 37 | + pageSize: unref(listColumn) * 2, | ||
| 37 | onChange: (page: number) => { | 38 | onChange: (page: number) => { |
| 38 | pagination.current = page; | 39 | pagination.current = page; |
| 39 | getListData(); | 40 | getListData(); |
| @@ -63,16 +64,16 @@ | @@ -63,16 +64,16 @@ | ||
| 63 | async function getListData(value: Recordable = {}) { | 64 | async function getListData(value: Recordable = {}) { |
| 64 | try { | 65 | try { |
| 65 | loading.value = true; | 66 | loading.value = true; |
| 66 | - const pageSize = 4 * unref(listColumn); | 67 | + const pageSize = unref(listColumn) * 2; |
| 67 | const { items, total } = await getPage({ | 68 | const { items, total } = await getPage({ |
| 68 | organizationId: unref(organizationId), | 69 | organizationId: unref(organizationId), |
| 69 | ...value, | 70 | ...value, |
| 70 | page: pagination.current!, | 71 | page: pagination.current!, |
| 71 | pageSize, | 72 | pageSize, |
| 72 | }); | 73 | }); |
| 74 | + | ||
| 73 | dataSource.value = items; | 75 | dataSource.value = items; |
| 74 | - pagination.total = total; | ||
| 75 | - pagination.pageSize = pageSize; | 76 | + Object.assign(pagination, { total, pageSize }); |
| 76 | } catch (error) { | 77 | } catch (error) { |
| 77 | } finally { | 78 | } finally { |
| 78 | loading.value = false; | 79 | loading.value = false; |
| @@ -138,6 +139,11 @@ | @@ -138,6 +139,11 @@ | ||
| 138 | } catch (error) {} | 139 | } catch (error) {} |
| 139 | }; | 140 | }; |
| 140 | 141 | ||
| 142 | + const handleCardLayoutChange = () => { | ||
| 143 | + pagination.current = 1; | ||
| 144 | + getListData(); | ||
| 145 | + }; | ||
| 146 | + | ||
| 141 | const listEl = ref<Nullable<ComponentElRef>>(null); | 147 | const listEl = ref<Nullable<ComponentElRef>>(null); |
| 142 | 148 | ||
| 143 | onMounted(() => { | 149 | onMounted(() => { |
| @@ -180,23 +186,7 @@ | @@ -180,23 +186,7 @@ | ||
| 180 | <Authority :value="ConfigurationPermission.CREATE"> | 186 | <Authority :value="ConfigurationPermission.CREATE"> |
| 181 | <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button> | 187 | <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button> |
| 182 | </Authority> | 188 | </Authority> |
| 183 | - <Popover :trigger="['hover']"> | ||
| 184 | - <template #content> | ||
| 185 | - <div class="w-50"> | ||
| 186 | - <div>每行显示数量</div> | ||
| 187 | - <Slider | ||
| 188 | - v-model:value="listColumn" | ||
| 189 | - :max="12" | ||
| 190 | - :min="4" | ||
| 191 | - :marks="{ 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12 }" | ||
| 192 | - @change="getListData" | ||
| 193 | - /> | ||
| 194 | - </div> | ||
| 195 | - </template> | ||
| 196 | - <Button type="primary"> | ||
| 197 | - <AppstoreOutlined /> | ||
| 198 | - </Button> | ||
| 199 | - </Popover> | 189 | + <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" /> |
| 200 | <Tooltip title="刷新"> | 190 | <Tooltip title="刷新"> |
| 201 | <Button type="primary" @click="getListData"> | 191 | <Button type="primary" @click="getListData"> |
| 202 | <ReloadOutlined @click="getListData" /> | 192 | <ReloadOutlined @click="getListData" /> |
| @@ -256,28 +246,6 @@ | @@ -256,28 +246,6 @@ | ||
| 256 | ]" | 246 | ]" |
| 257 | :trigger="['hover']" | 247 | :trigger="['hover']" |
| 258 | /> | 248 | /> |
| 259 | - <!-- <Dropdown | ||
| 260 | - :dropMenuList="[ | ||
| 261 | - { | ||
| 262 | - text: '编辑', | ||
| 263 | - auth: ConfigurationPermission.UPDATE, | ||
| 264 | - icon: 'clarity:note-edit-line', | ||
| 265 | - event: '', | ||
| 266 | - onClick: handleCreateOrUpdate.bind(null, item), | ||
| 267 | - }, | ||
| 268 | - { | ||
| 269 | - text: '删除', | ||
| 270 | - auth: ConfigurationPermission.DELETE, | ||
| 271 | - icon: 'ant-design:delete-outlined', | ||
| 272 | - color: 'error', | ||
| 273 | - event: '', | ||
| 274 | - onClick: handleDelete.bind(null, item), | ||
| 275 | - }, | ||
| 276 | - ]" | ||
| 277 | - :trigger="['hover']" | ||
| 278 | - > | ||
| 279 | - <EllipsisOutlined key="ellipsis" /> | ||
| 280 | - </Dropdown> --> | ||
| 281 | </template> | 249 | </template> |
| 282 | <Card.Meta> | 250 | <Card.Meta> |
| 283 | <template #title> | 251 | <template #title> |
| @@ -308,6 +276,10 @@ | @@ -308,6 +276,10 @@ | ||
| 308 | height: 24px; | 276 | height: 24px; |
| 309 | } | 277 | } |
| 310 | 278 | ||
| 279 | + .configuration-list:deep(.ant-card-body) { | ||
| 280 | + padding: 16px !important; | ||
| 281 | + } | ||
| 282 | + | ||
| 311 | .configuration-list:deep(.ant-list-empty-text) { | 283 | .configuration-list:deep(.ant-list-empty-text) { |
| 312 | @apply w-full h-full flex justify-center items-center; | 284 | @apply w-full h-full flex justify-center items-center; |
| 313 | } | 285 | } |
| @@ -135,6 +135,11 @@ | @@ -135,6 +135,11 @@ | ||
| 135 | onClick: handleDispatchCustomer.bind(null, record), | 135 | onClick: handleDispatchCustomer.bind(null, record), |
| 136 | }, | 136 | }, |
| 137 | { | 137 | { |
| 138 | + label: '上下线记录', | ||
| 139 | + icon: 'ant-design:rise-outlined', | ||
| 140 | + onClick: handleUpAndDownRecord.bind(null, record), | ||
| 141 | + }, | ||
| 142 | + { | ||
| 138 | label: '删除', | 143 | label: '删除', |
| 139 | auth: 'api:yt:device:delete', | 144 | auth: 'api:yt:device:delete', |
| 140 | icon: 'ant-design:delete-outlined', | 145 | icon: 'ant-design:delete-outlined', |
| @@ -193,6 +198,7 @@ | @@ -193,6 +198,7 @@ | ||
| 193 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; | 198 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; |
| 194 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; | 199 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
| 195 | import { Authority } from '/@/components/Authority'; | 200 | import { Authority } from '/@/components/Authority'; |
| 201 | + import { useRouter } from 'vue-router'; | ||
| 196 | 202 | ||
| 197 | export default defineComponent({ | 203 | export default defineComponent({ |
| 198 | name: 'DeviceManagement', | 204 | name: 'DeviceManagement', |
| @@ -215,6 +221,7 @@ | @@ -215,6 +221,7 @@ | ||
| 215 | setup(_) { | 221 | setup(_) { |
| 216 | const { createMessage } = useMessage(); | 222 | const { createMessage } = useMessage(); |
| 217 | const go = useGo(); | 223 | const go = useGo(); |
| 224 | + const ROUTER = useRouter(); | ||
| 218 | const immediateStatus = ref(false); | 225 | const immediateStatus = ref(false); |
| 219 | const searchInfo = reactive<Recordable>({}); | 226 | const searchInfo = reactive<Recordable>({}); |
| 220 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); | 227 | const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo); |
| @@ -405,6 +412,13 @@ | @@ -405,6 +412,13 @@ | ||
| 405 | openGatewayDetailDrawer(true, data); | 412 | openGatewayDetailDrawer(true, data); |
| 406 | }; | 413 | }; |
| 407 | 414 | ||
| 415 | + const handleUpAndDownRecord = (record: Record<'name', string>) => { | ||
| 416 | + ROUTER.push({ | ||
| 417 | + path: '/operation/onlinerecord', | ||
| 418 | + query: { deviceName: record.name }, | ||
| 419 | + }); | ||
| 420 | + }; | ||
| 421 | + | ||
| 408 | return { | 422 | return { |
| 409 | registerTable, | 423 | registerTable, |
| 410 | handleCreate, | 424 | handleCreate, |
| @@ -432,6 +446,7 @@ | @@ -432,6 +446,7 @@ | ||
| 432 | handleOpenTbDeviceDetail, | 446 | handleOpenTbDeviceDetail, |
| 433 | handleOpenGatewayDetail, | 447 | handleOpenGatewayDetail, |
| 434 | registerGatewayDetailDrawer, | 448 | registerGatewayDetailDrawer, |
| 449 | + handleUpAndDownRecord, | ||
| 435 | }; | 450 | }; |
| 436 | }, | 451 | }, |
| 437 | }); | 452 | }); |
| @@ -62,10 +62,13 @@ | @@ -62,10 +62,13 @@ | ||
| 62 | 62 | ||
| 63 | const loading = ref(false); | 63 | const loading = ref(false); |
| 64 | 64 | ||
| 65 | + const colNumber = ref(5); | ||
| 66 | + | ||
| 65 | const pagination = reactive<PaginationProps>({ | 67 | const pagination = reactive<PaginationProps>({ |
| 66 | size: 'small', | 68 | size: 'small', |
| 67 | showTotal: (total: number) => `共 ${total} 条数据`, | 69 | showTotal: (total: number) => `共 ${total} 条数据`, |
| 68 | current: 1, | 70 | current: 1, |
| 71 | + pageSize: unref(colNumber) * 2, | ||
| 69 | onChange: (page: number) => { | 72 | onChange: (page: number) => { |
| 70 | pagination.current = page; | 73 | pagination.current = page; |
| 71 | getDataSource(); | 74 | getDataSource(); |
| @@ -74,8 +77,6 @@ | @@ -74,8 +77,6 @@ | ||
| 74 | 77 | ||
| 75 | const dataSource = ref<ProfileRecord[]>([]); | 78 | const dataSource = ref<ProfileRecord[]>([]); |
| 76 | 79 | ||
| 77 | - const colNumber = ref(5); | ||
| 78 | - | ||
| 79 | const getSelectAllFlag = computed(() => { | 80 | const getSelectAllFlag = computed(() => { |
| 80 | return unref(dataSource).every((item) => item.checked); | 81 | return unref(dataSource).every((item) => item.checked); |
| 81 | }); | 82 | }); |
| @@ -93,13 +94,14 @@ | @@ -93,13 +94,14 @@ | ||
| 93 | setFieldsValue(otherParams); | 94 | setFieldsValue(otherParams); |
| 94 | } | 95 | } |
| 95 | const params = getFieldsValue(); | 96 | const params = getFieldsValue(); |
| 97 | + const pageSize = unref(colNumber) * 2; | ||
| 96 | const { items, total } = await deviceConfigGetQuery({ | 98 | const { items, total } = await deviceConfigGetQuery({ |
| 97 | page: pagination.current, | 99 | page: pagination.current, |
| 98 | pageSize: unref(colNumber) * 2, | 100 | pageSize: unref(colNumber) * 2, |
| 99 | ...params, | 101 | ...params, |
| 100 | ...otherParams, | 102 | ...otherParams, |
| 101 | }); | 103 | }); |
| 102 | - pagination.total = total; | 104 | + Object.assign(pagination, { total, pageSize }); |
| 103 | dataSource.value = items.map((item) => ({ ...item, checked: false })); | 105 | dataSource.value = items.map((item) => ({ ...item, checked: false })); |
| 104 | } catch (error) { | 106 | } catch (error) { |
| 105 | } finally { | 107 | } finally { |
| @@ -162,6 +164,12 @@ | @@ -162,6 +164,12 @@ | ||
| 162 | throw error; | 164 | throw error; |
| 163 | } | 165 | } |
| 164 | }; | 166 | }; |
| 167 | + | ||
| 168 | + const handleCardLayoutChange = () => { | ||
| 169 | + pagination.current = 1; | ||
| 170 | + getDataSource(); | ||
| 171 | + }; | ||
| 172 | + | ||
| 165 | const { query: routeParams } = useRoute(); | 173 | const { query: routeParams } = useRoute(); |
| 166 | onMounted(() => { | 174 | onMounted(() => { |
| 167 | getDataSource(routeParams); | 175 | getDataSource(routeParams); |
| @@ -204,7 +212,7 @@ | @@ -204,7 +212,7 @@ | ||
| 204 | </Authority> | 212 | </Authority> |
| 205 | 213 | ||
| 206 | <ModeSwitchButton :value="$props.mode" @change="handleModeChange" /> | 214 | <ModeSwitchButton :value="$props.mode" @change="handleModeChange" /> |
| 207 | - <CardLayoutButton v-model:value="colNumber" @change="getDataSource" /> | 215 | + <CardLayoutButton v-model:value="colNumber" @change="handleCardLayoutChange" /> |
| 208 | 216 | ||
| 209 | <Tooltip title="刷新"> | 217 | <Tooltip title="刷新"> |
| 210 | <Button type="primary" @click="getDataSource"> | 218 | <Button type="primary" @click="getDataSource"> |
| @@ -48,7 +48,7 @@ | @@ -48,7 +48,7 @@ | ||
| 48 | </template> | 48 | </template> |
| 49 | 49 | ||
| 50 | <script lang="ts" setup> | 50 | <script lang="ts" setup> |
| 51 | - import { nextTick } from 'vue'; | 51 | + import { nextTick, onMounted } from 'vue'; |
| 52 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 52 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 53 | import { useDrawer } from '/@/components/Drawer'; | 53 | import { useDrawer } from '/@/components/Drawer'; |
| 54 | import OnlineRecordDrawer from './OnlineRecordDrawer.vue'; | 54 | import OnlineRecordDrawer from './OnlineRecordDrawer.vue'; |
| @@ -58,9 +58,11 @@ | @@ -58,9 +58,11 @@ | ||
| 58 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; | 58 | import { useBatchDelete } from '/@/hooks/web/useBatchDelete'; |
| 59 | import { Popconfirm } from 'ant-design-vue'; | 59 | import { Popconfirm } from 'ant-design-vue'; |
| 60 | import { Authority } from '/@/components/Authority'; | 60 | import { Authority } from '/@/components/Authority'; |
| 61 | + import { useRoute } from 'vue-router'; | ||
| 61 | 62 | ||
| 62 | - const [registerTable, { setProps, reload }] = useTable({ | 63 | + const [registerTable, { setProps, reload, getForm }] = useTable({ |
| 63 | title: '上下线记录', | 64 | title: '上下线记录', |
| 65 | + immediate: false, | ||
| 64 | api: deviceStateLogPage, | 66 | api: deviceStateLogPage, |
| 65 | columns, | 67 | columns, |
| 66 | showIndexColumn: false, | 68 | showIndexColumn: false, |
| @@ -117,4 +119,14 @@ | @@ -117,4 +119,14 @@ | ||
| 117 | record, | 119 | record, |
| 118 | }); | 120 | }); |
| 119 | }; | 121 | }; |
| 122 | + const ROUTE = useRoute(); | ||
| 123 | + | ||
| 124 | + onMounted(async () => { | ||
| 125 | + const formActionType = getForm(); | ||
| 126 | + const params = ROUTE.query; | ||
| 127 | + if (params) { | ||
| 128 | + await formActionType.setFieldsValue(params); | ||
| 129 | + } | ||
| 130 | + await reload(); | ||
| 131 | + }); | ||
| 120 | </script> | 132 | </script> |
| @@ -70,8 +70,8 @@ const handleGroupDevice = (options: DeviceRecord[]) => { | @@ -70,8 +70,8 @@ const handleGroupDevice = (options: DeviceRecord[]) => { | ||
| 70 | } | 70 | } |
| 71 | }); | 71 | }); |
| 72 | const value = Array.from(map.entries()).map(([product, devices]) => ({ product, devices })); | 72 | const value = Array.from(map.entries()).map(([product, devices]) => ({ product, devices })); |
| 73 | - console.log(value); | ||
| 74 | - return Array.from(map.entries()).map(([product, devices]) => ({ product, devices })); | 73 | + |
| 74 | + return value; | ||
| 75 | }; | 75 | }; |
| 76 | 76 | ||
| 77 | const deviceTableFormSchema: FormSchema[] = [ | 77 | const deviceTableFormSchema: FormSchema[] = [ |