|
|
@@ -6,6 +6,7 @@
|
|
|
<title>资金流水</title>
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
<link href="../../css/mui.min.css" rel="stylesheet" />
|
|
|
+ <link href="../../css/mui.picker.min.css" rel="stylesheet" />
|
|
|
<style>
|
|
|
.m_box {padding: 10px 10px 25px 15px;box-shadow: 0 1px 6px #dbdbdb;border-radius: 8px;position: relative;overflow: hidden;}
|
|
|
.fm{width: 100%;z-index: 1;}
|
|
|
@@ -21,6 +22,7 @@
|
|
|
.money{float: right;color: orange;font-size: 15px;padding-top: 3px;}
|
|
|
.ccn .time{color: darkgray;}
|
|
|
.save{color:white;padding-top: 12px;}
|
|
|
+ .year{position: absolute;font-size: 13px;color: darkgray;z-index: 11;}
|
|
|
[v-cloak] {display: none;}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -29,11 +31,15 @@
|
|
|
<header class="mui-bar mui-bar-nav">
|
|
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
<h1 class="mui-title">资金流水</h1>
|
|
|
- <span class="save mui-pull-right" @click="save()">请款记录</span>
|
|
|
+ <div class="save mui-pull-right" @click="record()">请款记录</div>
|
|
|
</header>
|
|
|
<img src="../../images/top.png" class="fm" />
|
|
|
<div class="mui-content">
|
|
|
<div class="m_box">
|
|
|
+ <div class="year" @click.stop="select()">
|
|
|
+ <span>{{year}}年</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ </div>
|
|
|
<div id="main" style="height:220px;"></div>
|
|
|
<div class="divider">
|
|
|
<div class="line" style="width: 30%;"></div>
|
|
|
@@ -42,18 +48,23 @@
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
<div v-if="list.length>0">
|
|
|
- <div class="items" v-for="(item,index) in list" @click="preview(item)">
|
|
|
+ <div class="items" v-for="(item,index) in list">
|
|
|
<div class="row">
|
|
|
<div class="sm7">
|
|
|
- <div class="qian"><i class="icon icsf"></i></div>
|
|
|
+ <div class="qian" style="background-color: #4CAF50;" v-if="item.pay_mode=='收款方'">
|
|
|
+ <i class="icon icsf">收</i>
|
|
|
+ </div>
|
|
|
+ <div class="qian" style="background-color: #F44336;" v-if="item.pay_mode=='付款方'">
|
|
|
+ <i class="icon icsf">支</i>
|
|
|
+ </div>
|
|
|
<div class="ccn omit">
|
|
|
<div class="stitle omit">{{item.parttime_title}}</div>
|
|
|
<div class="time">{{item.pay_date}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sm3">
|
|
|
- <div class="money" v-if="item.pay_mode=='收款方'">+{{item.amount}}</div>
|
|
|
- <div class="money" v-if="item.pay_mode=='付款方'" style="color: #f44336;">-{{item.amount}}</div>
|
|
|
+ <div class="money" v-if="item.pay_mode=='收款方'" style="color: #4CAF50;">+{{item.amount}}元</div>
|
|
|
+ <div class="money" v-if="item.pay_mode=='付款方'" style="color: #F44336;">-{{item.amount}}元</div>
|
|
|
</div>
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
@@ -69,30 +80,56 @@
|
|
|
<script src="../../js/app.js"></script>
|
|
|
<script src="../../js/vue.min.js"></script>
|
|
|
<script src="../../js/echarts.min.js"></script>
|
|
|
+ <script src="../../js/mui.picker.min.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
var vm = new Vue({
|
|
|
el: "#app",
|
|
|
data: {
|
|
|
- list: []
|
|
|
+ year:getDate('year'),
|
|
|
+ list: [],
|
|
|
+ xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
+ chart: []
|
|
|
},
|
|
|
mounted: function() {
|
|
|
this.getData();
|
|
|
- this.initChart();
|
|
|
+ this.getChartData();
|
|
|
},
|
|
|
methods: {
|
|
|
- //获取数据
|
|
|
+ //请款记录
|
|
|
+ record:function(){
|
|
|
+ open('record', 'record.html', null, 'slide-in-bottom');
|
|
|
+ },
|
|
|
+ select:function(){
|
|
|
+ var dtPicker = new mui.DtPicker({type:'month'});
|
|
|
+ dtPicker.show(function (selectItems) {
|
|
|
+ vm.year=selectItems.y.text;
|
|
|
+ console.log("asdsad");
|
|
|
+ vm.getChartData();
|
|
|
+ })
|
|
|
+ },
|
|
|
getData: function() {
|
|
|
- request(urls().finance_list, {userId: getUser().id}, function(res) {
|
|
|
+ request(urls().finance_list, {userId: getUser().id,state:1}, function(res) {
|
|
|
vm.list = res.data;
|
|
|
- console.log("asd:"+JSON.stringify(res));
|
|
|
plus.nativeUI.closeWaiting();
|
|
|
})
|
|
|
- request(urls().chart_list, {userId: getUser().id}, function(res) {
|
|
|
- vm.list = res.data;
|
|
|
- console.log("asd:"+JSON.stringify(res));
|
|
|
+ },
|
|
|
+ //获取图表数据
|
|
|
+ getChartData:function(){
|
|
|
+ this.chart=[{series: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},{series: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}];
|
|
|
+ request(urls().chart_list, {userId: getUser().id,year:this.year}, function(res) {
|
|
|
+ res.data.forEach((item, index) => {
|
|
|
+ if (item.pay_mode == '收款方') {
|
|
|
+ vm.chart[0].series[item.pay_date - 1] = item.amount;
|
|
|
+ }
|
|
|
+ if (item.pay_mode == '付款方') {
|
|
|
+ vm.chart[1].series[item.pay_date - 1] = item.amount;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ vm.initChart();
|
|
|
plus.nativeUI.closeWaiting();
|
|
|
})
|
|
|
},
|
|
|
+ //初始化图表
|
|
|
initChart: function() {
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
var option = {
|
|
|
@@ -110,7 +147,7 @@
|
|
|
color: ['#4CAF50', '#F44336'],
|
|
|
grid: {
|
|
|
left: '15',
|
|
|
- top: '30%',
|
|
|
+ top: '20%',
|
|
|
right: '15',
|
|
|
bottom: '5',
|
|
|
containLabel: true
|
|
|
@@ -119,28 +156,19 @@
|
|
|
data: ['收入', '支出']
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: ['6月', '7月', '8月', '9月', '10月']
|
|
|
+ data: vm.xAxis
|
|
|
},
|
|
|
yAxis: {},
|
|
|
series: [{
|
|
|
name: '收入',
|
|
|
type: 'bar',
|
|
|
- data: [300, 200, 320, 1000, 1600],
|
|
|
- markPoint: {
|
|
|
- label: {
|
|
|
- color: 'white', //气泡中字体颜色
|
|
|
- },
|
|
|
- data: [{
|
|
|
- type: 'max',
|
|
|
- name: 'Max'
|
|
|
- }]
|
|
|
- }
|
|
|
+ data: vm.chart[0].series,
|
|
|
},
|
|
|
{
|
|
|
name: '支出',
|
|
|
type: 'bar',
|
|
|
- data: [100, 150, 500, 200, 650]
|
|
|
- },
|
|
|
+ data: vm.chart[1].series,
|
|
|
+ }
|
|
|
]
|
|
|
};
|
|
|
myChart.setOption(option);
|
xiaoshushu