From 07b0cdcb34db682b51ca972f5c23da653aa5d32d Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期一, 21 十月 2024 15:49:01 +0800
Subject: [PATCH] 钢化完整版图样式逻辑更改
---
UI-Project/src/views/NewPage.vue | 36 +++++++++++++++++++++---------------
1 files changed, 21 insertions(+), 15 deletions(-)
diff --git a/UI-Project/src/views/NewPage.vue b/UI-Project/src/views/NewPage.vue
index 9b7f1d6..8b81abe 100644
--- a/UI-Project/src/views/NewPage.vue
+++ b/UI-Project/src/views/NewPage.vue
@@ -5,11 +5,11 @@
<el-input v-model="current" style="margin-left: 20px;margin-top: 15px;width: 240px" placeholder="璇疯緭鍏ュ伐绋嬪彿" @input="updateUrl"/>
<el-button style="margin-top: 15px;margin-left: 15px;" type="primary" @click="fetchData">鏌ヨ</el-button>
</div>
- <el-card style="flex: 1;margin-left: 400px;margin-top: 50px;margin-right: 10px;width: 1000px;" height="900" v-loading="loading">
+ <el-card style="flex: 1;margin-left: 400px;margin-top: 50px;margin-right: 10px;width: 1100px;" height="900" v-loading="loading">
<div v-for="(row, rowIndex) in divsData" :key="rowIndex" class="row">
<div v-for="(rect, colIndex) in row" :key="colIndex" class="div-container">
- <div style="text-align: center;">鐐夊彿锛歿{ getAdjustedRectsForRow(rowIndex)[0].layout_id }}</div>
- <el-scrollbar height="550px" width="958px" style="background-color: #e9e9eb;">
+ <!-- <div style="text-align: center;">鐐夊彿锛歿{ getAdjustedRectsForRow(rowIndex)[0].layout_id }}</div> -->
+ <el-scrollbar height="550px" width="1000px" style="background-color: #e9e9eb;">
<div style="position: relative;width: 100%;height: 100%;">
<div
v-for="(rect, index) in getAdjustedRectsForRow(rowIndex)"
@@ -98,21 +98,27 @@
const rawRowData = rawData.value[rowIndex];
if (rawRowData) {
adjustedRectsPerRow.value[rowIndex] = rawRowData.map(rect => {
- let adjustedWidth, adjustedHeight,newX;
+ let adjustedWidth, adjustedHeight,newX,widtha,heighta;
+ if (rect.width < rect.height) {
+ widtha = rect.height;
+ heighta = rect.width;
+ }else {
+ widtha = rect.width;
+ heighta = rect.height;
+ }
if (rect.rotate_angle === 90) {
- newX = rect.olHeight -(rect.y_axis + rect.height);
- adjustedWidth = rect.height * (958/rect.olHeight);
- adjustedHeight = rect.width * (550/rect.olWidth);
- } else {
- newX = rect.olHeight -(rect.y_axis + rect.width);
- adjustedWidth = rect.width * (958/rect.olHeight);
- adjustedHeight = rect.height * (550/rect.olWidth);
- }
+ newX = rect.olHeight -(rect.y_axis + heighta);
+ adjustedWidth = heighta * (1000/rect.olHeight);
+ adjustedHeight = widtha * (550/rect.olWidth);
+ } else {
+ newX = rect.olHeight -(rect.y_axis + widtha);
+ adjustedWidth = widtha * (1000/rect.olHeight);
+ adjustedHeight = heighta * (550/rect.olWidth);
+ }
let adjustedRect = {
...rect,
y_axis: rect.x_axis * (550/rect.olWidth),
- x_axis: newX * (958/rect.olHeight),
- // y_axis: rect.x_axis * (550/rect.olWidth),
+ x_axis: newX * (1000/rect.olHeight),
width: adjustedWidth,
height: adjustedHeight,
widtha: rect.width,
@@ -137,7 +143,7 @@
margin-bottom: 20px;
}
.div-container {
-width: 958px;
+width: 1000px;
float: left;
background-color: #f4f4f5;
height: 550px;
--
Gitblit v1.8.0