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-11 14:46:58
 * @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 mt-[32px]">
        <ContentHeader bgLayout="1855">
            <template #title>
                <div class="w-[200px] bg_title bg_title_6">
                </div>
            </template>
        </ContentHeader>
    </div>
    <div class="px-[16px] device-status-content-box">
        <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="formData.deviceId" placeholder="设备ID" class="custom-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="bg-transparent baseTable_wrap" v-loading="dataLoading" :element-loading-svg="svg"
            element-loading-svg-view-box="-10, -10, 50, 50">
            <template v-if="pagination.total > 0">
                <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
                    :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true" :columns="columns"
                    :page="pagination.currentPage" @change="handleTableChange">
                    <template v-slot:actionBar="{ row }">
                        <ul class="flex table_action_box">
                            <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
                                <el-button text>
                                    <span :style="{
                                        fontSize: '14px',
                                        color: '#37DBFF'
                                    }">
                                        即时视频
                                    </span>
                                </el-button>
                            </li>
                            <li class="flex items-center" @click="openHistory(row)">
                                <el-button text>
                                    <span :style="{
                                        fontSize: '14px',
                                        color: '#37DBFF'
                                    }">
                                        历史视频
                                    </span>
                                </el-button>
                            </li>
                        </ul>
                    </template>
                </BaseTable>
            </template>
        </div>
    </div>


</template>


<script setup lang="ts">
import { BaseTable } from "@/components/CustomTable";
import ContentHeader from '@/components/ContentHeader.vue';
import onLineIcon from '@/assets/common/online_icon.png';
import outLineIcon from '@/assets/common/outline_icon.png';
import errorIcon from '@/assets/common/error_icon.png';

defineOptions({
    name: "DeviceStatusIndex"
});
const alarmLevelStatusEnum: Record<string, any>[] = [
    {
        color: "#52C41A",
        value: "1",
        label: "在线",
        isDelete: true,
        icon: onLineIcon,
        id: "1"
    },
    {
        color: "#999999",
        value: "2",
        label: "离线",
        isDelete: false,
        icon: outLineIcon,

        id: "2"
    },
    {
        color: "#E80D0D",
        value: "3",
        label: "故障",
        isDelete: false,
        icon: errorIcon,
        id: "3"
    }
];

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

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



const columns = [
    {
        label: "设备名称",
        property: "name"
    },
    {
        label: "设备ID",
        property: "code"
    },
    {
        label: "设备位置",
        property: "deviceGroup"
    },
    {
        label: "设备状态",
        property: "status",
        formatter: val => {
            console.log(val);
            const currentLevelObj =
                alarmLevelStatusEnum[Number(val?.status) - 1];

            return h(
                "div",
                {
                    style: {
                        fontSize: "14px",
                        display: "flex",
                        alignItems: "center",
                        lineHeight: "20px",
                        color: currentLevelObj.color
                    }
                },
                [
                    h('img', {
                        // 使用 @ 别名引用 assets/common 目录下的图片
                        src: currentLevelObj.icon,
                        style: {
                            width: '20px',
                            height: '20px',
                            marginRight: "12px"
                        }
                    }),
                    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 = () => {
    getList()
};

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

function handleTableChange(record) {
    console.log("handleTableChange_record", record);
    pagination.value = {
        ...pagination.value,
        currentPage: record.page,
        pageSize: record.pageSize
    };
    getList();
}
/**打开视频 */
function openCurrent(row) {
    console.log(row, "openCurrent");
    currentRow.value = row;
}

function openHistory(row) {
    console.log(row, "openHistory");
    currentRow.value = row;
}


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

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