iot-gateway_fontend/src/views/dashboard/workplace/components/data-panel.vue

<template>
  <div style="width: 100%">
    <a-grid :cols="24" :row-gap="10" :col-gap="10" class="panel">
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 6 }"
      >
        <a-card :bordered="false" class="square-card">
          <a-row align="center">
            <a-col :span="12">
              <a-statistic
                title="产品数"
                value-style="font-size:36px"
                :value="365"
                :value-from="0"
                animation
              >
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-avatar
                :size="80"
                image-url="http://iot.le5le.cn/iot/img/%E4%BA%A7%E5%93%81.png"
                shape="square"
                :style="{ backgroundColor: '#ffffff' }"
              />
<!--              <a-avatar-->
<!--                :size="80"-->
<!--                image-url="http://iot.le5le.cn/iot/img/%E6%95%B0%E6%8D%AE.png"-->
<!--                shape="square"-->
<!--                :style="{ backgroundColor: '#ffffff' }"-->
<!--              />-->
            </a-col>
          </a-row>
          <a-descriptions :data="data" layout="inline-vertical" class="responsive-margin" />


        </a-card>
      </a-grid-item>
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 6 }"
      >
        <a-card :bordered="false" class="square-card">
          <a-row align="center">
            <a-col :span="12">
              <a-statistic
                title="设备数"
                value-style="font-size:36px"
                :value="deviceInfo.deviceCount"
                :value-from="0"
                animation
              >
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-avatar
                :size="80"
                image-url="http://iot.le5le.cn/iot/img/%E8%AE%BE%E5%A4%87.png"
                shape="square"
                :style="{ backgroundColor: '#ffffff' }"
              />
            </a-col>
          </a-row>
          <a-descriptions :data="data" layout="inline-vertical" class="responsive-margin" />


        </a-card>
      </a-grid-item>
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 6 }"
      >
        <a-card :bordered="false" class="square-card">
          <a-row align="center">
            <a-col :span="12">
              <a-statistic
                title="产品数"
                value-style="font-size:36px"
                :value="365"
                :value-from="0"
                animation
              >
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-avatar
                :size="80"
                image-url="http://iot.le5le.cn/iot/img/%E5%91%8A%E8%AD%A6.png"
                shape="square"
                :style="{ backgroundColor: '#ffffff' }"
              />
            </a-col>
          </a-row>
          <a-descriptions :data="data" layout="inline-vertical" class="responsive-margin" />


        </a-card>
      </a-grid-item>
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 8, xl: 6, xxl: 6 }"
      >
        <Announcement />
      </a-grid-item>
      <a-grid-item :span="24">
        <a-divider class="panel-border" />
      </a-grid-item>
    </a-grid>
    <a-grid :span="24" :row-gap="10" :col-gap="10" class="panel">
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 8, xxl: 8 }">
        <ChainItem
          title="分享总量"
          quota="share"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
              : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
          }"
        />
      </a-grid-item>
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 8, xxl: 8 }">
        <ChainItem
          title="分享总量"
          quota="share"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
              : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
          }"
        />
      </a-grid-item>
      <a-grid-item
        class="panel-col"
        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 8, xxl: 8 }">
        <ChainItem
          title="分享总量"
          quota="share"
          chart-type="pie"
          :card-style="{
            background: isDark
              ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
              : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)',
          }"
        />
      </a-grid-item>
      <a-grid-item :span="24">
        <a-divider class="panel-border" />
      </a-grid-item>
    </a-grid>
  </div>
</template>

<script lang="ts" setup>
  import Announcement from '@/views/dashboard/workplace/components/announcement.vue';
  import ChainItem from '@/views/dashboard/workplace/components/chain-item.vue';
  import useThemes from '@/hooks/themes';
  import { getDeviceInfo } from '@/api/dashboard';
  import { onMounted, ref } from 'vue';

  const data = [{
    label: 'Name',
    value: 'Socrates',
  }, {
    label: 'Mobile',
    value: '123',
  }, {
    label: 'Residence',
    value: 'Beijing'
  }];
  const deviceInfo = ref({
    deviceCount: 0,
    onlineCount: 0,
    offlineCount: 0,
    alarmCount: 0,
    productCount: 0,
  })
  const fetchData = async () => {
    const res = await getDeviceInfo();
    deviceInfo.value = res.data;
  }
  const { isDark } = useThemes();
  onMounted(() => {
    fetchData();
  })
</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 10px 20px 0 0;
  }
  .panel-col {
    padding-left: 20px; // 修改: 调整内边距以使卡片看起来更大
    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;
  }
  .square-card {
    width: 100%;
    //aspect-ratio: 4 / 3; // 修改: 将卡片的长宽比改为4:3
    padding: 15px 20px 13px 20px;
  }
  .responsive-margin {
    margin-top: 20px; // 默认值

  }

</style>