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 15:22:33
 * @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="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="false" :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";

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({
    warning_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')
    // if (data.code === 200) {
    //     userStore.login(data.data.token)
    //     router.push('/dashboard')
    // }

    //   const { data } = await getWarnList({
    //     ...formData,
    //     page: currentPage,
    //     pageSize
    //   });
    listData.value = data.list;
    console.log(data.list);
    pagination.value = {
        ...pagination.value,
        total: data.total
    };
    dataLoading.value = false;
};

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;
    deleteModel.isShowDelete = true;
}

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