alarmClock.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <!-- 设备定时开关列表 -->
  3. <div class="clockPage flex-col">
  4. <s-header :name="$t('device.timeSwitch')" :noback="false"></s-header>
  5. <div class="bd1 flex-col">
  6. <div class="section5 flex-col">
  7. <div class="layer1 flex-row">
  8. <div class="ImageText1 flex-col">
  9. <div class="layer1 flex-row justify-between" @click="addAlarmClock">
  10. <div class="bd2"></div>
  11. <div class="TextGroup1 flex-col">
  12. <span class="word2">{{$t('device.addAlarmClock')}}</span>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <img
  18. class="img2"
  19. referrerpolicy="no-referrer"
  20. src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
  21. />
  22. </div>
  23. <div v-for="(item, index) in list" :key="index" >
  24. <div class="section6 l-flex-between kBordBott">
  25. <div class="TextGroup2 flex-col">
  26. <div class="bd3 flex-col justify-between">
  27. <span class="word3">{{item.hour.slice(0,5)}}</span> <span class="info2">{{showWeek(item.week)}}</span>
  28. </div>
  29. </div>
  30. <div class="TextGroup3 flex-col">
  31. <div class="main2 flex-col justify-between">
  32. <span class="word4">{{item.name}}</span>
  33. <span class="txt3">{{showTypeText(item.type)}}</span>
  34. </div>
  35. </div>
  36. <div class="ImageText2 flex-col">
  37. <div class="group3 flex-row justify-between" @click="deleteAlarm(item.id)">
  38. <div class="group4 flex-col"></div>
  39. <div class="TextGroup4 flex-col">
  40. <span class="info3">{{$t('device.delete')}}</span>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="bd4 flex-col justify-between">
  45. <div class="outer1 flex-row justify-between" @click="setAlarm(item)">
  46. <div class="main3 flex-col"></div>
  47. <span class="word5">{{$t('device.modify')}}</span>
  48. </div>
  49. <span :class="{
  50. 'word6' : item.status === '1',
  51. 'word6 close' : item.status !== '1'
  52. }">{{item.status === '1' ? $t('device.opened') : $t('device.closed')}}</span>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import { onMounted, ref } from 'vue';
  61. import sHeader from "@/components/SimpleHeader";
  62. import { getAlaramClockList, deleteAlaramClock } from '@/service/device'
  63. import { Toast } from 'vant';
  64. import { getLoginUser, styleUrl } from '@/common/js/utils';
  65. import { useRoute, useRouter } from 'vue-router';
  66. import { useI18n } from 'vue-i18n';
  67. export default {
  68. setup() {
  69. const { t } = useI18n();
  70. const user = getLoginUser();
  71. const router = useRouter();
  72. const route = useRoute();
  73. const list = ref([]);
  74. // 初始化页面获取列表
  75. onMounted(async () => {
  76. // 加载样式
  77. styleUrl('alarmClock');
  78. getAlaramClockListFun();
  79. });
  80. // 获取设备列表数据
  81. const getAlaramClockListFun = async () => {
  82. const { data } = await getAlaramClockList({adminId : user.id});
  83. if (data.code) {
  84. list.value = data.data;
  85. } else { Toast.fail(data.message); }
  86. }
  87. const addAlarmClock = () => {
  88. router.push({ path: 'alarmClockAdd', query: { deviceId: route.query.deviceId }})
  89. }
  90. const showTypeText = (e) => {
  91. if (e === '0') { return t('device.furnaceHeadOn'); }
  92. if (e === '1') { return t('device.furnaceHeadClosed'); }
  93. if (e === '2') { return t('device.startSleep'); }
  94. if (e === '3') { return t('device.endSleep'); }
  95. return '';
  96. }
  97. const showWeek = (e) => {
  98. if (e === '1,2,3,4,5,6,7,') { return t('device.everyDay') }
  99. if (e === '1,2,3,4,5,') { return t('device.weekday2') }
  100. if (e === '6,7,') { return t('device.weekend2') }
  101. let retVal = '';
  102. if (e.indexOf('1') > -1) { retVal = retVal + `${t('device.monday')},` }
  103. if (e.indexOf('2') > -1) { retVal = retVal + `${t('device.tuesday')},` }
  104. if (e.indexOf('3') > -1) { retVal = retVal + `${t('device.wednesday')},` }
  105. if (e.indexOf('4') > -1) { retVal = retVal + `${t('device.thursday')},` }
  106. if (e.indexOf('5') > -1) { retVal = retVal + `${t('device.friday')},` }
  107. if (e.indexOf('6') > -1) { retVal = retVal + `${t('device.saturday')},` }
  108. if (e.indexOf('7') > -1) { retVal = retVal + `${t('device.sunday')}` }
  109. return retVal;
  110. }
  111. const deleteAlarm = async (id) => {
  112. const { data } = await deleteAlaramClock({id : id});
  113. if (data.code) {
  114. Toast.fail(t('device.deletionSucceeded'));
  115. getAlaramClockListFun();
  116. } else { Toast.fail(data.message); }
  117. }
  118. const setAlarm = async (item) => {
  119. router.push({ path: 'alarmClockSet', query: { alarmId: item.id }});
  120. }
  121. return { list, addAlarmClock, showTypeText, showWeek, deleteAlarm, setAlarm };
  122. },
  123. components: { sHeader },
  124. };
  125. </script>
  126. <style lang="less" scoped>
  127. @import "../../common/style/common";
  128. </style>