bigDataApp/pages/cb/equip-detail/equip-detail.vue

<template>
	<view>
		<view :class="['info',equipInfo.is_online==1?'on':'off']">
			<view class="" @click="copy(equipInfo)">
				设备ID：{{equipInfo.imei||equipInfo.device_id}}
				<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi">
				</image>
			</view>
			<view class="">
				设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}
			</view>
			<view class="">
				设备类型：<span v-if="equipInfo.type">{{equipInfo.type|equipType}}</span><span
					v-else>{{equipInfo.type_name}}</span>
			</view>
			<view class="">
				最新上报时间：{{equipInfo.addtime||equipInfo.uptime | timeFormat}}
			</view>
			<view class="">
				设备地址：{{equipInfo.address||city}}
			</view>
			<view v-if="type==7" @click="setTime(equipInfo.d_id)">
				<text space="emsp">载玻片、培养液更换时间</text>
				<u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
			<view v-if="type==7">
				<text space="emsp">
					<span :class="{'red': equipInfo.status_glass == 2 || equipInfo.status_glass == 1 }">
						{{ glass_slide_timeTime(equipInfo.status_glass)}} </span>
					<span style="margin: 0 10px;">|</span>
					<span :class="{'red': equipInfo.status_cul == 2 || equipInfo.status_cul == 1 }">
						{{ cultivateTime(equipInfo.status_cul) }} </span>
				</text>
			</view>
			<view v-if="type==4" @click="addYx(equipInfo.d_id)">
				<text space="emsp">添加诱芯</text>
				<text style="margin: 0 10px;">{{equipInfo.decoy||"暂无"}}</text>
				<u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon>
			</view>
			<view v-if="type==4">
				<text space="emsp">诱芯更新时间</text>
				<text style="margin: 0 10px;">{{equipInfo.xy_uptime}}</text>
			</view>
			<view v-if="type==4">
				<text space="emsp">诱芯到期时间</text>
				<text style="margin: 0 10px;">{{equipInfo.xy_expire}}</text>
			</view>
			<u-popup v-model="setTimeShow" mode="center" width="600rpx">
				<u-field label="载玻片更换时间" placeholder="选择日期" label-width='240' required :error-message="glassErr"
					v-model="glass_slide_time" @click="glass_show=true" :field-style="fieldstyle" disabled>
				</u-field>
				<u-field label="培养液更换时间" placeholder="选择日期" label-width='240' required :error-message="culErr"
					v-model="cultivate_time" @click="cultivate_show=true" :field-style="fieldstyle" disabled>
				</u-field>
				<view class="btn-box">
					<u-button @click="setTimeSubmit" size="mini" type="success">确定</u-button>
				</view>
				<u-calendar v-model="glass_show" mode="date" :max-date="date" @change="timeChange($event,'glass')">
				</u-calendar>
				<u-calendar v-model="cultivate_show" mode="date" :max-date="date"
					@change="timeChange($event,'cultivate')"></u-calendar>
			</u-popup>
			<u-popup v-model="yxShow" mode="center" width="600rpx">
				<u-field label="监测害虫名称" label-width='240' required :error-message="xyErr" v-model="decoy"
					:field-style="fieldstyle">
				</u-field>
				<view class="btn-box">
					<u-button @click="yxSubmit" size="mini" type="success">确定</u-button>
				</view>
			</u-popup>
			<u-toast ref="toast" />
		</view>
		<view class="equip_part">
			<template v-if="equipInfo.type==7">
				<view class="item1" v-for="item in bzy" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
			<template v-else-if="equipInfo.type==3">
				<view class="item2" v-for="item in curEquip" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="item3" v-for="item in curEquip" v-if="item.tf" @click="partClick(item.path)">
					<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
					<view class="">
						{{item.tex}}
					</view>
				</view>
			</template>
		</view>
		<view class="tit">
			<p>实时数据</p>
			<p class="span" @click="partClicks" v-if="equipInfo.type!=4 && $QueryPermission(60) && equipInfo.type==3">
				历史数据>>></p>
			<p class="span" @click="partClicks" v-if="equipInfo.type!=4 && $QueryPermission(71) && equipInfo.type==7">
				历史数据>>></p>
		</view>
		<view class="newtishi" v-if="dataloadingtf">
			<p class="dataloading">加载中</p>
		</view>
		<view class="newtishi" v-else-if="newtishitf">
			暂无数据
		</view>
		<view class="newState" v-else>
			<view class="item" v-for="item in curState">
				<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
				<view class="info-con">
					<view class="active">
						{{item.txt}}
					</view>
					<view class="val">
						{{item.value | formatValue(item.txt,type)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import equipState from "../../../static/js/equipState_dict.json"
	import {QueryPermission} from "../../../util/QueryPermission.js"
	export default {
		data() {
			return {
				fieldstyle: {
					border: "2rpx solid #f6f6f6",
					"border-radius": "24px",
					"padding-left": "20rpx",
					"background-color": "#f6f6f6"
				},
				city: "",
				type: null, //设备类型
				device_status: null,
				equipInfo: {},
				cbd: [{
						icon: '/image/cb/1.png',
						tex: '查看图片',
						path: '/pages/cb/cbd/equip-set/imgpage',
						tf: QueryPermission(61)
					},
					{
						icon: '/image/cb/3.png',
						tex: '害虫分析',
						path: '/pages/cb/cbd/equip-set/analyse',
						tf: QueryPermission(163)
					}, {
						icon: '/image/cb/4.png',
						tex: '设备控制',
						path: '/pages/cb/cbd/equip-set/equip-set',
						tf: QueryPermission(62)
					}, {
						icon: '/image/cb/6.png',
						tex: 'sim卡详情',
						path: '/pages/cb/sim/sim',
						tf: QueryPermission(274)
					}, {
						icon: '/image/environment/7.png',
						tex: '一键报修',
						path: '/pages/afterSale/addafter',
						tf: true
					}
				],
				bzy: [{
						icon: '/image/cb/4.png',
						tex: '设备控制',
						path: '/pages/cb/bzy/equip-set/equip-set',
						tf: QueryPermission(69)
					}, {
						icon: '/image/cb/1.png',
						tex: '查看图片',
						path: '/pages/cb/cbd/equip-set/imgpage',
						tf: QueryPermission(68)
					},
					{
						icon: '/image/cb/6.png',
						tex: 'sim卡详情',
						path: '/pages/cb/sim/sim',
						tf: QueryPermission(70)
					}, {
						icon: '/image/environment/7.png',
						tex: '一键报修',
						path: '/pages/afterSale/addafter',
						tf: true
					}
				],
				xy: [{
					icon: '/image/cb/4.png',
					tex: '设备控制',
					path: '/pages/cb/xy/equip-set/equip-set',
					tf: QueryPermission(65),
				}, {
					icon: '/image/cb/6.png',
					tex: 'sim卡详情',
					path: '/pages/cb/sim/sim',
					tf: QueryPermission(66),
				}, {
					icon: '/image/cb/2.png',
					tex: '历史数据',
					path: '/pages/cb/xy/equip-set/xyhistoryile',
					tf: QueryPermission(67),
				}, {
					icon: '/image/environment/7.png',
					tex: '一键报修',
					path: '/pages/afterSale/addafter',
					tf: true
				}],
				newState: {}, //设备最新状态
				setTimeShow: false,
				glass_show: false,
				cultivate_show: false,
				cultivate_time: "",
				glass_slide_time: "",
				glassErr: '',
				culErr: '',
				yxShow: false, //诱芯弹框
				xyErr: '',
				decoy: '',
				newtishitf: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				date: "" //最大可选时间
			}
		},
		computed: {
			curEquip() {
				switch (this.type) {
					case 3:
						return this.cbd;
					case 7:
						return this.bzy;
					case 4:
						return this.xy
				}
			},
			curState() {
				switch (this.type) {
					case 3:
						let blbs = "" //灯管状态
						if (this.newState.lamp != undefined) {
							if (this.newState.ws == 1) {
								if (this.newState.lamp == 1) {
									blbs = "异常";
								} else if (equipState.lux == 0) {
									blbs = "N/A（未检测到传感器）";
								} else if (this.newState.lamp == 0) {
									blbs = "工作";
								}
							} else {
								blbs = "待机";
							}
						} else {
							blbs = "--";
						}
						console.log(this.newState)
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '开关状态',
								value: Number(this.newState.ds) == 1 ? '开机' : '关机'
							},
							{
								icon: '/image/cb/icon13.png',
								txt: '通道状态',
								value: Number(this.newState.upds) == 1 ? '落虫' : '排水'
							},
							{
								icon: '/image/cb/icon10.png',
								txt: '加热状态',
								value: Number(this.newState.hs) == 1 ? '加热' : '正常'
							}, {
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at == "2.5" || this.newState.at == "25.0" || this.newState.at ==
									"" || this.newState.at == "25" ? this.newState.new_tem : this.newState.at
							}, {
								icon: '/image/cb/icon07.png',
								txt: '环境湿度(%)',
								value: this.newState.ah == "30.0" || this.newState.ah == "30.0" || this.newState.ah ==
									"" || this.newState.ah == "30" ? this.newState.new_hum : this.newState.ah
							}, {
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							}, {
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							},
							{
								icon: '/image/cb/icon17.png',
								txt: '雨控状态',
								value: Number(this.newState.rps) == 1 ? "雨控" : '正常'
							}, {
								icon: '/image/cb/icon14.png',
								txt: '温控状态',
								value: Number(this.newState.tps) == 1 ? "温控" : '正常'
							}, {
								icon: '/image/cb/icon06.png',
								txt: '光控状态',
								value: Number(this.newState.lps) == 1 ? "光控" : '正常'
							}, {
								icon: '/image/cb/icon01.png',
								txt: '灯管状态',
								value: blbs
							}, {
								icon: '/image/cb/icon11.png',
								txt: '上仓门',
								value: Number(this.newState.upds) == 1 ? "打开" : '关闭'
							}, {
								icon: '/image/cb/icon15.png',
								txt: '下仓门',
								value: Number(this.newState.dnds) == 1 ? "打开" : '关闭'
							}
						]
					case 7:
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '设备开关',
								value: Number(this.newState.ds) == 1 ? '开启' : '关闭'
							},
							{
								icon: '/image/cb/bzy/3.png',
								txt: '摄像头状态',
								value: this.newState.usb_sta == 1 ? '异常' : '正常'
							},
							{
								icon: '/image/prevention/44.png',
								txt: '当前电压',
								value: this.newState.v_bat
							}, {
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at == "2.5" || this.newState.at == "25" || this.newState.at ==
									"" || this.newState.at == "25.0" ? this.newState.new_tem : this.newState.at
							}, {
								icon: '/image/prevention/66.png',
								txt: '环境湿度(%)',
								value: this.newState.ah == "30" || this.newState.ah == "3.0" || this.newState.ah ==
									"" || this.newState.ah == "30.0" ? this.newState.new_hum : this.newState.ah
							}, {
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							}, {
								icon: '/image/cb/bzy/8.png',
								txt: '已培养时间',
								value: this.newState.staytime
							}, {
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							}, {
								icon: '/image/cb/icon09.png',
								txt: '保温仓当前温度',
								value: this.newState.pre_temp
							}, {
								icon: '/image/cb/icon08.png',
								txt: '保温仓设定温度',
								value: this.newState.set_temp
							}
						];
					case 4:
						return [{
								icon: '/image/cb/icon02.png',
								txt: '在线状态',
								value: Number(this.device_status) == 1 ? '在线' : '离线',
							},
							{
								icon: '/image/cb/icon05.png',
								txt: '设备开关',
								value: this.newState.ds == 1 ? '开启' : '关闭'
							},
							{
								icon: '/image/cb/icon02.png',
								txt: '工作状态',
								value: this.newState.ws == 1 ? '工作' : ' 待机'
							},
							{
								icon: '/image/cb/icon12.png',
								txt: '设备版本',
								value: this.newState.dver
							},
							{
								icon: '/image/cb/icon08.png',
								txt: '环境温度(℃)',
								value: this.newState.at == "2.5" || this.newState.at == "25" || this.newState.at ==
									"" || this.newState.at == "25.0" ? this.newState.new_tem : this.newState.at
							},
							{
								icon: '/image/cb/icon07.png',
								txt: '环境湿度(%)',
								value: this.newState.ah == "30" || this.newState.ah == "3.0" || this.newState.ah ==
									"" || this.newState.ah == "30.0" ? this.newState.new_hum : this.newState.ah
							},
							{
								icon: '/image/prevention/105.png',
								txt: '充电电压',
								value: this.newState.cv
							},
							{
								icon: '/image/prevention/106.png',
								txt: '电池电压',
								value: this.newState.bv
							},
							{
								icon: '/image/cb/icon16.png',
								txt: '信号强度',
								value: this.newState.csq
							},
							{
								icon: '/image/cb/xy/9.png',
								txt: '充电状态',
								value: Number(this.newState.cs) == 1 ? '充电' : '正常'
							},
							{
								icon: '/image/cb/xy/10.png',
								txt: '电池状态',
								value: this.newState.bs
							},
							{
								icon: '/image/cb/xy2.0/yujing.png',
								txt: '诱虫次数',
								value: this.newState.yc
							},
						]
				}
			}
		},
		filters: {
			equipType(type) {
				switch (type) {
					case 3:
						return "虫情测报灯";
					case 7:
						return "孢子仪";
					case 4:
						return "性诱测报"
				}
			},
			formatValue(val, a1, a2) {
				if (a2 == 4 && a1 == "电池状态") {
					switch (Number(val)) {
						case 0:
							return '正常';
							break;
						case 1:
							return '欠压';
							break;
						case 2:
							return '过压';
							break;
					}
				} else {

					return val ? val : '无'
				}
			}
		},
		onLoad(option) {
			this.equipInfo = JSON.parse(option.info)
			this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
				.device_type_id)
			this.equipInfo.type = this.type
			this.device_status = this.equipInfo.is_online
			this.getState()
			console.log(this.equipInfo)
			if (this.equipInfo.disable) {
				if (this.equipInfo.disable == 0) {
					this.cbd[3].tf = false
				} else {
					this.cbd[3].tf = true
				}
			}
			this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
			var times = new Date()
			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
		},
		methods: {
			async getState() {
				this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.device_history_data',
					data: {
						device_type_id: this.equipInfo.type || this.equipInfo.equip_type || this.equipInfo
							.device_type_id,
						device_id: this.equipInfo.imei || this.equipInfo.device_id,
						page: 1,
						page_size: 1,
						start_time: Math.floor((+new Date() - 24 * 60 * 60 * 1000) / 1000),
						end_time: Math.floor((+new Date()) / 1000)
					}
				})
				if (res.counts != 0) {
					this.newState = res.data[0].d_h_t
					this.newtishitf = false
				} else {
					this.newtishitf = true
				}
				this.getxyyc()
			},
			async getxyyc() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart',
					data: {
						device_type_id: this.equipInfo.type || this.equipInfo.equip_type || this.equipInfo
							.device_type_id,
						d_id: this.equipInfo.d_id,
						page: 1,
						page_size: 1,
						start_time: Math.floor((+new Date() - 30 * 24 * 60 * 60 * 1000) / 1000),
						end_time: Math.floor((+new Date()) / 1000)
					}
				})
				this.newState.yc = res.total_num
				this.dataloadingtf = false
			},
			partClick(path) {
				console.log(path)
				var device_id = this.equipInfo.device_id || this.equipInfo.imei
				uni.navigateTo({
					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + device_id + "&device_type=" + this
						.type + "&disable=" + this.equipInfo.disable
				});
			},
			partClicks() {
				var path = ""
				var device_id = this.equipInfo.device_id || this.equipInfo.imei
				if (this.type == 3) {
					path = "/pages/cb/cbd/equip-set/historyfile"
				} else if (this.type == 7) {
					path = "/pages/cb/bzy/equip-set/bzyhistoryile"
				}
				uni.navigateTo({
					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + device_id + "&device_type=" + this
						.type
				});
			},
			async setTime(d_id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.get_spore_time',
					data: {
						device_type_id: this.type,
						d_id
					}
				})
				this.glass_slide_time = res.glass_slide_time ? this.formatTime(res.glass_slide_time * 1000,
					'yyyy-MM-dd') : ''
				this.cultivate_time = res.cultivate_time ? this.formatTime(res.cultivate_time * 1000, 'yyyy-MM-dd') :
					''
				this.setTimeShow = true
			},
			timeChange(e, a) {
				if (a == 'glass') {
					this.glass_slide_time = e.result
					this.glassErr = ''
				} else {
					this.cultivate_time = e.result
					this.culErr = ''
				}
			},
			async setTimeSubmit() {
				if (!this.glass_slide_time) {
					this.glassErr = "请填写载玻片更换时间"
				}
				if (!this.cultivate_time) {
					this.culErr = "请填写培养液更换时间"
					return
				}
				let glass = parseInt(
					new Date(this.glass_slide_time).getTime() / 1000
				);
				let cultivate = parseInt(
					new Date(this.cultivate_time).getTime() / 1000
				);
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.updata_spore_time',
					data: {
						device_type_id: this.type,
						d_id: this.equipInfo.d_id,
						glass_slide_time: glass,
						cultivate_time: cultivate
					}
				})
				if (res) {
					this.$refs.toast.show({
						title: '修改成功!',
						type: 'success',
					})
				}
				this.setTimeShow = false
			},
			async addYx(d_id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.get_spore_time',
					data: {
						device_type_id: this.type,
						d_id
					}
				})
				this.decoy = res.decoy;
				this.yxShow = true
			},
			async cbnote(d_id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.get_spore_time',
					data: {
						device_type_id: this.type,
						d_id
					}
				})
				this.decoy = res.decoy;
				this.yxShow = true
			},
			async yxSubmit() {
				if (!this.decoy) {
					this.xyErr = "请填写监测害虫名称";
					return false
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_manage.updata_spore_time',
					data: {
						device_type_id: this.type,
						d_id: this.equipInfo.d_id,
						decoy: this.decoy
					}
				})
				if (res) {
					this.xyErr = ""
					this.yxShow = false
				}
			},
			selectaddress(lat, lng) { //获取分布位置
				uni.request({
					type: "GET",
					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
					dataType: "json",
					complete: ress => {
						console.log(ress)
						// this.city = ress.data.regeocode.formatted_address
						if (ress.data.regeocode.formatted_address.length == 0) {
							this.city = "--"
						} else {
							this.city = ress.data.regeocode.formatted_address
						}
					}
				});
			},
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item.imei || item.device_id,
					success: function() {
						console.log('success');
					}
				});
			},
			glass_slide_timeTime(date) {
				if (date === 0) {
					return "载玻片未到期";
				} else if (date == 1) {
					return "载玻片已到期";
				} else if (date == 2) {
					return "载玻片即将到期";
				} else if (date === "") {
					return "请设置培养液时间";
				}
			},
			cultivateTime(date) {
				console.log(date);
				if (date === 0) {
					return "培养液未到期";
				} else if (date == 1) {
					return "培养液已到期";
				} else if (date == 2) {
					return "培养液即将到期";
				} else if (date === "") {
					return "请设置培养液时间";
				}
			}
		},
	}
