修复作业票选择sop不能修改前置节点问题以及新增检查计划

src/api/mes/material/plan.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询物资检查计划--分页
+export function listCheckTask(query) {
+  return request({
+    url: '/iscs/task/getIsCheckTaskPage',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增物资检查计划 业务交叉API
+export function addCheckTask(data) {
+  return request({
+    url: '/iscs/resapi/insertIsCheckTask',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改物资检查计划 业务交叉API
+export function updateCheckTask(data) {
+  return request({
+    url: '/iscs/resapi/updateIsCheckTask',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除物资检查计划  业务交叉API
+export function deleteCheckTask(data) {
+  return request({
+    url: '/iscs/resapi/deleteIsCheckTaskByCheckIds?checkIds=' + data,
+    method: 'post',
+  })
+}
+
+// 获取检查计划详细信息
+export function selectCheckTaskById(query) {
+  return request({
+    url: '/iscs/task/selectIsCheckTaskById?checkId=' + query,
+    method: 'get',
+  })
+}
+
+
+// 物资所属柜 查询物资柜-分页
+export function getIsCheckTaskCabinets() {
+  return request({
+    url: '/iscs/cabinet/getIsMaterialsCabinetPage',
+    method: 'get',
+  })
+}
+// 检查计划 人员选择
+export function getPlanPerson(query) {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/mes/job/jobm/NewOperations.vue

@@ -182,9 +182,11 @@
 
                       >
                         <template slot-scope="scope">
+<!--                          选择了sop之后不允许切换前置隔离点-->
                           <el-select size="mini" v-model="scope.row.prePointId" @change="prePointIdChange(scope.row)"
                                      @visible-change="onDropdownVisibleChange(scope.row)" clearable
                                      @clear="clearprePointId"
+                                     :disabled="form.sopId!==''"
                           >
                             <el-option v-for="item in prePointIdOptions"
                                        :key="item.pointId"

src/views/mes/material/inspectionplan/index.vue

@@ -0,0 +1,584 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="物资编码" prop="materialsCode">
+        <el-input
+          v-model="queryParams.materialsCode"
+          placeholder="请输入物资编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物资名称" prop="materialsName">
+        <el-input
+          v-model="queryParams.materialsName"
+          placeholder="请输入物资名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="所属柜" prop="materialsCabinetId">
+        <el-select
+          style="width: 348px"
+          v-model="queryParams.materialsCabinetId"
+          placeholder="请选择所属柜"
+        >
+          <el-option
+            v-for="dict in cabinets"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          v-no-more-click
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >搜索
+        </el-button
+        >
+        <el-button
+          v-no-more-click
+          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
+          v-no-more-click
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['mes:mat:plan:add']"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-no-more-click
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['mes:mat:plan:batchremove']"
+        >批量删除
+        </el-button>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="materialsList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="任务名称" align="center" prop="checkName">
+      </el-table-column>
+      <el-table-column label="巡检人" align="center" prop="userIdStr">
+        <template slot-scope="scope">
+          <el-tag>{{ getUserName(scope.row.userIdStr) }}</el-tag>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="巡检物资柜" align="center" prop="cabinetIdStr">
+        <template slot-scope="scope">
+          <el-tag type="danger">{{ getCabinetName(scope.row.cabinetIdStr) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="巡检时间"
+        align="center"
+        prop="cron"
+      >
+        <template slot-scope="scope">
+          {{ cronDescription(scope.row.cron) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime">
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-no-more-click
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['mes:mat:plan:edit']"
+          >编辑
+          </el-button>
+          <el-button
+            v-no-more-click
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleResult(scope.row)"
+            v-hasPermi="['mes:mat:plan:result']"
+          >结果记录
+          </el-button>
+          <el-button
+            v-no-more-click
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['mes:mat:plan:remove']"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pages"
+      :limit.sync="queryParams.size"
+      @pagination="getList"
+    />
+    <!-- 添加或修改班组对话框 -->
+    <el-dialog :visible.sync="open" width="500px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <i></i>
+        <span class="title">{{ title }}</span>
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="任务名称" prop="checkName">
+          <el-input
+            v-model="form.checkName"
+            placeholder="请输入任务名称"
+          />
+        </el-form-item>
+        <el-form-item label="检查物资柜" prop="cabinetIdStr">
+          <el-select
+            style="width: 348px"
+            v-model="form.cabinetIdStr"
+            placeholder="请选择需要检查的物资柜"
+            multiple
+            clearable
+          >
+            <el-option
+              v-for="dict in cabinets"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="检查人员" prop="userIdStr">
+          <el-select
+            style="width: 348px"
+            v-model="form.userIdStr"
+            placeholder="请选择检查人员"
+            multiple
+            clearable
+          >
+            <el-option
+              v-for="dict in planPersonOption"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="检查时间频率" prop="cron">
+          <el-input v-model="form.cron" placeholder="请点击生成表达式">
+            {{form.co}}
+            <template slot="append">
+              <el-button v-no-more-click type="primary" @click="handleShowCron">
+                生成表达式
+                <i class="el-icon-time el-icon--right"></i>
+              </el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button v-no-more-click type="primary" @click="submitForm"
+        >确 定
+        </el-button
+        >
+        <el-button v-no-more-click @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!--    检查日期表达式工具-->
+    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
+      <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
+    </el-dialog>
+    <!-- 检查结果-->
+    <el-dialog title="检查结果记录" :visible.sync="ResultVisible" width="50%">
+      <div class="info-bar">
+        <p>检查计划名称：{{ planName }}</p>
+        <p>物资柜编号：{{ cabinetId }}</p>
+        <p>检查时间：{{ inspectionDate }}</p>
+        <p>巡检人：{{ inspector }}</p>
+      </div>
+      <el-table :data="items" border>
+        <el-table-column prop="name" label="物资名称" width="200"/>
+        <el-table-column prop="id" label="物资编号" width="150"/>
+        <el-table-column label="物资状态" width="200">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.status" placeholder="请选择">
+              <el-option label="正常" value="正常"/>
+              <el-option label="破损" value="破损"/>
+              <el-option label="丢失" value="丢失"/>
+              <el-option label="过期" value="过期"/>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.comment" placeholder="备注信息"/>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveResults">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listCheckTask,
+  addCheckTask,
+  getPlanPerson,
+  updateCheckTask,
+  deleteCheckTask,
+  selectCheckTaskById,
+  getIsCheckTaskCabinets
+} from '@/api/mes/material/plan'
+import { genCode } from '@/api/system/autocode/rule'
+import Crontab from '@/components/Crontab/index.vue'
+import cronstrue from 'cronstrue/i18n';
+
+export default {
+  name: 'Team',
+  components: { Crontab },
+
+  dicts: ['material_status'],
+  data() {
+    return {
+      //自动生成编码
+      autoGenFlag: false,
+      optType: undefined,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      codes: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 班组表格数据
+      materialsList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 是否显示Cron表达式弹出层
+      openCron: false,
+      // 传入的表达式
+      expression: '',
+      // 查询参数
+      createTime: '',
+      queryParams: {
+        pages: 1,
+        size: 10,
+        materialsCode: null,
+        materialsName: null,
+        loanState: null,
+        materialsCabinetId: null,
+        materialsTypeId: null,
+        startTime: '',
+        endTime: ''
+      },
+
+      // 查询参数
+      queryParamsCabinets: {
+        current: 1,
+        size: -1
+      },
+
+      // 表单参数
+      form: {},
+
+      cabinets: [], //物资所属柜
+      planPersonOption: [],// 检查人员
+      // 表单校验
+      rules: {
+        userIdStr: [
+          { required: true, message: '人员不能为空', trigger: 'blur' }
+        ],
+        checkName: [
+          { required: true, message: '任务名称不能为空', trigger: 'blur' }
+        ],
+        cron: [
+          { required: true, message: '检查时间频率不能为空', trigger: 'blur' }
+        ]
+
+      },
+
+      ResultVisible: false,//检查结果弹窗标志
+      planName: '每月物资检查计划',
+      cabinetId: '柜子001',
+      inspectionDate: '2024-12-15',
+      inspector: '张三',
+      items: [
+        { name: '安全帽', id: 'A001', status: '正常', comment: '' },
+        { name: '消防器材', id: 'B002', status: '正常', comment: '' }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+    this.materialsCabinets()
+  },
+
+  methods: {
+    cronDescription(cron){
+      return cronstrue.toString(cron, { locale: 'zh_CN' })
+    },
+    /** 查询物资信息列表 */
+    getList() {
+      this.loading = true
+      // 格式化日期并更新 queryParams
+      if (Array.isArray(this.createTime) && this.createTime.length === 2) {
+        this.queryParams.startTime = this.formatDate(this.createTime[0])
+        this.queryParams.endTime = this.formatDate(this.createTime[1])
+      }
+      listCheckTask(this.queryParams).then((response) => {
+        console.log(response, '获取物资信息allList ')
+        this.materialsList = response.data.records
+        this.total = response.data.total
+        this.machinerytypeList = this.handleTree(
+          response.data.records,
+          'materialsTypeId',
+          'parentId',
+          'children'
+        )
+        this.loading = false
+      })
+
+    },
+// 物资所属柜
+    materialsCabinets() {
+      getIsCheckTaskCabinets(this.queryParamsCabinets).then((response) => {
+        if (response?.data?.records) {
+          // 提取 cabinetId 和 cabinetName
+          this.cabinets = response.data.records.map((item) => ({
+            value: item.cabinetId,
+            label: item.cabinetName
+          }))
+        }
+      })
+      // 巡检人员
+      const data = {
+        pageNum: 1,
+        pageSize: 99999
+      }
+      getPlanPerson(data).then((res) => {
+        console.log(res, '巡检人员信息')
+        this.planPersonOption = res.rows.map((item) => {
+          return {
+            label: item.nickName,
+            value: item.userId
+          }
+        })
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        cron: undefined
+      }
+      this.resetForm('form')
+      this.autoGenFlag = false
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pages = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.checkId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '新增检查计划'
+      this.optType = 'add'
+
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      selectCheckTaskById(row.checkId).then((response) => {
+        this.form = response.data
+        this.form.userIdStr = response.data.userIdStr.split(',')
+        this.form.cabinetIdStr = response.data.cabinetIdStr.split(',')
+
+
+        this.open = true
+        this.title = '编辑检查计划'
+        this.optType = 'edit'
+      })
+    },
+
+    /** cron表达式按钮操作 */
+    handleShowCron() {
+      this.expression = this.form.cron
+      this.openCron = true
+    },
+    /** 确定后回传值 */
+    crontabFill(value) {
+      this.form.cron = value
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.form.checkId != null) {
+            const data = {
+              checkId: this.form.checkId,
+              checkName: this.form.checkName,
+              cabinetIdStr: this.form.cabinetIdStr.join(','),
+              userIdStr: this.form.userIdStr.join(','),
+              cron: this.form.cron
+            }
+            updateCheckTask(data).then((response) => {
+              console.log(response, '修改返回')
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            const data = {
+
+              checkName: this.form.checkName,
+              cabinetIdStr: this.form.cabinetIdStr.join(','),
+              userIdStr: this.form.userIdStr.join(','),
+              cron: this.form.cron
+            }
+            // console.log(data,'新增的参数');
+            addCheckTask(data).then((response) => {
+              console.log(response, '新增返回')
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const checkIds = row.checkId || this.ids
+
+      this.$modal
+        .confirm('是否确认删除编号为"' + checkIds + '"的数据项？')
+        .then(function() {
+          return deleteCheckTask(checkIds)
+        })
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {
+        })
+    },
+
+    //   检查结果 弹窗打开函数
+    handleResult() {
+      this.ResultVisible = true
+    },
+
+    // 检查结果确认按钮
+    saveResults() {
+      // 提交检查结果逻辑
+      console.log(this.items)
+      this.dialogVisible = false
+    },
+    // 表格转换用户名
+    getUserName(userIdStr) {
+      if (!userIdStr) return ''
+      const userIds = userIdStr.split(',').map(Number)
+      return userIds.map(userId => {
+        const user = this.planPersonOption.find(option => option.value == userId)
+        return user ? user.label : ''
+      }).join(', ')
+    },
+    // 表格转换物资柜子
+    getCabinetName(cabinetIdStr) {
+      if (!cabinetIdStr) return ''
+      const cabinetIds = cabinetIdStr.split(',').map(Number)
+      return cabinetIds.map(cabinetId => {
+        const cabinet = this.cabinets.find(option => option.value == cabinetId)
+        return cabinet ? cabinet.label : ''
+      }).join(', ')
+    }
+
+  }
+}
+</script>
+<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
+.el-input-width {
+  width: 380px !important;
+
+}
+</style>

test.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>倒转房屋线条</title>
-  <style>
-    .house {
-      position: relative;
-      width: 200px; /* 正方形的宽度 */
-      height: 200px; /* 正方形的高度 */
-      background-color: #f0f0f0; /* 正方形的颜色 */
-    }
-
-    .house::after {
-      content: '';
-      position: absolute;
-      top: 100%; /* 从正方形底部开始 */
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: 100px solid transparent; /* 左边透明边 */
-      border-right: 100px solid transparent; /* 右边透明边 */
-      border-top: 100px solid #f0f0f0; /* 上边为倒立三角形的底边 */
-    }
-  </style>
-</head>
-<body>
-<div class="house">
-
-</div>
-</body>
-</html>
-
-
-
-<!--<!DOCTYPE html>-->
-<!--<html lang="en">-->
-<!--<head>-->
-<!--  <meta charset="UTF-8">-->
-<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
-<!--  <title>Enhanced Button Selection</title>-->
-<!--  <style>-->
-<!--    canvas {-->
-<!--      border: 1px solid #000;-->
-<!--      display: block;-->
-<!--      margin: 0 auto;-->
-<!--    }-->
-<!--  </style>-->
-<!--</head>-->
-<!--<body>-->
-<!--<canvas id="buttonCanvas" width="480" height="360"></canvas>-->
-
-<!--<script>-->
-<!--  const canvas = document.getElementById('buttonCanvas');-->
-<!--  const ctx = canvas.getContext('2d');-->
-
-<!--  const buttonWidth = 100;-->
-<!--  const buttonHeight = 100;-->
-<!--  const padding = 10;-->
-
-<!--  const rows = 3;-->
-<!--  const cols = 4;-->
-
-<!--  const images = [-->
-<!--    'https://via.placeholder.com/100/FF0000/FFFFFF?text=Red',-->
-<!--    'https://via.placeholder.com/100/0000FF/FFFFFF?text=Blue',-->
-<!--    'https://via.placeholder.com/100/00FF00/FFFFFF?text=Green',-->
-<!--    'https://via.placeholder.com/100/FFFFFF/000000?text=White',-->
-<!--    'https://via.placeholder.com/100/FFAA00/FFFFFF?text=Orange',-->
-<!--    'https://via.placeholder.com/100/AAAAAA/FFFFFF?text=Gray',-->
-<!--    'https://via.placeholder.com/100/FF00FF/FFFFFF?text=Magenta',-->
-<!--    'https://via.placeholder.com/100/00FFFF/FFFFFF?text=Cyan',-->
-<!--    'https://via.placeholder.com/100/FFFF00/FFFFFF?text=Yellow',-->
-<!--    'https://via.placeholder.com/100/000000/FFFFFF?text=Black',-->
-<!--    'https://via.placeholder.com/100/FF7777/FFFFFF?text=Pink',-->
-<!--    'https://via.placeholder.com/100/7777FF/FFFFFF?text=Purple',-->
-<!--  ];-->
-
-<!--  let buttons = [];-->
-<!--  let selectedButtons = new Set();-->
-
-<!--  function loadImages(imageUrls, callback) {-->
-<!--    const loadedImages = [];-->
-<!--    let imagesToLoad = imageUrls.length;-->
-
-<!--    imageUrls.forEach((url, index) => {-->
-<!--      const img = new Image();-->
-<!--      img.src = url;-->
-<!--      img.onload = () => {-->
-<!--        loadedImages[index] = img;-->
-<!--        imagesToLoad&#45;&#45;;-->
-<!--        if (imagesToLoad === 0) callback(loadedImages);-->
-<!--      };-->
-<!--    });-->
-<!--  }-->
-
-<!--  function createButtons(images) {-->
-<!--    let x, y;-->
-<!--    for (let row = 0; row < rows; row++) {-->
-<!--      for (let col = 0; col < cols; col++) {-->
-<!--        const index = row * cols + col;-->
-<!--        x = col * (buttonWidth + padding);-->
-<!--        y = row * (buttonHeight + padding);-->
-<!--        buttons.push({ x, y, width: buttonWidth, height: buttonHeight, image: images[index], id: index });-->
-<!--      }-->
-<!--    }-->
-<!--  }-->
-
-<!--  function drawButtons() {-->
-<!--    ctx.clearRect(0, 0, canvas.width, canvas.height);-->
-<!--    buttons.forEach(button => {-->
-<!--      // 绘制按钮图片-->
-<!--      ctx.drawImage(button.image, button.x, button.y, button.width, button.height);-->
-
-<!--      if (selectedButtons.has(button.id)) {-->
-<!--        // 绘制半透明灰色遮罩-->
-<!--        ctx.fillStyle = 'rgba(50, 50, 50, 0.5)';-->
-<!--        ctx.fillRect(button.x, button.y, button.width, button.height);-->
-
-<!--        // 绘制白色对勾图标-->
-<!--        ctx.fillStyle = 'white';-->
-<!--        ctx.font = '20px Arial';-->
-<!--        ctx.textAlign = 'center';-->
-<!--        ctx.textBaseline = 'middle';-->
-<!--        ctx.fillText('✔', button.x + button.width / 2, button.y + button.height / 2);-->
-
-<!--        // 添加边框-->
-<!--        ctx.strokeStyle = 'black';-->
-<!--        ctx.lineWidth = 5;-->
-<!--        ctx.strokeRect(button.x, button.y, button.width, button.height);-->
-<!--      }-->
-<!--    });-->
-<!--  }-->
-
-<!--  function handleCanvasClick(event) {-->
-<!--    const rect = canvas.getBoundingClientRect();-->
-<!--    const mouseX = event.clientX - rect.left;-->
-<!--    const mouseY = event.clientY - rect.top;-->
-
-<!--    buttons.forEach(button => {-->
-<!--      if (-->
-<!--        mouseX >= button.x &&-->
-<!--        mouseX <= button.x + button.width &&-->
-<!--        mouseY >= button.y &&-->
-<!--        mouseY <= button.y + button.height-->
-<!--      ) {-->
-<!--        if (selectedButtons.has(button.id)) {-->
-<!--          selectedButtons.delete(button.id); // 取消选中-->
-<!--        } else {-->
-<!--          selectedButtons.add(button.id); // 选中按钮-->
-<!--        }-->
-<!--        drawButtons();-->
-<!--      }-->
-<!--    });-->
-<!--  }-->
-
-<!--  canvas.addEventListener('click', handleCanvasClick);-->
-
-<!--  loadImages(images, loadedImages => {-->
-<!--    createButtons(loadedImages);-->
-<!--    drawButtons();-->
-<!--  });-->
-<!--</script>-->
-<!--</body>-->
-<!--</html>-->