1.设备台帐二维码上加上设备名称

gaoluyang

2025-11-18 e611254efd3cea20853ceca9c445cdb332e1bf63

1.设备台帐二维码上加上设备名称

 src/views/equipmentManagement/ledger/index.vue

@@ -82,14 +82,15 @@
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
    <el-dialog v-model="qrDialogVisible" title="二维码" width="300px">
      <div style="text-align:center;">
        <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <div style="margin:10px 0;">
          <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
        <el-dialog v-model="qrDialogVisible" title="二维码" width="300px">
            <div style="text-align:center;">
                <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
                <div style="margin-top:6px;font-size:14px;color:#333;">{{ qrRowData?.deviceName }}</div>
                <div style="margin:10px 0;">
                    <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
                </div>
            </div>
        </el-dialog>
  </div>
</template>

@@ -299,10 +300,44 @@
};

const downloadQRCode = () => {
  const a = document.createElement("a");
  a.href = qrCodeUrl.value;
  a.download = `${qrRowData.value.deviceName || "二维码"}.png`;
  a.click();
    const name = qrRowData.value?.deviceName || "二维码";
    const img = new Image();
    img.src = qrCodeUrl.value;
    img.onload = () => {
        const padding = 10;
        const qrSize = 200;
        const textHeight = 24; // space for text
        const width = qrSize + padding * 2;
        const height = qrSize + padding * 2 + textHeight;
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        // background
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, width, height);
        // draw QR centered
        ctx.drawImage(img, padding, padding, qrSize, qrSize);
        // draw name centered below
        ctx.fillStyle = "#333";
        ctx.font = "14px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        const maxTextWidth = width - padding * 2;
        let displayName = name;
        // ellipsis if too long
        while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) {
            displayName = displayName.slice(0, -1);
        }
        if (displayName !== name) displayName = displayName + "…";
        ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2);
		
        const dataUrl = canvas.toDataURL("image/png");
        const a = document.createElement("a");
        a.href = dataUrl;
        a.download = `${name}.png`;
        a.click();
    };
};

onMounted(() => {