From 1a902bb8286e1de7b45b6b8c27ebefb0b0a20952 Mon Sep 17 00:00:00 2001 From: Zxuyoubin Date: Tue, 2 Apr 2024 17:56:04 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=AD=A6=E9=9A=86=E9=B2=81?= =?UTF-8?q?=E6=B8=9D=E5=8D=8F=E4=BD=9C=E7=A4=BA=E8=8C=83=E6=9D=91=E6=95=B0?= =?UTF-8?q?=E5=AD=97=E5=8C=96=E8=B5=8B=E8=83=BD=20app=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 | 26 ++- src/basePage/iot/index.tsx | 16 +- src/basePage/msgCenter/index.tsx | 26 ++- src/iotManager/bugMonitor/index.tsx | 299 +++++++++++++++++++++++- src/iotManager/deviceMonitor/index.tsx | 23 +- src/iotManager/envMonitor/index.tsx | 165 +++++++++++-- src/iotManager/soilMoisture/index.tsx | 31 ++- src/iotManager/weatherStation/index.tsx | 189 +++++++++++++-- src/msgManager/msgDetail/index.tsx | 16 +- 9 files changed, 704 insertions(+), 87 deletions(-) diff --git a/src/basePage/equipment/index.tsx b/src/basePage/equipment/index.tsx index 618a8cf..f40b093 100644 --- a/src/basePage/equipment/index.tsx +++ b/src/basePage/equipment/index.tsx @@ -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 = [ { diff --git a/src/basePage/iot/index.tsx b/src/basePage/iot/index.tsx index f6b6c87..d92de2f 100644 --- a/src/basePage/iot/index.tsx +++ b/src/basePage/iot/index.tsx @@ -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() }) diff --git a/src/basePage/msgCenter/index.tsx b/src/basePage/msgCenter/index.tsx index c431284..ec4f5fd 100644 --- a/src/basePage/msgCenter/index.tsx +++ b/src/basePage/msgCenter/index.tsx @@ -20,7 +20,31 @@ const MsgCenter = () => { setContList(res.data) }) }, []) - + const refreshFunc = ():Promise => { + 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', diff --git a/src/iotManager/bugMonitor/index.tsx b/src/iotManager/bugMonitor/index.tsx index 35cc700..64b35d3 100644 --- a/src/iotManager/bugMonitor/index.tsx +++ b/src/iotManager/bugMonitor/index.tsx @@ -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 ( + + { children } + + ) +} + +const BasicInfoCard = ({ title, info, status, imgSrc }) => { + return ( + + + + + + { title } + { info } + { status ? : '' } + + + ) +} + +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(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 ( - + + + { + deviceList.map((item,index) => { + return ( + tabCli(index,item)} + >{ item.deviceName } + ) + }) + } + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + dataLabel.map(item => { + return ( + tabChart(item.id)} + >{ item.label } + ) + }) + } + + + + + + + + ) } -export default BugMonitor; \ No newline at end of file +export default EnvMonitor; \ No newline at end of file diff --git a/src/iotManager/deviceMonitor/index.tsx b/src/iotManager/deviceMonitor/index.tsx index 495a773..1d13059 100644 --- a/src/iotManager/deviceMonitor/index.tsx +++ b/src/iotManager/deviceMonitor/index.tsx @@ -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 ( { } const DeviceMonitor = () => { - const [dataList, setDataList] = useState>([]) - 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 ( { - dataList.map(item => { + deviceList.map(item => { return ( { 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(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 ( { - deviceList.map(item => { + deviceList.map((item,index) => { return ( setCurDeviceId(item.id)} - >{ item.title } + onClick={() => tabCli(index,item)} + >{ item.deviceName } ) }) } - + - + - + - + - + + + + + + + @@ -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 } ) }) diff --git a/src/iotManager/soilMoisture/index.tsx b/src/iotManager/soilMoisture/index.tsx index 33ab70f..2e3635c 100644 --- a/src/iotManager/soilMoisture/index.tsx +++ b/src/iotManager/soilMoisture/index.tsx @@ -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(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') diff --git a/src/iotManager/weatherStation/index.tsx b/src/iotManager/weatherStation/index.tsx index 6327c9e..91d290a 100644 --- a/src/iotManager/weatherStation/index.tsx +++ b/src/iotManager/weatherStation/index.tsx @@ -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 ( @@ -17,8 +17,8 @@ const GridContainer = ({ children }) => { ) } - const BasicInfoCard = ({ title, info, status, imgSrc }) => { + return ( { } 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(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 ( { - deviceList.map(item => { + deviceList.map((item,index) => { return ( setCurDeviceId(item.id)} - >{ item.title } + onClick={() => tabCli(index,item)} + >{ item.deviceName } ) }) } - - + + - + - + - + - + + + + + + + @@ -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 } ) }) diff --git a/src/msgManager/msgDetail/index.tsx b/src/msgManager/msgDetail/index.tsx index b82b58c..24e7564 100644 --- a/src/msgManager/msgDetail/index.tsx +++ b/src/msgManager/msgDetail/index.tsx @@ -32,15 +32,15 @@ const MsgDetail = () => { - {obj.warnInfo} + {obj.warnTitle} - 报警内容： 1号棚内虫害数量接近阈值数量报警 - 报警时间： 2024/3/13 16:30 - 设备编号： DHTUNBVO98K327 - 当前值： 1360 - 阈值： 900-1400 - 建议： 打开灭蚊灯 + 报警内容： {obj.warnInfo} + 报警时间： {new Date().toLocaleString(obj.warnTime)} + 设备编号： {obj.deviceCode} + 当前值： {obj.currentValue+obj.warnUnit} + 阈值：{obj.threshold+obj.warnUnit} + 建议： {obj.dealInfo} @@ -49,7 +49,7 @@ const MsgDetail = () => { 影像 - +