HealthStudentWeb/src/views/myself/sleep.vue

<template>
  <div class="sleep" :style="{ background: listData.length == 0 ? '#fff ' : '#f2f4f5' }">
    <van-nav-bar title="休眠设置" left-arrow :border="true" @click-left="onNavBack">
      <van-icon name="plus" slot="right" id="plus-icon" @click="onAddClick" />
    </van-nav-bar>
    <div class="sleep-list-container" v-show="isShowPage">
      <div class="con">
        <van-cell v-for="(item, index) in listData" :key="`prohibit_${index}`">
          <van-swipe-cell>
            <div class="area">
              <div :class="[{ active: item.Active }, 'left']" @click="onListClick(item.Id)">
                <div class="title">{{ item.StartTime }}-{{ item.EndTime }}</div>
              </div>
              <van-switch :value="item.Active == 1" @input="onInput($event, item.Id)" :active-color="$green" />
            </div>
            <template slot="right">
              <van-button square type="danger" text="删除" @click="onClose(item.Id)" />
            </template>
          </van-swipe-cell>
        </van-cell>
        <div class="watchTips" v-show="deviceType == '2'">
          <p>休眠时间段：期间会自动切断网络，但有呼入电话或者亮屏设备时自动结束休眠</p>
        </div>
      </div>

      <div class="noData_img" v-show="listData.length == 0">
        <div v-if="deviceType == '1'">您还没有给定位卡设置休眠时段，赶紧去添加吧~</div>
        <div v-else class="watchTips">
          <p>请点击右上角“+”号添加休眠时段。</p>
          <p>休眠时间段：期间会自动切断网络，但有呼入电话或者亮屏设备时自动结束休眠</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { DeviceCommandModel } from '../../config/models';
import DialogService from '@/services/dialog-service';
import ToastService from '@/services/toast-service';
import APICommand from '@/api/command';
export default {
  data() {
    return {
      switchShow: false,
      listData: [],
      serialNo: '',
      deviceType: this.$store.getters.deviceType,
      isShowPage: false
    };
  },
  methods: {
    //返回
    onNavBack() {
      this.$router.push({ name: 'Myself' });
    },
    onAddClick() {
      this.$router.push({
        name: 'setupSleepPeriod',
        query: { code: this.$route.query.code }
      });
    },
    switchClick() {
      this.switchShow = !this.switchShow;
    },
    onInput(checked, id) {
      /*  this.$dialog.confirm({
          title: "提醒",
          className: "device_confirm",
          message: "是否切换开关？"
        }) */

      this.listData.map(val => {
        if (val.Id == id) {
          val.Active = checked ? 1 : 0;
        }
        return val;
      });
      let cmdCode = DeviceCommandModel.sleep;
      let cmdValue = {
        Items: this.listData
      };
      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
    },
    onListClick(id) {
      this.$router.push({
        name: 'setupSleepPeriod',
        query: { code: this.$route.query.code, id }
      });
    },
    //滑动单元格
    onClose(id) {
      this.listData.some((val, i) => {
        if (val.Id == id) {
          this.listData.splice(i, 1);
          return true;
        }
      });
      let cmdCode = DeviceCommandModel.sleep;
      let cmdValue = {
        Items: this.listData
      };
      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
    },

    //获取信息
    getCommandList() {
      /* let url = `/api/Command/CommandList`;
        let jsonData = { deviceId: this.$store.getters.deviceId };
        ToastService.loading();
        this.$axios
          .post(url, jsonData) */
      APICommand.commandList({
        deviceId: this.$store.getters.deviceId
      })
        .then(res => {
          ToastService.clear();
          console.log(res.data);
          let item = res.data;
          let listData = [];
          let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.sleep);
          let parseValue = JSON.parse(cmdData[0].cmdValue);
          parseValue.Items.forEach(val => {
            listData.push(val);
          });
          this.listData = listData;
          this.isShowPage = true;
        })
        .catch(() => {
          this.isShowPage = true;
        });
    },
    //处理方面的
    formatWeekdays(str) {
      let arr = Array.from(str);
      let newArr = [];
      arr.forEach(val => {
        switch (Number(val)) {
          case 1:
            newArr.push('周一 ');
            break;
          case 2:
            newArr.push('周二 ');
            break;
          case 3:
            newArr.push('周三 ');
            break;
          case 4:
            newArr.push('周四 ');
            break;
          case 5:
            newArr.push('周五 ');
            break;
          case 6:
            newArr.push('周六 ');
            break;
          case 7:
            newArr.push('周日 ');
            break;
          default:
            newArr = [];
        }
      });
      return newArr;
    },
    //提交
    sendCommand(cmdCode, cmdValue) {
      ToastService.loading();
      /* let url = `/api/Command/SendCommand`;
        let jsonData = {
          deviceId: this.$store.getters.deviceId,
          userId: this.$store.getters.userId,
          serialNo: this.$store.getters.serialNo,
          cmdCode,
          cmdValue
        }; */
      ToastService.loading();
      /* this.$axios
          .post(url, jsonData) */
      APICommand.sendCommand({
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        serialNo: this.$store.getters.serialNo,
        cmdCode,
        cmdValue
      })
        .then(res => {
          console.log(res.data);
          ToastService.clear();
          let item = res.data;
          if (item.stateCode == 1) {
            ToastService.clear();
            ToastService.success({ message: '操作成功' });
          } else {
            DialogService.confirm({ title: '操作失败' });
          }
        })
        .catch(() => {});
    }
  },
  created() {
    this.getCommandList();
  }
};
</script>
<style lang="scss" scoped>
.sleep {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .sleep-list-container {
    position: relative;
    height: calc(100vh - 160px);
    overflow: scroll;
    .con {
      width: 100%;
      background: #fff;
      .area {
        padding: 0 30px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-size: 36px;
        }
      }
    }
    .noData_img,
    .watchTips {
      font-size: 32px;
      height: 400px;
      padding: 0 40px;
      @include flexbox(center, center, column, nowrap);
    }
  }
}
</style>