|
|
@@ -1,7 +1,259 @@
|
|
|
<template>
|
|
|
- <div> </div>
|
|
|
+ <div class="safety-platform-container">
|
|
|
+ <header class="safety-platform-container__header">
|
|
|
+ <div class="breadcrumb-title"> 违规行为记录 </div>
|
|
|
+ </header>
|
|
|
+ <main class="safety-platform-container__main">
|
|
|
+ <div class="search-table-container">
|
|
|
+ <header>
|
|
|
+ <div class="act-search">
|
|
|
+ <section class="select-box">
|
|
|
+ <SelectableInput ref="selectableInputRef" :options="ACT_TABLE_SEARCH_OPTIONS" />
|
|
|
+ <div class="select-box--item">
|
|
|
+ <span>违规类型：</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchData.violationType"
|
|
|
+ placeholder="请选择违规类型"
|
|
|
+ class="select-box--select"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in ACT_VIOLATION_TYPE_OPTIONS"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="select-box--item">
|
|
|
+ <span>通知状态：</span>
|
|
|
+ <el-select
|
|
|
+ v-model="searchData.isNotice"
|
|
|
+ placeholder="请选择通知状态"
|
|
|
+ class="select-box--select"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in ACT_NOTICE_STATE_OPTIONS"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>时间：</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchData.searchTime"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="search-btn">
|
|
|
+ <el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ <el-button @click="handleDownload">导出</el-button>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <BasicTable
|
|
|
+ :tableData="tableData"
|
|
|
+ :tableConfig="tableConfig"
|
|
|
+ @update:pageSize="handleSizeChange"
|
|
|
+ @update:pageNumber="handleCurrentChange"
|
|
|
+ >
|
|
|
+ <template #violateType="scope">
|
|
|
+ <span>{{ ACT_VIOLATION_TYPE_LABEL[scope.row.violateType] }}</span>
|
|
|
+ </template>
|
|
|
+ <template #capturePhotos="scope">
|
|
|
+ <ImageViewer :file-list="scope.row.capturePhotos" />
|
|
|
+ </template>
|
|
|
+ <template #createSource="scope">
|
|
|
+ <span>{{ ACT_NOTICE_DATA_SOURCE_LABEL[scope.row.createSource] }}</span>
|
|
|
+ </template>
|
|
|
+ <template #isNotice="scope">
|
|
|
+ <div class="notice-state">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ backgroundColor: ACT_NOTICE_STATE_COLOR[scope.row.isNotice],
|
|
|
+ width: '6px',
|
|
|
+ height: '6px',
|
|
|
+ borderRadius: '50%',
|
|
|
+ marginRight: '5px',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <span>{{ ACT_NOTICE_STATE_LABEL[scope.row.isNotice] }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<script setup lang="ts">
|
|
|
+ import BasicTable from '@/components/BasicTable.vue';
|
|
|
+ import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
+ import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
+ import { TABLE_OPTIONS, VIOLATION_NOTICE_TABLE_COLUMNS } from '../act/configs/tables';
|
|
|
+ import {
|
|
|
+ ACT_NOTICE_DATA_SOURCE_LABEL,
|
|
|
+ ACT_VIOLATION_TYPE,
|
|
|
+ ACT_VIOLATION_TYPE_LABEL,
|
|
|
+ ACT_TABLE_SEARCH_OPTIONS,
|
|
|
+ ACT_VIOLATION_TYPE_OPTIONS,
|
|
|
+ ACT_NOTICE_STATE_OPTIONS,
|
|
|
+ ACT_NOTICE_STATE,
|
|
|
+ ACT_NOTICE_STATE_LABEL,
|
|
|
+ ACT_NOTICE_STATE_COLOR,
|
|
|
+ } from '../act/constants';
|
|
|
+ import { ref, reactive, onMounted } from 'vue';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import type { QueryPageRequest } from '@/types/basic-query';
|
|
|
+ import type { ActTableSearch, ActTableQuery, ActTableData } from '../act/types';
|
|
|
+ import { getActTableList, exportActViolation } from '@/api/traffic-violation/traffic-act';
|
|
|
+ import { downloadFile } from '@/views/disaster/utils/download';
|
|
|
+ import ImageViewer from '../act/components/ImageViewer.vue';
|
|
|
|
|
|
-<style scoped></style>
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ // 搜索栏
|
|
|
+ const selectableInputRef = ref<InstanceType<typeof SelectableInput>>();
|
|
|
+ const searchData = reactive<ActTableSearch>({});
|
|
|
+
|
|
|
+ function getQuery() {
|
|
|
+ if (!selectableInputRef.value) return;
|
|
|
+ tabelQuery.queryParam = {
|
|
|
+ pageType: 2,
|
|
|
+ };
|
|
|
+ const selectableSearch = selectableInputRef.value.getValue();
|
|
|
+ if (selectableSearch) {
|
|
|
+ tabelQuery.queryParam[selectableSearch.key as string] = selectableSearch.value;
|
|
|
+ }
|
|
|
+ if (searchData.isNotice) {
|
|
|
+ tabelQuery.queryParam.isNotice = searchData.isNotice;
|
|
|
+ }
|
|
|
+ if (searchData.violationType) {
|
|
|
+ tabelQuery.queryParam.violationType = searchData.violationType;
|
|
|
+ }
|
|
|
+ if (searchData.searchTime) {
|
|
|
+ tabelQuery.queryParam.startTime = dayjs(searchData.searchTime[0]).format('YYYY-MM-DD HH:MM:ss');
|
|
|
+ tabelQuery.queryParam.endTime = dayjs(searchData.searchTime[1]).format('YYYY-MM-DD HH:MM:ss');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleSearch() {
|
|
|
+ getQuery();
|
|
|
+ getTableData();
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleReset() {
|
|
|
+ selectableInputRef.value?.clearValue();
|
|
|
+ searchData.carNumber = undefined;
|
|
|
+ searchData.violateName = undefined;
|
|
|
+ searchData.deptName = undefined;
|
|
|
+ searchData.violationType = undefined;
|
|
|
+ searchData.searchTime = undefined;
|
|
|
+ }
|
|
|
+
|
|
|
+ async function handleDownload() {
|
|
|
+ getQuery();
|
|
|
+ try {
|
|
|
+ const res = await exportActViolation(tabelQuery.queryParam);
|
|
|
+ if (res.size === 0) return;
|
|
|
+ const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+ downloadFile(url, '违规行为记录.xlsx');
|
|
|
+ } catch (e) {
|
|
|
+ ElMessage.error('下载失败');
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 表格
|
|
|
+ const basicTableRef = ref<InstanceType<typeof BasicTable>>();
|
|
|
+
|
|
|
+ const { tableConfig, pagination } = useTableConfig(VIOLATION_NOTICE_TABLE_COLUMNS, TABLE_OPTIONS);
|
|
|
+
|
|
|
+ const tableData = ref<ActTableData[]>([]);
|
|
|
+
|
|
|
+ const tabelQuery = reactive<QueryPageRequest<ActTableQuery>>({
|
|
|
+ pageNumber: pagination.pageNumber,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ queryParam: {
|
|
|
+ pageType: 2,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const handleSizeChange = (value: number) => {
|
|
|
+ pagination.pageNumber = value;
|
|
|
+ tabelQuery.pageSize = value;
|
|
|
+ getTableData();
|
|
|
+ };
|
|
|
+ const handleCurrentChange = (value: number) => {
|
|
|
+ pagination.pageNumber = value;
|
|
|
+ tabelQuery.pageSize = value;
|
|
|
+ getTableData();
|
|
|
+ };
|
|
|
+
|
|
|
+ async function getTableData() {
|
|
|
+ tableConfig.loading = true;
|
|
|
+ const res = await getActTableList(tabelQuery);
|
|
|
+ tableData.value = res.records;
|
|
|
+ pagination.total = res.totalRow;
|
|
|
+ tableConfig.loading = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ await getTableData();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ @use '@/styles/page-details-layout.scss' as *;
|
|
|
+ @use '@/styles/page-main-layout.scss' as *;
|
|
|
+ @use '@/styles/basic-table-action.scss' as *;
|
|
|
+ .act-search-input {
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+ .act-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .select-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 32px;
|
|
|
+ &--item {
|
|
|
+ @include flex-center;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice-state {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: center;
|
|
|
+ }
|
|
|
+</style>
|
wyf