更新页面
This commit is contained in:
@ -23,7 +23,7 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
// import { VueDraggable } from 'vue-draggable-plus'
|
||||
const dialogForm = ref(false)
|
||||
const title = ref("新增")
|
||||
const init = (type, row) => {
|
||||
|
||||
@ -11,11 +11,9 @@
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
|
||||
</div>
|
||||
<ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }"
|
||||
v-loading="loading">
|
||||
<ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{ height: listHeight + 'px' }" v-loading="loading">
|
||||
<li class="cntItem" v-for="(it, idx) in 10" :key="idx">
|
||||
<div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;"
|
||||
src="@/assets/images/mxbg.jpg" alt=""></div>
|
||||
<div class="ww100" @click.stop="openAddModel('detail', it)"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
|
||||
<div class="foot">
|
||||
<span class="ml10 pointer" style="color:#027ff0 ;" @click="openAddRule"><el-icon style="top: 2px;">
|
||||
<Document />
|
||||
@ -79,7 +77,7 @@ const onSearch = (val) => {
|
||||
const load = () => {
|
||||
if (total.value == list.value.length) return;
|
||||
PaginationConfig.pageCurrent++;
|
||||
getLits();
|
||||
// getLits();
|
||||
}
|
||||
const getLits = () => {
|
||||
let params = {
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<el-dialog title="行为详情次数详情（1）" v-model="dialogVisible" width="60%">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
</MyTable>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import { ref , reactive , defineExpose} from 'vue'
|
||||
const dialogVisible = ref(false)
|
||||
const pageData = reactive({
|
||||
tableData: [{jqbh:'JQBH-43',bjr:'张三',bjrdh:'15665255545',bjrsfzh:'510156565656525565',yjnr:'xxxxxxxxx',jsj:'2023-08-24 15:00:00'}], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
tableHeight:600,
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "警情编号", prop: "jqbh"},
|
||||
{ label: "报警人", prop: "bjr" },
|
||||
{ label: "报警人电话", prop: "bjrdh" },
|
||||
{ label: "报警人身份证", prop: "bjrsfzh"},
|
||||
{ label: "预警内容", prop: "yjnr", showOverflowTooltip: true },
|
||||
{ label: "报警时间", prop: "jsj", showOverflowTooltip: true },
|
||||
]
|
||||
});
|
||||
const init = (row) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="行为预警">
|
||||
<el-button type="primary">
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
>
|
||||
<template #xwcs="{ row }">
|
||||
<span style="color: #0072ff;" @click="handleClick(row)">{{ row.xwcs }}</span>
|
||||
</template>
|
||||
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<Detail ref="detailRef"></Detail>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Detail from './components/detail.vue'
|
||||
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 { reactive, ref, onMounted } from "vue";
|
||||
const searchBox = ref(); //搜索框
|
||||
const searchConfiger = ref(
|
||||
[
|
||||
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
|
||||
{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
|
||||
{ label: "电话号码", prop: 'dh', placeholder: "请输入电话号码", showType: "input"},
|
||||
]);
|
||||
const detailRef = ref()
|
||||
const queryFrom = ref({});
|
||||
const pageData = reactive({
|
||||
tableData: [
|
||||
{ xwcs:12 ,xm:'张三' ,sfzh:'510156565656525565',dh:'15665255545',xwfz:'20',xwms:'xxxxxxxxx',xwdl:'xxxxxxx',xwzl:'xxxxxxx'}
|
||||
], //表格数据
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
}, //分页
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm"},
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "电话", prop: "dh" },
|
||||
{ label: "行为大类", prop: "xwdl"},
|
||||
{ label: "行为子类", prop: "xwzl", showOverflowTooltip: true },
|
||||
{ label: "行为描述", prop: "xwms", showOverflowTooltip: true },
|
||||
{ label: "行为次数", prop: "xwcs",showSolt: true },
|
||||
{ label: "行为分值", prop: "xwfz",},
|
||||
]
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList()
|
||||
});
|
||||
// 搜索
|
||||
const onSearch = (val) =>{
|
||||
queryFrom.value = {...val}
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList()
|
||||
}
|
||||
const changeNo = (val) =>{
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList()
|
||||
}
|
||||
const changeSize = (val) =>{
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList()
|
||||
}
|
||||
const getList = () =>{
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// qcckGet(queryFrom.value,'/mosty-gsxt/behaviorWarning/selectPage').then((res)=>{
|
||||
// pageData.total = res.total || 0;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(()=>{
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// })
|
||||
}
|
||||
|
||||
const handleClick = (row) => {
|
||||
detailRef.value.init(row)
|
||||
}
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () { tabHeightFn(); };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -218,7 +218,7 @@ const init = () => {
|
||||
}
|
||||
|
||||
const seeMoreFn = () => {
|
||||
router.push('/ControlApproval')
|
||||
router.push('/warningList')
|
||||
}
|
||||
const showDialog = ref(false)
|
||||
const itemData = ref()
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="组合预警">
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref();
|
||||
|
||||
// 搜索配置
|
||||
const searchConfiger = ref([
|
||||
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
|
||||
{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
|
||||
{ label: "预警等级", prop: 'yjdj', placeholder: "请选择预警等级", showType: "select", options: [
|
||||
{ label: "一级预警", value: "1" },
|
||||
{ label: "二级预警", value: "2" },
|
||||
{ label: "三级预警", value: "3" },
|
||||
{ label: "四级预警", value: "4" }
|
||||
]},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
// 页面数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 160,
|
||||
tableColumn: [
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "电话", prop: "dh" },
|
||||
{ label: "组合类型", prop: "zhlx" },
|
||||
{ label: "预警等级", prop: "yjdj" },
|
||||
{ label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
|
||||
{ label: "预警时间", prop: "yjsj" },
|
||||
{ label: "处理状态", prop: "clzt" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = {...val};
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// TODO: 替换为实际的组合预警API接口
|
||||
// qcckGet(queryFrom.value, '/mosty-gsxt/combinedWarning/selectPage').then((res) => {
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total || 0;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="身份预警">
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
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" }
|
||||
]},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
// 页面数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
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",},
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = {...val};
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// TODO: 替换为实际的身份预警API接口
|
||||
// qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total || 0;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="模型预警">
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const searchBox = ref();
|
||||
|
||||
// 搜索配置
|
||||
const searchConfiger = ref([
|
||||
{ label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input"},
|
||||
{ label: "身份证号码", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input"},
|
||||
{ label: "模型类型", prop: 'mxlx', placeholder: "请选择模型类型", showType: "select", options: [
|
||||
{ label: "行为模型", value: "1" },
|
||||
{ label: "身份模型", value: "2" },
|
||||
{ label: "关系模型", value: "3" },
|
||||
{ label: "轨迹模型", value: "4" }
|
||||
]},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
// 页面数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
controlsWidth: 160,
|
||||
tableColumn: [
|
||||
{ label: "序号", prop: "xh" },
|
||||
{ label: "姓名", prop: "xm" },
|
||||
{ label: "身份证号", prop: "sfzh" },
|
||||
{ label: "电话", prop: "dh", },
|
||||
{ label: "模型类型", prop: "mxlx" },
|
||||
{ label: "模型名称", prop: "mxmc", },
|
||||
{ label: "预警原因", prop: "yjyy", showOverflowTooltip: true },
|
||||
{ label: "预警时间", prop: "yjsj" },
|
||||
{ label: "处理状态", prop: "clzt" },
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = {...val};
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// TODO: 替换为实际的模型预警API接口
|
||||
// qcckGet(queryFrom.value, '/mosty-gsxt/modelWarning/selectPage').then((res) => {
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total || 0;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="预警布控">
|
||||
<el-button>
|
||||
<span style="vertical-align: middle">导出</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
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" }
|
||||
]},
|
||||
]);
|
||||
|
||||
const queryFrom = ref({});
|
||||
|
||||
// 页面数据
|
||||
const pageData = reactive({
|
||||
tableData: [],
|
||||
keyCount: 0,
|
||||
tableConfiger: {
|
||||
rowHieght: 61,
|
||||
showSelectType: "checkBox",
|
||||
loading: false,
|
||||
haveControls: false,
|
||||
},
|
||||
total: 0,
|
||||
pageConfiger: {
|
||||
pageSize: 20,
|
||||
pageCurrent: 1
|
||||
},
|
||||
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",},
|
||||
]
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getList();
|
||||
});
|
||||
|
||||
const onSearch = (val) => {
|
||||
queryFrom.value = {...val};
|
||||
pageData.pageConfiger.pageCurrent = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeNo = (val) => {
|
||||
pageData.pageConfiger.pageCurrent = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const changeSize = (val) => {
|
||||
pageData.pageConfiger.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
// pageData.tableConfiger.loading = true;
|
||||
// TODO: 替换为实际的身份预警API接口
|
||||
// qcckGet(queryFrom.value, '/mosty-gsxt/identityWarning/selectPage').then((res) => {
|
||||
// pageData.tableData = res.records || [];
|
||||
// pageData.total = res.total || 0;
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// }).catch(() => {
|
||||
// pageData.tableConfiger.loading = false;
|
||||
// });
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tabHeightFn = () => {
|
||||
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||
window.onresize = function () {
|
||||
tabHeightFn();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-loading-mask {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
@ -104,7 +104,6 @@ function lineChartFn() {
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
||||
}
|
||||
onMounted(() => {
|
||||
lineChartFn();
|
||||
|
||||
Reference in New Issue
Block a user