github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Mqtt/index.vue (about)

     1  <script setup lang="ts">
     2  import {useI18n} from '@/hooks/web/useI18n'
     3  import {Table} from '@/components/Table'
     4  import {h, onMounted, onUnmounted, reactive, ref, watch} from 'vue'
     5  import {Pagination, TableColumn} from '@/types/table'
     6  import api from "@/api/api";
     7  import {ApiClient} from "@/api/stub";
     8  import {ContentWrap} from "@/components/ContentWrap";
     9  import {parseTime} from "@/utils";
    10  import {UUID} from "uuid-generator-ts";
    11  import stream from "@/api/stream";
    12  
    13  const {t} = useI18n()
    14  
    15  interface TableObject {
    16    tableList: ApiClient[]
    17    params?: any
    18    loading: boolean
    19    sort?: string
    20  }
    21  
    22  interface Params {
    23    page?: number;
    24    limit?: number;
    25    sort?: string;
    26  }
    27  
    28  const tableObject = reactive<TableObject>(
    29      {
    30        tableList: [],
    31        loading: false,
    32      }
    33  );
    34  
    35  const currentID = ref('')
    36  
    37  const onEventMqttNewClient = () => {
    38    getList()
    39  }
    40  
    41  onMounted(() => {
    42    const uuid = new UUID()
    43    currentID.value = uuid.getDashFreeUUID()
    44  
    45    setTimeout(() => {
    46      stream.subscribe('event_mqtt_new_client', currentID.value, onEventMqttNewClient);
    47    }, 1000)
    48  })
    49  
    50  onUnmounted(() => {
    51    stream.unsubscribe('event_mqtt_new_client', currentID.value);
    52  })
    53  
    54  const columns: TableColumn[] = [
    55    {
    56      field: 'clientId',
    57      label: t('mqtt.client.clientId'),
    58      width: "200px"
    59    },
    60    {
    61      field: 'username',
    62      label: t('mqtt.client.username'),
    63    },
    64    {
    65      field: 'connectedAt',
    66      label: t('mqtt.client.connectedAt'),
    67      type: 'time',
    68      sortable: true,
    69      width: "170px",
    70      formatter: (row: ApiClient) => {
    71        return h(
    72            'span',
    73            parseTime(row?.connectedAt)
    74        )
    75      }
    76    },
    77  ]
    78  const paginationObj = ref<Pagination>({
    79    currentPage: 1,
    80    pageSize: 50,
    81    total: 0,
    82    pageSizes: [50, 100, 150, 250],
    83  })
    84  
    85  const getList = async () => {
    86    tableObject.loading = true
    87  
    88    let params: Params = {
    89      page: paginationObj.value.currentPage,
    90      limit: paginationObj.value.pageSize,
    91      sort: tableObject.sort,
    92    }
    93  
    94    const res = await api.v1.mqttServiceGetClientList(params)
    95        .catch(() => {
    96        })
    97        .finally(() => {
    98          tableObject.loading = false
    99        })
   100    if (res) {
   101      const {items, meta} = res.data;
   102      tableObject.tableList = items;
   103      paginationObj.value.currentPage = meta.pagination.page;
   104      paginationObj.value.total = meta.pagination.total;
   105    } else {
   106      tableObject.tableList = [];
   107    }
   108  }
   109  
   110  watch(
   111      () => paginationObj.value.currentPage,
   112      () => {
   113        getList()
   114      }
   115  )
   116  
   117  watch(
   118      () => paginationObj.value.pageSize,
   119      () => {
   120        getList()
   121      }
   122  )
   123  
   124  const sortChange = (data) => {
   125    const {column, prop, order} = data;
   126    const pref: string = order === 'ascending' ? '+' : '-'
   127    tableObject.sort = pref + prop
   128    getList()
   129  }
   130  
   131  
   132  const selectRow = (row) => {
   133    if (!row) {
   134      return
   135    }
   136    const {clientId} = row
   137    push(`/etc/mqtt/client/${clientId}`)
   138  }
   139  
   140  getList()
   141  
   142  </script>
   143  
   144  <template>
   145    <ContentWrap>
   146  
   147      <Table
   148          :selection="false"
   149          v-model:pageSize="paginationObj.pageSize"
   150          v-model:currentPage="paginationObj.currentPage"
   151          :columns="columns"
   152          :data="tableObject.tableList"
   153          :loading="tableObject.loading"
   154          :pagination="paginationObj"
   155          @sort-change="sortChange"
   156          style="width: 100%"
   157          :showUpPagination="20"
   158          @current-change="selectRow"
   159      />
   160  
   161  
   162    </ContentWrap>
   163  
   164  </template>
   165  
   166  <style lang="less">
   167  
   168  </style>