横向设计

src/utils/coordinateTransform.js

@@ -18,7 +18,7 @@ export class CoordinateTransformer {
    */
   getConfig() {
     let canvasSize
-
+    this.paperId = localStorage.getItem('paperId')
     // 优先使用纸张ID
     if (this.paperId) {
       try {
@@ -26,13 +26,21 @@ export class CoordinateTransformer {
         const { default: dynamicPaperConfig } = require('./paperConfigDynamic.js')
         const paper = dynamicPaperConfig.getPaperById(this.paperId)
         if (paper) {
-          const pixelSize = dynamicPaperConfig.calculatePixelSize(paper, 203, this.orientation)
+          const pixelSize = dynamicPaperConfig.calculatePixelSize(paper, 300, this.orientation)
           canvasSize = {
             width: pixelSize.width,
             height: pixelSize.height,
             name: paper.name,
             description: paper.description || ''
           }
+          console.log(`坐标转换器 - 纸张配置:`, {
+            paperId: this.paperId,
+            paperName: paper.name,
+            orientation: this.orientation,
+            originalSize: `${paper.widthMm}×${paper.heightMm}mm`,
+            pixelSize: `${pixelSize.width}×${pixelSize.height}px`,
+            dpi: 203
+          })
         }
       } catch (error) {
         console.warn('获取动态纸张配置失败，使用降级方案:', error)
@@ -50,8 +58,14 @@ export class CoordinateTransformer {
           name: '自定义',
           description: `自定义尺寸 (${this.orientation === 'landscape' ? '横向' : '纵向'})`
         }
+        console.log(`坐标转换器 - 自定义尺寸:`, canvasSize)
       } else {
         canvasSize = getCanvasSize(this.paperType, this.orientation)
+        console.log(`坐标转换器 - 降级方案:`, {
+          paperType: this.paperType,
+          orientation: this.orientation,
+          canvasSize
+        })
       }
     }
 
@@ -67,7 +81,7 @@ export class CoordinateTransformer {
         canvasSize,
         scaleX: 1,
         scaleY: 1,
-        offsetX: Math.max(750, canvasSize.width * 0.8),
+        offsetX: 0,
         offsetY: 0
       }
     }
@@ -101,16 +115,19 @@ export class CoordinateTransformer {
    */
   toZPL(canvasX, canvasY) {
     if (this.orientation === 'portrait') {
-      return {
+      // 纵向打印：直接映射
+      const result = {
         x: Math.round(canvasX * this.config.scaleX),
         y: Math.round(canvasY * this.config.scaleY)
-      }
+      };
+      return result;
     } else {
-      // 横向打印需要坐标旋转变换
-      return {
-        x: Math.round(canvasX * this.config.scaleX),
-        y: Math.round(canvasY * this.config.scaleY)
-      }
+      const { width, height } = this.config.canvasSize;
+      const result = {
+        x: Math.round(canvasY * this.config.scaleX),
+        y: Math.round((width - canvasX-100) * this.config.scaleY)
+      };
+      return result;
     }
   }
 
@@ -122,15 +139,18 @@ export class CoordinateTransformer {
    */
   toCanvas(zplX, zplY) {
     if (this.orientation === 'portrait') {
+      // 纵向打印：直接映射
       return {
         x: Math.round(zplX / this.config.scaleX),
         y: Math.round(zplY / this.config.scaleY)
       }
     } else {
       // 横向打印的逆变换
+      // 与修正后的 toZPL 方法对应的逆转换
+      const { width, height } = this.config.canvasSize
       return {
-        x: Math.round(this.config.offsetX - (zplY / this.config.scaleY)),
-        y: Math.round(zplX / this.config.scaleX)
+        x: Math.round(zplY / this.config.scaleX),
+        y: Math.round((height - zplX) / this.config.scaleY)
       }
     }
   }

src/utils/zplGenerator.js

@@ -412,9 +412,9 @@ export class ZPLGenerator {
    */
   generateHorizontalLineZPL(element, x, y) {
     if (this.orientation === 'landscape') {
-      // 横向打印时需要特殊处理
-      const adjustedY = Math.round(1200 - element.x) - element.width
-      return `^FO${x},${adjustedY}^FWR^GB${element.height},${element.width},3,B^FS`
+      // 横向打印时，由于使用了^FWB，横线在旋转后变成竖线
+      // 使用标准的GB指令，坐标转换已经在coordinateTransform中处理
+      return `^FO${x},${y}^GB${element.height},${element.width},3,B^FS`
     } else {
       return `^FO${x},${y}^GB${element.width},${element.height},3,B^FS`
     }
@@ -425,9 +425,11 @@ export class ZPLGenerator {
    */
   generateVerticalLineZPL(element, x, y) {
     if (this.orientation === 'landscape') {
-      return `^FO${x},${y}^FWR^GB${element.height},${element.width},3,B^FS`
+      // 横向打印时，由于使用了^FWB，竖线在旋转后变成横线
+      // 使用标准的GB指令，坐标转换已经在coordinateTransform中处理
+      return `^FO${x},${y}^GB${element.height},${element.width},3,B^FS`
     } else {
-      return `^FO${x},${y}^GB1,${element.height},${element.width},B^FS`
+      return `^FO${x},${y}^GB${element.width},${element.height},3,B^FS`
     }
   }
 

src/views/modules/labelSetting/LabelDesigner.vue

@@ -6,8 +6,13 @@
       <div class="top-toolbar">
         <HorizontalToolbar
           :label-no="labelNo"
+          :element-count="elements.length"
           @update:labelNo="labelNo = $event"
           @drag-start="handleToolDragStart"
+          @clear-canvas="handleClearCanvas"
+          @clear-selection="handleClearSelection"
+          @preview="handlePreview"
+          @save="handleSave"
         />
       </div>
 
@@ -408,9 +413,17 @@ export default {
           console.log('使用默认DPI: 300')
         }
 
-        if (labelSetting.paperOrientation) {
+        // 处理打印方向，优先使用 prop 传入的值，然后是路由参数
+        if (this.orientation && this.orientation !== 'portrait') {
+          // 如果组件prop已经指定了方向（如从label_draw2.vue传入的landscape），使用它
+          console.log('使用组件prop指定的打印方向:', this.orientation)
+        } else if (labelSetting.paperOrientation) {
           this.orientation = labelSetting.paperOrientation
-          console.log('从路由参数设置打印方向:', labelSetting.paperOrientation)
+          console.log('从路由参数设置打印方向(paperOrientation):', labelSetting.paperOrientation)
+        } else if (labelSetting.printDirection) {
+          // 将中文打印方向转换为英文
+          this.orientation = (labelSetting.printDirection === '横向打印' || labelSetting.printDirection === '横向设计') ? 'landscape' : 'portrait'
+          console.log('从路由参数设置打印方向(printDirection):', labelSetting.printDirection, '-> orientation:', this.orientation)
         } else {
           // 没有历史打印方向时，确保使用默认值 portrait
           this.orientation = 'portrait'
@@ -729,6 +742,34 @@ export default {
       // 预览逻辑由PropertyPanel处理
     },
 
+    handleClearCanvas() {
+      if (this.elements.length === 0) {
+        this.$message.info('画布已经是空的')
+        return
+      }
+
+      this.$confirm('确定要清空画布吗？此操作不可恢复。', '清空画布', {
+        confirmButtonText: '确定清空',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true,
+        message: '<div style="color: #E6A23C;"><i class="el-icon-warning"></i> 确定要清空画布吗？</div><div style="margin-top: 10px; color: #909399; font-size: 13px;">此操作将删除所有设计元素，且不可恢复。</div>'
+      }).then(() => {
+        this.elements = []
+        this.selectedIndex = -1
+        this.$message.success('画布已清空')
+      }).catch(() => {
+        // 用户取消操作
+      })
+    },
+
+    handleClearSelection() {
+      if (this.selectedIndex >= 0) {
+        this.selectedIndex = -1
+        this.$message.info('已取消选择')
+      }
+    },
+
     async handleDataSource(inData) {
       const response = await getViewFieldsByLabelType({
         labelType: this.labelSettings.labelType,

src/views/modules/labelSetting/com_add_update_label.vue

@@ -30,14 +30,14 @@
                       </el-select>
                     </el-form-item>
                   </el-col>
-<!--                  <el-col :span="12">
+                  <el-col :span="12">
                     <el-form-item class="customer-item" :label=labels.printDirection>
                       <el-select v-model="pageData.printDirection"  >
-                        <el-option label="横向打印" value="横向打印"></el-option>
-                        <el-option label="纵向打印" value="纵向打印"></el-option>
+                        <el-option label="纵向设计" value="纵向设计"></el-option>
+                        <el-option label="横向设计" value="横向设计"></el-option>
                       </el-select>
                     </el-form-item>
-                  </el-col>-->
+                  </el-col>
 <!--                  <el-col :span="12">
                     <el-form-item class="customer-item" :label=labels.labelName>
                       <el-input v-model="pageData.labelName"  ></el-input>
@@ -102,7 +102,7 @@ export default {
         labelClass: '',
         remark: '',
         addFlag: false,
-        printDirection : '横向打印',
+        printDirection : '纵向设计',
         rfidFlag:''
       },
       labelNoReadOnly: false,

src/views/modules/labelSetting/components/DataSourceDialog.vue

@@ -26,9 +26,7 @@
               <label
                 v-for="key in group.fields"
                 :key="key.fieldName"
-                class="checkbox-item"
-                :class="{ 'duplicate-field': key.isDuplicate }"
-              >
+                class="checkbox-item">
                 <el-checkbox :label="key.fieldName" v-model="selectedKeys">
                   <span class="label-inner">
                     <span class="field-name" :title="getFieldDisplayName(key)">{{ getFieldDisplayName(key) }}</span>
@@ -46,9 +44,7 @@
               <label
                 v-for="key in dataKeys"
                 :key="key.fieldName"
-                class="checkbox-item"
-                :class="{ 'duplicate-field': key.isDuplicate }"
-              >
+                class="checkbox-item">
                 <el-checkbox :label="key.fieldName" v-model="selectedKeys">
                   <span class="label-inner">
                     <span class="field-name" :title="getFieldDisplayName(key)">{{ getFieldDisplayName(key) }}</span>

src/views/modules/labelSetting/components/DesignCanvas.vue

@@ -52,25 +52,6 @@ export default {
   watch: {
     canvasSize: {
       handler(newSize, oldSize) {
-        // 当画布尺寸发生变化时，输出调试信息
-        if (process.env.NODE_ENV === 'development') {
-          console.log('DesignCanvas: 画布尺寸变化', {
-            old: oldSize ? { 
-              width: oldSize.width, 
-              height: oldSize.height, 
-              dpi: oldSize.dpi,
-              paperId: oldSize.paperId 
-            } : null,
-            new: newSize ? { 
-              width: newSize.width, 
-              height: newSize.height, 
-              dpi: newSize.dpi,
-              paperId: newSize.paperId 
-            } : null,
-            timestamp: Date.now()
-          })
-        }
-
         // 强制重新计算样式
         this.$nextTick(() => {
           this.$forceUpdate()

src/views/modules/labelSetting/components/DesignElement.vue

@@ -111,11 +111,9 @@ export default {
         cursor: this.isDragging ? 'grabbing' : 'grab'
       }
 
-      // 横向打印时，元素逆时针旋转90度
-      if (this.orientation === 'landscape') {
-        baseStyle.transform = 'rotate(-90deg)'
-        baseStyle.transformOrigin = 'center center'
-      }
+      // 横向打印时不在设计界面旋转元素
+      // 旋转效果在ZPL生成和预览时处理，设计界面保持直观显示
+      // 这样用户可以更直观地看到横向标签的实际布局效果
 
       return baseStyle
     }

src/views/modules/labelSetting/components/PaperSelector.vue

@@ -148,6 +148,7 @@ export default {
     },
 
     handlePaperChange(paperId) {
+      localStorage.setItem('paperId',paperId);
       this.$emit('paper-change', paperId)
     },
 

src/views/modules/labelSetting/components/ZPLPreview.vue

@@ -213,7 +213,6 @@ export default {
     // 监听画布尺寸变化
     canvasSize: {
       handler() {
-        console.log('画布尺寸变化，触发预览更新:', this.canvasSize)
         //this.debouncedPreview()
       },
       deep: true

src/views/modules/labelSetting/label_setting.vue

@@ -8,9 +8,9 @@
       <el-form-item :label=labels.labelType>
         <el-input v-model="pageData.labelType" style="width: 120px"></el-input>
       </el-form-item>
-      <el-form-item :label=labels.labelName>
+<!--      <el-form-item :label=labels.labelName>
         <el-input v-model="pageData.labelName" style="width: 120px" ></el-input>
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item style="margin-top: 16px;">
         <el-button type="primary" @click="refreshPageTables()" class="customer-bun-mid"
                    style="margin-left: 10px;  margin-bottom: 5px;">{{ buttons.searchButton }}
@@ -194,24 +194,24 @@ export default {
           status: true,
           fixed: ''
         },
-        /* {
+        {
            userId: this.$store.state.user.name,
            functionId: '100008001',
-           serialNumber: '100008001LabelLabelName',
+           serialNumber: '100008001LabelPrintDirection',
            tableId: '100008001Label',
            tableName: '标签自定义列表',
            columnProp: 'printDirection',
            headerAlign: 'center',
            align: 'center',
            columnLabel: '打印方向',
-           columnWidth: 140,
+           columnWidth: 100,
            columnHidden: false,
            columnImage: false,
            columnSortable: true,
            sortLv: 0,
            status: true,
            fixed: ''
-         },*/
+         },
         {
           userId: this.$store.state.user.name,
           functionId: '100008001',
@@ -347,6 +347,7 @@ export default {
         labelName: '',
         labelType: '外箱标签',
         labelClass: '打印软件',
+        printDirection : '纵向设计',
         remark: '',
         addFlag: 'Y'
       };
@@ -404,12 +405,32 @@ export default {
 
     labelDrawModal(row){
       let currentData = row;
-      if (currentData.printDirection === '横向打印') {
-        this.$router.push({ name: 'labelSetting-label_draw2',
-          params: {labelSetting: currentData}})
+
+      // 调试信息：显示当前标签的打印方向
+      console.log('标签绘制跳转:', {
+        labelNo: currentData.labelNo,
+        printDirection: currentData.printDirection,
+        paperOrientation: currentData.paperOrientation
+      });
+
+      // 判断是否为横向打印
+      const isLandscape = currentData.printDirection === '横向打印' ||
+                         currentData.printDirection === '横向设计' ||
+                         currentData.paperOrientation === 'landscape';
+
+      if (isLandscape) {
+        localStorage.setItem('paperId',currentData.paperId);
+        console.log('跳转到横向标签绘制页面');
+        this.$router.push({
+          name: 'labelSetting-label_draw2',
+          params: {labelSetting: currentData}
+        });
       } else {
-        this.$router.push({ name: 'labelSetting-label_draw',
-          params: {labelSetting: currentData}})
+        console.log('跳转到纵向标签绘制页面');
+        this.$router.push({
+          name: 'labelSetting-label_draw',
+          params: {labelSetting: currentData}
+        });
       }
     },