bigdata_WX/pages/equipList/seabox/modification.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="修改名称"></uni-nav-bar>
			</view>
			<view class="mod">
				<view class="mod_name">
					<p><span style="color: #ff0000;" v-if="quanxian.namealter">*</span>设备名称</p>
					<input type="text" v-model="moddata.device_name" :class="quanxian.namealter?'namebg':''" :disabled="!quanxian.namealter"/>
				</view>
				<view class="mod_id">
					<p>设备ID</p>
					<input type="text" :value="moddata.imei || moddata.device_id" disabled />
				</view>
				<view class="mod_user">
					<p>适配用户</p>
					<input type="text" :value="moddata.real_name==''?'无':moddata.real_name" disabled />
				</view>
				<view class="mod_city" @click="amendcity">
					<view style="width: 90%;">
						<p><span style="color: #ff0000;" v-if="quanxian.cityalter">*</span>设备位置</p>
						<input type="text" :value="city" disabled />
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="mod_time">
					<p>设备添加时间</p>
					<input type="text" :value="moddata.addtime|timeFormat()" disabled />
				</view>
				<p style="width: 90%;margin: 0 auto;text-align: right;color: #06B535;"><span style="color: #ff0000;">*</span>为可修改</p>
				<view class="sub" v-if="quanxian.infoalter" @click="btn">
					提 交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moddata: {},
				city: "",
				selectcityTF: false,
				quanxian:{
					namealter:false,
					cityalter:false,
					infoalter:false
				}
			}
		},
		methods: {
			async eqlistcity(lat, lng) { //修改设备定位
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
					data: {
						device_id: this.moddata.imei,
						lat: lat,
						lng: lng
					}
				})
				console.log(res)
				if (res==false) {
					uni.showToast({
						title: '修改地址失败!',
						icon: "none"
					});
				}else{
					uni.showToast({
						title: '修改地址成功!',
						icon: "none"
					});
				}
			},
			async eqlistname(lat, lng) { //修改设备名称
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
					data: {
						lat: lat,
						lng: lng,
						device_id: this.moddata.imei,
						device_name: this.moddata.device_name,
					}
				})
				console.log(res)
				if (res==false) {
					uni.showToast({
						title: '修改名称失败!',
						icon: "none"
					});
				}else{
					uni.showToast({
						title: '修改名称成功!',
						icon: "none"
					});
					uni.removeStorage({
						key: "location"
					})
					this.clickLeft()
				}
			},
			async eqlistuser(id, imei) { //获取设备信息
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: id,
						device_id: imei,
					}
				})
				this.moddata = res.data[0] || {};
				console.log(res,'moddatamoddata')
				this.selectaddress(this.moddata.lng, this.moddata.lat)
			},
			async xyeqlistuser(imei) { //获取设备信息
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
					data: {
						device_id: imei,
					}
				})
				console.log(res)
				this.moddata = res.data[0] || {};
				this.selectaddress(this.moddata.lng, this.moddata.lat)
			},
			btn() {
				// this.eqlistcity(this.moddata.lat, this.moddata.lng)
				this.eqlistname(this.moddata.lat, this.moddata.lng)
			},
			clickLeft() {
				uni.navigateBack({
					delta:1
				})
			},
			amendcity() { //修改设备地址
				if(this.quanxian.cityalter){
					this.selectcityTF = true
					uni.navigateTo({
						url: "../../fourBase/city?lat=" + this.moddata.lat + "&lng=" + this.moddata.lng + "&city=" + this.moddata.city
					})
				}else{
					uni.showToast({
						title: "您暂无权限进行此操作，如有需要，请联系管理员",
						icon: "none"
					})
				}
			},
			selectaddress(lng, lat) { //获取分布位置
				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)
						if (ress.data.regeocode.formatted_address.length == 0) {
							this.city = "--"
						} else {
							this.city = ress.data.regeocode.formatted_address
						}
					}
				});
			},
		},
		onLoad(option) {
			console.log(option)
			if(option.id==10){
				this.xyeqlistuser(JSON.parse(option.data).device_id)
			}else{
				this.eqlistuser(option.id, JSON.parse(option.data).imei)
			}
			uni.getStorage({
				key:"jurisdiction",
				success:(res)=>{
					console.log(JSON.parse(res.data))
					let items = JSON.parse(res.data).filter((item)=>{
						return item.purview_name == "设备管理"
					})
					let items2 = items[0].children.filter((item)=>{
						return item.purview_name == "设备列表"
					})
					this.quanxian.namealter = items2[0].children.some((item)=>{
						return item.purview_name == "修改名称"
					})
					this.quanxian.cityalter = items2[0].children.some((item)=>{
						return item.purview_name == "添加位置"
					})
					this.quanxian.infoalter = items2[0].children.some((item)=>{
						return item.purview_name == "修改名称" || item.purview_name == "添加位置"
					})
				},
			})
		},
		onShow(){
			uni.getStorage({
				key: "location",
				success: (res) => {
					// console.log(res);
					this.moddata.lat = res.data[1]
					this.moddata.lng = res.data[0]
					this.selectaddress(this.moddata.lng, this.moddata.lat)
				}
			})
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}
	.mod {
		width: 100%;
		position: absolute;
		top: 44px;
		.mod_name,
		.mod_id,
		.mod_user,
		.mod_time {
			width: 90%;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 20rpx 10rpx;
			color: #57C77A;
			line-height: 50rpx;
			.namebg{
				background-color: #FAFAFA;
			}
			input {
				text-align: right;
				font-size: 28rpx;
				padding: 10rpx;
			}
		}
		.mod_city{
			width: 90%;
			margin: 30rpx auto;
			background-color: #FFFFFF;
			padding: 20rpx 10rpx;
			color: #57C77A;
			line-height: 50rpx;
			display: flex;
			justify-content: space-between;
			.namebg{
				background-color: #FAFAFA;
			}
			input {
				width: 90%;
				font-size: 28rpx;
				padding: 10rpx;
			}
		}
	}

	.sub {
		width: 90%;
		margin: 30rpx auto;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #57C77A;
		border-radius: 35rpx;
		color: #FFFFFF;
	}
</style>