修复培训：对齐电子班牌V2模型并清理演示页面

build_ui/src/views/train/board/index.vue

@@ -1,194 +1,307 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="设备硬件序列号" prop="boardSn">
+    <el-form
+      v-show="showSearch"
+      ref="queryForm"
+      :inline="true"
+      :model="queryParams"
+      size="small"
+      label-width="88px"
+    >
+      <el-form-item label="设备名称" prop="boardName">
+        <el-input
+          v-model="queryParams.boardName"
+          clearable
+          placeholder="请输入设备名称"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="硬件序列号" prop="boardSn">
         <el-input
           v-model="queryParams.boardSn"
-          placeholder="请输入设备硬件序列号"
           clearable
+          placeholder="请输入硬件序列号"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="绑定教室ID train_classroom_info.class_room_id" prop="bindClassroomId">
-        <el-input
+      <el-form-item label="绑定教室" prop="bindClassroomId">
+        <el-select
           v-model="queryParams.bindClassroomId"
-          placeholder="请输入绑定教室ID train_classroom_info.class_room_id"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
+          filterable
+          placeholder="请选择绑定教室"
+        >
+          <el-option
+            v-for="item in classroomOptions"
+            :key="item.classRoomId"
+            :label="item.roomName"
+            :value="item.classRoomId"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="绑定开班计划 train_class_plan.plan_id" prop="bindPlanId">
-        <el-input
-          v-model="queryParams.bindPlanId"
-          placeholder="请输入绑定开班计划 train_class_plan.plan_id"
+      <el-form-item label="设备状态" prop="boardStatus">
+        <el-select
+          v-model="queryParams.boardStatus"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设备IP地址" prop="boardIp">
-        <el-input
-          v-model="queryParams.boardIp"
-          placeholder="请输入设备IP地址"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="0 离线 1 在线正常" prop="boardPlaymode">
-        <el-input
-          v-model="queryParams.boardPlaymode"
-          placeholder="请输入0 离线 1 在线正常"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="最后心跳时间" prop="lastHeartbeat">
-        <el-date-picker clearable
-          v-model="queryParams.lastHeartbeat"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择最后心跳时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="创建管理员账号" prop="createUser">
-        <el-input
-          v-model="queryParams.createUser"
-          placeholder="请输入创建管理员账号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+          placeholder="请选择设备状态"
+        >
+          <el-option :value="1" label="在线" />
+          <el-option :value="0" label="离线" />
+        </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          icon="el-icon-search"
+          size="mini"
+          type="primary"
+          @click="handleQuery"
+        >
+          搜索
+        </el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+        >
+          重置
+        </el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
-          plain
+          v-hasPermi="['system:board:add']"
           icon="el-icon-plus"
+          plain
           size="mini"
+          type="primary"
           @click="handleAdd"
-          v-hasPermi="['train:board:add']"
-        >新增</el-button>
+        >
+          新增班牌
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
+          v-hasPermi="['system:board:edit']"
           :disabled="single"
+          icon="el-icon-edit"
+          plain
+          size="mini"
+          type="success"
           @click="handleUpdate"
-          v-hasPermi="['train:board:edit']"
-        >修改</el-button>
+        >
+          修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
+          v-hasPermi="['system:board:remove']"
           :disabled="multiple"
+          icon="el-icon-delete"
+          plain
+          size="mini"
+          type="danger"
           @click="handleDelete"
-          v-hasPermi="['train:board:remove']"
-        >删除</el-button>
+        >
+          删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="warning"
-          plain
+          v-hasPermi="['system:board:export']"
           icon="el-icon-download"
+          plain
           size="mini"
+          type="warning"
           @click="handleExport"
-          v-hasPermi="['train:board:export']"
-        >导出</el-button>
+        >
+          导出
+        </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
     </el-row>
 
