From 768e16999a8ce4bb500490ee76c659aa61ea1783 Mon Sep 17 00:00:00 2001
From: 廖井涛 <2265517004@qq.com>
Date: 星期二, 25 三月 2025 10:08:13 +0800
Subject: [PATCH] Merge branch 'master' of http://bore.pub:10439/r/ERP_override
---
north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeMove.vue | 166 +++++--------------------------------------------------
1 files changed, 15 insertions(+), 151 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeMove.vue b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeMove.vue
index 6f857f6..8e5ffa4 100644
--- a/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeMove.vue
+++ b/north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeMove.vue
@@ -1,159 +1,23 @@
<template>
- <div style="width:100%;height:2000px;">
- <div class="layoutJSON">
- Displayed as <code>[x, y, w, h]</code>:
- <div class="columns">
- <div v-for="item in layout" :key="item.i">
+ <div >
+ <RectRenderer
+ :layoutData="layoutData"
+ :gw="1400"
+ :gh="1100"
+ style="width: 1500px; height: 800px; position: relative;"
+ />
- <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
- </div>
- </div>
- </div>
- <hr/>
- <input type="checkbox" v-model="draggable"/> Draggable
- <input type="checkbox" v-model="resizable"/> Resizable
- <input type="checkbox" v-model="responsive"/> Responsive
- <br/>
- <div style="width:100%;margin-top: 10px;height:100%;">
- <grid-layout v-model:layout="layout"
- :col-num="12"
- :row-height="30"
- :is-draggable="draggable"
- :is-resizable="resizable"
- :vertical-compact="true"
- :use-css-transforms="true"
- >
- <grid-item v-for="item in layout"
- :key="item.i"
- :static="item.static"
- :x="item.x"
- :y="item.y"
- :w="item.w"
- :h="item.h"
- :i="item.i"
- >
- <span class="text">{{item.i}}</span>
- </grid-item>
-
- </grid-layout>
- </div>
</div>
</template>
- <script>
- import { GridLayout, GridItem } from 'vue3-grid-layout';
+ <script setup>
+ import { ref } from 'vue';
+ import RectRenderer from './page/RectRenderer.vue';
+ import mockLayoutData from '../../../components/pp/MockData';
- export default {
- components: {
- GridLayout,
- GridItem,
- },
- data() {
- return {
- layout: [
- {"x":0,"y":0,"w":2,"h":2,"i":"0666*343"},
- {"x":2,"y":0,"w":2,"h":4,"i":"1"},
- {"x":4,"y":0,"w":2,"h":5,"i":"2"},
- {"x":6,"y":0,"w":2,"h":3,"i":"3"},
- {"x":8,"y":0,"w":2,"h":3,"i":"4"},
- {"x":10,"y":0,"w":2,"h":3,"i":"5"},
- {"x":0,"y":5,"w":2,"h":5,"i":"6"},
- {"x":2,"y":5,"w":2,"h":5,"i":"7"},
- {"x":4,"y":5,"w":2,"h":5,"i":"8"},
- {"x":6,"y":4,"w":2,"h":4,"i":"9"},
- {"x":8,"y":4,"w":2,"h":4,"i":"10"},
- {"x":10,"y":4,"w":2,"h":4,"i":"11"},
- {"x":0,"y":10,"w":2,"h":5,"i":"12"},
- {"x":2,"y":10,"w":2,"h":5,"i":"13"},
- {"x":4,"y":8,"w":2,"h":4,"i":"14"},
- {"x":6,"y":8,"w":2,"h":4,"i":"15"},
- {"x":8,"y":10,"w":2,"h":5,"i":"16"},
- {"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"}
- ],
- draggable: true,
- resizable: true,
- responsive: true,
- index: 0
- }
- },
- methods: {
- }
- }
+ const layoutData = ref(mockLayoutData);
+
+
</script>
-
- <style scoped>
- .vue-grid-layout {
- background: #eee;
- }
-
- .vue-grid-item:not(.vue-grid-placeholder) {
- background: #ccc;
- border: 1px solid black;
- }
-
- .vue-grid-item .resizing {
- opacity: 0.9;
- }
-
- .vue-grid-item .static {
- background: #cce;
- }
-
- .vue-grid-item .text {
- font-size: 24px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- height: 100%;
- width: 100%;
- }
-
- .vue-grid-item .no-drag {
- height: 100%;
- width: 100%;
- }
-
- .vue-grid-item .minMax {
- font-size: 12px;
- }
-
- .vue-grid-item .add {
- cursor: pointer;
- }
-
- .vue-draggable-handle {
- position: absolute;
- width: 20px;
- height: 20px;
- top: 0;
- left: 0;
- background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
- background-position: bottom right;
- padding: 0 8px 8px 0;
- background-repeat: no-repeat;
- background-origin: content-box;
- box-sizing: border-box;
- cursor: pointer;
- }
-
- .layoutJSON {
- background: #ddd;
- border: 1px solid black;
- margin-top: 10px;
- padding: 10px;
- }
-
- .columns {
- -moz-columns: 120px;
- -webkit-columns: 120px;
- columns: 120px;
- }
-
- </style>
\ No newline at end of file
+
\ No newline at end of file
--
Gitblit v1.8.0