xuyueandClaude Opus 5.5
de277d3e9d
- bunfig.toml 的 [fmt]：不写分号、单引号、一行最长 160，和原来的写法一致 - .prettierignore：docs/教材摘要/ 是书上的摘录，不格式化 - 模板里一行写两条语句的事件处理（@keydown.delete、@dblclick）改成调用方法：去掉分号后拆成两行，Vue 编译不过 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
6.7 KiB
6.7 KiB
任务目标
在任务 1 的程序里新建"校园环境"窗体 Environment，把界面搭好：顶部标题栏和"<返回主窗体"，中间是路灯场景的背景图，底部一栏显示火焰、烟雾、光照度、温度、湿度，右边是"路灯控制"和"LED推送"两组控件，左下方是显示一周温度的折线图。这个任务只做界面，采集数据、控制路灯、推送 LED 在任务 3 做。
练习重点：多窗体、面板的多层停靠（Top / Fill / Bottom / Right）、透明背景、复选框、图表（Chart）的系列和图例。详细步骤见书 p159–164。
接着任务 1 的程序做。为了能看到效果，这次先让主界面的"校园环境"能打开窗体、"<返回主窗体"能关闭窗体（书上放在后面的任务里）。
界面和控件名
| 控件 | 名称（Name） | 文字（Text）和用途 |
|---|---|---|
| 窗体 | Environment |
校园环境；FormBorderStyle 设为 None，StartPosition 设为 CenterScreen |
| 面板 | panel1 |
顶部标题栏：停靠 Top，背景色 100, 116, 133，放标题图 ico_title |
| 面板 | panel2 |
停靠 Fill，下面的面板都放在它里面 |
| 面板 | panel3 |
panel2 里停靠 Top，背景色 229, 229, 229 |
| 标签 | lb_return |
< 返回主窗体（放在 panel3 上） |
| 面板 | panel_bg |
panel3 下面停靠 Fill，背景图片 day_02（路灯没亮的场景），背景排列 Stretch |
| 面板 | panel5 |
panel_bg 里停靠 Bottom：环境数据栏 |
| 文本框 | txt_fire、txt_smoke、txt_light、txt_temperature、txt_humidity |
火焰、烟雾、光照、温度、湿度（左边各配一个标签） |
| 按钮 | btn_dataAnalyse |
数据分析 |
| 按钮 | btn_ledEnvironment1 |
推送天气信息（环境数据栏里的那个） |
| 面板 | panel_form |
panel_bg 里停靠 Right，背景色 Transparent，背景图片 bg_from2 |
| 分组框 | groupBox2 |
路灯控制 |
| 复选框 | ch_autoLamp |
自动控制 |
| 文本框 | txt_autoLight |
设定开灯光照值（后面配标签"lx"） |
| 图片框 | pic_lampOpen |
灯光控制的开关：背景色 Transparent，背景图片 switch_off |
| 分组框 | groupBox3 |
LED推送 |
| 文本框 | txt_ledMsg |
LED信息（Multiline 设为 True） |
| 复选框 | ch_autoLedFire |
自动推送火情 |
| 按钮 | btn_ledSendMsg |
推送LED信息 |
| 按钮 | btn_ledEnvironment2 |
推送天气信息（LED推送组里的那个） |
| 图表 | chart1 |
放在 panel_bg 左下方，显示最高温度和平均温度 |
书上表 8-6、表 8-7 把四个按钮的"名称"写成了"数据分析""推送天气信息""推送LED信息"，那是按钮上的文字。名称按上表写，任务 3 的代码和自动评分都用这些名字。
实现步骤
- 项目资源里再勾选
day_02、bg_from2、switch_off（任务 3 还要用day_01、switch_on，可以一起勾上）。 - 点 ＋ 新建窗体，建
Environment，设成无边框、屏幕居中，调到合适的大小。 - 按"标题栏 → panel2 → panel3 → panel_bg"的顺序拖面板，设好停靠。先放的面板先占地方，放错了可以在属性里改停靠。
- 在 panel_bg 上依次放底部的 panel5（环境数据栏）和右边的 panel_form，再把两组控件放进 panel_form 里的两个分组框。书上要求 panel_form 里的其他控件背景色也设成 Transparent，让背景图透出来。
- 拖一个图表到 panel_bg 上，在属性窗口点系列和图例：
- 图例两个：
MaxLegend、AVGLegend； - 系列两个：
MaxSeries（图表类型 Line，图例 MaxLegend，图例文字"最大值"，X 值字段_Time，Y 值字段MaxTemperature）和AVGSeries（Line，AVGLegend，"平均值"，_Time，AVGTemperature）。
- 图例两个：
- 主窗体
pic_environment的 Click：new Environment().Show();。 lb_return的 Click：this.Close();（只关掉这个窗体，主窗体还在）。
和书上不一样的地方
背景图片叫
bg_from2：书上写的是bg_form2.png，配套资料里的文件名是bg_from2，素材库也用这个名字。
在平台上怎么试
- 运行后在主界面点"校园环境"，打开 Environment 窗体：背景是路灯场景，底部有五个文本框和"数据分析""推送天气信息"，右边有"路灯控制""LED推送"两组，左下方有图表（现在还没有数据）。
- 点"< 返回主窗体"，Environment 关闭，主界面还在。