-    <el-table v-loading="loading" :data="boardList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="电子班牌设备ID" align="center" prop="boardId" />
-      <el-table-column label="设备硬件序列号" align="center" prop="boardSn" />
-      <el-table-column label="绑定教室ID train_classroom_info.class_room_id" align="center" prop="bindClassroomId" />
-      <el-table-column label="绑定开班计划 train_class_plan.plan_id" align="center" prop="bindPlanId" />
-      <el-table-column label="设备IP地址" align="center" prop="boardIp" />
-      <el-table-column label="电子班牌显示内容" align="center" prop="boardContent" />
-      <el-table-column label="0 离线 1 在线正常" align="center" prop="boardPlaymode" />
-      <el-table-column label="支持签到：人脸，二维码" align="center" prop="supportCheckinType" />
-      <el-table-column label="0 离线 1 在线正常" align="center" prop="boardStatus" />
-      <el-table-column label="最后心跳时间" align="center" prop="lastHeartbeat" width="180">
+    <el-table
+      v-loading="loading"
+      :data="boardList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column
+        align="center"
+        label="设备名称"
+        min-width="120"
+        prop="boardName"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        label="硬件序列号 (SN)"
+        min-width="140"
+        prop="boardSn"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        label="安装教室"
+        min-width="130"
+        prop="bindClassroomId"
+        show-overflow-tooltip
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.lastHeartbeat, '{y}-{m}-{d}') }}</span>
+          <span>{{ classroomNameMap[scope.row.bindClassroomId] || scope.row.bindClassroomId || '—' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建管理员账号" align="center" prop="createUser" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        align="center"
+        label="设备 IP"
+        min-width="120"
+        prop="boardIp"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.boardIp || '—' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="签到能力"
+        min-width="150"
+      >
+        <template slot-scope="scope">
+          <template v-if="scope.row.supportCheckinType">
+            <el-tag
+              v-for="item in formatCheckinTypes(scope.row.supportCheckinType)"
+              :key="item"
+              size="mini"
+              style="margin-right: 4px;"
+            >
+              {{ item }}
+            </el-tag>
+          </template>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="设备状态"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-tag
+            v-if="scope.row.boardStatus === 1"
+            size="small"
+            type="success"
+          >
+            在线
+          </el-tag>
+          <el-tag
+            v-else
+            size="small"
+            type="info"
+          >
+            离线
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="最后心跳"
+        min-width="155"
+        prop="lastHeartbeat"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.lastHeartbeat, '{y}-{m}-{d} {h}:{i}:{s}') || '—' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="备注"
+        min-width="120"
+        prop="remark"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        class-name="small-padding fixed-width"
+        label="操作"
+        width="150"
+      >
         <template slot-scope="scope">
           <el-button
-            size="mini"
-            type="text"
+            v-hasPermi="['system:board:edit']"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['train:board:edit']"
-          >修改</el-button>
-          <el-button
             size="mini"
             type="text"
+            @click="handleUpdate(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            v-hasPermi="['system:board:remove']"
             icon="el-icon-delete"
+            size="mini"
+            type="text"
             @click="handleDelete(scope.row)"
-            v-hasPermi="['train:board:remove']"
-          >删除</el-button>
+          >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
       v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
 
-    <!-- 添加或修改电子班牌设备对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="设备硬件序列号" prop="boardSn">
-          <el-input v-model="form.boardSn" placeholder="请输入设备硬件序列号" />
+    <!-- 添加或修改电子班牌对话框 -->
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="580px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="设备名称" prop="boardName">
+          <el-input v-model="form.boardName" placeholder="例如：1号多媒体教室班牌" />
         </el-form-item>
-        <el-form-item label="绑定教室ID train_classroom_info.class_room_id" prop="bindClassroomId">
-          <el-input v-model="form.bindClassroomId" placeholder="请输入绑定教室ID train_classroom_info.class_room_id" />
+        <el-form-item label="硬件序列号" prop="boardSn">
+          <el-input
+            v-model="form.boardSn"
+            :disabled="form.boardId != null"
+            placeholder="请输入设备硬件序列号 (SN)"
+          />
         </el-form-item>
-        <el-form-item label="绑定开班计划 train_class_plan.plan_id" prop="bindPlanId">
-          <el-input v-model="form.bindPlanId" placeholder="请输入绑定开班计划 train_class_plan.plan_id" />
+        <el-form-item label="安装教室" prop="bindClassroomId">
+          <el-select
+            v-model="form.bindClassroomId"
+            clearable
+            filterable
+            placeholder="请选择安装教室"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in classroomOptions"
+              :key="item.classRoomId"
+              :label="item.roomName"
+              :value="item.classRoomId"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item label="设备IP地址" prop="boardIp">
-          <el-input v-model="form.boardIp" placeholder="请输入设备IP地址" />
+        <el-form-item label="设备 IP 地址" prop="boardIp">
+          <el-input v-model="form.boardIp" placeholder="例如：192.168.1.101" />
         </el-form-item>
-        <el-form-item label="电子班牌显示内容">
-          <editor v-model="form.boardContent" :min-height="192"/>
+        <el-form-item label="通信端点" prop="apiEndpoint">
+          <el-input v-model="form.apiEndpoint" placeholder="例如：http://192.168.1.101:8080/api" />
         </el-form-item>
-        <el-form-item label="0 离线 1 在线正常" prop="boardPlaymode">
-          <el-input v-model="form.boardPlaymode" placeholder="请输入0 离线 1 在线正常" />
-        </el-form-item>
-        <el-form-item label="最后心跳时间" prop="lastHeartbeat">
-          <el-date-picker clearable
-            v-model="form.lastHeartbeat"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择最后心跳时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="创建管理员账号" prop="createUser">
-          <el-input v-model="form.createUser" placeholder="请输入创建管理员账号" />
+        <el-form-item label="签到支持方式">
+          <el-checkbox-group v-model="form.checkinTypes">
+            <el-checkbox label="CARD">刷卡签到</el-checkbox>
+            <el-checkbox label="FACE">人脸识别</el-checkbox>
+            <el-checkbox label="QR">二维码打卡</el-checkbox>
+          </el-checkbox-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
+          <el-input v-model="form.remark" placeholder="请输入备注信息" type="textarea" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -200,63 +313,72 @@
 </template>
 
 <script>
-import { listBoard, getBoard, delBoard, addBoard, updateBoard } from "@/api/train/board"
+import { listBoard, getBoard, delBoard, addBoard, updateBoard } from '@/api/train/board'
+import { listClassroom } from '@/api/train/classroom'
 
 export default {
-  name: "Board",
+  name: 'Board',
   data() {
     return {
-      // 遮罩层
       loading: true,
-      // 选中数组
       ids: [],
-      // 非单个禁用
       single: true,
-      // 非多个禁用
       multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      // 电子班牌设备表格数据
       boardList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
+      classroomOptions: [],
+      classroomNameMap: {},
+      title: '',
       open: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         boardSn: null,
+        boardName: null,
         bindClassroomId: null,
-        bindPlanId: null,
         boardIp: null,
-        boardContent: null,
-        boardPlaymode: null,
-        supportCheckinType: null,
-        boardStatus: null,
-        lastHeartbeat: null,
-        createUser: null,
+        boardStatus: null
       },
-      // 表单参数
       form: {},
-      // 表单校验
       rules: {
+        boardName: [
+          { required: true, message: '设备名称不能为空', trigger: 'blur' }
+        ],
         boardSn: [
-          { required: true, message: "设备硬件序列号不能为空", trigger: "blur" }
-        ],
-        createUser: [
-          { required: true, message: "创建管理员账号不能为空", trigger: "blur" }
-        ],
+          { required: true, message: '设备硬件序列号不能为空', trigger: 'blur' }
+        ]
       }
     }
   },
   created() {
+    this.loadClassroomOptions()
     this.getList()
   },
   methods: {
-    /** 查询电子班牌设备列表 */
+    loadClassroomOptions() {
+      listClassroom({ pageNum: 1, pageSize: 1000 }).then(response => {
+        this.classroomOptions = response.rows || []
+        const map = {}
+        this.classroomOptions.forEach(item => {
+          map[item.classRoomId] = item.roomName
+        })
+        this.classroomNameMap = map
+      }).catch(() => {
+        this.classroomOptions = []
+        this.classroomNameMap = {}
+      })
+    },
+    formatCheckinTypes(str) {
+      if (!str) return []
+      const arr = str.split(',')
+      const map = {
+        CARD: '刷卡',
+        FACE: '人脸识别',
+        QR: '二维码'
+      }
+      return arr.map(item => map[item.trim()] || item.trim())
+    },
     getList() {
       this.loading = true
       listBoard(this.queryParams).then(response => {
@@ -265,76 +387,75 @@ export default {
         this.loading = false
       })
     },
-    // 取消按钮
     cancel() {
       this.open = false
       this.reset()
     },
-    // 表单重置
     reset() {
       this.form = {
         boardId: null,
         boardSn: null,
+        boardName: null,
         bindClassroomId: null,
-        bindPlanId: null,
         boardIp: null,
-        boardContent: null,
-        boardPlaymode: null,
+        apiEndpoint: null,
         supportCheckinType: null,
-        boardStatus: null,
-        lastHeartbeat: null,
-        createUser: null,
-        createTime: null,
-        updateTime: null,
+        checkinTypes: ['CARD', 'FACE'],
         remark: null
       }
-      this.resetForm("form")
+      this.resetForm('form')
     },
-    /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
     },
-    /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm")
+      this.resetForm('queryForm')
       this.handleQuery()
     },
