更新大屏
This commit is contained in:
@ -37,17 +37,16 @@ export function resetForm(refName) {
|
|||||||
|
|
||||||
//当type=1时获取出生日期,type=2时获取性别,type=3时获取年龄
|
//当type=1时获取出生日期,type=2时获取性别,type=3时获取年龄
|
||||||
export function IdCard(IdCard, type) {
|
export function IdCard(IdCard, type) {
|
||||||
|
//获取出生日期
|
||||||
if (type === 1) {
|
if (type === 1) {
|
||||||
//获取出生日期
|
return IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14)
|
||||||
let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14)
|
|
||||||
return birthday
|
|
||||||
}
|
}
|
||||||
if (type === 2) {
|
if (type === 2) {
|
||||||
//获取性别
|
//获取性别
|
||||||
if (parseInt(IdCard.substr(16, 1)) % 2 === 1) {
|
if (parseInt(IdCard.substr(16, 1)) % 2 === 1) {
|
||||||
return "男"
|
return "男"
|
||||||
} else {
|
} else {
|
||||||
return "女"
|
return "女"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (type === 3) {
|
if (type === 3) {
|
||||||
|
@ -83,10 +83,10 @@ const addPerson = ref([]) //单独新增的数据
|
|||||||
const dialogForm = ref(false); //弹窗
|
const dialogForm = ref(false); //弹窗
|
||||||
const rules = reactive({
|
const rules = reactive({
|
||||||
qtMc: [{ required: true, message: "请输入群体名称", trigger: "blur" }],
|
qtMc: [{ required: true, message: "请输入群体名称", trigger: "blur" }],
|
||||||
qtFxdj: [{ required: true, message: "请选择风险等级", trigger: "qtFxdj" }],
|
qtFxdj: [{ required: true, message: "请选择风险等级", trigger: "change" }],
|
||||||
qtLb: [{ required: true, message: "请选择群体类别", trigger: "qtFxdj" }],
|
qtLb: [{ required: true, message: "请选择群体类别", trigger: "change" }],
|
||||||
qtClsj: [{ required: true, message: "请选择群体成立时间", trigger: "qtFxdj" }],
|
qtClsj: [{ required: true, message: "请选择群体成立时间", trigger: "change" }],
|
||||||
bqList: [{ required: true, message: "请选择群体标签", trigger: "qtFxdj" }],
|
bqList: [{ required: true, message: "请选择群体标签", trigger: "change" }],
|
||||||
zdrLkyy: [{ required: true, message: "请输入列控原因", trigger: "blur" }],
|
zdrLkyy: [{ required: true, message: "请输入列控原因", trigger: "blur" }],
|
||||||
});
|
});
|
||||||
const formData = ref([
|
const formData = ref([
|
||||||
|
@ -54,10 +54,8 @@
|
|||||||
<img src="" alt="" style="width: 80px;height: 90px;" />
|
<img src="" alt="" style="width: 80px;height: 90px;" />
|
||||||
<ul class="tl ml10" style="flex:1 0 0">
|
<ul class="tl ml10" style="flex:1 0 0">
|
||||||
<li class="one_text_detail">群体名称:{{ row.qtMc }}</li>
|
<li class="one_text_detail">群体名称:{{ row.qtMc }}</li>
|
||||||
<li class="one_text_detail">群体级别:{{ row.qtjb }}</li>
|
<li class="flex one_text_detail">群体类别:<DictTag :tag="false" :value="row.qtLb" :options="D_GS_ZDQT_LB" /> </li>
|
||||||
<li class="flex one_text_detail">风险等级:
|
<li class="flex one_text_detail">风险等级:<DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" /></li>
|
||||||
<DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" />
|
|
||||||
</li>
|
|
||||||
<li class="one_text_detail">创建时间:{{ row.xtCjsj }}</li>
|
<li class="one_text_detail">创建时间:{{ row.xtCjsj }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,32 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
|
<div class="warning-card flex align-center" :class="changeBG(item.yjjb)">
|
||||||
<div class="warning-image">
|
<div class="warning-image">
|
||||||
<img :src="item.image" alt="预警图片" />
|
<img :src="item.yjTp" alt="预警图片" />
|
||||||
</div>
|
</div>
|
||||||
<div class="warning-info">
|
<div class="warning-info">
|
||||||
<div class="flex just-between align-center">
|
<div class="flex just-between align-center">
|
||||||
<div class="flex align-center mt4">
|
<div class="flex align-center mt4">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.yjRyxm }}</span>
|
||||||
<span class="gapline mr10 ml10"></span>
|
<span class="gapline mr10 ml10"></span>
|
||||||
<span>{{ item.gender }}</span>
|
<span>{{ IdCard(item.yjRysfzh,2) }}</span>
|
||||||
<span class="gapline mr10 ml10"></span>
|
<span class="gapline mr10 ml10"></span>
|
||||||
<span>{{ item.age }}</span>
|
<span>{{ IdCard(item.yjRysfzh,3) }}</span>
|
||||||
<span class="gapline mr10 ml10"></span>
|
|
||||||
<span>{{ item.mz }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="tag">涉警人员</span>
|
<span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt4">身份证:{{ item.sfzh }}</div>
|
<div class="mt4">身份证:{{ item.yjRysfzh }}</div>
|
||||||
<div class="mt4 one_text_detail">户籍地址:{{ item.location }}</div>
|
<div class="mt4 one_text_detail">预警地址:{{ item.yjDz }}</div>
|
||||||
<div class="mt4 one_text_detail">居住地址:{{ item.location }}</div>
|
<div class="mt4 two_text_detail">预警内容:{{ item.yjNr }}</div>
|
||||||
<div class="mt4 two_text_detail">预警内容:{{ item.yjnr }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { de } from "element-plus/es/locale.mjs";
|
import { IdCard } from '@/utils/validate.js'
|
||||||
import { cs } from "element-plus/es/locale.mjs";
|
|
||||||
import { reactive, ref } from "vue";
|
import { reactive, ref } from "vue";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
|
@ -7,63 +7,42 @@
|
|||||||
<div class="comom-cnt" id="qcbk">
|
<div class="comom-cnt" id="qcbk">
|
||||||
<MyTable @changePage="changePage" customClass="zdy_bkcz_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
|
<MyTable @changePage="changePage" customClass="zdy_bkcz_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
|
||||||
<template #tp="{row}">
|
<template #tp="{row}">
|
||||||
<img width="30" src="@/assets/images/icon100.png" alt="">
|
<img width="30" height="30" src="" alt="">
|
||||||
</template>
|
</template>
|
||||||
<template #czzt="{row}">
|
<template #ryXb="{row}">
|
||||||
<span style="color:#FDBC3A">{{ row.czzt }}</span>
|
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB"/>
|
||||||
</template>
|
</template>
|
||||||
|
<template #zdrRyjb="{row}">
|
||||||
|
<DictTag :tag="false" :value="row.zdrRyjb" :options="D_GS_ZDR_RYJB"/>
|
||||||
|
</template>
|
||||||
|
<template #zdrBkZt="{row}">
|
||||||
|
<DictTag :tag="false" :value="row.zdrBkZt" :options="D_GS_ZDR_BK_ZT"/>
|
||||||
|
</template>
|
||||||
|
<template #zdrCzzt="{row}">
|
||||||
|
<DictTag :tag="false" color="#FDBC3A" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
|
||||||
|
</template>
|
||||||
|
<!-- *************** -->
|
||||||
|
<template #qtFxdj="{row}">
|
||||||
|
<DictTag :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" />
|
||||||
|
</template>
|
||||||
|
<template #qtLb="{row}">
|
||||||
|
<DictTag :value="row.qtLb" :options="D_GS_ZDQT_LB" />
|
||||||
|
</template>
|
||||||
|
|
||||||
</MyTable>
|
</MyTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||||
import { reactive, ref,onMounted } from "vue";
|
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const { D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ,D_GS_ZDR_RYJB,D_BZ_XB,D_GS_ZDR_BK_ZT,D_GS_ZDR_CZZT} = proxy.$dict('D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ','D_GS_ZDR_RYJB','D_BZ_XB','D_GS_ZDR_BK_ZT','D_GS_ZDR_CZZT')
|
||||||
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
|
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
|
||||||
const activeIndex = ref(0);
|
const activeIndex = ref(0);
|
||||||
const pageData = reactive({
|
const pageData = reactive({
|
||||||
tableData: [
|
tableData: [],
|
||||||
{
|
|
||||||
tp: "https://example.com/photo1.jpg",
|
|
||||||
xm: "张三",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199001011234",
|
|
||||||
gkdw: "城东派出所",
|
|
||||||
hdsj: "2023-12-25 14:30",
|
|
||||||
sfdz: "杭州市上城区平海路123号",
|
|
||||||
czzt: "已处置"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo2.jpg",
|
|
||||||
xm: "李四",
|
|
||||||
xb: "女",
|
|
||||||
sfzh: "330102199203034567",
|
|
||||||
gkdw: "城西派出所",
|
|
||||||
hdsj: "2023-12-25 16:45",
|
|
||||||
sfdz: "杭州市西湖区文三路456号",
|
|
||||||
czzt: "待处置"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkdw: "城北派出所",
|
|
||||||
hdsj: "2023-12-25 09:15",
|
|
||||||
sfdz: "杭州市拱墅区莫干山路789号",
|
|
||||||
czzt: "处置中"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkdw: "城北派出所",
|
|
||||||
hdsj: "2023-12-25 09:15",
|
|
||||||
sfdz: "杭州市拱墅区莫干山路789号",
|
|
||||||
czzt: "处置中"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
keyCount: 0,
|
||||||
tableConfiger: {
|
tableConfiger: {
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -75,53 +54,78 @@ const pageData = reactive({
|
|||||||
},
|
},
|
||||||
tableColumn: [
|
tableColumn: [
|
||||||
{ label: "照片", prop: "tp", showSolt: true },
|
{ label: "照片", prop: "tp", showSolt: true },
|
||||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||||
{ label: "性别", prop: "xb" ,showOverflowTooltip: true},
|
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||||
{ label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
|
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||||
{ label: "管控单位", prop: "gkdw" ,showOverflowTooltip: true},
|
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||||
{ label: "活动时间", prop: "hdsj" ,showOverflowTooltip: true},
|
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||||
{ label: "活动发生地址", prop: "sfdz" ,showOverflowTooltip: true},
|
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||||
{ label: "处置状态", prop: "czzt",showOverflowTooltip: true,showSolt: true },
|
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
const page = ref(1);
|
const page = ref(1);
|
||||||
const total = ref(0);
|
const total = ref(0);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
getData()
|
||||||
tabHeightFn();
|
tabHeightFn();
|
||||||
});
|
});
|
||||||
|
|
||||||
const changeActive = (idx) =>{
|
const changeActive = (idx) =>{
|
||||||
activeIndex.value = idx;
|
activeIndex.value = idx;
|
||||||
|
pageData.tableData = []
|
||||||
page.value = 0;
|
page.value = 0;
|
||||||
total.value = 0;
|
total.value = 0;
|
||||||
switch(idx){
|
switch(idx){
|
||||||
case 0:
|
case 0:
|
||||||
|
pageData.tableColumn = [
|
||||||
|
{ label: "照片", prop: "tp", showSolt: true },
|
||||||
|
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||||
|
{ label: "性别", prop: "ryXb" ,showOverflowTooltip: true,showSolt: true},
|
||||||
|
{ label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
|
||||||
|
{ label: "管控单位", prop: "gxSsbmmc" ,showOverflowTooltip: true},
|
||||||
|
{ label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
|
||||||
|
{ label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
|
||||||
|
{ label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true },
|
||||||
|
]
|
||||||
break;
|
break;
|
||||||
case 1:
|
case 1:
|
||||||
|
pageData.tableColumn = [
|
||||||
|
{ label: "群体名称", prop: "qtMc"},
|
||||||
|
{ label: "群体类别", prop: "qtLb",showSolt:true},
|
||||||
|
{ label: "风险等级", prop: "qtFxdj", showSolt: true},
|
||||||
|
{ label: "列控原因", prop: "zdrLkyy"},
|
||||||
|
{ label: "开始时间", prop: "zdrRkkssj"},
|
||||||
|
{ label: "截至时间", prop: "zdrRkjssj"},
|
||||||
|
]
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
pageData.keyCount++;
|
pageData.keyCount++;
|
||||||
changePage(idx)
|
getData()
|
||||||
}
|
}
|
||||||
const changePage = () => {
|
|
||||||
|
// 获取数据
|
||||||
|
const getData = () =>{
|
||||||
pageData.tableConfiger.loading = true;
|
pageData.tableConfiger.loading = true;
|
||||||
let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'';
|
let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage';
|
||||||
let data = { pageSize:10,pageNum:page.value };
|
let data = { pageSize:10,pageCurrent:page.value };
|
||||||
qcckGet(data, url).then((res) => {
|
qcckGet(data, url).then((res) => {
|
||||||
pageData.tableData = res.records || [];
|
let arr = res.records || [];
|
||||||
|
pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
|
||||||
total.value = res.total;
|
total.value = res.total;
|
||||||
pageData.tableConfiger.loading = false;
|
pageData.tableConfiger.loading = false;
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
pageData.tableConfiger.loading = false;
|
pageData.tableConfiger.loading = false;
|
||||||
});
|
});
|
||||||
console.log('触底加载==========');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
const getData = () =>{
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
// 触底加载
|
||||||
|
const changePage = () => {
|
||||||
|
if(pageData.tableData.length == total.value) return false;
|
||||||
|
page.value++;
|
||||||
|
getData()
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
const tabHeightFn = () => {
|
const tabHeightFn = () => {
|
||||||
pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
pageData.tableHeight = document.getElementById('qcbk').offsetHeight - 12;
|
||||||
|
@ -12,61 +12,17 @@
|
|||||||
:key="pageData.keyCount"
|
:key="pageData.keyCount"
|
||||||
:tableConfiger="pageData.tableConfiger"
|
:tableConfiger="pageData.tableConfiger"
|
||||||
>
|
>
|
||||||
<template #tp="{ row }">
|
|
||||||
<img width="30" src="@/assets/images/icon100.png" alt="" />
|
|
||||||
</template>
|
|
||||||
</MyTable>
|
</MyTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { qcckGet } from "@/api/qcckApi.js";
|
||||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||||
import { reactive, onMounted } from "vue";
|
import { fa } from "element-plus/es/locale.mjs";
|
||||||
|
import { reactive, onMounted,ref } from "vue";
|
||||||
const pageData = reactive({
|
const pageData = reactive({
|
||||||
tableData: [
|
tableData: [],
|
||||||
{
|
|
||||||
tp: "https://example.com/photo1.jpg",
|
|
||||||
xm: "张三",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199001011234",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo2.jpg",
|
|
||||||
xm: "李四",
|
|
||||||
xb: "女",
|
|
||||||
sfzh: "330102199203034567",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
keyCount: 0,
|
||||||
tableConfiger: {
|
tableConfiger: {
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -76,26 +32,44 @@ const pageData = reactive({
|
|||||||
showIndex: false,
|
showIndex: false,
|
||||||
stripe: true
|
stripe: true
|
||||||
},
|
},
|
||||||
total: 0,
|
|
||||||
pageConfiger: {
|
|
||||||
pageSize: 20,
|
|
||||||
pageNum: 1
|
|
||||||
}, //分页
|
|
||||||
tableColumn: [
|
tableColumn: [
|
||||||
{ label: "照片", prop: "tp", showSolt: true },
|
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
{ label: "手机号码", prop: "rySjhm", showOverflowTooltip: true },
|
||||||
{ label: "性别", prop: "xb", showOverflowTooltip: true },
|
{ label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
|
||||||
{ label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
|
{ label: "户籍地址", prop: "ryHjdz", showOverflowTooltip: true },
|
||||||
{ label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
|
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const total = ref(0);
|
||||||
|
const pageNum = ref(1);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
tabHeightFn();
|
tabHeightFn();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 获取列表
|
||||||
|
const getList = () => {
|
||||||
|
pageData.tableConfiger.loading = true;
|
||||||
|
let data = { sfZbkry: 1, pageSize:10 , pageCurrent:pageNum.value};
|
||||||
|
qcckGet(data, "/mosty-gsxt/tbGsxtRqfjRy/selectPage").then((res) => {
|
||||||
|
let arr = res.records || [];
|
||||||
|
pageData.tableData = pageNum.value == 1 ? arr : pageData.tableData.concat(arr);
|
||||||
|
total.value = res.total;
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const changePage = () => {
|
const changePage = () => {
|
||||||
console.log("触底加载==========");
|
if(pageData.tableData.length == total.value) return false;
|
||||||
|
pageNum.value++;
|
||||||
|
getList()
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 表格高度计算
|
// 表格高度计算
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
:style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
|
:style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
|
||||||
v-for="(it, idx) in btns"
|
v-for="(it, idx) in btns"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
@click="activeIndex = idx"
|
@click="changeIndex(idx)"
|
||||||
>{{ it }}</span
|
>{{ it }}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -21,63 +21,34 @@
|
|||||||
:key="pageData.keyCount"
|
:key="pageData.keyCount"
|
||||||
:tableConfiger="pageData.tableConfiger"
|
:tableConfiger="pageData.tableConfiger"
|
||||||
>
|
>
|
||||||
|
<template #ryXb="{row}">
|
||||||
|
<DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
|
||||||
|
</template>
|
||||||
|
<template #qtLb="{row}">
|
||||||
|
<DictTag :tag="false" :value="row.qtLb" :options="D_GS_ZDQT_LB" />
|
||||||
|
</template>
|
||||||
|
<template #qtFxdj="{row}">
|
||||||
|
<DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" />
|
||||||
|
</template>
|
||||||
<template #tp="{ row }">
|
<template #tp="{ row }">
|
||||||
<img width="30" src="@/assets/images/icon100.png" alt="" />
|
<img width="30" height="30" src="" alt="" />
|
||||||
</template>
|
</template>
|
||||||
</MyTable>
|
</MyTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { qcckGet } from "@/api/qcckApi.js";
|
||||||
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
import MyTable from "@/components/aboutTable/DarkTable.vue";
|
||||||
import { reactive, ref,onMounted } from "vue";
|
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const { D_BZ_XB,D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ } = proxy.$dict('D_BZ_XB','D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ');
|
||||||
const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
|
const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
|
||||||
const activeIndex = ref(0);
|
const activeIndex = ref(0);
|
||||||
|
const page = ref(1);
|
||||||
|
const total = ref(0);
|
||||||
const pageData = reactive({
|
const pageData = reactive({
|
||||||
tableData: [
|
tableData: [],
|
||||||
{
|
|
||||||
tp: "https://example.com/photo1.jpg",
|
|
||||||
xm: "张三",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199001011234",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo2.jpg",
|
|
||||||
xm: "李四",
|
|
||||||
xb: "女",
|
|
||||||
sfzh: "330102199203034567",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
tp: "https://example.com/photo3.jpg",
|
|
||||||
xm: "王五",
|
|
||||||
xb: "男",
|
|
||||||
sfzh: "330102199505057890",
|
|
||||||
gkyy: "抢劫xxxxx"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
keyCount: 0,
|
keyCount: 0,
|
||||||
tableConfiger: {
|
tableConfiger: {
|
||||||
loading: false,
|
loading: false,
|
||||||
@ -94,27 +65,74 @@ const pageData = reactive({
|
|||||||
}, //分页
|
}, //分页
|
||||||
tableColumn: [
|
tableColumn: [
|
||||||
{ label: "照片", prop: "tp", showSolt: true },
|
{ label: "照片", prop: "tp", showSolt: true },
|
||||||
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
|
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||||
{ label: "性别", prop: "xb", showOverflowTooltip: true },
|
{ label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
|
||||||
{ label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
|
{ label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
|
||||||
{ label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
|
{ label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tabHeightFn();
|
tabHeightFn();
|
||||||
window.onresize = function () {
|
getList()
|
||||||
tabHeightFn();
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 切换啊按钮
|
||||||
|
const changeIndex = (index) =>{
|
||||||
|
activeIndex.value = index;
|
||||||
|
page.value = 1;
|
||||||
|
pageData.tableData = [];
|
||||||
|
switch(index){
|
||||||
|
case 0:
|
||||||
|
pageData.tableColumn = [
|
||||||
|
{ label: "照片", prop: "tp", showSolt: true },
|
||||||
|
{ label: "姓名", prop: "ryXm", showOverflowTooltip: true },
|
||||||
|
{ label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
|
||||||
|
{ label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
|
||||||
|
{ label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
|
||||||
|
]
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
pageData.tableColumn = [
|
||||||
|
{ label: "照片", prop: "tp", showSolt: true },
|
||||||
|
{ label: "群体名称", prop: "qtMc", showOverflowTooltip: true },
|
||||||
|
{ label: "群体类别", prop: "qtLb", showOverflowTooltip: true,showSolt:true },
|
||||||
|
{ label: "风险等级", prop: "qtFxdj", showOverflowTooltip: true ,showSolt: true},
|
||||||
|
{ label: "列控原因", prop: "zdrLkyy", showOverflowTooltip: true }
|
||||||
|
]
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
pageData.keyCount++;
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取列表
|
||||||
|
const getList = () => {
|
||||||
|
pageData.tableConfiger.loading = true;
|
||||||
|
let data = { pageSize:10,pageCurrent:page.value };
|
||||||
|
let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage'
|
||||||
|
qcckGet(data, url).then((res) => {
|
||||||
|
let arr = res.records || [];
|
||||||
|
pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
|
||||||
|
total.value = res.total;
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
}).catch(() => {
|
||||||
|
pageData.tableConfiger.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// 表格高度计算
|
// 表格高度计算
|
||||||
const tabHeightFn = () => {
|
const tabHeightFn = () => {
|
||||||
pageData.tableHeight = document.getElementById('zdgk').offsetHeight - 10;
|
pageData.tableHeight = document.getElementById('zdgk').offsetHeight - 10;
|
||||||
|
window.onresize = function () {
|
||||||
|
tabHeightFn();
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const changePage = () => {
|
const changePage = () => {
|
||||||
console.log("触底加载==========");
|
if(pageData.tableData.length == total.value) return false;
|
||||||
|
page.value++;
|
||||||
|
getList()
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<div style="height:33px;">
|
<div style="height:33px;">
|
||||||
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
|
||||||
</div>
|
</div>
|
||||||
<ul class="ryBox" v-loading="loading">
|
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
|
||||||
<li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
|
<li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
|
||||||
<YjItem :item="item"></YjItem>
|
<YjItem :item="item"></YjItem>
|
||||||
</li>
|
</li>
|
||||||
@ -16,85 +16,65 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { qcckPost } from "@/api/qcckApi.js";
|
||||||
import YjItem from "@/views/home/components/yjItem.vue";
|
import YjItem from "@/views/home/components/yjItem.vue";
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
import * as MOSTY from "@/components/MyComponents/index";
|
||||||
import CheckBox from "@/components/checkBox/index.vue";
|
import CheckBox from "@/components/checkBox/index.vue";
|
||||||
import { ref ,reactive} from 'vue';
|
import { ref ,reactive, onMounted} from 'vue';
|
||||||
const checkData = reactive({
|
const checkData = reactive({
|
||||||
list: ["红", "橙", "黄", "蓝"],
|
list: ["红", "橙", "黄", "蓝"],
|
||||||
hasChoose: ["红"]
|
hasChoose: ["红"]
|
||||||
});
|
});
|
||||||
|
const total = ref(0);
|
||||||
|
const yjJb = ref('');
|
||||||
|
const pageNum = ref(1);
|
||||||
const loading = ref(false); // 加载中
|
const loading = ref(false); // 加载中
|
||||||
const personList = ref([
|
const personList = ref([]);
|
||||||
{
|
onMounted(()=>{
|
||||||
image: require("@/assets/images/person.png"),
|
getList()
|
||||||
name: "张三",
|
})
|
||||||
gender: "男",
|
|
||||||
similarity: 85,
|
|
||||||
sfzh:'11010119900307121X',
|
|
||||||
age: 25,
|
|
||||||
mz:'汉',
|
|
||||||
warningTime: "2025-02-15 13: 00",
|
|
||||||
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
|
||||||
yjjb:'10',
|
|
||||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: require("@/assets/images/person.png"),
|
|
||||||
name: "张三",
|
|
||||||
gender: "男",
|
|
||||||
age: 25,
|
|
||||||
sfzh:'11010119900307121X',
|
|
||||||
mz:'汉',
|
|
||||||
similarity: 85,
|
|
||||||
warningTime: "2025-02-15 13: 00",
|
|
||||||
location: "林艺市八宫区天山路宫区天山路宫区天山路",
|
|
||||||
yjjb:'20',
|
|
||||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: require("@/assets/images/person.png"),
|
|
||||||
name: "张三",
|
|
||||||
gender: "男",
|
|
||||||
age: 25,
|
|
||||||
mz:'汉',
|
|
||||||
sfzh:'11010119900307121X',
|
|
||||||
similarity: 85,
|
|
||||||
warningTime: "2025-02-15 13: 00",
|
|
||||||
location: "林艺市八宫区天山路...",
|
|
||||||
yjjb:'30',
|
|
||||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: require("@/assets/images/person.png"),
|
|
||||||
name: "张三",
|
|
||||||
gender: "男",
|
|
||||||
age: 25,
|
|
||||||
mz:'汉',
|
|
||||||
sfzh:'11010119900307121X',
|
|
||||||
similarity: 85,
|
|
||||||
warningTime: "2025-02-15 13: 00",
|
|
||||||
location: "林艺市八宫区天山路...",
|
|
||||||
yjjb:'40',
|
|
||||||
yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
// 复选框切换
|
// 复选框切换
|
||||||
function changeData(){
|
function changeData(val){
|
||||||
console.log('切换');
|
pageNum.value = 1;
|
||||||
|
personList.value = [];
|
||||||
|
checkData.hasChoose = val;
|
||||||
|
let ids = [];
|
||||||
|
val.forEach(it => {
|
||||||
|
if(it == '红') ids.push(10);
|
||||||
|
if(it == '橙') ids.push(20);
|
||||||
|
if(it == '黄') ids.push(30);
|
||||||
|
if(it == '蓝') ids.push(40);
|
||||||
|
});
|
||||||
|
yjJb.value = ids.join(',')
|
||||||
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 触底加载
|
||||||
|
const loadList = () =>{
|
||||||
|
if( personList.value.length == total.value) return;
|
||||||
|
pageNum.value++;
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
const contentItem = ref([
|
const getList = () =>{
|
||||||
{label:'线索总数',value:'892'},
|
let params = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value };
|
||||||
{label:'下发总数',value:'892'},
|
loading.value = true;
|
||||||
{label:'已处置总数',value:'892'},
|
qcckPost({params},'/mosty-jmxf/tbYjxx/getPageList').then(res=>{
|
||||||
{label:'反馈总数',value:'892'},
|
loading.value = false;
|
||||||
{label:'未反馈总数',value:'892'},
|
let arr = res.records || [];
|
||||||
{label:'未处置总数',value:'892'},
|
personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
|
||||||
])
|
total.value = res.total;
|
||||||
|
}).catch(()=>{
|
||||||
|
loading.value = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.el-loading-mask{
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "@/assets/css/homeScreen.scss";
|
@import "@/assets/css/homeScreen.scss";
|
||||||
|
Reference in New Issue
Block a user