From 2669fbe488b318dd19e9cbeceb5e73c70e7dba39 Mon Sep 17 00:00:00 2001 From: Zxuyoubin Date: Wed, 3 Apr 2024 17:30:56 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aapp=E7=AB=AF=E7=A0=94=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/basePage/equipment/index.tsx | 53 ++++++--- src/inspectionManager/inspection/index.tsx | 49 ++++++-- src/iotManager/bugMonitor/index.tsx | 121 +++++++------------ src/iotManager/envMonitor/index.tsx | 9 +- src/iotManager/soilMoisture/index.tsx | 130 +++++++++++++++++---- src/iotManager/weatherStation/index.tsx | 6 +- 6 files changed, 239 insertions(+), 129 deletions(-) diff --git a/src/basePage/equipment/index.tsx b/src/basePage/equipment/index.tsx index f40b093..9830517 100644 --- a/src/basePage/equipment/index.tsx +++ b/src/basePage/equipment/index.tsx @@ -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 => { @@ -89,15 +110,15 @@ const EquipMent = () => { */} - 气象站 + {item.categoryName} 已巡检 - 3 + {item.finishCheckNum } 未巡检 - 3 + {item.unFinishCheckNum} @@ -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}` }) }} >去巡检 diff --git a/src/inspectionManager/inspection/index.tsx b/src/inspectionManager/inspection/index.tsx index a9de318..0ecfb53 100644 --- a/src/inspectionManager/inspection/index.tsx +++ b/src/inspectionManager/inspection/index.tsx @@ -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 ( @@ -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 } ) }) @@ -53,8 +86,8 @@ const EquipMent = () => { className="py-2 pt-0 rounded-md shadow-xl bg-white relative" > - 设备1 - 上次巡检 2023-1-11 + {item.equName} + 上次巡检 {item.inspectionTime} { 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'?'在线':'离线'} ) diff --git a/src/iotManager/bugMonitor/index.tsx b/src/iotManager/bugMonitor/index.tsx index 64b35d3..355f895 100644 --- a/src/iotManager/bugMonitor/index.tsx +++ b/src/iotManager/bugMonitor/index.tsx @@ -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(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 = () => { } - + diff --git a/src/iotManager/envMonitor/index.tsx b/src/iotManager/envMonitor/index.tsx index 52bee9a..a942038 100644 --- a/src/iotManager/envMonitor/index.tsx +++ b/src/iotManager/envMonitor/index.tsx @@ -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 ( diff --git a/src/iotManager/soilMoisture/index.tsx b/src/iotManager/soilMoisture/index.tsx index 2e3635c..721bf76 100644 --- a/src/iotManager/soilMoisture/index.tsx +++ b/src/iotManager/soilMoisture/index.tsx @@ -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 }) } - useEffect(()=>{ - getEquipment({deviceType:baseId}).then(res=>{ - console.log(res,'huoqushebei'); - setDeviceList(res.data) - }) - },[]) - const [curDeviceId, setCurDeviceId] = useState('1') - + const getList=async ()=>{ + let {data}=await getEquipment({deviceType:baseId}) + console.log(data,'huoqushebei'); + setDeviceList(data) + setDeviceInfo(data[0]) + getData2({id:data[0].id}) + } + useEffect(()=>{ + getList() + },[]) + //获取实时数据 + 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(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 ( - + + { + deviceList.map((item,index) => { + return ( + tabCli(index,item)} + >{ item.deviceName } + ) + }) + } + - + - + - + - + - + + + + @@ -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 } ) }) diff --git a/src/iotManager/weatherStation/index.tsx b/src/iotManager/weatherStation/index.tsx index 91d290a..408ba23 100644 --- a/src/iotManager/weatherStation/index.tsx +++ b/src/iotManager/weatherStation/index.tsx @@ -205,7 +205,11 @@ const WeatherStation = () => { series: [ { data: yAxisData, - type: 'line' + type: 'line', + symbol:'none', + areaStyle:{ + color:'#5470c6' + } } ], grid: {