444 lines
18 KiB
Vue
444 lines
18 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<!-- <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 class="head-title" >Hi,{{nickName}},欢迎您使用WMS！</div>
|
||
<div class="head-sub-title">您有 0 件商品需要做库存调整，请及时调整。</div>
|
||
</div>
|
||
|
||
<div class="right-count">
|
||
<div class="count-item">
|
||
<div class="header">
|
||
<span class="el-tag el-tag--success el-tag--light">
|
||
<i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3"></i>
|
||
</span>
|
||
<span class="title">项目数</span>
|
||
</div>
|
||
<div class="num" style="">
|
||
3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</el-card> -->
|
||
|
||
<!-- <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="8" >
|
||
<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="6">
|
||
<div class="count">
|
||
<span @click="goRouter('/websites')">881239</span>
|
||
</div>
|
||
<!-- <i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i> -->
|
||
<div class="title">待收货</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="count">
|
||
<span @click="goRouter('/websites')">881239</span>
|
||
</div>
|
||
<div class="title"><i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i>待收货</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="count">
|
||
<span @click="goRouter('/websites')">881239</span>
|
||
</div>
|
||
<div class="title"><i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i>待收货</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="count">
|
||
<span @click="goRouter('/websites')">881239</span>
|
||
</div>
|
||
<div class="title"><i class="icon iconfont icon-RectangleCopy141" style="color:#2296f3;font-size: 25px;"></i>待收货</div>
|
||
</el-col>
|
||
</el-row>
|
||
</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="/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>
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="应收/应付" height="400px">
|
||
<template v-slot:body>
|
||
<line-chart :chart-data="lineChartData" />
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="营业收入" style="margin-top: 20px; margin-bottom: 20px">
|
||
<template v-slot:body>
|
||
<!-- <v-charts
|
||
height="383px"
|
||
id="networkChart"
|
||
type="line"
|
||
:option="chartsOption['networkChart']"
|
||
:dataZoom="true"
|
||
/> -->
|
||
</template>
|
||
</CardWithHeader>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
||
|
||
<!-- <el-card shadow="hover" class="text-large chart-card" style="background: linear-gradient(87deg,#5e72e4,#825ee4)!important;">
|
||
<span class="text-mini title-tip">欢迎您： </span>
|
||
<el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name | hello }}
|
||
</el-card>
|
||
|
||
<el-card shadow="hover" class="text-large chart-card" style="background: linear-gradient(87deg,#11cdef,#1171ef)!important;">
|
||
<span class="text-mini title-tip">欢迎您： </span>
|
||
<el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name | hello }}
|
||
</el-card>
|
||
|
||
<el-card shadow="hover" class="text-large chart-card" style="background: linear-gradient(87deg,#f5365c,#f56036)!important;">
|
||
<span class="text-mini title-tip">欢迎您： </span>
|
||
<el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name | hello }}
|
||
</el-card>
|
||
|
||
<el-card shadow="hover" class="text-large chart-card" style="background: linear-gradient(87deg,#172b4d,#1a174d)!important;">
|
||
<span class="text-mini title-tip">欢迎您： </span>
|
||
<el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name | hello }}
|
||
</el-card> -->
|
||
<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 class="head-title" >Hi,{{nickName}},欢迎您使用WMS！</div>
|
||
<div class="head-sub-title">您有 0 件商品需要做库存调整，请及时调整。</div>
|
||
</div>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
<CardWithHeader header="财务概览" isLinearBg="true">
|
||
<template v-slot:body>
|
||
<div style="display:inline-flex;width:100%" >
|
||
<div style="width: 50%;">
|
||
<span style="font-size: 14px;">可用余额(元)</span>
|
||
<div style="margin-top: 10px;font-size: 13px;font-weight: 500;">
|
||
<span @click="goRouter('/websites')">￥5000.00</span>
|
||
</div>
|
||
</div>
|
||
<div style="width: 50%;">
|
||
<span style="font-size: 14px;">信用额度(元)</span>
|
||
<div style="margin-top: 10px;font-size: 13px;font-weight: 500;">
|
||
<span @click="goRouter('/websites')">￥100000.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="margin-top: 10px;" >
|
||
<el-button
|
||
:loading="loading"
|
||
size="medium"
|
||
type="primary"
|
||
style="width:30%;"
|
||
>
|
||
<span>充值</span>
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</CardWithHeader>
|
||
|
||
<CardWithHeader header="竞争">
|
||
<template v-slot:body>
|
||
<div class="chart-wrapper">
|
||
<raddar-chart />
|
||
</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 CardWithHeader from '@/components/CardWithHeader/index.vue';
|
||
import RaddarChart from './common/RaddarChart.vue';
|
||
import LineChart from './common/LineChart.vue';
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
name: 'Index',
|
||
components: { CardWithHeader,RaddarChart, LineChart },
|
||
data() {
|
||
return {
|
||
lineChartData: lineChartData.newVisitis
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['avatar', 'nickName']),
|
||
},
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.h-overview {
|
||
text-align: center;
|
||
|
||
.title {
|
||
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>
|