Tony/taro-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat：武隆鲁渝协作示范村数字化赋能 app研发

Browse Source
This commit is contained in:
Zxuyoubin 2024-04-02 17:56:04 +08:00
parent 2bf6c083b1
commit 1a902bb828
9 changed files with 704 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/basePage/equipment/index.tsx
View File

@ -1,12 +1,12 @@
import { View } from "@tarojs/components"
import { useState } from "react"
import { useEffect, useState } from "react"
import Taro from "@tarojs/taro"
import TabWrapper from "../../components/customized/tabWrapper"
import { ScrollView } from "@tarojs/components"
import { request } from "../../config/axios"
const EquipMent = () => {
const [selectedMenuId, setSelectedMenuId] = useState('all')
const topMenus = [
//获取基地
const [topMenus,setTopMenus] = useState([
{
id: 'all',
title: '全部'
@ -23,7 +23,23 @@ const EquipMent = () => {
id: '3',
title: '基地3'
},
]
])
const getDeviceInfoCard = (data) => {
return request({
url: '/agriculture/park-info/page',
method: 'GET',
data
})
}
useEffect(()=>{
getDeviceInfoCard({pageNo:1,pageSize:10}).then(res=>{
console.log(res,'获取基地');
// setTopMenus(res.data.list)
})
},[])
const [selectedMenuId, setSelectedMenuId] = useState('all')
const dataList = [
{

16
src/basePage/iot/index.tsx
View File

@ -18,13 +18,13 @@ const getDeviceList = (data) => {
}
const UrlMap = {
'气象监测': '/iotManager/weatherStation/index?id=1',
'土壤监测': '/iotManager/soilMoisture/index?id=1',
'虫情监测': '/iotManager/bugMonitor/index',
'环境检测': '/iotManager/envMonitor/index',
'气象监测': '/iotManager/weatherStation/index?id=',
'土壤监测': '/iotManager/soilMoisture/index?id=',
'虫情监测': '/iotManager/bugMonitor/index?id=',
'环境检测': '/iotManager/envMonitor/index?id=',
'其他摄像头': '',
'棚内环境监测': '/iotManager/envMonitor/index?id=1',
'设备监控': '/iotManager/deviceMonitor/index?id=1',
'棚内环境监测': '/iotManager/envMonitor/index?id=',
'监控设备': '/iotManager/deviceMonitor/index?id=',
'增氧设备': '/iotManager/deviceMonitor/index'
}
@ -64,7 +64,7 @@ const Iot = () => {
offline: item.offline,
error: item.fault,
img: item.imgId,
url: UrlMap[item.categoryName]
url: UrlMap[item.categoryName]+item.deviceType
})))
}
resolve()
@ -82,7 +82,7 @@ const Iot = () => {
offline: item.offline,
error: item.fault,
img: item.imgId,
url: UrlMap[item.categoryName]
url: UrlMap[item.categoryName]+item.deviceType
})))
resolve()
}).catch(() => { resolve() })

24
src/basePage/msgCenter/index.tsx
View File

