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.
288 lines
7.1 KiB
288 lines
7.1 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; 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"
|
|
},
|
|
{
|
|
"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: "",
|
|
}
|
|
};
|
|
},
|
|
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.getGoodsOnWay(_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 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>
|
|
|