feat: 功能完善
This commit is contained in:
parent
cf8f4d72ad
commit
412fffe506
@ -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,
|
||||||
|
@ -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' }}
|
||||||
|
@ -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({
|
||||||
|
@ -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.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>
|
</View>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user