1541 lines
41 KiB
Vue
1541 lines
41 KiB
Vue
|
<template>
|
|||
|
|
<div class="regulations-division">
|
|||
|
|
<!-- 搜索筛选区域 -->
|
|||
|
|
<div class="search-area">
|
|||
|
|
<div class="search-item">
|
|||
|
|
<span class="label">预警标题</span>
|
|||
|
|
<el-input v-model="searchForm.title" placeholder="请输入" clearable />
|
|||
|
|
</div>
|
|||
|
|
<div class="search-item">
|
|||
|
|
<span class="label">预警类型</span>
|
|||
|
|
<el-select v-model="searchForm.type" placeholder="全部" clearable>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in typeOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="search-item">
|
|||
|
|
<span class="label">预警级别</span>
|
|||
|
|
<el-select v-model="searchForm.level" placeholder="全部" clearable>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in levelOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
<div class="search-item">
|
|||
|
|
<span class="label">响应情况</span>
|
|||
|
|
<el-select v-model="searchForm.response" placeholder="全部" clearable>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in responseOptions"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮区域 -->
|
|||
|
|
<div class="action-area">
|
|||
|
|
<el-button
|
|||
|
|
v-for="btn in actionButtons"
|
|||
|
|
:key="btn.key"
|
|||
|
|
:type="btn.type"
|
|||
|
|
:class="btn.class"
|
|||
|
|
@click="handleAction(btn.key)"
|
|||
|
|
>
|
|||
|
|
{{ btn.label }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 数据表格 -->
|
|||
|
|
<div class="table-area">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
:header-cell-style="headerCellStyle"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|||
|
|
<el-table-column
|
|||
|
|
prop="title"
|
|||
|
|
label="预警标题"
|
|||
|
|
min-width="200"
|
|||
|
|
show-overflow-tooltip
|
|||
|
|
/>
|
|||
|
|
<el-table-column prop="type" label="预警类型" width="100" align="center">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span :class="getTypeClass(row.type)">{{ row.type }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="sendTime" label="发送时间" width="160" align="center" />
|
|||
|
|
<el-table-column prop="effectTime" label="生效时间" width="160" align="center" />
|
|||
|
|
<el-table-column prop="receiveTime" label="接收时间" width="160" align="center" />
|
|||
|
|
<el-table-column
|
|||
|
|
prop="forwardTime"
|
|||
|
|
label="预警转发时间"
|
|||
|
|
width="160"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column prop="endTime" label="预警结束时间" width="160" align="center" />
|
|||
|
|
<el-table-column prop="affectRoad" label="影响路段" width="90" align="center" />
|
|||
|
|
<el-table-column prop="affectBridge" label="影响桥梁" width="90" align="center" />
|
|||
|
|
<el-table-column prop="affectTunnel" label="影响隧道" width="90" align="center" />
|
|||
|
|
<el-table-column prop="affectSlope" label="影响边坡" width="90" align="center" />
|
|||
|
|
<el-table-column prop="response" label="响应情况" width="90" align="center" />
|
|||
|
|
<el-table-column label="操作" width="80" align="center" fixed="right">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button link type="primary" size="small" @click="handleDetail(row)"
|
|||
|
|
>详情</el-button
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<div class="pagination-area">
|
|||
|
|
<el-pagination
|
|||
|
|
v-model:current-page="currentPage"
|
|||
|
|
v-model:page-size="pageSize"
|
|||
|
|
:page-sizes="[10, 20, 50, 100]"
|
|||
|
|
:total="total"
|
|||
|
|
layout="prev, pager, next, jumper"
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 生成报告对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="reportDialogVisible"
|
|||
|
|
title="生成报告"
|
|||
|
|
width="600px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form :model="reportForm" label-width="100px">
|
|||
|
|
<el-form-item label="报告标题" required>
|
|||
|
|
<el-input v-model="reportForm.title" placeholder="请输入报告标题" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="报告类型">
|
|||
|
|
<el-radio-group v-model="reportForm.type">
|
|||
|
|
<el-radio label="daily">日报</el-radio>
|
|||
|
|
<el-radio label="weekly">周报</el-radio>
|
|||
|
|
<el-radio label="monthly">月报</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="报告内容">
|
|||
|
|
<el-input
|
|||
|
|
v-model="reportForm.content"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="4"
|
|||
|
|
placeholder="请输入报告内容"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="reportDialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="confirmGenerateReport">确定</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 发布预警对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="publishDialogVisible"
|
|||
|
|
title="发布预警"
|
|||
|
|
width="700px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
class="publish-warning-dialog"
|
|||
|
|
>
|
|||
|
|
<div class="publish-warning-content">
|
|||
|
|
<!-- 上传按钮 -->
|
|||
|
|
<div class="upload-section">
|
|||
|
|
<el-button type="primary" class="upload-btn" @click="handleUploadWarning">
|
|||
|
|
上传
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 气象信息 -->
|
|||
|
|
<div class="section-title">气象信息</div>
|
|||
|
|
|
|||
|
|
<el-form :model="publishForm" label-width="100px" class="publish-form">
|
|||
|
|
<!-- 预警时间 -->
|
|||
|
|
<el-form-item label="预警时间" class="time-item">
|
|||
|
|
<div class="time-range">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="publishForm.startTime"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="请选择开始时间"
|
|||
|
|
style="width: 48%"
|
|||
|
|
/>
|
|||
|
|
<span class="time-separator">-</span>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="publishForm.endTime"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="请选择结束时间"
|
|||
|
|
style="width: 48%"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 气象类型 -->
|
|||
|
|
<el-form-item label="气象类型">
|
|||
|
|
<el-select
|
|||
|
|
v-model="publishForm.weatherType"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option label="暴雨" value="rain" />
|
|||
|
|
<el-option label="大雾" value="fog" />
|
|||
|
|
<el-option label="冰雪" value="snow" />
|
|||
|
|
<el-option label="大风" value="wind" />
|
|||
|
|
<el-option label="高温" value="heat" />
|
|||
|
|
<el-option label="雷电" value="thunder" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 预警等级 -->
|
|||
|
|
<el-form-item label="预警等级">
|
|||
|
|
<el-select
|
|||
|
|
v-model="publishForm.warningLevel"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
style="width: 100%"
|
|||
|
|
>
|
|||
|
|
<el-option label="红色预警" value="red" />
|
|||
|
|
<el-option label="橙色预警" value="orange" />
|
|||
|
|
<el-option label="黄色预警" value="yellow" />
|
|||
|
|
<el-option label="蓝色预警" value="blue" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<!-- 风险区县 -->
|
|||
|
|
<el-form-item label="风险区县" class="district-item">
|
|||
|
|
<div class="district-header">
|
|||
|
|
<span>已选择：{{ selectedDistricts.length }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="district-tags">
|
|||
|
|
<el-button
|
|||
|
|
v-for="district in districtOptions"
|
|||
|
|
:key="district.value"
|
|||
|
|
:class="[
|
|||
|
|
'district-btn',
|
|||
|
|
{ active: selectedDistricts.includes(district.value) },
|
|||
|
|
]"
|
|||
|
|
@click="toggleDistrict(district.value)"
|
|||
|
|
>
|
|||
|
|
{{ district.label }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button type="primary" @click="confirmPublishWarning">确认</el-button>
|
|||
|
|
<el-button @click="publishDialogVisible = false">取消</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 上传统计帮扶对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="uploadDialogVisible"
|
|||
|
|
title="上传统计帮扶数据"
|
|||
|
|
width="500px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form :model="uploadForm" label-width="100px">
|
|||
|
|
<el-form-item label="选择文件" required>
|
|||
|
|
<el-upload
|
|||
|
|
class="upload-demo"
|
|||
|
|
drag
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:before-upload="beforeUpload"
|
|||
|
|
:on-success="(res, file) => handleUploadSuccess(res, file, 'upload')"
|
|||
|
|
:on-error="handleUploadError"
|
|||
|
|
accept=".xls,.xlsx"
|
|||
|
|
>
|
|||
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|||
|
|
<div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip">只能上传Excel文件，且不超过10MB</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="文件说明">
|
|||
|
|
<el-input
|
|||
|
|
v-model="uploadForm.description"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="请输入文件说明"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="confirmUpload">上传</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 上传抽查人次对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="uploadPersonDialogVisible"
|
|||
|
|
title="上传抽查人次数据"
|
|||
|
|
width="500px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form :model="uploadPersonForm" label-width="100px">
|
|||
|
|
<el-form-item label="选择文件" required>
|
|||
|
|
<el-upload
|
|||
|
|
class="upload-demo"
|
|||
|
|
drag
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:before-upload="beforeUpload"
|
|||
|
|
:on-success="(res, file) => handleUploadSuccess(res, file, 'uploadPerson')"
|
|||
|
|
:on-error="handleUploadError"
|
|||
|
|
accept=".xls,.xlsx"
|
|||
|
|
>
|
|||
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|||
|
|
<div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip">只能上传Excel文件，且不超过10MB</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="抽查日期" required>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="uploadPersonForm.date"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="抽查人次">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="uploadPersonForm.count"
|
|||
|
|
:min="0"
|
|||
|
|
style="width: 100%"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="uploadPersonDialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="confirmUploadPerson">上传</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 详情对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="detailDialogVisible"
|
|||
|
|
title="预警详情"
|
|||
|
|
width="1200px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
class="warning-detail-dialog"
|
|||
|
|
:show-close="true"
|
|||
|
|
>
|
|||
|
|
<div class="detail-content" v-if="currentRow" style="overflow: visible;">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<div class="section-title">基本信息</div>
|
|||
|
|
<div class="basic-info-box">
|
|||
|
|
<div class="info-row">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">预警标题：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.title }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">预警类型：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.type }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">发送时间：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.sendTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">生效时间：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.effectTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">接收时间：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.receiveTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">预警转发时间：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.forwardTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">预警结束时间：</span>
|
|||
|
|
<span class="info-value">{{ currentRow.endTime || "-" }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row full-width">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">预警描述：</span>
|
|||
|
|
<span class="info-value">{{
|
|||
|
|
currentRow.description ||
|
|||
|
|
'重庆市气象台2026年1月19日21时00分发布"道路结冰黄色预警信号"，预计1月19日21:00-20日9:00，丰都、万州、开州、城口、云阳、奉节、巫溪、巫山、武隆、彭水、石柱、黔江、酉阳、秀山等14个区县海拔800米以上的地区路表温度将低于0℃，并伴有降水，可能出现对交通有影响的道路结冰。'
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-row full-width">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="info-label">响应措施：</span>
|
|||
|
|
<span class="info-value">{{
|
|||
|
|
currentRow.responseMeasures ||
|
|||
|
|
"立即启动防汛Ⅰ级应急响应，立即转移危险区群众，医疗机构做好应急准备"
|
|||
|
|
}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 影响情况 -->
|
|||
|
|
<div class="detail-section">
|
|||
|
|
<div class="section-title">影响情况</div>
|
|||
|
|
<div class="filter-bar">
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<span class="filter-label">驻地名称</span>
|
|||
|
|
<el-input
|
|||
|
|
v-model="detailFilter.stationName"
|
|||
|
|
placeholder=""
|
|||
|
|
style="width: 120px"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="filter-item">
|
|||
|
|
<span class="filter-label">响应情况</span>
|
|||
|
|
<el-select
|
|||
|
|
v-model="detailFilter.responseStatus"
|
|||
|
|
placeholder="全部"
|
|||
|
|
style="width: 100px"
|
|||
|
|
>
|
|||
|
|
<el-option label="全部" value="" />
|
|||
|
|
<el-option label="已响应" value="responded" />
|
|||
|
|
<el-option label="未响应" value="unresponded" />
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-wrapper">
|
|||
|
|
<el-table
|
|||
|
|
:data="filteredDetailData"
|
|||
|
|
style="width: 100%"
|
|||
|
|
:header-cell-style="detailHeaderCellStyle"
|
|||
|
|
:cell-style="detailCellStyle"
|
|||
|
|
stripe
|
|||
|
|
>
|
|||
|
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
|||
|
|
<el-table-column
|
|||
|
|
prop="district"
|
|||
|
|
label="所属区县"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="roadCode"
|
|||
|
|
label="公路编号"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="startStake"
|
|||
|
|
label="起点桩号"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="endStake"
|
|||
|
|
label="止点桩号"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="affectType"
|
|||
|
|
label="影响类型"
|
|||
|
|
width="100"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="location"
|
|||
|
|
label="位置"
|
|||
|
|
min-width="200"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="responseTime"
|
|||
|
|
label="最新响应时间"
|
|||
|
|
width="160"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="urgeTime"
|
|||
|
|
label="最近催告时间"
|
|||
|
|
width="160"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="trafficDept"
|
|||
|
|
label="交通部门负责人"
|
|||
|
|
width="120"
|
|||
|
|
align="center"
|
|||
|
|
/>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
|
|||
|
|
<!-- 导出配置对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="exportDialogVisible"
|
|||
|
|
title="导出数据"
|
|||
|
|
width="600px"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-form :model="exportConfig" label-width="100px">
|
|||
|
|
<el-form-item label="文件名">
|
|||
|
|
<el-input v-model="exportConfig.filename" placeholder="请输入文件名" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="导出格式">
|
|||
|
|
<el-radio-group v-model="exportConfig.format">
|
|||
|
|
<el-radio label="csv">CSV</el-radio>
|
|||
|
|
<el-radio label="excel">Excel</el-radio>
|
|||
|
|
<el-radio label="json">JSON</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="选择列">
|
|||
|
|
<el-checkbox-group v-model="exportConfig.selectedColumns">
|
|||
|
|
<el-checkbox v-for="col in exportColumns" :key="col.key" :label="col.key">
|
|||
|
|
{{ col.label }}
|
|||
|
|
</el-checkbox>
|
|||
|
|
</el-checkbox-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="exportDialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="confirmExport">导出</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted, onUnmounted, watch, computed } from "vue";
|
|||
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|||
|
|
import { UploadFilled } from "@element-plus/icons-vue";
|
|||
|
|
|
|||
|
|
// 搜索表单
|
|||
|
|
const searchForm = reactive({
|
|||
|
|
title: "",
|
|||
|
|
type: "",
|
|||
|
|
level: "",
|
|||
|
|
response: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 对话框显示状态
|
|||
|
|
const reportDialogVisible = ref(false);
|
|||
|
|
const publishDialogVisible = ref(false);
|
|||
|
|
const uploadDialogVisible = ref(false);
|
|||
|
|
const uploadPersonDialogVisible = ref(false);
|
|||
|
|
const detailDialogVisible = ref(false);
|
|||
|
|
const exportDialogVisible = ref(false);
|
|||
|
|
|
|||
|
|
// 当前选中的行数据
|
|||
|
|
const currentRow = ref({});
|
|||
|
|
|
|||
|
|
// 导出配置
|
|||
|
|
const exportConfig = reactive({
|
|||
|
|
format: "csv",
|
|||
|
|
filename: "",
|
|||
|
|
selectedColumns: [
|
|||
|
|
"index",
|
|||
|
|
"title",
|
|||
|
|
"type",
|
|||
|
|
"sendTime",
|
|||
|
|
"effectTime",
|
|||
|
|
"receiveTime",
|
|||
|
|
"forwardTime",
|
|||
|
|
"endTime",
|
|||
|
|
"affectRoad",
|
|||
|
|
"affectBridge",
|
|||
|
|
"affectTunnel",
|
|||
|
|
"affectSlope",
|
|||
|
|
"response",
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 可选导出列
|
|||
|
|
const exportColumns = [
|
|||
|
|
{ key: "index", label: "序号" },
|
|||
|
|
{ key: "title", label: "预警标题" },
|
|||
|
|
{ key: "type", label: "预警类型" },
|
|||
|
|
{ key: "sendTime", label: "发送时间" },
|
|||
|
|
{ key: "effectTime", label: "生效时间" },
|
|||
|
|
{ key: "receiveTime", label: "接收时间" },
|
|||
|
|
{ key: "forwardTime", label: "预警转发时间" },
|
|||
|
|
{ key: "endTime", label: "预警结束时间" },
|
|||
|
|
{ key: "affectRoad", label: "影响路段" },
|
|||
|
|
{ key: "affectBridge", label: "影响桥梁" },
|
|||
|
|
{ key: "affectTunnel", label: "影响隧道" },
|
|||
|
|
{ key: "affectSlope", label: "影响边坡" },
|
|||
|
|
{ key: "response", label: "响应情况" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 生成报告表单
|
|||
|
|
const reportForm = reactive({
|
|||
|
|
title: "",
|
|||
|
|
content: "",
|
|||
|
|
type: "daily",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 发布预警表单
|
|||
|
|
const publishForm = reactive({
|
|||
|
|
title: "",
|
|||
|
|
type: "",
|
|||
|
|
level: "",
|
|||
|
|
content: "",
|
|||
|
|
affectArea: [],
|
|||
|
|
startTime: "",
|
|||
|
|
endTime: "",
|
|||
|
|
weatherType: "",
|
|||
|
|
warningLevel: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 区县选项
|
|||
|
|
const districtOptions = [
|
|||
|
|
{ label: "万州区", value: "wanzhou" },
|
|||
|
|
{ label: "合川区", value: "hechuan" },
|
|||
|
|
{ label: "北碚区", value: "beibei" },
|
|||
|
|
{ label: "涪陵区", value: "fuling" },
|
|||
|
|
{ label: "渝中区", value: "yuzhong" },
|
|||
|
|
{ label: "江北区", value: "jiangbei" },
|
|||
|
|
{ label: "沙坪坝区", value: "shapingba" },
|
|||
|
|
{ label: "九龙坡区", value: "jiulongpo" },
|
|||
|
|
{ label: "南岸区", value: "nanan" },
|
|||
|
|
{ label: "渝北区", value: "yubei" },
|
|||
|
|
{ label: "巴南区", value: "banan" },
|
|||
|
|
{ label: "长寿区", value: "changshou" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 选中的区县
|
|||
|
|
const selectedDistricts = ref([]);
|
|||
|
|
|
|||
|
|
// 切换区县选择
|
|||
|
|
const toggleDistrict = (value) => {
|
|||
|
|
const index = selectedDistricts.value.indexOf(value);
|
|||
|
|
if (index > -1) {
|
|||
|
|
selectedDistricts.value.splice(index, 1);
|
|||
|
|
} else {
|
|||
|
|
selectedDistricts.value.push(value);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传预警文件
|
|||
|
|
const handleUploadWarning = () => {
|
|||
|
|
ElMessage.info("请选择要上传的预警文件");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传表单
|
|||
|
|
const uploadForm = reactive({
|
|||
|
|
file: null,
|
|||
|
|
description: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 上传抽查人次表单
|
|||
|
|
const uploadPersonForm = reactive({
|
|||
|
|
file: null,
|
|||
|
|
date: "",
|
|||
|
|
count: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 详情弹窗筛选条件
|
|||
|
|
const detailFilter = reactive({
|
|||
|
|
stationName: "",
|
|||
|
|
responseStatus: "",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 详情影响情况数据
|
|||
|
|
const detailTableData = ref([
|
|||
|
|
{
|
|||
|
|
district: "万州区",
|
|||
|
|
roadCode: "G542",
|
|||
|
|
startStake: "K533+900",
|
|||
|
|
endStake: "K534+500",
|
|||
|
|
affectType: "路段",
|
|||
|
|
location: "广元-万州(K533+900至K534+500)",
|
|||
|
|
responseTime: "2026-01-20 21:39:53",
|
|||
|
|
urgeTime: "-",
|
|||
|
|
trafficDept: "张三",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
district: "涪陵区",
|
|||
|
|
roadCode: "G319",
|
|||
|
|
startStake: "K2380+130",
|
|||
|
|
endStake: "K2380+130",
|
|||
|
|
affectType: "边坡",
|
|||
|
|
location: "高雄-成都(K2380+130至K2380+130)",
|
|||
|
|
responseTime: "2026-01-20 21:39:53",
|
|||
|
|
urgeTime: "2026-01-20 21:39:53",
|
|||
|
|
trafficDept: "李四",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
district: "云阳县",
|
|||
|
|
roadCode: "G347",
|
|||
|
|
startStake: "K1661+450",
|
|||
|
|
endStake: "K1661+450",
|
|||
|
|
affectType: "桥梁",
|
|||
|
|
location: "南京-德令哈(K1661+450至K1661+450)",
|
|||
|
|
responseTime: "-",
|
|||
|
|
urgeTime: "2026-01-20 21:39:53",
|
|||
|
|
trafficDept: "王五",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 过滤后的详情数据
|
|||
|
|
const filteredDetailData = computed(() => {
|
|||
|
|
return detailTableData.value.filter((item) => {
|
|||
|
|
const matchStation =
|
|||
|
|
!detailFilter.stationName ||
|
|||
|
|
item.district.includes(detailFilter.stationName) ||
|
|||
|
|
item.location.includes(detailFilter.stationName);
|
|||
|
|
const matchResponse =
|
|||
|
|
!detailFilter.responseStatus ||
|
|||
|
|
(detailFilter.responseStatus === "responded" && item.responseTime !== "-") ||
|
|||
|
|
(detailFilter.responseStatus === "unresponded" && item.responseTime === "-");
|
|||
|
|
return matchStation && matchResponse;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 详情表格表头样式
|
|||
|
|
const detailHeaderCellStyle = () => ({
|
|||
|
|
background: "#f5f7fa",
|
|||
|
|
color: "#303133",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
fontSize: "14px",
|
|||
|
|
padding: "12px 0",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 详情表格单元格样式
|
|||
|
|
const detailCellStyle = () => ({
|
|||
|
|
padding: "10px 0",
|
|||
|
|
fontSize: "13px",
|
|||
|
|
color: "#606266",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 预警类型选项
|
|||
|
|
const typeOptions = [
|
|||
|
|
{ label: "大雾预警", value: "fog" },
|
|||
|
|
{ label: "暴雨预警", value: "rain" },
|
|||
|
|
{ label: "冰雪预警", value: "snow" },
|
|||
|
|
{ label: "大风预警", value: "wind" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 预警级别选项
|
|||
|
|
const levelOptions = [
|
|||
|
|
{ label: "红色预警", value: "red" },
|
|||
|
|
{ label: "橙色预警", value: "orange" },
|
|||
|
|
{ label: "黄色预警", value: "yellow" },
|
|||
|
|
{ label: "蓝色预警", value: "blue" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 响应情况选项
|
|||
|
|
const responseOptions = [
|
|||
|
|
{ label: "已响应", value: "responded" },
|
|||
|
|
{ label: "未响应", value: "unresponded" },
|
|||
|
|
{ label: "响应中", value: "responding" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 操作按钮数据
|
|||
|
|
const actionButtons = [
|
|||
|
|
{ key: "generate", label: "生成报告", type: "primary", class: "btn-generate" },
|
|||
|
|
{ key: "publish", label: "发布预警", type: "primary", class: "btn-publish" },
|
|||
|
|
{ key: "upload", label: "上传统计帮扶", type: "primary", class: "btn-upload" },
|
|||
|
|
{
|
|||
|
|
key: "uploadPerson",
|
|||
|
|
label: "上传抽查人次",
|
|||
|
|
type: "primary",
|
|||
|
|
class: "btn-upload-person",
|
|||
|
|
},
|
|||
|
|
{ key: "export", label: "导出", type: "success", class: "btn-export" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 表格数据
|
|||
|
|
const tableData = ref([
|
|||
|
|
{
|
|||
|
|
title: "重庆市忠县气象台发布大雾黄色预警[III级/较重]",
|
|||
|
|
type: "大雾预警",
|
|||
|
|
sendTime: "2026-03-10 16:50:02",
|
|||
|
|
effectTime: "2026-03-10 16:50:02",
|
|||
|
|
receiveTime: "2026-03-10 16:50:02",
|
|||
|
|
forwardTime: "2026-03-10 16:50:02",
|
|||
|
|
endTime: "-",
|
|||
|
|
affectRoad: "2",
|
|||
|
|
affectBridge: "3",
|
|||
|
|
affectTunnel: "2",
|
|||
|
|
affectSlope: "1",
|
|||
|
|
response: "1/2",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "重庆市忠县气象台发布大雾黄色预警[III级/较重]",
|
|||
|
|
type: "大雾预警",
|
|||
|
|
sendTime: "2026-03-10 16:50:02",
|
|||
|
|
effectTime: "2026-03-10 16:50:02",
|
|||
|
|
receiveTime: "2026-03-10 16:50:02",
|
|||
|
|
forwardTime: "2026-03-10 16:50:02",
|
|||
|
|
endTime: "-",
|
|||
|
|
affectRoad: "2",
|
|||
|
|
affectBridge: "3",
|
|||
|
|
affectTunnel: "2",
|
|||
|
|
affectSlope: "1",
|
|||
|
|
response: "1/2",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "重庆市忠县气象台发布大雾黄色预警[III级/较重]",
|
|||
|
|
type: "大雾预警",
|
|||
|
|
sendTime: "2026-03-10 16:50:02",
|
|||
|
|
effectTime: "2026-03-10 16:50:02",
|
|||
|
|
receiveTime: "2026-03-10 16:50:02",
|
|||
|
|
forwardTime: "2026-03-10 16:50:02",
|
|||
|
|
endTime: "-",
|
|||
|
|
affectRoad: "2",
|
|||
|
|
affectBridge: "3",
|
|||
|
|
affectTunnel: "2",
|
|||
|
|
affectSlope: "1",
|
|||
|
|
response: "1/2",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "重庆市忠县气象台发布大雾黄色预警[III级/较重]",
|
|||
|
|
type: "大雾预警",
|
|||
|
|
sendTime: "2026-03-10 16:50:02",
|
|||
|
|
effectTime: "2026-03-10 16:50:02",
|
|||
|
|
receiveTime: "2026-03-10 16:50:02",
|
|||
|
|
forwardTime: "2026-03-10 16:50:02",
|
|||
|
|
endTime: "-",
|
|||
|
|
affectRoad: "2",
|
|||
|
|
affectBridge: "3",
|
|||
|
|
affectTunnel: "2",
|
|||
|
|
affectSlope: "1",
|
|||
|
|
response: "1/2",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// 分页
|
|||
|
|
const currentPage = ref(1);
|
|||
|
|
const pageSize = ref(10);
|
|||
|
|
const total = ref(100);
|
|||
|
|
|
|||
|
|
// 表头样式
|
|||
|
|
const headerCellStyle = () => ({
|
|||
|
|
background: "#f5f7fa",
|
|||
|
|
color: "#606266",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取预警类型样式类
|
|||
|
|
const getTypeClass = (type) => {
|
|||
|
|
const classMap = {
|
|||
|
|
大雾预警: "type-fog",
|
|||
|
|
暴雨预警: "type-rain",
|
|||
|
|
冰雪预警: "type-snow",
|
|||
|
|
大风预警: "type-wind",
|
|||
|
|
};
|
|||
|
|
return classMap[type] || "";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取标签类型
|
|||
|
|
const getTagType = (type) => {
|
|||
|
|
const typeMap = {
|
|||
|
|
大雾预警: "warning",
|
|||
|
|
暴雨预警: "primary",
|
|||
|
|
冰雪预警: "info",
|
|||
|
|
大风预警: "success",
|
|||
|
|
};
|
|||
|
|
return typeMap[type] || "";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出单条数据
|
|||
|
|
const handleExportSingle = () => {
|
|||
|
|
if (!currentRow.value) return;
|
|||
|
|
|
|||
|
|
const data = [currentRow.value];
|
|||
|
|
const headers = [
|
|||
|
|
"预警标题",
|
|||
|
|
"预警类型",
|
|||
|
|
"发送时间",
|
|||
|
|
"生效时间",
|
|||
|
|
"接收时间",
|
|||
|
|
"预警转发时间",
|
|||
|
|
"预警结束时间",
|
|||
|
|
"影响路段",
|
|||
|
|
"影响桥梁",
|
|||
|
|
"影响隧道",
|
|||
|
|
"影响边坡",
|
|||
|
|
"响应情况",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const rows = data.map((item) => [
|
|||
|
|
item.title,
|
|||
|
|
item.type,
|
|||
|
|
item.sendTime,
|
|||
|
|
item.effectTime,
|
|||
|
|
item.receiveTime,
|
|||
|
|
item.forwardTime,
|
|||
|
|
item.endTime,
|
|||
|
|
item.affectRoad,
|
|||
|
|
item.affectBridge,
|
|||
|
|
item.affectTunnel,
|
|||
|
|
item.affectSlope,
|
|||
|
|
item.response,
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const csvContent = [headers.join(","), ...rows.map((row) => row.join(","))].join("\n");
|
|||
|
|
|
|||
|
|
const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8;" });
|
|||
|
|
const link = document.createElement("a");
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = `预警详情_${new Date().toLocaleDateString()}.csv`;
|
|||
|
|
link.click();
|
|||
|
|
|
|||
|
|
ElMessage.success("导出成功");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 操作按钮点击
|
|||
|
|
const handleAction = (key) => {
|
|||
|
|
switch (key) {
|
|||
|
|
case "generate":
|
|||
|
|
handleGenerateReport();
|
|||
|
|
break;
|
|||
|
|
case "publish":
|
|||
|
|
handlePublishWarning();
|
|||
|
|
break;
|
|||
|
|
case "upload":
|
|||
|
|
handleUpload();
|
|||
|
|
break;
|
|||
|
|
case "uploadPerson":
|
|||
|
|
handleUploadPerson();
|
|||
|
|
break;
|
|||
|
|
case "export":
|
|||
|
|
handleExport();
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
console.log("未知操作:", key);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 生成报告
|
|||
|
|
const handleGenerateReport = () => {
|
|||
|
|
reportDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 确认生成报告
|
|||
|
|
const confirmGenerateReport = () => {
|
|||
|
|
if (!reportForm.title) {
|
|||
|
|
ElMessage.warning("请输入报告标题");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 模拟生成报告
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ElMessage.success("报告生成成功");
|
|||
|
|
reportDialogVisible.value = false;
|
|||
|
|
// 重置表单
|
|||
|
|
reportForm.title = "";
|
|||
|
|
reportForm.content = "";
|
|||
|
|
reportForm.type = "daily";
|
|||
|
|
}, 500);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 发布预警
|
|||
|
|
const handlePublishWarning = () => {
|
|||
|
|
publishDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 新发布预警确认
|
|||
|
|
const handleNewPublishConfirm = (data) => {
|
|||
|
|
console.log("发布预警数据:", data);
|
|||
|
|
ElMessage.success("预警发布成功");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 确认发布预警
|
|||
|
|
const confirmPublishWarning = () => {
|
|||
|
|
if (!publishForm.title) {
|
|||
|
|
ElMessage.warning("请输入预警标题");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!publishForm.type) {
|
|||
|
|
ElMessage.warning("请选择预警类型");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!publishForm.level) {
|
|||
|
|
ElMessage.warning("请选择预警级别");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 模拟发布预警
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ElMessage.success("预警发布成功");
|
|||
|
|
publishDialogVisible.value = false;
|
|||
|
|
// 重置表单
|
|||
|
|
publishForm.title = "";
|
|||
|
|
publishForm.type = "";
|
|||
|
|
publishForm.level = "";
|
|||
|
|
publishForm.content = "";
|
|||
|
|
publishForm.affectArea = [];
|
|||
|
|
}, 500);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传统计帮扶
|
|||
|
|
const handleUpload = () => {
|
|||
|
|
uploadDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 确认上传
|
|||
|
|
const confirmUpload = () => {
|
|||
|
|
if (!uploadForm.file) {
|
|||
|
|
ElMessage.warning("请选择要上传的文件");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 模拟上传
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ElMessage.success("文件上传成功");
|
|||
|
|
uploadDialogVisible.value = false;
|
|||
|
|
// 重置表单
|
|||
|
|
uploadForm.file = null;
|
|||
|
|
uploadForm.description = "";
|
|||
|
|
}, 500);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 上传抽查人次
|
|||
|
|
const handleUploadPerson = () => {
|
|||
|
|
uploadPersonDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 确认上传抽查人次
|
|||
|
|
const confirmUploadPerson = () => {
|
|||
|
|
if (!uploadPersonForm.file) {
|
|||
|
|
ElMessage.warning("请选择要上传的文件");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!uploadPersonForm.date) {
|
|||
|
|
ElMessage.warning("请选择日期");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 模拟上传
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ElMessage.success("抽查人次上传成功");
|
|||
|
|
uploadPersonDialogVisible.value = false;
|
|||
|
|
// 重置表单
|
|||
|
|
uploadPersonForm.file = null;
|
|||
|
|
uploadPersonForm.date = "";
|
|||
|
|
uploadPersonForm.count = 0;
|
|||
|
|
}, 500);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出数据
|
|||
|
|
const handleExport = () => {
|
|||
|
|
// 设置默认文件名
|
|||
|
|
exportConfig.filename = `预警数据_${new Date().toLocaleDateString()}`;
|
|||
|
|
exportDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 确认导出
|
|||
|
|
const confirmExport = () => {
|
|||
|
|
if (exportConfig.selectedColumns.length === 0) {
|
|||
|
|
ElMessage.warning("请至少选择一列数据");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据格式导出
|
|||
|
|
switch (exportConfig.format) {
|
|||
|
|
case "csv":
|
|||
|
|
exportToCSV();
|
|||
|
|
break;
|
|||
|
|
case "excel":
|
|||
|
|
exportToExcel();
|
|||
|
|
break;
|
|||
|
|
case "json":
|
|||
|
|
exportToJSON();
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
exportToCSV();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
exportDialogVisible.value = false;
|
|||
|
|
ElMessage.success("数据导出成功");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取导出列的标题
|
|||
|
|
const getExportHeaders = () => {
|
|||
|
|
return exportConfig.selectedColumns.map((key) => {
|
|||
|
|
const column = exportColumns.find((col) => col.key === key);
|
|||
|
|
return column ? column.label : key;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取导出数据行
|
|||
|
|
const getExportRows = () => {
|
|||
|
|
return tableData.value.map((item, index) => {
|
|||
|
|
const row = {};
|
|||
|
|
exportConfig.selectedColumns.forEach((key) => {
|
|||
|
|
if (key === "index") {
|
|||
|
|
row[key] = index + 1;
|
|||
|
|
} else {
|
|||
|
|
row[key] = item[key] || "";
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return row;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出为CSV
|
|||
|
|
const exportToCSV = () => {
|
|||
|
|
const headers = getExportHeaders();
|
|||
|
|
const rows = getExportRows();
|
|||
|
|
|
|||
|
|
const csvRows = rows.map((row) =>
|
|||
|
|
exportConfig.selectedColumns.map((key) => `"${row[key]}"`).join(",")
|
|||
|
|
);
|
|||
|
|
const csvContent = [headers.join(","), ...csvRows].join("\n");
|
|||
|
|
|
|||
|
|
const blob = new Blob(["\ufeff" + csvContent], { type: "text/csv;charset=utf-8;" });
|
|||
|
|
const link = document.createElement("a");
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = `${exportConfig.filename}.csv`;
|
|||
|
|
link.click();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出为Excel (使用CSV格式模拟，实际项目中可以使用xlsx库)
|
|||
|
|
const exportToExcel = () => {
|
|||
|
|
// 这里使用CSV格式作为Excel的替代
|
|||
|
|
// 实际项目中可以引入 xlsx 库来生成真正的Excel文件
|
|||
|
|
exportToCSV();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出为JSON
|
|||
|
|
const exportToJSON = () => {
|
|||
|
|
const data = getExportRows();
|
|||
|
|
const jsonContent = JSON.stringify(data, null, 2);
|
|||
|
|
const blob = new Blob([jsonContent], { type: "application/json;charset=utf-8;" });
|
|||
|
|
const link = document.createElement("a");
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = `${exportConfig.filename}.json`;
|
|||
|
|
link.click();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 查看详情
|
|||
|
|
const handleDetail = (row) => {
|
|||
|
|
currentRow.value = { ...row };
|
|||
|
|
detailDialogVisible.value = true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 文件上传前处理
|
|||
|
|
const beforeUpload = (file) => {
|
|||
|
|
const isExcel =
|
|||
|
|
file.type === "application/vnd.ms-excel" ||
|
|||
|
|
file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|||
|
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
|||
|
|
|
|||
|
|
if (!isExcel) {
|
|||
|
|
ElMessage.error("只能上传Excel文件!");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!isLt10M) {
|
|||
|
|
ElMessage.error("文件大小不能超过10MB!");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 文件上传成功
|
|||
|
|
const handleUploadSuccess = (response, file, formType) => {
|
|||
|
|
if (formType === "upload") {
|
|||
|
|
uploadForm.file = file;
|
|||
|
|
} else if (formType === "uploadPerson") {
|
|||
|
|
uploadPersonForm.file = file;
|
|||
|
|
}
|
|||
|
|
ElMessage.success(`${file.name} 上传成功`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 文件上传失败
|
|||
|
|
const handleUploadError = (error, file) => {
|
|||
|
|
ElMessage.error(`${file.name} 上传失败`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 分页大小改变
|
|||
|
|
const handleSizeChange = (val) => {
|
|||
|
|
console.log("每页条数:", val);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 页码改变
|
|||
|
|
const handleCurrentChange = (val) => {
|
|||
|
|
console.log("当前页:", val);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.regulations-division {
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
// 搜索区域
|
|||
|
|
.search-area {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.search-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-input) {
|
|||
|
|
width: 180px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-select) {
|
|||
|
|
width: 140px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 操作按钮区域
|
|||
|
|
.action-area {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-generate {
|
|||
|
|
background: #409eff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-publish {
|
|||
|
|
background: #409eff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-upload {
|
|||
|
|
background: #409eff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-upload-person {
|
|||
|
|
background: #409eff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-export {
|
|||
|
|
background: #67c23a;
|
|||
|
|
border-color: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表格区域
|
|||
|
|
.table-area {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
:deep(.el-table) {
|
|||
|
|
border: 1px solid #ebeef5;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
|
|||
|
|
.el-table__header-wrapper {
|
|||
|
|
th {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 斑马纹样式
|
|||
|
|
.el-table__row--striped {
|
|||
|
|
background: #fafafa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 预警类型样式
|
|||
|
|
.type-fog {
|
|||
|
|
color: #e6a23c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-rain {
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-snow {
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.type-wind {
|
|||
|
|
color: #67c23a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发布预警弹窗样式
|
|||
|
|
:deep(.publish-warning-dialog) {
|
|||
|
|
.el-dialog__header {
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 18px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom: 1px solid #e4e7ed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__body {
|
|||
|
|
padding: 20px 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.publish-warning-content {
|
|||
|
|
.upload-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 36px;
|
|||
|
|
background: #409eff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
border-left: 4px solid #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.publish-form {
|
|||
|
|
.el-form-item {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.el-form-item__label {
|
|||
|
|
color: #606266;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-item {
|
|||
|
|
.time-range {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
|
|||
|
|
.time-separator {
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.district-item {
|
|||
|
|
.district-header {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.district-tags {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 10px;
|
|||
|
|
|
|||
|
|
.district-btn {
|
|||
|
|
min-width: 80px;
|
|||
|
|
height: 32px;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
border: 1px solid #dcdfe6;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #606266;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: #409eff;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: #409eff;
|
|||
|
|
border-color: #409eff;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__footer {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 15px 20px 20px;
|
|||
|
|
border-top: 1px solid #e4e7ed;
|
|||
|
|
|
|||
|
|
.el-button {
|
|||
|
|
min-width: 100px;
|
|||
|
|
height: 36px;
|
|||
|
|
margin: 0 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 预警详情弹窗样式
|
|||
|
|
:deep(.warning-detail-dialog) {
|
|||
|
|
.el-dialog__header {
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
border-bottom: 1px solid #e4e7ed;
|
|||
|
|
margin-right: 0;
|
|||
|
|
|
|||
|
|
.el-dialog__title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-dialog__body {
|
|||
|
|
padding: 20px;
|
|||
|
|
max-height: 70vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail-content {
|
|||
|
|
.detail-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
border-left: 4px solid #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.basic-info-box {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.full-width {
|
|||
|
|
.info-item {
|
|||
|
|
flex: 1 1 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
flex: 1 1 33.33%;
|
|||
|
|
min-width: 250px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
|
|||
|
|
.info-label {
|
|||
|
|
color: #606266;
|
|||
|
|
font-size: 13px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-value {
|
|||
|
|
color: #303133;
|
|||
|
|
font-size: 13px;
|
|||
|
|
flex: 1;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-bar {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
|
|||
|
|
.filter-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
|
|||
|
|
.filter-label {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #606266;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-wrapper {
|
|||
|
|
border: 1px solid #ebeef5;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 分页区域
|
|||
|
|
.pagination-area {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
:deep(.el-pagination) {
|
|||
|
|
.el-pagination__total {
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-pager li {
|
|||
|
|
min-width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 0 4px;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: #409eff;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-prev,
|
|||
|
|
.btn-next {
|
|||
|
|
min-width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
line-height: 32px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|