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

feat:: 修改了很多

Browse Source
This commit is contained in:
Tony 2024-03-21 11:42:09 +08:00
parent 9b3ae6c041
commit 2735317eaa
17 changed files with 55788 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -57,7 +57,8 @@
"clsx": "^2.1.0",
"qs": "^6.12.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react-dom": "^18.0.0",
"taro-react-echarts": "^1.2.2"
},
"devDependencies": {
"@babel/core": "^7.23.9",

4
src/app.config.ts
View File

@ -12,6 +12,10 @@ export default defineAppConfig({
// 跳转页面
'pages/weatherStation/index', // 气象站
'pages/msgDetail/index', // 消息详情
'pages/soilMoisture/index', // 土壤墒情
'pages/envMonitor/index', // 棚内环境监测
'pages/deviceMonitor/index', // 设备监控
'pages/bugMonitor/index', // 虫情监测
],
window: {
backgroundTextStyle: 'light',

16
src/app.ts
View File

@ -1,11 +1,25 @@
import { PropsWithChildren } from 'react'
import { useLaunch } from '@tarojs/taro'
import './app.scss'
import { globalData } from './config'
import Taro from '@tarojs/taro'
function App({ children }: PropsWithChildren) {
useLaunch(() => {
console.log('App launched.')
console.log('App launched.', globalData)
const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
// 获取胶囊信息
const { height, top } = Taro.getMenuButtonBoundingClientRect()
// 计算标题栏高度
const titleBarHeight = height + (top - statusBarHeight) * 2
// 计算导航栏高度
const appHeaderHeight = statusBarHeight + titleBarHeight
//去掉导航栏，屏幕剩余的高度
const contentHeight = screenHeight - appHeaderHeight
globalData.appHeaderHeight = titleBarHeight // 标题栏高度
globalData.mainContainerHeight = contentHeight // 主要内容高度，包括底栏
globalData.navigatorHeight = appHeaderHeight // 底栏高度
})
// children 是将要会渲染的页面

55058
src/assets/js/echarts.js Normal file
View File

File diff suppressed because it is too large Load Diff

9
src/components/customized/navigation/index.tsx
View File

@ -1,11 +1,16 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import arrow from '../../../assets/images/icons/back.png'
import { globalData } from "../../../config";
const HeaderNation = ({ title = '' }) => {
const HeaderNation = ({ title = '', headerHeight = 0 }) => {
if (headerHeight === 0) headerHeight = globalData.appHeaderHeight
const showBack = Taro.getCurrentPages().length > 1
return (
<View className="w-full h-[180rpx] flex items-center justify-between pt-[90rpx] px-3">
<View
className="w-full flex items-center justify-between px-3 relative z-10"
style={{ height: headerHeight + 'px' }}
>
<View className="w-8 flex justify-center" onClick={() => {
Taro.navigateBack()
}}>

30
src/components/customized/pageWrapper/index.tsx Normal file
View File

@ -0,0 +1,30 @@
import { View } from "@tarojs/components"
import { globalData } from "../../../config"
import basicBg from '../../../assets/images/bg.png'
import HeaderNation from "../navigation"
const PageWrapper = ({ children, title = '' }) => {
return (
<View
className="flex flex-col-reverse h-[100vh]"
style={{
'backgroundImage': `url(${basicBg})`,
'backgroundSize': '100% auto',
'backgroundRepeat': 'no-repeat',
}}
>
<View
className="flex flex-col"
style={{
'height': (globalData.mainContainerHeight + globalData.appHeaderHeight) + 'px',
}}
>
<HeaderNation title={title}></HeaderNation>
{ children }
</View>
</View>
)
}
export default PageWrapper;

12
src/components/iot/basicStatus.tsx Normal file
View File

@ -0,0 +1,12 @@
import { View } from "@tarojs/components"
const BasicStatus = (status = true) => {
return (
<View
style={{ backgroundColor: status ? '#0fc87c' : '#ff0000', 'color': 'white' }}
className={ 'text-[.7rem] px-[.4rem] py-[.1rem] ' + (status ? 'rounded-sm text-white' : '') }
>{ status ? '在线' : '离线' }</View>
)
}
export default BasicStatus;

23
src/components/iot/iconLabelValue.tsx Normal file
View File

@ -0,0 +1,23 @@
import { View, Image } from "@tarojs/components"
const IconLabelValue = ({ value, unit, label, img }) => {
return (
<View className="flex items-center justify-center">
<View className="flex flex-col items-start px-1 w-[6rem]">
<View className="flex items-end pb-2">
<View className="text-[1rem] font-bold text-primary">{ value }</View>
<View
className="text-slate-600 text-[.7rem] px-2"
style={{ 'color': '#252525A5' }}
>{ unit }</View>
</View>
<View className="text-[.7rem]">{ label }</View>
</View>
<View className="w-10 h-10 rounded-sm shadow-sm">
<Image src={img} className="w-full h-full"></Image>
</View>
</View>
)
}
export default IconLabelValue

12
src/components/iot/subTitle.tsx Normal file
View File

@ -0,0 +1,12 @@
import { View } from "@tarojs/components"
const SubTitle = ({title = '', updateTime = ''}) => {
return (
<View className="w-full flex justify-between text-[.8rem] p-2 pb-1">
<View className=" font-bold">{ title }</View>
<View style={{ color: '#999999' }}>{ updateTime !== '' ? '数据更新于' + updateTime : '' }</View>
</View>
)
}
export default SubTitle;

6
src/config/index.ts
View File

@ -2,4 +2,10 @@ export const axiosConfig = {
baseUrl: '',
timeout: 30000,
withCredentials: false // 禁用 Cookie 等信息
}
export const globalData = {
appHeaderHeight: 0,
mainContainerHeight: 0,
navigatorHeight: 0
}

12
src/pages/bugMonitor/index.tsx Normal file
View File

@ -0,0 +1,12 @@
import { View } from "@tarojs/components"
import PageWrapper from "../../components/customized/pageWrapper";
const BugMonitor = () => {
return (
<PageWrapper title="虫情监测">
<View></View>
</PageWrapper>
)
}
export default BugMonitor;

72
src/pages/deviceMonitor/index.tsx Normal file
View File

@ -0,0 +1,72 @@
import { View, Image } from "@tarojs/components";
import PageWrapper from "../../components/customized/pageWrapper";
import { useState } from "react";
const DeviceInfoCard = ({ title, info, status, imgSrc }) => {
return (
<View
className="bg-white px-5 py-4 rounded-md shadow-xl mb-2"
>
<View className="flex space-x-4">
<View className="w-16 h-14 border">
<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-1">{ info }</View>
<View className="flex">{ status }</View>
</View>
</View>
<View className="w-full h-[1px] bg-slate-300 my-2"></View>
<View className="flex flex-row-reverse">
<View className="p-1 rounded-xl border" style={{ color: '#49d49b', 'borderColor': '#49d49b' }}>查看监控</View>
</View>
</View>
)
}
const DeviceMonitor = () => {
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
{
id: '1',
title: '设备1'
},
{
id: '2',
title: '设备2'
},
{
id: '3',
title: '设备3'
},
]
return (
<PageWrapper title="设备监控">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</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>
</PageWrapper>
)
}
export default DeviceMonitor;

174
src/pages/envMonitor/index.tsx Normal file
View File

@ -0,0 +1,174 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef } 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'
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";
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
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
{
id: '1',
title: '设备1'
},
{
id: '2',
title: '设备2'
},
{
id: '3',
title: '设备3'
},
]
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
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 [selectedLabel, setSelectedLabel] = useState('1')
return (
<PageWrapper title="棚内环境监测">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</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" />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
</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={() => setSelectedLabel(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 EnvMonitor;

28
src/pages/index/index.tsx
View File

@ -14,8 +14,21 @@ import tab3Icon_selected from '../../assets/images/tab/tab3_selected.png'
import Taro from "@tarojs/taro";
import HeaderNation from "../../components/customized/navigation";
import { globalData } from "../../config";
const Index = () => {
const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
// 获取胶囊信息
const { height, top } = Taro.getMenuButtonBoundingClientRect()
// 计算标题栏高度
const titleBarHeight = height + (top - statusBarHeight) * 2
// 计算导航栏高度
const appHeaderHeight = statusBarHeight + titleBarHeight
//去掉导航栏，屏幕剩余的高度
const contentHeight = screenHeight - appHeaderHeight * 2
console.log('titleBarHeight', titleBarHeight);
console.log('contentHeight', contentHeight);
console.log('appHeaderHeight', appHeaderHeight);
const [curSelectedItem, setCurSelectedItem] = useState('iot')
Taro.setNavigationBarTitle({ title: '物联网' })
@ -56,10 +69,10 @@ const Index = () => {
return (
<View
className="h-[100vh] flex flex-col-reverse"
className="h-[100vh] flex flex-col-reverse relative"
style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}
>
<View className="flex justify-evenly h-[6rem] align-top">
<View className="flex justify-evenly align-top relative z-100" style={{ height: globalData.navigatorHeight + 'px' }}>
{
bottomMenuList.map(item => {
return (
@ -79,13 +92,18 @@ const Index = () => {
>
<Image src={item.id === curSelectedItem ? item.selectedIcon : item.icon } className="w-full h-full" />
</View>
<View className="text-sm mt-1">{ item.title }</View>
<View className=" text-xs mt-1">{ item.title }</View>
</View>
)
})
}
</View>
<View className="h-full border-b border-slate-300">
<View
className="border-b border-slate-300 relative z-0"
style={{
height: (globalData.mainContainerHeight - globalData.navigatorHeight) + 'px'
}}
>
{
curSelectedItem === 'iot'
? <Iot />
@ -96,7 +114,7 @@ const Index = () => {
: null
}
</View>
<HeaderNation title={
<HeaderNation headerHeight={globalData.appHeaderHeight} title={
curSelectedItem === 'iot'
? '物联网'
: curSelectedItem === 'msg'

82
src/pages/iot/index.tsx
View File

@ -30,18 +30,90 @@ const Iot = () => {
const dataList = [
{
id: '1',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/weatherStation/index?id=1'
},
{
id: '2',
title: '土壤墒情',
value: 4,
online: 3,
offline: 1,
error: 0,
url: '/pages/soilMoisture/index?id=1'
},
{
id: '3',
title: '棚内环境监测',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
{
id: '4',
title: '设备监控',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/deviceMonitor/index?id=1'
},
{
id: '5',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
{
id: '6',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
{
id: '7',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
{
id: '8',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
{
id: '9',
title: '气象站',
value: 3,
online: 3,
offline: 0,
error: 0,
url: '/pages/envMonitor/index?id=1'
},
]
return (
<View className="p-1 h-full">
<View className="h-full flex flex-col">
<View className="flex px-2 py-1">
<View className="h-full flex flex-col justify-start">
<View className="h-[2.4rem] flex px-2 py-1">
{
topMenus.map(item => {
return (
@ -55,21 +127,21 @@ const Iot = () => {
})
}
</View>
<View className="h-full flex flex-col space-y-3 p-2 rounded-sm">
<View className="flex flex-col space-y-3 p-2 rounded-sm" style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}>
{
dataList.map(item => {
return (
<View
className="px-4 py-2 rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200"
onClick={() => {
Taro.navigateTo({ url: '/pages/weatherStation/index?id=' + item.id })
Taro.navigateTo({ url: item.url })
}}
>
<View className="w-12 h-12 relative top-1">
<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.title }</View>
<View className="w-full flex justify-between items-center space-x-2">
<View className="flex items-center space-x-1">
<View className="flex items-center"><Image src={onlineIcon} className="w-5 h-5"></Image></View>

176
src/pages/soilMoisture/index.tsx Normal file
View File

@ -0,0 +1,176 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState, useRef } from "react";
import img from '../../assets/images/img.png'
import basicBg from '../../assets/images/bg.png'
import HeaderNation from "../../components/customized/navigation";
import { icon1, icon2, icon3, icon4 } 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";
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 SoilMoisture = () => {
const baseId = Taro.getCurrentInstance().router?.params.id || 0; // 基地id
const [curDeviceId, setCurDeviceId] = useState('1')
const deviceList = [
{
id: '1',
title: '设备1'
},
{
id: '2',
title: '设备2'
},
{
id: '3',
title: '设备3'
},
]
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
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 [selectedLabel, setSelectedLabel] = useState('1')
return (
<PageWrapper title="土壤墒情">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
deviceList.map(item => {
return (
<View
className={`p-1 px-3 ${curDeviceId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setCurDeviceId(item.id)}
>{ item.title }</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" />
<GridContainer>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
</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={() => setSelectedLabel(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 SoilMoisture;

138
src/pages/weatherStation/index.tsx
View File

@ -1,39 +1,14 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import { useState } from "react";
import { useState, useRef } from "react";
import img from '../../assets/images/img.png'
import basicBg from '../../assets/images/bg.png'
import HeaderNation from "../../components/customized/navigation";
import { icon1, icon2, icon3, icon4 } from "../../assets/images/icons/data";
const SubTitle = ({title = '', updateTime = ''}) => {
return (
<View className="w-full flex justify-between text-[.8rem] p-2 pb-1">
<View className=" font-bold">{ title }</View>
<View style={{ color: '#999999' }}>{ updateTime !== '' ? '数据更新于' + updateTime : '' }</View>
</View>
)
}
const IconLabelValue = ({ value, unit, label, img }) => {
return (
<View className="flex items-center justify-center">
<View className="flex flex-col items-start px-3 w-[calc(90% - 2.5rem)]">
<View className="flex items-end pb-2">
<View className="text-[1rem] font-bold text-primary">{ value }</View>
<View
className="text-slate-600 text-[.7rem] px-2"
style={{ 'color': '#252525A5' }}
>{ unit }</View>
</View>
<View className="text-[.7rem]">{ label }</View>
</View>
<View className="w-10 h-10 rounded-sm shadow-sm">
<Image src={img} className="w-full h-full"></Image>
</View>
</View>
)
}
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";
const GridContainer = ({ children }) => {
return (
@ -43,15 +18,6 @@ const GridContainer = ({ children }) => {
)
}
const BasicStatus = (status = true) => {
return (
<View
style={{ backgroundColor: status ? '#0fc87c' : '#ff0000', 'color': 'white' }}
className={ 'text-[.7rem] px-[.4rem] py-[.1rem] ' + (status ? 'rounded-sm text-white' : '') }
>{ status ? '在线' : '离线' }</View>
)
}
const BasicInfoCard = ({ title, info, status, imgSrc }) => {
return (
<View
@ -87,17 +53,51 @@ const WeatherStation = () => {
},
]
const [data, setData] = useState([
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
])
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
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 [selectedLabel, setSelectedLabel] = useState('1')
return (
<View className="h-[100vh] flex flex-col" style={{ 'backgroundImage': `url(${basicBg})`, 'backgroundSize': '100% auto', 'backgroundRepeat': 'no-repeat' }}>
<HeaderNation title="气象站" />
<PageWrapper title="气象站">
<View className="h-full flex flex-col px-1">
<View className="flex px-2 py-1">
{
@ -121,10 +121,10 @@ const WeatherStation = () => {
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon1} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon2} />
<IconLabelValue value={76.21} label={'大气湿度'} unit={'%/RH'} img={icon2} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon3} />
<IconLabelValue value={20890} label={'光照'} unit={'Lux'} img={icon3} />
</View>
<View className="p-2 py-3">
<IconLabelValue value={27.34} label={'大气温度'} unit={'℃'} img={icon4} />
@ -132,10 +132,42 @@ const WeatherStation = () => {
</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={() => setSelectedLabel(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>
</View>
</PageWrapper>
)
}