From 585471d9a141ffc102ac4685ada226da4a84eccf Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Tue, 7 Feb 2023 15:34:20 +0800 Subject: [PATCH] =?UTF-8?q?2.7=20=E4=BF=AE=E6=94=B9=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Monitor/Exception/index.tsx | 48 ++++--- .../ElecEvaluation/Monitor/Home/index.tsx | 22 +-- .../Monitor/OpenToday/index.tsx | 134 +++++++++++++----- src/pages/ElecEvaluation/Monitor/service.ts | 15 +- src/pages/ElecEvaluation/Monitor/style.less | 49 +++---- 5 files changed, 172 insertions(+), 96 deletions(-) diff --git a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx index 55444d5..70ae7d8 100644 --- a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx @@ -14,9 +14,9 @@ const MonitorException: React.FC<{}> = () => { //开启评审后3日未结束评标-数量 const [threeDayNoEndCount, setThreeDayNoEndCount] = useState(0); //超过1小时未开标数量-列表 - const [noOpenListData, setNoOpenListData] = useState([]); + const [noOpenListData, setNoOpenListData] = useState(); //开标后超过6小时未开启评审室-列表 - const [noOpenAssessListData, setNoOpenAssessListData] = useState([]); + const [noOpenAssessListData, setNoOpenAssessListData] = useState(); //开标后超过6小时未开启评审室-数量 const [noOpenAssessNumber, setNoOpenAssessNumber] = useState(0); //异常监控-解密异常 @@ -60,18 +60,26 @@ const MonitorException: React.FC<{}> = () => { }) } //超过1小时未开标数量-列表 - const getNoOpenList = () => { - getNoOpenListAPI({ "timeLimit": "1", "dayNumber": "30" }).then(res => { + const getNoOpenList = (params: any, type: number) => { + getNoOpenListAPI({ "timeLimit": "1", "dayNumber": "30", ...params }).then(res => { if (res?.code == 200) { - setNoOpenListData(res?.data?.records); + if (type == 0) { + setNoOpenListData(res?.data); + } else { + setModalListData(res?.data); + } } }) } //开标后超过6小时未开启评审室-列表 - const getNoOpenAssessList = () => { - getNoOpenAssessListAPI({ "timeLimit": "6", "dayNumber": "30" }).then(res => { + const getNoOpenAssessList = (params: any, type: number) => { + getNoOpenAssessListAPI({ "timeLimit": "6", "dayNumber": "30", ...params }).then(res => { if (res?.code == 200) { - setNoOpenAssessListData(res?.data); + if (type == 0) { + setNoOpenAssessListData(res?.data); + } else { + setModalListData(res?.data); + } } }) } @@ -171,8 +179,8 @@ const MonitorException: React.FC<{}> = () => { const params = { pageNo: 1, pageSize: 10 }; getNoOpenNumber(); getThreeDayNoEnd(params, 0); - getNoOpenList(); - getNoOpenAssessList(); + getNoOpenList(params, 0); + getNoOpenAssessList(params, 0); getNoOpenAssessNumber(); getDecryptExceptionList(params, 0); getMacSameList(params, 0); @@ -269,7 +277,7 @@ const MonitorException: React.FC<{}> = () => { onHeaderCell, render: (_: any, record: any) => { return ( - { setExceptionType(null); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 + { setExceptionType(null); setModalListData({ records: [record] }); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 ) }, }, @@ -332,7 +340,7 @@ const MonitorException: React.FC<{}> = () => { onHeaderCell, render: (_: any, record: any) => { return ( - { setExceptionType("解密异常"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 + { setExceptionType("解密异常"); setModalListData({ records: [record] }); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 ) }, }, @@ -395,7 +403,7 @@ const MonitorException: React.FC<{}> = () => { onHeaderCell, render: (_: any, record: any) => { return ( - { setExceptionType("评标结束后3日内未发布公示"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 + { setExceptionType("评标结束后3日内未发布公示"); setModalListData({ records: [record] }); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 ) }, }, @@ -458,7 +466,7 @@ const MonitorException: React.FC<{}> = () => { onHeaderCell, render: (_: any, record: any) => { return ( - { setExceptionType("开启评审后3日未结束评标"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 + { setExceptionType("开启评审后3日未结束评标"); setModalListData({ records: [record] }); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 ) }, }, @@ -521,7 +529,7 @@ const MonitorException: React.FC<{}> = () => { onHeaderCell, render: (_: any, record: any) => { return ( - { setExceptionType("MAC地址重复"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 + { setExceptionType("MAC地址重复"); setModalListData({ records: [record] }); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#1b7ef2" }}>查看 ) }, }, @@ -544,11 +552,11 @@ const MonitorException: React.FC<{}> = () => {
{ setExceptionType(null); setModalListData(noOpenListData); dataType.current = "1"; setModalListVisible(true); }}>more} />
- +
{ setExceptionType(null); setModalListData(noOpenAssessListData); dataType.current = "4"; setModalListVisible(true); }}>more} />
- +
@@ -577,7 +585,7 @@ const MonitorException: React.FC<{}> = () => { - { setModalListVisible(false); setModalListData([]); }} exceptionData={modalListData} exceptionType={exceptionType} onCallBack={(current, projectName, ownerContactName) => { + { setModalListVisible(false); setModalListData({}); }} exceptionData={modalListData} exceptionType={exceptionType} onCallBack={(current, projectName, ownerContactName) => { const params = { pageNo: current, pageSize: 10, @@ -585,13 +593,13 @@ const MonitorException: React.FC<{}> = () => { projectName != "" ? params["projectName"] = projectName : null; ownerContactName != "" ? params["ownerContactName"] = ownerContactName : null; if (dataType.current == "1") { - + getNoOpenList(params, 1); } else if (dataType.current == "2") { getDecryptExceptionList(params, 1); } else if (dataType.current == "3") { getMacSameList(params, 1); } else if (dataType.current == "4") { - + getNoOpenAssessList(params, 1); } else if (dataType.current == "5") { getThreeDayNoEnd(params, 1); } else if (dataType.current == "6") { diff --git a/src/pages/ElecEvaluation/Monitor/Home/index.tsx b/src/pages/ElecEvaluation/Monitor/Home/index.tsx index bff3c07..a270371 100644 --- a/src/pages/ElecEvaluation/Monitor/Home/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Home/index.tsx @@ -14,7 +14,7 @@ import left from '@/assets/monitor/left.png'; import right from '@/assets/monitor/right.png'; import arrowLeftCircleFill from '@/assets/monitor/arrow-left-circle-fill.png' import arrowRightCircleFill from '@/assets/monitor/arrow-right-circle-fill.png' -import { CaretRightOutlined, DownOutlined } from '@ant-design/icons'; +import { CaretRightOutlined, DownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'; import './china'; import * as echarts from 'echarts'; import { getActiveSupplierAPI, getAnnoCountAPI, getAnnualAndTenderAgentAPI, getExpertNumberAPI, getMonitorListAPI, getOpeningListAPI, getReviewDistributionAPI, getSupplierCountAPI, getTodayInfoAPI, getTodayOpeningAPI } from '../service'; @@ -696,11 +696,17 @@ export const ModalList = (props: { modalVisible: boolean, onCancel: () => void, onCallBack(page, project.current, owner.current); }; const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => { + // if (type === 'prev') { + // return ; + // } + // if (type === 'next') { + // return ; + // } if (type === 'prev') { - return ; + return ; } if (type === 'next') { - return ; + return ; } return originalElement; }; @@ -737,7 +743,7 @@ export const ModalList = (props: { modalVisible: boolean, onCancel: () => void, footer={null} >

{isNotEmpty(title) ? title : "重点监测异常明细单"}

-
+ {exceptionData?.total &&
项目名称：
@@ -747,7 +753,7 @@ export const ModalList = (props: { modalVisible: boolean, onCancel: () => void,
-
+
}
{exceptionData?.records?.length > 0 ? exceptionData?.records?.map((item: any, index: any) => { return ( @@ -780,9 +786,9 @@ export const ModalList = (props: { modalVisible: boolean, onCancel: () => void, ) }) : }
-
- -
+ {exceptionData?.total &&
+ `共 ${total} 条`} /> +
} {/*
onCancel()}> 确 定 diff --git a/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx b/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx index a307f09..a7000ed 100644 --- a/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx @@ -24,13 +24,13 @@ const OpenToday: React.FC<{}> = () => { //超过5小时未开标数量 const [noOpenNumberFive, setNoOpenNumberFive] = useState("0"); //超过2小时未开标列表 - const [noOpenListTwo, setNoOpenListTwo] = useState([]); + const [noOpenListTwo, setNoOpenListTwo] = useState(); //超过5小时未开标列表 - const [noOpenListFive, setNoOpenListFive] = useState([]); + const [noOpenListFive, setNoOpenListFive] = useState(); //ModalList visible const [modalListVisible, setModalListVisible] = useState(false); //ModalList Data - const [modalListData, setModalListData] = useState([]); + const [modalListData, setModalListData] = useState(); //ModalList Type const [exceptionType, setExceptionType] = useState(); //selectKey @@ -41,6 +41,10 @@ const OpenToday: React.FC<{}> = () => { const auth = useRef(authCheck(["ebtp-watcher"])); //定时器描述 const _time = 60000; + //modal弹窗数据类型 + const dataType = useRef(""); + // + const isInterval = useRef(true); //初始化字典 let dic: any = getDicData(); let dicData: any = JSON.parse(dic); @@ -157,23 +161,27 @@ const OpenToday: React.FC<{}> = () => { }) } //今日开标-解密成功率 - const getDecryptSuccessRateToday = () => { - getDecryptSuccessRateTodayAPI().then(res => { + const getDecryptSuccessRateToday = (params: any, type: number) => { + getDecryptSuccessRateTodayAPI({ ...params }).then(res => { if (res?.code == 200) { const data = res?.data; - if (data?.decryptFailProjectList?.length > 0) { - for (let i = 0, length = data.decryptFailProjectList.length; i < length; i++) { - data.decryptFailProjectList[i]["regionDictName"] = data.decryptFailProjectList[i].projectRecord?.regionDictName; - data.decryptFailProjectList[i]["projectName"] = data.decryptFailProjectList[i].projectRecord?.projectName; - data.decryptFailProjectList[i]["ownerContactName"] = data.decryptFailProjectList[i].projectRecord?.ownerContactName; - data.decryptFailProjectList[i]["ownerContactTel"] = data.decryptFailProjectList[i].projectRecord?.ownerContactTel; - data.decryptFailProjectList[i]["appManagerName"] = data.decryptFailProjectList[i].projectRecord?.appManagerName; - data.decryptFailProjectList[i]["appManagerTel"] = data.decryptFailProjectList[i].projectRecord?.appManagerTel; - data.decryptFailProjectList[i]["recruitStartTime"] = data.decryptFailProjectList[i].projectRecord?.recruitStartTime; - data.decryptFailProjectList[i]["bidMethodDict"] = data.decryptFailProjectList[i].projectRecord?.bidMethodDict; + if (data?.decryptFailProjectList?.records?.length > 0) { + for (let i = 0, length = data.decryptFailProjectList.records.length; i < length; i++) { + data.decryptFailProjectList.records[i]["regionDictName"] = data.decryptFailProjectList.records[i].projectRecord?.regionDictName; + data.decryptFailProjectList.records[i]["projectName"] = data.decryptFailProjectList.records[i].projectRecord?.projectName; + data.decryptFailProjectList.records[i]["ownerContactName"] = data.decryptFailProjectList.records[i].projectRecord?.ownerContactName; + data.decryptFailProjectList.records[i]["ownerContactTel"] = data.decryptFailProjectList.records[i].projectRecord?.ownerContactTel; + data.decryptFailProjectList.records[i]["appManagerName"] = data.decryptFailProjectList.records[i].projectRecord?.appManagerName; + data.decryptFailProjectList.records[i]["appManagerTel"] = data.decryptFailProjectList.records[i].projectRecord?.appManagerTel; + data.decryptFailProjectList.records[i]["recruitStartTime"] = data.decryptFailProjectList.records[i].projectRecord?.recruitStartTime; + data.decryptFailProjectList.records[i]["bidMethodDict"] = data.decryptFailProjectList.records[i].projectRecord?.bidMethodDict; } } - setDecryptSuccessRateTodayData(data); + if (type == 0) { + setDecryptSuccessRateTodayData(data); + } else { + setModalListData(data?.decryptFailProjectList); + } } }) } @@ -186,18 +194,26 @@ const OpenToday: React.FC<{}> = () => { }) } //评标阶段6小时未评标 - const getUnopenSix = () => { - getUnopenSixAPI().then(res => { + const getUnopenSix = (params: any, type: number) => { + getUnopenSixAPI({ ...params }).then(res => { if (res?.code == 200) { - setUnopenSixData(res?.data); + if (type == 0) { + setUnopenSixData(res?.data); + } else { + setModalListData(res?.data); + } } }) } //评标阶段10小时未评标 - const getUnopenTen = () => { - getUnopenTenAPI().then(res => { + const getUnopenTen = (params: any, type: number) => { + getUnopenTenAPI({ ...params }).then(res => { if (res?.code == 200) { - setUnopenTenData(res?.data); + if (type == 0) { + setUnopenTenData(res?.data); + } else { + setModalListData(res?.data); + } } }) } @@ -215,35 +231,59 @@ const OpenToday: React.FC<{}> = () => { }) } //超n小时未开标列表 - const getNoOpenList = () => { - getNoOpenListAPI({ "timeLimit": "2", "dayNumber": "1" }).then(res => { + const getNoOpenListTwo = (params: any, type: number) => { + getNoOpenListAPI({ "timeLimit": "2", "dayNumber": "1", ...params }).then(res => { if (res?.code == 200) { - setNoOpenListTwo(res?.data?.records); + if (type == 0) { + setNoOpenListTwo(res?.data); + } else { + setModalListData(res?.data); + } + } }) - getNoOpenListAPI({ "timeLimit": "5", "dayNumber": "1" }).then(res => { + } + //超n小时未开标列表 + const getNoOpenListFive = (params: any, type: number) => { + getNoOpenListAPI({ "timeLimit": "5", "dayNumber": "1", ...params }).then(res => { if (res?.code == 200) { - setNoOpenListFive(res?.data?.records); + if (type == 0) { + setNoOpenListFive(res?.data); + } else { + setModalListData(res?.data); + } + } }) } //页面数据获取 const getPageData = () => { getTodayInfo(); - getDecryptSuccessRateToday(); getTodayOpening(); - getUnopenSix(); - getUnopenTen(); + getNoOpenNumber(); - getNoOpenList(); + + } + //分页数据 + const getCurrentData = () => { + const params = { pageSize: 10, pageNo: 1 }; + getDecryptSuccessRateToday(params, 0); + getNoOpenListTwo(params, 0); + getNoOpenListFive(params, 0); + getUnopenSix(params, 0); + getUnopenTen(params, 0); } useEffect(() => { let interval: any; if (auth.current) { getPageData(); + getCurrentData(); interval = setInterval(() => { - getPageData(); + if (isInterval.current) { + getPageData(); + getCurrentData(); + } }, _time); } return () => { @@ -296,9 +336,9 @@ const OpenToday: React.FC<{}> = () => {
- { }} rightClick={() => { setExceptionType("解密异常"); setModalTitle(null); setModalListData(isNotEmpty(decryptSuccessRateTodayData?.decryptFailProjectList) ? decryptSuccessRateTodayData?.decryptFailProjectList : []); setModalListVisible(true); }} /> - { setExceptionType("2小时未开标"); setModalTitle(null); setModalListData(noOpenListTwo); setModalListVisible(true); }} rightClick={() => { setExceptionType("5小时未开标"); setModalTitle(null); setModalListData(noOpenListFive); setModalListVisible(true); }} /> - { setExceptionType("6小时未评标"); setModalTitle(null); setModalListData(unopenSixData); setModalListVisible(true); }} rightClick={() => { setExceptionType("10小时未评标"); setModalTitle(null); setModalListData(unopenTenData); setModalListVisible(true); }} /> + { }} rightClick={() => { setExceptionType("解密异常"); setModalTitle(null); setModalListData(decryptSuccessRateTodayData?.decryptFailProjectList); dataType.current = "1"; isInterval.current = false; setModalListVisible(true); }} /> + { setExceptionType("2小时未开标"); setModalTitle(null); setModalListData(noOpenListTwo?.records); dataType.current = "2"; isInterval.current = false; setModalListVisible(true); }} rightClick={() => { setExceptionType("5小时未开标"); setModalTitle(null); setModalListData(noOpenListFive?.records); dataType.current = "3"; isInterval.current = false; setModalListVisible(true); }} /> + { setExceptionType("6小时未评标"); setModalTitle(null); setModalListData(unopenSixData); dataType.current = "4"; isInterval.current = false; setModalListVisible(true); }} rightClick={() => { setExceptionType("10小时未评标"); setModalTitle(null); setModalListData(unopenTenData); dataType.current = "5"; isInterval.current = false; setModalListVisible(true); }} />
@@ -315,17 +355,35 @@ const OpenToday: React.FC<{}> = () => {
- { setModalTitle("今日开标明细"); setModalListData([record]); setModalListVisible(true); }} /> + { setModalTitle("今日开标明细"); setModalListData({ records: [record] }); setModalListVisible(true); }} />
- { setModalTitle("重保项目明细"); setModalListData([record]); setModalListVisible(true); }} /> + { setModalTitle("重保项目明细"); setModalListData({ records: [record] }); setModalListVisible(true); }} />
- { setModalListVisible(false); setModalListData([]); }} exceptionData={modalListData} exceptionType={exceptionType} title={modalTitle} /> + { setModalListVisible(false); setModalListData({}); isInterval.current = true; }} exceptionData={modalListData} exceptionType={exceptionType} title={modalTitle} onCallBack={(current, projectName, ownerContactName) => { + const params = { + pageNo: current, + pageSize: 10, + } + projectName != "" ? params["projectName"] = projectName : null; + ownerContactName != "" ? params["ownerContactName"] = ownerContactName : null; + if (dataType.current == "1") { + getDecryptSuccessRateToday(params, 1); + } else if (dataType.current == "2") { + getNoOpenListTwo(params, 1); + } else if (dataType.current == "3") { + getNoOpenListFive(params, 1); + } else if (dataType.current == "4") { + getUnopenSix(params, 1); + } else if (dataType.current == "5") { + getUnopenTen(params, 1); + } + }} /> ); }; diff --git a/src/pages/ElecEvaluation/Monitor/service.ts b/src/pages/ElecEvaluation/Monitor/service.ts index 542c119..195e617 100644 --- a/src/pages/ElecEvaluation/Monitor/service.ts +++ b/src/pages/ElecEvaluation/Monitor/service.ts @@ -193,25 +193,28 @@ export async function getTodayInfoAPI() { /** * 今日开标-评标阶段10小时未评标 */ -export async function getUnopenTenAPI() { +export async function getUnopenTenAPI(data: any) { return request('/api/biz-service-ebtp-statistics/api/evaluation/today/unopen/ten', { - method: 'GET', + method: 'POST', + data: { ...data }, }); } /** * 今日开标-评标阶段6小时未评标 */ -export async function getUnopenSixAPI() { +export async function getUnopenSixAPI(data: any) { return request('/api/biz-service-ebtp-statistics/api/evaluation/today/unopen/six', { - method: 'GET', + method: 'POST', + data: { ...data }, }); } /** * 今日开标-解密成功率 */ -export async function getDecryptSuccessRateTodayAPI() { +export async function getDecryptSuccessRateTodayAPI(data: any) { return request('/api/biz-service-ebtp-statistics/exceptionMonitor/getDecryptSuccessRateToday', { - method: 'GET', + method: 'POST', + data: { ...data } }); } diff --git a/src/pages/ElecEvaluation/Monitor/style.less b/src/pages/ElecEvaluation/Monitor/style.less index 6f1e767..054a985 100644 --- a/src/pages/ElecEvaluation/Monitor/style.less +++ b/src/pages/ElecEvaluation/Monitor/style.less @@ -2013,15 +2013,15 @@ width: 200px; color: #FFFFFF; background-color: transparent; - border: 1px solid #1B7DF2; + border: 1px solid #01C2FF; &:hover { - border-color: #1B7DF2; + border-color: #01C2FF; } &:focus { - border-color: #1B7DF2; - box-shadow: 0 0 0 2px #1B7DF2; + border-color: #01C2FF; + box-shadow: 0 0 0 2px #01C2FF; } &::-webkit-input-placeholder { @@ -2034,18 +2034,19 @@ } .ant-btn-primary { - background: #1B7EF2; - border-color: #1B7EF2; + background: #01C2FF; + border-color: #01C2FF; &:hover &:focus &:active { - background: #1B7EF2; - border-color: #1B7EF2; + background: #01C2FF; + border-color: #01C2FF; } } } .modal-list-pagination { - text-align: center; + text-align: right; + margin-top: 16px; .ant-pagination-item { // border: none; @@ -2055,33 +2056,33 @@ margin: 0 0.5rem 0 0; &>a { - color: #45a2ff; + color: #FFFFFF; } &:hover>a { - color: #ffd502; + color: #45a2ff; } } .ant-pagination-item:hover { - border-color: #ffd502; + border-color: #45a2ff; } .ant-pagination-item:focus-visible { - border-color: #ffd502; + border-color: #45a2ff; } .ant-pagination-item-active { - border-color: #ffd502; + border-color: #45a2ff; a { - color: #ffd502; + color: #45a2ff; } &:hover &:focus-visible { - border-color: #ffd502; + border-color: #45a2ff; } } @@ -2089,26 +2090,26 @@ .ant-pagination-next:focus-visible .ant-pagination-item-link, .ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination-next:hover .ant-pagination-item-link { - border-color: #45a2ff; - color: #45a2ff; + border-color: #FFFFFF; + color: #FFFFFF; } .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link { background: none; - border-color: #45a2ff; - color: #45a2ff; + border-color: #FFFFFF; + color: #FFFFFF; } .pagination-icon { font-size: 20px; vertical-align: middle; - color: #45a2ff; + color: #FFFFFF; height: 24px; } .ant-pagination-total-text { - color: #45a2ff; + color: #FFFFFF; } .ant-pagination-prev { @@ -2128,12 +2129,12 @@ } .ant-pagination-item-ellipsis { - color: #45a2ff; + color: #FFFFFF; } .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon, .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon { - color: #45a2ff; + color: #FFFFFF; } .ant-pagination-jump-prev .ant-pagination-item-container,