diff --git a/src/utils/print.js b/src/utils/print.js
index 26f4bf5e..6c9fafba 100644
--- a/src/utils/print.js
+++ b/src/utils/print.js
@@ -55,9 +55,9 @@ const print = (nodeList, type = 'deliveryPrint') => {
     if (type === 'titlePrint') handleTitlePrint(LODOP, templateData)
     else handleDeliveryPrint(LODOP, templateData)
     // LODOP.NewPage()
-    // LODOP.PRINT(); //直接打印
+    LODOP.PRINT(); //直接打印
   });
-  LODOP.PREVIEW(); //预览(预览打印无脚标)
+  // LODOP.PREVIEW(); //预览(预览打印无脚标)
 };
 
 const newPrint = nodeName => {
@@ -88,8 +88,8 @@ const hwyPrint2 = nodeList => {
   nodeList.forEach(orderNode => {
    
     // LODOP.NewPage()100
-    // LODOP.PRINT(); //直接打印
-    LODOP.PRINT_DESIGN();
+    LODOP.PRINT(); //直接打印
+    // LODOP.PRINT_DESIGN();
   });
   // LODOP.PREVIEW(); //预览(预览打印无脚标)
 };
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 80394da6..ab6bd1e0 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,222 +1,1600 @@
 <template>
-  <div class="bx" v-if="indexState">
-    <div class="left">
-      <div class="tptitl">
-        <img src="./static/topicon.png" />
-        <span>发货操作</span>
+  <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="onebx1">
-        <div class="item1">
-          <img src="./static/1.png" />
-          <span>提货</span>
-        </div>
-        <div class="item2">
-          <img src="./static/2.png" />
-          <span>预开单</span>
-        </div>
-        <div class="item3">
-          <img src="./static/3.png" />
-          <span>创建运单</span>
-        </div>
-        <div class="item4">
-          <img src="./static/4.png" />
-          <span>补录运单</span>
-        </div>
-        <div class="item5">
-          <img src="./static/5.png" />
-          <span>短驳发车</span>
-        </div>
-        <div class="item6">
-          <img src="./static/6.png" />
-          <span>外部中转</span>
-        </div>
-        <div class="item7">
-          <img src="./static/7.png" />
-          <span>库存管理</span>
-        </div>
-        <div class="item8">
-          <img src="./static/8.png" />
-          <span>车辆配载</span>
-        </div>
-        <img class="upimg" src="./static/up.png" />
-        <img class="rigth1" src="./static/rigth.png" />
-        <img class="rigth2" src="./static/rigth.png" />
-        <img class="rigth3" src="./static/rigth.png" />
-        <img class="rigth4" src="./static/rigth.png" />
-        <img class="rigthall" src="./static/rigthall.png" />
+
+      <!-- 开单收入 -->
+      <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="ztjk">
-      <img src="./static/9.png" />
-      <span>到货操作</span>
-    </div>
-    <div class="rigth">
-      <div class="tptitl">
-        <img src="./static/topicon.png" />
-        <span>到货操作</span>
+
+    <!-- 当前所在库位数据 && 库位数据 -->
+    <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="onebx1">
-        <div class="item1">
-          <img src="./static/10.png" />
-          <span>到站卸车</span>
-        </div>
-        <div class="item2">
-          <img src="./static/11.png" />
-          <span>库存管理</span>
-        </div>
-        <div class="item3">
-          <img src="./static/12.png" />
-          <span>短驳接收</span>
-        </div>
-        <div class="item4">
-          <img src="./static/13.png" />
-          <span>外部中转</span>
-        </div>
-        <div class="item5">
-          <img src="./static/14.png" />
-          <span>送货</span>
-        </div>
-        <div class="item6">
-          <img src="./static/15.png" />
-          <span>中转签收</span>
-        </div>
-        <div class="item7">
-          <img src="./static/16.png" />
-          <span>送货签收</span>
-        </div>
-        <div class="item8">
-          <img src="./static/17.png" />
-          <span>自提签收</span>
-        </div>
-        <img class="upimg" src="./static/down.png" />
-        <img class="rigth1" src="./static/rigth.png" />
-        <img class="rigth2" src="./static/rigth.png" />
-        <img class="rigth3" src="./static/rigth.png" />
-        <img class="rigth4" src="./static/rigth.png" />
-        <img class="rigthall" src="./static/rigthall2.png" />
-        <img class="leftall" src="./static/leftall.png" />
+
+      <!-- 库位数据 -->
+      <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="buts">
-      <div class="tptitl">
-        <img src="./static/topicon.png" />
-        <span>回单管理</span>
+
+    <!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 -->
+    <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="onebx1">
-        <div class="item1">
-          <img src="./static/18.png" />
-          <span>回单回收</span>
-        </div>
-        <div class="item2">
-          <img src="./static/19.png" />
-          <span>回单寄出</span>
-        </div>
-        <div class="item3">
-          <img src="./static/20.png" />
-          <span>回单接收</span>
-        </div>
-        <div class="item4">
-          <img src="./static/21.png" />
-          <span>回单发放</span>
-        </div>
-        <img class="left1" src="./static/rigth.png" />
-        <img class="left2" src="./static/rigth.png" />
-        <img class="left3" src="./static/rigth.png" />
+
+      <!-- 异常数据 -->
+      <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="el-gl">
-      <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>
-  <div v-else 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 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>
-import { ref, onMounted } from 'vue';
-const indexState = ref(false);
-const currentTime = ref('0000年00月00日00时00分00秒');
-const name = ref('');
-name.value = JSON.parse(localStorage.getItem('TWMS-userInfo')).content.real_name;
-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);
-</script>
-<style scoped lang="scss">
-.info {
-  display: flex;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  .name {
-    font-size: 40px;
-    color: #d3832a;
-    font-weight: bold;
+<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;
   }
-  .slogan {
-    font-size: 3em;
+};
+
+/** 卸车异常数据 */
+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;
   }
-  .time {
-    display: flex;
-    margin-top: 10px;
-    justify-content: flex-end;
+};
+
+/** 配送数据 */
+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 {
-    display: flex;
-    margin-top: 10px;
-    justify-content: flex-end;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 18px;
+  }
+
+  .img_16pt {
+    width: 20px;
+    height: 20px;
   }
 }
-.el_Hwlogo {
-  width: 100%;
-  height: 100%;
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.pd10 {
+  padding: 0 10px;
+}
+
+.align_center {
   display: flex;
   align-items: center;
-  justify-content: center;
-  span {
-    color: #d3832a;
+}
+
+// 开单数据
+.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;
   }
-  img {
-    width: 300px;
-    height: 300px;
+}
+
+// 第三排
+.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;
+      }
+    }
   }
-  .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
+
+  .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;
+    }
   }
 }
-.el-gl {
-  font-weight: 500;
+
+// 第四排
+.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;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  width: 15%;
-  background-color: #fff;
-  border-radius: 32px;
-  padding: 5px;
-  box-sizing: border-box;
-  border: 1px solid #f1eeee69;
-  box-shadow: 4px 6px 0 #d3dff6, 1px 1px 9px #d3dff6;
-  height: 762px;
 }
 </style>
 <style lang="scss" scope>
@@ -226,23 +1604,3 @@ setInterval(() => {
   background-color: #fff;
 }
 </style>
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  name: 'wel',
-  data() {
-    return {
-      activeNames: ['1', '2', '3', '5'],
-      logActiveNames: ['29'],
-    };
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-  },
-  methods: {
-    handleChange(val) {
-      window.console.log(val);
-    },
-  },
-};
-</script>