flx:弹窗新增分页

This commit is contained in:
X_Rian 2024-07-05 19:44:27 +08:00
parent cf7c0d9446
commit eb0dea64ce
5 changed files with 245 additions and 157 deletions

View File

@ -100,6 +100,15 @@
<p>暂无数据</p>
</div>
</el-scrollbar>
<el-pagination
v-if="partyMemberList.length != 0"
background
:page-size="10"
style="justify-content: center"
@current-change="onCurrentChange"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
<div class="list-detail" v-if="showDialog" @click="handleDetailClick">
@ -220,6 +229,7 @@ const getVideoList = async () => {
const bgImgSet = (index: any) => {
return bgImgList.value[index % bgImgList.value.length];
};
//
const getQualityStatisticsNumDataFn = async (tip: any) => {
let requestData: any = {
@ -283,6 +293,11 @@ const getCompanyList = async () => {
enterpriseListData.value = res.result;
}
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
pageNo.value = event;
getMemberCountList(true);
};
//
const getMemberCountList = async (tip: any) => {
let requestData: any = {
@ -290,7 +305,7 @@ const getMemberCountList = async (tip: any) => {
hardwareName: searchForm.value.hardwareName,
alarmTypeName: searchForm.value.alarmTypeName,
pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 100,
pageSize: 10,
isPushed: 1
};
if(searchForm.value.dateRange && searchForm.value.dateRange.length > 0){
@ -298,20 +313,22 @@ const getMemberCountList = async (tip: any) => {
requestData.endTime = searchForm.value.dateRange[1]
}
const res: any = await getAlarmRecordApi(requestData);
if (tip == "more") {
partyMemberList.value = partyMemberList.value.concat(res.result.records);
} else {
partyMemberList.value = res.result.records;
}
// IP
// partyMemberList.value.map((item:any) => {
// item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
// })
if (res.result.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
partyMemberList.value = res.result.records;
total.value = Number(res.result.total);
// if (tip == "more") {
// partyMemberList.value = partyMemberList.value.concat(res.result.records);
// } else {
// partyMemberList.value = res.result.records;
// }
// // IP
// // partyMemberList.value.map((item:any) => {
// // item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
// // })
// if (res.result.pages == pageNo.value) {
// moreScroll.value = false;
// } else {
// pageNo.value = pageNo.value + 1;
// }
};
// onBeforeMount(async () => {
// getVideoList();
@ -321,17 +338,17 @@ onMounted(async () => {
await getMemberCountList("search");
await getQualityStatisticsNumDataFn("search");
getWarnTypeOption();
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight;
//
if (scrollTop >= scrollHeight - clientHeight - 1) {
if (moreScroll.value) {
getMemberCountList("more");
}
}
});
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// const scrollTop = e.target.scrollTop;
// const scrollHeight = e.target.scrollHeight;
// const clientHeight = e.target.clientHeight;
// //
// if (scrollTop >= scrollHeight - clientHeight - 1) {
// if (moreScroll.value) {
// getMemberCountList("more");
// }
// }
// });
refAlarmScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
@ -811,7 +828,7 @@ const previewVideo = (data: string | null) => {
}
}
.listBox {
height: 82%;
height: 68%;
.listStyle {
display: flex;
align-items: center;

View File

@ -77,6 +77,15 @@
<p>暂无数据</p>
</div>
</el-scrollbar>
<el-pagination
v-if="partyMemberList.length != 0"
background
:page-size="10"
style="justify-content: center"
@current-change="onCurrentChange"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
</template>
@ -622,7 +631,6 @@ function drawEchart2() {
}
function drawEchart3() {
echartsTest.value = echarts.init(echarts3.value);
let option = {
tooltip: {
@ -894,7 +902,11 @@ const getStatsDangerType = async () => {
drawEchart3();
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
pageNo.value = event;
getMemberCountList(true);
};
const getXzSecurityQualitylnspectionRecordlist = async (tip: any) => {
const res: any = await getXzSecurityQualitylnspectionRecordlistApi({
pageNo: tip == "search" ? 1 : pageNo.value,
@ -913,16 +925,19 @@ const getXzSecurityQualitylnspectionRecordlist = async (tip: any) => {
whiteSpace: false
};
});
partyMemberList.value = partyMemberList.value.concat(newResult);
// partyMemberList.value = partyMemberList.value.concat(newResult);
partyMemberList.value = newResult;
} else {
// partyMemberList.value = res.result.page.records;
partyMemberList.value = res.result.page.records;
}
if (res.result.page.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
total.value = Number(res.result.page.total);
// if (res.result.page.pages == pageNo.value) {
// moreScroll.value = false;
// } else {
// pageNo.value = pageNo.value + 1;
// }
};
//
@ -1275,7 +1290,7 @@ onMounted(async () => {
}
.listBox {
height: 69%;
height: 60%;
.listStyle {
display: flex;
@ -1314,13 +1329,13 @@ onMounted(async () => {
}
.notoDta {
top: 35%;
top: 50%;
width: 20%;
// left: 40%;
position: absolute;
text-align: center;
left: 50%;
transform: translateX(-50%);
transform: translate(-50%, -50%);
img {
width: 40%;

View File

@ -122,6 +122,15 @@
<p>暂无数据</p>
</div>
</el-scrollbar>
<el-pagination
v-if="partyMemberList.length != 0"
background
:page-size="10"
style="justify-content: center"
@current-change="onCurrentChange"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
</div>
@ -237,14 +246,20 @@ const getCompanyList = async () => {
enterpriseListData.value = res.result;
}
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
pageNo.value = event;
getMemberCountList(true);
};
//
const getMemberCountList = async (tip:any) => {
let requestData:any = {
projectSn: store.sn,
...searchForm.value,
pageNo: tip == 'search'?1:pageNo.value,
pageSize: 100,
pageSize: 10,
recordType: 1,
recordStatus: 8
}
if(props.tip == '实时'){
requestData.presence = 1;
@ -255,20 +270,22 @@ const getMemberCountList = async (tip:any) => {
}
// const res: any = await getInspectionRecordApi(requestData);
const res: any = await getQualityInspectionRecordApi(requestData);
if(tip == 'more'){
partyMemberList.value = partyMemberList.value.concat(res.result.page.records.filter((item:any) => item.status != 6));
} else {
partyMemberList.value = res.result.page.records.filter((item:any) => item.status != 6);
}
partyMemberList.value = res.result.page.records;
total.value = Number(res.result.page.total);
// if(tip == 'more'){
// partyMemberList.value = partyMemberList.value.concat(res.result.page.records.filter((item:any) => item.status != 6));
// } else {
// partyMemberList.value = res.result.page.records.filter((item:any) => item.status != 6);
// }
// IP
// partyMemberList.value.map((item:any) => {
// item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
// })
if (res.result.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
// if (res.result.pages == pageNo.value) {
// moreScroll.value = false;
// } else {
// pageNo.value = pageNo.value + 1;
// }
};
onMounted(async () => {
@ -409,7 +426,7 @@ onMounted(async () => {
}
}
.listBox {
height: 69%;
height: 58%;
.listStyle {
display: flex;
align-items: center;

View File

@ -71,6 +71,15 @@
<p>暂无数据</p>
</div>
</el-scrollbar>
<el-pagination
v-if="partyMemberList.length != 0"
background
:page-size="10"
style="justify-content: center"
@current-change="onCurrentChange"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
</div>
@ -125,46 +134,53 @@ const getCompanyList = async () => {
enterpriseListData.value = res.result;
}
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
pageNo.value = event;
getMemberCountList(true);
};
//
const getMemberCountList = async (tip: any) => {
let requestData: any = {
projectSn: store.sn,
recordType: 1,
pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 100
pageSize: 10
};
const res: any = await getInspectionRecordApi(requestData);
if (tip == "more") {
partyMemberList.value = partyMemberList.value.concat(res.result.page.records);
} else {
partyMemberList.value = res.result.page.records;
}
partyMemberList.value = res.result.page.records;
total.value = Number(res.result.page.total);
// if (tip == "more") {
// partyMemberList.value = partyMemberList.value.concat(res.result.page.records);
// } else {
// partyMemberList.value = res.result.page.records;
// }
// IP
// partyMemberList.value.map((item:any) => {
// item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
// })
if (res.result.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
// if (res.result.pages == pageNo.value) {
// moreScroll.value = false;
// } else {
// pageNo.value = pageNo.value + 1;
// }
};
onMounted(async () => {
await getCompanyList();
await getMemberCountList("search");
await getMemberCountList(true);
await getStatisticsNumDataFn();
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight;
//
if (scrollTop >= scrollHeight - clientHeight - 1) {
if (moreScroll.value) {
getMemberCountList("more");
}
}
});
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// const scrollTop = e.target.scrollTop;
// const scrollHeight = e.target.scrollHeight;
// const clientHeight = e.target.clientHeight;
// //
// if (scrollTop >= scrollHeight - clientHeight - 1) {
// if (moreScroll.value) {
// getMemberCountList("more");
// }
// }
// });
});
</script>
@ -301,7 +317,7 @@ onMounted(async () => {
}
}
.table-one {
height: 37%;
height: 32%;
.tabList {
display: flex;
// width: 100%;

View File

@ -2,8 +2,8 @@
<div class="political-outlook">
<div class="content">
<div class="top-statistics">
<div class="statistics-item" v-for="(item,index) in topDangerList" :key="index">
<span class="title">{{item.weekBetweenStr}}</span>
<div class="statistics-item" v-for="(item, index) in topDangerList" :key="index">
<span class="title">{{ item.weekBetweenStr }}</span>
<span class="statistics-item-content">安全隐患数量{{ item.dangerNum }}</span>
<span class="statistics-item-content">未整改隐患次数{{ item.rectificationNum }}</span>
<span class="statistics-item-content">重大隐患次数{{ item.greatFaultLevelNum }}</span>
@ -92,36 +92,45 @@
<div>隐患描述及要求</div>
<div>整改时限</div>
<div>检查人</div>
<div style="width: 15%;">检查时间</div>
<div style="width: 15%">检查时间</div>
<div>整改人</div>
<div>分包单位</div>
</div>
<el-scrollbar class="listBox" ref="refScrollbar">
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
<div>{{index + 1}}</div>
<div>{{item.status?textFilter(item.status):''}}</div>
<div>{{item.level?levelListData[item.level - 1].name:''}}</div>
<div>{{item.regionName}}</div>
<div>{{ index + 1 }}</div>
<div>{{ item.status ? textFilter(item.status) : "" }}</div>
<div>{{ item.level ? levelListData[item.level - 1].name : "" }}</div>
<div>{{ item.regionName }}</div>
<div>
<el-tooltip class="box-item" effect="dark" :content="item.dangerItemContent" placement="top-start">
<span>{{item.dangerItemContent}}</span>
<span>{{ item.dangerItemContent }}</span>
</el-tooltip>
</div>
<div>
<el-tooltip class="box-item" effect="dark" :content="item.changeLimitTime" placement="top-start">
<span>{{item.changeLimitTime}}</span>
<span>{{ item.changeLimitTime }}</span>
</el-tooltip>
</div>
<div>{{item.inspectManName}}</div>
<div style="width: 15%;">{{item.inspectTime}}</div>
<div>{{item.changeName}}</div>
<div>{{item.enterpriseName}}</div>
<div>{{ item.inspectManName }}</div>
<div style="width: 15%">{{ item.inspectTime }}</div>
<div>{{ item.changeName }}</div>
<div>{{ item.enterpriseName }}</div>
</div>
<div class="notoDta" v-if="partyMemberList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</el-scrollbar>
<el-pagination
v-if="partyMemberList.length != 0"
background
:page-size="10"
style="justify-content: center"
@current-change="onCurrentChange"
layout="prev, pager, next"
:total="total"
/>
</div>
</div>
</div>
@ -131,7 +140,13 @@
import { ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
import { getQualityStatisticsNumDataApi, getProjectEnterpriseApi, getSystemUserApi,getSystemUserBySnApi, getInspectionRecordApi } from "@/api/modules/agjtCommandApi";
import {
getQualityStatisticsNumDataApi,
getProjectEnterpriseApi,
getSystemUserApi,
getSystemUserBySnApi,
getInspectionRecordApi
} from "@/api/modules/agjtCommandApi";
const store = GlobalStore();
const props = defineProps(["tip"]);
const BASEURL = import.meta.env.VITE_API_URL;
@ -143,7 +158,7 @@ const levelListData = ref([
{ name: "二级", value: 2 },
{ name: "三级", value: 3 },
{ name: "四级", value: 4 }
])
]);
const statusList = ref([
// { name: "", value: 1 },
{ name: "待整改", value: 2 },
@ -151,36 +166,36 @@ const statusList = ref([
{ name: "待核验", value: 4 },
{ name: "合格", value: 5 },
// { name: "", value: 6 },
{ name: "超期未关闭", value: 7 },
{ name: "超期未关闭", value: 7 }
]);
let pageNo = ref(1 as any);
let moreScroll = ref(true as any);
const refScrollbar = ref(null as any); //
const searchForm = ref({
status: '',
inspectManId: '',
changeId: '',
enterpriseId: '',
level: ''
status: "",
inspectManId: "",
changeId: "",
enterpriseId: "",
level: ""
});
const topDangerList = ref([] as any)
const topDangerList = ref([] as any);
const partyMemberList = ref({} as any);
//
const textFilter = (val:any) => {
let findItem:any = statusList.value.find(item => {
const textFilter = (val: any) => {
let findItem: any = statusList.value.find(item => {
return item.value == val;
})
return findItem.name
}
});
return findItem.name;
};
//
const conditionSearch = async () => {
getMemberCountList('search')
}
getMemberCountList("search");
};
//
const getSystemUserBySn = async () => {
let data = {
sn: store.sn,
queryType: "projectLevelAndChildren",
queryType: "projectLevelAndChildren"
};
const res: any = await getSystemUserBySnApi(data);
if (res.code == 200) {
@ -201,8 +216,8 @@ const getSystemUserFn = async () => {
const getDivisionUnitFn = async () => {
let data = {
projectSn: store.sn,
pageNo: 1,
pageSize: 999
pageNo: 1,
pageSize: 999
};
const res: any = await getProjectEnterpriseApi(data);
if (res.code == 200) {
@ -217,7 +232,7 @@ const getQualityStatisticsNumDataFn = async () => {
};
const res: any = await getQualityStatisticsNumDataApi(data);
if (res.code == 200) {
topDangerList.value = res.result || []
topDangerList.value = res.result || [];
}
};
@ -233,37 +248,45 @@ const getCompanyList = async () => {
enterpriseListData.value = res.result;
}
};
let total = ref(0 as any);
const onCurrentChange = (event: number) => {
pageNo.value = event;
getMemberCountList(true);
};
//
const getMemberCountList = async (tip:any) => {
let requestData:any = {
const getMemberCountList = async (tip: any) => {
let requestData: any = {
projectSn: store.sn,
...searchForm.value,
pageNo: tip == 'search'?1:pageNo.value,
pageSize: 100,
pageNo: tip == "search" ? 1 : pageNo.value,
pageSize: 10,
recordType: 1,
}
if(props.tip == '实时'){
recordStatus: 8
};
if (props.tip == "实时") {
requestData.presence = 1;
} else if(props.tip == '日累积') {
} else if (props.tip == "日累积") {
requestData.attendance = 1;
} else {
requestData.inserviceType = 1;
}
const res: any = await getInspectionRecordApi(requestData);
if(tip == 'more'){
partyMemberList.value = partyMemberList.value.concat(res.result.page.records.filter((item:any) => item.status != 6));
} else {
partyMemberList.value = res.result.page.records.filter((item:any) => item.status != 6);
}
partyMemberList.value = res.result.page.records;
total.value = Number(res.result.page.total);
// if(tip == 'more'){
// partyMemberList.value = partyMemberList.value.concat(res.result.page.records.filter((item:any) => item.status != 6));
// } else {
// partyMemberList.value = res.result.page.records.filter((item:any) => item.status != 6);
// }
// IP
// partyMemberList.value.map((item:any) => {
// item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
// })
if (res.result.pages == pageNo.value) {
moreScroll.value = false;
} else {
pageNo.value = pageNo.value + 1;
}
// if (res.result.pages == pageNo.value) {
// moreScroll.value = false;
// } else {
// pageNo.value = pageNo.value + 1;
// }
};
onMounted(async () => {
@ -272,27 +295,27 @@ onMounted(async () => {
await getSystemUserBySn();
await getSystemUserFn();
await getQualityStatisticsNumDataFn();
await getMemberCountList('search');
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight;
//
if (scrollTop >= scrollHeight - clientHeight - 1) {
if (moreScroll.value) {
getMemberCountList("more");
}
}
});
await getMemberCountList(true);
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// const scrollTop = e.target.scrollTop;
// const scrollHeight = e.target.scrollHeight;
// const clientHeight = e.target.clientHeight;
// //
// if (scrollTop >= scrollHeight - clientHeight - 1) {
// if (moreScroll.value) {
// getMemberCountList("more");
// }
// }
// });
});
</script>
<style>
.el-select-dropdown{
.el-select-dropdown {
width: 180px;
}</style>
}
</style>
<style lang="scss" scoped>
@mixin flex {
display: flex;
align-items: center;
@ -307,7 +330,7 @@ onMounted(async () => {
// background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%;
padding: 20px 2px;
.top-statistics{
.top-statistics {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -315,7 +338,7 @@ onMounted(async () => {
color: white;
margin: 0 auto;
padding: 20px 0;
.statistics-item{
.statistics-item {
width: 90%;
// width: 450px;
// height: 95px;
@ -325,45 +348,45 @@ onMounted(async () => {
justify-content: space-between;
align-items: center;
position: relative;
.title{
.title {
position: absolute;
top: 4%;
left: 4%;
}
&-content{
&-content {
display: inline-block;
width: 50%;
height: auto;
text-indent: 1.5em;
}
&-content:nth-child(2){
&-content:nth-child(2) {
margin-top: 8%;
}
&-content:nth-child(3){
&-content:nth-child(3) {
margin-top: 8%;
}
}
.statistics-item:nth-child(1){
.statistics-item:nth-child(1) {
background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
background-size: 100% 100%;
}
.statistics-item:nth-child(2){
.statistics-item:nth-child(2) {
background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
background-size: 100% 100%;
}
.statistics-item:nth-child(3){
.statistics-item:nth-child(3) {
background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
background-size: 100% 100%;
}
.statistics-item:nth-child(4){
.statistics-item:nth-child(4) {
background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
background-size: 100% 100%;
}
.statistics-item:nth-child(5){
.statistics-item:nth-child(5) {
background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
background-size: 100% 100%;
}
.statistics-item:nth-child(6){
.statistics-item:nth-child(6) {
background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
background-size: 100% 100%;
}
@ -382,7 +405,7 @@ onMounted(async () => {
}
}
}
.table-one{
.table-one {
height: 50%;
.tabList {
display: flex;
@ -404,7 +427,7 @@ onMounted(async () => {
}
}
.listBox {
height: 69%;
height: 58%;
.listStyle {
display: flex;
align-items: center;
@ -436,12 +459,12 @@ onMounted(async () => {
}
}
}
:deep(){
.el-tabs__item{
:deep() {
.el-tabs__item {
color: white;
}
.el-tabs__item.is-active{
color: var(--el-color-primary)
.el-tabs__item.is-active {
color: var(--el-color-primary);
}
}
}