aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
82797643cb
emis-frontend/src/views/emis/dashboard.vue

515 lines
20 KiB
Vue
Raw Normal View History

md
2023-11-27 08:29:42 +00:00
<template>
<div class="dashboard-container">
md
2024-05-07 04:53:25 +00:00
md
2023-11-27 08:29:42 +00:00
<!-- <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">
md
2024-11-25 01:25:50 +00:00
<CardWithHeader header="快捷方式" height="136px" >
md
2023-11-27 08:29:42 +00:00
<template v-slot:body>
md
2024-11-25 01:25:50 +00:00
<div style="display: flex;justify-content: flex-start;flex-flow:row wrap ">
<router-link class="quick-link-wrapper" v-for="(quickItem,index) in quickActionList" :key="index" :to="quickItem.path">
<div class="quick-link-title">{{ quickItem.title }}</div>
</router-link>
<!-- <el-button size="medium" type="text" style="color: #b12e29;font-weight: 500;text-decoration: underline;" plain v-for="(quickItem,index) in quickActionList" :key="index" @click="change(quickItem)"><span>{{ quickItem.title }}</span></el-button> -->
md
2023-11-27 08:29:42 +00:00
</div>
</template>
</CardWithHeader>
md
2024-11-25 01:25:50 +00:00
<!-- <CardWithHeader header="待办提醒" height="146px">
md
2023-11-27 08:29:42 +00:00
<template v-slot:body>
<QuickLink ></QuickLink>
</template>
md
2024-11-25 01:25:50 +00:00
</CardWithHeader> -->
md
2023-11-27 08:29:42 +00:00
md
2024-11-25 01:25:50 +00:00
<CardWithHeader header="今日开单统计" height="146px" >
md
2023-11-27 08:29:42 +00:00
<template v-slot:body>
<div class="h-overview">
<el-row>
md
2024-11-25 01:25:50 +00:00
<el-col :span="5">
<div class="count">
<span @click="goRouter('/')" style="color: blue;">
{{queryStatInfoMap?queryStatInfoMap.totalNum:0}}
<span style="color: gray;font-size: 14px;">票</span>
</span>
<!-- <span @click="goRouter('/')">
{{queryStatInfoMap?queryStatInfoMap.totalNum:0}} <span>当月</span>
</span> -->
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
<div class="title">当日票数</div>
</el-col>
md
2023-11-27 08:29:42 +00:00
<el-col :span="6">
md
2024-11-25 01:25:50 +00:00
<div class="count" style="color: red;">
<span @click="goRouter('/websites')"><span style="color: gray;font-size: 14px;">￥</span>{{queryStatInfoMap?queryStatInfoMap.totalFreight:0}}
</span>
</div>
<div class="title">总运费</div>
</el-col>
<el-col :span="4">
md
2023-11-27 08:29:42 +00:00
<div class="count">
md
2024-11-25 01:25:50 +00:00
<span @click="goRouter('/')">{{queryStatInfoMap?queryStatInfoMap.totalBillWeight:0}}
<span style="color: gray;font-size: 14px;">kg</span>
</span>
md
2023-11-27 08:29:42 +00:00
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
md
2024-11-25 01:25:50 +00:00
<div class="title">实际重量</div>
</el-col>
<el-col :span="4">
<div class="count">
<span @click="goRouter('/')">{{queryStatInfoMap?queryStatInfoMap.totalVolume:0}}
<span style="color: gray;font-size: 14px;">m³</span>
</span>
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
<div class="title">体积</div>
</el-col>
<el-col :span="4">
<div class="count">
<span @click="goRouter('/websites')">{{queryStatInfoMap?queryStatInfoMap.totalSettlementWeight:0}}</span>
<span style="color: gray;font-size: 14px;">kg</span>
</div>
<div class="title">结算重量</div>
</el-col>
<!-- <el-col :span="6">
<LineChart :chart-data="lineChartData" />
</el-col> -->
</el-row>
</div>
</template>
</CardWithHeader>
<CardWithHeader header="回款预警统计" height="146px" >
<template v-slot:body>
<div class="h-overview">
<el-row>
<el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">{{queryStatInfoMap?queryStatInfoMap.totalSettlementWeight:0}}</span>
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
<div class="title">结算重量(kg)</div>
md
2023-11-27 08:29:42 +00:00
</el-col>
<el-col :span="6">
<div class="count">
md
2024-11-25 01:25:50 +00:00
<span @click="goRouter('/websites')">{{queryStatInfoMap?queryStatInfoMap.totalFreight:0}}</span>
md
2023-11-27 08:29:42 +00:00
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
md
2024-11-25 01:25:50 +00:00
<div class="title">应收总运费(kg)</div>
md
2023-11-27 08:29:42 +00:00
</el-col>
md
2024-11-25 01:25:50 +00:00
<!-- <el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">{{queryStatInfoMap?queryStatInfoMap.totalNum:0}}</span>
</div>
<div class="title">当月计提</div>
</el-col> -->
md
2023-11-27 08:29:42 +00:00
<el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">0</span>
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
md
2024-11-25 01:25:50 +00:00
<div class="title">已收款/总应收款</div>
md
2023-11-27 08:29:42 +00:00
</el-col>
<el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">0</span>
</div>
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
md
2024-11-25 01:25:50 +00:00
<div class="title">已开票/待开票</div>
md
2023-11-27 08:29:42 +00:00
</el-col>
md
2024-11-25 01:25:50 +00:00
<!-- <el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">0</span>
</div>
<div class="title">当月订单/总订单</div>
</el-col> -->
<!-- <el-col :span="6">
<div class="count">
<span @click="goRouter('/websites')">0</span>
</div>
<div class="title">拣货中</div>
</el-col> -->
md
2023-11-27 08:29:42 +00:00
</el-row>
</div>
</template>
</CardWithHeader>
md
2024-11-25 01:25:50 +00:00
<!-- <CardWithHeader header="日单量趋势(最近15天)" height="400px">
md
2023-11-27 08:29:42 +00:00
<template v-slot:body>
md
2024-11-25 01:25:50 +00:00
<LineChart :chart-data="lineChartData" />
md
2023-11-27 08:29:42 +00:00
</template>
md
2024-11-25 01:25:50 +00:00
</CardWithHeader> -->
md
2023-11-27 08:29:42 +00:00
md
2024-11-25 01:25:50 +00:00
<!-- <CardWithHeader header="营业收入" style="margin-top: 20px; margin-bottom: 20px">
md
2023-11-27 08:29:42 +00:00
<template v-slot:body>
md
2024-11-25 01:25:50 +00:00
<v-charts
md
2023-11-27 08:29:42 +00:00
height="383px"
id="networkChart"
type="line"
:option="chartsOption['networkChart']"
:dataZoom="true"
md
2024-11-25 01:25:50 +00:00
/>
md
2023-11-27 08:29:42 +00:00
</template>
md
2024-11-25 01:25:50 +00:00
</CardWithHeader> -->
md
2023-11-27 08:29:42 +00:00
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-card class="box-card" shadow="hover">
<div class="flex items-center" >
<!-- <div>
<el-avatar circle :size="64" :src="avatar" />
</div> -->
<!-- <div style="flex: 1;padding-left: 12px;box-sizing: border-box;"> -->
<div style="flex: 1;padding-left: 0px;box-sizing: border-box;">
md
2024-11-25 01:25:50 +00:00
<div class="head-title" >Hi,{{ownerSiteName}} {{nickName}},欢迎您！</div>
md
2023-11-27 08:29:42 +00:00
<!-- <div class="head-sub-title">有问题可直接联系客服。</div> -->
</div>
</div>
md
2024-11-25 01:25:50 +00:00
<!-- <div style="display:inline-flex;width:100%;margin-top:10px" >
md
2023-11-27 08:29:42 +00:00
<div style="width: 50%;">
md
2024-11-25 01:25:50 +00:00
<span style="font-size: 14px;">预估提成(元)</span>
md
2023-11-27 08:29:42 +00:00
<div style="margin-top: 10px;font-size: 13px;font-weight: 500;">
<span @click="goRouter('/websites')">￥5000.00</span>
</div>
</div>
<div style="width: 50%;">
md
2024-11-25 01:25:50 +00:00
<span style="font-size: 14px;">待回款(元)</span>
md
2023-11-27 08:29:42 +00:00
<div style="margin-top: 10px;font-size: 13px;font-weight: 500;">
<span @click="goRouter('/websites')">￥100000.00</span>
</div>
</div>
md
2024-11-25 01:25:50 +00:00
</div> -->
<!-- <div style="margin-top: 10px;" >
md
2023-11-27 08:29:42 +00:00
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:30%;"
>
<span>立即充值</span>
</el-button>
md
2024-11-25 01:25:50 +00:00
</div> -->
md
2023-11-27 08:29:42 +00:00
</el-card>
<!-- <CardWithHeader header="财务概览" isLinearBg="true">
<template v-slot:body>
</template>
</CardWithHeader> -->
<CardWithHeader header="最新消息">
<template v-slot:body>
<div class="chart-wrapper">
md
2024-11-25 01:25:50 +00:00
<!-- <raddar-chart /> -->
md
2023-11-27 08:29:42 +00:00
</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]
}
}
md
2024-05-07 04:53:25 +00:00
import { GridLayout, GridItem } from 'vue-grid-layout'
md
2024-11-25 01:25:50 +00:00
import { listSimpleAction } from "@/api/system/sysActionStats";
import { getQueryStatInfoMap } from "@/api/emis/emisWaybill";
import {timeDiffTime,timeFormat} from '@/utils/dateUtils'
md
2023-11-27 08:29:42 +00:00
import CardWithHeader from '@/components/CardWithHeader/index.vue';
import RaddarChart from './common/RaddarChart.vue';
import LineChart from './common/LineChart.vue';
import QuickLink from './common/QuickLink.vue';
import { mapGetters } from 'vuex'
export default {
name: 'Index',
components: {
CardWithHeader,
RaddarChart,
LineChart,
QuickLink,
md
2024-05-07 04:53:25 +00:00
GridLayout,
GridItem
md
2023-11-27 08:29:42 +00:00
},
data() {
return {
loading: false,
md
2024-05-07 04:53:25 +00:00
lineChartData: lineChartData.newVisitis,
md
2024-11-25 01:25:50 +00:00
quickActionList:[],
queryStatInfoMap:null,
dateRange:[],
md
2024-05-07 04:53:25 +00:00
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 },
],
md
2023-11-27 08:29:42 +00:00
}
},
computed: {
md
2024-11-25 01:25:50 +00:00
...mapGetters(['avatar', 'nickName','ownerSiteName']),
md
2023-11-27 08:29:42 +00:00
},
created() {
md
2024-11-25 01:25:50 +00:00
this.initQuickActionList();
this.initOrderStatData();
md
2023-11-27 08:29:42 +00:00
},
methods: {
md
2024-11-25 01:25:50 +00:00
initQuickActionList() {
let queryParams={
pageNum: 1,
pageSize: 12,
};
listSimpleAction(queryParams).then(response => {
this.quickActionList = response.rows;
});
},
initOrderStatData(){
// 查询统计
let qParam={
sendSiteCode:null,
params:{
sendSiteCode:null
}
}
if(this.$store.getters.ownerSiteCode!='88888'){
qParam.sendSiteCode=this.$store.getters.ownerSiteCode;
}
const end = new Date()
const start = new Date()
start.setHours(0,0,0,0)
end.setHours(23,59,59,0)
this.dateRange=[timeFormat(start), timeFormat(end)]
let extQParam={...qParam};
// let extQParam=this.addDateRange(qParam, this.dateRange,"sendDate");
getQueryStatInfoMap(extQParam).then(response => {
this.queryStatInfoMap = response.data;
});
},
ishttp(url) {
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
},
change(val) {
const path = val.path;
if(this.ishttp(val.path)) {
// http(s):// 路径新窗口打开
const pindex = path.indexOf("http");
window.open(path.substr(pindex, path.length), "_blank");
} else {
this.$router.push(val.path)
}
this.search = ''
this.options = []
this.$nextTick(() => {
this.show = false
})
this.initQuickActionList();
},
md
2024-05-07 04:53:25 +00:00
layoutUpdatedEvent(newLayout) {
this.layout = newLayout;
},
moveEvent(){
},
movedEvent(){
md
2023-11-27 08:29:42 +00:00
md
2024-05-07 04:53:25 +00:00
},
cardLayOut(){
}
md
2023-11-27 08:29:42 +00:00
},
}
</script>
<style lang="scss" scoped>
.h-overview {
text-align: center;
.title {
margin-top: 10px;
font-size: 14px;
color: var(--el-text-color-regular);
}
.count {
margin-top: 10px;
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>
Reference in New Issue Copy Permalink