<template>
  <div class="main_container">
    <!-- <el-button @click="handleRefresh">刷新</el-button> -->

    <!-- 开单数据 && 开单收入 -->
    <div class="flex mb10 row_first">
      <!-- 开单数据 -->
      <div class="mr10 box1 view_box" v-loading="details.loadingObj.openOrderData">
        <!-- 标题 -->
        <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">{{ details.openOrderDataInfo.totalNum || 0 }}</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">{{ details.openOrderDataInfo.monthNum || 0 }}</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">{{ details.openOrderDataInfo.dayNum || 0 }}</span>

              <span>单</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 开单收入 -->
      <div class="flex1 box2 view_box" v-loading="details.loadingObj.openOrderIncome">
        <!-- 标题 -->
        <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">{{ details.openOrderIncomeInfo.totalFee || 0 }}</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">{{ details.openOrderIncomeInfo.monthFee || 0 }}</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">{{ details.openOrderIncomeInfo.dayFee || 0 }}</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">{{
                    details.openOrderIncomeInfo.monthTrunklineFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>干线 - 月</div>
              </div>
              <!-- 仓储 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.monthWarehouseFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>仓储 - 月</div>
              </div>
              <!-- 配送 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.monthDistributionFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>配送 - 月</div>
              </div>
              <!-- 提货 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.monthBillladingFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>提货 - 月</div>
              </div>
              <!-- 安装 -->
              <div class="item flex1">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.monthInstallFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>安装 - 月</div>
              </div>
            </div>

            <!-- 日 -->
            <div class="flex-c-sb mt10">
              <!-- 干线 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.dayTrunklineFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>干线 - 日</div>
              </div>
              <!-- 仓储 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.dayWarehouseFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>仓储 - 日</div>
              </div>
              <!-- 配送 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.dayDistributionFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>配送 - 日</div>
              </div>
              <!-- 提货 -->
              <div class="item flex1 mr10">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.dayBillladingFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>提货 - 日</div>
              </div>
              <!-- 安装 -->
              <div class="item flex1">
                <div>
                  <span class="data mr5px">{{
                    details.openOrderIncomeInfo.dayInstallFee || 0
                  }}</span>
                  <span>元</span>
                </div>

                <div>安装 - 日</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前所在库位数据 && 库位数据 -->
    <div class="flex mb10 row_second">
      <!-- 当前所在库位数据 -->
      <div class="mr10 box1 view_box" v-loading="details.loadingObj.handOrderData">
        <!-- 标题 -->
        <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">{{ details.handOrderDataInfo.totalNum || 0 }}</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">{{ details.handOrderDataInfo.zeroNum || 0 }}</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">{{ details.handOrderDataInfo.thirdTransferNum || 0 }}</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">{{ details.handOrderDataInfo.mallNum || 0 }}</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">{{ details.handOrderDataInfo.cityNum || 0 }}</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">{{ details.handOrderDataInfo.billNum || 0 }}</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">{{ details.handOrderDataInfo.trayNum || 0 }}</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 库位数据 -->
      <div class="flex1 box2 view_box" v-loading="details.loadingObj.allocationData">
        <!-- 标题 -->
        <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">{{ details.allocationDataInfo.totalNum || 0 }}</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">{{ details.allocationDataInfo.useNum || 0 }}</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">{{ details.allocationDataInfo.nullNum || 0 }}</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">{{ details.allocationDataInfo.upshelfNum || 0 }}</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">{{ details.allocationDataInfo.noUpshelfNum || 0 }}</span>
              <span class="">件</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 -->
    <div class="flex mb10 row_third">
      <!-- 当前所在库位数据 -->
      <div class="mr10 box1 flex1 view_box" v-loading="details.loadingObj.trunklineHandOrderData">
        <!-- 标题 -->
        <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 flex-c-sb">
          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">{{ details.trunklineHandOrderDataInfo.waybillNum || 0 }}</div>
              <div class="">单</div>
            </div>
            <div class="">
              <span>运单总数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">{{ details.trunklineHandOrderDataInfo.handleNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>在库总件数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">
                {{ details.trunklineHandOrderDataInfo.handleWeight || 0 }}
              </div>
              <div class="">kg</div>
            </div>
            <div class="">
              <span>在库总重量</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">
                {{ details.trunklineHandOrderDataInfo.handleVolume || 0 }}
              </div>
              <div class="">m³</div>
            </div>
            <div class="">
              <span>在库总方数</span>
            </div>
          </div>
        </div>
      </div>

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

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

        <div class="border pd10 flex-c-sb">
          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ details.trunklineCarsDataInfo.totalNum || 0 }}</div>
              <div class="">车</div>
            </div>
            <div class="">
              <span>总车次</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ details.trunklineCarsDataInfo.inTransitNum || 0 }}</div>
              <div class="">车</div>
            </div>
            <div class="">
              <span>在途</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ details.trunklineCarsDataInfo.workNum || 0 }}</div>
              <div class="">车</div>
            </div>
            <div class="">
              <span>作业</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ details.trunklineCarsDataInfo.unloadNum || 0 }}</div>
              <div class="">车</div>
            </div>
            <div class="">
              <span>卸车完成</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 异常数据 -->
      <div class="flex1 box2 view_box" v-loading="details.loadingObj.unloadAbnormalData">
        <!-- 标题 -->
        <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: abnormal_status === 'day' }"
              @click="() => (abnormal_status = 'day')"
            >
              当天
            </div>
            <div
              :class="{ button: true, active: abnormal_status === 'month' }"
              @click="() => (abnormal_status = 'month')"
            >
              当月
            </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">{{ abnormal_Info.sendNum }}</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">{{ abnormal_Info.noDealNum }}</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">{{ abnormal_Info.abnormalRate }}</span>
              <span class="">%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前配送数据 && 签收数据 -->
    <div class="flex mb10 row_fourthly">
      <!-- 当前配送数据 -->
      <div
        class="mr10 box1 view_box"
        style="width: 40%"
        v-loading="details.loadingObj.deliveryData"
      >
        <!-- 标题 -->
        <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: delivery_status === 1 }"
              @click="delivery_status = 1"
            >
              商配
            </div>

            <!-- 外协商配 -->
            <div
              :class="{ button: true, active: delivery_status === 4 }"
              @click="delivery_status = 4"
            >
              外协商配
            </div>

            <div
              :class="{ button: true, active: delivery_status === 2 }"
              @click="delivery_status = 2"
            >
              市配
            </div>

            <div
              :class="{ button: true, active: delivery_status === 5 }"
              @click="delivery_status = 5"
            >
              外协市配
            </div>
          </div>
        </div>

        <!-- 数据 -->
        <div class="border pd10 flex-c-sb">
          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_info.totalNum || 0 }}</div>
              <div class="">单</div>
            </div>
            <div class="">
              <span>配送计划总数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_info.totalDeliveryNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>总作业</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_info.totalWeight || 0 }}</div>
              <div class="">kg</div>
            </div>
            <div class="">
              <span>总重量</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_info.totalVolume || 0 }}</div>
              <div class="">m³</div>
            </div>
            <div class="">
              <span>总方数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_info.totalRoadNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>在途件数</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 签收数据 -->
      <div class="flex1 box2 view_box" v-loading="details.loadingObj.signforData">
        <!-- 标题 -->
        <div class="align_center mb20 flex-c-sb">
          <div class="flex">
            <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: signforData_status === '1' }"
              @click="() => (signforData_status = '1')"
            >
              当天
            </div>
            <div
              :class="{ button: true, active: signforData_status === '2' }"
              @click="() => (signforData_status = '2')"
            >
              当月
            </div>
          </div>
        </div>

        <div class="border pd10 flex-c-sb">
          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ signforData.signNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>已签收</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">{{ signforData.unSignNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>未签收</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">
                {{ signforData.signScale || 0 }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>签收率</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box purple mb10">
              <div class="data mr5px">{{ signforData.clerkSignNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>文员签收数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box purple mb10">
              <div class="data mr5px">
                {{ signforData.clerkSignforScale || 0 }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>文员签收率</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box red mb10">
              <div class="data mr5px">{{ signforData.clerkOverTimeSignfoNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>超时签收</span>
            </div>
          </div>

          <div class="text_center" v-if="signforData_status !== '1'">
            <div class="data_box red mb10">
              <div class="data mr5px">
                {{
                  signforData.clerkOverTimeScale
                    ? Number(signforData.clerkOverTimeScale * 100).toFixed(2)
                    : 0
                }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>签收超时率</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 当前配送数据 && 签收数据 -- 自提 -->
    <div class="flex mb10 row_fourthly">
      <!-- 当前配送数据 -->
      <div
        class="mr10 box1 view_box"
        style="width: 40%"
        v-loading="details.loadingObj.deliveryData"
      >
        <!-- 标题 -->
        <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>

        <!-- 数据 -->
        <div class="border pd10 flex-c-sb">
          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_bill_info.totalNum || 0 }}</div>
              <div class="">单</div>
            </div>
            <div class="">
              <span>配送计划总数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_bill_info.totalDeliveryNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>总作业</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_bill_info.totalWeight || 0 }}</div>
              <div class="">kg</div>
            </div>
            <div class="">
              <span>总重量</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_bill_info.totalVolume || 0 }}</div>
              <div class="">m³</div>
            </div>
            <div class="">
              <span>总方数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">{{ delivery_bill_info.totalRoadNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>在途件数</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 签收数据 -->
      <div class="flex1 box2 view_box" v-loading="details.loadingObj.signforData">
        <!-- 标题 -->
        <div class="align_center mb20 flex-c-sb">
          <div class="flex">
            <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: billSignforData_status === '3' }"
              @click="() => (billSignforData_status = '3')"
            >
              当天
            </div>
            <div
              :class="{ button: true, active: billSignforData_status === '4' }"
              @click="() => (billSignforData_status = '4')"
            >
              当月
            </div>
          </div>
        </div>

        <div class="border pd10 flex-c-sb">
          <div class="text_center">
            <div class="data_box mb10">
              <div class="data mr5px">{{ billSignforData.signNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>已签收</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box orange mb10">
              <div class="data mr5px">{{ billSignforData.unSignNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>未签收</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box blue mb10">
              <div class="data mr5px">
                {{
                  billSignforData.signScale ? Number(billSignforData.signScale * 100).toFixed(2) : 0
                }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>签收率</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box purple mb10">
              <div class="data mr5px">{{ billSignforData.clerkSignNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>文员签收数</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box purple mb10">
              <div class="data mr5px">
                {{
                  billSignforData.clerkSignforScale
                    ? Number(billSignforData.clerkSignforScale * 100).toFixed(2)
                    : 0
                }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>文员签收率</span>
            </div>
          </div>

          <div class="text_center">
            <div class="data_box red mb10">
              <div class="data mr5px">{{ billSignforData.clerkOverTimeSignfoNum || 0 }}</div>
              <div class="">件</div>
            </div>
            <div class="">
              <span>超时签收</span>
            </div>
          </div>

          <div class="text_center" v-if="billSignforData_status !== '3'">
            <div class="data_box red mb10">
              <div class="data mr5px">
                {{
                  billSignforData.clerkOverTimeScale
                    ? Number(billSignforData.clerkOverTimeScale * 100).toFixed(2)
                    : 0
                }}
              </div>
              <div class="">%</div>
            </div>
            <div class="">
              <span>签收超时率</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import { computeNumber } from '@/utils/util.js';

import {
  postAllocationData,
  postHandOrderData,
  postOpenOrderData,
  postOpenOrderIncome,
  postTrunklineCarsData,
  postTrunklineHandOrderData,
  postUnloadAbnormalData,
  postDeliveryData,
  postSignforData,
} from '@/api/wel/index';

const details = reactive({
  /** 开单数据 */
  openOrderDataInfo: {
    /** 开单 -- 总计 */
    dayNum: 0,
    /** 开单 -- 当月 */
    monthNum: 0,
    /** 开单 -- 当日 */
    totalNum: 0,
  },
  /** 开单收入 */
  openOrderIncomeInfo: {
    dayBillladingFee: '0.00',
    dayDistributionFee: '0.00',
    dayFee: '0.00',
    dayInstallFee: '0.00',
    dayTrunklineFee: '0.00',
    dayWarehouseFee: '0.00',
    monthBillladingFee: '0.00',
    monthDistributionFee: '0.00',
    monthFee: '0.00',
    monthInstallFee: '0.00',
    monthTrunklineFee: '0.00',
    monthWarehouseFee: '0.00',
    totalFee: '0',
  },
  /** 当前在库数据 */
  handOrderDataInfo: {
    billNum: 0,
    cityNum: 0,
    mallNum: 0,
    thirdTransferNum: 0,
    totalNum: 0,
    trayNum: 0,
    zeroNum: 0,
  },
  /** 库位数据 */
  allocationDataInfo: {
    noUpshelfNum: 0,
    nullNum: 0,
    totalNum: 0,
    upshelfNum: 0,
    useNum: 0,
  },
  /** 干线发运数据 */
  trunklineHandOrderDataInfo: {
    handleNum: 0,
    handleVolume: '0.0000',
    handleWeight: '0.0000',
    waybillNum: 0,
  },
  /** 干线车次数据 */
  trunklineCarsDataInfo: {
    inTransitNum: 0,
    totalNum: 0,
    unloadNum: 0,
    workNum: 0,
  },
  /** 异常卸车数据 */
  unloadAbnormalDataInfo: {
    abnormalDayRate: '0',
    abnormalMonthRate: '0',
    noDealDayNum: 0,
    noDealMonthNum: 0,
    sendDayNum: 0,
    sendMonthNum: 0,
    unloadDayNum: 0,
    unloadMonthNum: 0,
  },
  /** 配送数据 */
  deliveryDataInfo: [],
  /** 签收数据 */
  signforDataInfo: [],
  loadingObj: {
    /** 开单数据 */
    openOrderData: false,
    /** 开单收入 */
    openOrderIncome: false,
    /** 当前在库数据 */
    handOrderData: false,
    /** 库位数据 */
    allocationData: false,
    /** 干线发运数据 */
    trunklineHandOrderData: false,
    /** 干线车次数据 */
    trunklineCarsData: false,
    /** 异常卸车数据 */
    unloadAbnormalData: false,
    /** 配送数据 */
    deliveryData: false,
    /** 签收数据 */
    signforData: false,
  },
});

const deliveryDataBill = computed(() => {});

/**
 * 配送显示数据类型
 * 1 -- 商配
 * 2 -- 市配
 * 3 -- 自提
 * 4 -- 外协商配
 * 5 -- 外协市配
 */
const delivery_status = ref<1 | 2 | 3 | 4 | 5>(1);

/** 异常数据状态 */
const abnormal_status = ref<'day' | 'month'>('day');

/** 签收数据状态 */
const signforData_status = ref<'1' | '2'>('1');

/** 自提签收数据状态 */
const billSignforData_status = ref<'3' | '4'>('3');

/** 请求开单数据 */
const initOpenOrderData = async () => {
  try {
    details.loadingObj.openOrderData = true;
    const res = await postOpenOrderData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.openOrderDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.openOrderData = false;
  }
};

/** 请求开单收入 */
const initOpenOrderIncome = async () => {
  try {
    details.loadingObj.openOrderIncome = true;
    const res = await postOpenOrderIncome({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.openOrderIncomeInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.openOrderIncome = false;
  }
};

/** 请求库位数据 */
const initAllocationData = async () => {
  try {
    details.loadingObj.allocationData = true;
    const res = await postAllocationData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.allocationDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.allocationData = false;
  }
};

/** 请求在库数据 */
const initHandOrderData = async () => {
  try {
    details.loadingObj.handOrderData = true;
    const res = await postHandOrderData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.handOrderDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.handOrderData = false;
  }
};

/** 请求干线发运数据 */
const initTrunklineHandOrderData = async () => {
  try {
    details.loadingObj.trunklineHandOrderData = true;
    const res = await postTrunklineHandOrderData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.trunklineHandOrderDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.trunklineHandOrderData = false;
  }
};

/** 请求干线车次数据 */
const initTrunklineCarsData = async () => {
  try {
    details.loadingObj.trunklineCarsData = true;
    const res = await postTrunklineCarsData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.trunklineCarsDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.trunklineCarsData = false;
  }
};

/** 卸车异常数据 */
const initUnloadAbnormalData = async () => {
  try {
    details.loadingObj.unloadAbnormalData = true;
    const res = await postUnloadAbnormalData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.unloadAbnormalDataInfo = data || {};
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.unloadAbnormalData = false;
  }
};

/** 配送数据 */
const initDeliveryData = async () => {
  try {
    details.loadingObj.deliveryData = true;
    const res = await postDeliveryData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.deliveryDataInfo = data || [];
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.deliveryData = false;
  }
};

/** 签收数据 */
const initSignforData = async () => {
  try {
    details.loadingObj.signforData = true;
    const res = await postSignforData({});
    const { code, data } = res.data;
    if (code !== 200) return;
    details.signforDataInfo = data || [];
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.signforData = false;
  }
};

const handleRefresh = () => {
  initAllocationData();
  initHandOrderData();
  initOpenOrderData();
  initOpenOrderIncome();
  initTrunklineCarsData();
  initTrunklineHandOrderData();
  initUnloadAbnormalData();
  initDeliveryData();
  initSignforData();
};

handleRefresh();

/** 异常数据 */
const abnormal_Info = computed(() => {
  const _obj =
    abnormal_status.value === 'day'
      ? {
          sendNum: details.unloadAbnormalDataInfo.sendDayNum,
          noDealNum: details.unloadAbnormalDataInfo.noDealDayNum,
          abnormalRate: details.unloadAbnormalDataInfo.abnormalDayRate,
        }
      : {
          sendNum: details.unloadAbnormalDataInfo.sendMonthNum,
          noDealNum: details.unloadAbnormalDataInfo.noDealMonthNum,
          abnormalRate: details.unloadAbnormalDataInfo.abnormalMonthRate,
        };

  return _obj;
});

/** 配送数据 */
const delivery_info = computed(() => {
  let _obj = {};

  for (let i = 0; i < details.deliveryDataInfo.length; i++) {
    const value = details.deliveryDataInfo[i];
    if (delivery_status.value + '' === value.type + '') _obj = value;
  }

  return _obj;
});

/** 配送自提数据 */
const delivery_bill_info = computed(() => {
  let _obj = {};

  for (let i = 0; i < details.deliveryDataInfo.length; i++) {
    const value = details.deliveryDataInfo[i];
    if (value.type + '' === '3') _obj = value;
  }

  return _obj;
});

/** 签收数据 */
const signforData = computed(() => {
  let _obj = {};

  for (let i = 0; i < details.signforDataInfo.length; i++) {
    const value = details.signforDataInfo[i];
    if (value.type + '' === signforData_status.value) _obj = value;
  }

  _obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0);
  _obj.clerkSignforScaleNum
    ? _obj.clerkSignforScaleNum
    : (_obj.clerkSignforScaleNum = _obj.clerkSignforScale || 0);
  _obj.clerkOverTimeScaleNum
    ? _obj.clerkOverTimeScaleNum
    : (_obj.clerkOverTimeScaleNum = _obj.clerkOverTimeScale || 0);

  _obj.signScale = computeNumber(_obj.signScaleNum || 0, '*', 100).result.toFixed(2);
  _obj.clerkSignforScale = computeNumber(_obj.clerkSignforScaleNum || 0, '*', 100).result.toFixed(
    2
  );
  _obj.clerkOverTimeScale = computeNumber(_obj.clerkOverTimeScaleNum || 0, '*', 100).result.toFixed(
    2
  );

  return _obj;
});

/** 签收数据 -- 自提 */
const billSignforData = computed(() => {
  let _obj = {};

  for (let i = 0; i < details.signforDataInfo.length; i++) {
    const value = details.signforDataInfo[i];
    if (value.type + '' === billSignforData_status.value) _obj = value;
  }

  _obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0);
  _obj.clerkSignforScaleNum
    ? _obj.clerkSignforScaleNum
    : (_obj.clerkSignforScaleNum = _obj.clerkSignforScale || 0);
  _obj.clerkOverTimeScaleNum
    ? _obj.clerkOverTimeScaleNum
    : (_obj.clerkOverTimeScaleNum = _obj.clerkOverTimeScale || 0);

  _obj.signScale = computeNumber(_obj.signScaleNum || 0, '*', 100).result.toFixed(2);
  _obj.clerkSignforScale = computeNumber(_obj.clerkSignforScaleNum || 0, '*', 100).result.toFixed(
    2
  );
  _obj.clerkOverTimeScale = computeNumber(_obj.clerkOverTimeScaleNum || 0, '*', 100).result.toFixed(
    2
  );

  return _obj;
});
</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;
  }
}

.data_box {
  padding: 16px;
  min-width: 80px;
  word-break: break-all;
  background-color: #e5f8f3;
  border-radius: 4px;
  border-bottom: 5px solid #00c090;

  &.orange {
    background: #fff4ec;
    border-color: #ff9545;
  }

  &.blue {
    background-color: #f2f7fb;
    border-color: #2693ff;
  }

  &.red {
    background: #ffeeed;
    border-color: #ff5d52;
  }

  &.purple {
    background: #f0eff8;
    border-color: #6b60c2;
  }
}

.mr5px {
  margin-right: 5px;
}

.text_center {
  text-align: center;
}
</style>
<style lang="scss" scope>
@import '../../styles/flowStyle.scss';

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