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-03 17:30:56 +08:00
parent 1a902bb828
commit 2669fbe488
6 changed files with 239 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,14 @@ import Taro from "@tarojs/taro"
import TabWrapper from "../../components/customized/tabWrapper"
import { ScrollView } from "@tarojs/components"
import { request } from "../../config/axios"
//获取设备
const getdevice=(data)=>{
return request({
url:'/agriculture/check-logs/getCountPageByBaseId',
method:'GET',
data
})
}
const EquipMent = () => {
//获取基地
const [topMenus,setTopMenus] = useState([
@ -31,17 +39,7 @@ const EquipMent = () => {
data
})
}
useEffect(()=>{
getDeviceInfoCard({pageNo:1,pageSize:10}).then(res=>{
console.log(res,'获取基地');
// setTopMenus(res.data.list)
})
},[])
const [selectedMenuId, setSelectedMenuId] = useState('all')
const dataList = [
const [dataList,setDataList] = useState([
{
id: '1',
},
@ -51,7 +49,30 @@ const EquipMent = () => {
{
id: '3',
},
]
])
const getdevice2=(id)=>{
getdevice({pageNo:1,pageSize:10,baseId:id}).then(res=>{
console.log(res,'获取数据');
setDataList(res.data.list)
})
}
useEffect(()=>{
getDeviceInfoCard({}).then(res=>{
console.log(res,'获取基地');
setTopMenus(res.data.list.map((item,index)=>({
title:item.name,
id:index,
id2:item.id
})).reverse())
getdevice2(res.data.list.reverse()[1].id)
})
},[])
const [selectedMenuId, setSelectedMenuId] = useState('all')
const [refreshTrigger, setRefreshTrigger] = useState(false)
const refreshFunc = (): Promise<void> => {
@ -89,15 +110,15 @@ const EquipMent = () => {
<Image src={img} className="w-12 h-12"></Image>
</View> */}
<View className="w-full flex flex-col justify-between items-start pb-1">
<View className="text-lg pb-1">气象站</View>
<View className="text-lg pb-1">{item.categoryName}</View>
<View className="w-full flex items-center space-x-8">
<View className="flex items-center space-x-2">
<View>已巡检</View>
<View style={{ color: 'green' }}>3</View>
<View style={{ color: 'green' }}>{item.finishCheckNum }</View>
</View>
<View className="flex items-center space-x-2">
<View>未巡检</View>
<View style={{ color: 'red' }}>3</View>
<View style={{ color: 'red' }}>{item.unFinishCheckNum}</View>
</View>
</View>
</View>
@ -105,7 +126,7 @@ const EquipMent = () => {
className="rounded-xl w-20 bg-green-500 text-center py-1"
style={{ color: 'white' }}
onClick={() => {
Taro.navigateTo({ url: '/inspectionManager/inspection/index?id=' + item.id })
Taro.navigateTo({ url: `/inspectionManager/inspection/index?id=${topMenus[1].id2}&categoryId=${item.categoryId}` })
}}
>去巡检</View>
</View>

49
src/inspectionManager/inspection/index.tsx
View File

@ -1,9 +1,22 @@
import { View, Image } from "@tarojs/components"
import { useState } from "react"
import { useEffect, useState } from "react"
import Taro from "@tarojs/taro"
import PageWrapper from "../../components/customized/pageWrapper"
import { request } from "../../config/axios"
//获取巡检设备
const getCheckDeviceBySomet=(data)=>{
return request({
url:'/agriculture/check-logs/getCheckDeviceBySome',
method:'GET',
data
})
}
const EquipMent = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
const categoryId2 = Taro.getCurrentInstance().router?.params.categoryId || 0; // 基地id
const [selectedMenuId, setSelectedMenuId] = useState('all')
const topMenus = [
{
@ -16,7 +29,7 @@ const EquipMent = () => {
}
]
const dataList = [
const [dataList,setDataList] = useState([
{
id: '1',
},
@ -26,7 +39,27 @@ const EquipMent = () => {
{
id: '3',
},
]
])
//获取数据
useEffect(()=>{
getList('0')
},[])
const getList=(id)=>{
getCheckDeviceBySomet({pageNo:1,pageSize:10,base:baseId,categoryId:categoryId2,inspectionState:id }).then(res=>{
console.log(res,'huoqushuju');
setDataList(res.data.list)
})
}
const tabCli=(id)=>{
setSelectedMenuId(id)
console.log(id,'tab id');
if(id=='1'){
getList('0')
}else{
getList('1')
}
}
return (
<PageWrapper title="气象站">
<View className="p-1 h-full">
@ -39,7 +72,7 @@ const EquipMent = () => {
className={`p-1 px-3 ${selectedMenuId === item.id ? 'border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setSelectedMenuId(item.id)}
onClick={() => tabCli(item.id)}
>{ item.title }</View>
)
})
@ -53,8 +86,8 @@ const EquipMent = () => {
className="py-2 pt-0 rounded-md shadow-xl bg-white relative"
>
<Image src={'https://picx.zhimg.com/70/v2-76efadc2e5b562f6f727521aedbb31ef_1440w.image?source=172ae18b&biz_tag=Post'} className="w-full h-[6rem] rounded-md"></Image>
<View className="text-lg px-4 text-bold">设备1</View>
<View className="text-sm px-4" style={{ color: '#00000090' }}>上次巡检 2023-1-11</View>
<View className="text-lg px-4 text-bold">{item.equName}</View>
<View className="text-sm px-4" style={{ color: '#00000090' }}>上次巡检 {item.inspectionTime}</View>
<View className="w-full px-4 flex justify-between items-start py-2 space-x-1">
<View
className="rounded-xl w-20 bg-green-500 text-center py-1"
@ -75,7 +108,7 @@ const EquipMent = () => {
className="absolute left-0 top-0 text-white p-1 text-sm px-2"
style={{ backgroundColor: '#0FC87C', color: 'white', borderRadius: '.3rem 0 .3rem 0' }}
>
{ '在线' }
{ item.inspectionState=='1'?'在线':'离线'}
</View>
</View>
)

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

@ -66,112 +66,69 @@ const EnvMonitor = () => {
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])
setDeviceObj(res.data[0])
getList2({id:res.data[0].id})
})
},[])
const [contObj, setContObj] = useState({})
let [chartList,setChartList]=useState([])
let [time,setTime]=useState([])
let [yAxisData,setyAxisData]=useState([])
//实时数据接口
const getList=(data)=>{
return request({
url:'/agriculture/big-screen/getDeviceNewData',
url:'/agriculture/app/getInsectDataById',
method:'GET',
data
})
}
const getList2=(id)=>{
getList({equipmentCode:id,equipmentType:'15'}).then(res=>{
getList(id).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)
setChartList(res.data.list)
let time2=[]
let list=[]
res.data.forEach(item => {
time2.push(item.reportDate)
list.push(item.temperature)
});
setTime(time2.reverse())
setyAxisData(list.reverse())
let data=[]
res.data.list.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.insectPestNumber)
})
setTime(time2)
setyAxisData(data)
})
}
const [curDeviceId, setCurDeviceId] = useState('1')
const [selectedLabel, setSelectedLabel] = useState('1')
const tabChart=(id)=>{
setSelectedLabel(id)
let time2=[]
let list=[]
if(id==1){
let time=[]
let list=[]
chartList.forEach(item => {
time.push(item.reportDate)
list.push(item.temperature)
time2.push(item.gatherHour)
list.push(item.insectPestNumber)
});
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)
time2.push(item.gatherHour)
list.push(item.insectPestKind)
});
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)
time2.push(item.gatherHour)
list.push(item.insectTemperature)
});
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)
time.push(item.gatherHour)
list.push(item.dryingTemperature)
});
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())
}
setTime(time2)
setyAxisData(list)
}
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
@ -195,7 +152,11 @@ const EnvMonitor = () => {
series: [
{
data: yAxisData,
type: 'line'
type: 'line',
symbol:'none',
areaStyle:{
color:'#5470c6'
}
}
],
grid: {
@ -207,12 +168,10 @@ const EnvMonitor = () => {
// 数据监测顶部标签
const [dataLabel, setDataLabel] = useState([
{ id: '1', label: '温度' },
{ id: '2', label: '湿度' },
{ id: '3', label: '光照' },
{ id: '4', label: '气压' },
{ id: '5', label: '雨量' },
{ id: '6', label: '风速' },
{ id: '1', label: '数量' },
{ id: '2', label: '种类' },
{ id: '3', label: '杀虫仓温度℃' },
{ id: '4', label: '烘干仓温度℃' },
]);
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
@ -237,7 +196,7 @@ const EnvMonitor = () => {
}
</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} />
<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">

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

@ -195,7 +195,11 @@ const EnvMonitor = () => {
series: [
{
data: yAxisData,
type: 'line'
type: 'line',
symbol:'none',
areaStyle:{
color:'#5470c6'
}
}
],
grid: {
@ -217,7 +221,8 @@ const EnvMonitor = () => {
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
setDeviceObj(val)
getChart2(val.id)
getList2(val.id)
}
return (
<PageWrapper title="棚内环境监测">

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

@ -2,7 +2,7 @@ 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 } from "../../assets/images/icons/data";
import { icon1, icon2, icon3, icon4,icon5 } 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";
@ -39,7 +39,6 @@ const BasicInfoCard = ({ title, info, status, imgSrc }) => {
const SoilMoisture = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
console.log(baseId,'id')
//获取设备
const [deviceList,setDeviceList ]= useState([
{
@ -55,6 +54,11 @@ const SoilMoisture = () => {
title: '设备3'
},
])
const [deviceInfo,setDeviceInfo]=useState([])
const [curDeviceId, setCurDeviceId] = useState('1')
let [chartList,setChartList]=useState([])
let [time,setTime]=useState([])
let [yAxisData,setyAxisData]=useState([])
const getEquipment=(data)=>{
return request({
url:'/agriculture/app/getDevice',
@ -62,15 +66,74 @@ const SoilMoisture = () => {
data
})
}
const getList=async ()=>{
let {data}=await getEquipment({deviceType:baseId})
console.log(data,'huoqushebei');
setDeviceList(data)
setDeviceInfo(data[0])
getData2({id:data[0].id})
}
useEffect(()=>{
getEquipment({deviceType:baseId}).then(res=>{
console.log(res,'huoqushebei');
setDeviceList(res.data)
})
getList()
},[])
const [curDeviceId, setCurDeviceId] = useState('1')
//获取实时数据
const getData=(data)=>{
return request({
url:'/agriculture/app/getSoilDataById',
method:'GET',
data
})
}
let [soilObj,setSoilObj]=useState({})
const getData2=(id)=>{
getData(id).then(res=>{
console.log(res,'获取实时数据');
setSoilObj(res.data)
setChartList(res.data.list)
let time2= []
let data=[]
res.data.list.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilTemperature)
})
setTime(time2)
setyAxisData(data)
})
}
const tabChart=(id)=>{
setSelectedLabel(id)
let time2= []
let data=[]
if(id==1){
chartList.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilTemperature)
})
}else if(id==2){
chartList.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilHumidity)
})
}else if(id==3){
chartList.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilPh)
})
}else if(id==4){
chartList.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilEc)
})
}else{
chartList.forEach(item=>{
time2.push(item.gatherHour)
data.push(item.soilDepth)
})
}
setTime(time2)
setyAxisData(data)
}
const echartsRef = useRef<EchartsHandle>(null)
const option: EChartOption = {
legend: {
@ -85,15 +148,19 @@ const SoilMoisture = () => {
},
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],
type: 'line'
data: yAxisData,
type: 'line',
symbol:'none',
areaStyle:{
color:'#5470c6'
}
}
],
grid: {
@ -109,28 +176,49 @@ const SoilMoisture = () => {
{ id: '2', label: '湿度' },
{ id: '3', label: 'PH' },
{ id: '4', label: 'EC' },
{ id: '5', label: '土壤深度' },
]);
const [selectedLabel, setSelectedLabel] = useState('1')
const tabCli=(index,val)=>{
setCurDeviceId(index+1)
getData2({id:val.id})
setDeviceInfo(val)
}
return (
<PageWrapper title="土壤墒情">
<TabWrapper options={deviceList} selectedId={curDeviceId} callback={setCurDeviceId}></TabWrapper>
<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 px-1">
<View className="h-full flex flex-col space-y-2 p-2 rounded-sm">
<BasicInfoCard imgSrc={img} title={'土壤墒情传感器'} info={'BNYKLH09LK001'} status={true} />
<BasicInfoCard imgSrc={deviceInfo?.imgId} title={deviceInfo?.deviceName} info={deviceInfo?.deviceCode} status={deviceInfo?.deviceStatus=='online'} />
<SubTitle title="实时数据" updateTime="2023-04-04" />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
<IconLabelValue value={soilObj.soilTemperature} label={'土壤温度'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
<IconLabelValue value={soilObj.soilHumidity} label={'土壤湿度'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
<IconLabelValue value={soilObj.soilPh} label={'PH值'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
<IconLabelValue value={soilObj.soilEc} label={'EC'} img={icon4} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={soilObj.soilDepth} label={'土壤深度'} img={icon5} />
</View>
</GridContainer>
<SubTitle title="数据监测" />
@ -150,7 +238,7 @@ const SoilMoisture = () => {
'color': selectedLabel === item.id ? 'white' : 'black',
'backgroundColor': selectedLabel === item.id ? '#0fc87c' : 'white'
}}
onClick={() => setSelectedLabel(item.id)}
onClick={() => tabChart(item.id)}
>{ item.label }</View>
)
})

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

@ -205,7 +205,11 @@ const WeatherStation = () => {
series: [
{
data: yAxisData,
type: 'line'
type: 'line',
symbol:'none',
areaStyle:{
color:'#5470c6'
}
}
],
grid: {