HealthStudentWeb/src/views/myself/deviceSetting/sceneMode.vue

<template>
  <div class="location-monitor-container">
    <!-- nav -->
    <div class="nav-bar">
      <van-nav-bar title="场景模式" left-text="返回" @click-left="onNavBack" left-arrow>
        <template #right>
          <!-- <div class="setupClock_save" @click="onSubmit">保存</div> -->
          <van-button type="primary" @click="onSubmit" size="small">保存</van-button>
        </template>
      </van-nav-bar>
    </div>
    <!-- main -->
    <div class="main">
      <div class="list">
        <div class="item">
          <div class="top">
            <div class="left">
              <span class="title">省电模式</span>
            </div>
            <div class="right">
              <!-- <img :src="rightIcon" alt=""> -->
              <van-switch v-model="checked" :active-color="$green" />
            </div>
          </div>
          <div class="bottom">
            <p>开启后能延长设备的续航时间，但只能打电话</p>
          </div>
        </div>
        <div :class="['item']">
          <div class="top">
            <div class="left">
              <span class="title">常规模式</span>
            </div>
          </div>
          <div class="bottom radios">
            <div class="radio-group">
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1" :disabled="checked">标准</van-radio>
                <van-radio name="2" :disabled="true">个性</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ToastService from '@/services/toast-service';
import DialogService from '@/services/dialog-service';
import APIHealthy from '@/api/heathly';
export default {
  name: '',
  data() {
    return {
      rightIcon: require('../../../assets/img/health/right_more.png'),
      checked: false,
      selectConfirmActive: 0,
      radio: '1',
      modeId: null || 1,
      roleId: null
    };
  },
  watch: {
    checked: {
      handler(n) {
        if (n === true) {
          this.modeId = 2;
        } else {
          this.modeId = 1;
        }
      },
      deep: true
    },
    radio: {
      handler(n) {
        if (n === '1') {
          this.modeId = 1;
          this.checked = false;
        } else if (n === '3') {
          this.modeId = 3;
          this.checked = false;
        }
      },
      deep: true
    }
  },
  computed: {
    imei() {
      return this.$store.getters.serialNo;
    }
  },
  created() {
    this.getWatchConfig();
    //this.getLocationConfig();
  },
  methods: {
    //   返回
    onNavBack() {
      this.$router.push({
        name: 'watchSetting'
      });
    },
    // 保存
    onSubmit() {
      if (this.modeId == 3) {
        return DialogService.confirm({
          message: '请切换标准模式或者省电模式再保存'
        });
      }
      this.setWatchConfig();
    },
    // 设置设备数据上报周期
    setWatchConfig() {
      ToastService.loading({ message: '设置中' });
      let reqBody = {
        imei: this.imei,
        roleId: this.roleId,
        modeId: this.modeId
      };
      APIHealthy.setWatchConfig(reqBody)
        .then(res => {
          console.log('设置上报参数', res);
          const data = res.data;
          if (data.stateCode === 1) {
            ToastService.success({ message: '设置成功' });
            setTimeout(() => {
              this.$router.push({
                name: 'watchSetting'
              });
            }, 1500);
          } else {
            DialogService.confirm({
              title: '设置失败',
              message: `${res.data.message}`
            });
          }
        })
        .catch(error => {
          console.log('接口报错了', error);
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    // 获取设备场景模式参数
    getWatchConfig() {
      APIHealthy.getWatchConfig(this.imei).then(res => {
        let data = res.data.data;
        if (data) {
          console.log('场景模式', data);
          const modeId = data.modeId;
          const roleId = data.roleId;
          this.modeId = modeId;
          this.roleId = roleId;
          if (modeId === 1) {
            this.radio = '1';
          } else if (modeId === 2) {
            this.checked = true;
          } else if (modeId === 3) {
            this.radio = '2';
          }
        } else {
          this.modeId = 1;
          this.roleId = this.$store.getters.roleUser === '1' ? 1 : 2;
        }
      });
    }
  }
};
</script>

<style lang="scss"></style>
<style scoped lang="scss">
.location-monitor-container {
  height: 100vh;
  overflow: hidden;
  .nav-bar {
    height: 90px;
    padding: 0 20px;
  }
  .main {
    height: calc(100vh - 160px);
    background-color: $background;
    padding: 20px;
    .list {
      height: auto;
      border-radius: 8px;
      .item {
        padding: 20px 15px;
        margin: 20px 0;
        background-color: #fff;
        .top {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .bottom {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          margin: 10px 0;
          p {
            font-size: 32px;
            color: gray;
            /*  line-height: 60px; */
          }
          &.radios {
            margin: 20px 0;
            @include center();
            font-size: 32px;
          }
        }
      }
    }
  }
  .title {
    font-size: 32px;
  }
}
</style>