<template>
|
<view class="device_spot">
|
<view class="header_semicircle"></view>
|
<view class="device_spot_content">
|
<view class="device_item">
|
<view class="device_item_title">
|
<span>HSHS-001</span>
|
</view>
|
<view class="device_item_value">
|
<span class="label">设备名称：</span>
|
<span>混凝土搅拌机</span>
|
</view>
|
<view class="device_item_value">
|
<span class="label">型号规格：</span>
|
<span>混凝土搅拌机</span>
|
</view>
|
<view class="device_item_value">
|
<span class="label">设备类型：</span>
|
<span>混凝土搅拌机</span>
|
</view>
|
</view>
|
<view class="device_form">
|
<u-form
|
ref="form"
|
labelWidth="auto"
|
:model="formSpot"
|
:rules="rulesSpot">
|
<u-form-item
|
labelPosition="left"
|
label="点检时间"
|
prop="checkTime"
|
borderBottom
|
@click="ckickTime()">
|
<u-input
|
v-model="formSpot.checkTime"
|
border="none"
|
placeholder="请选择点检时间"
|
disabled
|
disabledColor="#FFFFFF"
|
inputAlign="right">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="calendar"
|
></u-icon>
|
</u-form-item>
|
<u-form-item
|
labelPosition="left"
|
label="点检类型"
|
prop="checkTypeName"
|
borderBottom
|
@click="clickCheckType()">
|
<u-input
|
v-model="formSpot.checkTypeName"
|
border="none"
|
placeholder="请选择点检类型"
|
disabled
|
disabledColor="#FFFFFF"
|
inputAlign="right">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right"
|
></u-icon>
|
</u-form-item>
|
<u-form-item label="点检内容及结果" labelPosition="top" prop="checkContent">
|
<view style="margin: 5px 0; width: 100%;">
|
<u-textarea
|
v-model="formSpot.checkContent"
|
height="100"
|
border="surround"
|
placeholder="请输入点检内容及结果">
|
</u-textarea>
|
</view>
|
</u-form-item>
|
<u-form-item label="上传照片" labelPosition="top" prop="checkContent">
|
<view style="margin: 5px 0; width: 100%;">
|
<u-upload
|
:fileList="fileList"
|
name="1"
|
accept="image"
|
uploadIcon="plus"
|
@afterRead="afterRead"
|
@delete="deleteImage"
|
></u-upload>
|
</view>
|
</u-form-item>
|
<view class="login_content_button">
|
<u-button
|
type="primary"
|
:color="colorStyle"
|
@click="submitForm()">提交</u-button>
|
</view>
|
</u-form>
|
</view>
|
</view>
|
<u-datetime-picker
|
:show="showTime"
|
v-model="defaultTime"
|
mode="datetime"
|
@cancel="cancelTime"
|
@confirm="confirmTime">
|
</u-datetime-picker>
|
<u-picker
|
:show="showCheckType"
|
:columns="checkTypeData"
|
keyName="dictName"
|
closeOnClickOverlay
|
@cancel="cancelCheckType()"
|
@confirm="confirmCheckType()"
|
@close="showCheckType = false"
|
></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import baseUrl from '../../api/http.js';
|
import { changeTime, throttle } from '../../plugins/public.js';
|
export default {
|
data() {
|
return {
|
formSpot: {
|
checkTime: '',
|
checkTypeName: '',
|
},
|
rulesSpot: {
|
checkTime: [{
|
required: true,
|
message: '请选择点检时间',
|
trigger: 'blur',
|
}],
|
checkTypeName: [{
|
required: true,
|
message: '请选择点检类型',
|
trigger: 'blur',
|
}],
|
checkContent: [{
|
required: true,
|
message: '请输入点检内容及结果',
|
trigger: 'blur',
|
}]
|
},
|
fileList: [],
|
colorStyle: 'linear-gradient(to right, rgb(79, 142, 244), rgb(85, 109, 254))',
|
showTime: false,
|
defaultTime: Number(new Date()),
|
deviceId: ''
|
}
|
},
|
onReady() {
|
this.$refs.form.setRules(this.rulesSpot);
|
},
|
onLoad(option) {
|
this.deviceId = option.deviceId;
|
this.getChackAllTypes();
|
},
|
methods: {
|
// 获取点检类型
|
async getChackAllTypes(){
|
const { data } = await this.$api.spot.searchDictionary({
|
pageNum: 1,
|
pageSize: 100000000,
|
dictType: 'check_type'
|
});
|
this.checkTypeData = data.list;
|
},
|
// 读取图片后
|
afterRead(event) {
|
console.log(event);
|
this.fileList.push({
|
status: 'loading',
|
message: '上传中',
|
})
|
uni.uploadFile({
|
url: `${baseUrl}/file/file/upload`,
|
fileType: 'image',
|
filePath: event.file.url,
|
name: 'file',
|
success: (res) => {
|
const data = JSON.parse(res.data);
|
this.$set(this.fileList, this.fileList.length - 1, {
|
id: this.fileList.length + 1,
|
status: 'success',
|
message: '',
|
data: data.data,
|
url: `http://filemanage.thhy-tj.com:8888/${data.data}`
|
})
|
},
|
fail: (error) => {
|
uni.$u.toast('上传失败！');
|
}
|
})
|
},
|
// 删除图片
|
deleteImage(event) {
|
this.fileList.splice(event.index, 1);
|
},
|
// 选择时间
|
ckickTime() {
|
this.showTime = true;
|
this.$set(this.formSpot, 'checkTime', '');
|
},
|
// 点击取消选择时间
|
cancelTime() {
|
this.showTime = false;
|
this.$set(this.formSpot, 'checkTime', '');
|
},
|
// 点击选择时间
|
confirmTime({ value }) {
|
this.$set(this.formSpot, 'checkTime', changeTime(value));
|
this.showTime = false;
|
},
|
// 选择点检类型
|
clickCheckType() {
|
this.showCheckType = true;
|
this.$set(this.formSpot, 'checkTypeName', '');
|
this.$set(this.formSpot, 'checkType', '');
|
},
|
// 点击取消选择时间
|
cancelCheckType() {
|
this.showCheckType = false;
|
this.$set(this.formSpot, 'checkTypeName', '');
|
this.$set(this.formSpot, 'checkType', '');
|
},
|
// 点击选择点检类型
|
confirmCheckType({ value }) {
|
this.showCheckType = false;
|
this.$set(this.formSpot, 'checkTypeName', value[0].checkTypeName);
|
this.$set(this.formSpot, 'checkType', value[0].checkType);
|
},
|
// 提交点检信息
|
submitForm: throttle(function() {
|
this.$refs.form.validate().then((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formSpot);
|
delete params.checkTypeName;
|
params.deviceId = this.deviceId;
|
if(this.fileList.length > 0) {
|
params.fileList = this.fileList.map(item => {
|
return {
|
file: item.data
|
}
|
})
|
}
|
this.$api.spot.insertSpotCheckInfo(params).then(res => {
|
if(res.success) {
|
uni.$u.toast('添加成功!');
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500)
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.device_spot {
|
position: relative;
|
width: 100%;
|
height: 100vh;
|
background: rgba(246, 246, 246, 1);
|
|
.header_semicircle {
|
width: 100%;
|
height: 100px;
|
background: #1977FF;
|
border-radius: 0 0 50% 50%;
|
}
|
|
.device_spot_content {
|
position: absolute;
|
top: 10px;
|
left: 50%;
|
transform: translateX(-50%);
|
display: flex;
|
flex-direction: column;
|
padding: 15px;
|
width: calc(100% - 60px);
|
height: calc(100% - 40px);
|
background: #FFFFFF;
|
border-radius: 6px;
|
overflow-y: auto;
|
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.04);
|
|
.device_item {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
padding: 10px 15px;
|
// height: 280px;
|
background: #F6FAFF;
|
border-radius: 4px;
|
border-top: 3px solid rgba(25, 119, 255, 1);
|
|
.device_item_title {
|
position: relative;
|
padding: 0 10px;
|
margin: 5px 0;
|
color: rgba(25, 119, 255, 1);
|
font-size: 18px;
|
|
&:before {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: 0%;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 80%;
|
background-color: rgba(25, 119, 255, 1);
|
}
|
}
|
|
.device_item_value {
|
margin: 5px 0;
|
}
|
|
.label {
|
display: inline-block;
|
color: #999999;
|
white-space: nowrap;
|
}
|
|
.value {
|
color: #1977FF;
|
}
|
}
|
|
.device_form {
|
// margin-top: 20px;
|
}
|
}
|
}
|
</style>
|
