productDev/funingyunwei.git

			@@ -5,226 +5,281 @@
			<view class="la"><text class="red">*</text>选择设备</view>
			<view class="line">
			<view class="sel_wrap" @click="showModal = true">
			<view class="left" :class="param.deviceName ? '' : 'placeholder9'">{{ param.deviceName ? param.deviceName : '请选择设备' }}</view>
			<view class="left" :class="param.deviceName ? '' : 'placeholder9'">
			{{ param.deviceName ? param.deviceName : '请选择设备' }}
			</view>
			<u-icon name="arrow-right" color="#999999" size="17"></u-icon>
			</view>
			<image class="icon" src="@/static/side/scan.png" mode=""></image>
			<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 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>
			<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
			} from '@/api'
			<script>
			import {
			uploadUrl,
			ywDevicePost,
			ywDeviceCreate
			} 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: {}
			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('请先选择要维护的设备')
			ywDeviceCreate({
			...param,
			userId: uni.getStorageSync('userInfo').id,
			dealDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
			multifileList: fileList
			}).then(res => {
			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, '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();
			}
			});
			}
			});
			}
			},
			onLoad() {
			this.getDevice()
			},
			methods: {
			onSubmit() {
			const {
			param,
			fileList
			} = this

			if (!param.deviceId) return this.showToast('请先选择要维护的设备')
			ywDeviceCreate({
			...param,
			userId: uni.getStorageSync('userInfo').id,
			dealDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
			multifileList: fileList
			}).then(res => {
			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, '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.action(decodeText) //对二维码逻辑处理
			this.stopScan(); //关闭扫码功能
			}
			},
			(err) => {
			// console.log(err); //错误信息
			}
			);
			}
			});
			},

			stopScan() {
			console.log('停止扫码')
			this.isScaning = false;
			if (this.html5Qrcode) {
			this.html5Qrcode.stop();
			}
			}
			}
			}
			</script>
			@@ -238,13 +293,15 @@
			}

			.line {
			display: flex;
			align-items: center;
			.icon{
			width: 52rpx;
			height: 52rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.icon {
			width: 52rpx;
			height: 52rpx;
			margin-left: 40rpx;
			}

			textarea {
			box-sizing: border-box;
			width: 690rpx;
			@@ -259,7 +316,7 @@
			}
			}

			.sel_wrap {
			.sel_wrap {
			flex: 1;
			height: 90rpx;
			display: flex;
			@@ -267,27 +324,31 @@
			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);
			}

			.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;
			@@ -333,6 +394,7 @@

			}
			}

			.sel_upload_wrap {
			width: 100%;
			border-top: 1px solid #333333;
			@@ -344,6 +406,7 @@
			text-align: center;
			}
			}

			.sub_btn {
			position: fixed;
			bottom: 68rpx;
			@@ -360,51 +423,78 @@
			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 );
			.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;
			}
			}

			}

			.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);

			.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>