This commit is contained in:
2025-04-17 17:11:41 +08:00
parent 61a2e0cc19
commit 7ef5a303e8
6 changed files with 915 additions and 321 deletions

View File

@ -1,197 +1,275 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="重点人员预警模型"/>
<div class="statistical-analysis">
<!-- 左侧树形菜单 -->
<div class="left-menu">
<!-- 这个部分用的是组件-后期替换 -->
<el-tree
:data="treeData"
:props="defaultProps"
@node-click="handleNodeClick"
default-expand-all
/>
</div>
<!-- 搜索 -->
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
<template #defaultSlot>
<!-- 右侧内容区 -->
<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>
<el-input-number v-model="queryFrom.xqy"></el-input-number>
<span class="ml10 mr10" style="color: #000;"></span>
<el-input-number v-model="queryFrom.dqy"></el-input-number>
<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-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
</template>
</MyTable>
<div class="ww100 flex just-center mt8"> <el-button type="primary">智能解析</el-button> </div>
</div>
</template>
</Search>
</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 }">
<el-link size="small" type="danger" @click="deleteRow(row)">删除</el-link>
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight2"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
</div>
</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 #accidentPhoto="{ row }">
<el-image
style="width: 50px; height: 50px"
:src="row.accidentPhoto"
:preview-src-list="[row.accidentPhoto]">
</el-image>
</template>
<!-- 操作 -->
<template #controls="{ row }">
<el-button type="primary" link @click="addEdit('detail', row)">详情</el-button>
</template>
</MyTable>
<Pages
@changeNo="changeNo"
@changeSize="changeSize"
:tableHeight="pageData.tableHeight"
:pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"
></Pages>
</div>
<!-- 详情 -->
<DetailForm ref="detailDiloag" />
</div>
</template>
<script setup>
import CheckBox from "@/components/checkBox/index.vue";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import DetailForm from "./components/detailForm.vue";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const detailDiloag = ref();
const searchBox = ref(); //搜索框
import { Delete } from "@element-plus/icons";
import { fa } from "element-plus/es/locale.mjs";
const searchConfiger = ref([
{ label: "场所名称", prop: 'placeName', placeholder: "场所名称", showType: "input" },
{ label: "申请单位单位名称", prop: 'applyUnitName', placeholder: "申请单位单位名称", showType: "input" },
{ label: "3D打印材料名称", prop: 'materialName', placeholder: "申请单位单位名称", showType: "input" },
{ label: "所属辖区", prop: 'jurisdiction', placeholder: "分县局", showType: "cascader" },
{ label: "管辖部门", prop: 'department', placeholder: "请选择管辖部门", showType: "select" },
{ label: "是否关注", prop: 'sfgz', showType: "defaultSlot" },
]);
const queryFrom = ref({});
const checkData = reactive({
list: ["是", "否"],
hasChoose: ["是", "否"]
});
const searchBox = ref();
const pageData = reactive({
tableData: [
{
id: 1,
placeName: '老王打印店',
equipmentNo: '1002',
equipmentModelNo: 'sa5421321321',
materialName: '塑料',
applyUnitName: 'xxxxx单位'
},
{
id: 2,
placeName: '老王打印店',
equipmentNo: '1002',
equipmentModelNo: 'sa5421321321',
materialName: '塑料',
applyUnitName: 'xxxxx单位'
},
{
id: 3,
placeName: '老王打印店',
equipmentNo: '1002',
equipmentModelNo: 'sa5421321321',
materialName: '塑料',
applyUnitName: 'xxxxx单位'
},
{
id: 4,
placeName: '老王打印店',
equipmentNo: '1002',
equipmentModelNo: 'sa5421321321',
materialName: '塑料',
applyUnitName: 'xxxxx单位'
},
{
id: 5,
placeName: '老王打印店',
equipmentNo: '1002',
equipmentModelNo: 'sa5421321321',
materialName: '塑料',
applyUnitName: 'xxxxx单位'
}
{nrbh:'测试内容',lx:'1',nr:'测试内容'},
{nrbh:'测试内容',lx:'1',nr:'测试内容'},
],
tableData2: [],
keyCount: 0,
tableConfiger: {
rowHieght: 61,
showSelectType: "null",
loading: false
rowHieght: 61,
showSelectType: "checkBox",
loading: false
},
total: 5,
tableConfiger2: {
rowHieght: 61,
showSelectType: "checkBox",
loading: false,
showIndex:false
},
tableHeight:230,
total: 0,
pageConfiger: {
pageSize: 20,
pageCurrent: 1
pageSize: 20,
pageCurrent: 1
},
controlsWidth: 80,
controlsWidth: 120,
tableColumn: [
{ label: "场所名称", prop: "placeName" },
{ label: "3D打印设备序号", prop: "equipmentNo" },
{ label: "3D打印设备品牌型号", prop: "equipmentModelNo" },
{ label: "3D打印材料名称", prop: "materialName" },
{ label: "申请单位单位名称", prop: "applyUnitName" },
]
});
{ label: "身份标签", prop: "nrbh" },
{ label: "行为标签", prop: "lx" },
{ label: "轨迹", prop: "gj" },
{ label: "风险等级", prop: "fxdj" },
{ 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" },
],
})
onMounted(() => {
getList()
tabHeightFn();
});
//选择类型
const handleType = (val) => {
pageData.keyCount++;
pageData.pageConfiger.pageCurrent = 1;
getList()
}
// 搜索
const onSearch = (val) =>{
queryFrom.value = {...val}
pageData.pageConfiger.pageCurrent = 1;
getList()
}
// 树形菜单数据
const treeData = ref([
{
label: "林芝市公安局200",
children: [
{ label: "工布江达县公安局100" },
{ label: "工布江达城区派出所10" },
{ label: "某某某派出所10" },
{ label: "某某某公安局100" }
]
}
]);
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);
const defaultProps = {
children: "children",
label: "label"
};
// 事件处理函数
const handleNodeClick = (data) => {
console.log(data);
};
const handleDateChange = () => {
// 处理日期变化
};
const handleExport = () => {
// 处理导出
};
// 表格高度计算
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
pageData.tableHeight2 = window.innerHeight - searchBox.value.offsetHeight - 690;
window.onresize = function () {
tabHeightFn();
};
};
onMounted(() => {
tabHeightFn()
});
</script>
<style>
.el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important;
<style lang="scss" scoped>
.statistical-analysis {
width: 100%;
height: 100%;
.left-menu {
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;
}
}
}
</style>