supervision-vue/src/views/data/VideoInspection.vue

<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="预警类型">
                            <el-input
                                placeholder="请输入"
                                v-model="query.systemKeyName"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="案事件名称">
                            <el-input
                                placeholder="请输入"
                                v-model="query.title"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发生单位">
                            <depart-tree-select
                                v-model="query.departId"
                                placeholder="涉及单位"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flex end mt-20 mb-26">
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon
                            ><icon name="el-icon-Search"
                        /></template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container">
            <el-table :data="list">
                <el-table-column
                    label="预警级别"
                    prop="alarmLevel"
                    width="120"
                />
                <el-table-column label="预警类别" prop="systemKeyName" />
                <el-table-column label="预警时间" prop="" />
                <el-table-column label="案事件名称" prop="title" />
                <el-table-column label="发生单位名称" prop="fsdwGajgmc" />
                <el-table-column label="下发状态" width="120">
                    <template #default="{ row }">
                        <span class="text-danger">未下发</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template #default="{ row }">
                        <el-button type="primary" link>查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :current-page="query.current"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>

    <el-dialog title="视频督察详情" v-model="show" width="80vw">
        <div class="row">
            <div class="col col-6">
                <label>预警时间</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-6">
                <label>预警级别</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-6">
                <label>预警开始时间</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-6">
                <label>预警结束时间</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-12">
                <label>登记单位</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-12">
                <label>发生单位</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-24">
                <label>督察方式</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-24">
                <label>督察方式</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-24">
                <label>预警名称</label>
                <span>{{  }}</span>
            </div>
            <div class="col col-24">
                <label>预警标题</label>
                <span>{{  }}</span>
            </div>
        </div>
    </el-dialog>
    
</template>
<script setup>
import { listVideoInspection } from "@/api/data/videoInspection";
import feedback from "@/utils/feedback";
const query = ref({
    current: 1,
    size: 10,
});

const list = ref([]);
const total = ref(0);
function getList() {
    listVideoInspection(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

onMounted(() => {
    getList();
});

function reset() {
    query.value = {
        current: 1,
        size: 10,
    };
    getList();
}

const show = ref(false);
</script>
<style scoped>
</style>