<template>
|
<view class="main_app">
|
<view class="list">
|
<view class="item">
|
<view class="la"><text class="red">*</text>选择设备</view>
|
<view class="line">
|
<view class="sel_wrap" @click="showModal = true">
|
<view class="left" :class="(param.deviceName || param.deviceCode) ? '' : 'placeholder9'">
|
{{ (param.deviceName || param.deviceCode) ? param.deviceName ? `[${param.deviceCode}] ` + param.deviceName : `[${param.deviceCode}]` : '请选择设备' }}
|
</view>
|
<u-icon name="arrow-right" color="#999999" size="17"></u-icon>
|
</view>
|
<image @click="openQrcode" class="icon" src="@/static/side/scan.png" mode=""></image>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la">设备状态</view>
|
<view class="line">
|
<view class="radio_wrap">
|
<view class="ite" :class="{active: param.status == 0}" @click="statusChange(0)">正常</view>
|
<view class="ite" :class="{active: param.status == 1}" @click="statusChange(1)">损坏</view>
|
<view class="ite" :class="{active: param.status == 2}" @click="statusChange(2)">报废</view>
|
</view>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la">上传视频/图片</view>
|
<view class="upload_wrap">
|
<view class="upload_file" @click="showUpload = true">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
<view class="mt6">图片/视频</view>
|
</view>
|
<view class="upload_file" v-for="(item, i) in fileList" :key="i">
|
<u-icon class="close" size="20" name="close-circle-fill" color="red"
|
@click="fileDel('fileList', i)"></u-icon>
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
<video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
</view>
|
<view class="item">
|
<view class="la">运维备注</view>
|
<view class="line">
|
<textarea v-model="param.content" placeholder="请输入" placeholder-class="placeholder9" />
|
</view>
|
</view>
|
</view>
|
<view class="sub_btn" @click="onSubmit">提交</view>
|
<!-- -->
|
<u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
|
<view class="sel_upload_wrap">
|
<view class="btn" @click="uploadImage">选择图片</view>
|
<view class="btn" @click="uploadVideo">选择视频</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<u-popup :show="showModal" @close="showModal = false" :safeAreaInsetBottom="true" :round="10" closeable
|
closeOnClickOverlay>
|
<view class="appr_modal">
|
<view class="title">请选择设备</view>
|
<view class="search_wrap">
|
<image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>
|
<input v-model="searchValue" @confirm="getDevice()" type="text" placeholder="搜索设备名称/编号"
|
placeholder-class="placeholder9" />
|
</view>
|
<view class="modal_list">
|
<view class="item" v-for="item,i in deviceList" @click="deviceClick(item)">
|
<view class="name">[{{item.code}}] {{ item.name }}</view>
|
<image v-if="activeDevice.id == item.id" src="@/static/radioed.png" mode=""></image>
|
</view>
|
</view>
|
<view class="sub_btn" @click="handleDevice">确定选择</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<view class="reader-box" @click="stopScan" v-if="isScaning">
|
<view class="reader" id="reader"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
uploadUrl,
|
ywDevicePost,
|
ywDeviceCreate,
|
getFindByCode
|
} from '@/api'
|
import dayjs from 'dayjs';
|
import {
|
Html5Qrcode
|
} from 'html5-qrcode';
|
export default {
|
data() {
|
return {
|
param: {
|
status: 0
|
},
|
showUpload: false,
|
showModal: false,
|
fileList: [],
|
|
searchValue: '',
|
deviceList: [],
|
activeDevice: {},
|
|
html5Qrcode: null,
|
isScaning: false,
|
};
|
},
|
onLoad() {
|
this.getDevice()
|
},
|
methods: {
|
onSubmit() {
|
const {
|
param,
|
fileList
|
} = this
|
|
if (!param.deviceId) return this.showToast('请先选择要维护的设备')
|
this.handleP()
|
},
|
handleP() {
|
const {
|
param,
|
fileList
|
} = this
|
ywDeviceCreate({
|
...param,
|
userId: uni.getStorageSync('userInfo').id,
|
dealDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
multifileList: fileList
|
}).then(res => {
|
if (param.status != 0) {
|
uni.showModal({
|
title: '温馨提示',
|
content: '设备运维结果异常，是否前往提交工单?',
|
success: function(res) {
|
if (res.confirm) {
|
uni.redirectTo({
|
url: '/pages/workOrder/edit'
|
})
|
} else if (res.cancel) {
|
uni.navigateBack()
|
}
|
}
|
});
|
}else{
|
this.showToast('提交成功')
|
uni.navigateBack()
|
}
|
})
|
},
|
getDevice() {
|
ywDevicePost({
|
capacity: 9999,
|
page: 1,
|
model: {
|
name: this.searchValue
|
}
|
}).then(res => {
|
this.deviceList = res.data.records || []
|
})
|
},
|
handleDevice() {
|
const {
|
activeDevice
|
} = this
|
if (!activeDevice.id) return this.showToast('请先选择设备')
|
this.$set(this.param, 'deviceId', activeDevice.id)
|
this.$set(this.param, 'deviceCode', activeDevice.code)
|
this.$set(this.param, 'deviceName', activeDevice.name)
|
this.showModal = false
|
},
|
deviceClick(item) {
|
this.activeDevice = item
|
this.$forceUpdate()
|
},
|
statusChange(val) {
|
this.param.status = val
|
},
|
fileDel(str, i) {
|
this[str].splice(i, 1);
|
},
|
uploadImage() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseImage({
|
count: 4,
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
};
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'YW_DEVICE'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 0;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
fail(err) {
|
console.log('err', err);
|
},
|
complete() {
|
uni.hideLoading();
|
// if (i === chooseImageRes.tempFilePaths.length - 1) {
|
// uni.hideLoading()
|
// }
|
}
|
});
|
}
|
});
|
},
|
uploadVideo() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseVideo({
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
filePath: chooseImageRes.tempFilePath,
|
header: {
|
Dm_user_token: token
|
},
|
name: 'file',
|
formData: {
|
folder: 'YW_DEVICE'
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 1;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.fileList.push(i);
|
});
|
}
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}
|
});
|
},
|
|
openQrcode() {
|
this.isScaning = true;
|
Html5Qrcode.getCameras().then((devices) => {
|
if (devices && devices.length) {
|
this.html5Qrcode = new Html5Qrcode('reader');
|
this.html5Qrcode.start({
|
facingMode: 'environment'
|
}, {
|
focusMode: 'continuous', //设置连续聚焦模式
|
fps: 5, //设置扫码识别速度
|
qrbox: 280 //设置二维码扫描框大小
|
},
|
(decodeText, decodeResult) => {
|
if (decodeText) { //这里decodeText就是通过扫描二维码得到的内容
|
this.stopScan(); //关闭扫码功能
|
getFindByCode(decodeText).then(ress => {
|
if (ress.data) {
|
console.log('ress', ress.data);
|
this.$set(this.param, 'deviceCode', ress.data.code)
|
this.$set(this.param, 'deviceId', ress.data.id)
|
this.$set(this.param, 'deviceName', ress.data.name)
|
} else {
|
this.showToast('未匹配到巡检点,请重新扫描')
|
}
|
})
|
|
}
|
},
|
(err) => {
|
// console.log(err); //错误信息
|
}
|
);
|
}
|
});
|
},
|
|
stopScan() {
|
console.log('停止扫码')
|
this.isScaning = false;
|
if (this.html5Qrcode) {
|
this.html5Qrcode.stop();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.list {
|
|
.item {
|
.la {
|
margin-top: 30rpx;
|
}
|
|
.line {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 52rpx;
|
height: 52rpx;
|
margin-left: 40rpx;
|
}
|
|
textarea {
|
box-sizing: border-box;
|
width: 690rpx;
|
min-height: 160rpx;
|
background-color: #f7f7f7;
|
font-size: 28rpx;
|
color: #333333;
|
padding: 24rpx;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
margin-top: 20rpx;
|
}
|
}
|
|
.sel_wrap {
|
flex: 1;
|
height: 90rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
}
|
|
.radio_wrap {
|
margin-top: 20rpx;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
|
.ite {
|
width: 216rpx;
|
height: 68rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
font-size: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.active {
|
color: $primaryColor;
|
border-color: $primaryColor;
|
background: rgba(0, 104, 255, 0.1);
|
}
|
}
|
|
.upload_wrap {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 30rpx;
|
}
|
|
.upload_file {
|
margin-top: 24rpx;
|
width: 156rpx;
|
height: 156rpx;
|
margin-right: 20rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
&:nth-of-type(4n) {
|
margin-right: 0;
|
}
|
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
}
|
}
|
|
.sel_upload_wrap {
|
width: 100%;
|
border-top: 1px solid #333333;
|
box-shadow: 0 1 1 #333333;
|
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
|
.sub_btn {
|
// position: fixed;
|
// bottom: 68rpx;
|
// left: 40rpx;
|
width: 670rpx;
|
height: 88rpx;
|
margin-top: 80rpx;
|
background: $primaryColor;
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
|
border-radius: 44rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
|
.appr_modal {
|
padding: 36rpx 30rpx 0;
|
height: calc(100vh - 120rpx);
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
margin-bottom: 40rpx;
|
text-align: center;
|
}
|
|
.search_wrap {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 76rpx;
|
background: #f2f2f2;
|
border-radius: 38rpx;
|
padding-left: 30rpx;
|
|
input {
|
flex: 1;
|
}
|
|
.search {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
|
.modal_list {
|
height: calc(100% - 360rpx);
|
margin-bottom: -20rpx;
|
|
.item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 100rpx;
|
font-size: 30rpx;
|
border-bottom: 1px solid #E5E5E5;
|
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
|
.active {
|
color: $primaryColor;
|
}
|
}
|
|
}
|
|
.reader-box {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
|
.reader {
|
width: 100%;
|
// width: 540rpx;
|
// height: 540rpx;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
</style>
|
