HomeLease/page_user/luru/controlDevice.vue

<template>
  <view class="pages">
    <u-navbar
      :background="bgc"
      :border-bottom="false"
      :custom-back="backPage"
      height="50"
      title="设备控制"
      title-color="#262B37"
      title-size="38"
    ></u-navbar>
    <view class="title">
      <text>控制台</text>
    </view>
    <view class="iptbox">
      <view class="qrcode" @click="qrcode()">
        <image
          mode=""
          src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs"
        ></image>
      </view>
      <input
        v-model="sn"
        class="ips"
        placeholder="请扫描设备上的二维码"
        placeholder-class="my-placeholder"
        style="margin-left: 32rpx"
        type="text"
        @input="search()"
      />
    </view>
    <view class="txt"> MAC：{{ carInfo.mac == undefined ? '--' : carInfo.mac }} </view>
    <view class="txt">
      网络：
      <span v-if="carInfo.onlineStatus == 0">离线</span>
      <span v-if="carInfo.onlineStatus == 1" style="color: #8883f0">在线</span>
    </view>
    <view class="txt">
      信号：{{ carInfo.signalStrength == undefined ? '--' : carInfo.signalStrength }}
    </view>
    <view class="txt">
      卫星：{{ carInfo.satellites == undefined ? '--' : carInfo.satellites }}
    </view>
    <view class="txt">
      电压：{{ carInfo.voltage == undefined ? '--' : carInfo.voltage.toFixed(2) }}V
    </view>
    <view class="txt">
      锁状态：
      <span v-if="carInfo.lockStatus == 0">关</span>
      <span v-if="carInfo.lockStatus == 1" style="color: #8883f0">开</span>
    </view>
    <view class="txt">
      电门：
      <span v-if="carInfo.quality == 0">关</span>
      <span v-if="carInfo.quality == 1" style="color: #8883f0">开</span>
    </view>
    <view class="txt">
      硬件版本：{{ carInfo.hardwareVersion == undefined ? '--' : carInfo.hardwareVersion }}
    </view>
    <view class="txt" style="display: flex; justify-content: space-between; align-items: center">
      <view class="">
        软件版本：{{ carInfo.softwareVersion == undefined ? '--' : carInfo.softwareVersion }}
      </view>
      <view
        class=""
        style="
          font-size: 30rpx;
          background-color: #8883f0;
          color: #fff;
          padding: 6rpx 10rpx;
          border-radius: 10rpx;
        "
        @click="btnsj"
      >
        升级
      </view>
    </view>
    <view class="txt">
      声音：
      <span v-if="carInfo.music == 0">静音</span>
      <span v-if="carInfo.music == 1">语音</span>
      <span v-if="carInfo.music == 2">彩铃</span>
    </view>
    <view class="txt">
      最后定位时间：{{ carInfo.lastLocationTime == undefined ? '--' : carInfo.lastLocationTime }}
    </view>
    <view class="txt">
      最后在线时间：{{ carInfo.lastOnlineTime == undefined ? '--' : carInfo.lastOnlineTime }}
    </view>
    <view class="btnbox">
      <view class="btn_box" style="margin-bottom: 20rpx"> </view>
      <view class="btn_box">
        <view class="btn1" @click="btn(0)"> 开锁 </view>
        <view class="btn1" @click="btn(1)"> 关锁 </view>
        <view class="btn1" @click="btn(9)"> 坐垫锁 </view>
      </view>
      <view class="btn_box" style="margin-top: 20rpx">
        <view class="btn1" @click="btn(3)"> 响铃 </view>
        <view class="btn1" @click="btn(8)"> 重启 </view>
        <view class="btn1" @click="btn(4)"> 更新 </view>
      </view>
      <view class="btn2" style="margin-top: 20rpx" @click="back()"> 返回扫描 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleflag: false, //提示隐藏
      bgc: {
        backgroundColor: '#F7FAFE',
      },
      sn: '',
      carInfo: {},
    }
  },
  onLoad(e) {
    if (e.sn) {
      this.sn = e.sn
      this.deviceInfo()
    }
  },
  onShow() {},
  mounted() {
    // this.videoContext = uni.createVideoContext('myVideo', this)
  },
  methods: {
    // 点击升级
    btnsj() {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })
      this.$u.put(`/bst/device/iot/update?sn=${this.sn}`).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          uni.showToast({
            title: '操作成功',
            icon: 'success',
            duration: 3000,
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 3000,
          })
        }
      })
    },
    backPage() {
      uni.redirectTo({
        url: '/page_user/luru/index',
      })
    },
    back() {
      uni.reLaunch({
        url: '/page_user/luru/index',
      })
    },
    search() {
      if (this.sn && this.sn.length === 7 && /^\d+$/.test(this.sn)) {
        // 当 this.sn 满足条件时调用 deviceInfo
        this.deviceInfo()
      } else {
        console.log('SN 不是 7 位数字')
        // 你可以在这里处理不符合条件的情况，比如提示用户输入正确的 SN
      }
    },
    qrcode() {
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode'],
        success: res => {
          let sn = null
          let queryParams = res.result.split('?')[1]
          if (queryParams) {
            let params = queryParams.split('&')
            params.forEach(param => {
              let [key, value] = param.split('=')
              if (key === 's') {
                sn = value
              }
            })
          }
          this.sn = sn
          console.log(res.result)
          if (this.sn != '') {
            this.deviceInfo()
          }
        },
        fail: err => {
          console.error('扫描失败：', err)
          uni.showToast({
            title: '扫描失败',
            icon: 'none',
          })
        },
      })
    },
    deviceInfo() {
      this.$u
        .get('/bst/device?sn=' + this.sn)
        .then(res => {
          if (res.code === 200) {
            this.carInfo = res.data
          }
        })
        .catch(error => {
          console.error('Error fetching area data:', error)
        })
    },
    btn(num) {
      if (num == 0) {
        uni.showLoading({
          title: '加载中...',
        })
        console.log('点击了....1')
        this.$u
          .put('/bst/device/iot/unlock?sn=' + this.sn)
          .then(res => {
            if (res.code == 200) {
              // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
              this.deviceInfo()
              uni.showToast({
                title: '操作成功',
                icon: 'success',
                duration: 2000,
              })
            } else {
              uni.hideLoading()
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000,
              })
            }
          })
          .catch(error => {
            console.error('Error fetching area data:', error)
          })
      } else if (num == 1) {
        uni.showLoading({
          title: '加载中...',
        })
        console.log('点击了....2')
        this.$u
          .put('/bst/device/iot/lock?sn=' + this.sn)
          .then(res => {
            if (res.code == 200) {
              // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
              this.deviceInfo()
              uni.showToast({
                title: '操作成功',
                icon: 'success',
                duration: 2000,
              })
            } else {
              uni.hideLoading()
              uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000,
              })
            }
          })
          .catch(error => {
            console.error('Error fetching area data:', error)
          })
      } else if (num == 3) {
        uni.showLoading({
          title: '加载中...',
        })
        this.$u.put('/bst/device/iot/ring?sn=' + this.sn).then(res => {
          if (res.code == 200) {
            this.deviceInfo()
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000,
            })
          } else {
            uni.hideLoading()
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        })
      } else if (num == 4) {
        uni.showLoading({
          title: '加载中...',
        })
        this.$u.put('/bst/device/iot/refresh?sn=' + this.sn).then(res => {
          if (res.code == 200) {
            this.deviceInfo()
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        })
      } else if (num == 5) {
        uni.showLoading({
          title: '加载中...',
        })
        this.$u.put('/app/voltage/check?sn=' + this.sn).then(res => {
          if (res.code == 200) {
            this.deviceInfo()
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        })
      } else if (num == 8) {
        uni.showLoading({
          title: '加载中...',
        })
        this.$u.put('/bst/device/iot/reboot?sn=' + this.sn).then(res => {
          if (res.code == 200) {
            this.deviceInfo()
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        })
      } else if (num == 9) {
        uni.showLoading({
          title: '加载中...',
        })
        this.$u.put('/bst/device/iot/unlockSeat?sn=' + this.sn).then(res => {
          if (res.code == 200) {
            this.deviceInfo()
            uni.hideLoading()
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              duration: 2000,
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 2000,
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #f7faff !important;
}

.btnbox {
  margin-left: -66rpx;
  width: 750rpx;
  padding: 0 66rpx;
  position: fixed;
  bottom: 50rpx;
}

.txt {
  margin-top: 16rpx;
  font-size: 32rpx;
  color: #808080;
}

.btn_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180rpx;
    height: 100rpx;
    background: #8b83f0;
    font-size: 50rpx;
    color: #fff;
    border-radius: 30rpx;
  }
}

.btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  background: #8b83f0;
  font-size: 50rpx;
  color: #fff;
  border-radius: 30rpx;
}

.pages {
  padding: 0 66rpx;
  box-sizing: border-box;
}

.iptbox {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 22rpx;
  margin: 28rpx auto 0;
  width: 658rpx;
  height: 88rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .qrcode {
    padding-right: 20rpx;
    border-right: 2rpx solid #d8d8d8;

    image {
      width: 54rpx;
      height: 54rpx;
    }
  }

  .ips {
    width: 630rpx;
  }

  image {
    width: 18rpx;
    height: 32rpx;
  }

  .my-placeholder {
    font-weight: 400;
    font-size: 32rpx;
    color: #808080;
  }
}

.title {
  margin-bottom: 84rpx;

  image {
    display: inline-block;
    width: 48rpx;
    height: 48rpx;
    vertical-align: bottom;
    margin-right: 10rpx;
  }

  text:nth-child(1) {
    font-weight: 400;
    font-size: 96rpx;
    color: #262b37;
    line-height: 88rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: block;
    margin-bottom: 48rpx;
  }
}

.dblist {
  display: flex;
  width: 100%;
  margin-top: 34rpx;
  background: #ffffff;
  box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx 0 24rpx 18rpx;
  box-sizing: border-box;
  text-align: center;
  border-radius: 10rpx;

  .lt {
    padding-left: 10rpx;
    box-sizing: border-box;
    margin-right: 38rpx;

    image {
      width: 42rpx;
    }
  }

  .cen {
    width: 370rpx;
    padding-left: 10rpx;
    box-sizing: border-box;

    .name {
      white-space: nowrap;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 28rpx;
      color: #262b37;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 10rpx;
    }

    .mac {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 24rpx;
      color: #262b37;
      line-height: 32rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: 16rpx;
    }
  }

  .rt {
    margin-left: auto;
    margin-top: 22rpx;

    text {
      display: inline-block;
      width: 108rpx;
      height: 60rpx;
      background: rgba(255, 255, 255, 0);
      border: 2rpx solid #8883f0;
      filter: blur(0px);
      border-radius: 20rpx;
      text-align: center;
      line-height: 60rpx;
      color: #8883f0;
    }
  }
}
</style>