@ -20,7 +20,31 @@ const MsgCenter = () => {
setContList(res.data)
})
}, [])
const refreshFunc = ():Promise<void> => {
return new Promise((resolve, reject) => {
if (selectedMenuId === 'all') {
getList().then(({ data }) => {
console.log('消息列表all->', data);
setContList(data)
resolve()
}).catch(() => { resolve() })
return
}
if (selectedMenuId==='2') return setContList([]);
if (selectedMenuId==='1'){
getList().then(({ data }) => {
console.log('消息列表预警信息part->', data);
setContList(data)
resolve()
}).catch(() => { resolve() })
}
})
}
useEffect(() => {
refreshFunc()
}, [selectedMenuId])
const topMenus = [
{
id: 'all',

299
src/iotManager/bugMonitor/index.tsx
View File

@ -1,12 +1,303 @@
import { View } from "@tarojs/components"
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef,useEffect } from "react";
import img from '../../assets/images/img.png'
import { icon1, icon2, icon3, icon4,icon5,icon6} from "../../assets/images/icons/data";
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
import echarts from '../../assets/js/echarts'
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 { request } from "../../config/axios/index"
const BugMonitor = () => {
const GridContainer = ({ children }) => {
return (
<View className="border border-slate-200 px-4 py-3 rounded-md shadow-xl grid grid-cols-2">
{ children }
</View>
)
}
const BasicInfoCard = ({ title, info, status, imgSrc }) => {
return (
<View
className="bg-white px-4 py-3 rounded-md shadow-xl flex space-x-4"
>
<View className="w-16 h-14">
<Image src={imgSrc} className="w-16 h-14"></Image>
</View>
<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>
</View>
)
}
const EnvMonitor = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
console.log(baseId,'id');
//获取设备
const getEquipment=(data)=>{
return request({
url:'/agriculture/app/getDevice',
method:'GET',
data
})
}
const [deviceList,setDataList] = useState([
{
id: '1',
title: '设备1'
},
{
id: '2',
title: '设备2'
},
{
id: '3',
title: '设备3'
},
])
const [deviceObj,setDeviceObj]=useState({})
useEffect(()=>{
getEquipment({deviceType:baseId}).then(res=>{
console.log(res,'shbei');
setDataList(res.data)
// getList2(res.data[0].id)
// getChart2(res.data[0].id)
// setDeviceObj(res.data[0])
})
},[])
const [contObj, setContObj] = useState({})
//实时数据接口
const getList=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceNewData',
method:'GET',
data
})
}
const getList2=(id)=>{
getList({equipmentCode:id,equipmentType:'15'}).then(res=>{
console.log(res,'获取数据');
setContObj(res.data)
})
}
//获取echarts
let [time,setTime]=useState([])
let [yAxisData,setyAxisData]=useState([])
const [chartList, setChartList] = useState([])
const getChart=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceDataView',
method:'GET',
data
})
}
const getChart2=async (id)=>{
let res= await getChart({equipmentCode:id,equipmentType:'15'})
console.log(res,'获取ecahrts');
setChartList(res.data)
let time2=[]
let list=[]
res.data.forEach(item => {
time2.push(item.reportDate)
list.push(item.temperature)
});
setTime(time2.reverse())
setyAxisData(list.reverse())
}
const [curDeviceId, setCurDeviceId] = useState('1')
const [selectedLabel, setSelectedLabel] = useState('1')
const tabChart=(id)=>{
setSelectedLabel(id)
if(id==1){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.temperature)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==2){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.humidity)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==3){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.lighting)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==4){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.airPressure)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==5){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.rainfall)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==6){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.windSpeed)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}
}
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
legend: {
top: 50,
left: 'center',
z: 100
},
tooltip: {
trigger: 'axis',
show: true,
confine: true
},
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [
{
data: yAxisData,
type: 'line'
}
],
grid: {
top: '8%',
bottom: '9%',
right: '5%'
}
}
// 数据监测顶部标签
const [dataLabel, setDataLabel] = useState([
{ id: '1', label: '温度' },
{ id: '2', label: '湿度' },
{ id: '3', label: '光照' },
{ id: '4', label: '气压' },
{ id: '5', label: '雨量' },
{ id: '6', label: '风速' },
]);
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
setDeviceObj(val)
}
return (
<PageWrapper title="虫情监测">
<View></View>
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map((item,index) => {
return (
<View
className={`p-1 px-3 ${curDeviceId === index+1 ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => tabCli(index,item)}
>{ item.deviceName }</View>
)
})
}
</View>
<View className="h-full flex flex-col space-y-2 p-2 rounded-sm">
<BasicInfoCard imgSrc={deviceObj.imgId} title={deviceObj.deviceName} info={deviceObj.deviceCode} status={true} />
<SubTitle title="实时数据" updateTime="2023-04-04" />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={contObj.temperature} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.humidity} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.lighting} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.airPressure} label={'气压'} unit={'℃'} img={icon4} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.rainfall} label={'降雨量'} unit={'mm'} img={icon5} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.co2Density} label={'CO₂'} unit={'mmol/L'} img={icon6} />
</View>
</GridContainer>
<SubTitle title="数据监测" />
<View className="border border-slate-200 px-4 py-3 rounded-md shadow-xl">
<View
className="flex flex-row justify-start border-b-2 items-end space-x-1 text-sm pb-1"
style={{
borderColor: '#0fc87c'
}}
>
{
dataLabel.map(item => {
return (
<View
className="px-1"
style={{
'color': selectedLabel === item.id ? 'white' : 'black',
'backgroundColor': selectedLabel === item.id ? '#0fc87c' : 'white'
}}
onClick={() => tabChart(item.id)}
>{ item.label }</View>
)
})
}
</View>
<View className="w-full h-[400rpx] mt-1">
<Echarts
echarts={echarts}
option={option}
ref={echartsRef}
// isPage={false}
// style自定义设置echarts宽高
style={{width: '100%', height: '100%'}}
/>
</View>
</View>
</View>
</View>
</PageWrapper>
)
}
export default BugMonitor;
export default EnvMonitor;

21
src/iotManager/deviceMonitor/index.tsx
View File

@ -3,7 +3,6 @@ import PageWrapper from "../../components/customized/pageWrapper";
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',
@ -11,8 +10,8 @@ const getMonitorDevices = (data) => {
data
})
}
const DeviceInfoCard = ({ title, info, status, imgSrc }) => {
return (
<View
className="bg-white pb-2 px-5 py-4 rounded-md shadow-xl mb-2"
@ -49,23 +48,23 @@ const DeviceInfoCard = ({ title, info, status, imgSrc }) => {
}
const DeviceMonitor = () => {
const [dataList, setDataList] = useState<Array<any>>([])
const getDataList = async () => {
const { data } = await getMonitorDevices({
belongPark: '1769896538700668928',
belongPlot: '1769908355099721728'
let [deviceList,setDataList]=useState([])
const getList=()=>{
getMonitorDevices({}).then(res=>{
console.log(res,'设备监控');
setDataList(res.data)
})
console.log('getDataList', data);
setDataList(data)
}
useEffect(()=>{
getList()
},[])
useEffect(() => { getDataList() }, [])
return (
<PageWrapper title="设备监控">
<View className="h-full flex flex-col px-1">
<View className="h-full overflow-auto p-3">
{
dataList.map(item => {
deviceList.map(item => {
return (
<DeviceInfoCard
title={item.deviceName}

165
src/iotManager/envMonitor/index.tsx
View File

@ -1,14 +1,15 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef } from "react";
import { useState, useRef,useEffect } from "react";
import img from '../../assets/images/img.png'
import { icon1, icon2, icon3, icon4 } from "../../assets/images/icons/data";
import { icon1, icon2, icon3, icon4,icon5,icon6} from "../../assets/images/icons/data";
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
import echarts from '../../assets/js/echarts'
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 { request } from "../../config/axios/index"
const GridContainer = ({ children }) => {
return (
@ -37,8 +38,16 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
const EnvMonitor = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
console.log(baseId,'id');
//获取设备
const getEquipment=(data)=>{
return request({
url:'/agriculture/app/getDevice',
method:'GET',
data
})
}
const [deviceList,setDataList] = useState([
{
id: '1',
title: '设备1'
@ -51,8 +60,119 @@ const EnvMonitor = () => {
id: '3',
title: '设备3'
},
]
])
const [deviceObj,setDeviceObj]=useState({})
useEffect(()=>{
getEquipment({deviceType:baseId}).then(res=>{
console.log(res,'shbei');
setDataList(res.data)
getList2(res.data[0].id)
getChart2(res.data[0].id)
setDeviceObj(res.data[0])
})
},[])
const [contObj, setContObj] = useState({})
//实时数据接口
const getList=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceNewData',
method:'GET',
data
})
}
const getList2=(id)=>{
getList({equipmentCode:id,equipmentType:'15'}).then(res=>{
console.log(res,'获取数据');
setContObj(res.data)
})
}
//获取echarts
let [time,setTime]=useState([])
let [yAxisData,setyAxisData]=useState([])
const [chartList, setChartList] = useState([])
const getChart=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceDataView',
method:'GET',
data
})
}
const getChart2=async (id)=>{
let res= await getChart({equipmentCode:id,equipmentType:'15'})
console.log(res,'获取ecahrts');
setChartList(res.data)
let time2=[]
let list=[]
res.data.forEach(item => {
time2.push(item.reportDate)
list.push(item.temperature)
});
setTime(time2.reverse())
setyAxisData(list.reverse())
}
const [curDeviceId, setCurDeviceId] = useState('1')
const [selectedLabel, setSelectedLabel] = useState('1')
const tabChart=(id)=>{
setSelectedLabel(id)
if(id==1){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.temperature)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==2){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.humidity)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==3){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.lighting)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==4){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.airPressure)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==5){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.rainfall)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==6){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.windSpeed)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}
}
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
legend: {
@ -67,14 +187,14 @@ const EnvMonitor = () => {
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: time
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
data: yAxisData,
type: 'line'
}
],
@ -94,40 +214,49 @@ const EnvMonitor = () => {
{ id: '5', label: '雨量' },
{ id: '6', label: '风速' },
]);
const [selectedLabel, setSelectedLabel] = useState('1')
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
setDeviceObj(val)
}
return (
<PageWrapper title="棚内环境监测">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
deviceList.map((item,index) => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
className={`p-1 px-3 ${curDeviceId === index+1 ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</View>
onClick={() => tabCli(index,item)}
>{ item.deviceName }</View>
)
})
}
</View>
<View className="h-full flex flex-col space-y-2 p-2 rounded-sm">
<BasicInfoCard imgSrc={img} title={'大棚环境监测一体机'} info={'BNYKLH09LK001'} status={true} />
<BasicInfoCard imgSrc={deviceObj.imgId} title={deviceObj.deviceName} info={deviceObj.deviceCode} status={true} />
<SubTitle title="实时数据" updateTime="2023-04-04" />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
<IconLabelValue value={contObj.temperature} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
<IconLabelValue value={contObj.humidity} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
<IconLabelValue value={contObj.lighting} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
<IconLabelValue value={contObj.airPressure} label={'气压'} unit={'℃'} img={icon4} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.rainfall} label={'降雨量'} unit={'mm'} img={icon5} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.co2Density} label={'CO₂'} unit={'mmol/L'} img={icon6} />
</View>
</GridContainer>
<SubTitle title="数据监测" />
@ -147,7 +276,7 @@ const EnvMonitor = () => {
'color': selectedLabel === item.id ? 'white' : 'black',
'backgroundColor': selectedLabel === item.id ? '#0fc87c' : 'white'
}}
onClick={() => setSelectedLabel(item.id)}
onClick={() => tabChart(item.id)}
>{ item.label }</View>
)
})

