webcons/src/views/dashboard/workplace/components/data-panel-search.vue

<template>
          <a-row style="padding: 20px;">
        <a-col :flex="1">
          <a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item field="createdTime" :label="'按照时间查询'">
                  <a-range-picker v-model="queryParams" style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>

        <a-col :flex="'86px'" style="text-align: right">
          <a-space  :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-grid :cols="24" :row-gap="16" class="panel">
      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
        <a-space>
          <a-avatar :size="54" class="col-avatar">
            <img alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
          </a-avatar>
          <a-statistic :title="'登录人数'" :value="data.user_total" :value-from="0" animation show-group-separator>
            <template #suffix>
              <span class="unit">个</span>
            </template>
          </a-statistic>
        </a-space>
      </a-grid-item>
      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
        <a-space>
          <a-avatar :size="54" class="col-avatar">
            <img alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
          </a-avatar>
          <a-statistic :title="'注册人数'" :value="data.user_phone" :value-from="0" animation show-group-separator>
            <template #suffix>
              <span class="unit">{{ $t('workplace.pecs') }}</span>
            </template>
          </a-statistic>
        </a-space>
      </a-grid-item>
      <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
        <a-space>
          <a-avatar :size="54" class="col-avatar">
            <img alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image" />
          </a-avatar>
          <a-statistic :title="'提款人数'" :value="data.user_phone_onlin" :value-from="0" animation show-group-separator>
            <template #suffix>
              <span class="unit">{{ $t('workplace.pecs') }}</span>
            </template>
          </a-statistic>
        </a-space>
      </a-grid-item>
      <!-- <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
        style="border-right: none">
        <a-space>
          <a-avatar :size="54" class="col-avatar">
            <img alt="avatar"
              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image" />
          </a-avatar>
          <a-statistic :title="'提款人数'" :value="data.withdraw" :value-from="0" animation>
            <template #suffix> 人 </template>
          </a-statistic>
        </a-space>
      </a-grid-item> -->
      <a-grid-item :span="24">
        <a-divider class="panel-border" />
      </a-grid-item>
    </a-grid>

  </template>
  
  <script lang="ts" setup>
  import { index } from '@/api/dashboard';
  import { Ref, onMounted, reactive, ref } from 'vue';
  const data = reactive({
    user_total: 0,
    user_phone: 0,
    withdraw: 0,
    user_phone_onlin: 0,
  });
  
  onMounted(async() => {
    // setInterval(async () => {
    //   const res = await index();
    //   data.user_phone=res.data.user_phone
    //   data.user_phone_onlin=res.data.user_phone_onlin
    //   data.user_total=res.data.user_total
    //   data.withdraw=res.data.withdraw
    // }, 1000)
    const res = await index();
      data.user_phone=res.data.user_phone
      data.user_phone_onlin=res.data.user_phone_onlin
      data.user_total=res.data.user_total
      data.withdraw=res.data.withdraw
  })
  
  const reset=()=>{}
  const search=()=>{}
  const queryParams=ref([])
  </script>
  
  <style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 16px 20px 0 20px;
  }
  
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  
  .col-avatar {
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  
  .up-icon {
    color: rgb(var(--red-6));
  }
  
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  
  :deep(.panel-border) {
    margin: 4px 0 0 0;
  }
  </style>