| | |
| | | xMargin:'هامش المحور X', |
| | | yMargin:'هامش المحور Y', |
| | | location:'موقع العلامة التجارية', |
| | | sort:'玻璃反弯' |
| | | |
| | | }, |
| | | |
| | |
| | | xMargin:'X axis margin', |
| | | yMargin:'Y-axis margin', |
| | | location:'Trademark position', |
| | | sort:'玻璃反弯' |
| | | |
| | | }, |
| | | |
| | |
| | | xMargin:'Границы оси X', |
| | | yMargin:'Интервал оси Y', |
| | | location:'Расположение товарного знака', |
| | | |
| | | sort:'玻璃反弯' |
| | | }, |
| | | |
| | | workOrder:{ |
| | |
| | | xMargin:'宽方向坐标', |
| | | yMargin:'高方向坐标', |
| | | location:'商标位置', |
| | | sort:'玻璃反弯' |
| | | |
| | | }, |
| | | |
| | |
| | | <script setup> |
| | | const layout=[ |
| | | import {ref} from "vue"; |
| | | |
| | | const layout=ref([ |
| | | {"x":0,"y":0,"w":2,"h":2,"i":"0"}, |
| | | {"x":2,"y":0,"w":2,"h":4,"i":"1"}, |
| | | {"x":4,"y":0,"w":2,"h":5,"i":"2"}, |
| | |
| | | {"x":10,"y":4,"w":2,"h":2,"i":"17"}, |
| | | {"x":0,"y":9,"w":2,"h":3,"i":"18"}, |
| | | {"x":2,"y":6,"w":2,"h":2,"i":"19"} |
| | | ] |
| | | ]) |
| | | |
| | | const layoutUpdated = (newLayout) => { |
| | | //checkLayoutBounds(newLayout) |
| | | } |
| | | const checkLayoutBounds = (layout1) => { |
| | | layout1.forEach(item => { |
| | | // 检查边界,例如确保x和y不小于0,并且w和h不超出最大值等。 |
| | | if (item.x < 0) item.x = 0; |
| | | if (item.y < 0) item.y = 0; |
| | | if (item.w > 12) item.w = 12; // 假设最大列数为12 |
| | | if (item.h > 10) item.h = 10; // 假设最大行为10(根据需要调整) |
| | | }); |
| | | layout.value = layout1; // 应用边界检查后的布局 |
| | | console.log(layout1) |
| | | } |
| | | const moveEvent = (i, newX, newY) => { |
| | | console.log(`移动元素 ${i} 到 (${newX}, ${newY})`) |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <grid-layout |
| | | style="border:1px solid black;height: 100%;width: 100%" |
| | | style="border:1px solid black;height: 100%;width: 100%;overflow: hidden;" |
| | | :layout.sync="layout" |
| | | :col-num="12" |
| | | :row-height="30" |
| | |
| | | :margin="[2, 2]" |
| | | :use-css-transforms="true" |
| | | :autoSize="false" |
| | | @layout-updated="layoutUpdated" |
| | | > |
| | | |
| | | <grid-item v-for="item in layout" |
| | |
| | | :h="item.h" |
| | | :i="item.i" |
| | | :key="item.i" |
| | | @move="moveEvent" |
| | | style="background-color: white" |
| | | > |
| | | {{item.i}} |
| | |
| | | { code: 'clearChecked', name: t('basicData.clearSelection'), prefixIcon: 'vxe-icon-indicator', visible: true, disabled: false }, |
| | | { code: 'computedSize', name: t('basicData.computedSize'), prefixIcon: 'vxe-icon-chart-line', visible: true, disabled: false }, |
| | | { code: 'paste', name: t('basicData.paste'), prefixIcon: 'vxe-icon-paste', visible: true, disabled: false }, |
| | | { code: 'sort', name: t('craft.sort'), prefixIcon: 'vxe-icon-sort-asc', visible: true, disabled: false }, |
| | | ] |
| | | ] |
| | | } |
| | |
| | | data[i+flag][column] = text[i] |
| | | } |
| | | }) |
| | | break |
| | | } |
| | | case 'sort' :{ |
| | | const uniqueArray = xGrid.value.getTableData().fullData.filter((item, index, self) => |
| | | index === self.findIndex((t) => ( |
| | | t.orderNumber === item.orderNumber |
| | | )) |
| | | ) |
| | | |
| | | for (let i=0; i<uniqueArray.length; i++) { |
| | | const sameOrderNumber = xGrid.value.getTableData().fullData.filter((item) => |
| | | parseInt(item.orderNumber) === i+1 |
| | | ) |
| | | let widthList = [] |
| | | sameOrderNumber.forEach((item) => |
| | | widthList.push(item.childWidth) |
| | | ) |
| | | widthList = widthList.sort(); |
| | | sameOrderNumber.forEach((item,index) =>{ |
| | | item.childWidth = widthList[index] |
| | | }) |
| | | |
| | | |
| | | } |
| | | break |
| | | } |
| | | } |