const renderItem = ({ item }: {item : siteDataCard}) => {
return (
<SiteCard key={item.key} siteName = {item.siteName} status={item.status} alarmCount ={item.alarmCount} siteCapacity ={item.siteCapacity}
performanceRatio = {item.performanceRatio} dailyEnergy = {item.energyToday} outputActivePower = {item.outputActivePower}
></SiteCard>
)
};
const AccountScreen = ({sites, ...props} : {sites :Array<site>}) => {
let [skip, setSkip] = useState(true);
let [dataLoaded, setDataLoaded] = useState(false);
let [page, setPage] = useState(1);
let [siteDataList, setSiteDataList] = useState<Array<siteDataCard>>([]);
let [visible, setVisible] = useState(false);
let [errors, setErrors] = useState('');
let [dailyEnergy, setDailyEnergy] = useState({});
let [siteKeys,setSiteKeys] = useState<Array<string>>([]);
let [search, setSearch] = useState('');
let {data : sitesData, isSuccess : sitesQuerySuccess} = useLoggedInUserSitesQuery({per : 10, page : page, search : search});
let [trigger, result] = useLazySiteAlarmCountDataQuery();
let [sitesTrigger, {data : sitesResult, isSuccess : isLazySiteQuerySuccess}] = useLazyLoggedInUserSitesQuery();
let [siteLevelDataTrigger, {data : siteLevelResult, isSuccess : isLazySiteLevelQuerySuccess}] = useLazySiteLevelDataForSiteQuery();
let [latestDataTrigger, {data : latestDataResult}] = useLazyLatestEventDataQuery();
const onChange = (search : string) => {
setSearch(search);
setSiteDataList([]);
}
if(sites && sites.length > 0 && dataLoaded === false) {
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
setDataLoaded(true)
}
return (
<AccountContainer>
<Header ></Header>
<ScrollView style = {accountStyles.accountBar}>
<AccountBar></AccountBar>
</ScrollView>
{sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
})
: null}
<View style={accountStyles.searchBar}>
<SearchTextBar
label="Search"
value={search}
onChangeText={text => onChange(text)}
autoCapitalize="none"
></SearchTextBar>
</View>
<View style = {accountStyles.flatListView}>
<FlatList data = {siteDataList} renderItem = {renderItem} />
</View>
<View style = {accountStyles.actionButtons}>
<Button mode="contained" style = {{backgroundColor : 'white'}} disabled = {page === 1? true : false} onPress={() => {
setPage(page - 1);
setSiteDataList([]);
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
}): null
}}>
<Text style = {{color : 'black'}}>Back</Text>
</Button>
<Button mode="contained" style = {{backgroundColor : 'white'}} onPress={() => {
setPage(page +1);
setSiteDataList([]);
let siteKeys: Array<string> = [];
sites.forEach(site => {
siteKeys.push(site.site_key);
})
trigger({siteKeys});
let siteLevelDataPayloadForEnergyAndPR : siteDataQuery = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
timeGrouping : 'DAY',
cumulate : false,
provideBufferData : false,
bufferInterval : null,
suppressErrors : true,
limit : null,
siteParameterAggregationType : {}
}
if(siteKeys.length > 0) {
let paramAggregation : {[key : string] : any} = siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType;
siteKeys.forEach(siteKey => {
let option : Array<ParameterDataQueryOption> = [{ parameterName: "Daily Energy", dataQueryOperation: null }, { parameterName: "Total Energy", dataQueryOperation: null },
{parameterName : 'Performance Ratio', dataQueryOperation : null}];
let currentSiteKey : string = siteKey;
paramAggregation[currentSiteKey] = option;
})
siteLevelDataPayloadForEnergyAndPR.siteParameterAggregationType = paramAggregation
}
siteLevelDataTrigger(siteLevelDataPayloadForEnergyAndPR);
let latestDataPayload : siteLatestDataRequest = {
startTime : moment().startOf('day').valueOf(),
endTime : moment().endOf('day').valueOf(),
validateParameterPresence : true,
suppressErrors : true,
siteParameterList : {}
}
if(siteKeys.length > 0) {
let siteParameterList : {[key : string] : any} = latestDataPayload.siteParameterList;
siteKeys.forEach(siteKey => {
let option : Array<string> = ['Output Active Power'];
let currentSiteKey : string = siteKey;
siteParameterList[currentSiteKey] = option;
})
latestDataPayload.siteParameterList = siteParameterList;
}
latestDataTrigger(latestDataPayload);
sitesData ? sitesData.elements.map(site => {
let alarmData = result ? result.data ? result.data : null : null;
let totalAlarmCount = 0;
let prValue : number | string = '-';
let dailyEnergyValue : number | string = '-';
let oapValue : number | string = '-';
let allDataLoaded = false;
if(alarmData !== null) {
alarmData.forEach(alarm => {
if(alarm.siteKey === site.site_key) {
totalAlarmCount += alarm.noDataInverterAlarmCount;
totalAlarmCount += alarm.noDataRuleEvaluationLogsCount;
totalAlarmCount += alarm.openCommunicationLogsCount;
totalAlarmCount += alarm.openInverterAlarmCount;
totalAlarmCount += alarm.openRuleEvaluationLogsCount;
}
})
}
if(siteLevelResult) {
let originalResult = siteLevelResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Daily Energy") {
dailyEnergyValue = siteData.value;
}
if(siteData.parameter_name === 'Performance Ratio') {
prValue = siteData.value;
}
})
}
})
}
if(latestDataResult) {
let originalResult = latestDataResult.result;
originalResult.forEach(siteResult => {
if(siteResult.site_key === site.site_key) {
let valueData = siteResult.data;
valueData.forEach(siteData => {
console.log(siteData)
if(siteData.parameter_name === "Output Active Power") {
oapValue = siteData.value;
}
})
}
})
allDataLoaded = true;
}
if(allDataLoaded) {
let sitePresent : boolean = false;
siteDataList.forEach(siteCard => {
if(siteCard.key === site.site_key) {
sitePresent = true;
}
});
if(!sitePresent)
siteDataList.push({key : site.site_key, siteName : site.name, status : site.status, alarmCount : totalAlarmCount, siteCapacity : site.site_capacity, performanceRatio : prValue, energyToday : dailyEnergyValue, outputActivePower : oapValue});
}
}): null;
setSiteDataList(siteDataList);
}}>
<Text style = {{color : 'black'}}>Next</Text>
</Button>
</View>
</AccountContainer>
)
}
const accountStyles = StyleSheet.create({
accountBar : {
width : '100%',
backgroundColor : '#313644',
paddingLeft : 20,
paddingRight : 20,
paddingTop : 30,
flex : 1
},
pageView : {
width : '100%',
},
searchBar : {
alignItems : 'center',
padding : 10,
},
flatListView : {
flex : 3,
},
actionButtons : {
display : 'flex',
flexDirection : 'row',
marginVertical : 10,
alignItems : 'center',
justifyContent : 'space-around'
}
})
function mapStateToProps(state : RootState) {
return {
sites : state.sitesSlice.sites
};
}
export default connect(mapStateToProps)(AccountScreen)
我正在使用 Stack RTK Query、React Native 进行移动应用程序开发。我绝对是使用这两个堆栈的初学者。我正在研究使用平面列表并使用列表末尾提供的后退和下一步按钮为其添加分页。现在列表的数据是使用 4 个不同的查询来获取的，第一个问题是我正在寻找一种方法来组合这些查询并并行执行它们，其次我正在研究如何手动使用查询触发器，我正在使用惰性使用查询钩子，但我应该在哪里触发相同的，我应该更改状态并且钩子应该自动触发还是应该计算所有数据按下下一个/后退然后重新渲染组件？