16 changed files with 606 additions and 61 deletions
@ -1,27 +1,288 @@ |
|||||
<template> |
<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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
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" |
||||
|
}, |
||||
|
{ |
||||
|
"isDelay": "否", |
||||
|
"supplierName": "中顺洁柔纸业股份有限公司", |
||||
|
"num": 2, |
||||
|
"supplierSid": "18", |
||||
|
"allArrivedDate": "1993-08-12" |
||||
|
}, |
||||
|
{ |
||||
|
"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: "", |
||||
} |
} |
||||
|
}; |
||||
}, |
}, |
||||
onLoad() { |
onReady() { |
||||
|
this.getServerData(); |
||||
}, |
|
||||
onShow() { |
|
||||
|
|
||||
}, |
}, |
||||
methods: { |
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> |
</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> |
</style> |
||||
|
|||||
Loading…
Reference in new issue