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>
57 lines
6.7 KiB
Markdown
57 lines
6.7 KiB
Markdown
## 任务目标
|
||
|
||
在任务 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 的代码和自动评分都用这些名字。
|
||
|
||
## 实现步骤
|
||
|
||
1. **项目资源**里再勾选 `day_02`、`bg_from2`、`switch_off`（任务 3 还要用 `day_01`、`switch_on`，可以一起勾上）。
|
||
2. 点 **＋ 新建窗体**，建 `Environment`，设成无边框、屏幕居中，调到合适的大小。
|
||
3. 按"标题栏 → panel2 → panel3 → panel_bg"的顺序拖面板，设好停靠。先放的面板先占地方，放错了可以在属性里改停靠。
|
||
4. 在 panel_bg 上依次放底部的 panel5（环境数据栏）和右边的 panel_form，再把两组控件放进 panel_form 里的两个分组框。书上要求 panel_form 里的其他控件背景色也设成 Transparent，让背景图透出来。
|
||
5. 拖一个**图表**到 panel_bg 上，在属性窗口点**系列和图例**：
|
||
- 图例两个：`MaxLegend`、`AVGLegend`；
|
||
- 系列两个：`MaxSeries`（图表类型 Line，图例 MaxLegend，图例文字"最大值"，X 值字段 `_Time`，Y 值字段 `MaxTemperature`）和 `AVGSeries`（Line，AVGLegend，"平均值"，`_Time`，`AVGTemperature`）。
|
||
6. 主窗体 `pic_environment` 的 Click：`new Environment().Show();`。
|
||
7. `lb_return` 的 Click：`this.Close();`（只关掉这个窗体，主窗体还在）。
|
||
|
||
## 和书上不一样的地方
|
||
|
||
> **背景图片叫 `bg_from2`**：书上写的是 `bg_form2.png`，配套资料里的文件名是 `bg_from2`，素材库也用这个名字。
|
||
|
||
## 在平台上怎么试
|
||
|
||
1. 运行后在主界面点"校园环境"，打开 Environment 窗体：背景是路灯场景，底部有五个文本框和"数据分析""推送天气信息"，右边有"路灯控制""LED推送"两组，左下方有图表（现在还没有数据）。
|
||
2. 点"< 返回主窗体"，Environment 关闭，主界面还在。
|