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 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E9=97=AE=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>
From 9548d116811f6b6b5a27350b9aeac944ebf64fb7 Mon Sep 17 00:00:00 2001
From: qb <1191961160@qq.com>
Date: Sun, 7 Apr 2024 22:35:39 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/router/views/index.js | 75 ++++++++++++++++-----------------------
1 file changed, 30 insertions(+), 45 deletions(-)
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 9a12f8c4..1051ba49 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/index2.vue'),
+ component: () => import(/* webpackChunkName: "views" */ '@/views/wel/index.vue'),
},
{
path: 'dashboard',
@@ -1516,7 +1516,6 @@ export default [
],
},
-
{
path: '/financialsector/Financialse/FinancialDelivery',
component: Layout,
@@ -1532,7 +1531,7 @@ export default [
component: () => import('@/views/financialsector/Financialse/FinancialDelivery.vue'),
},
],
- },
+ },
{
path: '/financialsector/FinanceHome',
@@ -1551,48 +1550,34 @@ export default [
],
},
-
-
-// {
-// // 这是父路由，财务主页面
-// path: '/financialsector/FinanceHome',
-// component: Layout,
-// redirect: '/financialsector/FinanceHome',
-// children: [
-// {
-// // 这是父页面的默认视图
-// meta: {
-// i18n: 'dict',
-// keepAlive: false,
-// },
-// path: '/financialsector/FinanceHome',
-// name: '财务',
-// component: () => import('@/views/financialsector/FinanceHome.vue'),
-// },
-// {
-// // 子页面
-// meta: {
-// i18n: 'dict',
-// keepAlive: false,
-// },
-// path: '/financialsector/Financialse/FinancialWarehousing',
-// name: '新增模板',
-// component: () => import('@/views/financialsector/Financialse/FinancialWarehousing.vue'),
-// },
-// ],
-// },
-
-
-
-
-
-
-
-
-
-
-
-
+ // {
+ // // 这是父路由，财务主页面
+ // path: '/financialsector/FinanceHome',
+ // component: Layout,
+ // redirect: '/financialsector/FinanceHome',
+ // children: [
+ // {
+ // // 这是父页面的默认视图
+ // meta: {
+ // i18n: 'dict',
+ // keepAlive: false,
+ // },
+ // path: '/financialsector/FinanceHome',
+ // name: '财务',
+ // component: () => import('@/views/financialsector/FinanceHome.vue'),
+ // },
+ // {
+ // // 子页面
+ // meta: {
+ // i18n: 'dict',
+ // keepAlive: false,
+ // },
+ // path: '/financialsector/Financialse/FinancialWarehousing',
+ // name: '新增模板',
+ // component: () => import('@/views/financialsector/Financialse/FinancialWarehousing.vue'),
+ // },
+ // ],
+ // },
// {
// path: '/aftersales/aftersalesWorkOrderSS',