123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359 |
- <template>
- <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>
- <!-- 内部门控制 -->
- <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>
- </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' || user.type == '0')">
- <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>
- </div>
- <van-switch
- :model-value="deviceDetal.banPaper"
- @update:model-value="banPaperChg"
- size="24px"
- active-color="#4d6add"
- inactive-color="#dcdee0"
- />
- </div>
- </div>
- </div>
- </template>
- <script>
- import { onMounted, ref } from "vue";
- import sHeader from "@/components/SimpleHeader";
- import { useRoute } from "vue-router";
- import { getDeviceDetal, Api_openDoor, banMoney } from "@/service/device";
- import { showFailToast, showToast, showConfirmDialog } from "vant";
- import { useI18n } from "vue-i18n";
- 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;
- const deviceDetal = ref({});
- const { t } = useI18n();
- // 初始化页面获取列表
- onMounted(async () => {
- // 加载样式
- getDeviceDetalFun();
- });
- // 获取设备列表数据
- const getDeviceDetalFun = async () => {
- const { data } = await getDeviceDetal({
- id: deviceId,
- });
- if (data.code === "00000") {
- // outDoor如果是null,默认是关闭
- if (data.data.outDoor == null) {
- data.data.outDoor = "0";
- }
- // inDoor如果是null,默认是关闭
- if (data.data.inDoor == null) {
- data.data.inDoor = "0";
- }
- deviceDetal.value = data.data;
- console.log(deviceDetal.value);
- } else {
- showFailToast(data.message);
- }
- };
- // 点击外门开关
- const outDoorChg = (outDoor) => {
- showConfirmDialog({
- title: t("device.openRemind"),
- message: t("device.openRemindOut"),
- }).then(() => {
- Api_openDoor({
- equipmentId: deviceDetal.value.id,
- type: 0,
- status: outDoor,
- }).then((res) => {
- if (res.data.code == "00000") {
- showToast(t("device.sentSuccessfully"));
- }
- setTimeout(() => {
- getDeviceDetalFun();
- }, 1500);
- });
- });
- };
- // 点击内门开关
- const inDoorChg = (inDoor) => {
- showConfirmDialog({
- title: t("device.openRemind"),
- message: t("device.openRemindIn"),
- }).then(() => {
- Api_openDoor({
- equipmentId: deviceDetal.value.id,
- type: 1,
- status: inDoor,
- }).then((res) => {
- if (res.data.code == "00000") {
- showToast(t("device.sentSuccessfully"));
- }
- setTimeout(() => {
- getDeviceDetalFun();
- }, 1500);
- });
- });
- };
- const banPaperChg = (banPaper) => {
- showConfirmDialog({
- title: t("device.openRemind"),
- message: t("device.openRemindPaper"),
- }).then(() => {
- banMoney({
- equipmentId: deviceDetal.value.id,
- banPaper: banPaper,
- }).then((res) => {
- if (res.data.code == "00000") {
- showToast(t("device.sentSuccessfully"));
- }
- setTimeout(() => {
- getDeviceDetalFun();
- }, 1500);
- });
- });
- };
- return {
- deviceDetal,
- outDoorChg,
- inDoorChg,
- banPaperChg,
- machineType,
- user,
- };
- },
- components: {
- sHeader,
- },
- };
- </script>
- <style lang="less" scoped>
- @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>
|