logpm_page/src/views/wel/index.vue

<template>
  <div class="main_container">
    <!-- 开单数据 && 开单收入 -->
    <div class="flex mb10 row_first">
      <!-- 开单数据 -->
      <div class="mr10 box1 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />

          <div class="title">开单数据</div>
        </div>

        <!-- 数据 -->
        <div class="border pd10">
          <div class="height40pt flex-c-sb border-bottom">
            <div class="align_center">
              <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />

              <div>总计</div>
            </div>

            <div class="align_center">
              <span class="data mr10">123</span>
              <span>件</span>
            </div>
          </div>

          <div class="height40pt flex-c-sb border-bottom">
            <div class="align_center">
              <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />

              <div>当月</div>
            </div>

            <div class="align_center">
              <span class="data mr10">123</span>
              <span>件</span>
            </div>
          </div>

          <div class="height40pt flex-c-sb">
            <div class="align_center">
              <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />

              <div>当日</div>
            </div>

            <div class="align_center">
              <span class="data mr10">123</span>
              <span>件</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 开单收入 -->
      <div class="flex1 box2 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />

          <div class="title">开单收入</div>
        </div>

        <div class="flex">
          <!-- 统计数据 -->
          <div class="border flexnone totol pd10">
            <!-- 总计 -->
            <div class="height40pt flex-c-sb border-bottom">
              <div class="align_center">
                <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />

                <div>总计</div>
              </div>

              <div class="align_center">
                <span class="data mr10">123</span>
                <span>件</span>
              </div>
            </div>

            <div class="monthData flex-c-sb">
              <!-- 当月 -->
              <div class="flex1">
                <div class="align_center">
                  <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />

                  <div>当月</div>
                </div>

                <div class="align_center">
                  <span class="data mr10">123</span>
                  <span>件</span>
                </div>
              </div>

              <!-- 当日 -->
              <div class="flex1 border-left">
                <div class="align_center">
                  <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />

                  <div>当日</div>
                </div>

                <div class="align_center">
                  <span class="data mr10">123</span>
                  <span>件</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 详情数据 -->
          <div class="detailsData flex1 ml10">
            <div class="flex-c-sb">
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>
            </div>
            <div class="flex-c-sb mt10">
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>

              <div class="item flex1">
                <div>
                  <span class="data mr5px">123123</span>
                  <span>元</span>
                </div>

                <div>干线</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前所在库位数据 && 库位数据 -->
    <div class="flex mb10 row_second">
      <!-- 当前所在库位数据 -->
      <div class="mr10 box1 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />

          <div class="title">当前所在库位数据</div>
        </div>

        <!-- 数据 -->
        <div class="border data_container pd10 flex">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>零担</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>三方中转</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>商配</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>市配</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>自提</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>已打托</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 库位数据 -->
      <div class="flex1 box2 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />

          <div class="title">库位数据</div>
        </div>

        <div class="border data_container pd10 flex">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>已上架</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>空置</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>已上架</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>未上架</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 -->
    <div class="flex mb10 row_third">
      <!-- 当前所在库位数据 -->
      <div class="mr10 box1 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />

          <div class="title">干线待发运在库数据</div>
        </div>

        <!-- 数据 -->
        <div class="border data_container pd10 flex">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>运单总数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">单</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>在库总件数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>在库总重量</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">kg</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>在库总方数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">m³</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 干线车次统计 -->
      <div class="mr10 flex1 box2 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />

          <div class="title">干线车次统计</div>
        </div>

        <div class="border data_container pd10 flex">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总车次</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>在途</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>作业</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>卸车完成</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 异常数据 -->
      <div class="flex1 box2 view_box">
        <!-- 标题 -->
        <div class="flex-c-sb mb20">
          <div class="align_center">
            <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />

            <div class="title">异常数据</div>
          </div>

          <div class="align_center">
            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
              当天
            </div>
            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
              当月
            </div>
          </div>
        </div>

        <div class="abnormal_container flex-c-sb">
          <div class="abnormal_item green">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总车次</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>

          <div class="abnormal_item blue">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总车次</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>

          <div class="abnormal_item red">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总车次</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">车</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前配送数据 && 签收数据 -->
    <div class="flex mb10 row_fourthly">
      <!-- 当前配送数据 -->
      <div class="mr10 box1 view_box">
        <!-- 标题 -->
        <div class="flex-c-sb mb20">
          <div class="align_center">
            <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />

            <div class="title">当前配送数据</div>
          </div>

          <div class="align_center">
            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
              市配
            </div>
            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
              商配
            </div>
          </div>
        </div>

        <!-- 数据 -->
        <div class="border data_container pd10 flex">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>配送计划总数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">单</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总件数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总重量</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">kg</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>总方数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">m³</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>在途件数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 签收数据 -->
      <div class="flex1 box2 view_box">
        <!-- 标题 -->
        <div class="align_center mb20">
          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />

          <div class="title">签收数据</div>
        </div>

        <div class="border data_container pd10 flex-c-sb">
          <div class="item">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>已签收</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>未签收</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>签收率</span>
            </div>
            <div class="mt10">
              <span class="data">16899</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>文员签收数</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>文员签收率</span>
            </div>
            <div class="mt10">
              <span class="data">16899</span>
            </div>
          </div>

          <div class="item border-left">
            <div class="align_center">
              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
              <span>超时签收</span>
            </div>
            <div class="mt10">
              <span class="data mr5px">16899</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const isActive = ref(false);
