@ -9,9 +9,9 @@
< div class = "title-select" >
< el -select v -model = " projectValue " placeholder = "请选择项目" style = "width: 2 50px;margin-right: 50px;"
< el -select v -model = " projectValue " placeholder = "请选择项目" style = "width: 3 50px;margin-right: 50px;"
@ change = "projectSelect" >
< el -option v-for ="item in projectList" :key="item.value" :label="item.label" :value="item.value " >
< el -option v-for ="item in projectList" :key="item.sid" :label="item.entryName" :value="item.sid " >
< / e l - o p t i o n >
< / e l - s e l e c t >
@ -34,10 +34,10 @@
< span > 动产质押类项目 < / span >
< / div >
< div class = "top-left-item-centre" >
< span class = "top-left-item-centre-span" > 1 < / span >
< span class = "top-left-item-centre-span" > { { info . dongChan } } < / span >
< span > 个 < / span >
< / div >
< span class = "top-left-item-right" > 165161655 元 < / span >
< span class = "top-left-item-right" > { { info . dcUseLimit } } 元 < / span >
< / div >
@ -48,10 +48,10 @@
< span > 保证类项目 < / span >
< / div >
< div class = "top-left-item-centre" >
< span class = "top-left-item-centre-span" > 1 < / span >
< span class = "top-left-item-centre-span" > { { info . baoZheng } } < / span >
< span > 个 < / span >
< / div >
< span class = "top-left-item-right" > 165161655 元 < / span >
< span class = "top-left-item-right" > { { info . bzUseLimit } } 元 < / span >
< / div >
@ -62,10 +62,10 @@
< span > 应收帐款质押类项目 < / span >
< / div >
< div class = "top-left-item-centre" >
< span class = "top-left-item-centre-span" > 1 < / span >
< span class = "top-left-item-centre-span" > { { info . yingShou } } < / span >
< span > 个 < / span >
< / div >
< span class = "top-left-item-right" > 165161655 元 < / span >
< span class = "top-left-item-right" > { { info . ysUseLimit } } 元 < / span >
< / div >
@ -77,9 +77,9 @@
< 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 >
< span class = "top-right-item-text2" > ¥ { { info . accountsBalance } } < / span >
< span class = "top-right-item-text3" v-show ="info.accountsBalanceBfb>0" > ↑ {{ info.accountsBalanceBfb }} % < / span >
< span class = "top-right-item-text4" v-show ="info.accountsBalanceBfb<0" > ↓ {{ info.accountsBalanceBfb }} % < / span >
< / div >
< div class = "top-right-item-view" > < / div >
@ -87,9 +87,9 @@
< 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 >
< span class = "top-right-item-text2" > ¥ { { info . accountsReceivable } } < / span >
< span class = "top-right-item-text3" v-show ="info.accountsReceivableBfb>0" > ↑ {{ info.accountsReceivableBfb }} % < / span >
< span class = "top-right-item-text4" v-show ="info.accountsReceivableBfb<0" > ↓ {{ info.accountsReceivableBfb }} % < / span >
< / div >
< div class = "top-right-item-view" > < / div >
@ -97,9 +97,9 @@
< 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 >
< span class = "top-right-item-text2" > ¥ { { info . stockAmount } } < / span >
< span class = "top-right-item-text3" v-show ="info.stockAmountBfb>0" > ↑ {{ info.stockAmountBfb }} % < / span >
< span class = "top-right-item-text4" v-show ="info.stockAmountBfb<0" > ↓ {{ info.stockAmountBfb }} % < / span >
< / div >
< div class = "top-right-item-view" > < / div >
@ -107,9 +107,9 @@
< 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 >
< span class = "top-right-item-text2" > ¥ { { info . transitAmount } } < / span >
< span class = "top-right-item-text3" v-show ="info.transitAmountBfb>0" > ↑ {{ info.transitAmountBfb }} % < / span >
< span class = "top-right-item-text4" v-show ="info.transitAmountBfb<0" > ↓ {{ info.transitAmountBfb }} % < / span >
< / div >
< span class = "top-right-item-view" > < / span >
@ -117,10 +117,9 @@
< 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 >
< span class = "top-right-item-text2" > ¥ { { info . advancePayment } } < / span >
< span class = "top-right-item-text3" v-show ="info.advancePaymentBfb>0" > ↑ {{ info.advancePaymentBfb }} % < / span >
< span class = "top-right-item-text4" v-show ="info.advancePaymentBfb<0" > ↓ {{ info.advancePaymentBfb }} % < / span >
< / div >
@ -134,7 +133,13 @@
< img src = "@/assets/loginImg/char.png" / >
< span > 库存分析图 < / span >
< div class = "centre-title-view" > < / div >
< div class = "centre-title-view" >
< div style = "flex: 1;" > < / div >
< el -select v-model ="dayValue" placeholder="请选择日期" @change="dayValueChange" >
< el -option v-for ="item in day" :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 >
< / div >
< / div >
< div id = "main" style = "width: 100%;height: 250px;margin-top: 20px;" > < / div >
@ -144,7 +149,8 @@
< div class = "bom" >
< el -table v-loading ="tableLoading" :data="projectlistlData" border style="width: 100%;" :row-style="{height: '50px'}" >
< el -table v -loading = " tableLoading " :data ="projectlistlData" : key = 'tableKey' border style = "width: 100%;"
: row - style = "{height: '50px'}" >
< el -table -column width = "200" label = "项目名称" prop = "projectName" align = "center" / >
< el -table -column label = "授信额度(元)" prop = "totalLoan" align = "center" / >
< el -table -column label = "用信额度(元)" prop = "useLimit" align = "center" / >
@ -175,59 +181,114 @@
name : '' ,
data ( ) {
return {
tableKey : 0 ,
tableLoading : false ,
times : getDateRang ( 'yesterday' ) ,
projectValue : "全部项目" ,
projectList : [
{
label : "111111111" ,
value : "项目1"
} ,
{
label : "222222" ,
value : "项目2"
} ,
{
label : "333333" ,
value : "项目3"
}
] ,
projectlistlData : [
] ,
projectSid : "" ,
projectList : [ ] ,
day : [ {
value : "7" ,
label : "7日" ,
} , {
value : "15" ,
label : "15日" ,
} ] ,
dayValue : "15" ,
projectlistlData : [ ] ,
info : { }
}
} ,
mounted ( ) {
this . drawLine ( )
} ,
created ( ) {
this . getProjectListAllNew ( )
this . getProjectDailySum ( )
this . getReportInventory ( )
this . init ( )
} ,
methods : {
getProjectListAllNew ( ) {
req . getProjectListAllNew ( ) . then ( res => {
console . log ( 'getProjectListAllNew:' , res )
this . projectList = res . data
} )
} ,
getProjectDailySum ( ) {
let params = {
orderDate : this . times ,
projectSid : this . projectSid ,
}
req . getProjectDailySum ( params ) . then ( res => {
console . log ( 'getProjectDailySum:' , res )
this . info = res . data
} )
} ,
init ( ) {
/ / 获 取 列 表
let params = {
orderDate : this . times ,
projectSid : "" ,
projectSid : this . projectSid ,
}
req . getProjectDailys ( params ) . then ( res => {
console . log ( 'getProjectDailys:' , res )
this . projectlistlData = res . data
console . log ( 'projectlistlData:' , this . projectlistlData )
} )
} ,
dayValueChange ( val ) {
console . log ( 'val:' , val )
this . dayValue = val
this . getReportInventory ( )
} ,
getReportInventory ( ) {
let params = {
orderDate : this . times ,
projectSid : this . projectSid ,
intervalTime : this . dayValue
}
req . getProjectDailyZx ( params ) . then ( res => {
console . log ( 'getProjectDailyZx:' , res )
/ / t h i s . p r o j e c t l i s t l D a t a = r e s . d a t a
this . drawLine ( res . data )
} )
} ,
projectSelect ( val ) {
console . log ( 'projectSelect:' , val )
this . projectSid = val
this . getProjectDailySum ( )
this . getReportInventory ( )
this . init ( )
} ,
selectTime ( val ) {
@ -238,7 +299,7 @@
} ,
/ / 折 线 图 初 始 化
drawLine ( ) {
drawLine ( obj ) {
/ / 基 于 准 备 好 的 d o m , 初 始 化 e c h a r t s 实 例
var myChart = echarts . init ( document . getElementById ( 'main' ) ) ;
/ / 绘 制 图 表
@ -250,7 +311,7 @@
trigger : 'axis'
} ,
legend : {
data : [ 'Email' , 'Union Ads' , 'Video Ads' , 'Direct' , 'Search Engine ' ]
data : [ '账户余额' , '应收账款' , '库存货值' , '在途货值' , '预付款 ' ]
} ,
grid : {
left : '3%' ,
@ -282,43 +343,38 @@
xAxis : {
type : 'category' ,
boundaryGap : false ,
data : [ 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' , 'Sun' ]
data : obj . date
} ,
yAxis : {
type : 'value'
} ,
series : [ {
name : 'Email ' ,
name : '账户余额 ' ,
type : 'line' ,
stack : 'Total' ,
data : [ 120 , 132 , 101 , 134 , 90 , 230 , 210 ]
data : obj . accountsBalance
} ,
{
name : 'Union Ads ' ,
name : '应收账款 ' ,
type : 'line' ,
stack : 'Total' ,
data : [ 220 , 182 , 191 , 234 , 290 , 330 , 310 ]
data : obj . accountsReceivable
} ,
{
name : 'Video Ads ' ,
name : '库存货值 ' ,
type : 'line' ,
stack : 'Total' ,
data : [ 150 , 232 , 201 , 154 , 190 , 330 , 410 ]
data : obj . stockAmount
} ,
{
name : 'Direct ' ,
name : '在途货值 ' ,
type : 'line' ,
stack : 'Total' ,
data : [ 320 , 332 , 301 , 334 , 390 , 330 , 320 ]
data : obj . transitAmount
} ,
{
name : 'Search Engine ' ,
name : '预付款 ' ,
type : 'line' ,
stack : 'Total' ,
data : [ 820 , 932 , 901 , 934 , 1290 , 1330 , 1320 ]
data : obj . advancePayment
}
]
} )
} , true )
} ,
@ -434,7 +490,7 @@
}
. top - right {
width : 55 % ;
width : 60 % ;
display : flex ;
flex - direction : row ;
align - items : center ;
@ -508,10 +564,25 @@
. centre - title - view {
margin - left : 10 px ;
margin - top : 10 px ;
flex : 1 ;
height : 3 px ;
background : # efefef ;
display : flex ;
flex - direction : row ;
border - bottom : solid 4 px # dadada ;
: : v - deep . el - select {
width : 100 px ;
margin - bottom : - 10 px ;
margin - top : - 10 px ;
. el - input {
. el - input__inner {
color : # 999 ;
background : transparent ;
border : none ;
font - size : 15 px ;
}
}
}
}
}
}