openDoor.vue 10 KB

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