easydo-ops/src/views/passqrcode/device/stateDev.vue

<template>
    <el-dialog v-model="visible" :title="`${formConfig.data.deviceCode} - 设备状态`" width="80%" @closed="$emit('closed')">
        <el-tabs v-model="activeName" @tab-change="tabChange">
            <el-tab-pane label="设备信息" name="deviceInfo">
                <el-descriptions :column="3" label-width="120">
                    <el-descriptions-item class-name="calculator-content" label="排序区起始卡号:">{{ XEUtils.get(deviceData, "beginNo", 0) }}</el-descriptions-item>
                    <el-descriptions-item class-name="calculator-content" label="排序区结束卡号:">{{ XEUtils.get(deviceData, "endNo", 0) }}</el-descriptions-item>
                    <el-descriptions-item class-name="calculator-content" label="排序区可用次数:">{{ XEUtils.get(deviceData, "availableTimes", 0) }}</el-descriptions-item>
                    <el-descriptions-item class-name="calculator-content" label="保留起始卡号:">{{ XEUtils.get(deviceData, "reservedBeginNo", 0) }}</el-descriptions-item>
                    <el-descriptions-item class-name="calculator-content" label="保留结束卡号:">{{ XEUtils.get(deviceData, "reservedEndNo", 0) }}</el-descriptions-item>
                    <el-descriptions-item class-name="calculator-content" label="保留卡号使用次数:">{{ XEUtils.get(deviceData, "reservedTimes", 0) }}</el-descriptions-item>
                    <el-descriptions-item label="创建时间:">{{ $TOOL.dateFormat(XEUtils.get(deviceData, "createTime")) || "/" }}</el-descriptions-item>
                    <el-descriptions-item label="设备时间:">{{ $TOOL.dateFormat(XEUtils.get(deviceData, "deviceTime")) || "/" }}</el-descriptions-item>
                    <el-descriptions-item label="校准时间:">{{ $TOOL.dateFormat(XEUtils.get(deviceData, "proofreadLast")) || "/" }}</el-descriptions-item>
                    <el-descriptions-item label="卡号记录更新时间:" :span="3">{{ $TOOL.dateFormat(XEUtils.get(deviceData, "features.fetchLast")) || "/" }}</el-descriptions-item>
                
                    <el-descriptions-item :span="3">
                        <el-divider content-position="left">非排序区卡号</el-divider>
                    </el-descriptions-item>
                    <template v-for="(item, index) in XEUtils.get(deviceData, 'unsequences', [])" v-bind:key="index">
                        <el-descriptions-item class-name="calculator-content" label="保留起始卡号:">{{ XEUtils.get(item, "beginNo", 0) }}</el-descriptions-item>
                        <el-descriptions-item class-name="calculator-content" label="保留结束卡号:">{{ XEUtils.get(item, "endNo", 0) }}</el-descriptions-item>
                        <el-descriptions-item class-name="calculator-content" label="保留卡号使用次数:">{{ XEUtils.get(item, "times", 0) }}</el-descriptions-item>
                    </template>
                </el-descriptions>
            </el-tab-pane>

            <el-tab-pane label="卡号信息" name="cardNoInfo">
                <scTable ref="xGridTable" :apiObj="formConfig.data.deviceId && $API.passqrcode.cardinfo" min-height="108" max-height="600" framework="zeroLite" :formConfig="formConfig" :paramsColums="paramsColums" :columns="columns"></scTable>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script setup>
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { cardinfoZoneDic, cardinfoStatusDic, cardinfoOpenTime, objectToArray } from "@/utils/basicDic";
import { mapFormItemInput, mapFormItemSelect } from "@/components/scTable/helper";

const visible = ref(false);
const open = deviceCode => {
    visible.value = true;
    formConfig.data.deviceCode = deviceCode;
    getDeviceStatus(deviceCode);
}

const activeName = reactive("deviceInfo");
const deviceData = ref({});

const getDeviceStatus = value => {
    const query = {
        limit: { start: 0, length: 1 },
        orderby: [{ column: "createTime", seq: "DESC" }],
        condition: { column: "deviceCode", symbol: "EQ", value }
    }
    API.passqrcode.devstat.get({ querys: [query] }).then(res => deviceData.value = XEUtils.merge(XEUtils.first(res.datas)));
}

const selectConfig = reactive({
    options: objectToArray(cardinfoZoneDic),
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

const formConfig = reactive({
    data: {
        deviceCode: null,
        deviceId: null
    },
    items: [
        mapFormItemInput("cardNo", "卡号"),
        mapFormItemSelect("zone", "区域", selectConfig)
    ]
})

const paramsColums = reactive([
    { type: "relation", column: "deviceId", symbol: "eq" },
    { type: "relation", column: "cardNo", symbol: "like" },
    { type: "relation", column: "zone", symbol: "eq" },
    { type: "orderby", column: "cardNo", symbol: "asc" }
]);

const columns = reactive([
    { field: "cardNo", title: "卡号", minWidth: 100 },
    { field: "zone", title: "区域", minWidth: 100, formatter: ({ cellValue }) => XEUtils.get(cardinfoZoneDic, cellValue, cellValue) },
    { field: "times", title: "可用次数", minWidth: 100 },
    { field: "openTime", title: "开门时段", minWidth: 200, formatter: ({ cellValue }) => XEUtils.map(cardinfoOpenTime(cellValue).split(","), (item, index) => `读头编号${index + 1}:开门时段${item.split("")[1] || ""}`).join() },
    { field: "auths", title: "认证策略", minWidth: 100 },
    { field: "holiday", title: "假日策略", minWidth: 100 },
    { field: "status", title: "状态", minWidth: 100, formatter: ({ cellValue }) => XEUtils.get(cardinfoStatusDic, cellValue, cellValue) },
    { field: "createTime", title: "创建时间", minWidth: 160, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue) },
    { field: "effectiveTime", title: "有效时间", minWidth: 160, formatter: ({ cellValue }) => TOOL.dateFormat(cellValue) },
    { field: "last", title: "最后刷卡时间", minWidth: 160, formatter: ({ cellValue }) => TOOL.dateFormat(XEUtils.toStringDate(`20${cellValue}`, "yyyyMMddHHmmss")) || "/" }
])

const xGridTable = ref();
const tabChange = name => {
    if (name == "deviceInfo") getDeviceStatus(formConfig.data.deviceCode);
    if (name == "cardNoInfo") {
        formConfig.data.deviceId = deviceData.value.id;
        nextTick(() => xGridTable.value.resetData());
    }
}

defineExpose({
    open
})
</script>

<style scoped>
    .el-descriptions :deep(.el-descriptions__label) {margin-right: 12px;text-align: right;font-weight: 700;color: var(--vxe-ui-font-color);}
    .el-descriptions :deep(.el-descriptions__content).calculator-content {position: relative;top: 3px;font: 22px calculator-all;color: var(--el-color-primary);letter-spacing: 2px;}
    .el-divider {margin-bottom: 12px;}
</style>