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

View File

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

View File

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

View File

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

View File

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