This commit is contained in:
lcw
2025-12-17 16:28:08 +08:00
21 changed files with 1074 additions and 299 deletions

View File

@ -10,6 +10,7 @@
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
<el-button type="primary" @click="exportExl">导出</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
@ -19,16 +20,22 @@
<!-- 表格 -->
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:expand="true" @chooseData="handleChooseData">
<template #xwcs="{ row }">
<span style="color: #0072ff;" @click="handleClick(row)">{{ row.xwcs }}</span>
</template>
<template #bqYs="{ row }">
<template #bqys="{ row }">
<DictTag :value="row.bqys" :tag="false" :color="bqYs(row.bqys)" :options="D_GS_SSYJ" />
</template>
<template #czzt="{ row }">
<DictTag :value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
</template>
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :row="props" :dict="dict" />
</div>
</template>
<template #controls="{ row }">
<el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
<el-link type="primary" @click="showDetail(row)">转合成</el-link>
@ -64,6 +71,7 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Searchs from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Items from "./item/items.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import HolographicArchive from '@/views/home/components/holographicArchive.vue'
import { tbGsxtBqglSelectList } from '@/api/zdr'
@ -74,10 +82,21 @@ import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/ce
import { reactive, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from "vue";
import AddFrom from './components/addFrom.vue'
import { holographicProfileJump } from "@/utils/tools.js"
import { getMultiDictVal } from "@/utils/dict.js"
import { exportExlByObj } from "@/utils/exportExcel.js"
const { proxy } = getCurrentInstance();
const { D_GS_SSYJ, D_GSXT_YJXX_CZZT } = proxy.$dict("D_GS_SSYJ", "D_GSXT_YJXX_CZZT"); //获取字典数据
// 字典数据集合
const dict = ref({
D_GS_SSYJ,
D_GSXT_YJXX_CZZT
})
const searchBox = ref(); //搜索框
/** 选中项 */
const selectRows = ref([])
const bqLbData = ref({
bqXl: []
})
@ -100,7 +119,7 @@ const pageData = reactive({
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
showSelectType: "checkBox",
loading: false,
haveControls: true
},
@ -118,7 +137,7 @@ const pageData = reactive({
{ label: "行为子类", prop: "xwzlmc", showOverflowTooltip: true },
{ label: "行为描述", prop: "xwms", showOverflowTooltip: true },
{ label: "行为次数", prop: "xwcs", showSolt: true },
{ label: "行为颜色", prop: "bqYs", showSolt: true },
{ label: "行为颜色", prop: "bqys", showSolt: true },
{ label: "行为分值", prop: "xwfz", },
{ label: "处置状态", prop: "czzt", showSolt: true },
{ label: "所属县局", prop: "ssbm" },
@ -286,6 +305,39 @@ const tabHeightFn = () => {
tabHeightFn();
};
};
/** 触发选中 */
const handleChooseData = (val) => {
selectRows.value = val
}
const exportExl = () => {
const titleObj = {
xm: "姓名",
sfzh: "身份证号",
dh: "电话",
xldlmc: "行为大类",
xwzlmc: "行为子类",
xwms: "行为描述",
xwcs: "行为次数",
bqys_cname: "行为颜色",
xwfz: "行为分值",
czzt_cname: "处置状态",
ssbm: "所属县局",
}
/** 导出【选中】的数据 (没有就全部)*/
const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
const data = needArr.map(item => {
return {
...item,
bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
}
})
exportExlByObj(titleObj, data, '行为预警')
}
</script>
<style>

View File

@ -0,0 +1,106 @@
<template>
<div class="warning-item">
<div class="second-row">
<div class="info-item">预警人姓名<span>{{ row.xm }}</span></div>
<div class="info-item">身份证号<span>{{ row.sfzh }}</span></div>
<div class="info-item">电话<span>{{ row.dh }}</span></div>
</div>
<div class="second-row">
<div class="info-item">行为大类<span>{{ row.xldlmc }}</span></div>
<div class="info-item">行为子类<span>{{ row.xwzlmc }}</span></div>
<div class="info-item">行为次数<span>{{ row.xwcs }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
标签颜色
<DictTag :value="row.bqys" :tag="false" :color="bqYs(row.bqys)"
:options="Array.isArray(props.dict.D_GS_SSYJ) ? props.dict.D_GS_SSYJ : []" />
</div>
<div class=" info-item">预警时间<span>{{ row.yjsj }}</span>
</div>
<div class="info-item">行为分值<span>{{ row.xwfz }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
处置状态
<DictTag v-model:value="row.czzt"
:options="Array.isArray(props.dict.D_GSXT_YJXX_CZZT) ? props.dict.D_GSXT_YJXX_CZZT : []" />
</div>
<div class="info-item">所属部门<span>{{ row.ssbm }}</span></div>
<div class="info-item">所属县局<span>{{ row.ssxgaj }}</span></div>
</div>
<div class="second-row">
<div class="info-item">所属市局<span>{{ row.sssgaj }}</span></div>
<div class="info-item">接警员姓名<span>{{ row.jjyxm }}</span></div>
</div>
<div class="second-row">
<div class="info-item full-width">行为描述<span>{{ row.xwms }}</span></div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
/** 表格行数据 */
row: {
type: Object,
default: () => ({})
},
dict: {
type: Object,
default: () => ({
D_GS_SSYJ: [],
D_GSXT_YJXX_CZZT: []
})
},
})
const bqYs = (val) => {
if (val == '01') { // 红
return '#ff0202'
} else if (val == '02') { // 橙
return '#ff8c00'
} else if (val == '03') { // 黄
return '#c2c203' // 原亮黄色ffff00
} else if (val == '04') { // 蓝
return '#0000ff'
}
}
</script>
<style lang="scss" scoped>
.warning-item {
width: 100%;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background-color: #fafafa;
}
.second-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
}
.info-item {
flex: 0 0 calc(33.33% - 20px);
box-sizing: border-box;
display: flex;
padding: 5px 0;
color: #333;
span {
font-weight: 500;
color: #606266;
}
}
// 全宽字段
.full-width {
flex: 0 0 100% !important;
}
</style>

View File

@ -10,6 +10,7 @@
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
<el-button type="primary" @click="exportExl">导出</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
@ -17,9 +18,10 @@
<Searchs :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Searchs>
</div>
<!-- 表格 -->
<div class="tabBox" :style="{height:(pageData.tableHeight + 40)+'px'}">
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:expand="true" @chooseData="handleChooseData">
<template #sfcs="{ row }">
<span style="color: #0072ff;" @click="handleClick(row)">{{ row.sfcs }}</span>
</template>
@ -29,6 +31,11 @@
<template #czzt="{ row }">
<DictTag :value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
</template>
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :row="props || {}" :dict="dict" />
</div>
</template>
<template #controls="{ row }">
<el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
<el-link type="primary" @click="showDetail(row)">转合成</el-link>
@ -60,19 +67,29 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Searchs from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Items from "./item/items.vue";
import { tbYjxxGetZbtj, tbGsxtBqzhSelectList } from '@/api/yj.js'
import HolographicArchive from '@/views/home/components/holographicArchive.vue'
import Information from "@/views/home/model/information.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import AddFrom from "./components/addFrom.vue";
import { reactive, ref, onMounted, getCurrentInstance, watch,nextTick } from "vue";
import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import Detail from './components/detail.vue'
import { exportExlByObj } from "@/utils/exportExcel.js"
import { getMultiDictVal } from "@/utils/dict.js"
import emitter from "@/utils/eventBus.js";
const searchBox = ref();
const { proxy } = getCurrentInstance();
const { D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB } = proxy.$dict("D_GSXT_YJXX_CZZT","D_GS_SSYJ","D_BZ_YJJB");
const { D_GSXT_YJXX_CZZT, D_GS_SSYJ, D_BZ_YJJB } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ", "D_BZ_YJJB");
// 字典数据集合
const dict = ref({
D_GS_SSYJ,
D_GSXT_YJXX_CZZT
})
import { holographicProfileJump } from "@/utils/tools.js"
// 搜索配置
@ -184,6 +201,8 @@ const handleClick = (row) => {
detailRef.value.init(row)
}
const assessShow = ref(false)
/** 选中项 */
const selectRows = ref([])
const dataList = ref()
const pushAssess = (val) => {
return holographicProfileJump(val?.sfzh) // 全息档案跳转
@ -255,10 +274,43 @@ const tabHeightFn = () => {
} else {
pageData.tableHeight = window.innerHeight - 250;
}
window.onresize = function () {
window.onresize = function() {
tabHeightFn();
};
};
const handleChooseData = (val) => {
selectRows.value = val
}
const exportExl = () => {
const titleObj = {
xm: "姓名",
sfzh: "身份证号",
dh: "电话",
sfdlmc: "组合大类",
sfzlmc: "组合小类",
sfcs: "组合次数",
bqys_cname: "标签颜色",
yjsj: "预警时间",
sffz: "预警分值",
czzt_cname: "处置状态",
ssbm: "所属县局",
}
/** 导出【选中】的数据 (没有就全部)*/
const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
const data = needArr.map(item => {
return {
...item,
bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
}
})
exportExlByObj(titleObj, data, '组合预警')
}
</script>
<style>

View File

@ -0,0 +1,74 @@
<template>
<div class="warning-item">
<div class="second-row">
<div class="info-item">姓名<span>{{ row.xm }}</span></div>
<div class="info-item">身份证号<span>{{ row.sfzh }}</span></div>
<div class="info-item">电话<span>{{ row.dh }}</span></div>
</div>
<div class="second-row">
<div class="info-item">组合大类<span>{{ row.sfdlmc }}</span></div>
<div class="info-item">组合小类<span>{{ row.sfzlmc }}</span></div>
<div class="info-item">组合次数<span>{{ row.sfcs }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
标签颜色<DictTag v-model:value="row.bqys" :options="props.dict.D_GS_SSYJ" />
</div>
<div class="info-item">预警时间<span>{{ row.yjsj }}</span></div>
<div class="info-item">预警分值<span>{{ row.sffz }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
处置状态<DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
</div>
<div class="info-item">所属县局<span>{{ row.ssbm }}</span></div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
/** 表格行数据 */
row: {
type: Object,
default: () => ({})
},
dict: {
type: Object,
default: () => ({
D_GS_SSYJ: [],
D_GSXT_YJXX_CZZT: []
})
},
})
</script>
<style lang="scss" scoped>
.warning-item {
width: 100%;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background-color: #fafafa;
}
.second-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
}
.info-item {
flex: 0 0 calc(33.33% - 20px);
box-sizing: border-box;
display: flex;
padding: 5px 0;
color: #333;
span {
font-weight: 500;
color: #606266;
}
}
</style>

View File

@ -5,15 +5,16 @@
<!-- <el-button>
<span style="vertical-align: middle">导出</span>
</el-button> -->
<el-button type="success" @click="openSearch">
<el-button type="success" @click="openSearch">
<Search style="width: 1em; height: 1em; margin-right: 8px" />
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
<el-button type="primary" @click="exportExl">导出</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox" v-if="search">
<div ref="searchBox" v-if="search">
<Searchs :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
<template #defaultSlot>
<el-select @change="gettbGsxtBqglSelectList" v-model="queryFrom.sfdl" placeholder="请选择身份类型"
@ -29,17 +30,23 @@
</Searchs>
</div>
<!-- 表格 -->
<div class="tabBox" :style="{height:(pageData.tableHeight + 40)+'px'}">
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth" expand
@chooseData="handleChooseData">
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :row="props || {}" :dict="dict" />
</div>
</template>
<template #sfcs="{ row }">
<span style="color: #0072ff;" @click="handleClick(row)">{{ row.sfcs }}</span>
</template>
<template #bqys="{ row }">
<DictTag :value="row.bqys" :tag="false" :color="bqYs(row.bqys)" :options="D_GS_SSYJ" />
</template>
<template #czzt="{ row }">
<DictTag :value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
<template #czzt="{ row }">
<DictTag :value="row.czzt" :options="D_GSXT_YJXX_CZZT" />
</template>
<template #controls="{ row }">
<el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
@ -64,7 +71,7 @@
<SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
:tacitly="tacitly" />
</Information>
<AddFrom ref="addModelRef" :dict="{D_GSXT_YJXX_CZZT, D_BZ_YJJB,D_GS_SSYJ}"/>
<AddFrom ref="addModelRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_GS_SSYJ }" />
</template>
<script setup>
@ -77,7 +84,7 @@ import Information from "@/views/home/model/information.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import AddFrom from "./components/addFrom.vue";
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import { reactive, ref, onMounted, getCurrentInstance,nextTick } from "vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { yjzxSfyjSelectList } from "@/api/yj.js";
import { tbGsxtBqglSelectList } from '@/api/zdr'
@ -85,10 +92,14 @@ import Detail from './components/detail.vue'
import { watch } from "vue";
import emitter from "@/utils/eventBus.js";
import { holographicProfileJump } from "@/utils/tools.js"
import Items from "./item/items.vue"
import { exportExlByObj } from "@/utils/exportExcel.js"
import { getMultiDictVal } from "@/utils/dict.js"
const { proxy } = getCurrentInstance();
const searchBox = ref();
const {D_GSXT_YJXX_CZZT,D_GS_SSYJ} = proxy.$dict("D_GSXT_YJXX_CZZT","D_GS_SSYJ")
const { D_GSXT_YJXX_CZZT, D_GS_SSYJ } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_GS_SSYJ")
const dict = reactive({ D_GSXT_YJXX_CZZT, D_GS_SSYJ })
// 搜索配置
const searchConfiger = ref([
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
@ -126,7 +137,7 @@ const pageData = reactive({
{ label: "预警时间", prop: "yjsj" },
{ label: "预警分值", prop: "sffz" },
{ label: "处置状态", prop: "czzt", showSolt: true },
{ label: "所属县局", prop: "ssbm" },
{ label: "所属县局", prop: "ssbm" },
]
});
@ -156,8 +167,16 @@ const getList = () => {
pageData.tableConfiger.loading = true;
// TODO: 替换为实际的身份预警API接口
yjzxSfyjSelectList(queryFrom.value).then((res) => {
pageData.tableData = res.records || [];
pageData.total = res.total || 0;
pageData.tableData = Array.isArray(res?.records) ? res.records : [];
pageData.tableData = pageData.tableData.map(item => {
return {
...item,
bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
}
})
pageData.total = res?.total || 0;
pageData.tableConfiger.loading = false;
}).catch(() => {
pageData.tableConfiger.loading = false;
@ -287,10 +306,42 @@ const tabHeightFn = () => {
} else {
pageData.tableHeight = window.innerHeight - 250;
}
window.onresize = function () {
window.onresize = function() {
tabHeightFn();
};
};
/** 选中项 */
const selectRows = ref([])
const handleChooseData = (val) => {
selectRows.value = val
}
const exportExl = () => {
const titleObj = {
xm: "姓名",
sfzh: "身份证号",
dh: "电话",
sfdlmc: "组合大类",
sfzlmc: "组合小类",
sfcs: "组合次数",
bqys_cname: "标签颜色",
yjsj: "预警时间",
sffz: "预警分值",
czzt_cname: "处置状态",
ssbm: "所属县局",
}
/** 导出【选中】的数据 (没有就全部)*/
const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
const data = needArr.map(item => {
return {
...item,
bqys_cname: getMultiDictVal(item.bqys, D_GS_SSYJ),
czzt_cname: getMultiDictVal(item.czzt, D_GSXT_YJXX_CZZT),
}
})
exportExlByObj(titleObj, data, '身份预警')
}
</script>
<style>

View File

@ -0,0 +1,83 @@
<template>
<div class="warning-item">
<div class="second-row">
<div class="info-item">预警人姓名<span>{{ row.xm }}</span></div>
<div class="info-item">身份证号<span>{{ row.sfzh }}</span></div>
<div class="info-item">电话<span>{{ row.dh }}</span></div>
</div>
<div class="second-row">
<div class="info-item">组合大类<span>{{ row.sfdlmc }}</span></div>
<div class="info-item">组合小类<span>{{ row.sfzlmc }}</span></div>
<div class="info-item">组合预警次数<span>{{ row.sfcs }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
标签颜色
<DictTag v-model:value="row.bqys" :options="props.dict.D_GS_SSYJ" />
</div>
<div class="info-item">预警时间<span>{{ row.yjsj }}</span></div>
<div class="info-item">预警分值<span>{{ row.sffz }}</span></div>
</div>
<div class="second-row">
<div class="info-item">
处置状态
<DictTag v-model:value="row.czzt" :options="props.dict.D_GSXT_YJXX_CZZT" />
</div>
<div class="info-item">所属部门<span>{{ row.ssbm }}</span></div>
<div class="info-item">所属县局<span>{{ row.ssxgaj }}</span></div>
</div>
<div class="second-row">
<div class="info-item">所属市局<span>{{ row.sssgaj }}</span></div>
<div class="info-item">接警员姓名<span>{{ row.jjyxm }}</span></div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
// import DictTag from '@/components/dictTag.vue'
const props = defineProps({
/** 表格行数据 */
row: {
type: Object,
default: () => ({})
},
dict: {
type: Object,
default: () => ({
D_GS_SSYJ: [],
D_GSXT_YJXX_CZZT: []
})
},
})
// console.log('row😃: ', props.row);
</script>
<style lang="scss" scoped>
.warning-item {
width: 100%;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background-color: #fafafa;
}
.second-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
}
.info-item {
flex: 0 0 calc(33.33% - 20px);
box-sizing: border-box;
display: flex;
padding: 5px 0;
color: #333;
span {
font-weight: 500;
color: #606266;
}
}
</style>

View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="预警布控">
<PageTitle title="布控预警">
<el-button>
<span style="vertical-align: middle">导出</span>
</el-button>
@ -13,24 +13,22 @@
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
>
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:expand="true">
<template #yjJb="{ row }">
<DictTag :value="row.yjJb" :tag="false" :color="bqYs(row.yjJb)" :options="D_BZ_YJJB" />
</template>
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :row="props || {}" :dict="dict" />
</div>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
</div>
</div>
</template>
@ -40,22 +38,33 @@ import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Search from "@/components/aboutTable/Search.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { qcckGet } from "@/api/qcckApi.js";
import Items from "./item/items.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { bqYs } from '@/utils/tools'
const { proxy } = getCurrentInstance();
const { D_BZ_YJJB, D_GS_ZDQT_YJLB, D_BZ_YJLX, D_GS_SSYJ, D_GSXT_YJXX_CZZT } = proxy.$dict("D_BZ_YJJB", "D_GS_ZDQT_YJLB", "D_BZ_YJLX", "D_GS_SSYJ", "D_GSXT_YJXX_CZZT"); //获取字典数据
// 字典数据集合
const dict = ref({
D_BZ_YJJB
})
const searchBox = ref();
// 搜索配置
const searchConfiger = ref([
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
{ label: "身份类型", prop: 'sflx', placeholder: "请选择身份类型", showType: "select", options: [
{ label: "重点人员", value: "1" },
{ label: "在逃人员", value: "2" },
{ label: "涉毒人员", value: "3" },
{ label: "涉人员", value: "4" }
]},
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
{
label: "身份类型", prop: 'sflx', placeholder: "请选择身份类型", showType: "select", options: [
{ label: "重点人员", value: "1" },
{ label: "在逃人员", value: "2" },
{ label: "涉人员", value: "3" },
{ label: "涉恐人员", value: "4" }
]
},
]);
const queryFrom = ref({});
@ -77,14 +86,17 @@ const pageData = reactive({
},
controlsWidth: 160,
tableColumn: [
{ label: "姓名", prop: "xm",},
{ label: "身份证号", prop: "sfzh", },
{ label: "电话", prop: "dh", },
{ label: "身份类型", prop: "sflx",},
{ label: "身份等级", prop: "sfdj",},
{ label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
{ label: "预警时间", prop: "yjsj",},
{ label: "处理状态", prop: "clzt",},
{ label: "预警标题", prop: "yjBt", },
{ label: "姓名", prop: "yjRyxm", },
{ label: "身份证号", prop: "yjRysfzh", },
{ label: "电话", prop: "yjRysjh", },
// { label: "身份类型", prop: "sflx",},
// { label: "身份等级", prop: "sfdj",},
{ label: "预警内容", prop: "yjNr", showOverflowTooltip: true },
{ label: "预警日期", prop: "yjFsrq", },
{ label: "预警时间", prop: "yjFssj", },
{ label: "预警标签详情", prop: "yjbqmc", },
{ label: "预警级别", prop: "yjJb", showSolt: true, showOverflowTooltip: true },
]
});
@ -94,7 +106,7 @@ onMounted(() => {
});
const onSearch = (val) => {
queryFrom.value = {...val};
queryFrom.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
};
@ -112,7 +124,8 @@ const changeSize = (val) => {
const getList = () => {
pageData.tableConfiger.loading = true;
// TODO: 替换为实际的身份预警API接口
qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
// qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
qcckPost(queryFrom.value, '/mosty-gsxt/tbYjxx/getPageList').then((res) => {
pageData.tableData = res.records || [];
pageData.total = res.total || 0;
pageData.tableConfiger.loading = false;
@ -124,7 +137,7 @@ const getList = () => {
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
window.onresize = function () {
window.onresize = function() {
tabHeightFn();
};
};

View File

@ -0,0 +1,70 @@
<template>
<div class="warning-item">
<div class="second-row">
<div class="info-item">预警标题<span>{{ row.yjBt }}</span></div>
<div class="info-item">姓名<span>{{ row.yjRyxm }}</span></div>
<div class="info-item">身份证号<span>{{ row.yjRysfzh }}</span></div>
</div>
<div class="second-row">
<div class="info-item">电话<span>{{ row.yjRysjh }}</span></div>
<div class="info-item">预警内容<span>{{ row.yjNr }}</span></div>
<div class="info-item">预警日期<span>{{ row.yjFsrq }}</span></div>
</div>
<div class="second-row">
<div class="info-item">预警时间<span>{{ row.yjFssj }}</span></div>
<div class="info-item">预警标签详情<span>{{ row.yjbqmc }}</span></div>
<div class="info-item">
预警级别
<DictTag :value="row.yjJb" :tag="false" :color="bqYs(row.yjJb)" :options="Array.isArray(props.dict.D_BZ_YJJB) ? props.dict.D_BZ_YJJB : []" />
</div>
</div>
</div>
</template>
<script setup>
import { bqYs } from '@/utils/tools'
const props = defineProps({
/** 表格行数据 */
row: {
type: Object,
default: () => ({})
},
dict: {
type: Object,
default: () => ({
D_BZ_YJJB: []
})
},
})
</script>
<style lang="scss" scoped>
.warning-item {
width: 100%;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
background-color: #fafafa;
}
.second-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
}
.info-item {
flex: 0 0 calc(33.33% - 20px);
box-sizing: border-box;
display: flex;
padding: 5px 0;
color: #333;
span {
font-weight: 500;
color: #606266;
}
}
</style>

View File

@ -4,7 +4,7 @@
<div class="tabBox" :style="{ height: !search ? maxHeight + 200 + 'px' : (maxHeight + 150) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight + 'px'"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:expand="true">
:expand="true" @chooseData="handleChooseData">
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :data="props" :dict="dict" />
@ -85,6 +85,10 @@ import { holographicProfileJump } from "@/utils/tools.js"
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { exportExlByObj } from "@/utils/exportExcel.js"
import { getMultiDictVal } from "@/utils/dict.js"
const { proxy } = getCurrentInstance();
const props = defineProps({
dict: {
@ -97,6 +101,10 @@ const props = defineProps({
}, search: {
type: Boolean,
default: false
},
excelTitle: {
type: String,
default: '预警信息'
}
});
const pageData = reactive({
@ -104,7 +112,7 @@ const pageData = reactive({
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
showSelectType: "checkBox",
loading: false,
haveControls: true
},
@ -131,8 +139,8 @@ const pageData = reactive({
});
/** 选中项 */
const selectRows = ref([])
@ -243,7 +251,49 @@ const getRowClassName = (row) => {
// tabHeightFn();
// };
// };
const handleChooseData = (val) => {
selectRows.value = val
}
const exportExl = () => {
const titleObj = {
czzt_cname: "处置状态",
yjSj: "预警时间",
yjRyxm: "姓名",
nl_cname: "年龄", // IdCard(row.yjRysfzh, 3)
yjLylx: "数据来源",
xb_cname: "性别",
yjJb_cname: "预警级别",
xsd_cname: "相似度",
yjDz: "预警地点",
yjCs: "预警次数",
yjRysjh: "布控手机号",
yjClcph: "布控车牌号",
yjRysfzh: "身份证",
}
/** 导出【选中】的数据 (没有就全部)*/
const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
const data = needArr.map(item => {
return {
...item,
nl_cname: IdCard(item.yjRysfzh, 3),
xb_cname: IdCard(item.yjRysfzh, 2),
xsd_cname: (item.xsd > 0 ? item.xsd : 0) + '%',
czzt_cname: getMultiDictVal(item.czzt, props.dict.D_GSXT_YJXX_CZZT),
yjJb_cname: getMultiDictVal(item.yjJb, props.dict.D_BZ_YJJB),
}
})
exportExlByObj(titleObj, data, props.excelTitle || '人像预警.xlsx')
}
defineExpose({
exportExl,
getList
})
</script>

View File

@ -8,6 +8,7 @@
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
<el-button type="primary" @click="exportExl">导出</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
@ -32,9 +33,9 @@
</div>
<!-- 表格 -->
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
<!-- <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div> -->
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 160) : (pageData.tableHeight - 110)"
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" excelTitle="人像预警" />
</div>
</div>
<el-dialog v-model="showDc" title="导出预警" width="80%">
@ -99,6 +100,8 @@ import AddFromz from './components/addFrom.vue';
import FileSaver from "file-saver";
import emitter from "@/utils/eventBus.js";
import * as XLSX from "xlsx";
const { proxy } = getCurrentInstance();
const { D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT } = proxy.$dict("D_GSXT_YJXX_CZZT", "D_BZ_YJJB", "D_BZ_YJLYXT")
const searchBox = ref(); //搜索框
@ -131,6 +134,8 @@ const shortcuts = [
},
},
]
const pageData = reactive({
/** 表格高度 */
tableHeight: 600,
@ -344,6 +349,10 @@ const handleExport = () => {
console.error('导出Excel失败:', e);
}
}
const exportExl = () => {
localWarningRef.value && localWarningRef.value.exportExl()
};
</script>
<style lang="scss" scoped>
::v-deep .el-table--fit {

View File

@ -1,13 +1,13 @@
<template>
<div>
<!-- 表格 -->
<div class="tabBox" :style="{height:!search?maxHeight+200+'px':(maxHeight+150)+'px'}">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight+'px'"
<div class="tabBox" :style="{ height: !search ? maxHeight + 200 + 'px' : (maxHeight + 150) + 'px' }">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="maxHeight + 'px'"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:expand="true" >
:expand="true" @chooseData="handleChooseData">
<template #expand="{ props }">
<div class="expand-content" style="max-width: 100%">
<Items :data="props" :dict="dict" />
<Items :data="props" :dict="dict" />
</div>
</template>
<template #yjTp="{ row }">
@ -54,7 +54,7 @@
<el-button type="success" @click="showFeedback(item, '反馈')" v-if="item.czzt == '02'">反馈</el-button>
<el-button type="success" @click="showFeedback(item, '查看反馈')" v-if="item.czzt == '03'">查看反馈</el-button> -->
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight+100" :pageConfiger="{
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="maxHeight + 100" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
@ -82,9 +82,12 @@ import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import FkDialog from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import emitter from "@/utils/eventBus.js";
import { holographicProfileJump } from "@/utils/tools.js"
import { exportExlByObj } from "@/utils/exportExcel.js"
import { getMultiDictVal } from "@/utils/dict.js"
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
dict: {
@ -104,7 +107,7 @@ const pageData = reactive({
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
showSelectType: "checkBox",
loading: false,
haveControls: true
},
@ -116,13 +119,13 @@ const pageData = reactive({
}, //分页
controlsWidth: 300, //操作栏宽度
tableColumn: [
{ label: "预警图片", prop: "yjTp", showSolt: true,width: 100 },
{ label: "预警图片", prop: "yjTp", showSolt: true, width: 100 },
{ label: "处置状态", prop: "czzt", showSolt: true },
{ label: "预警时间", prop: "yjSj", showOverflowTooltip: true },
{ label: "姓名", prop: "yjRyxm" },
{ label: "年龄", prop: "nl", showSolt: true,width: 80 },
{ label: "年龄", prop: "nl", showSolt: true, width: 80 },
{ label: "数据来源", prop: "yjLylx", showOverflowTooltip: true },
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
{ label: "身份证", prop: "yjRysfzh", showOverflowTooltip: true },
// { label: "预警级别", prop: "yjJb", showSolt: true },
// { label: "相似度", prop: "xsd", showSolt: true },
{ label: "布控车牌号", prop: "yjClcph", showOverflowTooltip: true },
@ -131,7 +134,8 @@ const pageData = reactive({
});
/** 选中项 */
const selectRows = ref([])
@ -243,8 +247,48 @@ const getRowClassName = (row) => {
// tabHeightFn();
// };
// };
const handleChooseData = (val) => {
selectRows.value = val
}
const exportExl = () => {
const titleObj = {
czzt_cname: "处置状态",
yjSj: "预警时间",
yjRyxm: "姓名",
nl_cname: "年龄", // IdCard(row.yjRysfzh, 3)
yjLylx: "数据来源",
xb_cname: "性别",
yjJb_cname: "预警级别",
xsd_cname: "相似度",
yjDz: "预警地点",
yjCs: "预警次数",
yjRysjh: "布控手机号",
yjClcph: "布控车牌号",
yjRysfzh: "身份证",
}
/** 导出【选中】的数据 (没有就全部)*/
const needArr = selectRows.value?.length > 0 ? selectRows.value : pageData.tableData
const data = needArr.map(item => {
return {
...item,
nl_cname: IdCard(item.yjRysfzh, 3),
xb_cname: IdCard(item.yjRysfzh, 2),
xsd_cname: (item.xsd > 0 ? item.xsd : 0) + '%',
czzt_cname: getMultiDictVal(item.czzt, props.dict.D_GSXT_YJXX_CZZT),
yjJb_cname: getMultiDictVal(item.yjJb, props.dict.D_BZ_YJJB),
}
})
exportExlByObj(titleObj, data, props.excelTitle || '预警.xlsx')
}
defineExpose({
getList
getList,
exportExl
})
</script>
@ -252,6 +296,7 @@ defineExpose({
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
/* 预警级别行样式 */
.warning-level-01 {
background-color: rgba(255, 2, 2, 0.1) !important;
@ -260,6 +305,7 @@ defineExpose({
.warning-level-01:hover {
background-color: rgba(255, 2, 2, 0.15) !important;
}
.warning-level-02 {
background-color: rgba(255, 140, 0, 0.1) !important;
}
@ -267,6 +313,7 @@ defineExpose({
.warning-level-02:hover {
background-color: rgba(255, 140, 0, 0.15) !important;
}
.warning-level-03 {
background-color: rgba(255, 210, 8, 0.1) !important;
}
@ -274,6 +321,7 @@ defineExpose({
.warning-level-03:hover {
background-color: rgba(255, 210, 8, 0.15) !important;
}
.warning-level-04 {
background-color: rgba(0, 0, 255, 0.1) !important;
}
@ -281,6 +329,7 @@ defineExpose({
.warning-level-04:hover {
background-color: rgba(0, 0, 255, 0.15) !important;
}
/* 确保行样式应用到所有单元格 */
.warning-level-01 td,
.warning-level-02 td,

View File

@ -8,6 +8,7 @@
<span style="vertical-align: middle" v-if="!search">搜索</span>
<span style="vertical-align: middle" v-else>关闭搜索</span>
</el-button>
<el-button type="primary" @click="exportExl">导出</el-button>
</PageTitle>
</div>
<!-- 搜索 -->
@ -29,9 +30,9 @@
</div>
<!-- 表格 -->
<div class="tabBox" :style="{ height: (pageData.tableHeight + 40) + 'px', paddingTop: '10px' }">
<div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div>
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 200) : (pageData.tableHeight - 150)"
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" />
<!-- <div style="padding:0 10px;"> <el-button type="primary" @click="exportExcel">导出</el-button></div> -->
<LocalWarning :maxHeight="search ? (pageData.tableHeight - 160) : (pageData.tableHeight - 110)"
ref="localWarningRef" :dict="{ D_GSXT_YJXX_CZZT, D_BZ_YJJB, D_BZ_YJLYXT }" :search="search" excelTitle="车辆预警" />
</div>
</div>
<el-dialog v-model="showDc" title="导出预警" width="80%">
@ -129,7 +130,7 @@ const shortcuts = [
},
]
const pageData = reactive({
/** 表格高度 */
/** 表格高度 */
tableHeight: 600,
tableData: [], //表格数据
keyCount: 0,
@ -341,6 +342,11 @@ const handleExport = () => {
console.error('导出Excel失败:', e);
}
}
const exportExl = () => {
localWarningRef.value && localWarningRef.value.exportExl()
};
</script>
<style lang="scss" scoped>
::v-deep .el-table--fit {