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="props.productInfo.productCount"
                :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="productData" 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="props.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="deviceData" 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="props.alarmInfo.warningCount"
                :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="alarmData" 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>
  </div>
</template>

<script lang="ts" setup>
  import Announcement from '@/views/dashboard/workplace/components/announcement.vue';
  import { ref } from 'vue';

  const props = defineProps(
    {
      deviceInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      alarmInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    }
  );
  const productData = [{
    label: '启用',
    value: props.productInfo.enabledCount,
  }, {
    label: '停用',
    value: props.productInfo.disabledCount,
  }];
  const deviceData = [
    {
      label: '属性',
      value: props.deviceInfo.propertyCount,
    }, {
    label: '服务',
    value: props.deviceInfo.serveCount,
  }, {
    label: '事件',
    value: props.deviceInfo.eventCount,
  }];
  const alarmData = [{
    label: '今日新增',
    value: props.alarmInfo.todayWarningCount,
  }];
</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
  }
  .panel-col {
    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>