zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2026-03-14 19:46:21 +08:00
parent 93489b06fa
commit 9fb505eb8e
248 changed files with 21714 additions and 1840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/views/backOfficeSystem/ces/components/QueryFormPanel.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<section class="query-wrap">
<div class="query-title">{{ title }}</div>
<div class="query-grid">
<div v-for="field in renderFields" :key="field.key" class="query-cell">
<div class="cell-label">{{ field.label }}</div>
<div class="cell-control" :class="{ 'is-checkbox': field.type === 'checkbox' }">
<el-input clearable v-if="field.type === 'input'" v-model="formState[field.key]" class="control-input"
:placeholder="field.placeholder || ''" />
<el-input clearable v-else-if="field.type === 'number'" v-model="formState[field.key]" class="control-input"
type="number" :placeholder="field.placeholder || ''" />
<el-select clearable v-else-if="field.type === 'select'" v-model="formState[field.key]" class="control-select"
:placeholder="field.placeholder || '请选择'" :multiple="field.multiple || false" collapse-tags
collapse-tags-tooltip>
<el-option v-for="item in field.options || []" :key="item.value ?? item" :label="item.label ?? item"
:value="item.value ?? item" />
</el-select>
<el-date-picker clearable v-else-if="field.type === 'date'" v-model="formState[field.key]"
class="control-date" type="date" :placeholder="field.placeholder || '请选择日期'" value-format="YYYY-MM-DD" />
<el-date-picker clearable v-else-if="field.type === 'datetime'" v-model="formState[field.key]"
class="control-date" type="datetime" :placeholder="field.placeholder || '请选择时间'"
value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker clearable v-else-if="field.type === 'daterange'" v-model="formState[field.key]"
class="control-date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD" />
<el-date-picker clearable v-else-if="field.type === 'datetimerange'" v-model="formState[field.key]"
class="control-date" type="datetimerange" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" />
<template v-else-if="field.type === 'department'">
<MOSTY.Department clearable v-model="formState[field.key]" class="control-select" />
</template>
<div v-else-if="field.type === 'checkbox'" class=" checkbox-wrap">
<el-checkbox v-model="formState[field.key]" />
</div>
</div>
</div>
</div>
<div class="query-action">
<div>
<slot name="but"></slot>
</div>
<div>
<el-button size="small" type="primary" @click="handleSearch">{{ searchText }}</el-button>
<el-button size="small" type="button" @click="handleReset">重置 </el-button>
</div>
</div>
</section>
</template>
<script setup>
import { computed, reactive, watch } from 'vue'
import * as MOSTY from "@/components/MyComponents/index";
const props = defineProps({
title: {
type: String,
default: '查询条件'
},
searchText: {
type: String,
default: '查询'
},
fields: {
type: Array,
default: () => []
},
searchArr: {
type: Array,
default: () => []
}
})
const emit = defineEmits(['search', 'submit', 'reset'])
const formState = reactive({})
const renderFields = computed(() => {
const source = props.searchArr.length ? props.searchArr : props.fields
return source.map((field) => ({
...field,
key: field.key || field.prop,
type: field.type || field.showType || 'input'
})).filter((field) => field.key)
})
const getResetValue = (field) => {
if (field.defaultVal !== undefined) {
return Array.isArray(field.defaultVal) ? [...field.defaultVal] : field.defaultVal
}
if (field.type === 'checkbox') {
return false
}
if (field.type === 'daterange' || field.type === 'datetimerange') {
return []
}
if (field.type === 'select') {
if (field.multiple) {
return []
}
return null
}
return ''
}
const buildResetPayload = () => {
const payload = {}
renderFields.value.forEach((field) => {
payload[field.key] = getResetValue(field)
})
return payload
}
const setFormState = (value = {}) => {
Object.keys(formState).forEach((key) => {
delete formState[key]
})
renderFields.value.forEach((field) => {
if (value[field.key] !== undefined) {
formState[field.key] = Array.isArray(value[field.key]) ? [...value[field.key]] : value[field.key]
return
}
formState[field.key] = getResetValue(field)
})
}
const getFormSnapshot = () => {
const snapshot = {}
renderFields.value.forEach((field) => {
const value = formState[field.key]
if (Array.isArray(value)) {
snapshot[field.key] = [...value]
return
}
snapshot[field.key] = value
})
return snapshot
}
const handleSearch = () => {
const payload = getFormSnapshot()
emit('search', payload)
emit('submit', payload)
}
const handleReset = () => {
const payload = buildResetPayload()
setFormState(payload)
emit('reset', true)
emit('search', payload)
emit('submit', payload)
}
watch(
renderFields,
() => {
setFormState(buildResetPayload())
},
{ immediate: true }
)
defineExpose({
formState,
handleSearch,
handleReset
})
</script>
<style scoped lang="scss">
.query-wrap {
border: 1px solid #b8d3ff;
background: #fff;
}
.query-title {
height: 32px;
background: linear-gradient(to right, #9ed7ff, #e6f0f8);
line-height: 32px;
padding-left: 10px;
font-size: 16px;
font-weight: 700;
color: #0d2148;
border-bottom: 1px solid #b8d3ff;
}
.query-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.query-cell {
display: flex;
min-height: 40px;
border-right: 1px solid #b8d3ff;
border-bottom: 1px solid #b8d3ff;
}
.query-cell:nth-child(4n) {
border-right: 0;
}
.cell-label {
width: 130px;
flex-shrink: 0;
border-right: 1px solid #b8d3ff;
font-size: 14px;
color: #0d2148;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.cell-control {
flex: 1;
min-width: 0;
padding: 4px 8px;
display: flex;
align-items: center;
overflow: hidden;
}
.cell-control.is-checkbox {
justify-content: center;
padding: 0;
}
.control-input,
.control-select,
.control-date {
width: 100%;
max-width: 100%;
min-width: 0;
}
:deep(.control-input .el-input__wrapper),
:deep(.control-select .el-select__wrapper),
:deep(.control-date .el-input__wrapper) {
width: 100%;
max-width: 100%;
min-height: 28px;
border-radius: 0;
box-shadow: 0 0 0 1px #b8d3ff inset;
}
:deep(.control-date.el-date-editor) {
width: 100%;
max-width: 100%;
min-width: 0;
}
:deep(.control-date.el-date-editor .el-range-input) {
min-width: 0;
}
:deep(.control-input .el-input__inner),
:deep(.control-select .el-select__placeholder),
:deep(.control-date .el-input__inner) {
font-size: 14px;
color: #0d2148;
}
:deep(.control-date .el-range-input) {
font-size: 14px;
color: #0d2148;
}
:deep(.control-date .el-range__icon),
:deep(.control-date .el-range__close-icon) {
line-height: 1;
}
.checkbox-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
:deep(.checkbox-wrap .el-checkbox) {
margin-right: 0;
height: 100%;
display: flex;
align-items: center;
}
:deep(.checkbox-wrap .el-checkbox__inner) {
width: 14px;
height: 14px;
}
.query-action {
height: 36px;
display: flex;
// justify-content: flex-end;
justify-content: space-between;
align-items: center;
padding: 0 8px;
}
.search-btn {
height: 26px;
min-width: 70px;
border: 1px solid #0f5bbd;
background: #0f5bbd;
color: #fff;
font-size: 14px;
cursor: pointer;
}
</style>

170
src/views/backOfficeSystem/ces/components/WarnDataTable.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<section class="table-wrap">
<div class="table-box">
<el-table ref="tableRef" v-loading="loading" :data="data" :row-key="rowKey" border stripe class="warn-data-table"
@selection-change="onSelectionChange" :height="height">
<el-table-column v-if="selectionMode !== 'none'" type="selection" :width="selectionColumnWidth"
:align="selectionColumnAlign" />
<el-table-column v-for="column in columns" :key="column.prop || column.label || column.type" :prop="column.prop"
:type="column.type" :label="column.label" :width="column.width" :min-width="column.minWidth"
:align="column.align" :show-overflow-tooltip="true">
<template v-if="column.slotName" #default="scope">
<slot v-if="column.slotName" :name="column.slotName" :row="scope.row" :column="column"
:$index="scope.$index">
{{ column.prop ? scope.row[column.prop] : '' }}
</slot>
</template>
</el-table-column>
</el-table>
</div>
</section>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
data: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => []
},
selectionMode: {
type: String,
default: 'multiple'
},
rowKey: {
type: [String, Function],
default: 'id'
},
selectionColumnWidth: {
type: Number,
default: 38
},
selectionColumnAlign: {
type: String,
default: 'center'
},
toolbarActions: {
type: Array,
default: () => [
{ key: 'sign', text: '批量签收', red: true },
{ key: 'export', text: '批量导出' },
{ key: 'analysis', text: '批量分析' },
{ key: 'count', text: '计算人数' }
]
},
tableHeight: {
type: [Number, String],
default: '600px'
},
loading: {
type: Boolean,
default: false
}
})
const height = ref()
watch(() => props.tableHeight, (newVal) => {
if (newVal) {
height.value = newVal
}
})
const emit = defineEmits(['selection-change', 'row-change'])
const tableRef = ref()
const onSelectionChange = (selection) => {
if (props.selectionMode === 'single' && selection.length > 1) {
const selectedRow = selection[selection.length - 1]
tableRef.value.clearSelection()
tableRef.value.toggleRowSelection(selectedRow, true)
emit('selection-change', [selectedRow])
emit('row-change', selectedRow)
return
}
emit('selection-change', selection)
emit('row-change', selection[0] || null)
}
</script>
<style scoped lang="scss">
.table-wrap {
margin-top: 10px;
background: #fff;
}
:deep(.el-table--fit) {
position: static;
// width: calc(100% - 20px) !important;
height: calc(100% - 100px);
}
.tool-bar {
height: 24px;
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
color: #1f56ab;
}
.tool-link {
cursor: pointer;
}
.tool-link.red {
color: #e51414;
}
.table-box {
border: 1px solid #b5ccf2;
overflow: hidden;
}
:deep(.warn-data-table) {
width: 100%;
}
:deep(.warn-data-table .el-table__inner-wrapper::before) {
display: none;
}
:deep(.warn-data-table .el-table__header-wrapper th.el-table__cell) {
background: #16263e !important;
color: #fff !important;
border-color: #b5ccf2;
padding:0;
}
:deep(.warn-data-table .el-table__header-wrapper th.el-table__cell .cell) {
text-align: center;
overflow: visible;
white-space: normal;
text-overflow: clip;
word-break: break-word;
}
:deep(.warn-data-table .el-table__body-wrapper td.el-table__cell) {
border-color: #b5ccf2;
padding: 3px 0;
}
:deep(.warn-data-table .el-table__cell) {
font-size: 13px;
color: #0f223f;
}
:deep(.warn-data-table .el-table__cell .cell) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:deep(.warn-data-table.el-table--border::after),
:deep(.warn-data-table.el-table--group::after),
:deep(.warn-data-table::before) {
background-color: #b5ccf2;
}
</style>

