517 lines
18 KiB
Vue
517 lines
18 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
|
||
|
||
<!-- <el-row :gutter="10" >
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">采购单</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">入库单</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">订单配货</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">入库</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">出库</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">财务</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">清关</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/user/profile" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">运输</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row> -->
|
||
|
||
<el-row :gutter="10" >
|
||
<el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
||
|
||
<CardWithHeader header="数据统计" height="146px" >
|
||
<template v-slot:body>
|
||
<div class="h-overview">
|
||
<el-row>
|
||
<el-col :span="4" style=" border-right: 1px solid #ebebeb;">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList',statQueryType:1})">{{ omsOrderState.issueCount }}</span>
|
||
</div>
|
||
<div class="title" style="color:red">异常件</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList'})">{{ omsOrderState.totalCount }}</span>
|
||
</div>
|
||
<div class="title">总订单量</div>
|
||
</el-col>
|
||
<!-- <el-col :span="3">
|
||
<div class="count">
|
||
<span @click="goRouter('/websites')">0</span>
|
||
</div>
|
||
<div class="title">已保存</div>
|
||
</el-col> -->
|
||
<el-col :span="3">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList',statQueryType:3})">{{ omsOrderState.waitGotCount }}</span>
|
||
</div>
|
||
<div class="title">待接单</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList',statQueryType:4})">{{ omsOrderState.transCount }}</span>
|
||
</div>
|
||
<div class="title">运输中</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList',statQueryType:5})">{{ omsOrderState.dispatchCount }}</span>
|
||
</div>
|
||
<div class="title">派送中</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="count">
|
||
<span @click="goRouter('/OrderMgnt/SendOrderbillList',{action:'queryOrderList',statQueryType:6})">{{ omsOrderState.signCount }}</span>
|
||
</div>
|
||
<div class="title">已签收</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="快捷入口" height="146px" >
|
||
<template v-slot:body>
|
||
<div style="display: flex;justify-content: space-between;flex-flow:row wrap ">
|
||
<el-button size="medium"
|
||
plain @click="goRouter('/orderMgnt/OrderRecord?action=add')" >
|
||
<span>单票下单</span>
|
||
</el-button>
|
||
|
||
<el-button size="medium" plain
|
||
@click="goRouter('/orderMgnt/BatchOrderRecord?action=add')"
|
||
>
|
||
<span>批量下单</span>
|
||
</el-button>
|
||
|
||
<el-button size="medium" plain
|
||
@click="goRouter('/orderMgnt/SendOrderbillList')"
|
||
>
|
||
<span>订单管理</span>
|
||
</el-button>
|
||
|
||
<!-- <el-button size="medium" plain
|
||
><span>单证管理</span>
|
||
</el-button> -->
|
||
<el-button size="medium" plain
|
||
@click="goRouter('/BillMgnt/OmsHasSettleBillQuery')"
|
||
>
|
||
<span>账单管理</span>
|
||
</el-button>
|
||
<el-button size="medium" plain
|
||
@click="goRouter('/BaseMgnt/OmsSupplierList')"
|
||
><span>供应商管理</span></el-button>
|
||
</div>
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<!-- <CardWithHeader header="快捷入口" height="146px">
|
||
<template v-slot:body>
|
||
<el-row :gutter="10" >
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy82" style="color:#f32283"></i>
|
||
<div class="quick-link-title">单票下单</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy130" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">批量下单</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy130" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">订单管理</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy130" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">单证管理</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy130" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">账单管理</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
|
||
<el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" >
|
||
<el-card class="quick-link-box" shadow="hover">
|
||
<router-link to="/" class="quick-link-wrapper">
|
||
<i class="icon iconfont icon-RectangleCopy130" style="color:#2296f3"></i>
|
||
<div class="quick-link-title">供应商管理</div>
|
||
</router-link>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
|
||
</el-row>
|
||
</template>
|
||
</CardWithHeader> -->
|
||
|
||
|
||
|
||
<CardWithHeader header="订单趋势" height="400px">
|
||
<template v-slot:body>
|
||
<LineOrderChart :chart-data="orderStateData" />
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
<CardWithHeader header="账单统计" isLinearBg="false">
|
||
<template v-slot:body>
|
||
<div class="h-overview">
|
||
<el-row>
|
||
<el-col :span="12" >
|
||
<div class="count">
|
||
<span >{{ omsBillFeeState.waitPayMoney||0}}</span>
|
||
</div>
|
||
<div class="title" style="color:red">未付款</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="count">
|
||
<span >{{ omsBillFeeState.totalRecedMoney||0}}</span>
|
||
</div>
|
||
<div class="title">已付款</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="消息通知">
|
||
<template v-slot:body>
|
||
<div class="chart-wrapper">
|
||
<!-- <raddar-chart /> -->
|
||
</div>
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="物流信息查询">
|
||
<template v-slot:body>
|
||
<div style="text-align: center;">
|
||
<el-input v-model="billCode" rows="6" type="textarea" placeholder="请输入运单号查询，最多输入20条信息"></el-input>
|
||
|
||
<el-button type="primary" size="mini" style="margin-top:10px;margin-bottom: 10px;width: 120px;" @click="handleQueryTrace" ><span>查询</span></el-button>
|
||
</div>
|
||
</template>
|
||
</CardWithHeader>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
|
||
const lineChartData = {
|
||
newVisitis: {
|
||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||
},
|
||
messages: {
|
||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||
},
|
||
purchases: {
|
||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||
},
|
||
shoppings: {
|
||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||
}
|
||
}
|
||
import { GridLayout, GridItem } from 'vue-grid-layout'
|
||
|
||
import CardWithHeader from '@/components/CardWithHeader/index.vue';
|
||
import RaddarChart from './common/RaddarChart.vue';
|
||
import LineOrderChart from './common/LineOrderChart.vue';
|
||
import QuickLink from './common/QuickLink.vue';
|
||
import { getOmsOrderStatInfo,getLatestMonthCreateOrderMapList,getOmsBillFeeStatInfo } from "@/api/oms/emisWaybill";
|
||
|
||
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
CardWithHeader,
|
||
RaddarChart,
|
||
LineOrderChart,
|
||
QuickLink,
|
||
GridLayout,
|
||
GridItem
|
||
},
|
||
data() {
|
||
return {
|
||
billCode:null,
|
||
loading: false,
|
||
omsOrderState:{
|
||
dispatchCount: 0,
|
||
issueCount:0,
|
||
signCount:0,
|
||
totalCount:0,
|
||
transCount:0,
|
||
waitGotCount:0
|
||
},
|
||
omsBillFeeState:{
|
||
totalRecMoney:0,
|
||
totalRecedMoney:0,
|
||
waitPayMoney:0
|
||
},
|
||
orderStateData:{
|
||
xAxisData:[],
|
||
orderStateData:[]
|
||
},
|
||
lineChartData: lineChartData.newVisitis,
|
||
layout: [
|
||
{ x: 0, y: 0, w: 3, h: 2, i: '1', static: false },
|
||
{ x: 6, y: 0, w: 3, h: 2, i: '2', static: false },
|
||
],
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['avatar', 'nickName']),
|
||
},
|
||
created() {
|
||
this.initOmsOrderState();
|
||
},
|
||
methods: {
|
||
layoutUpdatedEvent(newLayout) {
|
||
this.layout = newLayout;
|
||
},
|
||
|
||
handleQueryTrace() {
|
||
this.$router.push({ path: '/OrderMgnt/QueryTraceInfo', query: { action:"query",billCode: this.billCode }})
|
||
},
|
||
|
||
initOmsOrderState() {
|
||
// 统计
|
||
getOmsOrderStatInfo().then(response => {
|
||
console.log("====>getOmsOrderStatInfo===>",response);
|
||
this.omsOrderState = response.data;
|
||
});
|
||
|
||
|
||
getLatestMonthCreateOrderMapList().then(response => {
|
||
console.log("====>getLatestMonthCreateOrderMapList===>",response);
|
||
|
||
let xData=[];
|
||
let yData=[];
|
||
// 做数据转换
|
||
response.data.forEach(item => {
|
||
xData.push(item.createDay);
|
||
yData.push(item.totalNum);
|
||
});
|
||
|
||
this.orderStateData.xAxisData=[...xData];
|
||
this.orderStateData.orderStateData=[...yData];
|
||
console.log("====>this.orderStateData===>",this.orderStateData);
|
||
|
||
});
|
||
|
||
getOmsBillFeeStatInfo().then(response => {
|
||
console.log("====>getOmsBillFeeStatInfo===>",response);
|
||
if(response.data!=null){
|
||
this.omsBillFeeState = response.data;
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
},
|
||
moveEvent(){
|
||
|
||
},
|
||
movedEvent(){
|
||
|
||
},
|
||
cardLayOut(){
|
||
|
||
},
|
||
goRouter(path,query){
|
||
this.$router.push({ path: path,query:query });
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.h-overview {
|
||
text-align: center;
|
||
|
||
.title {
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
|
||
.count {
|
||
margin-top: 5px;
|
||
span {
|
||
font-size: 20px;
|
||
color: #000;
|
||
font-weight: 500;
|
||
line-height: 32px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.chart-wrapper {
|
||
background: #fff;
|
||
padding: 16px 16px 0;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.h-systemInfo {
|
||
margin-left: 18px;
|
||
height: 216px;
|
||
}
|
||
@-moz-document url-prefix() {
|
||
.h-systemInfo {
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
.system-label {
|
||
font-weight: 400 !important;
|
||
font-size: 14px !important;
|
||
color: #1f2329;
|
||
}
|
||
|
||
.system-content {
|
||
font-size: 13px !important;
|
||
}
|
||
|
||
.monitor-tags {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 20px;
|
||
|
||
.el-tag {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.right-count {
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
|
||
.count-item {
|
||
display: inline-block;
|
||
margin: 0 4px 0 24px;
|
||
|
||
.el-tag{
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.header{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
|
||
.title{
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
.num{
|
||
font-weight: normal;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|