openDoor.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
  1. <template>
  2. <div class="door-access-page">
  3. <!-- 顶部导航 -->
  4. <s-header :name="$t('device.remoteDoorOpening')" :noback="false" />
  5. <!-- 设备名称标题 -->
  6. <div class="device-header">
  7. <div class="vertical-indicator"></div>
  8. <h3 class="device-name">
  9. {{ $t("device.equipmentName") }}:{{
  10. deviceDetal ? deviceDetal.name : ""
  11. }}
  12. </h3>
  13. </div>
  14. <!-- 门禁控制卡片 -->
  15. <div class="settings-card">
  16. <!-- 外部门控制 -->
  17. <div class="door-item">
  18. <div class="door-info">
  19. <!-- <van-icon name="../assets/device/door.png" class="door-icon" /> -->
  20. <div class="door-detail">
  21. <h3 class="door-title">{{ $t("device.outDoor") }}</h3>
  22. <p class="door-status">
  23. {{ $t("device.status") }}:
  24. <span
  25. :class="
  26. deviceDetal.outDoor == '1' ? 'status-open' : 'status-closed'
  27. "
  28. >
  29. {{
  30. deviceDetal.outDoor != "1"
  31. ? $t("device.closed")
  32. : $t("device.open")
  33. }}
  34. </span>
  35. </p>
  36. </div>
  37. </div>
  38. <van-switch
  39. :model-value="deviceDetal.outDoor"
  40. @update:model-value="outDoorChg"
  41. size="24px"
  42. active-value="1"
  43. inactive-value="0"
  44. active-color="#4d6add"
  45. inactive-color="#dcdee0"
  46. />
  47. </div>
  48. <!-- 内部门控制 -->
  49. <div class="door-item" v-if="machineType == '0' || machineType == null">
  50. <div class="door-info">
  51. <!-- <van-icon name="door" class="door-icon" /> -->
  52. <div class="door-detail">
  53. <h3 class="door-title">{{ $t("device.inDoor") }}</h3>
  54. <p class="door-status">
  55. {{ $t("device.status") }}:
  56. <span
  57. :class="
  58. deviceDetal.inDoor == '1' ? 'status-open' : 'status-closed'
  59. "
  60. >
  61. {{
  62. deviceDetal.inDoor != "1"
  63. ? $t("device.closed")
  64. : $t("device.open")
  65. }}
  66. </span>
  67. </p>
  68. </div>
  69. </div>
  70. <van-switch
  71. :model-value="deviceDetal.inDoor"
  72. @update:model-value="inDoorChg"
  73. size="24px"
  74. active-value="1"
  75. inactive-value="0"
  76. active-color="#4d6add"
  77. inactive-color="#dcdee0"
  78. />
  79. </div>
  80. <!-- 纸币器禁能开关 -->
  81. <div class="door-item" v-if="(machineType == '0' || machineType == '1') && (user.ifForegin == '1' || user.type == '0')">
  82. <div class="door-info">
  83. <div class="door-detail">
  84. <h3 class="door-title">{{ $t("device.banPaper") }}</h3>
  85. <p class="door-status">
  86. {{ $t("device.status") }}:
  87. <span
  88. :class="deviceDetal.banPaper ? 'status-open' : 'status-closed'"
  89. >
  90. {{
  91. deviceDetal.banPaper ? $t("device.open") : $t("device.closed")
  92. }}
  93. </span>
  94. </p>
  95. </div>
  96. </div>
  97. <van-switch
  98. :model-value="deviceDetal.banPaper"
  99. @update:model-value="banPaperChg"
  100. size="24px"
  101. active-color="#4d6add"
  102. inactive-color="#dcdee0"
  103. />
  104. </div>
  105. </div>
  106. </div>
  107. </template>
  108. <script>
  109. import { onMounted, ref } from "vue";
  110. import sHeader from "@/components/SimpleHeader";
  111. import { useRoute } from "vue-router";
  112. import { getDeviceDetal, Api_openDoor, banMoney } from "@/service/device";
  113. import { showFailToast, showToast, showConfirmDialog } from "vant";
  114. import { useI18n } from "vue-i18n";
  115. import { getLoginUser } from "../../common/js/utils";
  116. export default {
  117. setup() {
  118. const user = getLoginUser();
  119. const route = useRoute();
  120. const deviceId = route.query.deviceId;
  121. const machineType = route.query.machineType;
  122. const deviceDetal = ref({});
  123. const { t } = useI18n();
  124. // 初始化页面获取列表
  125. onMounted(async () => {
  126. // 加载样式
  127. getDeviceDetalFun();
  128. });
  129. // 获取设备列表数据
  130. const getDeviceDetalFun = async () => {
  131. const { data } = await getDeviceDetal({
  132. id: deviceId,
  133. });
  134. if (data.code === "00000") {
  135. // outDoor如果是null,默认是关闭
  136. if (data.data.outDoor == null) {
  137. data.data.outDoor = "0";
  138. }
  139. // inDoor如果是null,默认是关闭
  140. if (data.data.inDoor == null) {
  141. data.data.inDoor = "0";
  142. }
  143. deviceDetal.value = data.data;
  144. console.log(deviceDetal.value);
  145. } else {
  146. showFailToast(data.message);
  147. }
  148. };
  149. // 点击外门开关
  150. const outDoorChg = (outDoor) => {
  151. showConfirmDialog({
  152. title: t("device.openRemind"),
  153. message: t("device.openRemindOut"),
  154. }).then(() => {
  155. Api_openDoor({
  156. equipmentId: deviceDetal.value.id,
  157. type: 0,
  158. status: outDoor,
  159. }).then((res) => {
  160. if (res.data.code == "00000") {
  161. showToast(t("device.sentSuccessfully"));
  162. }
  163. setTimeout(() => {
  164. getDeviceDetalFun();
  165. }, 1500);
  166. });
  167. });
  168. };
  169. // 点击内门开关
  170. const inDoorChg = (inDoor) => {
  171. showConfirmDialog({
  172. title: t("device.openRemind"),
  173. message: t("device.openRemindIn"),
  174. }).then(() => {
  175. Api_openDoor({
  176. equipmentId: deviceDetal.value.id,
  177. type: 1,
  178. status: inDoor,
  179. }).then((res) => {
  180. if (res.data.code == "00000") {
  181. showToast(t("device.sentSuccessfully"));
  182. }
  183. setTimeout(() => {
  184. getDeviceDetalFun();
  185. }, 1500);
  186. });
  187. });
  188. };
  189. const banPaperChg = (banPaper) => {
  190. showConfirmDialog({
  191. title: t("device.openRemind"),
  192. message: t("device.openRemindPaper"),
  193. }).then(() => {
  194. banMoney({
  195. equipmentId: deviceDetal.value.id,
  196. banPaper: banPaper,
  197. }).then((res) => {
  198. if (res.data.code == "00000") {
  199. showToast(t("device.sentSuccessfully"));
  200. }
  201. setTimeout(() => {
  202. getDeviceDetalFun();
  203. }, 1500);
  204. });
  205. });
  206. };
  207. return {
  208. deviceDetal,
  209. outDoorChg,
  210. inDoorChg,
  211. banPaperChg,
  212. machineType,
  213. user,
  214. };
  215. },
  216. components: {
  217. sHeader,
  218. },
  219. };
  220. </script>
  221. <style lang="less" scoped>
  222. @theme-color: #4d6add;
  223. @light-bg: #f5f8ff;
  224. @card-bg: #ffffff;
  225. @text-dark: #333;
  226. @text-light: #666;
  227. @text-lighter: #999;
  228. @border-radius: 12px;
  229. @card-shadow: 0 4px 12px rgba(77, 106, 221, 0.15);
  230. @hover-shadow: 0 8px 20px rgba(77, 106, 221, 0.25);
  231. @transition: all 0.3s ease;
  232. .door-access-page {
  233. display: flex;
  234. flex-direction: column;
  235. height: 100vh;
  236. background-color: @light-bg;
  237. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
  238. sans-serif;
  239. }
  240. .device-header {
  241. display: flex;
  242. align-items: center;
  243. padding: 12px 15px;
  244. background: #fff;
  245. margin: 12px 16px;
  246. border-radius: 8px;
  247. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  248. .vertical-indicator {
  249. width: 4px;
  250. height: 15px;
  251. background: var(--active-color, #4d6add);
  252. border-radius: 2px;
  253. margin-right: 10px;
  254. }
  255. .device-name {
  256. margin: 0;
  257. font-size: 15px;
  258. color: #404d74;
  259. font-weight: 550;
  260. // 长名称处理
  261. overflow: hidden;
  262. text-overflow: ellipsis;
  263. white-space: nowrap;
  264. max-width: 70vw;
  265. }
  266. }
  267. .settings-card {
  268. background-color: @card-bg;
  269. border-radius: @border-radius;
  270. box-shadow: @card-shadow;
  271. padding: 16px;
  272. margin: 0 16px 24px;
  273. }
  274. .door-item {
  275. display: flex;
  276. justify-content: space-between;
  277. align-items: center;
  278. padding: 16px 0;
  279. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  280. // &:last-child {
  281. // border-bottom: none;
  282. // padding-bottom: 0;
  283. // }
  284. }
  285. .door-info {
  286. display: flex;
  287. align-items: center;
  288. }
  289. .door-icon {
  290. font-size: 24px;
  291. color: @theme-color;
  292. margin-right: 16px;
  293. }
  294. .door-detail {
  295. flex: 1;
  296. }
  297. .door-title {
  298. font-size: 16px;
  299. font-weight: 600;
  300. color: @text-dark;
  301. margin: 0 0 4px;
  302. }
  303. .door-status {
  304. font-size: 14px;
  305. color: @text-light;
  306. margin: 0;
  307. .status-open {
  308. color: #4caf50;
  309. font-weight: 500;
  310. }
  311. .status-closed {
  312. color: #f44336;
  313. font-weight: 500;
  314. }
  315. }
  316. // 响应式调整
  317. @media (max-width: 360px) {
  318. .device-header .device-name {
  319. font-size: 16px;
  320. }
  321. .door-title {
  322. font-size: 15px;
  323. }
  324. .door-status {
  325. font-size: 13px;
  326. }
  327. }
  328. </style>