bigdata_WX/pages/equipList2/seabox/modification.vue

<template>
	<view class="modification">
		<view class="modification__header">
      <u-icon
        size="36"
        class="arrow-left"
        name="arrow-left"
        @click="handleBack"
      ></u-icon>
			信息修改
    </view>
		<view class="modification__content">
			<view class="modification__content__item">
				<view class="modification__content__item__title">
					设备名称
				</view>
				<view class="modification__content__item__input">
					<u-input v-model="moddata.device_name" placeholder="请输入设备名称" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
				</view>
			</view>
			<view class="modification__content__item">
				<view class="modification__content__item__title">
					设备ID
				</view>
				<view class="modification__content__item__input">
					<u-input disabled :value="moddata.imei || moddata.device_id || moddata.id" placeholder="请输入设备ID" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
				</view>
			</view>
			<view class="modification__content__item">
				<view class="modification__content__item__title">
					适配用户
				</view>
				<view class="modification__content__item__input">
					<u-input disabled :value="moddata.real_name || '无'" placeholder="请输入用户名" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
				</view>
			</view>
			<view class="modification__content__item">
				<view class="modification__content__item__title">
					设备位置
				</view>
				<view class="modification__content__item__input" @click.native="amendcity">
					<view class="location-city">{{ city }}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="modification__content__item">
				<view class="modification__content__item__title">
					设备添加时间
				</view>
				<view class="modification__content__item__input">
					<u-input disabled :value="moddata.addtime | timeFormat()" placeholder="请输入设备添加时间" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
				</view>
			</view>
		</view>
		<view class="sub" @click="btn">
			提 交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moddata: [],
				city: "",
				selectcityTF: false,
				locationCity: "",
				locationName: "",
				quanxian:{
					namealter:false,
					cityalter:false,
					infoalter:false
				}
			}
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			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 || this.moddata.device_id || this.moddata.id,
						lat: lat,
						lng: lng
					}
				})
				if (!res) {
					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: {
						device_id: this.moddata.imei || this.moddata.device_id || this.moddata.id,
						device_name: this.moddata.device_name,
						lat: lat,
						lng: lng,
					}
				})
				if (!res) {
					uni.showToast({
						title: '修改名称失败!',
						icon: "none"
					});
				}else{
					uni.showToast({
						title: '修改名称成功!',
						icon: "none"
					});
					uni.removeStorage({
						key: "location"
					})
					this.clickLeft()
				}
			},
			async eqlistuser(id, imei,device_model) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: id,
						device_id: imei,
						device_model: device_model,
					}
				})
				this.moddata = res.data[0]
				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,
					}
				})
				this.moddata = res.data[0]
				this.selectaddress(this.moddata.lng, this.moddata.lat)
			},
			btn() {
				this.eqlistname(this.moddata.lat, this.moddata.lng)
			},
			clickLeft() {
				uni.navigateBack({
					delta:1,
					success:()=>{
						uni.$emit('refreshData')
					}
				})
			},
			getCity({city}){
				if(city.city == undefined){
					var add = city
				}else if(city.city != undefined){
					var add = city.city
				}
				// chooseLocation 是微信原生页，不进入 uni-app 页面栈，选完会自动回到本页，直接赋值即可
				this.city = add
			},
			selectedCity(city){
				this.getCity && this.getCity({city});
			},
			location(){
				let That = this;
				uni.chooseLocation({
				  success(res){
						uni.setStorage({
							key:"location",
							data:[res.longitude,res.latitude]
						})
						That.city = res && res.address;
						That.locationName = res && res.name;
						That.selectedCity({city:That.city,name:That.locationName});
				  },
					fail(){
						That.locationCity = "定位失败，请点击重试";
						That.locationName = "";
					}
				});
			},
			amendcity() {
				this.location()
			},
			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 => {
						if (ress.data.regeocode.formatted_address.length == 0) {
							this.city = "--"
						} else {
							this.city = ress.data.regeocode.formatted_address
						}
					}
				});
			},
		},
		onLoad(option) {
			if(option.id == 10){
				const data = JSON.parse(option.data)
				this.xyeqlistuser(data.device_id || data.id)
			}else{
				const data = JSON.parse(option.data)
				this.eqlistuser(data.type_id, data.imei || data.device_id || data.id,data.device_model)
			}
			uni.getStorage({
				key:"jurisdiction",
				success:(res)=>{
					if(!res?.data){
						return;
					}
					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) => {
					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: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
	}
	.modification{
		display: flex;
		width: 100%;
		height: calc(100vh - 112rpx);
		padding-top: 112rpx;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;
		&__header{
			width: 100%;
			font-size: 28rpx;
			color: #042118;
			font-family: 'Source Han Sans CN VF';
			font-weight: 700;
			position: relative;
			text-align: center;
			.arrow-left {
				position: absolute;
				left: 32rpx;
				margin-right: 12rpx;
			}
		}
		&__content{
			width: calc(100% - 64rpx);
			margin-top: 32rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}
		&__content__item{
			display: flex;
			width: 100%;
			margin-bottom: 32rpx;
			justify-content: space-between;
			align-items: center;
		}
		&__content__item__title{
			width: 180rpx;
			font-size: 28rpx;
			color: #333333;
			font-family: 'Source Han Sans CN VF';
		}
		&__content__item__input{
			font-size: 26rpx;
			color: #042118;
			font-family: 'Source Han Sans CN VF';
			font-weight: 400;
			display:flex;
			align-items: center;
			.location-city{
				font-size: 28rpx;
				color:#333333;
			}
			.u-icon--right{
				color:#999999;
				margin-left: 12rpx;
			}
			.input{
				font-size: 26rpx;
				text-align: right;
				width: 100%;
				color: #333333;
			}
		}
	.sub {
		width: 90%;
		margin: 30rpx auto;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #57C77A;
		border-radius: 16rpx;
		color: #FFFFFF;
	}
	}
</style>