@ -1,153 +1,161 @@
< template >
< div class = "mains" >
< div class = "index" >
< div class = "index" >
< div class = "title" >
< div class = "title" >
< span class = "title-text" > 数据总览 < / span >
< span class = "title-text" > 数据总览 < / span >
< div class = "title-select" >
< 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" >
< / e l - o p t i o n >
< / e l - s e l e c t >
< 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" >
< / e l - o p t i o n >
< / e l - s e l e c t >
< el -date -picker v -model = " times " @change ="selectTime" type = "date" placeholder = "选择日期" format = "yyyy-MM-dd"
value - format = "yyyy-MM-dd" style = "width: 200px;" >
< / e l - d a t e - p i c k e r >
< el -date -picker v -model = " times " @change ="selectTime" type = "date" placeholder = "选择日期" format = "yyyy-MM-dd"
value - format = "yyyy-MM-dd" style = "width: 200px;" >
< / e l - d a t e - p i c k e r >
< / div >
< / div >
< / div >
< div class = "top" >
< div class = "top" >
< div class = "top-left " >
< div class = "top-left" >
< div class = "top-left-item " >
< 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 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" >
< 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 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" >
< 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 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 class = "top-right" >
< / div >
< div class = "top-right-item" >
< div class = "top-right" >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< div class = "top-right-item-view" > < / div >
< 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 class = "top-right-item" >
< / div >
< span class = "top-right-item-view" > < / span >
< 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 class = "top-right-item" >
< / div >
< span class = "top-right-item-view" > < / span >
< 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 class = "top-right-item" >
< / div >
< 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" >
< div class = "centre" >
< img src = "@/assets/loginImg/char.png" / >
< span > 库存分析图 < / span >
< div class = "centre-title-view" > < / div >
< / div >
< div class = "centre-title" >
< div id = "main" style = "width: 100%;height: 250px;margin-top: 20px; " > < / div >
< img src = "@/assets/loginImg/char.png" / >
< span > 库存分析图 < / span >
< div class = "centre-title-view" > < / div >
< / div >
< div id = "main" style = "width: 100%;height: 20px;margin-top: 20px;" > < / div >
< / div >
< div class = "bom" >
< 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" / >
< / e l - t a b l e >
< / div >
< / div >
< / div >
< / template >
< / div >
@ -176,11 +184,72 @@
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'
}
] ,
}
} ,
created ( ) {
moun ted( ) {
this . drawLine ( )
} ,
@ -197,10 +266,9 @@
/ / 基 于 准 备 好 的 d o m ， 初 始 化 e c h a r t s 实 例
var myChart = echarts . init ( document . getElementById ( 'main' ) ) ;
/ / 绘 制 图 表
console . log ( 'option' , obj )
myChart . setOption ( {
title : {
text : 'Stacked Line '
text : ''
} ,
tooltip : {
trigger : 'axis'
@ -215,8 +283,24 @@
containLabel : true
} ,
toolbox : {
show : true ,
feature : {
saveAsImage : { }
mark : {
show : true
} ,
/ / 数 据 图 标
dataView : {
show : false ,
readOnly : false
} ,
/ / 刷 新 图 标
restore : {
show : false
} ,
/ / 下 载 图 标
saveAsImage : {
show : false
}
}
} ,
xAxis : {
@ -275,6 +359,11 @@
text - align : right ;
padding - right : 40 px ;
}
. mains {
overflow - x : hidden ;
overflow - y : auto ;
height : 100 % ;
}
. index {
width : 100 % ;
@ -449,5 +538,10 @@
}
}
}
. bom {
margin - top : 36 px ;
padding - bottom : 50 px ;
}
}
< / style >
