easydo-ops/src/views/equipment/tower.vue

<template>
	<el-container class="is-vertical">
        <sc-page-header>
            <template #extra-right>
                <el-button type="warning" @click="refreshState">刷新状态</el-button>
            </template>
        </sc-page-header>

        <scTable ref="xGridTable" :apiObj="$API.system.device" :formConfig="formConfig" :paramsColums="paramsColums" :toolbarConfig="toolbarConfig" :columns="columns"></scTable>
	</el-container>
</template>

<script setup>
import moment from "moment";
import XEUtils from "xe-utils";
import API from "@/api";
import TOOL from "@/utils/tool";
import { gateTypeDic, deviceStateDic } from "@/utils/basicDic";
import { mapFormItemInput, mapFormItemSelect } from "@/components/scTable/helper";

const formatGate = ({ projectId, deviceNum }) => XEUtils.find(TOOL.data.get("TOWER_GATE"), item => XEUtils.findIndexOf(item.devices, d => d.project_id == projectId && d.device_num === deviceNum) !== -1)

const projectConfig = reactive({
    options: TOOL.data.get("PROJECT"),
    optionProps: { label: "projectName", value: "fpiId" },
    events: {
        change: data => XEUtils.merge(formConfig.data, data)
    }
})

const toolbarConfig = reactive({
    enabled: true,
    print: false
})

const formConfig = reactive({
    data: {
        categoryId: 11,
        modelId: 14
    },
    items: [
        mapFormItemSelect("projectId", "所属项目", projectConfig),
        mapFormItemInput("deviceNum", "设备唯一标识")
    ]
})

const paramsColums = reactive([
    { column: "categoryId" },
    { column: "modelId" },
    { column: "projectId" },
    { column: "deviceNum" }
])

const columns = reactive([
    { type: "seq", fixed: "left", width: 60 },
    { type: "html", field: "deviceCode", title: "设备唯一标识", fixed: "left", minWidth: 150, sortable: true, formatter: ({ cellValue, row }) => cellValue || row.deviceNum },
    { type: "html", field: "projectName", title: "所属项目", minWidth: 200, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(XEUtils.find(TOOL.data.get("PROJECT"), item => item.fpiId === row.projectId), "projectName") },
    { type: "html", field: "groundName", title: "工地场区", minWidth: 150, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(formatGate(row), "ground.groundName") },
    { type: "html", field: "mountedName", title: "安装点名称", minWidth: 150, sortable: true, formatter: ({ cellValue, row }) => cellValue || XEUtils.get(formatGate(row), "mountedName") },
    { field: "state", title: "在线状态", minWidth: 100, align: "center", formatter: ({ row }) => !TOOL.dateFormat(XEUtils.get(XEUtils.get(formatGate(row), "devices", []).find(d => d.device_num === row.deviceNum), "healthbeatTime")) || moment().diff(TOOL.dateFormat(XEUtils.get(XEUtils.get(formatGate(row), "devices", []).find(d => d.device_num === row.deviceNum), "healthbeatTime")), "minute") > 5 ? "离线" : "在线", editRender: { name: "$cell-tag" } }
])

// 显示隐藏 筛选表单
const xGridTable = ref();

onMounted(() => window.addEventListener("setItemEvent", ({ key, newValue }) => key === "TOWER_GATE" && newValue && xGridTable.value?.reloadColumn(columns)))
onUnmounted(() => window.removeEventListener("setItemEvent", () => {}));

const router = useRouter();
const refreshState = () => {
    if (moment().diff(XEUtils.get(XEUtils.toStringJSON(localStorage.getItem("TOWER_GATE")), "datetime"), "second") < -280) return ElMessage.warning("请勿重复刷新！(间隔时间至少20秒)");
    TOOL.data.remove("TOWER_GATE");
    router.getGates("tower");
}
</script>