</script>

<style lang='scss'>
	page {
		padding: 20rpx;
		box-sizing: border-box;

		.info {
			padding: 20rpx 40rpx;
			color: #fff;
			line-height: 50rpx;
			font-size: 26rpx;
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-color: #0DC6B6;
			background-position: top left;
			box-sizing: border-box;
			width: 100%;

			.tishi {
				width: 28rpx;
				height: 28rpx;
				margin: 0rpx 0 0 20rpx;
			}
		}

		.on {
			background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png')
		}

		.off {
			background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/offBg.png')
		}

		.equip_part {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			line-height: 50rpx;

			image {
				width: 52rpx;
			}

			.item1 {
				padding: 20rpx 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}

			.item2 {
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				flex-basis: 33%;
				/* flex-grow: 1; */
			}

			.item3 {
				padding: 20rpx 0;
				box-sizing: border-box;
				flex-basis: 25%;
			}
		}

		.tit {
			font-weight: 800;
			height: 50rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.span {
				color: #6e6c76;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				/* margin-top: 12rpx; */
			}
		}

		.newtishi {
			width: 90%;
			margin: 0 auto;
			text-align: center;
			padding-top: 40rpx;
			font-size: 32rpx;

			.dataloading:after {
				overflow: hidden;
				display: inline-block;
				vertical-align: bottom;
				animation: ellipsis 2s infinite;
				content: "\2026";
			}

			@keyframes ellipsis {
				from {
					width: 2px;
				}

				to {
					width: 15px;
				}
			}
		}

		.newState {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			margin: 0 -10rpx;

			.item {
				display: flex;
				flex-wrap: nowrap;
				margin: 10rpx;
				width: 345rpx;
				justify-content: flex-start;
				padding: 20rpx 20rpx 20rpx 30rpx;
				box-sizing: border-box;
				border-radius: 4px;
				box-shadow: 0px 0px 5px 3px rgba(136, 136, 136, .1);
				font-size: 24rpx;

				.info-con {
					padding-left: 30rpx;
					text-align: left;
					line-height: 40rpx;
				}

				image {
					width: 70rpx;
					height: 72rpx;
				}
			}
		}

		.btn-box {
			text-align: center;
			padding: 30rpx;
		}

		.field {
			/deep/.uni-input-input {
				border: 2rpx solid #FF0000;
				border-radius: 24rpx;
				width: 140px;
				padding-left: 10rpx;
				box-sizing: border-box;
			}
		}
	}

	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;

		.u-calendar__action__text {
			line-height: 25px;
		}
	}

	.red {
		color: rgb(235, 103, 101);
	}
</style>