Просмотр исходного кода

指标看板自适应逻辑优化,移除最大列数上限4

zhuth 6 лет назад
Родитель
Сommit
19f0da0f77
1 измененных файлов с 12 добавлено и 4 удалено
  1. 12 4
      src/components/chartDesigner/charts/indicatorView.jsx

+ 12 - 4
src/components/chartDesigner/charts/indicatorView.jsx

@@ -27,19 +27,27 @@ class IndicatorView extends React.Component {
         let cardCount = cards.length;
         let cardCount = cards.length;
         let bodyBox = body.getBoundingClientRect();
         let bodyBox = body.getBoundingClientRect();
 
 
-        let maxColNum = cardCount < 4 ? cardCount : 4; // 列数
+        let maxColNum = cardCount > 4 ? 4 : cardCount; // 列数
         let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
         let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
         let cardHeight = bodyBox.height / maxRowNum - 8;
         let cardHeight = bodyBox.height / maxRowNum - 8;
         cardHeight = cardHeight < 100 ? 100 : cardHeight;
         cardHeight = cardHeight < 100 ? 100 : cardHeight;
         let inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
         let inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
-        let cardWidth = (bodyBox.width - (inScroll ? 18 : 0)) / maxColNum - (inScroll ? 8 : 11);
+        let cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
         while(cardWidth < 180 && maxColNum > 1) {
         while(cardWidth < 180 && maxColNum > 1) {
             maxColNum--;
             maxColNum--;
             maxRowNum = Math.ceil(cardCount / maxColNum);
             maxRowNum = Math.ceil(cardCount / maxColNum);
             cardHeight = bodyBox.height / maxRowNum - 8;
             cardHeight = bodyBox.height / maxRowNum - 8;
             cardHeight = cardHeight < 100 ? 100 : cardHeight;
             cardHeight = cardHeight < 100 ? 100 : cardHeight;
             inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
             inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
-            cardWidth = (bodyBox.width - (inScroll ? 18 : 0)) / maxColNum - (inScroll ? 8 : 11);
+            cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
+        }
+        while(cardWidth > 300 && maxColNum < cardCount) {
+            maxColNum++;
+            maxRowNum = Math.ceil(cardCount / maxColNum);
+            cardHeight = bodyBox.height / maxRowNum - 8;
+            cardHeight = cardHeight < 100 ? 100 : cardHeight;
+            inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
+            cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
         }
         }
         body.style.overflow = inScroll ? 'auto' : 'visible';
         body.style.overflow = inScroll ? 'auto' : 'visible';
 
 
@@ -56,7 +64,7 @@ class IndicatorView extends React.Component {
             cards[i].style.width = cardWidth + 'px';
             cards[i].style.width = cardWidth + 'px';
             cards[i].style.height = cardHeight + 'px';
             cards[i].style.height = cardHeight + 'px';
             let cells = cards[i].getElementsByClassName('cell');
             let cells = cards[i].getElementsByClassName('cell');
-            let w = cardWidth - 8 * 2;
+            let w = cardWidth - 9 * 2;
             fun(cells, w);
             fun(cells, w);
         }
         }
     }
     }