This commit is contained in:
2025-07-03 21:32:25 +08:00
parent 8bb83821ea
commit 05a9a884e7

View File

@ -1,39 +1,14 @@
<template> <template>
<div class="statistical-analysis">
<!-- 左侧树形菜单 -->
<div class="left-menu">
<!-- 这个部分用的是组件-后期替换 -->
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
/>
</div>
<!-- 右侧内容区 -->
<div class="right-content">
<Search :searchArr="searchConfiger" @submit="onSearch" @reset="onReset" :key="pageData.keyCount">
<template #defaultSlot>
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
</template>
</Search>
<div class="tableCnt mb10 pl10 pr10">
<PageTitle title="发掘内容" style="color:#333">
<el-button type="primary" size="small" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">导入内容</span>
</el-button>
<el-button type="danger" size="small" @click="exportData">
<el-icon style="vertical-align: middle"><Delete /></el-icon>
<span style="vertical-align: middle">删除</span>
</el-button>
</PageTitle>
<div> <div>
<div class="titleBox">
<PageTitle title="预警列表"></PageTitle>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" />
</div>
<!-- 表格 -->
<div class="tabBox">
<MyTable <MyTable
:tableData="pageData.tableData" :tableData="pageData.tableData"
:tableColumn="pageData.tableColumn" :tableColumn="pageData.tableColumn"
@ -41,87 +16,18 @@
:key="pageData.keyCount" :key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger" :tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth" :controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"> >
<!-- 操作 --> <template #image="{ row }">
<template #controls="{ row }"> <img :src="row.image" alt="">
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
</template> </template>
</MyTable>
<div class="ww100 flex just-center mt8"> <el-button type="primary">智能解析</el-button> </div>
</div>
</div>
<div class="tableCnt mb10 pl10 pr10">
<PageTitle title="模型智能识别/LP解析结果" style="color:#333;"></PageTitle>
<div ref="searchBox" class="mb8">
<el-button type="primary" size="small" @click="addEdit('add', '')">
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
<span style="vertical-align: middle">新增</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">一件布控</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">级别变更</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">警种变更</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">指定分配</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">添加标签</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">协控申请</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">撤控申请</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">移交管控</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">批量导入</span>
</el-button>
<el-button type="primary" size="small" @click="importData">
<el-icon style="vertical-align: middle"><Upload /></el-icon>
<span style="vertical-align: middle">导出</span>
</el-button>
<el-button type="danger" size="small" @click="exportData">
<el-icon style="vertical-align: middle"><Delete /></el-icon>
<span style="vertical-align: middle">批量删除</span>
</el-button>
</div>
<div>
<MyTable
:tableData="pageData.tableData2"
:tableColumn="pageData.tableColumn2"
:tableHeight="pageData.tableHeight2"
:key="pageData.keyCount"
:tableConfiger="pageData.tableConfiger2"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData">
<!-- 操作 -->
<template #controls="{ row }"> <template #controls="{ row }">
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link> <el-button type="primary" size="small" >详情</el-button >
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
</template> </template>
</MyTable> </MyTable>
<Pages <Pages
@changeNo="changeNo" @changeNo="changeNo"
@changeSize="changeSize" @changeSize="changeSize"
:tableHeight="pageData.tableHeight2" :tableHeight="pageData.tableHeight"
:pageConfiger="{ :pageConfiger="{
...pageData.pageConfiger, ...pageData.pageConfiger,
total: pageData.total total: pageData.total
@ -129,45 +35,40 @@
></Pages> ></Pages>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import CheckBox from "@/components/checkBox/index.vue"; import { ElMessage } from "element-plus";
import PageTitle from "@/components/aboutTable/PageTitle.vue"; import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue"; import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue"; import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue"; import Search from "@/components/aboutTable/Search.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js"; import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"; import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { Delete } from "@element-plus/icons";
import { fa } from "element-plus/es/locale.mjs"; const { proxy } = getCurrentInstance();
const searchBox = ref(); //搜索框
const searchConfiger = ref([ const searchConfiger = ref([
{ label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" }, {
{ label: "是否关注", prop: 'sfgz', showType: "defaultSlot" }, label: "所属部门",
prop: "department",
placeholder: "请选择所属部门",
showType: "department"
},
]); ]);
const checkData = reactive({
list: ["是", "否"],
hasChoose: ["是", "否"]
});
const searchBox = ref();
const pageData = reactive({ const pageData = reactive({
tableData: [], tableData: [
tableData2: [], {image:'',yjnr:'xxxj街道抢劫xxx',hjdz:'sssss',jzdz:'22222'}
],
keyCount: 0, keyCount: 0,
tableConfiger: { tableConfiger: {
rowHieght: 61, rowHieght: 61,
showSelectType: "checkBox", showSelectType: "null",
loading: false loading: false
}, },
tableConfiger2: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false,
showIndex:false
},
tableHeight:230,
total: 0, total: 0,
pageConfiger: { pageConfiger: {
pageSize: 20, pageSize: 20,
@ -175,98 +76,80 @@ const pageData = reactive({
}, },
controlsWidth: 120, controlsWidth: 120,
tableColumn: [ tableColumn: [
{ label: "身份标签", prop: "nrbh" }, { label: "预警图片", prop: "image" ,showSolt:true},
{ label: "行为标签", prop: "lx" }, { label: "预警内容", prop: "yjnr" },
{ label: "轨迹", prop: "gj" }, { label: "户籍地址", prop: "hjdz" },
{ label: "风险等级", prop: "fxdj" }, { label: "居住地址", prop: "jzdz" },
{ label: "定义积分", prop: "dyjf" },
{ label: "处置措施", prop: "czcs" },
],
tableColumn2: [
{ label: "积分排名", prop: "nrbh" },
{ label: "基础信息", prop: "lx" },
{ label: "列控信息", prop: "nr" },
{ label: "管控信息", prop: "nr" },
{ label: "风险积分", prop: "nr" },
{ label: "评分项", prop: "nr" },
{ label: "布控原因", prop: "nr" },
{ label: "是否关注", prop: "nr" },
],
})
// 树形菜单数据
const treeData = ref([
{
label: "林芝市公安局200",
children: [
{ label: "工布江达县公安局100" },
{ label: "工布江达城区派出所10" },
{ label: "某某某派出所10" },
{ label: "某某某公安局100" }
] ]
} });
]); onMounted(() => {
getList();
tabHeightFn();
});
const defaultProps = { // 搜索
children: "children", const onSearch = (val) => {
label: "label" queryFrom.value = { ...val };
pageData.pageConfiger.pageCurrent = 1;
getList();
}; };
const changeNo = (val) => {
// 事件处理函数 pageData.pageConfiger.pageNum = val;
const handleNodeClick = (data) => { getList();
console.log(data);
}; };
const handleDateChange = () => { const changeSize = (val) => {
// 处理日期变化 pageData.pageConfiger.pageSize = val;
getList();
}; };
const handleExport = () => { // 获取列表
// 处理导出 const getList = () => {
}; };
// 表格高度计算
const tabHeightFn = () => { const tabHeightFn = () => {
pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 690; pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
window.onresize = function () { window.onresize = function () {
tabHeightFn(); tabHeightFn();
}; };
}; };
onMounted(() => {
tabHeightFn()
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.statistical-analysis { .checkbox-group {
display: flex;
gap: 20px;
}
.basic-info {
display: flex;
gap: 15px;
.avatar {
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 4px;
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
.left-menu { object-fit: cover;
float: left;
width: 280px;
height: calc(100% - 20px);
padding: 20px;
margin-top: 20px;
border-radius: 4px;
background-color: #fff;
border-right: 1px solid #e8e8e8;
} }
.right-content {
float: left;
width: calc(100% - 290px);
height: 100%;
padding: 0 20px 0 ;
margin-top: 20px;
margin-left: 10px;
border-radius: 4px;
box-sizing: border-box;
.tableCnt{
height: calc((100vh - 253px)/2 );
background: #fff;
border-radius: 4px;
} }
.info-list {
display: flex;
flex-direction: column;
gap: 5px;
} }
} }
.control-buttons {
display: flex;
gap: 10px;
}
</style> </style>