bigDataApp/pages/equipList/modification.vue

<template>
  <view>
    <view class="">
      <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" v-if="$QueryPermission(109)">
          <p>
            <span style="color: #ff0000" v-if="quanxian.cityalter">*</span
            >设备位置
          </p>
          <view style="display: flex">
            <input type="text" :value="city" disabled style="width: 400rpx" />
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="mod_time">
          <p>设备添加时间</p>
          <input
            type="text"
            :value="moddata.addtime | timeFormat()"
            disabled
            v-if="moddata.addtime"
          />
        </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_lnglat',
        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() {
      //修改设备名称
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
        data: {
          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);
      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();
    },
    clickLeft() {
      uni.navigateBack({
        delta: 1,
      });
    },
    amendcity() {
      //修改设备地址
      if (this.quanxian.cityalter) {
        this.selectcityTF = true;
        uni.navigateTo({
          url: '../fourBase/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=78ce288400f4fc6d9458989875c833c2&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) {
    if (option.id == 10) {
      this.xyeqlistuser(JSON.parse(option.data).device_id);
    } else if (option.id == 40) {
      this.eqlistuser(option.id, JSON.parse(option.data).devCode);
    } 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) => {
        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%;
  padding-top: 30rpx;
  .mod_name,
  .mod_id,
  .mod_user,
  .mod_time,
  .mod_city {
    width: 90%;
    margin: 0 auto 30rpx;
    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;
    }
  }
}

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