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>
55 lines
5.4 KiB
Markdown
55 lines
5.4 KiB
Markdown
## 任务目标
|
||
|
||
做"历史报警记录"窗体 `SecurityCameraData`：在校园安防界面点"查看历史图像"打开它，按开始时间、结束时间从数据库里查出这段时间拍下的照片（拍照和入侵时存的），一次显示一张和它的拍摄时间，用左右箭头前后翻；查不到就显示"NO DATA"。
|
||
|
||
练习重点：ShowDialog 打开对话框式的窗体、日期时间选择器（DateTimePicker）、Dictionary 和 List 集合、运行时改控件的父容器（Parent）和位置（Location）。详细步骤见书 p181–185。
|
||
|
||
## 先准备数据库
|
||
|
||
照片在 **WisdomCampus** 库的 **SecurityData** 表里，任务 4 的拍照和入侵检测会往里存；初始数据里这张表是空的，先在校园安防界面拍几张照片再查。查询用任务 3 写好的 `SQLBLL.GetSecurityData(开始日期, 结束日期)`，它返回"拍摄时间 → 照片"的 Dictionary。
|
||
|
||
## 界面和控件名
|
||
|
||
接着任务 4 的程序做。
|
||
|
||
| 窗体 | 名称（Name） | 文字（Text）和用途 |
|
||
| ------------ | ------------------------------------ | ----------------------------------------------------------------------------------------- |
|
||
| 校园安防 | `btn_history` | 查看历史图像：打开 SecurityCameraData 窗体 |
|
||
| 历史报警记录 | `SecurityCameraData` | 无边框、屏幕居中 |
|
||
| 历史报警记录 | `panel1` | 标题栏：背景色 100, 116, 133，左边标签 `label1`"历史报警记录"（白字） |
|
||
| 历史报警记录 | `pic_close` | 标题栏右边的关闭按钮：背景图片 `windowstate_closed_hover`，背景排列 Center |
|
||
| 历史报警记录 | `panel_toolBar` | 工具栏：背景色 229, 229, 229 |
|
||
| 历史报警记录 | `dateTimePicker1`、`dateTimePicker2` | 开始时间、结束时间（左边各配一个标签） |
|
||
| 历史报警记录 | `btn_get` | 查询 |
|
||
| 历史报警记录 | `pic_camera` | 显示照片：背景色 64, 64, 64 |
|
||
| 历史报警记录 | `lb_noData` | NO DATA（红字，背景色 64, 64, 64，字号 48），叠在 pic_camera 中间 |
|
||
| 历史报警记录 | `lb_time` | TIME（红字，背景色 64, 64, 64），叠在 pic_camera 右下角，显示拍摄时间 |
|
||
| 历史报警记录 | `pic_up`、`pic_down` | 左、右翻页箭头：图片 `arrow_left_normal`、`arrow_right_normal`，SizeMode 设为 CenterImage |
|
||
|
||
> 注意 `pic_up` 是**左**箭头（上一张）、`pic_down` 是**右**箭头（下一张），名字照书上写。
|
||
|
||
## 实现步骤
|
||
|
||
1. **项目资源**里再勾选 `windowstate_closed_hover`、`arrow_left_normal`、`arrow_right_normal`。
|
||
2. 点 **＋ 新建窗体** 建 `SecurityCameraData`，按上表搭界面。
|
||
3. 校园安防 `btn_history` 的 Click：`new SecurityCameraData().ShowDialog();`。
|
||
4. 引用 `DeviceCtrlLibrary`、`智慧校园.SQLHelpers`，声明字段：照片集合 `ImgDictionary`（`Dictionary<string, Image>`）、当前下标 `index = -1`、当前照片 `img`、时间列表 `Keys`（`List<string>`）。
|
||
5. 写 **ImageChanged(char UpOrDown = '+')**：`'+'` 时下标加 1、`'-'` 时减 1，超过最后一张回到第一张、小于 0 回到最后一张；按 `Keys[index]` 从集合里取出照片显示到 `pic_camera`，时间显示到 `lb_time`。
|
||
6. 写 **GetData()**：用两个日期时间选择器的 Value 调用 `SQLBLL.GetSecurityData`，下标设回 −1，清空 `Keys`；没有照片就显示 `lb_noData` 并返回，有照片就隐藏它，把所有时间加进 `Keys`，调用 `ImageChanged()` 显示第一张。
|
||
7. **SecurityCameraData_Load**：把 `pic_up`、`pic_down` 的 Parent 设成 `pic_camera`，位置分别设为 (20, 0) 和 (560, 0)，然后调用 `GetData()`。
|
||
8. **btn_get 的 Click**：`GetData();`
|
||
9. **pic_up 的 Click**：`ImageChanged('-');` **pic_down 的 Click**：`ImageChanged();`
|
||
10. **pic_close 的 Click**：`this.Close();`
|
||
|
||
## 和书上不一样的地方
|
||
|
||
> **每次查询前清空 Keys**：书上的 GetData 没有 `Keys.Clear();`，查第二次时 Keys 里还留着上次的时间，翻页时照片和时间就对不上了。在下标设回 −1 的地方加上 `Keys.Clear();`。
|
||
|
||
## 在平台上怎么试
|
||
|
||
1. 在实训台的**时钟**里拨到 9:00:00，运行后打开校园安防，等画面出来点"拍照"；再拨到 10:30:00，再拍一张。
|
||
2. 点"查看历史图像"，打开历史报警记录窗体：两个日期默认都是今天，显示第一张照片，右下角时间是 9:00 左右，"NO DATA"不显示。
|
||
3. 点右箭头显示 10:30 那张，再点回到第一张；点左箭头往回翻。
|
||
4. 开始时间选 2024-01-01，点"查询"，还能查到今天的照片；结束时间再改成 2024-01-31，点"查询"，显示"NO DATA"。
|
||
5. 点右上角的关闭按钮，回到校园安防界面。
|