31
src/iotManager/soilMoisture/index.tsx
View File

@ -1,6 +1,6 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef } from "react";
import { useState, useRef, useEffect } from "react";
import img from '../../assets/images/img.png'
import { icon1, icon2, icon3, icon4 } from "../../assets/images/icons/data";
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
@ -10,6 +10,7 @@ import SubTitle from "../../components/iot/subTitle";
import BasicStatus from "../../components/iot/basicStatus";
import PageWrapper from "../../components/customized/pageWrapper";
import TabWrapper from "../../components/customized/tabWrapper";
import { request } from "../../config/axios/index"
const GridContainer = ({ children }) => {
return (
@ -38,8 +39,9 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
const SoilMoisture = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
console.log(baseId,'id')
//获取设备
const [deviceList,setDeviceList ]= useState([
{
id: '1',
title: '设备1'
@ -52,7 +54,22 @@ const SoilMoisture = () => {
id: '3',
title: '设备3'
},
]
])
const getEquipment=(data)=>{
return request({
url:'/agriculture/app/getDevice',
method:'GET',
data
})
}
useEffect(()=>{
getEquipment({deviceType:baseId}).then(res=>{
console.log(res,'huoqushebei');
setDeviceList(res.data)
})
},[])
const [curDeviceId, setCurDeviceId] = useState('1')
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
@ -90,10 +107,8 @@ const SoilMoisture = () => {
const [dataLabel, setDataLabel] = useState([
{ id: '1', label: '温度' },
{ id: '2', label: '湿度' },
{ id: '3', label: '光照' },
{ id: '4', label: '气压' },
{ id: '5', label: '雨量' },
{ id: '6', label: '风速' },
{ id: '3', label: 'PH' },
{ id: '4', label: 'EC' },
]);
const [selectedLabel, setSelectedLabel] = useState('1')

187
src/iotManager/weatherStation/index.tsx
View File

@ -1,15 +1,15 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef } from "react";
import { useState, useRef,useEffect } from "react";
import img from '../../assets/images/img.png'
import { icon1, icon2, icon3, icon4 } from "../../assets/images/icons/data";
import { icon1, icon2, icon3, icon4,icon5,icon6 } from "../../assets/images/icons/data";
import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
import echarts from '../../assets/js/echarts'
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 { request } from "../../config/axios/index"
const GridContainer = ({ children }) => {
return (
<View className="border border-slate-200 px-4 py-3 rounded-md shadow-xl grid grid-cols-2">
@ -17,8 +17,8 @@ const GridContainer = ({ children }) => {
</View>
)
}
const BasicInfoCard = ({ title, info, status, imgSrc }) => {
return (
<View
className="bg-white px-4 py-3 rounded-md shadow-xl flex space-x-4"
@ -36,9 +36,19 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
}
const WeatherStation = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
const baseId = Taro.getCurrentInstance().router?.params || 0; // 基地id
console.log(baseId,'id');
let [deviceOj,setDeviceObj]=useState({})
//获取设备
const getEquipment=(data)=>{
return request({
url:'/agriculture/app/getDevice',
method:'GET',
data
})
}
// let [ Equipment setEquipment]=useState({})
const [deviceList,setDeviceList] =useState([
{
id: '1',
title: '设备1'
@ -51,9 +61,129 @@ const WeatherStation = () => {
id: '3',
title: '设备3'
},
]
])
useEffect(()=>{
getEquipment({deviceType:baseId.id}).then(res=>{
console.log(res,'获取设备');
setDeviceList(res.data)
getList2(res.data[0].id)
getChart2(res.data[0].id)
setDeviceObj(res.data[0])
})
},[])
const [contObj, setContObj] = useState({})
//实时数据接口
const getList=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceNewData',
method:'GET',
data
})
}
//获取echarts
let [time,setTime]=useState([])
let [yAxisData,setyAxisData]=useState([])
const [chartList, setChartList] = useState([])
const getChart=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceDataView',
method:'GET',
data
})
}
//获取实时数据
const getList2=(id)=>{
getList({equipmentCode:id,equipmentType:'14'}).then(res=>{
console.log(res,'获取数据');
setContObj(res.data)
})
}
const getChart2=(id)=>{
getChart({equipmentCode:id,equipmentType:'14'}).then(res=>{
console.log(res,'获取ecahrts');
setChartList(res.data)
let time=[]
let list=[]
res.data.forEach(item => {
time.push(item.reportDate)
list.push(item.temperature)
});
setTime(time.reverse())
setyAxisData(list.reverse())
})
}
const [curDeviceId, setCurDeviceId] = useState('1')
const echartsRef = useRef<EchartsHandle>(null)
const [selectedLabel, setSelectedLabel] = useState('1')
const tabChart=(id)=>{
setSelectedLabel(id)
if(id==1){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.temperature)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==2){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.humidity)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==3){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.lighting)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==4){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.airPressure)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==5){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.rainfall)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}else if(id==6){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.windSpeed)
});
setTime(time.reverse())
setyAxisData(list.reverse())
}
}
const option: EChartOption = {
legend: {
top: 50,
@ -67,14 +197,14 @@ const WeatherStation = () => {
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: time
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
data: yAxisData,
type: 'line'
}
],
@ -94,40 +224,53 @@ const WeatherStation = () => {
{ id: '5', label: '雨量' },
{ id: '6', label: '风速' },
]);
const [selectedLabel, setSelectedLabel] = useState('1')
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
console.log(val,'shaixuant');
console.log(index,'shaixuant');
setDeviceObj(deviceList[index])
getList2(deviceList[index].id)
getChart2(deviceList[index].id)
}
return (
<PageWrapper title="气象站">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
deviceList.map((item,index) => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
className={`p-1 px-3 ${curDeviceId === index+1 ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</View>
onClick={() => tabCli(index,item)}
>{ item.deviceName }</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" />
<BasicInfoCard imgSrc={deviceOj.imgId} title={deviceOj.deviceName} info={deviceOj.deviceCode} status={true} />
<SubTitle title="实时数据" updateTime={contObj.reportDate} />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
<IconLabelValue value={contObj.temperature} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
<IconLabelValue value={contObj.humidity} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
<IconLabelValue value={contObj.lighting} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
<IconLabelValue value={contObj.airPressure} label={'气压'} unit={'℃'} img={icon4} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.rainfall} label={'降水量'} unit={'℃'} img={icon4} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={contObj.windSpeed} label={'风速'} unit={'℃'} img={icon4} />
</View>
</GridContainer>
<SubTitle title="数据监测" />
@ -147,7 +290,7 @@ const WeatherStation = () => {
'color': selectedLabel === item.id ? 'white' : 'black',
'backgroundColor': selectedLabel === item.id ? '#0fc87c' : 'white'
}}
onClick={() => setSelectedLabel(item.id)}
onClick={() => tabChart(item.id)}
>{ item.label }</View>
)
})

16
src/msgManager/msgDetail/index.tsx
View File

@ -32,15 +32,15 @@ const MsgDetail = () => {
<View className='detail rounded-md shadow-xl' style={{backgroundColor:'#fff'}}>
<View className='detailTop'>
<Image src={rang} className='w-12 h-12'></Image>
<View style={{marginLeft:'20px',fontWeight:700}}>{obj.warnInfo}</View>
<View style={{marginLeft:'20px',fontWeight:700}}>{obj.warnTitle}</View>
</View>
<View style={{marginTop:'15px'}}>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>报警内容： 1号棚内虫害数量接近阈值数量报警</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>报警时间： 2024/3/13 16:30</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>设备编号： DHTUNBVO98K327</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>当前值： 1360</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>阈值： 900-1400</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>建议： 打开灭蚊灯</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>报警内容： {obj.warnInfo}</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>报警时间： {new Date().toLocaleString(obj.warnTime)}</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>设备编号： {obj.deviceCode}</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>当前值： {obj.currentValue+obj.warnUnit}</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>阈值：{obj.threshold+obj.warnUnit}</View>
<View style={{marginTop:'10px',fontWeight:600,fontSize:'12px'}}>建议： {obj.dealInfo}</View>
</View>
</View>
<View className='detail rounded-md shadow-xl' style={{marginTop:'15px',backgroundColor:'#fff'}}>
@ -49,7 +49,7 @@ const MsgDetail = () => {
<View style={{marginLeft:'20px',fontWeight:700}}>影像</View>
</View>
<View style={{width:'98%',height:'150px',margin:'auto'}}>
<Image src={image} style={{width:'100%',height:'100%'}}></Image>
<Image src={obj.imgId} style={{width:'100%',height:'100%'}}></Image>
</View>
</View>
</View>