更新页面

This commit is contained in:
2025-07-05 12:03:00 +08:00
parent ea13f83283
commit 38e04e095c
69 changed files with 994 additions and 10597 deletions

View File

@ -1,469 +1,203 @@
<template>
<div class="intelligence-management">
<!-- 左边 -->
<div class="left-panel">
<div class="pl80">
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="线索库" name="one"></el-tab-pane>
<el-tab-pane label="人员库" name="two"></el-tab-pane>
</el-tabs>
</div>
<div class="search-box">
<el-input
v-model="searchQuery"
placeholder="请输入线索标题"
suffix-icon="Search"
/>
</div>
<div class="flex mt10 just-center">
<el-button size="small" type="primary">上报线索</el-button>
<el-button size="small" type="primary" @click="addEdit('add',null)">新增线索</el-button>
<el-button size="small" type="primary">查询</el-button>
<el-button size="small">重置</el-button>
</div>
<div class="flex flex-warp">
<span
style="color: #0386fb"
class="f12 ml10 mt4"
v-for="(it, idex) in list.leftCoutn"
:key="idex"
>{{ it.label }}({{ it.value }})</span
>
</div>
<div class="person-list">
<div v-for="(item, index) in personList" :key="index" class="clue-item">
<div class="clue-tag" v-if="item.tag">{{ item.tag }}</div>
<span class="clue-status">处置</span>
<div class="clue-content flex align-center">
<img class="mr10" src="@/assets/images/icon100.png" alt="">
<div class="clue-info">
<div class="clue-header">*****线索</div>
<div>编号{{ item.number }}</div>
<div>来源{{ item.source }}</div>
<div>涉及人员数量{{ item.personCount }}</div>
<div>指向地点{{ item.location }}</div>
</div>
</div>
</div>
</div>
<div>
<div class="titleBox">
<PageTitle title="人力情报信息采集流转">
<el-button type="primary" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">导出</span>
</el-button>
<el-button type="danger" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><Dete /></el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
</PageTitle>
</div>
<!-- 右边 -->
<div class="right-panel">
<div class="flex just-between align-center">
<h2 class="title" style="color: #333">xxxx线索详情</h2>
<el-button type="primary" size="small">收藏</el-button>
</div>
<div style="width: 100%">
<el-descriptions :column="2" border>
<el-descriptions-item :width="260" label="线索标题"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索编号"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="线索类型"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索来源"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="开始时间"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="截止时间"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="上报单位"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="指向地点"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="上报时间"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="处置状态"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="群体状态"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="群体名称"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="线索标签大类"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="线索标签细类"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="所属专题"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="市内外"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="是否涉及外地"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="具体部位"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="指向时间类型"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="指向时间备注"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="表现形式"
>*****线索</el-descriptions-item
>
<el-descriptions-item label="涉事类型"
>123213113212131312</el-descriptions-item
>
<el-descriptions-item label="获取手段"
>2020.04.12</el-descriptions-item
>
<el-descriptions-item label="线索备注"
>2020.04.19</el-descriptions-item
>
<el-descriptions-item label="线索内容" :span="2"
>张三身份证号:1232025在林某...</el-descriptions-item
>
</el-descriptions>
<el-descriptions :column="5" border>
<el-descriptions-item :width="260" label="附件"
>3.xls</el-descriptions-item
>
<el-descriptions-item label="涉及地">林芝</el-descriptions-item>
<el-descriptions-item label="申请人">林芝</el-descriptions-item>
<el-descriptions-item label="审核人">林芝</el-descriptions-item>
<el-descriptions-item label="审批人">林芝</el-descriptions-item>
</el-descriptions>
</div>
<div class="flex mt10 just-center">
<el-button size="large" type="primary">核查单</el-button>
<el-button size="large" type="primary">验收</el-button>
</div>
<div class="flex align-center">
<h2 class="title" style="color: #333">******线索关联人员信息</h2>
<span
style="color: #0386fb"
class="f12 ml10"
v-for="(it, idex) in list.countList"
:key="idex"
>{{ it.label }}({{ it.value }})</span
>
</div>
<div style="width: 100%">
<Search
:searchArr="searchConfiger"
@submit="onSearch"
:key="pageData.keyCount"
>
<el-button type="primary">指派</el-button>
<el-button type="primary">导出</el-button>
</Search>
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
>
<!-- 操作 -->
<template #controls="{ row }">
<el-button size="small">查看档案</el-button>
<el-button size="small">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</MyTable>
</div>
<div class="flex mt10 just-center">
<el-button size="large" type="primary">保存</el-button>
<el-button size="large" type="primary">采纳</el-button>
<el-button size="large" type="primary">处置</el-button>
<el-button size="large">取消</el-button>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"/>
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable
:tableData="pageData.tableData"
:tableColumn="pageData.tableColumn"
:tableHeight="pageData.tableHeight"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData">
<template #shzt="{row}">
<span>采纳将这条信息推送到</span>
<span>退回</span>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-link size="small" type="primary" @click="addEdit('detail', row)">详情</el-link>
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
<!-- 新增 -->
<AddForm ref="detailDiloag" :dic="{D_BZ_SF,D_BZ_XB,D_GS_XS_LY,D_BZ_SSZT,D_GS_XS_LX ,D_GS_XS_QTLX}" />
</div>
<!-- 新增 -->
<AddForm ref="detailDiloag" ></AddForm>
</template>
<script setup>
import AddForm from "./components/addForm.vue";
import Search from "@/components/aboutTable/Search.vue";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref, reactive } from "vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import AddForm from "./components/addForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const {D_GS_XS_LY, D_BZ_SSZT,D_BZ_SF,D_GS_XS_LX ,D_GS_XS_QTLX,D_BZ_XB} = proxy.$dict("D_GS_XS_LY","D_BZ_SSZT","D_BZ_SF","D_GS_XS_LX","D_GS_XS_QTLX","D_BZ_XB"); //获取字典数据
const detailDiloag = ref();
const list = reactive({
leftCoutn: [
{ label: "总数", value: 100 },
{ label: "下发总数", value: 100 },
{ label: "已处置数", value: 10 },
{ label: "收藏", value: 100 },
{ label: "已反馈数量", value: 100 },
{ label: "未反馈数量", value: 100 },
{ label: "未处置数量", value: 100 }
],
countList: [
{ label: "全部", value: 100 },
{ label: "已稳控", value: 100 },
{ label: "处置中", value: 10 },
{ label: "非本地人", value: 100 },
{ label: "未开始", value: 100 },
{ label: "其他人", value: 100 }
]
});
const searchBox = ref(); //搜索框
const searchQuery = ref(""); // 搜索关键词
const searchConfiger = ref([
{
label: "姓名",
prop: "name",
placeholder: "请输入姓名",
showType: "input"
},
{
label: "身份证号",
prop: "sfzh",
placeholder: "请输入身份证号",
showType: "input"
}
{ label: "线索名称", prop: 'clueTitle', placeholder: "请输入线索名称", showType: "input" },
{ label: "语义关键字", prop: 'semanticKeywords', placeholder: "请输入语义关键字", showType: "input" },
{ label: "线索类型", prop: 'clueType', placeholder: "请选择线索类型", showType: "select" },
{ label: "线索来源", prop: 'clueSource', placeholder: "请选择线索来源", showType: "select" },
{ label: "线索状态", prop: 'xszt', placeholder: "请选择线索状态", showType: "select" },
{ label: "处置状态", prop: 'czzt', placeholder: "请选择处置状态", showType: "select" },
{ label: "开始时间", prop: 'startTime', placeholder: "请选择开始时间", showType: "date" },
{ label: "结束时间", prop: 'endTime', placeholder: "请选择结束时间", showType: "date" },
{ label: "指向地点", prop: 'targetLocation', placeholder: "请输入指向地点", showType: "input" },
]);
const pageData = reactive({
tableData: [
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101001",
clueTitle: "可疑人员活动线索",
clueType: "人员线索",
clueSource: "群众举报",
startTime: "2024-01-01 08:00:00",
endTime: "2024-01-01 18:00:00",
targetLocation: "某市某区某街道",
clueContent: "发现多名可疑人员在该区域频繁出入,疑似从事非法活动。",
attachment: "report.pdf"
},
{
name: "张三",
xb: "",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101002",
clueTitle: "涉毒交易线索",
clueType: "违法犯罪线索",
clueSource: "技术侦查",
startTime: "2024-01-02 10:00:00",
endTime: "2024-01-02 16:00:00",
targetLocation: "某市某区某小区",
clueContent: "监控发现多次可疑交易活动,疑似涉及违禁物品。",
attachment: "evidence.docx"
},
{
name: "张三",
xb: "",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
},
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
},
{
name: "张三",
xb: "男",
sfzh: "510154545454544454",
sjh: "12345678900",
jcbm: "xx公安局",
zt: "已稳控"
clueNo: "XS20240101003",
clueTitle: "非法聚集线索",
clueType: "群体性事件",
clueSource: "网络监控",
startTime: "2024-01-03 14:00:00",
endTime: "2024-01-03 22:00:00",
targetLocation: "某市某广场",
clueContent: "网络平台发现有组织策划非法聚集活动的信息。",
attachment: "online_evidence.zip"
}
], //表格数据
],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false
},
tableHeight: 300,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
}, //分页
controlsWidth: 250, //操作栏宽度
},
controlsWidth: 220,
tableColumn: [
{ label: "姓名", prop: "name" },
{ label: "性别", prop: "xb" },
{ label: "身份证号", prop: "sfzh" },
{ label: "手机号", prop: "sjh" },
{ label: "检查部门", prop: "jcbm" },
{ label: "状态", prop: "zt" }
{ label: "线索编号", prop: "clueNo" },
{ label: "线索名称", prop: "clueTitle" },
{ label: "线索类型", prop: "clueType" },
{ label: "线索来源", prop: "clueSource" },
{ label: "开始时间", prop: "startTime" },
{ label: "结束时间", prop: "endTime" },
{ label: "指向地点", prop: "targetLocation" },
{ label: "线索内容", prop: "clueContent", width: 200 },
{ label: "附件", prop: "attachment", solt: true },
]
});
// 选中的人员
const selectedPerson = ref(null);
const queryFrom = ref({});
// 搜所
const onSearch = (data) => {
console.log(data);
};
// 模拟人员列表数据
const personList = ref([
{
number: "12345854",
title: "*****线索",
source: "*****",
personCount: "涉及人员数量",
location: "指向地点",
tag: "待签收",
status: "处置"
},
{
number: "12345854",
title: "*****线索",
source: "*****",
personCount: "涉及人员数量",
location: "指向地点",
status: "处置",
tag: "待签收",
}
// 更多人员数据...
]);
onMounted(() => {
getList()
tabHeightFn();
});
// 模拟相关人员数据
const relatedPersons = ref([
{
name: "李四",
relation: "朋友",
phone: "13900139000",
status: "正常"
}
// 更多相关人员数据...
]);
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList()
}
// 搜索
const onSearch = (val) =>{
queryFrom.value = {...val}
pageData.pageConfiger.pageCurrent = 1;
getList()
}
const changeNo = (val) =>{
pageData.pageConfiger.pageNum = val;
getList()
}
const changeSize = (val) =>{
pageData.pageConfiger.pageSize = val;
getList()
}
// 获取列表
const getList = (val) =>{
// pageData.tableConfiger.loading = true;
let data = { ...pageData.pageConfiger, ...queryFrom.value };
// let url = '/mosty-lzcj/tbDwMbkf/queryList';
// qcckPost(data,url).then(res=>{
// pageData.tableData = res.records || [];
// pageData.total = res.total;
// pageData.tableConfiger.loading = false;
// }).catch(()=>{ pageData.tableConfiger.loading = false; })
}
// 详情
const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
nextTick(()=>{
detailDiloag.value.init(type, row);
})
};
// 选择人员
const selectPerson = (person) => {
selectedPerson.value = person;
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
window.onresize = function () {
tabHeightFn();
};
};
</script>
<style lang="scss" scoped>
.intelligence-management {
margin-top: 10px;
width: 100%;
height: 100%;
position: relative;
.left-panel {
width: 300px;
border-right: 1px solid #dcdfe6;
background-color: #fff;
display: flex;
flex-direction: column;
height: 100%;
float: left;
.search-box {
padding: 16px;
border-bottom: 1px solid #dcdfe6;
}
.person-list {
flex: 1;
overflow-y: auto;
padding: 10px;
.clue-item {
background: #f5f7fa;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
.clue-status {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
color: #fff;
background: #409eff;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
}
.clue-tag {
position: absolute;
top: 1px;
left: -27px;
background: #f56c6c;
color: #fff;
padding: 10px 30px;
border-radius: 2px;
font-size: 12px;
transform: rotate(-38deg);
}
.clue-header {
color: #333;
font-size: 14px;
}
.clue-info {
font-size: 12px;
color: #666;
line-height: 1.8;
}
&:hover {
background: #e6f1fc;
}
}
}
}
.right-panel {
width: calc(100% - 310px);
height: 100%;
float: left;
margin-left: 10px;
padding: 10px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 4px;
overflow: hidden;
overflow-y: auto;
.title {
position: relative;
&::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 78px;
height: 4px;
background: linear-gradient(
90deg,
#3596f9 0%,
rgba(53, 150, 249, 0) 100%
);
border-radius: 4px 4px 4px 4px;
}
}
}
::v-deep .el-tabs__nav-wrap::after {
background: #e9e9e9;
width: 58%;
}
<style>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
}
</style>
</style>