408 lines
10 KiB
Vue
408 lines
10 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
巡检点信息
|
||
</view>
|
||
</headers>
|
||
<view class="">
|
||
<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" 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>
|
||
<view class="item" v-show="status">
|
||
<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" v-show="status">
|
||
<view class="uni-form-label" style="padding-left: 12px; 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-icons @click="deleteImg(item)" class="deleteImg" type="clear" size="24">
|
||
</uni-icons>
|
||
</view>
|
||
<view class="addImgBox" @click="selectImg" v-if="fileList.length<5">
|
||
<image src="/static/icon-add.png" class="icon-add"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</form>
|
||
|
||
</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: "777563", // 巡检点位置
|
||
createUserName: "创建人", //创建人
|
||
createData: "创建时间", //创建时间
|
||
templateList: []
|
||
|
||
},
|
||
fileList: [],
|
||
status: false,
|
||
saoData: "",
|
||
longitude: 0,
|
||
latitude: 0,
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.checkOpenGPSServiceByAndroid()
|
||
this.getnow(e.data)
|
||
},
|
||
methods: {
|
||
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) {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
geocode: true,
|
||
success: (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,
|
||
},
|
||
header: {
|
||
'content-type': "x-www-from-urlencoded"
|
||
},
|
||
method: "GET",
|
||
success(res) {
|
||
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);
|
||
|
||
},
|
||
|
||
})
|
||
this.form.inPointName = data.checkingPointName
|
||
this.form.createUserName = data.createUserName
|
||
this.form.posiTion = data.position
|
||
this.form.inPointId = data.checkingPointId
|
||
this.form.templateList = JSON.parse(data.template)
|
||
console.log('this.form.templateList 数据 ' + JSON.parse(data.template)[0].title);
|
||
|
||
}
|
||
});
|
||
},
|
||
chen() {
|
||
|
||
this.status = !this.status
|
||
console.log('用户点击取消 ' + this.status);
|
||
},
|
||
//输入内容
|
||
changeTextarea(e) {
|
||
this.form.alarmDetails = e.detail.value;
|
||
},
|
||
//上传附件
|
||
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: this.fileList,
|
||
checkingPointId: this.form.inPointId,
|
||
checkingPointName: this.form.inPointName,
|
||
checkingPointUserId: userInfo.userId,
|
||
checkingPointUserName: userInfo.account,
|
||
createDate: "",
|
||
id: 0,
|
||
position: this.form.posiTion,
|
||
status: 0,
|
||
template: "",
|
||
updateDate: ""
|
||
},
|
||
|
||
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'
|
||
})
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
//确定提交
|
||
addBtn() {
|
||
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">
|
||
.splitTitle {
|
||
margin: 15px 10px 0;
|
||
border-left: 3px solid $uni-color-primary;
|
||
padding: 0 5px;
|
||
line-height: 16px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.infoBlock {
|
||
padding: 15px 0;
|
||
|
||
.item {
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 10px;
|
||
padding: 0 15px;
|
||
|
||
.title {
|
||
font-size: 12px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.value {
|
||
padding: 5px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.radioBox {
|
||
margin: 0px 0px 20px 20px;
|
||
|
||
.radio {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.radioDiv {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.addBtn {
|
||
bottom: 30rpx;
|
||
left: 50%;
|
||
width: 88%;
|
||
height: 100rpx;
|
||
background: #5181F6;
|
||
color: #fff;
|
||
border-radius: 25px;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.btnBox {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.addImgBox {
|
||
border: 1px solid rgba(42, 43, 91, 0.1);
|
||
background-color: #f6f5f8;
|
||
width: 60px;
|
||
height: 60px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
margin-top: 20px;
|
||
|
||
.icon-add {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
|
||
.imgBox_wrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.imgBox {
|
||
width: 60px;
|
||
height: 60px;
|
||
display: inline-flex;
|
||
position: relative;
|
||
margin-right: 13px;
|
||
margin-bottom: 10px;
|
||
margin-top: 20px;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.deleteImg {
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
}
|
||
}
|
||
</style>
|