550 lines
14 KiB
Vue
550 lines
14 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers class="fixedheader" :showBack="true">
|
||
<view class="headerName">
|
||
巡检点信息
|
||
</view>
|
||
</headers>
|
||
<view class="content" :style="{ 'margin-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
|
||
<view class="splitTitle">
|
||
巡检信息
|
||
</view>
|
||
<view class="infoBlock">
|
||
<form>
|
||
<view class="item">
|
||
<view class="title">
|
||
巡检点名称
|
||
</view>
|
||
<input v-model="form.inPointName" type="text" disabled />
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">
|
||
巡检点位置
|
||
</view>
|
||
<input v-model="form.posiTion" type="text" disabled />
|
||
</view>
|
||
<view class="item">
|
||
<view class="title">
|
||
最低巡检时长
|
||
</view>
|
||
<input v-model="form.minInspectName" type="text" disabled />
|
||
</view>
|
||
<view class="item" v-for="(item,index) in form.templateList" :key="index">
|
||
<view class="title">
|
||
<text class="star" v-if="item.isRequired">*</text>{{item.title}}
|
||
</view>
|
||
<input v-model="item.value" type="text" />
|
||
</view>
|
||
<!-- v-show="status" -->
|
||
<view class="item">
|
||
<view class="title">
|
||
<text class="star">*</text>巡检详情
|
||
</view>
|
||
<view class="uni-form-input">
|
||
<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="alarmDetails"
|
||
@input='changeTextarea' v-model="form.alarmDetails" placeholder="请输入"></textarea>
|
||
</view>
|
||
</view>
|
||
<view class="uni-form-item">
|
||
<view class="uni-form-label" style="padding-left: 24rpx; box-sizing: border-box;">
|
||
巡检图片
|
||
</view>
|
||
<view class="uni-form-input imgBox_wrap">
|
||
<view class="imgBox" v-show="fileList.length>0" v-for="(item,index) in fileList"
|
||
:key="index">
|
||
<image :src="url_config+'image/'+item.url" class="img"></image>
|
||
<uni-icons2 @click="deleteImg(item)" class="deleteImg" type="clear" size="24">
|
||
</uni-icons2>
|
||
</view>
|
||
<view class="addImgBox" @click="selectImg" v-if="fileList.length<1">
|
||
<image src="/static/icon-add.png" class="icon-add"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
|
||
</view>
|
||
<view class="timer-right">
|
||
巡检时长计时：<text>{{nowTime}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="radioBox">
|
||
<radio-group @change="chen">
|
||
状态:
|
||
<label class="radio">
|
||
<radio class="radio" value="1" checked="true" style="transform:scale(0.7)" />正常
|
||
<radio class="radio" value="2" style="transform:scale(0.7)" />异常
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view class="btnBox">
|
||
<view class="addBtn" @click="addBtn">保存</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
alarmDetails: "", //异常详情
|
||
alarmImage: "", //异常图片
|
||
inPointName: "", //巡检点名称
|
||
inPointId: 0, //巡检点名称
|
||
posiTion: "", // 巡检点位置
|
||
createUserName: "", //创建人
|
||
createData: "", //创建时间
|
||
templateList: [],
|
||
status: 1,
|
||
minInspectTime: "", // 最低巡检时长
|
||
minInspectName: "", // 最低巡检时长
|
||
},
|
||
fileList: [],
|
||
status: false,
|
||
saoData: "",
|
||
longitude: 0,
|
||
latitude: 0,
|
||
sendData: "",
|
||
nowTime: 0,
|
||
time: 0,
|
||
statusBarHeight:0,
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
|
||
this.checkOpenGPSServiceByAndroid()
|
||
console.log(e.data, '我的测试数据')
|
||
console.log(e, '我的测试数据')
|
||
this.sendData = JSON.parse(e.data);
|
||
this.form.id = e.id;
|
||
uni.showLoading({
|
||
title: "获取数据中"
|
||
})
|
||
this.getnow(e.data)
|
||
|
||
this.timer = setInterval(() => {
|
||
this.time += 1;
|
||
this.getTime(this.time);
|
||
}, 1000)
|
||
},
|
||
methods: {
|
||
//实时时间
|
||
getTime(seconds) {
|
||
var hours = Math.floor(seconds / 3600);
|
||
var minutes = Math.floor((seconds % 3600) / 60);
|
||
var secs = seconds % 60;
|
||
|
||
// 如果小时数大于0，则格式为HH:MM:SS
|
||
// 如果小时数等于0，则格式为MM:SS
|
||
this.nowTime = (hours > 0 ? hours + ":" : "") + (minutes < 10 ? "0" + minutes : minutes) + "min" + (secs <
|
||
10 ? "0" + secs : secs) + 's';
|
||
},
|
||
checkOpenGPSServiceByAndroid() {
|
||
let system = uni.getSystemInfoSync(); // 获取系统信息
|
||
if (system.platform === 'android') { // 判断平台
|
||
var context = plus.android.importClass("android.content.Context");
|
||
var locationManager = plus.android.importClass("android.location.LocationManager");
|
||
var main = plus.android.runtimeMainActivity();
|
||
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
||
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请打开定位服务功能',
|
||
showCancel: false, // 不显示取消按钮
|
||
success() {
|
||
if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
|
||
var Intent = plus.android.importClass('android.content.Intent');
|
||
var Settings = plus.android.importClass('android.provider.Settings');
|
||
var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
|
||
main.startActivity(intent); // 打开系统设置GPS服务页面
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
getnow(Val) {
|
||
let that = this;
|
||
uni.getLocation({
|
||
// type: 'wgs84',
|
||
type: 'gcj02',
|
||
geocode: true,
|
||
isHighAccuracy: "true",
|
||
accuracy: "best", // 精度值为20m
|
||
success: (res) => {
|
||
console.log('位置请求数据', res);
|
||
let data = JSON.parse(Val);
|
||
let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
// console.log('得到的二维码数据 ' + Val + ": " + userInfo.userId);
|
||
// console.log('获取到的经度 ：' + res.longitude + "，二维码的数据的 经度：" + data.longitude);
|
||
// console.log('获取到的纬度 ：' + res.latitude + "，二维码的数据的 纬度：" + data.latitude);
|
||
this.sendRequest({
|
||
url: "xmgl/checkingPoint/checkLocation",
|
||
data: {
|
||
id: data.checkingPointId,
|
||
longitude: res.longitude,
|
||
latitude: res.latitude,
|
||
userId: userInfo.userId,
|
||
xzCheckingRouteTaskId:this.form.id,
|
||
},
|
||
method: "GET",
|
||
success(res) {
|
||
console.log('res-----------', res);
|
||
if (res.result == false) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.message,
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// uni.navigateTo({
|
||
// url: '../projectIndex/projectIndex'
|
||
// })
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// if (res.code != 200) {
|
||
// uni.showModal({
|
||
// title: '提示',
|
||
// content: '当前位置不在巡检范围内',
|
||
// confirmColor: '#ee6666', //确定字体颜色
|
||
// showCancel: false, //没有取消按钮的弹框
|
||
// buttonText: '确定',
|
||
// success: function(res) {
|
||
// if (res.confirm) {
|
||
// uni.navigateTo({
|
||
// url: '../projectIndex/projectIndex'
|
||
// })
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
console.log('xmgl/checkingPoint/checkLocation --- 得到的数据' + res);
|
||
|
||
},
|
||
// fail(error) {
|
||
// console.log('请求失败', error);
|
||
// // 其他处理失败逻辑
|
||
// },
|
||
// complete: () => {
|
||
// console.log("网络请求complete");
|
||
|
||
// }
|
||
})
|
||
this.sendRequest({
|
||
url: "xmgl/checkingPoint/queryById",
|
||
data: {
|
||
id: data.checkingPointId
|
||
},
|
||
method: "GET",
|
||
success(res) {
|
||
console.log('responseData-----------', res);
|
||
let responseData = res.result || {};
|
||
that.form.inPointName = responseData.checkingPointName
|
||
that.form.createUserName = responseData.createUserName
|
||
that.form.posiTion = responseData.position
|
||
that.form.inPointId = responseData.checkingPointId
|
||
that.form.templateList = JSON.parse(responseData.template)
|
||
that.form.minInspectTime = responseData.minInspectTime;
|
||
that.form.minInspectName = responseData.minInspectTime + '分钟';
|
||
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
},
|
||
fail: function(msg) {
|
||
console.log("获取位置失败", msg)
|
||
}
|
||
});
|
||
},
|
||
chen(val) {
|
||
this.status = !this.status
|
||
let statusType = JSON.stringify(val.target.value)
|
||
this.form.status = JSON.parse(statusType)
|
||
|
||
},
|
||
//输入内容
|
||
changeTextarea(e) {
|
||
this.form.alarmDetails = e.detail.value;
|
||
console.log('输入的详情', this.form.alarmDetails);
|
||
},
|
||
//上传附件
|
||
selectImg() {
|
||
var that = this
|
||
uni.chooseImage({
|
||
count: 5 - that.fileList.length,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
that.fileList.push(data)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
//删除附件
|
||
deleteImg(val) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除该附件吗?',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let fileArr = JSON.parse(JSON.stringify(that.fileList));
|
||
fileArr.forEach((item, index) => {
|
||
if (item.url == val.url) {
|
||
fileArr.splice(index, 1)
|
||
}
|
||
})
|
||
that.fileList = fileArr;
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
//提交
|
||
checkTemplateList() {
|
||
let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
this.sendRequest({
|
||
url: "xmgl/checkingPointInfo/add",
|
||
data: {
|
||
alarmDetails: this.form.alarmDetails,
|
||
alarmImage: JSON.stringify(this.fileList),
|
||
// checkingPointId: this.form.inPointId,
|
||
checkingPointName: this.form.inPointName,
|
||
checkingPointUserId: userInfo.userId,
|
||
checkingPointUserName: userInfo.account,
|
||
createDate: "",
|
||
checkingPointId: this.sendData ? this.sendData.checkingPointId : "",
|
||
position: this.form.posiTion,
|
||
status: this.form.status,
|
||
template: JSON.stringify(this.form.templateList),
|
||
updateDate: "",
|
||
xzCheckingRouteTaskId: this.form.id,
|
||
inspectTime: this.time / 60,
|
||
},
|
||
|
||
method: "POST",
|
||
success(res) {
|
||
if (res.code == 200) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '添加成功',
|
||
confirmColor: '#ee430f', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// uni.navigateTo({
|
||
// url: '../projectIndex/projectIndex'
|
||
// })
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
//确定提交
|
||
addBtn() {
|
||
if (this.time < (this.form.minInspectTime * 60)) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: "巡检时长没达标",
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (!this.form.alarmDetails && this.form.status == 2) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: "异常详情不能为空",
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (this.form.templateList.length >= 1) {
|
||
let check = true
|
||
this.form.templateList.forEach(res => {
|
||
if (res.isRequired && (res.value == null || res.value == "")) {
|
||
check = false
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: "必填项" + res.title + "不能为空",
|
||
confirmColor: '#ee6666', //确定字体颜色
|
||
showCancel: false, //没有取消按钮的弹框
|
||
buttonText: '确定',
|
||
success: function(res) {
|
||
|
||
},
|
||
});
|
||
}
|
||
})
|
||
if (check) {
|
||
this.checkTemplateList()
|
||
}
|
||
} else {
|
||
this.checkTemplateList()
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
// :deep(.headerBox ){
|
||
// background: #2b8df3;
|
||
// color: #fff;
|
||
// }
|
||
}
|
||
.content {
|
||
position: relative;
|
||
}
|
||
|
||
.timer-right {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 20rpx;
|
||
|
||
text {
|
||
color: #3A7BFF;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.splitTitle {
|
||
margin: 30rpx 20rpx 0;
|
||
border-left: 6rpx solid $uni-color-primary;
|
||
padding: 0 10rpx;
|
||
line-height: 32rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.infoBlock {
|
||
padding: 30rpx 0;
|
||
|
||
.item {
|
||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 20rpx;
|
||
padding: 0 30rpx;
|
||
|
||
.title {
|
||
font-size: 24rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.value {
|
||
padding: 10rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radioBox {
|
||
margin: 0px 0px 40rpx 40rpx;
|
||
|
||
.radio {
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.radioDiv {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.addBtn {
|
||
bottom: 30rpx;
|
||
left: 50%;
|
||
width: 88%;
|
||
height: 100rpx;
|
||
background: #5181F6;
|
||
color: #fff;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.btnBox {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.addImgBox {
|
||
border: 2rpx solid rgba(42, 43, 91, 0.1);
|
||
background-color: #f6f5f8;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.icon-add {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.imgBox_wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.imgBox {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
display: inline-flex;
|
||
position: relative;
|
||
margin-right: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-top: 40rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.deleteImg {
|
||
position: absolute;
|
||
right: -20rpx;
|
||
top: -20rpx;
|
||
}
|
||
}
|
||
</style> |