feat: 功能完善

This commit is contained in:
Tony 2024-03-28 11:41:17 +08:00
parent cf8f4d72ad
commit 412fffe506
7 changed files with 58 additions and 43 deletions

View File

@ -20,11 +20,12 @@ const getDeviceList = (data) => {
const UrlMap = { const UrlMap = {
'气象监测': '/iotManager/weatherStation/index?id=1', '气象监测': '/iotManager/weatherStation/index?id=1',
'土壤监测': '/iotManager/soilMoisture/index?id=1', '土壤监测': '/iotManager/soilMoisture/index?id=1',
'虫情监测': '', '虫情监测': '/iotManager/bugMonitor/index',
'环境检测': '', '环境检测': '/iotManager/envMonitor/index',
'其他摄像头': '', '其他摄像头': '',
'棚内环境监测': '/iotManager/envMonitor/index?id=1', '棚内环境监测': '/iotManager/envMonitor/index?id=1',
'设备监控': '/iotManager/deviceMonitor/index?id=1' '设备监控': '/iotManager/deviceMonitor/index?id=1',
'增氧设备': '/iotManager/deviceMonitor/index'
} }
const getDeviceInfoCard = () => { const getDeviceInfoCard = () => {
@ -52,6 +53,8 @@ const Iot = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (selectedMenuId === 'all') { if (selectedMenuId === 'all') {
getDeviceInfoCard().then(({ data }) => { getDeviceInfoCard().then(({ data }) => {
console.log('物联网列表all->', data);
if (Array.isArray(data.category)) { if (Array.isArray(data.category)) {
setDataList(data.category.map((item, index) => ({ setDataList(data.category.map((item, index) => ({
id: index, id: index,
@ -70,6 +73,7 @@ const Iot = () => {
} }
if (!selectedMenuId) return; if (!selectedMenuId) return;
getDeviceList({ parkId: selectedMenuId }).then(({ data }) => { getDeviceList({ parkId: selectedMenuId }).then(({ data }) => {
console.log('物联网列表part->', data);
setDataList(data.map((item, index) => ({ setDataList(data.map((item, index) => ({
id: index, id: index,
title: item.categoryName, title: item.categoryName,

View File

@ -1,6 +1,6 @@
import { View } from "@tarojs/components" import { View } from "@tarojs/components"
const BasicStatus = (status = true) => { const BasicStatus = ({status = true}) => {
return ( return (
<View <View
style={{ backgroundColor: status ? '#0fc87c' : '#ff0000', 'color': 'white' }} style={{ backgroundColor: status ? '#0fc87c' : '#ff0000', 'color': 'white' }}

View File

@ -13,8 +13,6 @@ export const request = ({
if (isToken) header['Authorization'] = 'Bearer ' + Taro.getStorageSync('token') if (isToken) header['Authorization'] = 'Bearer ' + Taro.getStorageSync('token')
let requestParams = '?' let requestParams = '?'
if (method === 'GET') requestParams += stringify(data, { indices: false }) if (method === 'GET') requestParams += stringify(data, { indices: false })
console.log('requestParams', requestParams);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Taro.showLoading({ title: '加载中...' }) Taro.showLoading({ title: '加载中...' })
Taro.request({ Taro.request({

View File

@ -1,69 +1,82 @@
import { View, Image } from "@tarojs/components"; import { View, Image } from "@tarojs/components";
import PageWrapper from "../../components/customized/pageWrapper"; import PageWrapper from "../../components/customized/pageWrapper";
import { useState } from "react"; import { useEffect, useState } from "react";
import { request } from "../../config/axios";
import BasicStatus from "../../components/iot/basicStatus";
const getMonitorDevices = (data) => {
return request({
url: '/agriculture/big-screen/monitorDeviceByPark',
method: 'GET',
data
})
}
const DeviceInfoCard = ({ title, info, status, imgSrc }) => { const DeviceInfoCard = ({ title, info, status, imgSrc }) => {
return ( return (
<View <View
className="bg-white px-5 py-4 rounded-md shadow-xl mb-2" className="bg-white pb-2 px-5 py-4 rounded-md shadow-xl mb-2"
> >
<View className="flex space-x-4"> <View className="flex space-x-4">
<View className="w-16 h-14 border"> <View className="w-20 h-14">
<Image src={imgSrc} className="w-16 h-14"></Image> <Image
src={imgSrc}
className=" w-20 h-14"
style={{ objectFit: 'contain' }}
></Image>
</View> </View>
<View className="w-full"> <View className="w-full">
<View className="font-bold text-[.9rem]">{ title }</View> <View className="font-bold text-[.9rem]">{ title }</View>
<View className="text-[.8rem] text-slate-600 pb-1">{ info }</View> <View className="text-[.8rem] text-slate-600 pb-1">{ info }</View>
<View className="flex">{ status }</View> <View className="flex">
<BasicStatus status={status} />
</View>
</View> </View>
</View> </View>
<View className="w-full h-[1px] bg-slate-300 my-2"></View> <View className="w-full h-[1px] bg-slate-300 my-2"></View>
<View className="flex flex-row-reverse"> <View className="flex flex-row-reverse">
<View className="p-1 rounded-xl border" style={{ color: '#49d49b', 'borderColor': '#49d49b' }}></View> <View
className="p-1 px-3 rounded-xl border"
style={{
color: '#49d49b',
'borderColor': '#49d49b',
fontSize: '.8rem'
}}
></View>
</View> </View>
</View> </View>
) )
} }
const DeviceMonitor = () => { const DeviceMonitor = () => {
const [curDeviceId, setCurDeviceId] = useState('1') const [dataList, setDataList] = useState<Array<any>>([])
const deviceList = [ const getDataList = async () => {
{ const { data } = await getMonitorDevices({
id: '1', belongPark: '1769896538700668928',
title: '设备1' belongPlot: '1769908355099721728'
}, })
{ console.log('getDataList', data);
id: '2', setDataList(data)
title: '设备2' }
},
{
id: '3',
title: '设备3'
},
]
useEffect(() => { getDataList() }, [])
return ( return (
<PageWrapper title="设备监控"> <PageWrapper title="设备监控">
<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"> <View className="h-full overflow-auto p-3">
{ {
deviceList.map(item => { dataList.map(item => {
return ( return (
<View <DeviceInfoCard
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`} title={item.deviceName}
key={item.id} info={`经纬度:${item.longitude}${item.latitude}`}
style={{ color: 'white' }} status={item.deviceStatus === 'online'}
onClick={() => setCurDeviceId(item.id)} imgSrc={item.imgId}
>{ item.title }</View> />
) )
}) })
} }
</View> </View>
<View className="h-full overflow-auto p-3">
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度110.003129.323" status="NKLI179" imgSrc="http://img.img" />
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度110.003129.323" status="NKLI179" imgSrc="http://img.img" />
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度110.003129.323" status="NKLI179" imgSrc="http://img.img" />
</View>
</View> </View>
</PageWrapper> </PageWrapper>
) )

View File

@ -29,7 +29,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
<View className="w-full"> <View className="w-full">
<View className="font-bold text-[.9rem]">{ title }</View> <View className="font-bold text-[.9rem]">{ title }</View>
<View className="text-[.8rem] text-slate-600 pb-2">{ info }</View> <View className="text-[.8rem] text-slate-600 pb-2">{ info }</View>
<View className="flex">{ status ? BasicStatus() : '' }</View> <View className="flex">{ status ? <BasicStatus /> : '' }</View>
</View> </View>
</View> </View>
) )

View File

@ -30,7 +30,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
<View className="w-full"> <View className="w-full">
<View className="font-bold text-[.9rem]">{ title }</View> <View className="font-bold text-[.9rem]">{ title }</View>
<View className="text-[.8rem] text-slate-600 pb-2">{ info }</View> <View className="text-[.8rem] text-slate-600 pb-2">{ info }</View>
<View className="flex">{ status ? BasicStatus() : '' }</View> <View className="flex">{ status ? <BasicStatus /> : '' }</View>
</View> </View>
</View> </View>
) )

View File

@ -29,7 +29,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
<View className="w-full"> <View className="w-full">
<View className="font-bold text-[.9rem]">{ title }</View> <View className="font-bold text-[.9rem]">{ title }</View>
<View className="text-[.8rem] text-slate-600 pb-2">{ info }</View> <View className="text-[.8rem] text-slate-600 pb-2">{ info }</View>
<View className="flex">{ status ? BasicStatus() : '' }</View> <View className="flex">{ status ? <BasicStatus /> : '' }</View>
</View> </View>
</View> </View>
) )