appID

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "dist/",
   "projectname": "taro-react-tailwind-vscode-template",
   "description": "",
-    "appid": "wxc422ab9e3d9174d8",
+  "appid": "wx22cc65a14ab1a16d",
   "setting": {
     "urlCheck": true,
     "es6": false,

project.private.config.json

@@ -1,21 +1,8 @@
 {
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "projectname": "taro-react-tailwind-vscode-template",
+  "projectname": "taro-demo",
   "setting": {
-        "compileHotReLoad": false
+    "compileHotReLoad": true
   },
-    "condition": {
+  "condition": {}
-        "plugin": {
-            "list": []
-        },
-        "game": {
-            "list": []
-        },
-        "gamePlugin": {
-            "list": []
-        },
-        "miniprogram": {
-            "list": []
-        }
-    }
 }

src/app.config.ts

@@ -12,6 +12,8 @@ export default defineAppConfig({
     // 跳转页面
     'pages/weatherStation/index', // 气象站
     'pages/inspection/index', // 气象站(巡检)
+    'pages/inspectionContent/index', // 气象站(巡检内容表单)
+    'pages/inspectionLog/index', // 气象站(巡检日志)
     'pages/msgDetail/index', // 消息详情
     'pages/soilMoisture/index', // 土壤墒情
     'pages/envMonitor/index', // 棚内环境监测

src/components/customized/pageWrapper/index.tsx

@@ -20,9 +20,11 @@ const PageWrapper = ({ children, title = '' }) => {
                 }}
             >
                 <HeaderNation title={title}></HeaderNation>
+                <View style={{ height: `calc(100% - ${globalData.appHeaderHeight}px)` }}>
                     { children }
                 </View>
             </View>
+        </View>
     )
 }
 

src/pages/index/index.tsx

@@ -17,18 +17,7 @@ import HeaderNation from "../../components/customized/navigation";
 import { globalData } from "../../config";
 
 const Index = () => {
-  const { statusBarHeight = 0, screenHeight } = Taro.getSystemInfoSync()
+  // Taro.navigateTo({ url: '/pages/inspectionLog/index' })
-  // 获取胶囊信息
-  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: '物联网' })
 

src/pages/inspectionContent/index.tsx

@@ -0,0 +1,69 @@
+import { Label, Radio, RadioGroup, Input, View, Textarea, Button } from "@tarojs/components"
+import PageWrapper from "../../components/customized/pageWrapper";
+import Taro from "@tarojs/taro";
+
+const FormItem = ({ children, label = '' }) => {
+    return (
+        <View className="flex items-center border-b border-slate-400 p-3">
+            <View className="w-[5rem]">{ label }</View>
+            { children }
+        </View>
+    )
+}
+
+const InspectionContent = () => {
+    return (
+        <PageWrapper title="巡检内容">
+            <View className="h-[3rem] flex items-center px-7 border" style={{ color: 'white' }}>基地1-气象站-设备1（NKWFDS1AW27）</View>
+            <View className="bg-white rounded-2xl p-6 relative" style={{ height: 'calc(100% - 3rem)'}}>
+                <FormItem label="巡检结果">
+                    <RadioGroup>
+                        <Label className='radio-list__label' for={'0'} key={0}>
+                            <Radio className='radio-list__radio' value={'0'} checked={false}>正常</Radio>
+                        </Label>
+                        <Label className='radio-list__label ml-4' for={'1'} key={1}>
+                            <Radio className='radio-list__radio' value={'0'} checked={false}>异常</Radio>
+                        </Label>
+                    </RadioGroup>
+                </FormItem>
+                <View className="flex items-start border-b border-slate-400 p-3">
+                    <View className="w-[5rem]">巡检结果</View>
+                    <Textarea placeholder="请输入巡检内容" className="h-[3rem] pl-3"></Textarea>
+                </View>
+                <FormItem label="巡检人">
+                    <Input placeholder="请输入巡检人"></Input>
+                </FormItem>
+                <FormItem label="巡检时间">
+                    <Input placeholder="请输入巡检时间"></Input>
+                </FormItem>
+                <View className="p-3">
+                    <View className="w-[5rem]">影像</View>
+                    <View
+                        onClick={() => {
+                            Taro.chooseImage({
+                                count: 1,
+                                complete: () => {
+                                    console.log('complete');
+                                },
+                                fail: () => {
+                                    console.log('fail');
+                                },
+                                success: () => {
+                                    console.log('success');
+                                }
+                            })
+                        }}
+                    >选择图片</View>
+                </View>
+                <View className="absolute bottom-3 left-0 p-4 w-full">
+                    <Button
+                        className="rounded-full border flex justify-center items-center"
+                        style={{ background: 'linear-gradient(to right, #19b3c3, #10c87e);', color: 'white' }}
+                    >保存</Button>
+                </View>
+            </View>
+        </PageWrapper>
+    )
+}
+
+export default InspectionContent;;

