16 changed files with 606 additions and 61 deletions
@ -1,27 +1,288 @@ |
|||
<template> |
|||
<view style="background: #F1F2F5;"> |
|||
<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; width: 100%; |
|||
height: 300px;"> |
|||
<qiun-data-charts type="pie" :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 width="60" align="center">序号</uni-th> |
|||
<uni-th align="center">供应商名称</uni-th> |
|||
<uni-th width="120" align="center">全部到货日期</uni-th> |
|||
<uni-th width="120" align="center">是否延期</uni-th> |
|||
</uni-tr> |
|||
<uni-tr v-for="(item, index) in tableData" :key="index"> |
|||
<uni-td align="center">{{item.num}}</uni-td> |
|||
<uni-td align="center">{{ item.supplierName }}</uni-td> |
|||
<uni-td align="center">{{ item.allArrivedDate }}</uni-td> |
|||
<uni-td align="center">{{ item.isDelay }}</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: [{ |
|||
"isDelay": "是", |
|||
"supplierName": "中粮可口可乐饮料（河北）有限公司", |
|||
"num": 1, |
|||
"supplierSid": "28", |
|||
"allArrivedDate": "1993-10-16" |
|||
}, |
|||
onLoad() { |
|||
|
|||
{ |
|||
"isDelay": "否", |
|||
"supplierName": "中顺洁柔纸业股份有限公司", |
|||
"num": 2, |
|||
"supplierSid": "18", |
|||
"allArrivedDate": "1993-08-12" |
|||
}, |
|||
onShow() { |
|||
|
|||
{ |
|||
"isDelay": "是", |
|||
"supplierName": "今麦郎食品股份有限公司石家庄分公司", |
|||
"num": 3, |
|||
"supplierSid": "08", |
|||
"allArrivedDate": "2003-12-16" |
|||
}, |
|||
{ |
|||
"isDelay": "是", |
|||
"supplierName": "农夫山泉股份有限公司", |
|||
"num": 4, |
|||
"supplierSid": "48", |
|||
"allArrivedDate": "2013-10-16" |
|||
}, |
|||
{ |
|||
"isDelay": "否", |
|||
"supplierName": "北京百事可乐饮料有限公司", |
|||
"num": 5, |
|||
"supplierSid": "12", |
|||
"allArrivedDate": "2008-03-11" |
|||
}, |
|||
{ |
|||
"isDelay": "是", |
|||
"supplierName": "今麦郎食品股份有限公司石家庄分公司", |
|||
"num": 6, |
|||
"supplierSid": "03", |
|||
"allArrivedDate": "1996-11-20" |
|||
}, |
|||
{ |
|||
"isDelay": "是", |
|||
"supplierName": "农夫山泉股份有限公司", |
|||
"num": 7, |
|||
"supplierSid": "68", |
|||
"allArrivedDate": "2022-10-23" |
|||
}, |
|||
{ |
|||
"isDelay": "否", |
|||
"supplierName": "北京百事可乐饮料有限公司", |
|||
"num": 8, |
|||
"supplierSid": "88", |
|||
"allArrivedDate": "2014-06-02" |
|||
} |
|||
], |
|||
chartData: {}, |
|||
//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 |
|||
opts: { |
|||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", |
|||
"#ea7ccc" |
|||
], |
|||
padding: [5, 5, 5, 5], |
|||
enableScroll: false, |
|||
extra: { |
|||
pie: { |
|||
activeOpacity: 0.5, |
|||
activeRadius: 10, |
|||
offsetAngle: 0, |
|||
labelWidth: 15, |
|||
border: true, |
|||
borderWidth: 3, |
|||
borderColor: "#FFFFFF", |
|||
linearType: "custom" |
|||
} |
|||
} |
|||
}, |
|||
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 = [{ |
|||
"value": 2313123, |
|||
"name": "订单总额" |
|||
}, |
|||
{ |
|||
"value": 4359354, |
|||
"name": "实际到货价值" |
|||
}, |
|||
{ |
|||
"value": 2313123, |
|||
"name": "在途货价值" |
|||
}, |
|||
{ |
|||
"value": 56516849, |
|||
"name": "超出价值" |
|||
} |
|||
] |
|||
|
|||
// let res = { |
|||
// series: [{ |
|||
// data: source, |
|||
// }] |
|||
// }; |
|||
|
|||
// this.chartData = JSON.parse(JSON.stringify(res)); |
|||
|
|||
setTimeout(() => { |
|||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
|||
let res = { |
|||
series: [{ |
|||
data: source |
|||
}] |
|||
}; |
|||
this.chartData = JSON.parse(JSON.stringify(res)); |
|||
}, 500); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
<style scoped> |
|||
.charts-box { |
|||
width: 100%; |
|||
height: 300px; |
|||
} |
|||
|
|||
.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> |
|||
|
|||
Loading…
Reference in new issue