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="productName" label="所属产品">
                  <a-select
                    v-model="formModel.productId"
                    :loading="loading"
                    :filter-option="false"
                    allow-search
                    style="width: 360px"
                    placeholder="请选择所属产品"
                    @search="handleSearch"
                  >
                    <a-option v-for="item of options" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <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"
              :productName="item.productName"
              :createTime="item.createTime"
              @search="search"
              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-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, queryDeviceByName, 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: '',
      productId: '',
    };
  };

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

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


  // 获取设备列表
  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 handleSearch = (value: any) => {
    if (value) {
      loading.value = true;
      options.value = [];
      window.setTimeout(async () => {
        const res = await queryDeviceByName({
          name: value,
        });
        options.value = res.data.map((item: any) => {
          return {
            id: item.id,
            name: item.name,
          };
        });
        loading.value = false;
      }, 1000);
    } else {
      options.value = [];
    }
  };

  // 分页发生改变
  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();
  };

  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>