Tony/taro-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Tony 2024-03-26 17:37:13 +08:00
parent 3fd1d4587b
commit ce4c5d65f9
5 changed files with 172 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/basePage/iot/index.tsx
View File

@ -1,4 +1,4 @@
import { Image, View } from "@tarojs/components" import { Image, Text, View } from "@tarojs/components"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import onlineIcon from '../../assets/images/icons/online.png' import onlineIcon from '../../assets/images/icons/online.png'
import offlineIcon from '../../assets/images/icons/offline.png' import offlineIcon from '../../assets/images/icons/offline.png'
@ -7,6 +7,7 @@ import img from '../../assets/images/img.png'
import Taro from "@tarojs/taro" import Taro from "@tarojs/taro"
import TabWrapper from "../../components/customized/tabWrapper" import TabWrapper from "../../components/customized/tabWrapper"
import { request } from "../../config/axios" import { request } from "../../config/axios"
import { ScrollView } from "@tarojs/components"
const getDeviceList = (data) => { const getDeviceList = (data) => {
return request({ return request({
@ -16,6 +17,23 @@ const getDeviceList = (data) => {
}) })
} }
const UrlMap = {
'气象监测': '/iotManager/weatherStation/index?id=1',
'土壤监测': '/iotManager/soilMoisture/index?id=1',
'虫情监测': '',
'环境检测': '',
'其他摄像头': '',
'棚内环境监测': '/iotManager/envMonitor/index?id=1',
'设备监控': '/iotManager/deviceMonitor/index?id=1'
}
const getDeviceInfoCard = () => {
return request({
url: '/agriculture/big-screen/deviceInfoCard',
method: 'GET'
})
}
const getBaseInfo = (data) => { const getBaseInfo = (data) => {
return request({ return request({
url: '/agriculture/big-screen/getParkBaseInfo', url: '/agriculture/big-screen/getParkBaseInfo',
@ -30,6 +48,46 @@ const Iot = () => {
title: '全部' title: '全部'
}]) }])
const refreshFunc = ():Promise<void> => {
return new Promise((resolve, reject) => {
if (selectedMenuId === 'all') {
getDeviceInfoCard().then(({ data }) => {
if (Array.isArray(data.category)) {
setDataList(data.category.map((item, index) => ({
id: index,
title: item.categoryName,
value: item.total,
online: item.online,
offline: item.offline,
error: item.fault,
img: item.imgId,
url: UrlMap[item.categoryName]
})))
}
resolve()
}).catch(() => { resolve() })
return
}
if (!selectedMenuId) return;
getDeviceList({ parkId: selectedMenuId }).then(({ data }) => {
setDataList(data.map((item, index) => ({
id: index,
title: item.categoryName,
value: item.total,
online: item.online,
offline: item.offline,
error: item.fault,
img: item.imgId,
url: UrlMap[item.categoryName]
})))
resolve()
}).catch(() => { resolve() })
})
}
useEffect(() => {
refreshFunc()
}, [selectedMenuId])
const getTopMenuList = async () => { const getTopMenuList = async () => {
const { data } = await getBaseInfo({ parentId: '0' }) const { data } = await getBaseInfo({ parentId: '0' })
if (Array.isArray(data)) setTopMenus([{ if (Array.isArray(data)) setTopMenus([{
@ -43,102 +101,91 @@ const Iot = () => {
useEffect(() => { useEffect(() => {
getTopMenuList() getTopMenuList()
getDeviceList({ getDeviceInfoCard().then(({ data }) => {
parkId: 1 if (Array.isArray(data.category)) {
}).then(res => { setDataList(data.category.map((item, index) => ({
console.log('getDeviceList', res); id: index,
title: item.categoryName,
value: item.total,
online: item.online,
offline: item.offline,
error: item.fault,
img: item.imgId,
url: UrlMap[item.categoryName]
})))
}
}) })
}, []) }, [])
const dataList = [ const [dataList, setDataList] = useState<Array<any>>([])
{
id: '1', const [refreshTrigger, setRefreshTrigger] = useState(false)
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/iotManager/weatherStation/index?id=1'
},
{
id: '2',
title: '土壤墒情',
value: 4,
online: 3,
offline: 1,
error: 0,
url: '/iotManager/soilMoisture/index?id=1'
},
{
id: '3',
title: '棚内环境监测',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/iotManager/envMonitor/index?id=1'
},
{
id: '4',
title: '设备监控',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/iotManager/deviceMonitor/index?id=1'
},
{
id: '5',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/iotManager/envMonitor/index?id=1'
},
]
return ( return (
<View className="px-1 h-full"> <View className="px-1 h-full">
<View className="h-full flex flex-col justify-start"> <View className="h-full flex flex-col justify-start">
<TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper> <TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper>
<View className="flex flex-col space-y-3 p-2 rounded-sm" style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}> <View className="pb-2" style={{ height: 'calc(100% - 2.4rem)', width: '100%' }}>
{ <ScrollView
dataList.map(item => { className="w-full h-full"
return ( scrollY
<View scrollWithAnimation
className="px-4 py-2 rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200" refresherEnabled
onClick={() => { scrollLeft={10}
Taro.navigateTo({ url: item.url }) refresherBackground="#00000000"
}} refresherTriggered={refreshTrigger}
> onRefresherRefresh={() => {
<View className="w-12 h-12 relative top-1"> console.log('触发下拉刷新');
<Image src={img} className="w-12 h-12"></Image> setRefreshTrigger(true)
</View> refreshFunc().then(() => setRefreshTrigger(false))
<View className="w-full flex flex-col justify-between items-start pb-1"> }}
<View className=" text-base pb-1 pt-1" style={{ fontFamily: 'ArtFont', color: '#252525D0' }}>{ item.title }</View> >
<View className="w-full flex justify-between items-center space-x-2 text-xs"> {
<View className="flex items-center space-x-1 pb-1"> dataList.map(item => {
<View className="flex items-center"><Image src={onlineIcon} className="w-4 h-4"></Image></View> return (
<View>在线</View> <View
<View>3</View> className="px-4 py-2 m-2 w-[100% - 1rem] rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200"
onClick={() => {
console.log('跳转到-> ', item.url);
Taro.navigateTo({ url: item.url })
}}
>
<View className="w-12 h-12 relative top-1">
<Image src={item.img || img} className="w-12 h-12"></Image>
</View>
<View className="w-full flex flex-col justify-between items-start pb-1">
<View className=" text-base pb-1 pt-1" style={{ fontFamily: 'ArtFont', color: '#252525D0' }}>
<Text>{ item.title }</Text>
<Text style={{ marginLeft: '.8rem' }}>{ item.value }</Text>
</View> </View>
<View className="flex items-center space-x-1"> <View className="w-full flex justify-between items-center space-x-2 text-xs">
<View className="flex items-center"><Image src={offlineIcon} className="w-4 h-4"></Image></View> <View className="flex items-center space-x-1 pb-1">
<View>离线</View> <View className="flex items-center"><Image src={onlineIcon} className="w-4 h-4"></Image></View>
<View>3</View> <View>在线</View>
</View> <View>{item.online}</View>
<View className="flex items-center space-x-1"> </View>
<View className="flex items-center"><Image src={errorIcon} className="w-4 h-4"></Image></View> <View className="flex items-center space-x-1">
<View>故障</View> <View className="flex items-center"><Image src={offlineIcon} className="w-4 h-4"></Image></View>
<View>3</View> <View>离线</View>
<View>{item.offline}</View>
</View>
<View className="flex items-center space-x-1">
<View className="flex items-center"><Image src={errorIcon} className="w-4 h-4"></Image></View>
<View>故障</View>
<View>{item.error}</View>
</View>
</View> </View>
</View> </View>
</View> </View>
</View> )
) })
}) }
} </ScrollView>
</View> </View>
{/* <View className="flex flex-col space-y-3 p-2 rounded-sm" style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}>
</View> */}
</View> </View>
</View> </View>
) )

34
src/components/customized/tabWrapper/index.tsx
View File

@ -9,22 +9,24 @@ import Taro from "@tarojs/taro"
*/ */
const TabWrapper = ({ options, selectedId = '', callback }) => { const TabWrapper = ({ options, selectedId = '', callback }) => {
return ( return (
<View className="h-[2.4rem] flex px-2 py-1 overflow-auto items-center text-sm"> <View className="h-[2.4rem] px-2 py-1 flex overflow-auto text-sm">
{ <View className="flex items-center">
options.map((item:any) => { {
return ( options.map((item:any) => {
<View return (
className={`px-3 py-1 ${selectedId === item.id ? 'selected-tab' : ''}`} <View
key={item.id} className={`px-3 py-1 ${selectedId === item.id ? 'selected-tab' : ''}`}
style={{ color: 'white' }} key={item.id}
onClick={() => { style={{ color: 'white', whiteSpace: 'nowrap' }}
Taro.vibrateShort({ type: 'light' }) onClick={() => {
callback(item.id) Taro.vibrateShort({ type: 'light' })
}} callback(item.id)
>{ item.title }</View> }}
) >{ item.title }</View>
}) )
} })
}
</View>
</View> </View>
) )
} }

19
src/iotManager/apis/index.ts Normal file
View File

@ -0,0 +1,19 @@
import { request } from "src/config/axios"
// 获取实时数据 deviceType -> 设备类型 belongPark -> 园区ID belongPlot -> 地块ID
export const runTimeData = (data) => {
return request({
url: '/agriculture/big-screen/environmentData',
method: 'GET',
data
})
}
// 数据监测 deviceType -> 设备类型 belongPark -> 园区ID belongPlot -> 地块ID
export const dataMonitor = (data) => {
return request({
url: '/agriculture/big-screen/environmentView',
method: 'GET',
data
})
}

16
src/iotManager/soilMoisture/index.tsx
View File

@ -9,6 +9,7 @@ import IconLabelValue from "../../components/iot/iconLabelValue";
import SubTitle from "../../components/iot/subTitle"; import SubTitle from "../../components/iot/subTitle";
import BasicStatus from "../../components/iot/basicStatus"; import BasicStatus from "../../components/iot/basicStatus";
import PageWrapper from "../../components/customized/pageWrapper"; import PageWrapper from "../../components/customized/pageWrapper";
import TabWrapper from "../../components/customized/tabWrapper";
const GridContainer = ({ children }) => { const GridContainer = ({ children }) => {
return ( return (
@ -98,21 +99,8 @@ const SoilMoisture = () => {
return ( return (
<PageWrapper title="土壤墒情"> <PageWrapper title="土壤墒情">
<TabWrapper options={deviceList} selectedId={curDeviceId} callback={setCurDeviceId}></TabWrapper>
<View className="h-full flex flex-col px-1"> <View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</View>
)
})
}
</View>
<View className="h-full flex flex-col space-y-2 p-2 rounded-sm"> <View className="h-full flex flex-col space-y-2 p-2 rounded-sm">
<BasicInfoCard imgSrc={img} title={'土壤墒情传感器'} info={'BNYKLH09LK001'} status={true} /> <BasicInfoCard imgSrc={img} title={'土壤墒情传感器'} info={'BNYKLH09LK001'} status={true} />
<SubTitle title="实时数据" updateTime="2023-04-04" /> <SubTitle title="实时数据" updateTime="2023-04-04" />

5
src/pages/login/index.tsx
View File

@ -27,12 +27,9 @@ const getTenantId = (data) => {
const autoLoginCheck = async () => { const autoLoginCheck = async () => {
const expireTime = Taro.getStorageSync('expiresTime') const expireTime = Taro.getStorageSync('expiresTime')
const nowTime = new Date().valueOf() const nowTime = new Date().valueOf()
console.log('expireTime', expireTime);
console.log('nowTime', nowTime);
console.log('expireTime', expireTime - nowTime);
if (expireTime) { if (expireTime) {
if ((nowTime - expireTime) > 1000 * 60 * 15) { if ((expireTime - nowTime) > 1000 * 60 * 15) {
// 过期时间大于15分钟 // 过期时间大于15分钟
Taro.redirectTo({ url: '/basePage/index/index' }) Taro.redirectTo({ url: '/basePage/index/index' })
} else { } else {