139
src/views/backOfficeSystem/ces/index.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="ces-page">
<QueryFormPanel :fields="queryFields" @search="handleSearch" />
<WarnDataTable :data="tableData" :columns="columns" :selection-mode="selectionMode" :loading="loading">
<template #status="{ row }">
<span class="status" :class="row.statusClass">{{ row.status }}</span>
</template>
<template #level="{ row }">
<span class="level" :class="row.levelClass">{{ row.level }}</span>
</template>
<template #operation>
<span class="operation">签收 详情 指派 报错 关注</span>
</template>
<template #timeout="{ row }">
<span class="timeout">{{ row.timeout }}</span>
</template>
</WarnDataTable>
</div>
</template>
<script setup>
import { ref } from 'vue'
import QueryFormPanel from './components/QueryFormPanel.vue'
import WarnDataTable from './components/WarnDataTable.vue'
const selectionMode = ref('multiple')
const loading = ref(false)
const lastQueryParams = ref({})
const handleSearch = (params) => {
lastQueryParams.value = params
}
const queryFields = [
{ key: 'warnDate', label: '预警时间', type: 'input', placeholder: '年 / 月 / 日' },
{ key: 'warnLevel', label: '预警级别', type: 'select', options: ['全部', '红色', '橙色', '黄色', '蓝色'] },
{ key: 'receiveUnit', label: '接收单位', type: 'input' },
{ key: 'relatedWarn', label: '关联预警', type: 'checkbox' },
{ key: 'name', label: '姓名（精确、模糊）', type: 'input' },
{ key: 'gender', label: '性别', type: 'select', options: ['全部', '男', '女'] },
{ key: 'timeout', label: '超时状态', type: 'select', options: ['全部', '超时签收', '超时反馈'] },
{ key: 'personType', label: '人员类别', type: 'select', options: ['全部', '刑事前科类', '在逃人员', '重点关注'] },
{ key: 'focus', label: '重点关注', type: 'checkbox' },
{ key: 'secondDispatch', label: '二次指派', type: 'checkbox' },
{ key: 'idCard', label: '身份证号码（精确、模糊）', type: 'input' },
{ key: 'age', label: '年龄', type: 'input' },
{ key: 'warnCount', label: '预警次数', type: 'input' },
{ key: 'personLevel', label: '人员级别', type: 'select', options: ['全部', '一级', '二级', '三级'] },
{ key: 'traceType', label: '轨迹类别', type: 'select', options: ['全部', '人校核查', '轨迹追踪'] },
{ key: 'activePlace', label: '活动发生地模糊查询', type: 'input' },
{ key: 'groupType', label: '人员组类模糊查询', type: 'input' }
]
const columns = [
{ type: 'index', label: '序号', width: 60, align: 'center' },
{ label: '预警状态', width: 86, align: 'center', slotName: 'status' },
{ prop: 'time', label: '预警时间', width: 150 },
{ prop: 'name', label: '人员姓名', width: 80 },
{ prop: 'idCard', label: '身份证号', width: 158 },
{ prop: 'gender', label: '性别', width: 56, align: 'center' },
{ prop: 'age', label: '年龄', width: 56, align: 'center' },
{ label: '预警级别', width: 88, align: 'center', slotName: 'level' },
{ prop: 'category', label: '人员类别', width: 108 },
{ prop: 'group', label: '人员组类', width: 92 },
{ prop: 'trace', label: '轨迹类别', width: 92 },
{ prop: 'place', label: '活动发生地', minWidth: 130 },
{ prop: 'unit', label: '接收单位', width: 100 },
{ prop: 'count', label: '预警次数', width: 80, align: 'center' },
{ label: '操作', width: 180, slotName: 'operation' },
{ label: '超时状态', width: 80, align: 'center', slotName: 'timeout' }
]
const tableData = [
{ id: 1, status: '未签收', statusClass: 'danger', time: '2026-03-10 14:23:05', name: '张三', idCard: '513701199606095613', gender: '男', age: 30, level: '蓝色', levelClass: 'blue', category: '刑事前科类', group: '盗窃案', trace: '人校核查', place: '波密县玉许检查站出口', unit: '波密县公安局', count: 13, timeout: '' },
{ id: 2, status: '已签收', statusClass: 'ok', time: '2026-03-10 13:15:30', name: '曾海峰', idCard: '513701199606095613', gender: '男', age: 31, level: '红色', levelClass: 'red', category: '刑事前科类', group: '盗窃案', trace: '人校核查', place: '波密县玉许检查站', unit: '波密县公安局', count: 14, timeout: '超时签收' },
{ id: 3, status: '已签收', statusClass: 'ok', time: '2026-03-10 12:08:45', name: '曾海峰', idCard: '513701199606095613', gender: '男', age: 32, level: '红色', levelClass: 'red', category: '刑事前科类', group: '盗窃案', trace: '人校核查', place: '波密县玉许检查站', unit: '波密县公安局', count: 15, timeout: '' },
{ id: 4, status: '已反馈', statusClass: 'ok', time: '2026-03-10 11:42:18', name: '曾海峰', idCard: '513701199606095613', gender: '男', age: 33, level: '红色', levelClass: 'red', category: '刑事前科类', group: '盗窃案', trace: '人校核查', place: '波密县玉许检查站', unit: '波密县公安局', count: 16, timeout: '' },
{ id: 5, status: '未签收', statusClass: 'danger', time: '2026-03-09 16:30:22', name: '李明', idCard: '510105199203156789', gender: '男', age: 34, level: '橙色', levelClass: 'orange', category: '刑事前科类', group: '诈骗案', trace: '轨迹追踪', place: '成都市武侯区人民南路', unit: '武侯区公安局', count: 8, timeout: '超时签收' },
{ id: 6, status: '已签收', statusClass: 'ok', time: '2026-03-09 15:20:11', name: '王丽', idCard: '320106198807234561', gender: '女', age: 38, level: '黄色', levelClass: 'yellow', category: '重点关注', group: '涉毒人员', trace: '人校核查', place: '南京市鼓楼区中央路', unit: '鼓楼区公安局', count: 5, timeout: '' },
{ id: 7, status: '未签收', statusClass: 'danger', time: '2026-03-09 10:05:33', name: '赵强', idCard: '440101199505189012', gender: '男', age: 31, level: '红色', levelClass: 'red', category: '在逃人员', group: '抢劫案', trace: '轨迹追踪', place: '广州市荔湾区芳村大道', unit: '荔湾区公安局', count: 22, timeout: '超时签收' },
{ id: 8, status: '已反馈', statusClass: 'ok', time: '2026-03-08 22:18:44', name: '陈静', idCard: '350102199108267890', gender: '女', age: 35, level: '蓝色', levelClass: 'blue', category: '刑事前科类', group: '盗窃案', trace: '人校核查', place: '福州市鼓楼区东街口', unit: '鼓楼区公安局', count: 3, timeout: '' },
{ id: 9, status: '已签收', statusClass: 'ok', time: '2026-03-08 18:45:09', name: '孙伟', idCard: '210102199307123456', gender: '男', age: 33, level: '橙色', levelClass: 'orange', category: '重点关注', group: '逃犯人员', trace: '轨迹追踪', place: '沈阳市和平区太原街', unit: '和平区公安局', count: 11, timeout: '' },
{ id: 10, status: '未签收', statusClass: 'danger', time: '2026-03-08 09:30:56', name: '周芳', idCard: '420106199612085678', gender: '女', age: 30, level: '黄色', levelClass: 'yellow', category: '刑事前科类', group: '故意伤害', trace: '人校核查', place: '武汉市武昌区中南路', unit: '武昌区公安局', count: 7, timeout: '' }
]
</script>
<style scoped lang="scss">
.ces-page {
width: 100%;
padding: 8px;
box-sizing: border-box;
background: #fff;
}
.status {
color: #0f5bbd;
}
.status.danger {
color: #ff2424;
}
.status.ok {
color: #1d72e8;
}
.level {
display: inline-block;
min-width: 42px;
line-height: 1.2;
color: #fff;
font-weight: 700;
text-align: center;
padding: 2px 6px;
}
.level.red {
background: #e11212;
}
.level.orange {
background: #f39a14;
}
.level.yellow {
background: #d9bb17;
}
.level.blue {
background: #1b76eb;
}
.operation {
color: #1b59bf;
}
.timeout {
color: #ff1f1f;
text-align: center;
}
</style>