shenze-sysMan/src/views/device/alarmClock.vue

<template>
  <!-- 设备定时开关列表 -->
  <div class="clockPage flex-col">
    <s-header :name="$t('device.timeSwitch')" :noback="false"></s-header>
    <div class="bd1 flex-col">
      <div class="section5 flex-col">
        <div class="layer1 flex-row">
          <div class="ImageText1 flex-col">
            <div class="layer1 flex-row justify-between" @click="addAlarmClock">
              <div class="bd2"></div>
              <div class="TextGroup1 flex-col">
                <span class="word2">{{$t('device.addAlarmClock')}}</span>
              </div>
            </div>
          </div>
        </div>
        <img
          class="img2"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
        />
      </div>
      <div v-for="(item, index) in list" :key="index" >
        <div class="section6 l-flex-between kBordBott">
          <div class="TextGroup2 flex-col">
            <div class="bd3 flex-col justify-between">
              <span class="word3">{{item.hour.slice(0,5)}}</span> <span class="info2">{{showWeek(item.week)}}</span>
            </div>
          </div>
          <div class="TextGroup3 flex-col">
            <div class="main2 flex-col justify-between">
              <span class="word4">{{item.name}}</span>
              <span class="txt3">{{showTypeText(item.type)}}</span>
            </div>
          </div>
          <div class="ImageText2 flex-col">
            <div class="group3 flex-row justify-between" @click="deleteAlarm(item.id)">
              <div class="group4 flex-col"></div>
              <div class="TextGroup4 flex-col">
                <span class="info3">{{$t('device.delete')}}</span>
              </div>
            </div>
          </div>
          <div class="bd4 flex-col justify-between">
            <div class="outer1 flex-row justify-between" @click="setAlarm(item)">
              <div class="main3 flex-col"></div>
              <span class="word5">{{$t('device.modify')}}</span>
            </div>
            <span :class="{
              'word6' : item.status === '1',
              'word6 close' : item.status !== '1'
              }">{{item.status === '1' ? $t('device.opened') : $t('device.closed')}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { getAlaramClockList, deleteAlaramClock } from '@/service/device'
import { Toast } from 'vant';
import { getLoginUser, styleUrl } from '@/common/js/utils';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const user = getLoginUser();
    const router = useRouter();
    const route = useRoute();
    const list = ref([]);
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
        styleUrl('alarmClock');
        getAlaramClockListFun();
    });

     // 获取设备列表数据
    const getAlaramClockListFun = async () => {
      const { data } = await getAlaramClockList({adminId : user.id});
      if (data.code) {
        list.value = data.data;
      } else { Toast.fail(data.message); }
    }

    const addAlarmClock = () => {
      router.push({ path: 'alarmClockAdd', query: { deviceId: route.query.deviceId }})
    }

    const showTypeText = (e) => {
      if (e === '0') { return t('device.furnaceHeadOn'); }
      if (e === '1') { return t('device.furnaceHeadClosed'); }
      if (e === '2') { return t('device.startSleep'); }
      if (e === '3') { return t('device.endSleep'); }
      return '';
    }

    const showWeek = (e) => {
      if (e === '1,2,3,4,5,6,7,') { return t('device.everyDay') }
      if (e === '1,2,3,4,5,') { return t('device.weekday2') }
      if (e === '6,7,') { return t('device.weekend2') }
      let retVal = '';
      if (e.indexOf('1') > -1) { retVal = retVal + `${t('device.monday')},` }
      if (e.indexOf('2') > -1) { retVal = retVal + `${t('device.tuesday')},` }
      if (e.indexOf('3') > -1) { retVal = retVal + `${t('device.wednesday')},` }
      if (e.indexOf('4') > -1) { retVal = retVal + `${t('device.thursday')},` }
      if (e.indexOf('5') > -1) { retVal = retVal + `${t('device.friday')},` }
      if (e.indexOf('6') > -1) { retVal = retVal + `${t('device.saturday')},` }
      if (e.indexOf('7') > -1) { retVal = retVal + `${t('device.sunday')}` }
      return retVal;
    }

    const deleteAlarm = async (id) => {
      const { data } = await deleteAlaramClock({id : id});
      if (data.code) {
        Toast.fail(t('device.deletionSucceeded'));
        getAlaramClockListFun();
      } else { Toast.fail(data.message); }
    }

    const setAlarm = async (item) => {
      router.push({ path: 'alarmClockSet', query: { alarmId: item.id }});
    }

 
    return { list, addAlarmClock, showTypeText, showWeek, deleteAlarm, setAlarm };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
</style>