iot-gateway_fontend/src/views/iot/deviceCard/index.vue

<template>
  <div class="container">
    <Breadcrumb :items="['系统管理', '公告设置']" />
    <a-card class="general-card" title=" ">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="right"
          >
            <a-row :gutter="18">
              <a-col :span="9">
                <a-form-item
                  field="name"
                  label='名称'
                >
                  <a-input
                    v-model="formModel.name"
                    style="width: 360px"
                    placeholder='请输入设备名称'
                  />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item field="status" label='状态'>
                  <a-input
                    v-model="formModel.status"
                    style="width: 360px"
                    placeholder='请输入设备状态'
                  />
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <a-form-item
                  field="isOnline"
                  label='在线'
                >
                  <a-select
                    v-model="formModel.isOnline"
                    style="width: 360px"
                    placeholder='请选择是否在线'
                    :options="statusOptions"
                  />
                </a-form-item>
              </a-col>



            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 84px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
<!--      <a-divider style="margin-top: 0" />-->
      <div class="list-wrap">
        <a-row class="list-row" :gutter="20">
          <a-col
            v-for="item in renderData"
            :key="item.id"
            class="list-col"
            :xs="12"
            :sm="12"
            :md="12"
            :lg="6"
            :xl="6"
            :xxl="6"
          >
            <CardWrap
              :loading="loading"
              :id="item.id"
              :title="item.name"
              :createBy="item.createBy"
              :createTime="item.createTime"
              open-txt="详情"
            >
              <template #skeleton>
                <a-skeleton :animation="true">
                  <a-skeleton-line
                    :widths="['50%', '50%', '100%', '40%']"
                    :rows="4"
                  />
                  <a-skeleton-line :widths="['40%']" :rows="1" />
                </a-skeleton>
              </template>
            </CardWrap>
          </a-col>
          <DeviceEdit ref="createUserRef" :is-create="true" />
<!--          <a-col-->
<!--            :xs="12"-->
<!--            :sm="12"-->
<!--            :md="12"-->
<!--            :lg="6"-->
<!--            :xl="6"-->
<!--            :xxl="6"-->
<!--            class="list-col"-->
<!--          >-->
<!--            <div class="card-wrap empty-wrap">-->
<!--              <a-card :bordered="false" hoverable>-->
<!--                <a-result :status="null" title="点击创建设备">-->
<!--                  <template #icon>-->
<!--                    <icon-plus style="font-size: 20px" />-->
<!--                  </template>-->
<!--                </a-result>-->
<!--              </a-card>-->
<!--            </div>-->
<!--          </a-col>-->
        </a-row>
      </div>
      <a-pagination
        style="float: right; position: relative; right: 1px; bottom: 25px; margin-top: 10px"
        :total="pagination.total"
        show-total
        show-jumper
        show-page-size
        @page-size-change="onSizeChange"
        @change="onPageChange"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import usePagination from '@/hooks/pagination';
  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import { DeviceRecord, queryDeviceList } from '@/api/device';
  import DeviceEdit from '@/views/iot/deviceCard/components/device-edit.vue';
  import CardWrap from './components/card-wrap.vue';

  const generateFormModel = () => {
    return {
      name:'',
      status:'',
      isOnline:'',
    };
  };

  const { loading, setLoading } = useLoading(true);
  const { pagination,setPagination } = usePagination();
  const renderData = ref<[]>([]);
  const formModel = ref(generateFormModel());


  const statusOptions = computed<SelectOptionData[]>(() => [
    {
      label: '是',
      value: 'true',
    },
    {
      label: '否',
      value: 'false',
    },
  ]);

  // 获取设备列表
  const fetchData = async (
    params = { size: 10, current: 1 }
  ) => {
    setLoading(true);
    try {
      const res: any = await queryDeviceList(params);
      renderData.value = res.data.records;
      setPagination(res.data);
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  // 查询
  const search = () => {
    fetchData({
      ...pagination.value,
      ...formModel.value,
    } as unknown as DeviceRecord);
  };

  // 分页发生改变
  const onPageChange = (current: number) => {
    pagination.value.page = current;
    pagination.value.current = current;
    search();
  };

  // 数据条数改变
  const onSizeChange = (Size: number) => {
    pagination.value.size = Size;
    search();
  };


  // 重置
  const reset = () => {
    formModel.value = generateFormModel();
  };

  // // 打开详情
  // function openDetail(id:number): void{
  //   const url = router.resolve({
  //     name: 'deviceDetail',
  //     params: {id}
  //   }).href;
  //   router.push(url);
  // }

  // // 删除
  // const handleDelete = async (id: number) => {
  //   const res = await deleteDevice(id);
  //   if (res.status === 200) {
  //     Message.success({
  //       content: '删除成功',
  //       duration: 5 * 1000,
  //     });
  //     search();
  //   }
  // };
  onMounted(() => {
    search();
  });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.list-wrap) {
    .list-row {
      align-items: stretch;
      .list-col {
        margin-bottom: 16px;
      }
    }
  }
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    &:hover {
      transform: translateY(-4px);
    }
    :deep(.arco-card-meta-description) {
      color: rgb(var(--gray-6));
      .arco-descriptions-item-label-inline {
        font-weight: normal;
        font-size: 12px;
        color: rgb(var(--gray-6));
      }
      .arco-descriptions-item-value-inline {
        color: rgb(var(--gray-8));
      }
    }
  }
  .empty-wrap {
    height: 210px;
    border-radius: 4px;
    :deep(.arco-card) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      .arco-result-title {
        color: rgb(var(--gray-6));
      }
    }
  }
</style>
<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
</style>