5G-Loading-Bay-Web/src/views/dashboard/DeviceStatus.vue

<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:15:47
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-07 17:35:35
 * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="device-status-header">
        <ContentHeader bgLayout="1855">
            <template #title>
                <div class="w-[200px] bg_title bg_title_6">
                </div>
            </template>
        </ContentHeader>
    </div>
    <div class="device-status-search-box">
        <el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
            <el-option label="设备A" value="deviceA"></el-option>
            <el-option label="设备B" value="deviceB"></el-option>
        </el-select>
        <!-- <el-select v-model="deviceId" placeholder="设备ID" class="query-select">
            <el-option label="ID-001" value="id001"></el-option>
            <el-option label="ID-002" value="id002"></el-option>
        </el-select> -->
        <el-button type="primary" @click="handleQuery" class="query-btn">
            <i class="el-icon-search"></i> 查询
        </el-button>
        <el-button @click="handleReset" class="reset-btn">
            <i class="el-icon-refresh-right"></i> 重置
        </el-button>
    </div>
    <div class="alarm_table" v-loading="dataLoading" :element-loading-svg="svg"
        element-loading-svg-view-box="-10, -10, 50, 50">
        <template v-if="pagination.total > 0">
            <BaseTable class="ds_table" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData"
                :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
                @change="handleTableChange">
                <template v-slot:actionBar="{ row }">
                    <ul class="table_action_box">
                        <li class="flex items-center" @click="openHistory(row)">
                            <el-button text>
                                <i class="iconfont icon-shanchu pr-[8px]"
                                    :style="{ fontSize: '14px', color: '#E80D0D' }" />
                                <span :style="{
                                    fontSize: '14px',
                                    color: '#E80D0D'
                                }">
                                    删除
                                </span>
                            </el-button>
                        </li>
                    </ul>
                </template>
            </BaseTable>
        </template>
    </div>

</template>


<script setup lang="ts">
import { BaseTable } from "@/components/CustomTable";
import ContentHeader from '@/components/ContentHeader.vue';

defineOptions({
    name: "DeviceStatusIndex"
});
const alarmLevelStatusEnum: Record<string, any>[] = [
    {
        color: "rgba(232, 13, 13, 1)",
        value: "1",
        label: "紧急",
        isDelete: false,
        icon: "ArrowUpOutlined",
        id: "1"
    },
    {
        color: "rgba(255, 136, 0, 1)",
        value: "2",
        label: "较高",
        isDelete: false,
        id: "2"
    },
    {
        color: "rgba(68, 139, 245, 1)",
        value: "3",
        label: "一般",
        isDelete: false,
        id: "3"
    },
    {
        color: "rgba(179, 214, 0, 1)",
        value: "4",
        label: "低",
        isDelete: true,
        id: "4"
    },
    {
        color: "rgba(81, 177, 6, 1)",
        value: "5",
        label: "较低",
        isDelete: true,
        id: "5"
    },
    {
        color: "rgba(43, 183, 136, 1)",
        value: "6",
        label: "非常低",
        isDelete: true,
        id: "6"
    }
];

const deleteModel = reactive<{
    isShowDelete: boolean;
}>({
    isShowDelete: false
});

const currentRow = ref<Record<string, any>>({});



const columns = [
    {
        label: "设备名称",
        property: "name"
    },
    {
        label: "设备代码",
        property: "code"
    },
    {
        label: "设备状态",
        property: "status",
        formatter: val => {
            console.log(val);
            const currentLevelObj =
                alarmLevelStatusEnum[Number(val?.status) - 1];
            return h(
                "div",
                {
                    style: {
                        fontSize: "14px",
                        color: currentLevelObj.color
                    }
                },
                [
                    h("i", {
                        class: `iconfont pr-[8px] ${currentLevelObj.value === "1"
                            ? "icon-xiangshangjiantouquan"
                            : "icon-xiala"
                            }`
                    }),
                    h(
                        "span",
                        {
                            fontSize: "14px"
                        },
                        currentLevelObj.label
                    )
                ]
            );
        }
    },
    // TODO 需要封装操作按钮
    {
        type: "action",
        label: "操作"
    }
];

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });

const listData = ref([]);

// const searchValue = ref("");

const formData = reactive({
    name: "",
    status: ""
});

const dataLoading = ref(true);

const getList = async () => {
    const { currentPage, pageSize } = pagination.value;
    const res = await fetch('/api/getDeviceStatusList', {
        method: 'POST',
        body: JSON.stringify({ ...formData, page: currentPage, pageSize })
    })
    const { data } = await res.json()
    console.log(data, 'getList_data')
    listData.value = data.list;
    console.log(data.list);
    pagination.value = {
        ...pagination.value,
        total: data.total
    };
    dataLoading.value = false;
};

// 查询方法
const handleQuery = () => {
    console.log('查询参数：', { deviceName: deviceName.value, deviceId: deviceId.value });
    getList()
};

// 重置方法
const handleReset = () => {
    formData.name = '';
    // deviceId.value = '';
};

function handleTableChange(record) {
    console.log("handleTableChange_record", record);
    pagination.value = {
        ...pagination.value,
        currentPage: record.page,
        pageSize: record.pageSize
    };
    getList();
}
/**操作栏事件 */
function openHistory(row) {
    console.log(row, "openHistory");
    currentRow.value = row;
}

onMounted(() => {
    getList();
});
</script>

<style lang="scss">
@import url('./DeviceStatus.scss');
</style>