feat: 功能完善
This commit is contained in:
parent
cf8f4d72ad
commit
412fffe506
@ -20,11 +20,12 @@ const getDeviceList = (data) => {
|
||||
const UrlMap = {
|
||||
'气象监测': '/iotManager/weatherStation/index?id=1',
|
||||
'土壤监测': '/iotManager/soilMoisture/index?id=1',
|
||||
'虫情监测': '',
|
||||
'环境检测': '',
|
||||
'虫情监测': '/iotManager/bugMonitor/index',
|
||||
'环境检测': '/iotManager/envMonitor/index',
|
||||
'其他摄像头': '',
|
||||
'棚内环境监测': '/iotManager/envMonitor/index?id=1',
|
||||
'设备监控': '/iotManager/deviceMonitor/index?id=1'
|
||||
'设备监控': '/iotManager/deviceMonitor/index?id=1',
|
||||
'增氧设备': '/iotManager/deviceMonitor/index'
|
||||
}
|
||||
|
||||
const getDeviceInfoCard = () => {
|
||||
@ -52,6 +53,8 @@ const Iot = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (selectedMenuId === 'all') {
|
||||
getDeviceInfoCard().then(({ data }) => {
|
||||
console.log('物联网列表all->', data);
|
||||
|
||||
if (Array.isArray(data.category)) {
|
||||
setDataList(data.category.map((item, index) => ({
|
||||
id: index,
|
||||
@ -70,6 +73,7 @@ const Iot = () => {
|
||||
}
|
||||
if (!selectedMenuId) return;
|
||||
getDeviceList({ parkId: selectedMenuId }).then(({ data }) => {
|
||||
console.log('物联网列表part->', data);
|
||||
setDataList(data.map((item, index) => ({
|
||||
id: index,
|
||||
title: item.categoryName,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { View } from "@tarojs/components"
|
||||
|
||||
const BasicStatus = (status = true) => {
|
||||
const BasicStatus = ({status = true}) => {
|
||||
return (
|
||||
<View
|
||||
style={{ backgroundColor: status ? '#0fc87c' : '#ff0000', 'color': 'white' }}
|
||||
|
||||
@ -13,8 +13,6 @@ export const request = ({
|
||||
if (isToken) header['Authorization'] = 'Bearer ' + Taro.getStorageSync('token')
|
||||
let requestParams = '?'
|
||||
if (method === 'GET') requestParams += stringify(data, { indices: false })
|
||||
console.log('requestParams', requestParams);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
Taro.showLoading({ title: '加载中...' })
|
||||
Taro.request({
|
||||
|
||||
@ -1,69 +1,82 @@
|
||||
import { View, Image } from "@tarojs/components";
|
||||
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 }) => {
|
||||
return (
|
||||
<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="w-16 h-14 border">
|
||||
<Image src={imgSrc} className="w-16 h-14"></Image>
|
||||
<View className="w-20 h-14">
|
||||
<Image
|
||||
src={imgSrc}
|
||||
className=" w-20 h-14"
|
||||
style={{ objectFit: 'contain' }}
|
||||
></Image>
|
||||
</View>
|
||||
<View className="w-full">
|
||||
<View className="font-bold text-[.9rem]">{ title }</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 className="w-full h-[1px] bg-slate-300 my-2"></View>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
const DeviceMonitor = () => {
|
||||
const [curDeviceId, setCurDeviceId] = useState('1')
|
||||
const deviceList = [
|
||||
{
|
||||
id: '1',
|
||||
title: '设备1'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '设备2'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '设备3'
|
||||
},
|
||||
]
|
||||
const [dataList, setDataList] = useState<Array<any>>([])
|
||||
const getDataList = async () => {
|
||||
const { data } = await getMonitorDevices({
|
||||
belongPark: '1769896538700668928',
|
||||
belongPlot: '1769908355099721728'
|
||||
})
|
||||
console.log('getDataList', data);
|
||||
setDataList(data)
|
||||
}
|
||||
|
||||
useEffect(() => { getDataList() }, [])
|
||||
return (
|
||||
<PageWrapper title="设备监控">
|
||||
<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 (
|
||||
<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>
|
||||
<DeviceInfoCard
|
||||
title={item.deviceName}
|
||||
info={`经纬度：${item.longitude}，${item.latitude}`}
|
||||
status={item.deviceStatus === 'online'}
|
||||
imgSrc={item.imgId}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
<View className="h-full overflow-auto p-3">
|
||||
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度：110.0031，29.323" status="NKLI179" imgSrc="http://img.img" />
|
||||
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度：110.0031，29.323" status="NKLI179" imgSrc="http://img.img" />
|
||||
<DeviceInfoCard title="监控摄像头-枪机" info="经纬度：110.0031，29.323" status="NKLI179" imgSrc="http://img.img" />
|
||||
</View>
|
||||
</View>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
||||
@ -29,7 +29,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
|
||||
<View className="w-full">
|
||||
<View className="font-bold text-[.9rem]">{ title }</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>
|
||||
)
|
||||
|
||||
@ -30,7 +30,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
|
||||
<View className="w-full">
|
||||
<View className="font-bold text-[.9rem]">{ title }</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>
|
||||
)
|
||||
|
||||
@ -29,7 +29,7 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
|
||||
<View className="w-full">
|
||||
<View className="font-bold text-[.9rem]">{ title }</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>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user