Browse Source

(*)界面优化

master
Archer_cdm 2 years ago
parent
commit
9ebd53dba2
  1. 3
      weapp/app.js
  2. 590
      weapp/components/timePicker/index.js
  3. 3
      weapp/components/timePicker/index.json
  4. 75
      weapp/components/timePicker/index.wxml
  5. 133
      weapp/components/timePicker/index.wxss
  6. 1
      weapp/images/close.svg
  7. BIN
      weapp/images/upload.png
  8. 47
      weapp/package/inspectionRecord/inspectionRecord.js
  9. 5
      weapp/package/inspectionRecord/inspectionRecord.json
  10. 18
      weapp/package/inspectionRecord/inspectionRecord.wxml
  11. 19
      weapp/package/inspectionRecord/inspectionRecord.wxss
  12. 108
      weapp/package/startInspection/startInspection.js
  13. 15
      weapp/package/startInspection/startInspection.wxml
  14. 23
      weapp/package/startInspection/startInspection.wxss
  15. 1
      weapp/pages/index/index.js

3
weapp/app.js

@ -4,7 +4,8 @@ App({
globalData: {
userInfo: null,
baseUrl: 'http://10.8.16.221:4900', //api 本地环境
imgUrl: 'http://10.8.16.221:5900/_file-server/', //web 本地环境
webUrl: "http://10.8.16.221:5900/", //web 本地环境
imgUrl: 'http://10.8.16.221:5900/_file-server/', //文件 本地环境
},
onShow(e) {
// 检查是否有更新

590
weapp/components/timePicker/index.js

@ -0,0 +1,590 @@
// components/picker-timer/picker-time.js
Component({
/**
* 组件的属性列表
*/
properties: {
pickerShow: {
type: Boolean,
observer: function (val) { //弹出动画
if (val) {
let animation = wx.createAnimation({
duration: 500,
timingFunction: "ease"
});
let animationOpacity = wx.createAnimation({
duration: 500,
timingFunction: "ease"
});
setTimeout(() => {
animation.bottom(0).step();
animationOpacity.opacity(0.7).step();
this.setData({
animationOpacity: animationOpacity.export(),
animationData: animation.export()
})
}, 0);
} else {
let animation = wx.createAnimation({
duration: 100,
timingFunction: "ease"
});
let animationOpacity = wx.createAnimation({
duration: 500,
timingFunction: "ease"
});
animation.bottom(-320).step();
animationOpacity.opacity(0).step();
this.setData({
animationOpacity: animationOpacity.export(),
animationData: animation.export()
});
}
// 在picker滚动未停止前点确定,会使startValue数组各项归零,发生错误,这里判断并重新初始化
// 微信新增了picker滚动的回调函数,已进行兼容
if (this.data.startValue && this.data.endValue) {
let s = 0, e = 0;
let conf = this.data.config;
this.data.startValue.map(val => {
if (val == 0) {
s++
}
})
this.data.endValue.map(val => {
if (val == 0) {
e++;
}
});
let tmp = {
hour: 4,
minute: 5,
second: 6
}
let n = tmp[conf.column];
if (s >= n || e >= n) {
this.initPick(this.data.config);
this.setData({
startValue: this.data.startValue,
endValue: this.data.endValue,
});
}
}
}
},
config: Object
},
/**
* 组件的初始数据
*/
data: {
// pickerShow:true
// limitStartTime: new Date().getTime()-1000*60*60*24*30,
// limitEndTime: new Date().getTime(),
// yearStart:2000,
// yearEnd:2100
},
detached: function () {
console.log("dele");
},
attached: function () { },
ready: function () {
this.readConfig();
this.initPick(this.data.config || null);
this.setData({
startValue: this.data.startValue,
endValue: this.data.endValue,
});
},
/**
* 组件的方法列表
*/
methods: {
//阻止滑动事件
onCatchTouchMove(e) {
},
//读取配置项
readConfig() {
let limitEndTime = new Date().getTime();
let limitStartTime = new Date().getTime() - 1000 * 60 * 60 * 24 * 30;
if (this.data.config) {
let conf = this.data.config;
if (typeof conf.dateLimit == "number") {
limitStartTime =
new Date().getTime() - 1000 * 60 * 60 * 24 * conf.dateLimit;
}
if (conf.limitStartTime) {
limitStartTime = new Date(conf.limitStartTime.replace(/-/g, '/')).getTime();
}
if (conf.limitEndTime) {
limitEndTime = new Date(conf.limitEndTime.replace(/-/g, '/')).getTime();
}
this.setData({
yearStart: conf.yearStart || 2000,
yearEnd: conf.yearEnd || 2100,
endDate: conf.endDate || false,
dateLimit: conf.dateLimit || false,
hourColumn:
conf.column == "hour" ||
conf.column == "minute" ||
conf.column == "second",
minColumn: conf.column == "minute" || conf.column == "second",
secColumn: conf.column == "second"
});
}
let limitStartTimeArr = formatTime(limitStartTime);
let limitEndTimeArr = formatTime(limitEndTime);
this.setData({
limitStartTime,
limitStartTimeArr,
limitEndTime,
limitEndTimeArr
});
},
//滚动开始
handlePickStart: function (e) {
this.setData({
isPicking: true
})
},
//滚动结束
handlePickEnd: function (e) {
this.setData({
isPicking: false
})
},
onConfirm: function () {
//滚动未结束时不能确认
if (this.data.isPicking) { return }
let startTime = new Date(this.data.startPickTime.replace(/-/g, "/"));
let endTime = new Date(this.data.endPickTime.replace(/-/g, "/"));
if (startTime <= endTime || !this.data.endDate) {
this.setData({
startTime,
endTime
});
let startArr = formatTime(startTime).arr;
let endArr = formatTime(endTime).arr;
let format0 = function (num) {
return num < 10 ? '0' + num : num
}
let startTimeBack =
startArr[0] +
"-" +
format0(startArr[1]) +
"-" +
format0(startArr[2])
// +
// " " +
// (this.data.hourColumn ? format0(startArr[3]) : "00") +
// ":" +
// (this.data.minColumn ? format0(startArr[4]) : "00") +
// ":" +
// (this.data.secColumn ? format0(startArr[5]) : "00")
;
let endTimeBack =
endArr[0] +
"-" +
format0(endArr[1]) +
"-" +
format0(endArr[2])
// +
// " " +
// (this.data.hourColumn ? format0(endArr[3]) : "00") +
// ":" +
// (this.data.minColumn ? format0(endArr[4]) : "00") +
// ":" +
// (this.data.secColumn ? format0(endArr[5]) : "00")
;
let time = {
startTime: startTimeBack,
endTime: endTimeBack
};
//触发自定义事件
this.triggerEvent("setPickerTime", time);
this.triggerEvent("hidePicker", {});
} else {
wx.showToast({
icon: "none",
title: "开始时间必须小于结束时间"
});
}
},
hideModal: function () {
this.triggerEvent("hidePicker", {});
},
changeStartDateTime: function (e) {
let val = e.detail.value;
this.compareTime(val, "start");
},
changeEndDateTime: function (e) {
let val = e.detail.value;
this.compareTime(val, "end");
},
//比较时间是否在范围内
compareTime(val, type) {
let h = val[3] ? this.data.HourList[val[3]] : "00";
let m = val[4] ? this.data.MinuteList[val[4]] : "00";
let s = val[5] ? this.data.SecondList[val[5]] : "00";
let time =
this.data.YearList[val[0]] +
"-" +
this.data.MonthList[val[1]] +
"-" +
this.data.DayList[val[2]] +
" " +
h +
":" +
m +
":" +
s;
let start = this.data.limitStartTime;
let end = this.data.limitEndTime;
let timeNum = new Date(time.replace(/-/g, '/')).getTime();
let year, month, day, hour, min, sec, limitDate;
let tempArr = []
// if (!this.data.dateLimit){
// limitDate = [
// this.data.YearList[val[0]],
// this.data.MonthList[val[1]],
// this.data.DayList[val[2]],
// this.data.HourList[val[3]],
// this.data.MinuteList[val[4]],
// this.data.SecondList[val[5]]]
// } else if (type == "start" && timeNum > new Date(this.data.endPickTime.replace(/-/g, '/')) && this.data.config.endDate) {
// limitDate = formatTime(this.data.endPickTime).arr;
// } else if (type == "end" && timeNum < new Date(this.data.startPickTime.replace(/-/g, '/'))) {
// limitDate = formatTime(this.data.startPickTime).arr;
// } else if (timeNum < start) {
// limitDate = this.data.limitStartTimeArr.arr;
// } else if (timeNum > end) {
// limitDate = this.data.limitEndTimeArr.arr;
// } else {
// limitDate = [
// this.data.YearList[val[0]],
// this.data.MonthList[val[1]],
// this.data.DayList[val[2]],
// this.data.HourList[val[3]],
// this.data.MinuteList[val[4]],
// this.data.SecondList[val[5]]
// ]
// }
if (!this.data.dateLimit) {
limitDate = [
this.data.YearList[val[0]],
this.data.MonthList[val[1]],
this.data.DayList[val[2]],
this.data.HourList[val[3]],
this.data.MinuteList[val[4]],
this.data.SecondList[val[5]]]
} else {
limitDate = [
this.data.YearList[val[0]],
this.data.MonthList[val[1]],
this.data.DayList[val[2]],
this.data.HourList[val[3]],
this.data.MinuteList[val[4]],
this.data.SecondList[val[5]]
]
}
year = limitDate[0];
month = limitDate[1];
day = limitDate[2];
hour = limitDate[3];
min = limitDate[4];
sec = limitDate[5];
if (type == "start") {
this.setStartDate(year, month, day, hour, min, sec);
} else if (type == "end") {
this.setEndDate(year, month, day, hour, min, sec);
}
},
getDays: function (year, month) {
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (month === 2) {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
? 29
: 28;
} else {
return daysInMonth[month - 1];
}
},
initPick: function (initData) {
const date = initData.initStartTime ? new Date(initData.initStartTime.replace(/-/g, '/')) : new Date();
const endDate = initData.initEndTime ? new Date(initData.initEndTime.replace(/-/g, '/')) : new Date();
// const startDate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
const startDate = date;
const startYear = date.getFullYear();
const startMonth = date.getMonth() + 1;
const startDay = date.getDate();
const startHour = date.getHours();
const startMinute = date.getMinutes();
const startSecond = date.getSeconds();
const endYear = endDate.getFullYear();
const endMonth = endDate.getMonth() + 1;
const endDay = endDate.getDate();
const endHour = endDate.getHours();
const endMinute = endDate.getMinutes();
const endSecond = endDate.getSeconds();
let YearList = [];
let MonthList = [];
let DayList = [];
let HourList = [];
let MinuteList = [];
let SecondList = [];
//设置年份列表
for (let i = this.data.yearStart; i <= this.data.yearEnd; i++) {
YearList.push(i);
}
// 设置月份列表
for (let i = 1; i <= 12; i++) {
MonthList.push(i);
}
// 设置日期列表
for (let i = 1; i <= 31; i++) {
DayList.push(i);
}
// 设置时列表
for (let i = 0; i <= 23; i++) {
if (0 <= i && i < 10) {
i = "0" + i;
}
HourList.push(i);
}
// 分|秒
for (let i = 0; i <= 59; i++) {
if (0 <= i && i < 10) {
i = "0" + i;
}
MinuteList.push(i);
SecondList.push(i);
}
this.setData({
YearList,
MonthList,
DayList,
HourList,
MinuteList,
SecondList
});
this.setStartDate(startYear, startMonth, startDay, startHour, startMinute, startSecond);
this.setEndDate(endYear, endMonth, endDay, endHour, endMinute, endSecond);
//!!!
// setTimeout(() => {
// this.setStartDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
// this.setEndDate(nowYear, nowMonth, nowDay, nowHour, nowMinute)
// }, 0);
},
setPickerDateArr(type, year, month, day, hour, minute, second) {
let yearIdx = 0;
let monthIdx = 0;
let dayIdx = 0;
let hourIdx = 0;
let minuteIdx = 0;
let secondIdx = 0;
this.data.YearList.map((v, idx) => {
if (parseInt(v) === year) {
yearIdx = idx;
}
});
this.data.MonthList.map((v, idx) => {
if (parseInt(v) === month) {
monthIdx = idx;
}
});
// 重新设置日期列表
let DayList = [];
for (let i = 1; i <= this.getDays(year, month); i++) {
DayList.push(i);
}
DayList.map((v, idx) => {
if (parseInt(v) === day) {
dayIdx = idx;
}
});
if (type == "start") {
this.setData({ startDayList: DayList });
} else if (type == "end") {
this.setData({ endDayList: DayList });
}
this.data.HourList.map((v, idx) => {
if (parseInt(v) === parseInt(hour)) {
hourIdx = idx;
}
});
this.data.MinuteList.map((v, idx) => {
if (parseInt(v) === parseInt(minute)) {
minuteIdx = idx;
}
});
this.data.SecondList.map((v, idx) => {
if (parseInt(v) === parseInt(second)) {
secondIdx = idx;
}
});
return {
yearIdx,
monthIdx,
dayIdx,
hourIdx,
minuteIdx,
secondIdx
};
},
setStartDate: function (year, month, day, hour, minute, second) {
let pickerDateArr = this.setPickerDateArr(
"start",
year,
month,
day,
hour,
minute,
second
);
this.setData({
startYearList: this.data.YearList,
startMonthList: this.data.MonthList,
// startDayList: this.data.DayList,
startHourList: this.data.HourList,
startMinuteList: this.data.MinuteList,
startSecondList: this.data.SecondList,
startValue: [
pickerDateArr.yearIdx,
pickerDateArr.monthIdx,
pickerDateArr.dayIdx,
pickerDateArr.hourIdx,
pickerDateArr.minuteIdx,
pickerDateArr.secondIdx
],
startPickTime:
this.data.YearList[pickerDateArr.yearIdx] +
"-" +
this.data.MonthList[pickerDateArr.monthIdx] +
"-" +
this.data.DayList[pickerDateArr.dayIdx] +
" " +
this.data.HourList[pickerDateArr.hourIdx] +
":" +
this.data.MinuteList[pickerDateArr.minuteIdx] +
":" +
this.data.SecondList[pickerDateArr.secondIdx]
});
},
setEndDate: function (year, month, day, hour, minute, second) {
let pickerDateArr = this.setPickerDateArr(
"end",
year,
month,
day,
hour,
minute,
second
);
this.setData({
endYearList: this.data.YearList,
endMonthList: this.data.MonthList,
// endDayList: this.data.DayList,
endHourList: this.data.HourList,
endMinuteList: this.data.MinuteList,
endSecondList: this.data.SecondList,
endValue: [
pickerDateArr.yearIdx,
pickerDateArr.monthIdx,
pickerDateArr.dayIdx,
pickerDateArr.hourIdx,
pickerDateArr.minuteIdx,
pickerDateArr.secondIdx
],
endPickTime:
this.data.YearList[pickerDateArr.yearIdx] +
"-" +
this.data.MonthList[pickerDateArr.monthIdx] +
"-" +
this.data.DayList[pickerDateArr.dayIdx] +
" " +
this.data.HourList[pickerDateArr.hourIdx] +
":" +
this.data.MinuteList[pickerDateArr.minuteIdx] +
":" +
this.data.SecondList[pickerDateArr.secondIdx]
});
},
}
});
function formatTime(date) {
if (typeof date == 'string' || 'number') {
try {
date = date.replace(/-/g, '/')//兼容ios
} catch (error) {
}
date = new Date(date)
}
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return {
str: [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':'),
arr: [year, month, day, hour, minute, second]
}
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}

3
weapp/components/timePicker/index.json

@ -0,0 +1,3 @@
{
"component": true
}

75
weapp/components/timePicker/index.wxml

@ -0,0 +1,75 @@
<!--components/timePicker/timePicker.wxml-->
<!-- 自定义时间筛选器 -->
<view hidden="{{!pickerShow}}">
<view class="picker-container {{pickerShow?'show_picker':'hide_picker'}}" animation="{{animationData}}">
<!-- 取消 -->
<view class="btn-box" catchtouchmove="onCatchTouchMove">
<view class="pick_btn" bindtap="hideModal">
<image src="../../images/approvalCenter/close.svg" class="img-32"></image>
</view>
<!-- <view class='pick_btn' style="color: #6068B2" bindtap="onConfirm">确定</view> -->
</view>
<view class="time-part">
<view class="left">
<!-- style="height: {{endDate?'120px':'250px'}};" -->
<picker-view class='sensorTypePicker' indicator-style='height: 35px;' bindchange="changeStartDateTime"
value="{{startValue}}" bindpickstart="handlePickStart" bindpickend="handlePickEnd">
<picker-view-column style="min-width: 70px;flex-shrink: 0">
<view class='picker-item' wx:for="{{startYearList}}" wx:key='*this'>{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view class='picker-item' wx:for="{{startMonthList}}" wx:key='*this'>{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class='picker-item' wx:for="{{startDayList}}" wx:key='*this'>{{item}}日</view>
</picker-view-column>
<!-- <picker-view-column hidden="{{!hourColumn}}">
<view class='picker-item' wx:for="{{startHourList}}" wx:key='*this'>{{item}}时</view>
</picker-view-column>
<picker-view-column hidden="{{!minColumn}}">
<view class='picker-item' wx:for="{{startMinuteList}}" wx:key='*this'>{{item}}分</view>
</picker-view-column>
<picker-view-column hidden="{{!secColumn}}">
<view class='picker-item' wx:for="{{startSecondList}}" wx:key='*this'>{{item}}秒</view>
</picker-view-column> -->
</picker-view>
</view>
<view class='to' style='margin-top: 4px;margin-bottom: 4px;'>至</view>
<view class="right">
<view wx:if="{{endDate}}">
<picker-view class='sensorTypePicker' indicator-style='height: 35px;' bindchange="changeEndDateTime"
bindpickstart="handlePickStart" bindpickend="handlePickEnd" value="{{endValue}}">
<picker-view-column style="min-width: 70px;flex-shrink: 0">
<view class='picker-item' wx:for="{{endYearList}}" wx:key='*this' style="min-width: 70px;">{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view class='picker-item' wx:for="{{endMonthList}}" wx:key='*this'>{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view class='picker-item' wx:for="{{endDayList}}" wx:key='*this'>{{item}}日</view>
</picker-view-column>
<!-- <picker-view-column hidden="{{!hourColumn}}" >
<view class='picker-item' wx:for="{{endHourList}}" wx:key='*this'>{{item}}时</view>
</picker-view-column>
<picker-view-column hidden="{{!minColumn}}">
<view class='picker-item' wx:for="{{endMinuteList}}" wx:key='*this'>{{item}}分</view>
</picker-view-column>
<picker-view-column hidden="{{!secColumn}}">
<view class='picker-item' wx:for="{{startSecondList}}" wx:key='*this'>{{item}}秒</view>
</picker-view-column> -->
</picker-view>
</view>
</view>
</view>
<view class="btn-bottom">
<button class="bottom-btn" bindtap="onConfirm">确定</button>
</view>
</view>
<!-- 遮罩 -->
<view class="sensorType-screen" bindtap="hideModal" catchtouchmove="onCatchTouchMove"
animation="{{animationOpacity}}" />
</view>

133
weapp/components/timePicker/index.wxss

@ -0,0 +1,133 @@
/* components/timePicker/timePicker.wxss */
.picker-item {
line-height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 自定义时间 */
.picker-container {
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
width: 100%;
overflow: hidden;
position: fixed;
bottom: -640rpx;
left: 0;
/* height: 0; */
transition: height 0.5s;
z-index: 2000;
background: white;
border-top: 1px solid #EFEFF4;
}
.time-part {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10rpx;
}
.sensorType-screen {
width: 100vw;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
opacity: 0;
overflow: hidden;
z-index: 1999;
color: #fff;
}
.left {
width: 40%;
/* border: 1px solid red; */
}
.right {
width: 40%;
/* border: 1px solid red; */
}
.sensorTypePicker {
height: 250rpx;
margin: 0 auto;
}
.picker-item {
line-height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
/* overflow: hidden; */
}
.box {
padding: 0 20rpx;
}
/* 至 */
.to {
width: 10%;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: 600;
color: #282828;
/* border: 1px solid #000; */
}
.btn-box {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 2rpx solid #eee;
}
.pick_btn {
padding: 14rpx 30rpx;
color: #ccc;
/* background-color: #159; */
}
.show_picker {
height: 320px;
}
.hide_picker {
height: 0;
}
.img-32 {
width: 32rpx;
height: 32rpx;
}
.bottom-btn {
width: 710rpx;
height: 90rpx;
background: #2F54FF;
border-radius: 54px;
line-height: 90rpx;
font-size: 32rpx;
font-weight: 600;
color: #FFFFFF;
}
.btn-bottom {
margin: auto 20rpx 40rpx;
}

1
weapp/images/close.svg

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636808630028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4584" width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M927.435322 1006.57265l-415.903813-415.903814L95.627695 1006.57265a56.013982 56.013982 0 1 1-79.20377-79.231777l415.903814-415.875807L16.423925 95.58926A56.013982 56.013982 0 0 1 95.627695 16.357483l415.903814 415.903813L927.435322 16.357483a55.985975 55.985975 0 1 1 79.175763 79.231777L590.763286 511.465066l415.847799 415.875807a55.985975 55.985975 0 1 1-79.175763 79.231777z" p-id="4585" fill="#2c2c2c"></path></svg>

After

Width:  |  Height:  |  Size: 795 B

BIN
weapp/images/upload.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 B

47
weapp/package/inspectionRecord/inspectionRecord.js

@ -16,7 +16,20 @@ Page({
}
],
ResIndex: 0, //巡检结果
dataList: [1, 2, 3, 4, 5,]
dataList: [1, 2, 3, 4, 5,],
isPickerRender: false,
isPickerShow: false,
startTime: "开始日期", //开始日期
endTime: "结束日期", //结束日期
pickerConfig: { //自定义时间选择器配置项
endDate: true, //是否需要结束时间,为true时显示开始时间和结束时间两个picker
column: "day", //可选的最小时间范围day、hour、minute、second
dateLimit: true, //是否现在时间可选范围,false时可选任意时间;当为数字n时,范围是当前时间的最近n天
initStartTime: "", //picker初始时间
initEndTime: "", //picker初始结束时间
// limitStartTime: "", //最小可选时间
// limitEndTime: "" //最大可选时间
},
},
// 巡检结果
@ -27,6 +40,38 @@ Page({
})
},
// 时间选择器显示
pickerShow: function () {
this.setData({
isPickerShow: true,
isPickerRender: true,
});
},
// 时间选择器隐藏
pickerHide: function () {
this.setData({
isPickerShow: false,
});
},
// 获取选择时间
setPickerTime: function (val) {
let data = val.detail;
this.setData({
startTime: data.startTime,
endTime: data.endTime
});
},
// 清空提交日期筛选框
bindClearDate() {
this.setData({
startTime: '开始日期',
endTime: '结束日期'
})
},
/**
* 生命周期函数--监听页面加载
*/

5
weapp/package/inspectionRecord/inspectionRecord.json

@ -2,5 +2,8 @@
"navigationBarBackgroundColor": "#1979ff",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "巡检记录",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"usingComponents": {
"timePicker": "/components/timePicker/index"
}
}

18
weapp/package/inspectionRecord/inspectionRecord.wxml

@ -3,18 +3,26 @@
<view style="display: flex;">
<view style="line-height:50rpx;">时间范围:</view>
<view style="display: flex;">
<view style="border:2rpx solid #ccc;padding:6rpx 16rpx;margin-right:20rpx;border-radius:6rpx;">2022-12-15</view>
<view style="line-height: 55rpx;">至</view>
<view style="border:2rpx solid #ccc;padding:6rpx 16rpx;margin-left:20rpx;border-radius:6rpx;">2022-12-26</view>
<!-- 自定义时间选择器 -->
<view class="page-date" style="{{startTime != '开始日期' && endTime != '结束日期' ? 'float:left' : ''}}" bindtap="pickerShow">
<view style="{{startTime == '开始日期' && endTime == '结束日期' ? 'color:#ccc;' : ''}}">{{startTime}}<text style="margin: 0 20rpx;color:#000;"> 至 </text>{{endTime}}</view>
</view>
<view class="clearDate" wx:if="{{startTime != '开始日期' && endTime != '结束日期'}}" bindtap="bindClearDate">
<image src="/images/close.svg"></image>
</view>
<timePicker pickerShow="{{isPickerShow}}" id="picker" wx:if="{{isPickerRender}}" bind:hidePicker="pickerHide" bind:setPickerTime="setPickerTime" config="{{pickerConfig}}"></timePicker>
</view>
</view>
<view style='display:flex;margin-top:28rpx;'>
<view style="line-height: 55rpx;">巡检结果:</view>
<picker class='my-picker' bindchange="bindPickerRes" value="{{ResIndex}}" rangeKey='text' range='{{ResList}}' style="border:2rpx solid #ccc;padding:6rpx 54rpx;border-radius: 6rpx;">
<picker class='my-picker' bindchange="bindPickerRes" value="{{ResIndex}}" rangeKey='text' range='{{ResList}}' style="border:2rpx solid #ccc;padding:6rpx 42rpx;border-radius: 6rpx;">
{{ResList[ResIndex].text}}
<image style="width:20rpx;height:20rpx;margin-left:10rpx;" src="../../images/down.svg" />
</picker>
<view style="padding:6rpx 74rpx;background:#1979ff;border-radius:6rpx;color:#fff;margin-left:70rpx;">查询</view>
<view style="padding:6rpx 64rpx;background:#1979ff;border-radius:6rpx;color:#fff;margin-left:70rpx;">查询</view>
</view>
</view>

19
weapp/package/inspectionRecord/inspectionRecord.wxss

@ -1,5 +1,5 @@
/* package/inspectionRecord/inspectionRecord.wxss */
page{
page {
background: #F7F7FA;
}
@ -44,4 +44,21 @@ page{
float: left;
margin-left: 30rpx;
margin-top: 20rpx;
}
.page-date {
text-align: center;
padding-top: 6rpx;
margin-right: 20rpx;
background: #fff;
}
.clearDate {
float: left;
line-height: 50rpx;
}
.clearDate image {
width: 20rpx;
height: 20rpx;
}

108
weapp/package/startInspection/startInspection.js

@ -5,7 +5,8 @@ Page({
* 页面的初始数据
*/
data: {
dataList: ''
dataList: '',
imgs: [], //上传图片
},
handleChangeTwo(e) {
@ -32,6 +33,111 @@ Page({
})
},
// 上传图片
chooseImg: function (e) { //这里是选取图片的方法
var that = this;
var pics = [];
var detailPics = that.data.imgs;
if (detailPics.length >= 20) {
commonJs.showToast('最多选择20张图片上传');
return;
}
wx.chooseMedia({
count: 20, // 基础库2.25.0前,最多可支持9个文件,2.25.0及以后最多可支持20个文件
mediaType: ['image'], // 文件类型
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
console.log(res);
var imgs = res.tempFiles;
for (var i = 0; i < imgs.length; i++) {
if (res.tempFiles[i].size > 15728640) {
commonJs.showToast('图片大于15M,不可上传');
return;
}
pics.push(imgs[i])
}
that.uploadimg({
url: getApp().globalData.webUrl + '_upload/attachments/project', //这里是你图片上传的接口
path: pics, //这里是选取的图片的地址数组
});
},
})
},
//多张图片上传
uploadimg: function (data) {
wx.showLoading({
title: '上传中...',
mask: true,
})
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
let imgs = that.data.imgs;
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'file',
success: (resp) => {
wx.hideLoading();
success++;
var str = resp.data //返回的结果,可能不同项目结果不一样
console.log(str);
if (imgs.length >= 20) {
that.setData({
imgs: imgs
});
return false;
} else {
imgs.push(str);
that.setData({
imgs: imgs
})
}
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
i++;
if (i == data.path.length) { //当图片传完时,停止调用
console.log('执行完毕');
console.log('成功:' + success + " 失败:" + fail);
} else { //若图片还没有传完,则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);//递归,回调自己
}
}
});
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},
// selfLocation() {
// const self = this
// wx.showLoading({

15
weapp/package/startInspection/startInspection.wxml

@ -78,6 +78,21 @@
<radio style="color:#FF3300;" color="#FF3300" value="moderate">中度</radio>
<radio style="color:#990000;" color="#990000" value="severity">严重</radio>
</radio-group>
<view class="weui-uploader">
<view class="img-v weui-uploader__bd" style="overflow:hidden;">
<view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='weui-uploader__img showImg' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
<icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
</image>
</view>
<!-- 用来提示用户上传图片 -->
<view class="weui-uploader__input-box pic" bindtap="chooseImg">
<image class="upload" src="/images/upload.png" />
</view>
</view>
</view>
<view class="btnBox">
<view class="cancel" bindtap="bindCancel">取消</view>
<view class="submit">提交</view>

23
weapp/package/startInspection/startInspection.wxss

@ -82,4 +82,27 @@
background: #1979ff;
color: #fff;
border: 2rpx solid #1979ff;
}
.pic {
float: left;
position: relative;
margin-right: 8px;
margin-bottom: 8px;
}
.showImg {
width: 160rpx;
height: 160rpx;
}
.delete-btn {
position: absolute;
top: 0;
right: 0;
}
.upload {
width: 160rpx;
height: 160rpx;
}

1
weapp/pages/index/index.js

@ -3,7 +3,6 @@ import { getProjectList } from "../../utils/getApiUrl";
import { Request } from "../../common";
Page({
/**
* 页面的初始数据
*/

Loading…
Cancel
Save