-    // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.boardId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
     handleAdd() {
       this.reset()
       this.open = true
-      this.title = "添加电子班牌设备"
+      this.title = '新增电子班牌设备'
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()
       const boardId = row.boardId || this.ids
       getBoard(boardId).then(response => {
         this.form = response.data
+        if (this.form.supportCheckinType) {
+          this.form.checkinTypes = this.form.supportCheckinType.split(',').map(s => s.trim())
+        } else {
+          this.form.checkinTypes = []
+        }
         this.open = true
-        this.title = "修改电子班牌设备"
+        this.title = '修改电子班牌设备'
       })
     },
-    /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
-          if (this.form.boardId != null) {
-            updateBoard(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
+          const submitData = { ...this.form }
+          if (submitData.checkinTypes && submitData.checkinTypes.length > 0) {
+            submitData.supportCheckinType = submitData.checkinTypes.join(',')
+          } else {
+            submitData.supportCheckinType = ''
+          }
+          delete submitData.checkinTypes
+          if (submitData.boardId != null) {
+            updateBoard(submitData).then(() => {
+              this.$modal.msgSuccess('修改成功')
               this.open = false
               this.getList()
             })
           } else {
-            addBoard(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
+            addBoard(submitData).then(() => {
+              this.$modal.msgSuccess('新增成功')
               this.open = false
               this.getList()
             })
@@ -342,17 +463,15 @@ export default {
         }
       })
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const boardIds = row.boardId || this.ids
-      this.$modal.confirm('是否确认删除电子班牌设备编号为"' + boardIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备序列号为 "' + (row.boardSn || boardIds) + '" 的电子班牌？').then(function() {
         return delBoard(boardIds)
       }).then(() => {
         this.getList()
-        this.$modal.msgSuccess("删除成功")
+        this.$modal.msgSuccess('删除成功')
       }).catch(() => {})
     },
-    /** 导出按钮操作 */
     handleExport() {
       this.download('train/board/export', {
         ...this.queryParams