|
|
@ -3,34 +3,36 @@ |
|
|
<view class="pages"> |
|
|
<view class="pages"> |
|
|
|
|
|
|
|
|
<view class="top"> |
|
|
<view class="top"> |
|
|
<image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> |
|
|
<!-- <image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> --> |
|
|
<text class="top-name">{{info.name}}</text> |
|
|
<text class="top-name">{{info.name}}</text> |
|
|
|
|
|
<text class="top-date">{{info.date}}</text> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
|
|
|
|
|
|
<view class="item"> |
|
|
<view class="content-lift"> |
|
|
|
|
|
<image src="https://supervise.yxtsoft.com/img/newApp/zhye.png" style="width: 18px;height: 18px;" |
|
|
<text class="item-text">账户数量</text> |
|
|
mode="aspectFill"></image> |
|
|
<text class="item-text1">{{info.number}}</text> |
|
|
<text class="content-title">总余额</text> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<text class="content-balance">{{info.balance}}万元</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="echarts" v-show="uEchartsShow"> |
|
|
|
|
|
|
|
|
<view class="item"> |
|
|
<qiun-data-charts type="bar" ref="charts" :ontouch='true' :echartsApp="true" :opts="opts" |
|
|
|
|
|
:chartData="chartData" /> |
|
|
<text class="item-text">截止时间</text> |
|
|
|
|
|
<text class="item-text1">{{info.date}}</text> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="item" style="border-bottom: none;"> |
|
|
</view> |
|
|
|
|
|
|
|
|
<text class="item-text">账户余额</text> |
|
|
<view v-show="!uEchartsShow"> |
|
|
<text class="item-text1" >{{info.balance}}</text> |
|
|
<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;"> |
|
|
|
|
|
<image src="../../static/baseIcon/notData.png" mode="aspectFill" style="width: 150px;height: 150px;"> |
|
|
|
|
|
</image> |
|
|
|
|
|
<text style="text-align: center;width: 100%; color: #717171;">暂无数据</text> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -43,6 +45,7 @@ |
|
|
|
|
|
|
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
uEchartsShow: false, |
|
|
info: { |
|
|
info: { |
|
|
sid: "", |
|
|
sid: "", |
|
|
name: "", |
|
|
name: "", |
|
|
@ -50,7 +53,50 @@ |
|
|
date: "", |
|
|
date: "", |
|
|
balance: "", |
|
|
balance: "", |
|
|
}, |
|
|
}, |
|
|
|
|
|
bankList: [], |
|
|
|
|
|
chartData: { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
opts: { |
|
|
|
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", |
|
|
|
|
|
"#ea7ccc" |
|
|
|
|
|
], |
|
|
|
|
|
padding: [15, 15, 15, 5], // 上、 右、下、左 |
|
|
|
|
|
enableScroll: false, |
|
|
|
|
|
legend: { |
|
|
|
|
|
show: false, |
|
|
|
|
|
}, // 隐藏X轴下方图列 |
|
|
|
|
|
xAxis: { |
|
|
|
|
|
boundaryGap: "justify", |
|
|
|
|
|
disableGrid: false, |
|
|
|
|
|
min: 0, |
|
|
|
|
|
axisLine: true, |
|
|
|
|
|
max: 1000, |
|
|
|
|
|
rotateLabel: true, |
|
|
|
|
|
type: 'grid', |
|
|
|
|
|
gridColor: '#CCCCCC', |
|
|
|
|
|
gridType: 'dash', |
|
|
|
|
|
dashLength: 8, |
|
|
|
|
|
}, |
|
|
|
|
|
yAxis: { |
|
|
|
|
|
disabled: false, |
|
|
|
|
|
disableGrid: false, |
|
|
|
|
|
gridType: 'dash', |
|
|
|
|
|
dashLength: 8, |
|
|
|
|
|
gridColor: '#CCCCCC', |
|
|
|
|
|
}, |
|
|
|
|
|
extra: { |
|
|
|
|
|
bar: { |
|
|
|
|
|
type: "stack", |
|
|
|
|
|
width: 30, |
|
|
|
|
|
meterBorde: 1, |
|
|
|
|
|
meterFillColor: "#f0f", |
|
|
|
|
|
activeBgColor: "#000000", |
|
|
|
|
|
activeBgOpacity: 0.08, |
|
|
|
|
|
categoryGap: 2 |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
@ -62,10 +108,59 @@ |
|
|
date: option.date, |
|
|
date: option.date, |
|
|
balance: option.balance, |
|
|
balance: option.balance, |
|
|
} |
|
|
} |
|
|
|
|
|
this.getServerData(this.info.sid) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
|
|
|
getServerData(sid) { |
|
|
|
|
|
this.$api.getAccountByProjectSid(sid).then((resp) => { |
|
|
|
|
|
console.log('1111>>>>>>', resp) |
|
|
|
|
|
|
|
|
|
|
|
this.bankList = resp |
|
|
|
|
|
var bankData = [] |
|
|
|
|
|
var balanceData = [] |
|
|
|
|
|
|
|
|
|
|
|
console.log('1111>>>>>>', this.bankList) |
|
|
|
|
|
|
|
|
|
|
|
this.uEchartsShow = this.bankList.length > 0 |
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < this.bankList.length; i++) { |
|
|
|
|
|
|
|
|
|
|
|
var strEnd = this.bankList[i].accountNumber.substring(this.bankList[i].accountNumber |
|
|
|
|
|
.length - 4, this.bankList[i].accountNumber.length) |
|
|
|
|
|
|
|
|
|
|
|
console.log('1111>>>>>>', strEnd) |
|
|
|
|
|
|
|
|
|
|
|
bankData.push(this.bankList[i].bank + strEnd) |
|
|
|
|
|
balanceData.push(this.bankList[i].wBalance) |
|
|
|
|
|
} |
|
|
|
|
|
console.log('bankData>>>>>>', bankData) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|
|
|
|
|
let res = { |
|
|
|
|
|
categories: bankData, |
|
|
|
|
|
series: [{ |
|
|
|
|
|
name: "账户余额", |
|
|
|
|
|
data: balanceData, |
|
|
|
|
|
format: "seriesDemo2" |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
] |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.opts.xAxis.format = "xAxisDemo3" |
|
|
|
|
|
this.chartData = JSON.parse(JSON.stringify(res)); |
|
|
|
|
|
}, 500); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch(e => { |
|
|
|
|
|
console.log('eeeee', e) |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -75,57 +170,71 @@ |
|
|
|
|
|
|
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
background-color: #fff; |
|
|
|
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
|
|
|
|
|
|
.top { |
|
|
.top { |
|
|
|
|
|
background: #fff; |
|
|
padding: 20px 25px; |
|
|
padding: 20px 25px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.top-name { |
|
|
.top-name { |
|
|
margin-left: 5px; |
|
|
flex: 1; |
|
|
|
|
|
margin-right: 10px; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #000; |
|
|
color: #000; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
font-family: sans-serif; |
|
|
font-family: sans-serif; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
display: -webkit-box; |
|
|
|
|
|
-webkit-line-clamp: 1; |
|
|
|
|
|
-webkit-box-orient: vertical; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.top-date { |
|
|
.top-date { |
|
|
|
|
|
flex-shrink: 0; |
|
|
font-size: 13px; |
|
|
font-size: 13px; |
|
|
color: #717171; |
|
|
color: #717171; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.content { |
|
|
.content { |
|
|
|
|
|
background: #fff; |
|
|
display: flex; |
|
|
display: flex; |
|
|
margin-left: 20px; |
|
|
flex-direction: row; |
|
|
margin-right: 20px; |
|
|
align-items: center; |
|
|
flex-direction: column; |
|
|
margin-top: 3px; |
|
|
border-top: 2px solid #eee; |
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 13px 18px; |
|
|
|
|
|
|
|
|
.item { |
|
|
.content-lift { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 15px 20px; |
|
|
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
|
|
|
|
|
|
|
|
.item-text{ |
|
|
.content-title { |
|
|
font-size: 14px; |
|
|
margin-left: 5px; |
|
|
color: #191919; |
|
|
color: #191919; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.item-text1{ |
|
|
|
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: #717171; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content-balance { |
|
|
|
|
|
color: #6C6C6C; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.echarts { |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
margin-top: 2px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 300px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
liupopo
2 years ago