|
@@ -1,48 +1,129 @@
|
|
|
<template>
|
|
|
- <!-- 远程开门 -->
|
|
|
- <div class="pageDoor flex-col">
|
|
|
- <s-header :name="$t('device.remoteDoorOpening')" :noback="false"></s-header>
|
|
|
- <div class="box1">
|
|
|
- <div class="block2 flex-row justify-between">
|
|
|
- <div class="block3 flex-col"></div>
|
|
|
- <span class="info2">{{ $t('device.equipmentName') }}:{{ deviceDetal ? deviceDetal.name : '' }}</span>
|
|
|
+ <div class="door-access-page">
|
|
|
+ <!-- 顶部导航 -->
|
|
|
+ <s-header :name="$t('device.remoteDoorOpening')" :noback="false" />
|
|
|
+
|
|
|
+ <!-- 设备名称标题 -->
|
|
|
+ <div class="device-header">
|
|
|
+ <div class="vertical-indicator"></div>
|
|
|
+ <h3 class="device-name">
|
|
|
+ {{ $t("device.equipmentName") }}:{{
|
|
|
+ deviceDetal ? deviceDetal.name : ""
|
|
|
+ }}
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 门禁控制卡片 -->
|
|
|
+ <div class="settings-card">
|
|
|
+ <!-- 外部门控制 -->
|
|
|
+ <div class="door-item">
|
|
|
+ <div class="door-info">
|
|
|
+ <!-- <van-icon name="../assets/device/door.png" class="door-icon" /> -->
|
|
|
+ <div class="door-detail">
|
|
|
+ <h3 class="door-title">{{ $t("device.outDoor") }}</h3>
|
|
|
+ <p class="door-status">
|
|
|
+ {{ $t("device.status") }}:
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ deviceDetal.outDoor == '1' ? 'status-open' : 'status-closed'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ deviceDetal.outDoor != "1"
|
|
|
+ ? $t("device.closed")
|
|
|
+ : $t("device.open")
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-switch
|
|
|
+ :model-value="deviceDetal.outDoor"
|
|
|
+ @update:model-value="outDoorChg"
|
|
|
+ size="24px"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-color="#4d6add"
|
|
|
+ inactive-color="#dcdee0"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <van-field colon readonly :label="`${$t('device.outDoor')}`" label-width="40px">
|
|
|
- <template #input>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <van-switch :model-value="deviceDetal.outDoor" @update:model-value="outDoorChg" size="22" active-value="1"
|
|
|
- inactive-value="0" />
|
|
|
+
|
|
|
+ <!-- 内部门控制 -->
|
|
|
+ <div class="door-item" v-if="machineType == '0' || machineType == null">
|
|
|
+ <div class="door-info">
|
|
|
+ <!-- <van-icon name="door" class="door-icon" /> -->
|
|
|
+ <div class="door-detail">
|
|
|
+ <h3 class="door-title">{{ $t("device.inDoor") }}</h3>
|
|
|
+ <p class="door-status">
|
|
|
+ {{ $t("device.status") }}:
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ deviceDetal.inDoor == '1' ? 'status-open' : 'status-closed'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ deviceDetal.inDoor != "1"
|
|
|
+ ? $t("device.closed")
|
|
|
+ : $t("device.open")
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <span class="info3 o-pl-50">{{ $t("device.status") }}: </span>
|
|
|
- <span class="info3 o-pl-10">{{ deviceDetal.outDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
-
|
|
|
- <van-field v-if="machineType == '0' || machineType == null" colon readonly :label="`${$t('device.inDoor')}`" label-width="40px">
|
|
|
- <template #input>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <van-switch :model-value="deviceDetal.inDoor" @update:model-value="inDoorChg" size="22" active-value="1"
|
|
|
- inactive-value="0" />
|
|
|
+ </div>
|
|
|
+ <van-switch
|
|
|
+ :model-value="deviceDetal.inDoor"
|
|
|
+ @update:model-value="inDoorChg"
|
|
|
+ size="24px"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-color="#4d6add"
|
|
|
+ inactive-color="#dcdee0"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 纸币器禁能开关 -->
|
|
|
+ <div class="door-item" v-if="(machineType == '0' || machineType == '1') && user.ifForegin == '1'">
|
|
|
+ <div class="door-info">
|
|
|
+ <div class="door-detail">
|
|
|
+ <h3 class="door-title">{{ $t("device.banPaper") }}</h3>
|
|
|
+ <p class="door-status">
|
|
|
+ {{ $t("device.status") }}:
|
|
|
+ <span
|
|
|
+ :class="deviceDetal.banPaper ? 'status-open' : 'status-closed'"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ deviceDetal.banPaper ? $t("device.open") : $t("device.closed")
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <span class="info3 o-pl-50">{{ $t("device.status") }}: </span>
|
|
|
- <span class="info3 o-pl-10">{{ deviceDetal.inDoor != 1 ? $t("device.close") : $t("device.open") }}</span>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
+ </div>
|
|
|
+ <van-switch
|
|
|
+ :model-value="deviceDetal.banPaper"
|
|
|
+ @update:model-value="banPaperChg"
|
|
|
+ size="24px"
|
|
|
+ active-value="1"
|
|
|
+ inactive-value="0"
|
|
|
+ active-color="#4d6add"
|
|
|
+ inactive-color="#dcdee0"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
import sHeader from "@/components/SimpleHeader";
|
|
|
-import { useRoute } from 'vue-router';
|
|
|
-import { getDeviceDetal, Api_openDoor } from '@/service/device'
|
|
|
-import { showFailToast, showToast, showConfirmDialog } from 'vant';
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import { getDeviceDetal, Api_openDoor } from "@/service/device";
|
|
|
+import { showFailToast, showToast, showConfirmDialog } from "vant";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
-import { styleUrl } from "../../common/js/utils";
|
|
|
+import { getLoginUser } from "../../common/js/utils";
|
|
|
|
|
|
export default {
|
|
|
setup() {
|
|
|
+ const user = getLoginUser();
|
|
|
const route = useRoute();
|
|
|
const deviceId = route.query.deviceId;
|
|
|
const machineType = route.query.machineType;
|
|
@@ -52,18 +133,15 @@ export default {
|
|
|
// 初始化页面获取列表
|
|
|
onMounted(async () => {
|
|
|
// 加载样式
|
|
|
- styleUrl('deviceOper');
|
|
|
getDeviceDetalFun();
|
|
|
});
|
|
|
|
|
|
// 获取设备列表数据
|
|
|
const getDeviceDetalFun = async () => {
|
|
|
- const {
|
|
|
- data
|
|
|
- } = await getDeviceDetal({
|
|
|
- id: deviceId
|
|
|
+ const { data } = await getDeviceDetal({
|
|
|
+ id: deviceId,
|
|
|
});
|
|
|
- if (data.code === '00000') {
|
|
|
+ if (data.code === "00000") {
|
|
|
// outDoor如果是null,默认是关闭
|
|
|
if (data.data.outDoor == null) {
|
|
|
data.data.outDoor = "0";
|
|
@@ -73,17 +151,17 @@ export default {
|
|
|
data.data.inDoor = "0";
|
|
|
}
|
|
|
deviceDetal.value = data.data;
|
|
|
- console.log(deviceDetal.value)
|
|
|
+ console.log(deviceDetal.value);
|
|
|
} else {
|
|
|
showFailToast(data.message);
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
// 点击外门开关
|
|
|
const outDoorChg = (outDoor) => {
|
|
|
showConfirmDialog({
|
|
|
- title: t('device.openRemind'),
|
|
|
- message: t('device.openRemindOut'),
|
|
|
+ title: t("device.openRemind"),
|
|
|
+ message: t("device.openRemindOut"),
|
|
|
}).then(() => {
|
|
|
Api_openDoor({
|
|
|
equipmentId: deviceDetal.value.id,
|
|
@@ -91,7 +169,7 @@ export default {
|
|
|
status: outDoor,
|
|
|
}).then((res) => {
|
|
|
if (res.data.code == "00000") {
|
|
|
- showToast(t('device.sentSuccessfully'));
|
|
|
+ showToast(t("device.sentSuccessfully"));
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
getDeviceDetalFun();
|
|
@@ -103,8 +181,8 @@ export default {
|
|
|
// 点击内门开关
|
|
|
const inDoorChg = (inDoor) => {
|
|
|
showConfirmDialog({
|
|
|
- title: t('device.openRemind'),
|
|
|
- message: t('device.openRemindIn'),
|
|
|
+ title: t("device.openRemind"),
|
|
|
+ message: t("device.openRemindIn"),
|
|
|
}).then(() => {
|
|
|
Api_openDoor({
|
|
|
equipmentId: deviceDetal.value.id,
|
|
@@ -112,7 +190,27 @@ export default {
|
|
|
status: inDoor,
|
|
|
}).then((res) => {
|
|
|
if (res.data.code == "00000") {
|
|
|
- showToast(t('device.sentSuccessfully'));
|
|
|
+ showToast(t("device.sentSuccessfully"));
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ getDeviceDetalFun();
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const banPaperChg = (banPaper) => {
|
|
|
+ showConfirmDialog({
|
|
|
+ title: t("device.openRemind"),
|
|
|
+ message: t("device.openRemindPaper"),
|
|
|
+ }).then(() => {
|
|
|
+ Api_openDoor({
|
|
|
+ equipmentId: deviceDetal.value.id,
|
|
|
+ type: 2,
|
|
|
+ status: banPaper,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.code == "00000") {
|
|
|
+ showToast(t("device.sentSuccessfully"));
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
getDeviceDetalFun();
|
|
@@ -125,15 +223,140 @@ export default {
|
|
|
deviceDetal,
|
|
|
outDoorChg,
|
|
|
inDoorChg,
|
|
|
- machineType
|
|
|
+ banPaperChg,
|
|
|
+ machineType,
|
|
|
+ user,
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
- sHeader
|
|
|
+ sHeader,
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@import "../../common/style/common";
|
|
|
-</style>
|
|
|
+@theme-color: #4d6add;
|
|
|
+@light-bg: #f5f8ff;
|
|
|
+@card-bg: #ffffff;
|
|
|
+@text-dark: #333;
|
|
|
+@text-light: #666;
|
|
|
+@text-lighter: #999;
|
|
|
+@border-radius: 12px;
|
|
|
+@card-shadow: 0 4px 12px rgba(77, 106, 221, 0.15);
|
|
|
+@hover-shadow: 0 8px 20px rgba(77, 106, 221, 0.25);
|
|
|
+@transition: all 0.3s ease;
|
|
|
+
|
|
|
+.door-access-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: @light-bg;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
|
|
+ sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.device-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 15px;
|
|
|
+ background: #fff;
|
|
|
+ margin: 12px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .vertical-indicator {
|
|
|
+ width: 4px;
|
|
|
+ height: 15px;
|
|
|
+ background: var(--active-color, #4d6add);
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-name {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #404d74;
|
|
|
+ font-weight: 550;
|
|
|
+
|
|
|
+ // 长名称处理
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ max-width: 70vw;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.settings-card {
|
|
|
+ background-color: @card-bg;
|
|
|
+ border-radius: @border-radius;
|
|
|
+ box-shadow: @card-shadow;
|
|
|
+ padding: 16px;
|
|
|
+ margin: 0 16px 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.door-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16px 0;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ // &:last-child {
|
|
|
+ // border-bottom: none;
|
|
|
+ // padding-bottom: 0;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+.door-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.door-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: @theme-color;
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.door-detail {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.door-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: @text-dark;
|
|
|
+ margin: 0 0 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.door-status {
|
|
|
+ font-size: 14px;
|
|
|
+ color: @text-light;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .status-open {
|
|
|
+ color: #4caf50;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-closed {
|
|
|
+ color: #f44336;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式调整
|
|
|
+@media (max-width: 360px) {
|
|
|
+ .device-header .device-name {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .door-title {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .door-status {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|