From a5cc87ede3d013193e89221e146d4bd006757916 Mon Sep 17 00:00:00 2001
From: qb <1191961160@qq.com>
Date: Sun, 7 Apr 2024 19:26:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/views/index.js                     |    2 +-
 src/views/financialsector/FinanceHome.vue     |   29 +-
 .../Financialse/FinancialBill.vue             |   57 +-
 src/views/wel/index.vue                       | 1100 ++++-------------
 src/views/wel/index1.vue                      |  248 ----
 src/views/wel/index2.vue                      |  926 ++++++++++++++
 6 files changed, 1206 insertions(+), 1156 deletions(-)
 delete mode 100644 src/views/wel/index1.vue
 create mode 100644 src/views/wel/index2.vue

diff --git a/src/router/views/index.js b/src/router/views/index.js
index 776b4b34..7b455515 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -13,7 +13,7 @@ export default [
         meta: {
           i18n: 'dashboard',
         },
-        component: () => import(/* webpackChunkName: "views" */ '@/views/wel/index.vue'),
+        component: () => import(/* webpackChunkName: "views" */ '@/views/wel/index2.vue'),
       },
       {
         path: 'dashboard',
diff --git a/src/views/financialsector/FinanceHome.vue b/src/views/financialsector/FinanceHome.vue
index 77aa93ea..01887b15 100644
--- a/src/views/financialsector/FinanceHome.vue
+++ b/src/views/financialsector/FinanceHome.vue
@@ -36,10 +36,12 @@
     <div class="content">
       <el-tabs type="border-card">
         <template v-for="item in ServiceList" :key="item.label">
-          <el-tab-pane v-if="item.state" :label="item.label" >
-            <span v-if="item.label == '提货'">提货</span>
+          <el-tab-pane v-if="item.state" :label="item.label">
+            <span v-if="item.label == '提货'"><FinancialBill /></span>
             <span v-if="item.label == '干线'">干线</span>
-            <span v-if="item.label == '仓储'"><FinancialWarehousing :templateData="templateInfo"/></span>
+            <span v-if="item.label == '仓储'"
+              ><FinancialWarehousing :templateData="templateInfo"
+            /></span>
             <span v-if="item.label == '配送'">配送</span>
             <span v-if="item.label == '安装'">安装</span>
           </el-tab-pane>
@@ -50,17 +52,20 @@
 </template>
 
 <script setup>
-
 import { ref, defineAsyncComponent } from 'vue';
 
 const FinancialWarehousing = defineAsyncComponent(() =>
   import('@/views/financialsector/Financialse/FinancialWarehousing.vue')
 );
+
+const FinancialBill = defineAsyncComponent(() =>
+  import('@/views/financialsector/Financialse/FinancialBill.vue')
+);
 const form = ref({});
-const tabNum=ref('干线')
-const templateInfo=ref({
-  name:'参数'
-})
+const tabNum = ref('干线');
+const templateInfo = ref({
+  name: '参数',
+});
 const ServiceList = ref([
   {
     label: '提货',
@@ -95,13 +100,13 @@ const ServiceList = ref([
 ]);
 // 点击菜单
 const isChecked = val => {
-  console.log(val,'点击的');
-  val.state=!val.state
+  console.log(val, '点击的');
+  val.state = !val.state;
 };
 // 点击移除
 const removeTag = value => {
-  ServiceList.value.find(res => res.value == value).check  = false;
-  ServiceList.value.find(res => res.value == value).state  = false;
+  ServiceList.value.find(res => res.value == value).check = false;
+  ServiceList.value.find(res => res.value == value).state = false;
 };
 </script>
 
diff --git a/src/views/financialsector/Financialse/FinancialBill.vue b/src/views/financialsector/Financialse/FinancialBill.vue
index 323dc49e..cc4af7db 100644
--- a/src/views/financialsector/Financialse/FinancialBill.vue
+++ b/src/views/financialsector/Financialse/FinancialBill.vue
@@ -7,12 +7,22 @@
     </el-form>
 
     <el-divider content-position="left">整车计费</el-divider>
-    <el-form inline>
-      <el-form-item label="车型"></el-form-item>
-      <el-form-item label="整车计费（ 元/车 ）">
-        <el-input-number :min="0" :controls="false" :precision="2" :value-on-clear="0" />
-      </el-form-item>
-    </el-form>
+    <div class="flex">
+      <el-form inline>
+        <el-form-item label="车型"></el-form-item>
+        <el-form-item label="整车计费（ 元/车 ）">
+          <el-input-number :min="0" :controls="false" :precision="2" :value-on-clear="0" />
+        </el-form-item>
+      </el-form>
+
+      <div class="el_table_operation">
+        <span class="el_table_operation_span_a">-</span>
+      </div>
+
+      <div class="el_table_operation">
+        <span class="el_table_operation_span_b">+</span>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -29,4 +39,39 @@
 :deep(.el-input-number .el-input__inner) {
   text-align: left;
 }
+
+.el_table_operation {
+  width: 70px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .el_table_operation_span_a,
+  .el_table_operation_span_b {
+    font-size: 20px;
+    font-weight: bold;
+    width: 40%;
+    border: 2px solid #f00;
+    color: #f00;
+    border-radius: 6px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 20px;
+    box-sizing: border-box;
+    height: 100%;
+  }
+  .el_table_operation_span_b {
+    border: 2px solid #0d83b7;
+    color: #0d83b7;
+  }
+
+  .el_table_operation_span_a:hover {
+    background-color: #f00;
+    color: #ccc;
+  }
+  .el_table_operation_span_b:hover {
+    background-color: #0d83b7;
+    color: #ccc;
+  }
+}
 </style>
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 46f82a80..80394da6 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,920 +1,222 @@
 <template>
-  <div class="main_container">
-    <!-- 开单数据 && 开单收入 -->
-    <div class="flex mb10 row_first">
-      <!-- 开单数据 -->
-      <div class="mr10 box1 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
-
-          <div class="title">开单数据</div>
-        </div>
-
-        <!-- 数据 -->
-        <div class="border pd10">
-          <div class="height40pt flex-c-sb border-bottom">
-            <div class="align_center">
-              <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />
-
-              <div>总计</div>
-            </div>
-
-            <div class="align_center">
-              <span class="data mr10">123</span>
-              <span>件</span>
-            </div>
-          </div>
-
-          <div class="height40pt flex-c-sb border-bottom">
-            <div class="align_center">
-              <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />
-
-              <div>当月</div>
-            </div>
-
-            <div class="align_center">
-              <span class="data mr10">123</span>
-              <span>件</span>
-            </div>
-          </div>
-
-          <div class="height40pt flex-c-sb">
-            <div class="align_center">
-              <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />
-
-              <div>当日</div>
-            </div>
-
-            <div class="align_center">
-              <span class="data mr10">123</span>
-              <span>件</span>
-            </div>
-          </div>
-        </div>
+  <div class="bx" v-if="indexState">
+    <div class="left">
+      <div class="tptitl">
+        <img src="./static/topicon.png" />
+        <span>发货操作</span>
       </div>
-
-      <!-- 开单收入 -->
-      <div class="flex1 box2 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
-
-          <div class="title">开单收入</div>
-        </div>
-
-        <div class="flex">
-          <!-- 统计数据 -->
-          <div class="border flexnone totol pd10">
-            <!-- 总计 -->
-            <div class="height40pt flex-c-sb border-bottom">
-              <div class="align_center">
-                <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />
-
-                <div>总计</div>
-              </div>
-
-              <div class="align_center">
-                <span class="data mr10">123</span>
-                <span>件</span>
-              </div>
-            </div>
-
-            <div class="monthData flex-c-sb">
-              <!-- 当月 -->
-              <div class="flex1">
-                <div class="align_center">
-                  <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />
-
-                  <div>当月</div>
-                </div>
-
-                <div class="align_center">
-                  <span class="data mr10">123</span>
-                  <span>件</span>
-                </div>
-              </div>
-
-              <!-- 当日 -->
-              <div class="flex1 border-left">
-                <div class="align_center">
-                  <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />
-
-                  <div>当日</div>
-                </div>
-
-                <div class="align_center">
-                  <span class="data mr10">123</span>
-                  <span>件</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 详情数据 -->
-          <div class="detailsData flex1 ml10">
-            <div class="flex-c-sb">
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-            </div>
-            <div class="flex-c-sb mt10">
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-              <div class="item flex1 mr10">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-
-              <div class="item flex1">
-                <div>
-                  <span class="data mr5px">123123</span>
-                  <span>元</span>
-                </div>
-
-                <div>干线</div>
-              </div>
-            </div>
-          </div>
-        </div>
+      <div 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>
     </div>
-
-    <!-- 当前所在库位数据 && 库位数据 -->
-    <div class="flex mb10 row_second">
-      <!-- 当前所在库位数据 -->
-      <div class="mr10 box1 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
-
-          <div class="title">当前所在库位数据</div>
-        </div>
-
-        <!-- 数据 -->
-        <div class="border data_container pd10 flex">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>零担</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>三方中转</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>商配</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>市配</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>自提</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>已打托</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-        </div>
+    <div class="ztjk">
+      <img src="./static/9.png" />
+      <span>到货操作</span>
+    </div>
+    <div class="rigth">
+      <div class="tptitl">
+        <img src="./static/topicon.png" />
+        <span>到货操作</span>
       </div>
-
-      <!-- 库位数据 -->
-      <div class="flex1 box2 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
-
-          <div class="title">库位数据</div>
-        </div>
-
-        <div class="border data_container pd10 flex">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>已上架</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>空置</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>已上架</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>未上架</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-        </div>
+      <div 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>
     </div>
-
-    <!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 -->
-    <div class="flex mb10 row_third">
-      <!-- 当前所在库位数据 -->
-      <div class="mr10 box1 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
-
-          <div class="title">干线待发运在库数据</div>
-        </div>
-
-        <!-- 数据 -->
-        <div class="border data_container pd10 flex">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>运单总数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">单</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>在库总件数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>在库总重量</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">kg</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>在库总方数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">m³</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 干线车次统计 -->
-      <div class="mr10 flex1 box2 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
-
-          <div class="title">干线车次统计</div>
-        </div>
-
-        <div class="border data_container pd10 flex">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总车次</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>在途</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>作业</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>卸车完成</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-        </div>
+    <div class="buts">
+      <div class="tptitl">
+        <img src="./static/topicon.png" />
+        <span>回单管理</span>
       </div>
-
-      <!-- 异常数据 -->
-      <div class="flex1 box2 view_box">
-        <!-- 标题 -->
-        <div class="flex-c-sb mb20">
-          <div class="align_center">
-            <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
-
-            <div class="title">异常数据</div>
-          </div>
-
-          <div class="align_center">
-            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
-              当天
-            </div>
-            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
-              当月
-            </div>
-          </div>
-        </div>
-
-        <div class="abnormal_container flex-c-sb">
-          <div class="abnormal_item green">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总车次</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-
-          <div class="abnormal_item blue">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总车次</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-
-          <div class="abnormal_item red">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总车次</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">车</span>
-            </div>
-          </div>
-        </div>
+      <div 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>
     </div>
-
-    <!-- 当前配送数据 && 签收数据 -->
-    <div class="flex mb10 row_fourthly">
-      <!-- 当前配送数据 -->
-      <div class="mr10 box1 view_box">
-        <!-- 标题 -->
-        <div class="flex-c-sb mb20">
-          <div class="align_center">
-            <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
-
-            <div class="title">当前配送数据</div>
-          </div>
-
-          <div class="align_center">
-            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
-              市配
-            </div>
-            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
-              商配
-            </div>
-          </div>
-        </div>
-
-        <!-- 数据 -->
-        <div class="border data_container pd10 flex">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>配送计划总数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">单</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总件数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总重量</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">kg</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>总方数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">m³</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>在途件数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 签收数据 -->
-      <div class="flex1 box2 view_box">
-        <!-- 标题 -->
-        <div class="align_center mb20">
-          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
-
-          <div class="title">签收数据</div>
-        </div>
-
-        <div class="border data_container pd10 flex-c-sb">
-          <div class="item">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>已签收</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>未签收</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>签收率</span>
-            </div>
-            <div class="mt10">
-              <span class="data">16899</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>文员签收数</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>文员签收率</span>
-            </div>
-            <div class="mt10">
-              <span class="data">16899</span>
-            </div>
-          </div>
-
-          <div class="item border-left">
-            <div class="align_center">
-              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
-              <span>超时签收</span>
-            </div>
-            <div class="mt10">
-              <span class="data mr5px">16899</span>
-              <span class="">件</span>
-            </div>
-          </div>
-        </div>
+    <div class="el-gl">
+      <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>
     </div>
   </div>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue';
-
-const isActive = ref(false);
+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">
-.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 {
+.info {
   display: flex;
-  align-items: center;
-}
-
-// 开单数据
-.height40pt {
-  height: 60px;
-}
-
-// 数据样式
-.data {
-  font-weight: bold;
-  color: #000;
-  font-family: DIN-Bold;
-  font-size: 20px;
-}
-
-.border {
-  border: 1pt solid #f5f5f6;
-  border-radius: 5px;
-  box-sizing: border-box;
-}
-
-.border-bottom {
-  border-bottom: 1pt solid #f5f5f6;
-  box-sizing: border-box;
-}
-
-.border-left {
-  border-left: 1px solid #f5f5f6;
-  box-sizing: border-box;
-}
-
-// 第一排
-.row_first {
-  & > div {
-    height: 100%;
-  }
-
-  .box1 {
-    height: 100%;
-    width: 340px;
-    box-sizing: border-box;
-    flex: none;
-  }
-
-  // 开单收入
-  .box2 {
-    height: 100%;
-
-    // 统计数据
-    .totol {
-      width: 460px;
-
-      .monthData {
-        height: 120px;
-
-        & > div {
-          height: 80%;
-          flex-direction: column;
-          display: flex;
-          justify-content: space-around;
-          padding: 0 10px;
-          box-sizing: border-box;
-        }
-      }
-    }
-
-    // 详情数据
-    .detailsData {
-      .item {
-        background: #f2f7fb;
-        border-radius: 5px;
-        height: 85px;
-        box-sizing: border-box;
-        padding: 10px;
-        color: #a4b0c2;
-        display: flex;
-        justify-content: space-between;
-        flex-direction: column;
-      }
-    }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  .name {
+    font-size: 40px;
+    color: #d3832a;
+    font-weight: bold;
   }
-}
-
-// 第二排
-.row_second {
-  .dataIcon {
-    height: 14px;
-    width: 14px;
+  .slogan {
+    font-size: 3em;
   }
-
-  .data_container {
-    height: 100px;
-    box-sizing: border-box;
-    padding: 20px 0;
+  .time {
+    display: flex;
+    margin-top: 10px;
+    justify-content: flex-end;
   }
-
-  .item {
-    width: 137px;
-    height: 100%;
-    padding: 0 20px;
-    box-sizing: border-box;
-    flex: none;
+  .title {
+    display: flex;
+    margin-top: 10px;
+    justify-content: flex-end;
   }
 }
-
-// 第三排
-.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;
-      }
-    }
+.el_Hwlogo {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  span {
+    color: #d3832a;
   }
-
-  .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;
-    }
+  img {
+    width: 300px;
+    height: 300px;
   }
-}
-
-// 第四排
-.row_fourthly {
-  @extend .row_third;
-
-  .item {
-    width: 150px;
+  .content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
   }
 }
-
-.mr5px {
-  margin-right: 5px;
+.el-gl {
+  font-weight: 500;
+  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>
@@ -924,3 +226,23 @@ const isActive = ref(false);
   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>
diff --git a/src/views/wel/index1.vue b/src/views/wel/index1.vue
deleted file mode 100644
index 80394da6..00000000
--- a/src/views/wel/index1.vue
+++ /dev/null
@@ -1,248 +0,0 @@
-<template>
-  <div class="bx" v-if="indexState">
-    <div class="left">
-      <div class="tptitl">
-        <img src="./static/topicon.png" />
-        <span>发货操作</span>
-      </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>
-    </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>
-      <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>
-    </div>
-    <div class="buts">
-      <div class="tptitl">
-        <img src="./static/topicon.png" />
-        <span>回单管理</span>
-      </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>
-    </div>
-    <div class="el-gl">
-      <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>
-    </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;
-  }
-  .slogan {
-    font-size: 3em;
-  }
-  .time {
-    display: flex;
-    margin-top: 10px;
-    justify-content: flex-end;
-  }
-  .title {
-    display: flex;
-    margin-top: 10px;
-    justify-content: flex-end;
-  }
-}
-.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;
-  }
-}
-.el-gl {
-  font-weight: 500;
-  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>
-@import '../../styles/flowStyle.scss';
-
-#avue-view {
-  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>
diff --git a/src/views/wel/index2.vue b/src/views/wel/index2.vue
new file mode 100644
index 00000000..46f82a80
--- /dev/null
+++ b/src/views/wel/index2.vue
@@ -0,0 +1,926 @@
+<template>
+  <div class="main_container">
+    <!-- 开单数据 && 开单收入 -->
+    <div class="flex mb10 row_first">
+      <!-- 开单数据 -->
+      <div class="mr10 box1 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
+
+          <div class="title">开单数据</div>
+        </div>
+
+        <!-- 数据 -->
+        <div class="border pd10">
+          <div class="height40pt flex-c-sb border-bottom">
+            <div class="align_center">
+              <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />
+
+              <div>总计</div>
+            </div>
+
+            <div class="align_center">
+              <span class="data mr10">123</span>
+              <span>件</span>
+            </div>
+          </div>
+
+          <div class="height40pt flex-c-sb border-bottom">
+            <div class="align_center">
+              <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />
+
+              <div>当月</div>
+            </div>
+
+            <div class="align_center">
+              <span class="data mr10">123</span>
+              <span>件</span>
+            </div>
+          </div>
+
+          <div class="height40pt flex-c-sb">
+            <div class="align_center">
+              <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />
+
+              <div>当日</div>
+            </div>
+
+            <div class="align_center">
+              <span class="data mr10">123</span>
+              <span>件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 开单收入 -->
+      <div class="flex1 box2 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
+
+          <div class="title">开单收入</div>
+        </div>
+
+        <div class="flex">
+          <!-- 统计数据 -->
+          <div class="border flexnone totol pd10">
+            <!-- 总计 -->
+            <div class="height40pt flex-c-sb border-bottom">
+              <div class="align_center">
+                <img class="mr10 img_16pt" src="@/static/icon_storage.png" alt="" />
+
+                <div>总计</div>
+              </div>
+
+              <div class="align_center">
+                <span class="data mr10">123</span>
+                <span>件</span>
+              </div>
+            </div>
+
+            <div class="monthData flex-c-sb">
+              <!-- 当月 -->
+              <div class="flex1">
+                <div class="align_center">
+                  <img class="mr10 img_16pt" src="@/static/icon_month.png" alt="" />
+
+                  <div>当月</div>
+                </div>
+
+                <div class="align_center">
+                  <span class="data mr10">123</span>
+                  <span>件</span>
+                </div>
+              </div>
+
+              <!-- 当日 -->
+              <div class="flex1 border-left">
+                <div class="align_center">
+                  <img class="mr10 img_16pt" src="@/static/icon_day.png" alt="" />
+
+                  <div>当日</div>
+                </div>
+
+                <div class="align_center">
+                  <span class="data mr10">123</span>
+                  <span>件</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 详情数据 -->
+          <div class="detailsData flex1 ml10">
+            <div class="flex-c-sb">
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+            </div>
+            <div class="flex-c-sb mt10">
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+              <div class="item flex1 mr10">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+
+              <div class="item flex1">
+                <div>
+                  <span class="data mr5px">123123</span>
+                  <span>元</span>
+                </div>
+
+                <div>干线</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 当前所在库位数据 && 库位数据 -->
+    <div class="flex mb10 row_second">
+      <!-- 当前所在库位数据 -->
+      <div class="mr10 box1 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
+
+          <div class="title">当前所在库位数据</div>
+        </div>
+
+        <!-- 数据 -->
+        <div class="border data_container pd10 flex">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>零担</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>三方中转</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>商配</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>市配</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>自提</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>已打托</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 库位数据 -->
+      <div class="flex1 box2 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
+
+          <div class="title">库位数据</div>
+        </div>
+
+        <div class="border data_container pd10 flex">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>已上架</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>空置</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>已上架</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>未上架</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 干线待发运在库数据 && 干线车次统计 && 异常数据 -->
+    <div class="flex mb10 row_third">
+      <!-- 当前所在库位数据 -->
+      <div class="mr10 box1 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
+
+          <div class="title">干线待发运在库数据</div>
+        </div>
+
+        <!-- 数据 -->
+        <div class="border data_container pd10 flex">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>运单总数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">单</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>在库总件数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>在库总重量</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">kg</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>在库总方数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">m³</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 干线车次统计 -->
+      <div class="mr10 flex1 box2 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
+
+          <div class="title">干线车次统计</div>
+        </div>
+
+        <div class="border data_container pd10 flex">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总车次</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>在途</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>作业</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>卸车完成</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 异常数据 -->
+      <div class="flex1 box2 view_box">
+        <!-- 标题 -->
+        <div class="flex-c-sb mb20">
+          <div class="align_center">
+            <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
+
+            <div class="title">异常数据</div>
+          </div>
+
+          <div class="align_center">
+            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
+              当天
+            </div>
+            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
+              当月
+            </div>
+          </div>
+        </div>
+
+        <div class="abnormal_container flex-c-sb">
+          <div class="abnormal_item green">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总车次</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+
+          <div class="abnormal_item blue">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总车次</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+
+          <div class="abnormal_item red">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总车次</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">车</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 当前配送数据 && 签收数据 -->
+    <div class="flex mb10 row_fourthly">
+      <!-- 当前配送数据 -->
+      <div class="mr10 box1 view_box">
+        <!-- 标题 -->
+        <div class="flex-c-sb mb20">
+          <div class="align_center">
+            <img class="mr10 img_13pt" src="@/static/icon_data.png" alt="" />
+
+            <div class="title">当前配送数据</div>
+          </div>
+
+          <div class="align_center">
+            <div :class="{ button: true, active: isActive }" @click="isActive = !isActive">
+              市配
+            </div>
+            <div :class="{ button: true, active: !isActive }" @click="isActive = !isActive">
+              商配
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据 -->
+        <div class="border data_container pd10 flex">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>配送计划总数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">单</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总件数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总重量</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">kg</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>总方数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">m³</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>在途件数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 签收数据 -->
+      <div class="flex1 box2 view_box">
+        <!-- 标题 -->
+        <div class="align_center mb20">
+          <img class="mr10 img_13pt" src="@/static/icon_money.png" alt="" />
+
+          <div class="title">签收数据</div>
+        </div>
+
+        <div class="border data_container pd10 flex-c-sb">
+          <div class="item">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>已签收</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>未签收</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>签收率</span>
+            </div>
+            <div class="mt10">
+              <span class="data">16899</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>文员签收数</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>文员签收率</span>
+            </div>
+            <div class="mt10">
+              <span class="data">16899</span>
+            </div>
+          </div>
+
+          <div class="item border-left">
+            <div class="align_center">
+              <img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" />
+              <span>超时签收</span>
+            </div>
+            <div class="mt10">
+              <span class="data mr5px">16899</span>
+              <span class="">件</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const isActive = ref(false);
+</script>
+
+<style scoped lang="scss">
+.main_container {
+  font-size: 14px;
+  background: #f5f5f6;
+  padding: 0 5px;
+}
+
+.view_box {
+  padding: 10px;
+  padding-top: 8px;
+  background: #fff;
+  border-radius: 5px;
+
+  .title {
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 18px;
+  }
+
+  .img_16pt {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.pd10 {
+  padding: 0 10px;
+}
+
+.align_center {
+  display: flex;
+  align-items: center;
+}
+
+// 开单数据
+.height40pt {
+  height: 60px;
+}
+
+// 数据样式
+.data {
+  font-weight: bold;
+  color: #000;
+  font-family: DIN-Bold;
+  font-size: 20px;
+}
+
+.border {
+  border: 1pt solid #f5f5f6;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+
+.border-bottom {
+  border-bottom: 1pt solid #f5f5f6;
+  box-sizing: border-box;
+}
+
+.border-left {
+  border-left: 1px solid #f5f5f6;
+  box-sizing: border-box;
+}
+
+// 第一排
+.row_first {
+  & > div {
+    height: 100%;
+  }
+
+  .box1 {
+    height: 100%;
+    width: 340px;
+    box-sizing: border-box;
+    flex: none;
+  }
+
+  // 开单收入
+  .box2 {
+    height: 100%;
+
+    // 统计数据
+    .totol {
+      width: 460px;
+
+      .monthData {
+        height: 120px;
+
+        & > div {
+          height: 80%;
+          flex-direction: column;
+          display: flex;
+          justify-content: space-around;
+          padding: 0 10px;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    // 详情数据
+    .detailsData {
+      .item {
+        background: #f2f7fb;
+        border-radius: 5px;
+        height: 85px;
+        box-sizing: border-box;
+        padding: 10px;
+        color: #a4b0c2;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+      }
+    }
+  }
+}
+
+// 第二排
+.row_second {
+  .dataIcon {
+    height: 14px;
+    width: 14px;
+  }
+
+  .data_container {
+    height: 100px;
+    box-sizing: border-box;
+    padding: 20px 0;
+  }
+
+  .item {
+    width: 137px;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    flex: none;
+  }
+}
+
+// 第三排
+.row_third {
+  @extend .row_second;
+  .abnormal_container {
+    height: 100px;
+  }
+
+  .abnormal_item {
+    box-sizing: border-box;
+    padding: 20px;
+    width: 160px;
+    color: #7b8ba4;
+
+    &.red {
+      background: #ffeeed;
+
+      .data {
+        color: #ff5d52;
+      }
+    }
+
+    &.blue {
+      background: #e9f4ff;
+
+      .data {
+        color: #2693ff;
+      }
+    }
+
+    &.green {
+      background: #e5f8f3;
+
+      .data {
+        color: #00c090;
+      }
+    }
+  }
+
+  .button {
+    padding: 0px 10px;
+    height: 18px;
+    line-height: 18px;
+    background: #fff;
+    border: 1px solid #f5f5f6;
+    border-radius: 2px;
+    color: #000;
+    font-size: 12px;
+    transition: all 0.3s;
+    cursor: pointer;
+    &.active {
+      color: #fff;
+      background: #2693ff;
+      border-color: #2693ff;
+    }
+  }
+}
+
+// 第四排
+.row_fourthly {
+  @extend .row_third;
+
+  .item {
+    width: 150px;
+  }
+}
+
+.mr5px {
+  margin-right: 5px;
+}
+</style>
+<style lang="scss" scope>
+@import '../../styles/flowStyle.scss';
+
+#avue-view {
+  background-color: #fff;
+}
+</style>