sx_yjb_app/pages/application/speEquip/add.vue

694 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view :class="isUps == true ? 'prevent' : ''">
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">开始巡检</block>
</cu-custom>
<scroll-view scroll-y="false">
<view class="form">
<view class="cu-form-group">
<view class="title">巡检人</view>
<input name="input" v-model="pd.INSPECTOR" placeholder="请输入巡检人"></input>
</view>
<view class="cu-form-group bb">
<view class="title">巡检时间</view>
<picker mode="date" :value="pd.INSPECTIONTIME" @change="changeDate">
<view class="picker">
{{ pd.INSPECTIONTIME ? pd.INSPECTIONTIME : '请选择' }}
</view>
</picker>
</view>
<view class="cu-form-textarea margin-top">
<view class="cu-form-title">巡检内容</view>
<textarea maxlength="-1" v-model="pd.INSPECTIONCONTENT" placeholder="(必填项)"></textarea>
</view>
<view class="cu-form-group margin-top">
<view class="title">是否有故障</view>
<radio-group class="selected">
<view class="group mr20">
<radio class='radio' value="是" :checked="pd.ISFAULT=='是'" @click="radioType('是')"></radio>
<text>是</text>
</view>
<view class="group">
<radio class='radio' value="否" :checked="pd.ISFAULT=='否'" @click="radioType('否')"></radio>
<text>否</text>
</view>
</radio-group>
</view>
<view class="cu-bar bg-white margin-top" v-if="pd.ISFAULT=='是'">
<view class="action">
故障照片
</view>
<view class="action">
{{ imgList.length }}/4
</view>
</view>
<view class="cu-form-group" v-if="pd.ISFAULT=='是'">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage(imgList[index].filePath)"
data-type="0" :data-url="imgList[index].filePath">
<image :src="imgList[index].filePath" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="0" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage(0)" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top" v-if="pd.ISFAULT=='是'">
<view class="action">
故障处理后照片
</view>
<view class="action">
{{ imgList1.length }}/4
</view>
</view>
<view class="cu-form-group" v-if="pd.ISFAULT=='是'">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList1" :key="index"
@tap="ViewImage(imgList1[index].filePath)" data-type="1" :data-url="imgList1[index].filePath">
<image :src="imgList1[index].filePath" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="1" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage(1)" v-if="imgList1.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
巡检图片
</view>
<view class="action">
{{ imgList2.length }}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList2" :key="index"
@tap="ViewImage(imgList2[index].filePath)" data-type="1" :data-url="imgList2[index].filePath">
<image :src="imgList2[index].filePath" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" data-type="2" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage(2)" v-if="imgList2.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group margin-top" v-if="pd.ISFAULT=='是'">
<view class="title">是否启动应急预案</view>
<radio-group class="selected">
<view class="group mr20">
<radio class='radio' value="1" :checked="pd.ISEMERGENCY=='1'" @click="isEmergencyChoose('1')"></radio>
<text>是</text>
</view>
<view class="group">
<radio class='radio' value="0" :checked="pd.ISEMERGENCY=='0'" @click="isEmergencyChoose('0')"></radio>
<text>否</text>
</view>
</radio-group>
</view>
<view class="cu-form-group" v-if="pd.ISEMERGENCY=='1'">
<view class="title">事件类型</view>
<input name="input" v-model="pd.EVENT_TYPE" placeholder="请输入事件类型"></input>
</view>
<view class="cu-form-group" v-if="pd.ISEMERGENCY=='1'">
<view class="title">预案类型</view>
<input name="input" v-model="pd.PLAN_TYPE" placeholder="请输入预案类型"></input>
</view>
<!-- <view class="cu-form-group" v-if="pd.ISEMERGENCY=='1'">-->
<!-- <view class="title">报警部门</view>-->
<!-- <view class="picker-tree-box">-->
<!-- <view class="picker-tree" @tap="showZgTree">{{pd.REPORT_DEPARTMENT_NAME?pd.REPORT_DEPARTMENT_NAME:'请选择'}}</view>-->
<!-- </view>-->
<!-- <tki-tree ref="tkiTree"-->
<!-- :selectParent=true-->
<!-- :range="treeNode"-->
<!-- rangeKey="name"-->
<!-- @confirm="zgtreeConfirm"-->
<!-- @cancel="zgtreeCancel"></tki-tree>-->
<!-- </view>-->
<!-- <view class="cu-form-group" v-if="pd.ISEMERGENCY=='1' && reportUserList.length>0">-->
<!-- <view class="title">报警人</view>-->
<!-- <picker @change="PickerZgr" :value="uindex" :range="reportUserList" range-key="NAME">-->
<!-- <view class="picker">-->
<!-- {{pd.REPORT_USER_NAME?pd.REPORT_USER_NAME:'请选择'}}-->
<!-- </view>-->
<!-- </picker>-->
<!-- </view>-->
<!-- <view class="cu-form-group bb" v-if="pd.ISEMERGENCY=='1'">-->
<!-- <view class="title">报警时间</view>-->
<!-- <picker mode="date" :value="pd.REPORT_TIME" @change="changeReportDate">-->
<!-- <view class="picker">-->
<!-- {{ pd.REPORT_TIME ? pd.REPORT_TIME : '请选择' }}-->
<!-- </view>-->
<!-- </picker>-->
<!-- </view>-->
<view class="cu-form-group" v-if="pd.LONGITUDE && pd.LONGITUDE != 'undefined'">
<view class="sign-title">经度:</view>
<view class="wui-sign-cotent">{{ pd.LONGITUDE }}</view>
</view>
<view class="cu-form-group" v-if="pd.LATITUDE && pd.LATITUDE != 'undefined'">
<view class="sign-title">纬度:</view>
<view class="wui-sign-cotent">{{ pd.LATITUDE }}</view>
</view>
<view class="cu-form-group" v-if="pd.ISEMERGENCY=='1'">
<view class="title">备注</view>
<input name="input" v-model="pd.BEIZHU" placeholder="请输入备注"></input>
</view>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(goSubmit)"></button>
</view>
</scroll-view>
</view>
</template>
<script>
import {
basePath, corpinfoId, deptId, loginUser, formatDate, loginSession, baseImgPath
} from '@/common/tool.js';
import tkiTree from "@/components/select-tree/select-tree.vue"
import gcoord from '@/common/gcoord.js'
export default {
components: {
tkiTree
},
data() {
return {
reportUserList: [],
treeNode: [], //部门下拉数据
uindex: -1,
isUps: false,
msg: 'add',
riskId: '',
itemId: '',
index: '',
noClick: true,
pd: {},
imgList: [],
imgList1: [],
imgList2: [],
}
},
onLoad(event) {
this.pd.SPECIALEQUIPMENT_ID = event.SPECIALEQUIPMENT_ID;
this.pd.CORPINFO_ID = corpinfoId;
this.pd.CREATOR = loginUser.NAME;
this.pd.ISEMERGENCY = '0';
this.pd.ISFAULT = '否';
this.getDept();
loginSession();
},
methods: {
getDept() {
var _this = this;
uni.request({
url: basePath + '/app/sys/listTree',//部门下拉接口
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
CORPINFO_ID: loginUser.CORPINFO_ID,
USER_ID: loginUser.USER_ID,
},
success: (res) => {
if ("success" == res.data.result) {
_this.treeNode = eval(res.data.zTreeNodes);
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
// 确定回调事件
zgtreeConfirm(e) {
this.isUps = false;
this.pd.REPORT_DEPARTMENT_ID = e[0].id;
this.pd.REPORT_DEPARTMENT_NAME = e[0].name;
this.uindex = -1;
this.pd.REPORT_USER = '';
this.pd.REPORT_USER_NAME = '';
this.$forceUpdate();//强制刷新
this.getUserList();
},
// 取消回调事件
zgtreeCancel(e) {
this.isUps = false;
},
// 显示树形选择器
showZgTree() {
this.isUps = true
this.$refs.tkiTree._show();
},
//获取人员列表
getUserList() {
//发送 post 请求
var _this = this;
uni.request({
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
url: basePath + '/app/sys/listUser',
data: {
DEPARTMENT_ID: _this.pd.REPORT_DEPARTMENT_ID,
tm: new Date().getTime(),
CORPINFO_ID: loginUser.CORPINFO_ID,
USER_ID: loginUser.USER_ID,
},
success: function (res) {
if ("success" == res.data.result) {
_this.reportUserList = res.data.userList;
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
})
},
PickerZgr(e) {
this.uindex = e.detail.value;
this.pd.REPORT_USER = this.reportUserList[this.uindex].USER_ID;
this.pd.REPORT_USER_NAME = this.reportUserList[this.uindex].NAME;
this.$forceUpdate();//强制刷新
},
showMapModal() {
var _this = this
uni.navigateTo({
url: '/pages/map/mapPro',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (e) {
_this.pd.LONGITUDE = e.data.longitue;
_this.pd.LATITUDE = e.data.latitude;
}
},
})
},
changeDate(e) {
this.pd.INSPECTIONTIME = e.detail.value
this.$forceUpdate();//强制刷新
},
changeReportDate(e) {
this.pd.REPORT_TIME = e.detail.value
this.$forceUpdate();//强制刷新
},
radioType(e) {
this.pd.ISFAULT = e
this.$forceUpdate();//强制刷新
},
isEmergencyChoose(e) {
this.pd.ISEMERGENCY = e
this.$forceUpdate();//强制刷新
},
//图片上传
ChooseImage(e) {
var ss = 4
if (e == 0) {
ss = 4 - this.imgList.length;
} else if (e == 1) {
ss = 4 - this.imgList1.length;
} else if (e == 2) {
ss = 4 - this.imgList2.length;
}
var ss = 4 - this.imgList.length;
uni.chooseImage({
count: ss, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera', 'album'], //从相册选择
success: (res) => {
if (e == 0) {
for (let i = 0; i < res.tempFilePaths.length; i++) {
let img = {};
img.id = '';
img.filePath = res.tempFilePaths[i];
this.imgList.push(img)
}
} else if (e == 1) {
for (let i = 0; i < res.tempFilePaths.length; i++) {
let img = {};
img.id = '';
img.filePath = res.tempFilePaths[i];
this.imgList1.push(img)
}
} else if (e == 2) {
for (let i = 0; i < res.tempFilePaths.length; i++) {
let img = {};
img.id = '';
img.filePath = res.tempFilePaths[i];
this.imgList2.push(img)
}
}
}
});
},
ViewImage(url) {
let files = [];
files.push(url)
uni.previewImage({
urls: files,
current: 0
});
},
DelImg(e) {
var _this = this;
let i = e.currentTarget.dataset.index
uni.showModal({
title: '双控',
content: '确定要删除这张图片吗?',
cancelColor: "#000000",
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
if (e.currentTarget.dataset.type == 0) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
} else if (e.currentTarget.dataset.type == 1) {
this.imgList1.splice(e.currentTarget.dataset.index, 1)
} else if (e.currentTarget.dataset.type == 2) {
this.imgList2.splice(e.currentTarget.dataset.index, 1)
}
}
}
})
},
goSubmit() {
var _this = this;
if (!_this.pd.INSPECTOR) {
uni.showToast({
icon: 'none',
title: '请填巡检人',
duration: 1500
});
return;
}
if (!_this.pd.INSPECTIONTIME) {
uni.showToast({
icon: 'none',
title: '请填巡检时间',
duration: 1500
});
return;
}
if (!_this.pd.INSPECTIONCONTENT) {
uni.showToast({
icon: 'none',
title: '请选巡检内容',
duration: 1500
});
return;
}
if (!_this.pd.ISFAULT) {
uni.showToast({
icon: 'none',
title: '请选择是否有故障',
duration: 1500
});
return;
}
if (_this.pd.ISFAULT == '是' && _this.imgList.length <= 0) {
uni.showToast({
icon: 'none',
title: '请上传故障照片',
duration: 1500
});
return;
}
if (_this.pd.ISFAULT == '是' && _this.imgList1.length <= 0) {
uni.showToast({
icon: 'none',
title: '请上传故障处理后照片',
duration: 1500
});
return;
}
if (_this.imgList2.length <= 0) {
uni.showToast({
icon: 'none',
title: '请上传巡检图片',
duration: 1500
});
return;
}
if (_this.pd.ISFAULT == '是' && !_this.pd.ISEMERGENCY) {
uni.showToast({
icon: 'none',
title: '请选择是否启动应急预案',
duration: 1500
});
return;
}
if (_this.pd.ISEMERGENCY == '1' && !_this.pd.EVENT_TYPE) {
uni.showToast({
icon: 'none',
title: '请填写事件类型',
duration: 1500
});
return;
}
if (_this.pd.ISEMERGENCY == '1' && !_this.pd.PLAN_TYPE) {
uni.showToast({
icon: 'none',
title: '请填写预案类型',
duration: 1500
});
return;
}
// if (_this.pd.ISEMERGENCY == '1' && !_this.pd.REPORT_USER) {
// uni.showToast({
// icon: 'none',
// title: '请选择报警人',
// duration: 1500
// });
// return;
// }
// if (_this.pd.ISEMERGENCY == '1' && !_this.pd.REPORT_TIME) {
// uni.showToast({
// icon: 'none',
// title: '请选择报警时间',
// duration: 1500
// });
// return;
// }
uni.showLoading({
title: "提交中..."
});//加载中动画
var fileList = [];
var typeList = [];
// 创建表单数据对象
const formData = {}
// 复制pd对象的属性到formData
Object.keys(this.pd).forEach(key => {
formData[key] = this.pd[key]
})
// 处理图片上传逻辑
if (this.pd.ISFAULT === '是') {
this.uploadImgFaults(fileList, typeList)
this.uploadImgHandles(fileList, typeList)
}
this.uploadImgInspections(fileList, typeList)
// 添加类型列表和用户信息
formData.TYPES = typeList.join(",")
formData.CORPINFO_ID = loginUser.CORPINFO_ID
formData.USER_ID = loginUser.USER_ID
// 获取当前位置信息
uni.getLocation({
type: 'wgs84', // 返回GPS坐标
success: (location) => {
console.log('LONGITUDE:' + location.longitude + '||' + location.latitude)
// 将 WGS84 坐标转换为 BD09 坐标直接写bd09不生效必须手动转换
const converted = gcoord.transform([location.longitude, location.latitude], gcoord.WGS84, gcoord.BD09)
// 将转换后的经纬度添加到表单数据
formData.LONGITUDE = converted[0]
formData.LATITUDE = converted[1]
// 继续执行文件上传
uploadWithFormData(formData)
},
fail: (err) => {
console.error('获取定位失败:', err)
// 提示用户
uni.showModal({
title: '定位权限申请',
content: '请授予定位权限以提交位置信息',
success: (res) => {
if (res.confirm) {
// 打开设置页面让用户授权
uni.openSetting()
}
}
})
// 无定位信息时继续上传(根据实际需求调整)
uploadWithFormData(formData)
}
})
// 分离上传逻辑以便复用
function uploadWithFormData(formData) {
uni.uploadFile({
url: basePath + '/app/specialequipmentaqxj/add',
files: fileList,
formData: formData,
success: (res) => {
try {
const data = JSON.parse(res.data)
if (data.result === 'success') {
uni.showToast({
icon: 'none',
title: '提交成功',
duration: 1500
})
setTimeout(() => {
const pages = getCurrentPages()
const prePage = pages[pages.length - 2]
prePage.$vm.initflag = true
uni.navigateBack()
uni.hideLoading()
}, 1500)
} else {
uni.showToast({
title: '提交失败',
duration: 2000
})
}
} catch (e) {
console.error('解析响应数据失败:', e)
uni.showToast({
title: '数据解析错误',
duration: 2000
})
}
},
fail: (err) => {
console.error('上传失败:', err)
uni.showToast({
title: '网络请求失败',
duration: 2000
})
}
})
}
},
uploadImgFaults(fileList, typeList) {
this.imgList.map(item => {
var img = {}
img.name = 'file' + (fileList.length)
img.uri = item.filePath
fileList.push(img)
typeList.push(24)
})
},
uploadImgHandles(fileList, typeList) {
this.imgList1.map(item => {
var img = {}
img.name = 'file' + (fileList.length)
img.uri = item.filePath
fileList.push(img)
typeList.push(25)
})
},
uploadImgInspections(fileList, typeList) {
this.imgList2.map(item => {
var img = {}
img.name = 'file' + (fileList.length)
img.uri = item.filePath
fileList.push(img)
typeList.push(26)
})
},
}
}
</script>
<style>
.prevent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
}
.cu-form-title {
padding: 20upx 0;
}
.cu-form-textarea {
background-color: #ffffff;
padding: 1upx 30upx 20upx;
min-height: 100upx;
}
.cu-form-textarea textarea {
height: 4.6em;
width: 100%;
line-height: 1.2em;
flex: 1;
font-size: 28upx;
padding: 0;
}
.selected {
display: flex;
align-items: center;
height: 100upx;
}
.selected .radio {
transform: scale(0.8);
margin-right: 10upx;
}
.group {
display: flex;
align-items: center;
}
.cu-form-group .title {
font-size: 28upx;
font-weight: bold;
}
.cu-bar .action:first-child {
font-size: 28upx;
}
.cu-form-group .picker {
color: #808080;
}
.picker-tree {
color: #808080;
}
</style>