logpm_page/src/views/wel/index.vue

<template>
  <!-- 数据看板 -->
  <template v-if="details.pageType === 2">
    <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 class="align_center">
                <span class="data mr10">{{ details.openOrderDataInfo.totalCount || 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 class="align_center">
                <span class="data mr10">{{ details.openOrderDataInfo.monthCount || 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 class="align_center">
                <span class="data mr10">{{ details.openOrderDataInfo.dayCount || 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 ? signforData.clerkOverTimeScale : 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 ? billSignforData.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">{{ 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 ? billSignforData.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">{{ 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 ? billSignforData.clerkOverTimeScale : 0 }}
                </div>
                <div class="">%</div>
              </div>
              <div class="">
                <span>签收超时率</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <!-- 公司首页 -->
  <template v-else>
    <div class="el_Hwlogo">
      <div class="content">
        <img src="/public/img/p-logo.png" alt="" />
        <div class="info">
          <div class="name">{{ name }}</div>
          <div class="slogan">您好！欢迎使用货无忧</div>
          <div class="title">成都数联物科信息技术有限公司</div>
          <div class="time">{{ currentTime }}</div>
        </div>
      </div>
    </div>
  </template>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import { computeNumber } from '@/utils/util.js';
import { getStore } from '@/utils/store';

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

const details = reactive({
  /** 开单数据 */
  openOrderDataInfo: {
    /** 开单 -- 当日 -- 单 */
    dayNum: 0,
    /** 开单 -- 当月 -- 单 */
    monthNum: 0,
    /** 开单 -- 总计 -- 单 */
    totalNum: 0,
    /** 开单 -- 当日 -- 单 */
    dayCount: 0,
    /** 开单 -- 当月 -- 单 */
    monthCount: 0,
    /** 开单 -- 总计 -- 件 */
    totalCount: 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,
  },
  /** 1 -- 公司首页, 2 -- 数据看板 */
  pageType: 1,
});

const info = localStorage.getItem('TWMS-userInfo');

const _userInfo = info ? JSON.parse(info) : {};

console.log('_userInfo :>> ', _userInfo);

const name = ref('');
const currentTime = ref('0000年00月00日00时00分00秒');

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 = () => {
  /** 不显示首页数据看板的租户 */
  const blackArr = ['645789', '332207'];
  details.pageType =
    (_userInfo.content && _userInfo.content.role_id + '' === '1713793784178806785') ||
    blackArr.includes(_userInfo.content.tenant_id + '')
      ? 1
      : 2;

  let timer = setInterval(() => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    currentTime.value = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;
  }, 1000);

  if (details.pageType === 2) {
    clearInterval(timer);
    timer = null;
    initAllocationData();
    initHandOrderData();
    initOpenOrderData();
    initOpenOrderIncome();
    initTrunklineCarsData();
    initTrunklineHandOrderData();
    initUnloadAbnormalData();
    // initDeliveryData();
    // initSignforData();
  } else {
    name.value = _userInfo.content.real_name;
  }
};

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: 400px;
    box-sizing: border-box;
    flex: none;
  }

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

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

      .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;
}

.el_Hwlogo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    color: #d3832a;
  }
  img {
    width: 300px;
    height: 300px;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .info {
    display: flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .name {
      font-size: 40px;
      color: #d3832a;
      font-weight: bold;
    }
    .slogan {
      font-size: 3em;
    }
    .time {
      display: flex;
      margin-top: 10px;
      justify-content: flex-end;
    }
    .title {
      display: flex;
      margin-top: 10px;
      justify-content: flex-end;
    }
  }
}
</style>
<style lang="scss" scope>
@import '../../styles/flowStyle.scss';

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