EventManage.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. <template>
  2. <Dialog v-model="show" type="xl" title="事件管理列表" hide-footer>
  3. <transition name="fade">
  4. <div v-show="showSearch" class="mb-[20px]">
  5. <el-form ref="queryFormRef" :model="queryParams">
  6. <el-row :gutter="20">
  7. <!-- 第一行 -->
  8. <el-col :span="6">
  9. <el-form-item label="事件类型" prop="event_type">
  10. <el-select
  11. v-model="queryParams.event_type"
  12. placeholder="全部"
  13. class="custom-select"
  14. size="large"
  15. popper-class="custom-select-popper"
  16. :teleported="false"
  17. clearable
  18. >
  19. <el-option label="全部" value=""></el-option>
  20. <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
  21. </el-select>
  22. </el-form-item>
  23. </el-col>
  24. <el-col :span="6">
  25. <el-form-item label="事件等级" prop="event_level">
  26. <el-select
  27. v-model="queryParams.event_level"
  28. placeholder="全部"
  29. class="custom-select"
  30. size="large"
  31. popper-class="custom-select-popper"
  32. :teleported="false"
  33. >
  34. <el-option label="全部" value=""></el-option>
  35. <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
  36. </el-select>
  37. </el-form-item>
  38. </el-col>
  39. <el-col :span="6">
  40. <el-form-item label="事件状态" prop="event_status">
  41. <el-select
  42. v-model="queryParams.event_status"
  43. placeholder="全部"
  44. class="custom-select"
  45. size="large"
  46. popper-class="custom-select-popper"
  47. :teleported="false"
  48. clearable
  49. >
  50. <el-option label="全部" value=""></el-option>
  51. <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
  52. </el-select>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :span="6">
  56. <el-form-item label="行政区划" prop="region_code">
  57. <el-select
  58. v-model="queryParams.region_code"
  59. placeholder="全部"
  60. class="custom-select"
  61. size="large"
  62. popper-class="custom-select-popper"
  63. :teleported="false"
  64. clearable
  65. >
  66. <el-option label="全部" value=""></el-option>
  67. <el-option v-for="item in region" :key="item.value" :label="item.label" :value="item.value"></el-option>
  68. </el-select>
  69. </el-form-item>
  70. </el-col>
  71. </el-row>
  72. <el-row :gutter="20" class="mt-[10px]">
  73. <el-col :span="6">
  74. <el-form-item label="事发时间" prop="event_time">
  75. <el-date-picker
  76. v-model="queryParams.event_time"
  77. type="date"
  78. value-format="YYYY-MM-DD"
  79. placeholder="选择事发时间"
  80. class="common-date-picker"
  81. :teleported="false"
  82. popper-class="common-date-popper"
  83. style="width: 100%"
  84. ></el-date-picker>
  85. </el-form-item>
  86. </el-col>
  87. <el-col :span="6">
  88. <el-form-item prop="keyword">
  89. <el-input
  90. v-model="queryParams.keyword"
  91. class="custom-input2"
  92. placeholder="请输入事件标题/事件地点"
  93. clearable
  94. @keyup.enter="handleQuery"
  95. />
  96. </el-form-item>
  97. </el-col>
  98. <div class="flex">
  99. <div class="common-btn-primary" style="margin-top: -32px" @click="handleQuery">搜索</div>
  100. <div class="common-btn" @click="resetQuery">重置</div>
  101. </div>
  102. </el-row>
  103. </el-form>
  104. </div>
  105. </transition>
  106. <!-- 表格组件 -->
  107. <div class="common-table">
  108. <div class="table-header">
  109. <div class="td">事件编号</div>
  110. <div class="td">事件标题</div>
  111. <div class="td">事件类型</div>
  112. <div class="td">事件等级</div>
  113. <div class="td">事件地点</div>
  114. <div class="td">事件状态</div>
  115. <div class="td">事件时间</div>
  116. <div class="td">操作</div>
  117. </div>
  118. <div v-for="(item, index) in eventList" :key="index" class="tr">
  119. <div class="td">{{ item.event_id }}</div>
  120. <div class="td">{{ item.event_title }}</div>
  121. <div class="td">
  122. <template v-if="item.event_type === '0'">
  123. <div>自然灾害</div>
  124. </template>
  125. <template v-if="item.event_type === '1'">
  126. <div>事故灾害</div>
  127. </template>
  128. <template v-if="item.event_type === '2'">
  129. <div>公共卫生事件</div>
  130. </template>
  131. <template v-if="item.event_type === '3'">
  132. <div>社会安全事件</div>
  133. </template>
  134. </div>
  135. <div class="td">
  136. <template v-if="item.event_level === '0'">
  137. <div>其他</div>
  138. </template>
  139. <template v-if="item.event_level === '1'">
  140. <div>一般</div>
  141. </template>
  142. <template v-if="item.event_level === '2'">
  143. <div>较大</div>
  144. </template>
  145. <template v-if="item.event_level === '3'">
  146. <div>重大</div>
  147. </template>
  148. <template v-if="item.event_level === '4'">
  149. <div>特别重大</div>
  150. </template>
  151. </div>
  152. <div class="td">{{ item.address }}</div>
  153. <div class="td">
  154. <template v-if="item.event_status === '0'">
  155. <div>已登记</div>
  156. </template>
  157. <template v-if="item.event_status === '1'">
  158. <div>指挥中</div>
  159. </template>
  160. <template v-if="item.event_status === '2'">
  161. <div>指挥结束</div>
  162. </template>
  163. <template v-if="item.event_status === '3'">
  164. <div>已关闭</div>
  165. </template>
  166. </div>
  167. <div class="td">{{ item.event_time }}</div>
  168. <div class="td">
  169. <div v-if="item.event_status === '0'" class="btn-box" @click="enterCommand(item)">
  170. <i class="start-icon" />
  171. <div class="gradient-text3">开始指挥</div>
  172. </div>
  173. <div v-else-if="item.event_status === '1'" class="btn-box" @click="enterCommand(item)">
  174. <i class="start-icon" />
  175. <div class="gradient-text3">进入指挥</div>
  176. </div>
  177. <div v-else-if="['2', '3'].includes(item.event_status)" class="btn-box">
  178. <i class="record-icon" />
  179. <div class="gradient-text3">指挥记录</div>
  180. </div>
  181. <!-- <div class="common-btn2" @click="enterCommand(item)">进入指挥</div>-->
  182. <!-- <div class="common-btn2" style="margin-left: 20px" @click="handleClose(item)">关闭事件</div>-->
  183. </div>
  184. </div>
  185. </div>
  186. <div class="footer">
  187. <pagination
  188. v-show="total > 0"
  189. v-model:page="queryParams.page"
  190. v-model:limit="queryParams.page_size"
  191. :total="total"
  192. layout="total, prev, pager, next"
  193. @pagination="getList"
  194. />
  195. </div>
  196. <CloseEventDialog
  197. v-model="closeDialogState.show"
  198. :data="closeDialogState.form"
  199. :event-id="eventId"
  200. @update:model-value="handleCloseEventDialog"
  201. />
  202. </Dialog>
  203. </template>
  204. <script lang="ts" setup>
  205. import { ref, reactive, toRefs } from 'vue';
  206. import { getEvent } from '@/api/duty/eventing';
  207. import CloseEventDialog from '../../eventing/CloseEventDialog.vue';
  208. const proxy = getCurrentInstance()?.proxy;
  209. const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
  210. proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
  211. );
  212. const router = useRouter();
  213. const eventList = ref([]);
  214. const loading = ref(true);
  215. const showSearch = ref(true);
  216. const ids = ref([]);
  217. const single = ref(true);
  218. const multiple = ref(true);
  219. const total = ref(0);
  220. const selectedRow = ref(null);
  221. const eventId = ref('');
  222. const queryFormRef = ref();
  223. const initFormData = {
  224. event_id: '', // 事件标题
  225. event_title: '', // 事件标题
  226. event_type: '', // 事件类型
  227. event_level: '', // 事件等级
  228. event_status: '', // 事件状态
  229. address: '', // 事件地点
  230. longitude: '', // 经度
  231. latitude: '', // 纬度
  232. event_time: '', // 事发时间
  233. report_time: '', // 上报时间
  234. deaths: '',
  235. injuries: '',
  236. missing: '',
  237. event_source: '', // 事件来源
  238. event_description: '', // 事件描述
  239. contact: '' // 联系方式
  240. };
  241. // 表单数据
  242. const data = reactive({
  243. form: { ...initFormData },
  244. queryParams: {
  245. page: 1,
  246. page_size: 9,
  247. event_type: '',
  248. event_level: '',
  249. event_status: '',
  250. event_time: '',
  251. region_code: '',
  252. keyword: ''
  253. },
  254. event_levelSelection: [],
  255. event_statusSelection: [],
  256. regionSelection: []
  257. });
  258. const { queryParams, form } = toRefs(data);
  259. const getList = () => {
  260. loading.value = true;
  261. getEvent(queryParams.value)
  262. .then((res) => {
  263. eventList.value = res.data;
  264. total.value = res.total;
  265. })
  266. .finally(() => {
  267. loading.value = false;
  268. });
  269. };
  270. const handleQuery = () => {
  271. queryParams.value.page = 1;
  272. getList();
  273. };
  274. // 重置查询条件
  275. const resetQuery = () => {
  276. queryParams.value = { page: 1, page_size: 10, event_type: '', event_level: '', event_status: '', event_time: '', region_code: '', keyword: '' };
  277. handleQuery();
  278. };
  279. const handleSelectionChange = (selection) => {
  280. ids.value = selection.map((item) => item.eventId);
  281. selectedRow.value = selection.length === 1 ? selection[0] : null;
  282. single.value = selection.length != 1;
  283. multiple.value = !selection.length;
  284. };
  285. const eventEditDialogState = reactive({
  286. show: false,
  287. title: ''
  288. });
  289. // 关闭事件
  290. const closeDialogState = reactive({
  291. show: false,
  292. form: {
  293. eventId: '',
  294. deaths: '',
  295. injuries: '',
  296. missing: '',
  297. fileNames: []
  298. }
  299. });
  300. const handleClose = (row) => {
  301. if (row) {
  302. console.log(row);
  303. closeDialogState.form.eventId = row.event_id;
  304. closeDialogState.form.deaths = row.deaths;
  305. closeDialogState.form.injuries = row.injuries;
  306. closeDialogState.form.missing = row.missing;
  307. closeDialogState.show = true;
  308. }
  309. };
  310. const handleCloseEventDialog = (b) => {
  311. console.log('handleCloseEventDialog', b);
  312. };
  313. const props = defineProps<{
  314. modelValue?: boolean;
  315. title?: string;
  316. height?: string;
  317. flag: boolean;
  318. }>();
  319. const emit = defineEmits(['update:modelValue']);
  320. let show = ref(false);
  321. // 监听props的modelValue变化
  322. watch(
  323. () => props.modelValue,
  324. (newValue) => {
  325. if (newValue) {
  326. getList();
  327. }
  328. show.value = newValue;
  329. },
  330. {
  331. immediate: true
  332. }
  333. );
  334. watch(
  335. show,
  336. () => {
  337. emit('update:modelValue', show.value);
  338. },
  339. {
  340. immediate: true
  341. }
  342. );
  343. // 关闭弹窗
  344. const closeDialog = () => {
  345. emit('update:modelValue', false);
  346. };
  347. // 进入应急态界面
  348. const enterCommand = (item) => {
  349. if (item) {
  350. // 查看事件详情逻辑
  351. console.log('进入指挥', item);
  352. router.push({
  353. path: props.flag ? '/emergencyCommandMap' : '/emergencyCommandMap2',
  354. query: { event_id: item.event_id }
  355. });
  356. }
  357. };
  358. </script>
  359. <style lang="scss" scoped>
  360. .dialog-wrap {
  361. position: fixed;
  362. top: 0;
  363. right: 0;
  364. left: 0;
  365. bottom: 0;
  366. z-index: 2000;
  367. width: 100%;
  368. height: 100%;
  369. display: flex;
  370. align-items: center;
  371. justify-content: center;
  372. .overlay {
  373. background-color: rgba(0, 0, 0, 0.5);
  374. position: absolute;
  375. top: 0;
  376. left: 0;
  377. width: 100%;
  378. height: 100%;
  379. z-index: -1;
  380. cursor: pointer;
  381. }
  382. .dialog {
  383. width: 5000px;
  384. height: 2000px;
  385. margin: 0 auto;
  386. background-color: #fff;
  387. border-radius: 20px;
  388. }
  389. }
  390. .dialog {
  391. padding: 0 50px;
  392. .dialog-header {
  393. width: 100%;
  394. height: 150px;
  395. display: flex;
  396. justify-content: space-between;
  397. align-items: center;
  398. .icon-close {
  399. cursor: pointer;
  400. }
  401. }
  402. }
  403. .footer {
  404. height: 64px;
  405. display: flex;
  406. justify-content: flex-end;
  407. margin-bottom: 30px;
  408. .pagination-container {
  409. height: 64px;
  410. margin: 0;
  411. }
  412. :deep(.el-pagination__total) {
  413. color: #a7ccdf;
  414. font-size: 32px;
  415. }
  416. :deep(.el-pagination) {
  417. .btn-next,
  418. .btn-prev {
  419. background-color: transparent;
  420. border: none;
  421. .el-icon {
  422. font-size: 22px;
  423. color: #a7ccdf;
  424. }
  425. }
  426. .btn-prev:disabled,
  427. .btn-next:disabled {
  428. background-color: transparent;
  429. border: none;
  430. }
  431. .el-pager li {
  432. width: 64px;
  433. height: 64px;
  434. line-height: 64px;
  435. text-align: center;
  436. font-size: 32px;
  437. color: #a7ccdf;
  438. background-color: #0e3064;
  439. border: 1px solid #0c57a7;
  440. margin: 0 6px;
  441. &:hover {
  442. background-color: #038dff;
  443. border: 1px solid #038dff;
  444. }
  445. }
  446. .el-pager li.is-active {
  447. background-color: #038dff;
  448. border: 1px solid #038dff;
  449. }
  450. }
  451. }
  452. .flex {
  453. display: flex;
  454. align-items: flex-start;
  455. }
  456. </style>