You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

547 lines
14 KiB

<template>
<div class="mains">
<div class="index">
<div class="title">
<span class="title-text">数据总览</span>
<div class="title-select">
<el-select v-model="wareValue" placeholder="请选择仓库" style="width: 250px;margin-right: 50px;">
<el-option v-for="item in warehouse" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-date-picker v-model="times" @change="selectTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" style="width: 200px;">
</el-date-picker>
</div>
</div>
<div class="top">
<div class="top-left">
<div class="top-left-item">
<div class="top-left-item-left">
<img src="@/assets/loginImg/data.png" />
<span>动产质押类项目</span>
</div>
<div class="top-left-item-centre">
<span class="top-left-item-centre-span">1</span>
<span>个</span>
</div>
<span class="top-left-item-right">165161655元</span>
</div>
<div class="top-left-item">
<div class="top-left-item-left">
<img src="@/assets/loginImg/file.png" />
<span>保证类项目</span>
</div>
<div class="top-left-item-centre">
<span class="top-left-item-centre-span">1</span>
<span>个</span>
</div>
<span class="top-left-item-right">165161655元</span>
</div>
<div class="top-left-item">
<div class="top-left-item-left">
<img src="@/assets/loginImg/projet.png" />
<span>应收帐款质押类项目</span>
</div>
<div class="top-left-item-centre">
<span class="top-left-item-centre-span">1</span>
<span>个</span>
</div>
<span class="top-left-item-right">165161655元</span>
</div>
</div>
<div class="top-right">
<div class="top-right-item">
<span class="top-right-item-text1">账户余额</span>
<span class="top-right-item-text2">¥155651.15</span>
<span class="top-right-item-text3">↑ 15.66%</span>
<span class="top-right-item-text4">↓ 12.21%</span>
</div>
<div class="top-right-item-view"></div>
<div class="top-right-item">
<span class="top-right-item-text1">应收账款</span>
<span class="top-right-item-text2">¥155651.15</span>
<span class="top-right-item-text3">↑ 15.66%</span>
<span class="top-right-item-text4">↓ 12.21%</span>
</div>
<div class="top-right-item-view"></div>
<div class="top-right-item">
<span class="top-right-item-text1">库存货值</span>
<span class="top-right-item-text2">¥155651.15</span>
<span class="top-right-item-text3">↑ 15.66%</span>
<span class="top-right-item-text4">↓ 12.21%</span>
</div>
<div class="top-right-item-view"></div>
<div class="top-right-item">
<span class="top-right-item-text1">在途货值</span>
<span class="top-right-item-text2">¥155651.15</span>
<span class="top-right-item-text3">↑ 15.66%</span>
<span class="top-right-item-text4">↓ 12.21%</span>
</div>
<span class="top-right-item-view"></span>
<div class="top-right-item">
<span class="top-right-item-text1">预付款</span>
<span class="top-right-item-text2">¥155651.15</span>
<span class="top-right-item-text3">↑ 15.66%</span>
<span class="top-right-item-text4">↓ 12.21%</span>
</div>
</div>
</div>
<div class="centre">
<div class="centre-title">
<img src="@/assets/loginImg/char.png" />
<span>库存分析图</span>
<div class="centre-title-view"></div>
</div>
<div id="main" style="width: 100%;height: 250px;margin-top: 20px;"></div>
</div>
<div class="bom">
<el-table v-loading="tableLoading" :data="listSalesChannelData" border style="width: 100%;">
<el-table-column width="200" label="销售渠道类别" prop="salesChannelCategory" align="center" />
<el-table-column label="总额" prop="totalAmount" align="center" />
<el-table-column label="应收帐款" prop="accountsReceivable" align="center" />
<el-table-column label="扣除应收" prop="deductionAccountsReceivable" align="center" />
</el-table>
</div>
</div>
</div>
</template>
</div>
<script>
import * as echarts from 'echarts'
import {
getDateRang
} from '@/utils/index'
export default {
name: '',
data() {
return {
times: getDateRang('yesterday'),
wareValue: "",
warehouse: [
{
label: "111111111",
value: "项目1"
},
{
label: "222222",
value: "项目2"
},
{
label: "333333",
value: "项目3"
}
],
listSalesChannelData: [{
salesChannelCategory: '连网连锁店',
totalAmount: '2000000',
accountsReceivable: '31,914',
deductionAccountsReceivable: '35,793'
},
{
salesChannelCategory: '连锁内加盟',
totalAmount: '28,700',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '配送中心',
totalAmount: '-1241.81',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '连锁外加盟',
totalAmount: '29822.44',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '配送中心',
totalAmount: '-1241.81',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '连锁外加盟',
totalAmount: '29822.44',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '配送中心',
totalAmount: '-1241.81',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '连锁外加盟',
totalAmount: '29822.44',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '配送中心',
totalAmount: '-1241.81',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
},
{
salesChannelCategory: '连锁外加盟',
totalAmount: '29822.44',
accountsReceivable: '28,749',
deductionAccountsReceivable: '58,339'
}
],
}
},
mounted() {
this.drawLine()
},
methods: {
selectTime(val) {
console.log('val:', val)
this.times = val
},
// 折线图初始化
drawLine() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: false
},
// 下载图标
saveAsImage: {
show: false
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
color: #101010;
text-align: right;
padding-right: 40px;
}
.mains{
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
.index {
width: 100%;
height: 100%;
// overflow-x: hidden;
// overflow-y: auto;
background: #fff;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
.title {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 30px;
border-bottom: #BBBBBB solid 3px;
.title-text {
flex: 1;
font-size: 25px;
color: #101010;
font-weight: 600;
font-family: sans-serif;
}
}
.top {
margin-top: 20px;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
.top-left {
width: 35%;
display: flex;
flex-direction: column;
.top-left-item {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
.top-left-item-left {
width: 50%;
align-items: center;
display: flex;
flex-direction: row;
img {
width: 25px;
height: 25px;
}
span {
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
color: #101010;
margin-left: 20px;
}
}
.top-left-item-centre {
width: 20%;
.top-left-item-centre-span {
font-size: 18px;
color: #6C6C6C;
padding-bottom: 1px;
margin-left: 2px;
margin-right: 5px;
border-bottom: 1px solid #6C6C6C;
}
}
.top-left-item-right {
width: 30%;
font-size: 18px;
color: #101010;
}
}
}
.top-right {
width: 55%;
display: flex;
flex-direction: row;
align-items: center;
.top-right-item {
flex: 1;
margin-left: 5px;
margin-right: 5px;
display: flex;
flex-direction: column;
.top-right-item-text1 {
font-size: 14px;
color: #999999;
}
.top-right-item-text2 {
margin-top: 15px;
margin-bottom: 12px;
font-size: 20px;
color: #101010;
font-weight: 600;
font-family: sans-serif;
}
.top-right-item-text3 {
font-size: 14px;
color: #FF5006;
}
.top-right-item-text4 {
font-size: 14px;
color: #58A55C;
}
}
.top-right-item-view {
width: 1px;
background: #bbb;
height: 80px;
margin-right: 20px;
}
}
}
.centre {
margin-top: 24px;
display: flex;
width: 100%;
flex-direction: column;
.centre-title {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
img {
width: 30px;
height: 30px;
}
span {
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
color: #101010;
margin-left: 10px;
}
.centre-title-view {
margin-left: 10px;
margin-top: 10px;
flex: 1;
height: 3px;
background: #efefef;
}
}
}
.bom {
margin-top: 36px;
padding-bottom: 50px;
}
}
</style>