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

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 onlineIcon from '../../assets/images/icons/online.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 TabWrapper from "../../components/customized/tabWrapper"
import { request } from "../../config/axios"
import { ScrollView } from "@tarojs/components"
const getDeviceList = (data) => {
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) => {
return request({
url: '/agriculture/big-screen/getParkBaseInfo',
@ -30,6 +48,46 @@ const Iot = () => {
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 { data } = await getBaseInfo({ parentId: '0' })
if (Array.isArray(data)) setTopMenus([{
@ -43,94 +101,78 @@ const Iot = () => {
useEffect(() => {
getTopMenuList()
getDeviceList({
parkId: 1
}).then(res => {
console.log('getDeviceList', res);
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]
})))
}
})
}, [])
const dataList = [
{
id: '1',
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'
},
]
const [dataList, setDataList] = useState<Array<any>>([])
const [refreshTrigger, setRefreshTrigger] = useState(false)
return (
<View className="px-1 h-full">
<View className="h-full flex flex-col justify-start">
<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
className="w-full h-full"
scrollY
scrollWithAnimation
refresherEnabled
scrollLeft={10}
refresherBackground="#00000000"
refresherTriggered={refreshTrigger}
onRefresherRefresh={() => {
console.log('触发下拉刷新');
setRefreshTrigger(true)
refreshFunc().then(() => setRefreshTrigger(false))
}}
>
{
dataList.map(item => {
return (
<View
className="px-4 py-2 rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200"
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={img} className="w-12 h-12"></Image>
<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' }}>{ item.title }</View>
<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 className="w-full flex justify-between items-center space-x-2 text-xs">
<View className="flex items-center space-x-1 pb-1">
<View className="flex items-center"><Image src={onlineIcon} className="w-4 h-4"></Image></View>
<View>线</View>
<View>3</View>
<View>{item.online}</View>
</View>
<View className="flex items-center space-x-1">
<View className="flex items-center"><Image src={offlineIcon} className="w-4 h-4"></Image></View>
<View>线</View>
<View>3</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>3</View>
<View>{item.error}</View>
</View>
</View>
</View>
@ -138,7 +180,12 @@ const Iot = () => {
)
})
}
</ScrollView>
</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 File

@ -9,14 +9,15 @@ import Taro from "@tarojs/taro"
*/
const TabWrapper = ({ options, selectedId = '', callback }) => {
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 (
<View
className={`px-3 py-1 ${selectedId === item.id ? 'selected-tab' : ''}`}
key={item.id}
style={{ color: 'white' }}
style={{ color: 'white', whiteSpace: 'nowrap' }}
onClick={() => {
Taro.vibrateShort({ type: 'light' })
callback(item.id)
@ -26,6 +27,7 @@ const TabWrapper = ({ options, selectedId = '', callback }) => {
})
}
</View>
</View>
)
}

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
})
}

View File

@ -9,6 +9,7 @@ import IconLabelValue from "../../components/iot/iconLabelValue";
import SubTitle from "../../components/iot/subTitle";
import BasicStatus from "../../components/iot/basicStatus";
import PageWrapper from "../../components/customized/pageWrapper";
import TabWrapper from "../../components/customized/tabWrapper";
const GridContainer = ({ children }) => {
return (
@ -98,21 +99,8 @@ const SoilMoisture = () => {
return (
<PageWrapper title="土壤墒情">
<TabWrapper options={deviceList} selectedId={curDeviceId} callback={setCurDeviceId}></TabWrapper>
<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">
<BasicInfoCard imgSrc={img} title={'土壤墒情传感器'} info={'BNYKLH09LK001'} status={true} />
<SubTitle title="实时数据" updateTime="2023-04-04" />

View File

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