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.
177 lines
4.3 KiB
177 lines
4.3 KiB
<template>
|
|
<view class="charts-box">
|
|
|
|
<view style="display: flex;justify-content: center; width: 100%; ">
|
|
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
|
|
@click="jump(1)">1</text>
|
|
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
|
|
@click="jump(2)">2</text>
|
|
<text style="padding-top: 10px;padding-bottom: 10px;color: blue;margin-left: 20px;"
|
|
@click="jump(3)">3</text>
|
|
</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: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
|
|
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"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getServerData();
|
|
|
|
},
|
|
methods: {
|
|
getServerData() {
|
|
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);
|
|
},
|
|
jump(index) {
|
|
console.log("index>>",index)
|
|
switch (index) {
|
|
case 1:
|
|
|
|
break;
|
|
|
|
case 2:
|
|
uni.navigateTo({
|
|
url: 'index2'
|
|
});
|
|
|
|
break;
|
|
|
|
case 3:
|
|
uni.navigateTo({
|
|
url: 'index3'
|
|
});
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style>
|