</script>

<style scoped lang="scss">
.main_container {
  font-size: 14px;
  background: #f5f5f6;
  padding: 0 5px;
}

.view_box {
  padding: 10px;
  padding-top: 8px;
  background: #fff;
  border-radius: 5px;

  .title {
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
  }

  .img_16pt {
    width: 20px;
    height: 20px;
  }
}

.mb20 {
  margin-bottom: 20px;
}

.pd10 {
  padding: 0 10px;
}

.align_center {
  display: flex;
  align-items: center;
}

// 开单数据
.height40pt {
  height: 60px;
}

// 数据样式
.data {
  font-weight: bold;
  color: #000;
  font-family: DIN-Bold;
  font-size: 20px;
}

.border {
  border: 1pt solid #f5f5f6;
  border-radius: 5px;
  box-sizing: border-box;
}

.border-bottom {
  border-bottom: 1pt solid #f5f5f6;
  box-sizing: border-box;
}

.border-left {
  border-left: 1px solid #f5f5f6;
  box-sizing: border-box;
}

// 第一排
.row_first {
  & > div {
    height: 100%;
  }

  .box1 {
    height: 100%;
    width: 340px;
    box-sizing: border-box;
    flex: none;
  }

  // 开单收入
  .box2 {
    height: 100%;

    // 统计数据
    .totol {
      width: 460px;

      .monthData {
        height: 120px;

        & > div {
          height: 80%;
          flex-direction: column;
          display: flex;
          justify-content: space-around;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }
    }

    // 详情数据
    .detailsData {
      .item {
        background: #f2f7fb;
        border-radius: 5px;
        height: 85px;
        box-sizing: border-box;
        padding: 10px;
        color: #a4b0c2;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
    }
  }
}

// 第二排
.row_second {
  .dataIcon {
    height: 14px;
    width: 14px;
  }

  .data_container {
    height: 100px;
    box-sizing: border-box;
    padding: 20px 0;
  }

  .item {
    width: 137px;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    flex: none;
  }
}

// 第三排
.row_third {
  @extend .row_second;
  .abnormal_container {
    height: 100px;
  }

  .abnormal_item {
    box-sizing: border-box;
    padding: 20px;
    width: 160px;
    color: #7b8ba4;

    &.red {
      background: #ffeeed;

      .data {
        color: #ff5d52;
      }
    }

    &.blue {
      background: #e9f4ff;

      .data {
        color: #2693ff;
      }
    }

    &.green {
      background: #e5f8f3;

      .data {
        color: #00c090;
      }
    }
  }

  .button {
    padding: 0px 10px;
    height: 18px;
    line-height: 18px;
    background: #fff;
    border: 1px solid #f5f5f6;
    border-radius: 2px;
    color: #000;
    font-size: 12px;
    transition: all 0.3s;
    cursor: pointer;
    &.active {
      color: #fff;
      background: #2693ff;
      border-color: #2693ff;
    }
  }
}

// 第四排
.row_fourthly {
  @extend .row_third;

  .item {
    width: 150px;
  }
}

.mr5px {
  margin-right: 5px;
}
</style>
<style lang="scss" scope>
@import '../../styles/flowStyle.scss';

#avue-view {
  background-color: #fff;
}
</style>