370 lines
11 KiB
Vue
370 lines
11 KiB
Vue
<template>
|
||
<div class="statistical-analysis">
|
||
<div class="left">
|
||
<div style="background:#fff" class="pl10 pr10 pb10 pt10">
|
||
<div class="title">图像信息</div>
|
||
<MyTable
|
||
:tableData="pageData.tableData"
|
||
:tableColumn="pageData.tableColumn"
|
||
:tableHeight="pageData.tableHeight"
|
||
:key="pageData.keyCount"
|
||
:tableConfiger="pageData.tableConfiger"
|
||
:controlsWidth="pageData.controlsWidth"
|
||
@chooseData="chooseData"
|
||
>
|
||
<template #cjhx>
|
||
<img width="60" height="60" :src="pro" alt="" />
|
||
</template>
|
||
<template #ytp>
|
||
<img width="60" height="60" :src="pro" alt="" />
|
||
</template>
|
||
<template #controls="{ row }">
|
||
<el-link size="small" type="success" @click="addEdit('edit', row)" >研判确认</el-link >
|
||
<el-link size="small" type="primary">查看</el-link>
|
||
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
|
||
</template>
|
||
</MyTable>
|
||
</div>
|
||
<div style="background:#fff" class="mt10 pl10 pr10 pb10 pt10" >
|
||
<div class="flex align-center">
|
||
<div class="title mr20">人员信息</div>
|
||
<div class="mb13">
|
||
<el-button size="small" v-for="it in btnsList" :key="it" @click="chooseType(it)"> {{ it }} </el-button>
|
||
</div>
|
||
</div>
|
||
<MyTable
|
||
:tableData="pageData.tableDataPeople"
|
||
:tableColumn="pageData.tableColumnPeople"
|
||
:tableHeight="pageData.tableHeight1"
|
||
:key="pageData.keyCount"
|
||
:tableConfiger="pageData.tableConfiger1"
|
||
:controlsWidth="pageData.controlsWidth"
|
||
@chooseData="chooseDataBottom"
|
||
>
|
||
<template #ryXm="{ row }">
|
||
<div class="one_text_detail">姓名：{{ row.ryXm }} ；</div>
|
||
<div class="one_text_detail">电话：{{ row.rySjhm }} ；</div>
|
||
<div class="one_text_detail">身份证：{{ row.rySfzh }} </div>
|
||
</template>
|
||
<template #fxDj="{ row }">
|
||
<DictTag :tag="false" :value="row.fxDj" :options="D_GS_RQFJ_FXDJ"/>
|
||
</template>
|
||
<template #fxLb="{ row }">
|
||
<DictTag :tag="false" :value="row.fxLb" :options="D_GS_RQFJ_FXLB"/>
|
||
</template>
|
||
<template #czfs="{ row }">
|
||
<div>关注：<DictTag :tag="false" style="display: inline;" :value="row.sfGz" :options="D_BZ_SF" /> ；</div>
|
||
<div>布控人员：<DictTag :tag="false" style="display: inline;" :value="row.sfZbkry" :options="D_BZ_SF" /> ；</div>
|
||
<div>重点人员：<DictTag :tag="false" style="display: inline;" :value="row.sfZzdry" :options="D_BZ_SF" />；</div>
|
||
</template>
|
||
</MyTable>
|
||
<Pages
|
||
@changeNo="changeNo"
|
||
@changeSize="changeSize"
|
||
:tableHeight="pageData.tableHeight1"
|
||
:pageConfiger="{ ...pageData.pageConfiger, total: pageData.total }"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="title">轨迹信息</div>
|
||
<ul class="cntBox" v-loading="modelLoading">
|
||
<li class="step" v-for="(item, index) in stepList" :key="index">
|
||
<div style="color: #000;">{{ item.yjFssj }}</div>
|
||
<div class="desc">
|
||
<div class="one_text_detail mb5">事由：{{ item.yjNr }}</div>
|
||
<div class="one_text_detail mb5">数据来源：{{ item.yjGzymc }}</div>
|
||
<div class="one_text_detail">所在地址：{{ item.yjDz }}</div>
|
||
</div>
|
||
</li>
|
||
<MOSTY.Empty :show="!modelLoading && stepList.length <= 0"></MOSTY.Empty>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 弹窗 -->
|
||
<Model v-model="isShow" :type="chooselx" :chooseList="chooseList" :ids="ids" @change="getList" :dic="{D_BZ_SF,D_GS_ZDRFJ_SPZT}"></Model>
|
||
|
||
</template>
|
||
<script setup>
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import { ElMessage } from "element-plus";
|
||
import Model from "./model.vue";
|
||
import { qcckGet } from "@/api/qcckApi.js";
|
||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||
import Pages from "@/components/aboutTable/Pages.vue";
|
||
import { qcckPost } from "@/api/qcckApi.js";
|
||
import { el } from "element-plus/lib/locale/index.js";
|
||
const { proxy } = getCurrentInstance();
|
||
const {D_GS_ZDRFJ_SPZT,D_BZ_SF, D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } = proxy.$dict('D_GS_ZDRFJ_SPZT',"D_BZ_SF","D_GS_RQFJ_FXDJ","D_GS_RQFJ_FXLB"); //获取字典数据
|
||
const btnsList = reactive(['是否重点人','布控','是否关注','移交管控'])
|
||
const chooselx = ref('')
|
||
const isShow = ref(false)
|
||
const ids = ref([])
|
||
const chooseList = ref([])
|
||
const pageData = reactive({
|
||
tableData: [
|
||
{
|
||
tpzy: "GBJD01",
|
||
dwmc: "工布江达重点人",
|
||
zylyxz: "涉稳",
|
||
cjhx: "系统新增",
|
||
ytp: "低级",
|
||
rxxsd: "2025/05/05"
|
||
},
|
||
{
|
||
tpzy: "GBJD01",
|
||
dwmc: "工布江达重点人",
|
||
zylyxz: "涉稳",
|
||
cjhx: "系统新增",
|
||
ytp: "低级",
|
||
rxxsd: "2025/05/05"
|
||
},
|
||
{
|
||
tpzy: "GBJD01",
|
||
dwmc: "工布江达重点人",
|
||
zylyxz: "涉稳",
|
||
cjhx: "系统新增",
|
||
ytp: "低级",
|
||
rxxsd: "2025/05/05"
|
||
},
|
||
{
|
||
tpzy: "GBJD01",
|
||
dwmc: "工布江达重点人",
|
||
zylyxz: "涉稳",
|
||
cjhx: "系统新增",
|
||
ytp: "低级",
|
||
rxxsd: "2025/05/05"
|
||
},
|
||
{
|
||
tpzy: "GBJD01",
|
||
dwmc: "工布江达重点人",
|
||
zylyxz: "涉稳",
|
||
cjhx: "系统新增",
|
||
ytp: "低级",
|
||
rxxsd: "2025/05/05"
|
||
}
|
||
],
|
||
tableDataPeople: [],
|
||
keyCount: 0,
|
||
tableConfiger: {
|
||
rowHieght: 61,
|
||
showSelectType: "checkBox",
|
||
loading: false
|
||
},
|
||
tableConfiger1: {
|
||
rowHieght: 61,
|
||
showSelectType: "checkBox",
|
||
loading: false,
|
||
haveControls:false
|
||
},
|
||
total: 0,
|
||
pageConfiger: {
|
||
pageSize: 20,
|
||
pageCurrent: 1
|
||
},
|
||
controlsWidth: 220,
|
||
tableColumn: [
|
||
{ label: "图片资源", prop: "tpzy" },
|
||
{ label: "单位名称", prop: "dwmc" },
|
||
{ label: "资源来源详址", prop: "zylyxz" },
|
||
{ label: "采集画像", prop: "cjhx", showSolt: true },
|
||
{ label: "原图片", prop: "ytp", showSolt: true },
|
||
{ label: "人像相似度", prop: "rxxsd" }
|
||
],
|
||
tableColumnPeople: [
|
||
{ label: "姓名", prop: "ryXm",showOverflowTooltip:true ,showSolt: true},
|
||
{ label: "户籍地址", prop: "ryHjdz" ,showOverflowTooltip:true},
|
||
{ label: "护照号码", prop: "ryHzhm" ,showOverflowTooltip:true},
|
||
{ label: "现住地址", prop: "ryXzdz" ,showOverflowTooltip:true},
|
||
{ label: "附件照片", prop: "ryFjZp" ,showOverflowTooltip:true},
|
||
{ label: "管辖单位", prop: "gxDwDm" ,showOverflowTooltip:true},
|
||
{ label: "责任部门", prop: "ssbm",showOverflowTooltip:true},
|
||
{ label: "标签", prop: "fxjf",showOverflowTooltip:true},
|
||
{ label: "风险积分", prop: "fxjf",showOverflowTooltip:true},
|
||
{ label: "风险等级", prop: "fxDj",showOverflowTooltip:true, showSolt: true },
|
||
{ label: "风险类别", prop: "fxLb",showOverflowTooltip:true, showSolt: true },
|
||
{ label: "处置方式", prop: "czfs",showOverflowTooltip:true, showSolt: true },
|
||
]
|
||
});
|
||
const modelLoading = ref(false)
|
||
const stepList = ref([]);
|
||
|
||
|
||
const changeNo = (val) => {
|
||
pageData.pageConfiger.pageCurrent = val;
|
||
getList();
|
||
};
|
||
const changeSize = (val) => {
|
||
pageData.pageConfiger.pageSize = val;
|
||
getList();
|
||
};
|
||
|
||
|
||
//获取模型识别列表
|
||
const getList = () => {
|
||
let data = { ...pageData.pageConfiger };
|
||
qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
|
||
pageData.tableDataPeople = res.records || [];
|
||
pageData.total = res.total;
|
||
if(pageData.tableDataPeople.length > 0) chooseDataBottom(pageData.tableDataPeople[0])
|
||
})
|
||
};
|
||
|
||
// 表格高度计算
|
||
const tabHeightFn = () => {
|
||
pageData.tableHeight =( window.innerHeight - 280 ) / 2;
|
||
pageData.tableHeight1 =(( window.innerHeight - 280 ) / 2 )- 50;
|
||
window.onresize = function () {
|
||
tabHeightFn();
|
||
};
|
||
};
|
||
|
||
// 选择数据
|
||
const chooseDataBottom = (val) =>{
|
||
if(Array.isArray(val)) {
|
||
ids.value = val.map(item=>item.id);
|
||
chooseList.value = val;
|
||
}else{
|
||
if(!val.rySfzh) {
|
||
ElMessage.warning("该人员没有轨迹");
|
||
}else{
|
||
stepList.value = [];
|
||
modelLoading.value = true;
|
||
let params = { pageSize:1000, pageNum:1 ,yjRysfzh:val.rySfzh};
|
||
qcckPost(params,'/mosty-jmxf/tbYjxx/getPageList').then(res=>{
|
||
stepList.value = res.records || [];
|
||
modelLoading.value = false;
|
||
}).catch(()=>{
|
||
modelLoading.value = false;
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
const chooseType = (val)=>{
|
||
chooselx.value = val;
|
||
if(ids.value.length == 0) return ElMessage.warning("请选择对应的数据");
|
||
switch(val){
|
||
case '布控':
|
||
proxy.$confirm("确定要布控", "警告", {type: "warning"}).then(() => {
|
||
let params = { ids:ids.value, sfbk:'1'}
|
||
qcckPost(params,'/mosty-gsxt/tbGsxtRqfjRy/updateBySfbkpz').then(res=>{
|
||
ElMessage.success("布控成功");
|
||
getList()
|
||
})
|
||
}).catch(() => {});
|
||
break;
|
||
case '是否重点人':
|
||
case '是否关注':
|
||
case '移交管控':
|
||
isShow.value = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
onMounted(()=>{
|
||
tabHeightFn();
|
||
getList()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.statistical-analysis {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 10px 10px 0 10px ;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
color: #333;
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 78px;
|
||
height: 4px;
|
||
background: linear-gradient( 90deg, #3597f9c4 0%, rgba(53, 150, 249, 0) 100%);
|
||
border-radius: 4px 4px 4px 4px;
|
||
}
|
||
}
|
||
.left {
|
||
width: calc(100% - 410px);
|
||
height: 100%;
|
||
float: left;
|
||
}
|
||
.right {
|
||
width: 400px;
|
||
height: 100%;
|
||
padding: 10px 10px 0 10px;
|
||
margin-left: 10px;
|
||
float: right;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
.cntBox{
|
||
height: calc(100% - 60px);
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
.step {
|
||
padding-left: 20px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border-left: 3px dashed #0072ff;
|
||
margin-left: 10px;
|
||
&::before{
|
||
position: absolute;
|
||
content: '';
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #0072ff;
|
||
border-radius: 50%;
|
||
left: -12px;
|
||
top: 0;
|
||
}
|
||
.desc {
|
||
margin: 5px;
|
||
color: #929090;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-row {
|
||
display: flex;
|
||
|
||
.el-form-item {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.upload-group {
|
||
display: flex;
|
||
// gap: 20px;
|
||
|
||
.el-form-item {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.unit {
|
||
margin-left: 5px;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 36px !important;
|
||
line-height: 36px !important;
|
||
border-radius: 0;
|
||
color: #777575;
|
||
}
|
||
}
|
||
.el-form-item--default {
|
||
margin-bottom: 0px;
|
||
}
|
||
</style>
|