bxztApp/packages/screen/src/views/WarningManagement/law/detailDrawer.vue

<template>
    <div class="detail-container">
        <el-card class="basic-card">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                </div>
            </template>
            <el-descriptions column="3">
                <el-descriptions-item label="预警标题">{{ detailData.headline }}</el-descriptions-item>
                <el-descriptions-item label="预警类型">{{ '大雾预警' }}</el-descriptions-item>
                <el-descriptions-item label="发送时间">{{ detailData.createTime }}</el-descriptions-item>
                <el-descriptions-item label="生效时间">{{ detailData.onset }}</el-descriptions-item>
                <el-descriptions-item label="接收时间">{{ detailData.receiveTime }}</el-descriptions-item>
                <el-descriptions-item label="预警转发时间">{{ detailData.forwardTime }}</el-descriptions-item>
                <el-descriptions-item span="3" label="预警结束时间">{{ detailData.expires }}</el-descriptions-item>
                <el-descriptions-item span="3" label="预警描述">{{ detailData.description }}</el-descriptions-item>
                <el-descriptions-item span="3" label="响应措施">{{ }}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card class="sites-card">
            <template #header>
                <div class="card-header">
                    <span>影响情况</span>
                </div>
            </template>
            <DynamicTable :dataSource="sitesList" :columns="columns" :autoHeight="true"></DynamicTable>
        </el-card>
    </div>
</template>


<script setup>
import { ref, onMounted, watch, computed, h } from "vue";
import { request } from "@/utils/request";
import DynamicTable from "../../../component/DynamicTable/index.js";

const props = defineProps({
    id: {
        type: String,
        default: "",
    },
});

const detailData = ref({})
const sitesList = ref([])

// 根据预警ID获取预警详情
const getDetailData = async (id) => {
    try {
        const res = await request({
            url: '/snow-ops-platform/weatherWarning/getById',
            method: 'GET',
            params: {
                id: id
            }
        })
        if (res.code === '00000') {
            detailData.value = res.data
        } else {
            throw new Error(res.message)
        }
    } catch (error) {
        ElMessage.error(error.message)
        console.log(error)
    }
}

// 根据预警ID查询受影响的驻地列表
const getAffectedSites = async (id) => {
    try {
        const res = await request({
            url: '/snow-ops-platform/weatherWarning/affected-sites',
            method: 'GET',
            params: {
                warningId: id
            }
        })
        if (res.code === '00000') {
            sitesList.value = res.data
        } else {
            throw new Error(res.message)
        }
    } catch (error) {
        ElMessage.error(error.message)
        console.log(error)
    }
}

const columns = [
    {
        prop: "county",
        label: "所属区县",
    },
    {
        prop: "siteName",
        label: "驻地名称",
    },
    {
        prop: "siteAddress",
        label: "驻地地址",
    },
    {
        prop: "sitePopulation",
        label: "驻地人数",
    },
    {
        prop: "xxx",
        label: "首次响应时间",
    },
    {
        prop: "xxx",
        label: "最新响应时间",
    },
    {
        prop: "xxx",
        label: "最近催告时间",
    },
    {
        prop: "xxx",
        label: "响应情况",
    },
    {
        label: "操作",
        fixed: "right",
        width: 80,
        render: (row) => () =>
            h("div", { class: "action-btns" }, [
                h(
                    ElButton,
                    {
                        type: "primary",
                        link: true,
                        onClick: async () => {
                            
                        },
                    },
                    () => "巡查记录"
                ),
            ]),
    },

]

onMounted(async () => {
    await getDetailData(props.id);
    await getAffectedSites(props.id)
})


</script>

<style scoped>
.detail-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
</style>