src/pages/inspectionLog/index.tsx

@@ -0,0 +1,20 @@
+import { Input, View } from "@tarojs/components"
+import PageWrapper from "../../components/customized/pageWrapper";
+
+const InspectionLog = () => {
+    return (
+        <PageWrapper title="巡检日志">
+            <View className="h-[3rem] flex items-center px-7" style={{ color: 'white' }}>
+                <View className="bg-white rounded-full w-full shadow-xl py-2 px-4">
+                    <Input placeholder="输入设备号\设备名称"></Input>
+                </View>
+            </View>
+            <View
+                className="bg-white rounded-2xl p-6 relative overflow-auto"
+                style={{ height: 'calc(100% - 3rem)'}}
+            ></View>
+        </PageWrapper>
+    )
+}
+
+export default InspectionLog;

src/pages/iot/index.tsx

@@ -129,20 +129,20 @@ const Iot = () => {
                                         <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">{ item.title }</View>
+                                        <View className=" text-base pb-1 pt-1" style={{ fontFamily: 'ArtFont', color: '#252525D0' }}>{ item.title }</View>
-                                        <View className="w-full flex justify-between items-center space-x-2">
+                                        <View className="w-full flex justify-between items-center space-x-2 text-xs">
-                                            <View className="flex items-center space-x-1">
+                                            <View className="flex items-center space-x-1 pb-1">
-                                                <View className="flex items-center"><Image src={onlineIcon} className="w-5 h-5"></Image></View>
+                                                <View className="flex items-center"><Image src={onlineIcon} className="w-4 h-4"></Image></View>
                                                 <View>在线</View>
                                                 <View>3</View>
                                             </View>
                                             <View className="flex items-center space-x-1">
-                                                <View className="flex items-center"><Image src={offlineIcon} className="w-5 h-5"></Image></View>
+                                                <View className="flex items-center"><Image src={offlineIcon} className="w-4 h-4"></Image></View>
                                                 <View>离线</View>
                                                 <View>3</View>
                                             </View>
                                             <View className="flex items-center space-x-1">
-                                                <View className="flex items-center"><Image src={errorIcon} className="w-5 h-5"></Image></View>
+                                                <View className="flex items-center"><Image src={errorIcon} className="w-4 h-4"></Image></View>
                                                 <View>故障</View>
                                                 <View>3</View>
                                             </View>

src/pages/msgCenter/index.scss

@@ -4,7 +4,6 @@
     background-color: #fff;
     display: flex;
     align-items: center;
-    margin-top: 25px;
     border-radius: 15px;
     justify-content: space-between;
     .right{

src/pages/msgCenter/index.tsx

@@ -4,6 +4,7 @@ import warn from './assets/warn.png'
 import rang from './assets/rang.png'
 import './index.scss'
 import Taro from "@tarojs/taro"
+import TabWrapper from "../../components/customized/tabWrapper"
 const MsgCenter = () => {
     const [selectedMenuId, setSelectedMenuId] = useState('all')
     let contList=[
@@ -35,6 +36,48 @@ const MsgCenter = () => {
             message:'1号棚内虫害数量接近阈值预警',
             id:'1'
         },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
     ]
     const topMenus = [
         {
@@ -69,24 +112,10 @@ const MsgCenter = () => {
         }
     });
     return (
-        <View>
+        <View className="px-1 h-full">
-            <View className='flex px-2 py-1' style={{ position:'relative' }}>
+            <View className="h-full flex flex-col justify-start">
-                    {
+                <TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper>
-                        topMenus.map(item => {
+                <View className='flex flex-col space-y-3 p-2'  style={{ overflow: 'auto', height: 'calc(100% - 2.4rem)' }}>
-                            return (
-                                <View
-                                    className={`p-1 px-3 ${selectedMenuId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
-                                    key={item.id}
-                                    style={{color:'#fff'}}
-                                    onClick={() => setSelectedMenuId(item.id)}
-                                >{ item.title }</View>
-                            )
-                        })
-                    }
-                    <View style={{padding:'0 5px', position:'absolute',left:'27%',fontSize:'10px',backgroundColor:'red',color:'#fff',borderRadius:'10px'}}>{val}</View>
-                    <View style={{padding:'0 5px', position:'absolute',left:'42%',fontSize:'10px',backgroundColor:'red',color:'#fff',borderRadius:'10px'}}>{val2}</View>
-            </View>
-            <View className='main'>
                     {
                         contList.map((item,index)=>{
                             return (
@@ -106,6 +135,7 @@ const MsgCenter = () => {
                     }
                 </View>
             </View>
+        </View>
     )
 }