Compare commits
2 Commits
3fd1d4587b
...
c2b58175b4
Author | SHA1 | Date | |
---|---|---|---|
c2b58175b4 | |||
ce4c5d65f9 |
@ -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>
|
||||
)
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
19
src/iotManager/apis/index.ts
Normal file
19
src/iotManager/apis/index.ts
Normal 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
|
||||
})
|
||||
}
|
@ -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" />
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user