企业新闻和通知公告

yyb

2 天以前 dacc95761cf7090c628fc37a5d4f8bb825ccbbb0

 src/views/equipmentManagement/ledger/index.vue

@@ -4,7 +4,7 @@
      <el-form-item label="设备名称">
        <el-input
          v-model="filters.deviceName"
          style="width: 240px"
          style="width: 200px"
          placeholder="请输入设备名称"
          clearable
          @change="getTableData"
@@ -13,7 +13,7 @@
      <el-form-item label="规格型号">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            style="width: 200px"
            placeholder="请输入规格型号"
            clearable
            @change="getTableData"
@@ -22,7 +22,7 @@
      <el-form-item label="供应商">
        <el-input
            v-model="filters.supplierName"
            style="width: 240px"
            style="width: 200px"
            placeholder="请输入供应商"
            clearable
            @change="getTableData"
@@ -298,7 +298,34 @@
const showQRCode = async (row) => {
  // 直接使用URL，不要用JSON.stringify包装
  const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  const qrDataUrl = await QRCode.toDataURL(qrContent, { width: 200, margin: 2 });
  
  // 创建canvas合成带名称的二维码图片
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const qrSize = 200;
  const textHeight = 30;
  const padding = 10;
  canvas.width = qrSize + padding * 2;
  canvas.height = qrSize + textHeight + padding * 2;
  
  // 填充白色背景
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制二维码
  const qrImg = new Image();
  qrImg.src = qrDataUrl;
  await new Promise((resolve) => { qrImg.onload = resolve; });
  ctx.drawImage(qrImg, padding, padding, qrSize, qrSize);
  
  // 绘制设备名称
  ctx.fillStyle = '#333333';
  ctx.font = 'bold 14px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(row.deviceName || '', canvas.width / 2, qrSize + padding + 20);
  
  qrCodeUrl.value = canvas.toDataURL('image/png');
  qrRowData.value = row;
  qrDialogVisible.value = true;
};