init
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-tab": "@vant/weapp/tab/index",
|
||||
"van-tabs": "@vant/weapp/tabs/index",
|
||||
"van-popup": "@vant/weapp/popup/index",
|
||||
"van-empty": "@vant/weapp/empty/index"
|
||||
},
|
||||
"navigationBarTitleText": "统计报表"
|
||||
}
|
||||
@@ -0,0 +1,451 @@
|
||||
/* pages/statement/reportStatement/reportStatement.wxss */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: #EFF1F4;
|
||||
position: relative;
|
||||
.search-container {
|
||||
padding: 10px 8px;
|
||||
// border-top: 1px solid #DBDBDB;
|
||||
background: #ffffff;
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
>.number-plate, >.select {
|
||||
width: calc((100% - 6px) / 2);
|
||||
height: 36px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E6EAF2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
>.number-plate {
|
||||
.icon_search {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn {
|
||||
width: 18px;
|
||||
padding: 0 4px;
|
||||
color: #949CB5;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
>.select {
|
||||
width: calc((100% - 6px) / 2);
|
||||
picker {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.picker {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
// padding-left: 14px;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid #E6EAF2;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.picker::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid #636B83;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
background: #949CB5;
|
||||
}
|
||||
.date {
|
||||
width: calc((100% - 10px - 70px) / 2);
|
||||
height: 36px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E6EAF2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
color: #2E3A4F;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
>.btn {
|
||||
// height: 36px;
|
||||
padding: 8px 14px;
|
||||
margin-left: 12px;
|
||||
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100vh - 110px);
|
||||
padding: 8px 14px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
.top {
|
||||
padding: 10px 12px;
|
||||
box-shadow: 0px 1px 0px 0px #E6EAF2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
image {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
.title {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.val {
|
||||
color: #2C6AF3;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.chart {
|
||||
padding: 10px 10px 24px;
|
||||
position: relative;
|
||||
.bg {
|
||||
width: calc((100% - 20px) * 0.6);
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(36% + 4px);
|
||||
.line {
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
border: 1px rgba(216,214,214,0.5);
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
.num {
|
||||
color: #606266;
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.line:nth-child(2) {
|
||||
border-style: dashed;
|
||||
left: 20%;
|
||||
}
|
||||
.line:nth-child(3) {
|
||||
border-style: dashed;
|
||||
left: 40%;
|
||||
}
|
||||
.line:nth-child(4) {
|
||||
border-style: dashed;
|
||||
left: 60%;
|
||||
}
|
||||
.line:nth-child(5) {
|
||||
border-style: dashed;
|
||||
left: 80%;
|
||||
}
|
||||
.line:nth-child(6) {
|
||||
border-style: dashed;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.item-num {
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label {
|
||||
width: 36%;
|
||||
margin-right: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.num {
|
||||
width: 60%;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-content {
|
||||
height: calc(100vh - 110px);
|
||||
.header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #E9EBEE;
|
||||
border-bottom: 1px solid #D3D8E2;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
.th {
|
||||
color: #3C475B;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 12px;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.th:first-child, .th:nth-child(2){
|
||||
width: 30%;
|
||||
}
|
||||
.th:nth-child(3), .th:nth-child(4), .th:nth-child(5), .th:nth-child(6) {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
.row {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D3D8E2;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
.td {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.td:first-child, .td:nth-child(2){
|
||||
width: 30%;
|
||||
padding: 0 2px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.td:nth-child(3), .td:nth-child(4), .td:nth-child(5), .td:nth-child(6) {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 时间选择器
|
||||
.date-btn-box {
|
||||
// background: #fff;
|
||||
// border-radius: 4px 4px 0 0;
|
||||
border-bottom: 2rpx solid #F1F1F1;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.btn {
|
||||
padding: 20rpx 36rpx;
|
||||
color: #888888;
|
||||
}
|
||||
.btn-confirm{
|
||||
color: #3D7EEA;
|
||||
}
|
||||
}
|
||||
.picker-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.more-search {
|
||||
padding: 8px 14px 12px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
background: #fff;
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
.label {
|
||||
margin: 6px;
|
||||
color: #394458;
|
||||
font-size: 14px;
|
||||
}
|
||||
.date-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.line {
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
background: #949CB5;
|
||||
}
|
||||
.date {
|
||||
width: calc((100% - 10px - 30px) / 2);
|
||||
height: 36px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E6EAF2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
color: #2E3A4F;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-content {
|
||||
>.project-select {
|
||||
width: 100%;
|
||||
border: 1px solid #DBDBDB;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
picker {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.picker {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding-left: 8px;
|
||||
box-sizing: border-box;
|
||||
// border: 1px solid #E6EAF2;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.picker::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid #636B83;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 6px solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-content {
|
||||
width: 100%;
|
||||
max-height: 96px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.item {
|
||||
width: 48%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin-bottom: 8px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E6EAF2;
|
||||
color: #2E3A4F;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.check {
|
||||
background: #E9F2FF;
|
||||
border: 1px solid #24A2FE;
|
||||
}
|
||||
}
|
||||
.btn-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.btn {
|
||||
width: 48%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #D6D6D6;
|
||||
color: #2E3A4F;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-confirm {
|
||||
background: linear-gradient(90deg, #3B7CFC 0%, #548BFC 100%);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,335 @@
|
||||
// pages/statement/reportStatement/reportStatement.ts
|
||||
import { getAction } from '../../../api/base';
|
||||
|
||||
const dayjs = require('dayjs');
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
tabActive: 0,
|
||||
dateOptions: [
|
||||
{
|
||||
name: '按月',
|
||||
dateType: 'month'
|
||||
},
|
||||
{
|
||||
name: '按年',
|
||||
dateType: 'year'
|
||||
},
|
||||
{
|
||||
name: '按季度',
|
||||
dateType: 'season'
|
||||
}
|
||||
] as any,
|
||||
dateOptionIndex: 0,
|
||||
currentDate: new Date().getTime(),
|
||||
currentDateStr: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||
showDateSeasonSelect: false,
|
||||
dateList: {
|
||||
years: [2023, 2024, 2025],
|
||||
season: ['第一', '第二', '第三', '第四']
|
||||
},
|
||||
dateValue: [0, 0],
|
||||
dateSeason: '',
|
||||
tmpDate: '',
|
||||
showMoreSearch: false,
|
||||
projectOptions: ['全部'] as Array<string>,
|
||||
selectProjectIndex: 0,
|
||||
vehicleTypeOptions: ['全部'] as Array<string>,
|
||||
selectVehicleTypeIndex: 0,
|
||||
|
||||
chartList: [],
|
||||
tableData: [],
|
||||
tableDefaultData: []
|
||||
},
|
||||
tabOnClick(event: any) {
|
||||
// console.log(event.detail.name);
|
||||
// 看情况要不要重置查询条件
|
||||
this.setData({
|
||||
tabActive: event.detail.name
|
||||
});
|
||||
this.initDateSeason();
|
||||
// 查询
|
||||
this.getList();
|
||||
},
|
||||
bindPickerType(e: any) {
|
||||
// console.log(e.detail.value);
|
||||
this.setData({
|
||||
dateOptionIndex: e.detail.value
|
||||
});
|
||||
if (e.detail.value == 2) {
|
||||
this.initDateSeason();
|
||||
} else {
|
||||
this.initDate();
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
bindPickerDate(e: any) {
|
||||
let time = new Date(e.detail.value).getTime();
|
||||
let str =
|
||||
this.data.dateOptionIndex == 0
|
||||
? dayjs(new Date(e.detail.value)).format('YYYY-MM') + '月'
|
||||
: e.detail.value;
|
||||
this.setData({
|
||||
currentDate: time,
|
||||
currentDateStr: str
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
showDateSeasonSelect() {
|
||||
this.data.showDateSeasonSelect = true;
|
||||
this.setData({
|
||||
showDateSeasonSelect: true
|
||||
});
|
||||
},
|
||||
|
||||
// 日期初始化
|
||||
initDateSeason() {
|
||||
let year = new Date().getFullYear();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let nowSeason = Math.floor(month / 3);
|
||||
let years = [];
|
||||
for (let i = -3; i < 6; i++) {
|
||||
years.push(year + i);
|
||||
}
|
||||
let nowYear = years.indexOf(year);
|
||||
this.setData({
|
||||
dateList: {
|
||||
years: years,
|
||||
season: this.data.dateList.season
|
||||
},
|
||||
dateValue: [nowYear, nowSeason],
|
||||
tmpDate: `${year}年${this.data.dateList.season[nowSeason]}季`,
|
||||
dateSeason: `${year}年${this.data.dateList.season[nowSeason]}季`
|
||||
});
|
||||
},
|
||||
hideDate() {
|
||||
this.setData({
|
||||
showDateSeasonSelect: false
|
||||
});
|
||||
},
|
||||
changeDate() {
|
||||
this.setData({
|
||||
dateSeason: this.data.tmpDate,
|
||||
showDateSeasonSelect: false
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
selectDate(e: any) {
|
||||
// console.log(e.detail.value);
|
||||
let year: string | number = this.data.dateList.years[e.detail.value[0]];
|
||||
let season: string | number = this.data.dateList.season[e.detail.value[1]];
|
||||
this.setData({
|
||||
dateValue: e.detail.value,
|
||||
tmpDate: `${year}年${season}季`
|
||||
});
|
||||
},
|
||||
initDate() {
|
||||
let dateStr = '';
|
||||
if (this.data.dateOptionIndex == 0) {
|
||||
dateStr = dayjs(new Date(this.data.currentDate)).format('YYYY-MM') + '月';
|
||||
} else if (this.data.dateOptionIndex == 1) {
|
||||
dateStr = dayjs(new Date(this.data.currentDate)).format('YYYY');
|
||||
} else {
|
||||
}
|
||||
this.setData({
|
||||
currentDateStr: dateStr
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
let startDate = '';
|
||||
if (this.data.dateOptionIndex == 0) {
|
||||
startDate = dayjs(new Date(this.data.currentDate))
|
||||
.startOf('month')
|
||||
.format('YYYY-MM-DD');
|
||||
} else if (this.data.dateOptionIndex == 1) {
|
||||
startDate = dayjs(new Date(this.data.currentDate))
|
||||
.startOf('year')
|
||||
.format('YYYY-MM-DD');
|
||||
} else {
|
||||
let month = (this.data.dateValue[1] + 1) * 3 - 2;
|
||||
let date =
|
||||
this.data.dateList.years[this.data.dateValue[0]] +
|
||||
'/' +
|
||||
month +
|
||||
'/' +
|
||||
'01';
|
||||
startDate = dayjs(new Date(date)).startOf('month').format('YYYY-MM-DD');
|
||||
console.log(startDate);
|
||||
}
|
||||
let parms = {
|
||||
startTime: startDate,
|
||||
statisType: Number(this.data.dateOptionIndex) + 2
|
||||
};
|
||||
let url = '';
|
||||
if (this.data.tabActive == 0) {
|
||||
url = 'api/report/reportChart';
|
||||
} else {
|
||||
url = 'api/report/reportList';
|
||||
}
|
||||
this.setData({
|
||||
loading: true
|
||||
});
|
||||
getAction(url, parms)
|
||||
.then((res: any) => {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
if (res.code == 200) {
|
||||
if (this.data.tabActive == 0) {
|
||||
res.result.forEach((item: any) => {
|
||||
item.scale = [
|
||||
0,
|
||||
(item.totalCount * 0.2).toFixed(1),
|
||||
(item.totalCount * 0.4).toFixed(1),
|
||||
(item.totalCount * 0.6).toFixed(1),
|
||||
(item.totalCount * 0.8).toFixed(1),
|
||||
item.totalCount
|
||||
];
|
||||
});
|
||||
this.setData({
|
||||
chartList: res.result
|
||||
});
|
||||
} else {
|
||||
let tmpArr = ['全部'] as Array<string>;
|
||||
let tmpArr2 = ['全部'] as Array<string>;
|
||||
res.result.forEach((item: any) => {
|
||||
if (tmpArr.filter(x => x == item.projectName).length == 0) {
|
||||
tmpArr.push(item.projectName);
|
||||
}
|
||||
if (
|
||||
tmpArr2.filter(x => x == item.vehicleType_dictText).length == 0
|
||||
) {
|
||||
tmpArr2.push(item.vehicleType_dictText);
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
tableData: res.result,
|
||||
tableDefaultData: res.result,
|
||||
projectOptions: tmpArr,
|
||||
vehicleTypeOptions: tmpArr2,
|
||||
selectProjectIndex: 0,
|
||||
selectVehicleTypeIndex: 0
|
||||
});
|
||||
}
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: res.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 切换显示 更多条件
|
||||
filterShow() {
|
||||
this.setData({
|
||||
showMoreSearch: true
|
||||
});
|
||||
},
|
||||
filterHide() {
|
||||
this.setData({
|
||||
showMoreSearch: false
|
||||
});
|
||||
},
|
||||
bindPickerProject(e: any) {
|
||||
// console.log(e);
|
||||
let index = Number(e.detail.value);
|
||||
this.setData({
|
||||
selectProjectIndex: index
|
||||
});
|
||||
},
|
||||
bindPickerVehicleType(e: any) {
|
||||
// console.log(e);
|
||||
let index = Number(e.detail.value);
|
||||
this.setData({
|
||||
selectVehicleTypeIndex: index
|
||||
});
|
||||
},
|
||||
restList() {
|
||||
this.setData({
|
||||
selectProjectIndex: 0,
|
||||
selectVehicleTypeIndex: 0
|
||||
});
|
||||
// this.filterTableList();
|
||||
this.getList();
|
||||
},
|
||||
filterTableList() {
|
||||
let tmpArr = this.data.tableDefaultData;
|
||||
if (this.data.selectProjectIndex != 0) {
|
||||
tmpArr = tmpArr.filter(
|
||||
(x: any) =>
|
||||
x.projectName ==
|
||||
this.data.projectOptions[this.data.selectProjectIndex]
|
||||
);
|
||||
}
|
||||
if (this.data.selectVehicleTypeIndex != 0) {
|
||||
tmpArr = tmpArr.filter(
|
||||
(x: any) =>
|
||||
x.vehicleType_dictText ==
|
||||
this.data.vehicleTypeOptions[this.data.selectVehicleTypeIndex]
|
||||
);
|
||||
}
|
||||
this.setData({
|
||||
tableData: tmpArr,
|
||||
showMoreSearch: false
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {
|
||||
if (this.data.dateOptionIndex == 2) {
|
||||
this.initDateSeason();
|
||||
} else {
|
||||
this.initDate();
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {}
|
||||
});
|
||||
@@ -0,0 +1,193 @@
|
||||
<!--pages/statement/reportStatement/reportStatement.wxml-->
|
||||
<view class="container">
|
||||
<van-tabs color="#4381FC" bind:click="tabOnClick">
|
||||
|
||||
<van-tab title="统计图表">
|
||||
<view class="search-container">
|
||||
<view class="row">
|
||||
<view class="select">
|
||||
<picker
|
||||
value="{{dateOptionIndex}}"
|
||||
range-key="name"
|
||||
range="{{dateOptions}}"
|
||||
bindchange="bindPickerType" >
|
||||
<view class="picker project-select">
|
||||
{{dateOptions[dateOptionIndex].name}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="select" wx:if="{{dateOptionIndex == 0 || dateOptionIndex == 1}}">
|
||||
<picker
|
||||
fields="{{dateOptions[dateOptionIndex].dateType}}"
|
||||
mode="date"
|
||||
value="{{date}}"
|
||||
bindchange="bindPickerDate" >
|
||||
<view class="picker project-select">
|
||||
{{currentDateStr}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="select" wx:if="{{dateOptionIndex == 2}}" catch:tap="showDateSeasonSelect">
|
||||
{{dateSeason}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="item" wx:for="{{chartList}}" wx:key="index">
|
||||
<view class="top">
|
||||
<view class="label">
|
||||
<image src="../../../images/icon_maintain1.png" mode=""/>
|
||||
<view class="title">{{item.type}}总数</view>
|
||||
</view>
|
||||
<view class="val">{{item.totalCount}}</view>
|
||||
</view>
|
||||
<view class="chart">
|
||||
<view class="bg">
|
||||
<view class="line" wx:for="{{item.scale}}" wx:key="index" wx:for-item="itemS">
|
||||
<view class="num">{{itemS}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-num" wx:for="{{item.list}}" wx:key="index" wx:for-item="itemP">
|
||||
<view class="label">{{itemP.projectName}}</view>
|
||||
<view class="num">
|
||||
<view class="line" style="width:{{itemP.count / item.totalCount * 100 + '%'}}"></view>
|
||||
<view class="count">{{itemP.count}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-data" wx:if="{{chartList.length == 0}}">
|
||||
<van-empty description="无数据" />
|
||||
</view>
|
||||
</view>
|
||||
</van-tab>
|
||||
<van-tab title="数据列表">
|
||||
<view class="search-container">
|
||||
<view class="row">
|
||||
<view class="select">
|
||||
<picker
|
||||
value="{{dateOptionIndex}}"
|
||||
range-key="name"
|
||||
range="{{dateOptions}}"
|
||||
bindchange="bindPickerType" >
|
||||
<view class="picker project-select">
|
||||
{{dateOptions[dateOptionIndex].name}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="select" wx:if="{{dateOptionIndex == 0 || dateOptionIndex == 1}}">
|
||||
<picker
|
||||
fields="{{dateOptions[dateOptionIndex].dateType}}"
|
||||
mode="date"
|
||||
value="{{date}}"
|
||||
bindchange="bindPickerDate" >
|
||||
<view class="picker project-select">
|
||||
{{currentDateStr}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="select" wx:if="{{dateOptionIndex == 2}}" catch:tap="showDateSeasonSelect">
|
||||
{{dateSeason}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-content">
|
||||
<view class="header">
|
||||
<view class="th" catch:tap="filterShow">
|
||||
项目
|
||||
<view class="icon">
|
||||
<image src="../../../images/icon_filter2.png" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="th" catch:tap="filterShow">
|
||||
车型
|
||||
<view class="icon">
|
||||
<image src="../../../images/icon_filter2.png" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="th">维修</view>
|
||||
<view class="th">保养</view>
|
||||
<view class="th">事故</view>
|
||||
<view class="th">违章</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="row" wx:for="{{tableData}}" wx:key="index">
|
||||
<view class="td">{{item.projectName}}</view>
|
||||
<view class="td">{{item.vehicleType_dictText}}</view>
|
||||
<view class="td">{{item.repairCount}}</view>
|
||||
<view class="td">{{item.upKeepCount}}</view>
|
||||
<view class="td">{{item.accidentCount}}</view>
|
||||
<view class="td">{{item.violationCount}}</view>
|
||||
</view>
|
||||
<view class="no-data" wx:if="{{tableData.length == 0}}">
|
||||
<van-empty description="无数据" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- 日期范围选择 -->
|
||||
<van-popup
|
||||
show="{{ showDateSeasonSelect }}"
|
||||
position="bottom"
|
||||
custom-style="height: 50%;"
|
||||
bind:click-overlay="hideDate"
|
||||
>
|
||||
<view style="background: #fff;border-radius: 4px 4px 0 0;overflow: hidden;">
|
||||
<view class="date-btn-box">
|
||||
<view class="btn btn-cancel" bindtap="hideDate">取消</view>
|
||||
<view class="btn btn-confirm" bindtap="changeDate">确定</view>
|
||||
</view>
|
||||
<view class="picker-box">
|
||||
<picker-view data-key="dateRang" value="{{dateValue}}" indicator-style="height: 50px;" style="width: 100%; height: 500rpx;" bindchange="selectDate">
|
||||
<picker-view-column>
|
||||
<view style="line-height: 50px; text-align: center;" wx:for="{{dateList.years}}" wx:key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view style="line-height: 50px; text-align: center;" wx:for="{{dateList.season}}" wx:key="index">{{item}}季</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
<!-- 表格数据筛选 -->
|
||||
|
||||
<van-popup
|
||||
show="{{ showMoreSearch }}"
|
||||
position="top"
|
||||
bind:close="filterHide">
|
||||
<view class="more-search">
|
||||
<view class="row">
|
||||
<view class="label">按项目筛选</view>
|
||||
<view class="select-content">
|
||||
<view class="project-select">
|
||||
<picker bindchange="bindPickerProject" value="{{selectProjectIndex}}" range="{{projectOptions}}">
|
||||
<view class="picker project-select">
|
||||
{{projectOptions[selectProjectIndex]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="label">按车型筛选</view>
|
||||
<view class="select-content">
|
||||
<view class="project-select">
|
||||
<picker bindchange="bindPickerVehicleType" value="{{selectVehicleTypeIndex}}" range="{{vehicleTypeOptions}}">
|
||||
<view class="picker project-select">
|
||||
{{vehicleTypeOptions[selectVehicleTypeIndex]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="btn-content">
|
||||
<view class="btn" catchtap="restList">重置</view>
|
||||
<view class="btn btn-confirm" catchtap="filterTableList">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</van-popup>
|
||||
</view>
|
||||
Reference in New Issue
Block a user