<template>
|
<view class="box1">
|
<!-- 设备+日期 -->
|
<view class="box_list">
|
<view class="box_list_item" @click="show = true">
|
<view class="box_list_item_left">
|
<text>检验设备</text><text>*</text>
|
</view>
|
<view class="box_list_item_right">
|
<text :style="form.equipmentName ? 'color: #000' : ''">{{ form.equipmentName ? form.equipmentName : '点击选择巡检设备' }}</text>
|
<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
|
</view>
|
</view>
|
<view class="box_list_code" @click.stop="openCode">
|
<view class="boxs">
|
<image src="@/static/jianyan_ic_saoma@2x.png" alt="" />
|
<text>扫描设备</text>
|
</view>
|
</view>
|
<view class="box_list_item" @click="showTime = true">
|
<view class="box_list_item_left">
|
<text>巡检时间</text><text>*</text>
|
</view>
|
<view class="box_list_item_right">
|
<text class="black">{{form.time}}</text>
|
<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
|
</view>
|
</view>
|
</view>
|
<!-- 状态+图片/视频 -->
|
<view class="box_list1">
|
<view class="box_list1_item">
|
<view class="box_list1_item_left">
|
<text>设备状态</text><text>*</text>
|
</view>
|
<view class="box_list1_item_right">
|
<view class="box_list1_item_right_item" :class="{'active': item.active}"
|
v-for="(item, index) in status" :key="index" @click="changeItem(index, item.id)">{{item.name}}
|
</view>
|
</view>
|
</view>
|
<view class="box_list1_club">
|
<view class="box_list1_club_label">巡检现场照片<text v-show="form.status == '1'">*</text></view>
|
<view class="box_list1_club_list">
|
<view class="box_list1_club_list_item" @click="uploadFile">
|
<view class="type">
|
<image class="type_img" src="@/static/btn_upload@2x.png" alt="" />
|
</view>
|
</view>
|
<view class="box_list1_club_list_item" v-for="(item, index) in form.files" :key="index"
|
@click="seeBigFile(index)">
|
<image class="close" src="@/static/ic_delete@2x.png" @click.stop="dele(index)" />
|
<image class="play" src="@/static/ic_play@2x.png" v-if="item.type === 1" />
|
<view class="type">
|
<video :src="item.url" v-if="item.type === 1"></video>
|
<image v-else class="type_img" :src="item.url" mode="widthFix" />
|
</view>
|
</view>
|
<view class="box_list1_club_list_item1"></view>
|
<view class="box_list1_club_list_item1"></view>
|
</view>
|
</view>
|
</view>
|
<view class="box_list2">
|
<view class="box_list2_label">备注</view>
|
<textarea name="" id="" v-model="form.remarks" cols="20" rows="5" maxlength="300"
|
placeholder="请详细描述巡检情况"></textarea>
|
</view>
|
<view class="box_footer">
|
<button class="box_footer_submit" v-preventReClick @click="submit">提交</button>
|
</view>
|
<!-- 查看大图 -->
|
<Preview :list="form.files" :current="current" v-if="isOpen" />
|
<!-- 选择设备 -->
|
<ytyDataPicker :show="show" :dataList="columns" @select="handleSelect" @search="handleSearch" @close="show = false" />
|
<!-- 选择时间 -->
|
<u-datetime-picker :show="showTime" v-model="currentDate" @cancel="showTime = false" @confirm="queding" mode="datetime"></u-datetime-picker>
|
</view>
|
</template>
|
|
<script>
|
import { getBarcodeContent } from '@/util/api/WorkOrderAPI'
|
import { saveBean, getDeviceByCondition, getsbInfo } from '@/util/api/QualityAPI'
|
import { queryListByCode, uploadFiles } from '@/util/api/index'
|
import { QRCodeType, baseUrl, fileType } from '@/common/config.js'
|
import { setTime, judgmentType } from '@/util/utils.js'
|
import { mapState } from 'vuex'
|
import ytyDataPicker from '@/components/yty-data-picker/yty-data-picker.vue'
|
import Preview from '@/components/Preview/Preview.vue'
|
|
export default {
|
data() {
|
return {
|
list1: [
|
'https://cloudfactory.oss-cn-hangzhou.aliyuncs.com/deviceCheck/20230911/e228a809-0a6b-443c-9a2c-78d5c1b1b633.mp4',
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
],
|
status: [{
|
name: '正常',
|
active: true,
|
id: '0'
|
},
|
{
|
name: '异常',
|
active: false,
|
id: '1'
|
}
|
],
|
columns: [],
|
path: '',
|
show: false,
|
showTime: false,
|
currentDate: new Date(),
|
current: 0,
|
form: {
|
equipmentId: '', // 设备id
|
equipmentName: '', //设备名称
|
time: '', // 巡检时间
|
status: '0', // 设备状态
|
files: [], // 巡检图片/视频
|
remarks: '' // 备注
|
}
|
};
|
},
|
components:{
|
ytyDataPicker,
|
Preview
|
},
|
onLoad() {
|
this.form.time = setTime(new Date(), '-')
|
this.getqueryListByCode()
|
this.getSB('')
|
},
|
computed: {
|
...mapState(['session'])
|
},
|
methods: {
|
// 删除指定文件
|
dele(i) {
|
this.form.files.splice(i, 1)
|
},
|
// 选择设备
|
handleSelect(e) {
|
this.form.equipmentId = e.code
|
this.form.equipmentName = e.name
|
this.show = false
|
},
|
// 搜索设备
|
handleSearch(e) {
|
this.getSB(e)
|
},
|
// 确认选择日期
|
queding(val) {
|
this.form.time = uni.$u.timeFormat(val.value, 'yyyy-mm-dd hh:MM:ss')
|
this.showTime = false
|
},
|
// 扫码
|
openCode() {
|
var that = this
|
uni.scanCode({
|
onlyFromCamera: true,
|
success: function (result) {
|
getBarcodeContent({
|
barcode: result.result
|
}).then(res => {
|
if (res.code === 200) {
|
if (res.data.barcodeType === QRCodeType.SB) {
|
getsbInfo(res.data.id)
|
.then(res1 => {
|
if (res1.code === 200) {
|
that.form.equipmentId = res1.data.id
|
that.form.equipmentName = res1.data.name
|
}
|
})
|
} else {
|
uni.showToast({
|
title: '请扫描正确的设备码',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
}
|
})
|
}
|
});
|
},
|
// 改变状态
|
changeItem(i, id) {
|
this.status.forEach((item, index) => {
|
item.active = index === i;
|
})
|
this.form.status = id
|
},
|
submit() {
|
if (!this.form.equipmentId) return uni.showToast({
|
title: '设备不能为空',
|
icon: 'none',
|
duration: 2000
|
});
|
if (!this.form.time) return uni.showToast({
|
title: '时间不能为空',
|
icon: 'none',
|
duration: 2000
|
});
|
if (!this.form.status) return uni.showToast({
|
title: '状态不能为空',
|
icon: 'none',
|
duration: 2000
|
});
|
if (this.form.status == '1') {
|
if (this.form.files.length === 0) return uni.showToast({
|
title: '现场照片不能为空',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
saveBean({
|
checkDate: this.form.time,
|
content: this.form.remarks,
|
deviceId: this.form.equipmentId,
|
status: this.form.status,
|
multiFilesSaveBeans: this.form.files
|
}).then(res => {
|
if (res.code === 200) {
|
uni.showToast({
|
title: '提交成功',
|
icon: 'success',
|
duration: 2000,
|
mask: true
|
});
|
setTimeout(() => {
|
uni.navigateBack({
|
delta: 1
|
});
|
}, 2000)
|
}
|
})
|
},
|
// 获取当前用户下所有设备
|
getSB(name) {
|
getDeviceByCondition({ name })
|
.then(res => {
|
if (res.code === 200 && res.data && res.data.length > 0) {
|
let arr = []
|
res.data.forEach(item => {
|
arr.push({ name: item.name, code: item.id })
|
})
|
this.columns = arr
|
} else {
|
this.columns = []
|
}
|
})
|
},
|
// 点击上传
|
uploadFile() {
|
var that = this
|
uni.chooseImage({
|
success: (chooseImageRes) => {
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
console.log(tempFilePaths)
|
uni.uploadFile({
|
url: baseUrl + '/ext/routeCardExt/upload',
|
filePath: tempFilePaths[0],
|
name: 'file',
|
header: {
|
'Cookie': 'eva-auth-token=' + that.session
|
},
|
formData: {
|
'folder': that.path
|
},
|
success: (uploadFileRes) => {
|
let res = JSON.parse(uploadFileRes.data)
|
let type = ''
|
for (let i = 0; i < fileType.length; i++) {
|
if (tempFilePaths[0].indexOf(fileType[i].name) !== -1) {
|
type = fileType[i].type
|
}
|
}
|
that.form.files.push({
|
fileUrl: res.data.imgaddr,
|
filename: res.data.imgname,
|
type,
|
url: res.data.url
|
})
|
}
|
});
|
}
|
});
|
},
|
// 获取字典纸
|
getqueryListByCode() {
|
queryListByCode({
|
dicCode: 'FOLDER',
|
label: 'DEVICE_CHECK'
|
}).then(res => {
|
if (res.code === 200) {
|
this.path = res.data[0].code
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box1 {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: #F7F7F7;
|
|
.sb {
|
width: 100%;
|
height: 800rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
}
|
|
.box_list {
|
padding: 0 30rpx 0 30rpx;
|
background: white;
|
display: flex;
|
flex-direction: column;
|
|
.box_list_code {
|
margin: 20rpx 0;
|
|
.boxs {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 12rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: $nav-color;
|
}
|
}
|
}
|
|
.box_list_item {
|
height: 98rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
|
&:last-child {
|
border: none;
|
}
|
|
.box_list_item_left {
|
text {
|
font-size: 30rpx;
|
font-weight: 400;
|
|
&:first-child {
|
color: #222222;
|
}
|
|
&:last-child {
|
color: #DE5243;
|
margin-left: 8rpx;
|
}
|
}
|
}
|
|
.box_list_item_right {
|
display: flex;
|
align-items: center;
|
.black {
|
color: black;
|
}
|
|
text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #999999;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
}
|
|
.box_list1 {
|
padding: 30rpx;
|
background: white;
|
margin-top: 20rpx;
|
|
.box_list1_item {
|
height: 98rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
|
&:last-child {
|
border: none;
|
}
|
|
.box_list1_item_left {
|
text {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
|
&:last-child {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #DE5243;
|
margin-left: 4rpx;
|
}
|
}
|
}
|
|
.box_list1_item_right {
|
display: flex;
|
align-items: center;
|
|
.active {
|
color: white !important;
|
background: $nav-color !important;
|
}
|
|
.box_list1_item_right_item {
|
padding: 18rpx 32rpx;
|
background: #F2F2F2;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-left: 20rpx;
|
border-radius: 8rpx;
|
}
|
}
|
}
|
|
.box_list1_club {
|
display: flex;
|
flex-direction: column;
|
margin-top: 36rpx;
|
|
.box_list1_club_label {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
margin-bottom: 32rpx;
|
|
text {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #DE5243;
|
margin-left: 4rpx;
|
}
|
}
|
|
.box_list1_club_list {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.box_list1_club_list_item1 {
|
width: 170rpx;
|
height: 0;
|
}
|
|
.box_list1_club_list_item {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 8rpx;
|
position: relative;
|
margin-right: 22rpx;
|
margin-bottom: 22rpx;
|
|
.type {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
position: absolute;
|
top: 0;
|
left: 0;
|
|
.type_img {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
|
.play {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 56rpx;
|
height: 56rpx;
|
z-index: 9;
|
transform: translate(-50%, -50%);
|
}
|
|
.close {
|
position: absolute;
|
right: -16rpx;
|
top: -16rpx;
|
width: 32rpx;
|
height: 32rpx;
|
z-index: 9;
|
}
|
}
|
}
|
}
|
}
|
|
.box_list2 {
|
padding: 30rpx;
|
background: white;
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: column;
|
|
.box_list2_label {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
margin-bottom: 32rpx;
|
}
|
|
textarea {
|
border: none;
|
font-size: 28rpx;
|
}
|
|
textarea::-webkit-input-placeholder {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
}
|
|
.box_footer {
|
width: 100%;
|
padding: 0 30rpx 68rpx 30rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
background: #F7F7F7;
|
|
.box_footer_submit {
|
width: 100%;
|
height: 88rpx;
|
background: #4275FC;
|
box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.0800);
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
border: none;
|
}
|
}
|
}
|
</style>
|
