openDoor.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <!-- 远程开门 -->
  3. <div class="page flex-col">
  4. <s-header :name="$t('device.remoteDoorOpening')" :noback="false"></s-header>
  5. <div class="box1">
  6. <div class="block2 flex-row justify-between">
  7. <div class="block3 flex-col"></div>
  8. <span class="info2">{{ $t('device.equipmentName') }}:{{ deviceDetal ? deviceDetal.name : '' }}</span>
  9. </div>
  10. <van-field
  11. colon
  12. readonly
  13. :label="`${$t('device.outDoor')}`"
  14. label-width="40px"
  15. >
  16. <template #input>
  17. <div class="l-flex-RC">
  18. <span>{{ deviceDetal.outDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
  19. <van-switch
  20. disabled
  21. :model-value="deviceDetal.outDoor"
  22. @update:model-value="outDoorChg"
  23. size="24"
  24. active-value="1"
  25. inactive-value="0"
  26. />
  27. </div>
  28. </template>
  29. </van-field>
  30. <van-field
  31. colon
  32. readonly
  33. :label="`${$t('device.inDoor')}`"
  34. label-width="40px"
  35. >
  36. <template #input>
  37. <div class="l-flex-RC">
  38. <span>{{ deviceDetal.inDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
  39. <van-switch
  40. disabled
  41. :model-value="deviceDetal.inDoor"
  42. @update:model-value="inDoorChg"
  43. size="24"
  44. active-value="1"
  45. inactive-value="0"
  46. />
  47. </div>
  48. </template>
  49. </van-field>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. import { onMounted, ref } from 'vue';
  55. import sHeader from "@/components/SimpleHeader";
  56. import { useRoute } from 'vue-router';
  57. import { getDeviceDetal, Api_openDoor } from '@/service/device'
  58. import { Toast, Dialog } from 'vant';
  59. import { useI18n } from "vue-i18n";
  60. export default {
  61. setup() {
  62. const route = useRoute();
  63. const deviceId = route.query.deviceId;
  64. const deviceDetal = ref({});
  65. const { t } = useI18n();
  66. // 初始化页面获取列表
  67. onMounted(async () => {
  68. getDeviceDetalFun();
  69. console.log(deviceDetal.value)
  70. });
  71. // 获取设备列表数据
  72. const getDeviceDetalFun = async () => {
  73. const {
  74. data
  75. } = await getDeviceDetal({
  76. id: deviceId
  77. });
  78. if (data.code === '00000') {
  79. // outDoor如果是null,默认是关闭
  80. if (data.data.outDoor == null) {
  81. data.data.outDoor = "0";
  82. }
  83. // inDoor如果是null,默认是关闭
  84. if (data.data.inDoor == null) {
  85. data.data.inDoor = "0";
  86. }
  87. deviceDetal.value = data.data;
  88. } else {
  89. Toast.fail(data.message);
  90. }
  91. }
  92. // 点击外门开关
  93. const outDoorChg = (outDoor) => {
  94. Dialog.confirm({
  95. title: t('device.openRemind'),
  96. message: t('device.openRemindOut'),
  97. }).then(() => {
  98. Api_openDoor({
  99. equipmentId: deviceDetal.value.id,
  100. type: 0,
  101. status: outDoor,
  102. }).then((res) => {
  103. Toast(res.data.message);
  104. setTimeout(() => {
  105. getDeviceDetalFun();
  106. }, 1000);
  107. });
  108. });
  109. };
  110. // 点击内门开关
  111. const inDoorChg = (inDoor) => {
  112. Dialog.confirm({
  113. title: t('device.openRemind'),
  114. message: t('device.openRemindIn'),
  115. }).then(() => {
  116. Api_openDoor({
  117. equipmentId: deviceDetal.value.id,
  118. type: 1,
  119. status: inDoor,
  120. }).then((res) => {
  121. Toast(res.data.message);
  122. setTimeout(() => {
  123. getDeviceDetalFun();
  124. }, 1000);
  125. });
  126. });
  127. };
  128. return {
  129. deviceDetal,
  130. outDoorChg,
  131. inDoorChg
  132. };
  133. },
  134. components: {
  135. sHeader
  136. },
  137. }
  138. </script>
  139. <style lang="less" scoped>
  140. @import "../../common/style/common";
  141. .page {
  142. background-color: rgba(255, 255, 255, 1);
  143. position: relative;
  144. width: 100%;
  145. height: calc(100vh - 44px);
  146. overflow: hidden;
  147. .box1 {
  148. width: 100%;
  149. height: 237px;
  150. .block2 {
  151. width: 162px;
  152. height: 20px;
  153. margin: 18px 0 0 15px;
  154. .block3 {
  155. background-color: rgba(128, 150, 236, 1);
  156. border-radius: 2px;
  157. width: 4px;
  158. height: 12px;
  159. margin-top: 4px;
  160. }
  161. .info2 {
  162. width: 150px;
  163. height: 20px;
  164. overflow-wrap: break-word;
  165. color: rgba(64, 77, 116, 1);
  166. font-size: 14px;
  167. font-family: PingFangSC-Medium;
  168. text-align: left;
  169. white-space: nowrap;
  170. line-height: 20px;
  171. display: block;
  172. }
  173. }
  174. }
  175. }
  176. </style>