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.
301 lines
7.2 KiB
301 lines
7.2 KiB
<template>
|
|
<view class="content">
|
|
|
|
<view>
|
|
<view class="top_select">
|
|
<text class="top_select_text">选择日期</text>
|
|
<uni-datetime-picker type="date" :clear-icon="false" v-model="queryParams.date" @change="dateChange" />
|
|
</view>
|
|
|
|
<view class="top_select" style="display: flex;">
|
|
<text class="top_select_text">选择类型</text>
|
|
<uni-data-select style="flex-grow: 1;" v-model="queryParams.type" :localdata="range" @change="typeChange"></uni-data-select>
|
|
</view>
|
|
|
|
<view class="top_select_btn">
|
|
|
|
<button class="mini-btn" type="primary" size="mini" @click="doQuery()">查询</button>
|
|
|
|
<button class="mini-btn" type="primary" size="mini" @click="doReset()">重置 </button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view style="margin-top: 20px;margin-left: 20px;">
|
|
<text>当日数据</text>
|
|
<text style="margin-left: 10px;">{{newDate}}</text>
|
|
|
|
</view>
|
|
|
|
|
|
<view style="margin-top: 15px;margin-left: 10px;margin-right: 10px;">
|
|
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
|
|
</view>
|
|
|
|
|
|
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">
|
|
|
|
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
|
|
<uni-tr>
|
|
<uni-th align="center">现金流量-经营活动产生的现金流量(元)</uni-th>
|
|
<uni-th align="center">总额</uni-th>
|
|
</uni-tr>
|
|
<uni-tr v-for="(item, index) in tableData" :key="index">
|
|
<uni-td align="center">{{ item.name }}</uni-td>
|
|
<uni-td align="center">{{ item.price }}</uni-td>
|
|
</uni-tr>
|
|
</uni-table>
|
|
|
|
</view>
|
|
|
|
|
|
<view style="margin-top: 25px;margin-left: 15px;margin-right: 15px;">
|
|
|
|
<uni-table ref="table" :border="true" stripe type="" emptyText="暂无更多数据">
|
|
<uni-tr>
|
|
<uni-th width="200" align="center">销售渠道类别</uni-th>
|
|
<uni-th align="center">总额</uni-th>
|
|
<uni-th align="center">应收帐款</uni-th>
|
|
<uni-th align="center">扣除应收</uni-th>
|
|
</uni-tr>
|
|
<uni-tr v-for="(item, index) in tableData2" :key="index">
|
|
<uni-td align="center">{{ item.name }}</uni-td>
|
|
<uni-td align="center">{{ item.totalAmount }}</uni-td>
|
|
<uni-td align="center">{{ item.accountsReceivable }}</uni-td>
|
|
<uni-td align="center">{{ item.deductionAccountsReceivable }}</uni-td>
|
|
</uni-tr>
|
|
</uni-table>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
newDate: this.getDate(),
|
|
// 类型1.全部,2.常规商品3.烟草
|
|
range: [{
|
|
"value": 1,
|
|
"text": "全部",
|
|
},
|
|
{
|
|
"value": 2,
|
|
"text": "常规商品",
|
|
}, {
|
|
"value": 3,
|
|
"text": "烟草",
|
|
}
|
|
],
|
|
tableData: [{
|
|
name: "销售商品收到的现金(元)",
|
|
price: "2000000",
|
|
},
|
|
{
|
|
name: "收到其他与经营活动有关的现金(元)",
|
|
price: "28700",
|
|
},
|
|
{
|
|
name: "本项合计",
|
|
price: "123456",
|
|
},
|
|
],
|
|
tableData2: [{
|
|
name: "销售商品收到的现金(元)",
|
|
totalAmount: "2000000",
|
|
accountsReceivable: "31914",
|
|
deductionAccountsReceivable: "35793"
|
|
},
|
|
{
|
|
name: "连锁内加盟",
|
|
totalAmount: "2000000",
|
|
accountsReceivable: "31914",
|
|
deductionAccountsReceivable: "35793"
|
|
},
|
|
{
|
|
name: "配送中心",
|
|
totalAmount: "2000000",
|
|
accountsReceivable: "31914",
|
|
deductionAccountsReceivable: "35793",
|
|
}, {
|
|
name: "连锁外加盟",
|
|
totalAmount: "2000000",
|
|
accountsReceivable: "31914",
|
|
deductionAccountsReceivable: "35793",
|
|
}
|
|
],
|
|
chartData: {},
|
|
opts: {
|
|
xAxis: {
|
|
disableGrid: true
|
|
},
|
|
yAxis: {
|
|
data: [{
|
|
min: 0
|
|
}]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group"
|
|
}
|
|
}
|
|
},
|
|
queryParams: {
|
|
customerSid: "",
|
|
date: "",
|
|
type: "",
|
|
}
|
|
};
|
|
},
|
|
onReady() {
|
|
this.getServerData();
|
|
},
|
|
methods: {
|
|
getDate() {
|
|
var tempDate = new Date() // 获取今天的日期
|
|
tempDate.setDate(tempDate.getDate() - 1) // 今天的前N天的日期，N自定义
|
|
var endDate = tempDate.getFullYear() + '-' + (tempDate.getMonth() + 1) + '-' + tempDate.getDate()
|
|
console.log(endDate)
|
|
return endDate
|
|
},
|
|
dateChange(e) {
|
|
console.log('----dateChange事件:', e);
|
|
|
|
},
|
|
typeChange(e) {
|
|
console.log('e:', e);
|
|
this.queryParams.type = e
|
|
},
|
|
doQuery() {
|
|
this.newDate = this.queryParams.date
|
|
this.getServerData();
|
|
},
|
|
doReset() {
|
|
this.queryParams = {
|
|
customerSid: "",
|
|
date: "",
|
|
type: "",
|
|
}
|
|
this.newDate = this.getDate()
|
|
this.getServerData();
|
|
},
|
|
getServerData() {
|
|
// var _this = this
|
|
// this.$api.getSalesReport(_this.queryParams).then((resp) => {
|
|
// // if (resp.success) {
|
|
// console.log('1111', resp.data)
|
|
// // const data = resp.data
|
|
// // _this.dataList = data.financialData
|
|
// // _this.listSalesChannelData = data.listSalesChannelData
|
|
// // _this.drawLine(data.financialAnalysisChartData)
|
|
// // this.tableLoading = false
|
|
// // } else {
|
|
// // // 根据resp.code进行异常情况处理
|
|
// // _this.dataList = []
|
|
// // _this.listSalesChannelData = []
|
|
// }
|
|
// }).catch(e => {
|
|
// console.log('eeeee', e)
|
|
// _this.tableLoading = false
|
|
// })
|
|
let source = [
|
|
['product', '分销商进货额', '实际发货额'],
|
|
['1-1', "30816", '28700'],
|
|
['1-2', '20960', '15471'],
|
|
['1-3', 31465, 41573],
|
|
['1-4', 32796, 26290],
|
|
['1-5', 31914, 28749],
|
|
['1-6', 35793, 58339],
|
|
['1-7', 33370, 16888]
|
|
]
|
|
|
|
let _title = []
|
|
let _categories = []
|
|
let _data1 = []
|
|
let _data2 = []
|
|
for (var i = 0; i < source.length; i++) {
|
|
// 取标题
|
|
if (i == 0) {
|
|
let title = source[0]
|
|
for (var j = 1; j < title.length; j++) {
|
|
_title.push(title[j])
|
|
}
|
|
} else {
|
|
// 取日期
|
|
let data = source[i]
|
|
_categories.push(data[0])
|
|
// 取数值
|
|
_data1.push(data[1])
|
|
_data2.push(data[2])
|
|
}
|
|
}
|
|
|
|
// 拼接
|
|
let res = {
|
|
categories: _categories,
|
|
series: [{
|
|
name: _title[0],
|
|
data: _data1
|
|
},
|
|
{
|
|
name: _title[1],
|
|
data: _data2
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
|
// setTimeout(() => {
|
|
// //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
// let res = {
|
|
// categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
|
// series: [{
|
|
// name: "分销商进货额",
|
|
// data: [35, 36, 31, 33, 13, 34]
|
|
// },
|
|
// {
|
|
// name: "实际发货额",
|
|
// data: [18, 27, 21, 24, 6, 28]
|
|
// }
|
|
// ]
|
|
// };
|
|
// this.chartData = JSON.parse(JSON.stringify(res));
|
|
// }, 100);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
background: #fff;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.top_select {
|
|
display: flex;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
flex-direction: row;
|
|
margin-top: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.top_select_text {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.top_select_btn {
|
|
display: flex;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
flex-direction: row;
|
|
margin-top: 15px;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|