logpm_page/src/views/datadetail/todayData.vue

<template>
  <div class="todayDetail">
    <!-- banner图 -->
    <div class="todayDetail__banner mb8">
      <div class="description">
        <div class="title">智慧物流解决方案</div>
        <p class="text">
          针对物流行业仓储、运输等场景，提供物联、LBS、大数据、安全管理、人工智能等能力，助力物流行业快速发展。
        </p>
      </div>
    </div>

    <!-- 搜索控件 -->
    <div class="todayDetail__searchControl mb8">
      <!-- 日期 -->
      <div class="date">
        <div
          :class="{ date__item: true, active: item.isActive }"
          v-for="item in dateSearchList"
          :key="item.label"
          @click="changeDateItemState(item)"
        >
          {{ item.label }}
        </div>

        <!-- 日期选择器 -->
        <div class="date-picker-container">
          <div class="date-picker-title">时间</div>
          <el-date-picker
            v-model="datePickerValue"
            type="daterange"
            range-separator="To"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clear-icon="Delete"
          />
        </div>
      </div>
    </div>

    <!-- 干线数据 -->
    <div class="todayDetail__dataCard mb8" v-for="item in dataList" :key="item.title">
      <div class="title">{{ item.title }}</div>

      <ul class="list">
        <li class="listItem" v-for="value in item.data">
          <div class="number">{{ value.num }}</div>
          <div class="label">{{ value.label }}</div>
        </li>
      </ul>
    </div>

    <!-- 仓储和统计 -->
    <div style="display: flex; justify-content: space-between">
      <!-- 仓储 -->
      <div class="todayDetail__dataCard storage">
        <div class="title">仓储</div>

        <ul class="list" style="flex-wrap: wrap">
          <li class="listItem" v-for="value in storageData.data" :key="(value.label as any)">
            <div class="number">{{ value.num }}</div>
            <div class="label">{{ value.label }}</div>
          </li>
        </ul>
      </div>

      <!-- 统计 -->
      <div class="todayDetail__dataCard" style="display: flex; flex-direction:column;">
        <div class="title">统计</div>

        <ul class="list" style="flex: 1; align-items: center;">
          <li class="listItem" v-for="value in statisticsData.data" :key="(value.label as any)">
            <div class="number">{{ value.num }}</div>
            <div class="label">{{ value.label }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

interface DateSearchItem {
  /**
   * 标题
   */
  label: string;
  /**
   * 是否激活
   */
  isActive: boolean;
}

type DateSearchList = DateSearchItem[];

// 日期选择列表
const dateSearchList = reactive<DateSearchList>([
  { label: '今日', isActive: true },
  { label: '昨日', isActive: false },
  { label: '最近七天', isActive: false },
  { label: '最近30天', isActive: false },
  { label: '近365天', isActive: false },
]);

const changeDateItemState = (item: DateSearchItem): void => {
  dateSearchList.forEach(val => {
    val.isActive = false;
  });
  item.isActive = true;
};

// 时间选择器值
const datePickerValue = ref('');

// 干线 && 配送 假数据
const dataList = [
  {
    title: '干线',
    data: [
      {
        label: '装车中车次数',
        num: 168,
      },
      {
        label: '在途车次数',
        num: 168,
      },
      {
        label: '作业中车次数',
        num: 168,
      },
      {
        label: '已卸车次数',
        num: 168,
      },
      {
        label: '已入库次数',
        num: 168,
      },
    ],
  },
  {
    title: '配送',
    data: [
      {
        label: '配送待装车次数',
        num: 168,
      },
      {
        label: '配送中车次数',
        num: 168,
      },
      {
        label: '已完成车次数',
        num: 168,
      },
      {
        label: '配送中签收件数',
        num: 168,
      },
      {
        label: '未入签收件数',
        num: 0,
      },
    ],
  },
];

// 仓储假数据
const storageData = {
  title: '仓储',
  data: [
    {
      label: '入库件数',
      num: 168,
    },
    {
      label: '出库总件数',
      num: 168,
    },
    {
      label: '待上架件数',
      num: 168,
    },
    {
      label: '库存总数',
      num: 168,
    },
    {
      label: '已用库位数',
      num: 168,
    },
    {
      label: '控制库位数',
      num: 0,
    },
  ],
};

// 统计假数据
const statisticsData = {
  title: '统计',
  data: [
    {
      label: '配送待装车次数',
      num: 168,
    },
    {
      label: '配送中车次数',
      num: 168,
    },
    {
      label: '配送中车次数',
      num: 168,
    },
  ],
};
</script>

<style scoped lang="scss">
// 主题颜色
$theme-colors: #d3832a;

// 去除ul默认样式
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todayDetail {
  padding: 0 10px 10px 10px;

  // banner图
  &__banner {
    width: 100%;
    height: 218px;
    background: linear-gradient(135deg, #ffffff 0%, #ffe0be 0%, #fff2e4 100%);
    border-radius: 5px;
    color: $theme-colors;
    display: flex;
    align-items: center;
    justify-content: center;

    .title {
      padding: 0 5px;
      font-family: YouSheBiaoTiHei-Bold;
      font-weight: 600;
      font-size: 36px;
      line-height: 47px;
      width: fit-content;
      border: 2px dashed #ccc;
      font-style: italic;
    }

    .text {
      width: 453px;
      font-size: 16px;
      line-height: 27px;
      margin: 8px 0 0 0;
    }
  }

  // 搜索控件高度
  $searchHeight: 52px;

  // 搜索控件
  &__searchControl {
    display: flex;
    align-items: center;
    padding-left: 55px;
    height: $searchHeight;
    background: #fff;
    border-radius: 5px;
    font-size: 16px;
    white-space: nowrap;

    // 时间
    .date {
      height: 100%;
      display: flex;
      color: #000;

      &__item {
        line-height: $searchHeight;
        margin-right: 24px;
        cursor: pointer;
        transition: all 0.5s;
      }
    }
  }

  // 数据卡片
  &__dataCard {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    padding: 26px 20px 32px;
    border-radius: 5px;

    // 标题
    & .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 29px;
    }

    & .list {
      display: flex;
    }
  }
}

// 搜索控件激活状态
.date__item.active {
  color: $theme-colors;
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 90%;
    border: 1px solid $theme-colors;
    left: 5%;
  }
}

.date__item {
  &:hover {
    color: $theme-colors;
  }

  &::after {
    content: '';
    display: block;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all 0.5s;
  }
}

// 日期搜索框样式
:deep(.el-range-editor.el-input__wrapper) {
  width: 220px !important;
  height: 32px !important;
}

.date-picker-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.date-picker-title {
  margin-right: 16px;
}

// 底部外边距8px
.mb8 {
  margin-bottom: 8px;
}

// 列表每一项数据
.listItem {
  flex: none;
  width: 200px;

  & .number {
    font-weight: bold;
    font-family: DIN-Bold;
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 13px;
  }

  & .label {
    color: #afb4ba;
    font-size: 14px;
  }
}

// 仓储列表样式
.storage {
  width: 750px;
  margin-right: 20px;
  flex: none;
}
</style>