xlyErp / xlyUmi

Commit d624af2a48f1dd5d7ed769f6cc800f11a7979aa2

Authored by 陈鑫涛
1 parent 85c45fcd

报价单和报表页面

Inline Side-by-side
Showing 28 changed files with 27865 additions and 193 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 17 of 28 files are displayed.

package.json
  View file @d624af2
... ... @@ -11,20 +11,26 @@
11 11 "dependencies": {
12 12 "@ant-design/compatible": "^1.1.2",
13 13 "@ant-design/icons": "^5.6.1",
14   - "@antv/g2": "^5.2.12",
  14 + "@antv/data-set": "^0.11.8",
  15 + "@antv/g2": "^4.1.24",
15 16 "@js-preview/docx": "^1.6.4",
16 17 "@js-preview/excel": "^1.7.14",
17 18 "antd": "^5.24.3",
18 19 "antd-mobile": "2.3.4",
19 20 "antd-v4": "npm:antd@4.24.16",
20 21 "braft-editor": "^2.3.9",
  22 + "classnames": "^2.5.1",
21 23 "dhtmlx-gantt": "^9.0.6",
  24 + "g2": "^2.3.13",
  25 + "g2-plugin-slider": "^1.2.1",
22 26 "immutability-helper": "^3.1.1",
23 27 "lodash": "^4.17.21",
24 28 "lodash-decorators": "^6.0.1",
25 29 "moment": "^2.30.1",
  30 + "numeral": "^2.0.6",
26 31 "react-dnd": "^14.0.5",
27 32 "react-dnd-html5-backend": "^14.1.0",
  33 + "react-fittext": "1.0.0",
28 34 "react-flow-renderer": "^10.3.17",
29 35 "react-grid-layout": "^1.3.4",
30 36 "react-highlight-words": "^0.21.0",
... ...
src/components/Charts/Gauge/index.js
  View file @d624af2
1 1 import React, { PureComponent } from 'react';
2   -import G2 from '@antv/g2';
3   -import Bind from 'lodash-decorators/bind';
4   -import Debounce from 'lodash-decorators/debounce';
5   -import equal from '../equal';
6   -
7   -const { Shape } = G2;
  2 +import { Chart } from '@antv/g2';
  3 +import debounce from 'lodash/debounce';
8 4  
9 5 const primaryColor = '#2F9CFF';
10 6 const backgroundColor = '#F0F2F5';
11 7  
12   -/* eslint no-underscore-dangle: 0 */
13 8 class Gauge extends PureComponent {
14 9 componentDidMount() {
15   - setTimeout(() => {
16   - this.renderChart();
17   - }, 10);
  10 + this.renderChart();
18 11 window.addEventListener('resize', this.resize);
19 12 }
20 13  
21 14 componentWillReceiveProps(nextProps) {
22   - if (!equal(this.props, nextProps)) {
23   - setTimeout(() => {
24   - this.renderChart(nextProps);
25   - }, 10);
  15 + if (!this.isEqual(this.props, nextProps)) {
  16 + this.renderChart(nextProps);
26 17 }
27 18 }
28 19  
29 20 componentWillUnmount() {
30 21 window.removeEventListener('resize', this.resize);
31   - // if (this.chart) {
32   - // console.log('data', this.chart);
33   - // this.chart.destroy();
34   - // }
35 22 this.resize.cancel();
  23 + if (this.chart) {
  24 + this.chart.destroy();
  25 + }
36 26 }
37 27  
38   - @Bind()
39   - @Debounce(200)
40   - resize() {
41   - if (!this.node) {
42   - return;
  28 + resize = debounce(() => {
  29 + if (this.chart) {
  30 + this.chart.render();
43 31 }
44   - this.renderChart([]);
45   - }
  32 + }, 200);
46 33  
47   - handleRef = (n) => {
48   - this.node = n;
  34 + isEqual = (prevProps, nextProps) => {
  35 + // Implement your own equality check logic
  36 + return prevProps.data === nextProps.data && prevProps.color === nextProps.color;
49 37 };
50 38  
51   - initChart(nextProps) {
52   - const { xUnit, color = primaryColor } = nextProps || this.props;
53   -
54   - Shape.registShape('point', 'dashBoard', {
55   - drawShape(cfg, group) {
56   - const originPoint = cfg.points[0];
57   - const point = this.parsePoint({ x: originPoint.x, y: 0.4 });
58   -
59   - const center = this.parsePoint({
60   - x: 0,
61   - y: 0,
62   - });
63   -
64   - const shape = group.addShape('polygon', {
65   - attrs: {
66   - points: [
67   - [center.x, center.y],
68   - [point.x + 8, point.y],
69   - [point.x + 8, point.y - 2],
70   - [center.x, center.y - 2],
71   - ],
72   - radius: 2,
73   - lineWidth: 2,
74   - arrow: false,
75   - fill: color,
76   - },
77   - });
78   -
79   - group.addShape('Marker', {
80   - attrs: {
81   - symbol: 'circle',
82   - lineWidth: 2,
83   - fill: color,
84   - radius: 8,
85   - x: center.x,
86   - y: center.y,
87   - },
88   - });
89   - group.addShape('Marker', {
90   - attrs: {
91   - symbol: 'circle',
92   - lineWidth: 2,
93   - fill: '#fff',
94   - radius: 5,
95   - x: center.x,
96   - y: center.y,
97   - },
98   - });
99   -
100   - const { origin } = cfg;
101   - group.addShape('text', {
102   - attrs: {
103   - x: center.x,
104   - y: center.y + 80,
105   - text: `${origin._origin.value}%`,
106   - textAlign: 'center',
107   - fontSize: 24,
108   - fill: 'rgba(0, 0, 0, 0.85)',
109   - },
110   - });
111   - group.addShape('text', {
112   - attrs: {
113   - x: center.x,
114   - y: center.y + 45,
115   - text: xUnit,
116   - textAlign: 'center',
117   - fontSize: 14,
118   - fill: 'rgba(0, 0, 0, 0.43)',
119   - },
120   - });
121   -
122   - return shape;
123   - },
124   - });
125   - }
126   -
127   - renderChart(nextProps) {
128   - if (this.node.offsetWidth === 0) {
129   - return;
130   - }
131   - const {
132   - height, color = primaryColor, bgColor = backgroundColor, xUnit,
133   - } = nextProps || this.props;
134   - const data = [{ name: xUnit, value: this.props.data }];
  39 + renderChart = (props = this.props) => {
  40 + const { data, color = primaryColor, bgColor = backgroundColor } = props;
  41 + const value = Math.min(Math.max(data, 0), 100); // Ensure value is between 0 and 100
135 42  
136 43 if (this.chart) {
137   - this.chart.clear();
138   - }
139   - if (this.chart) {
140 44 this.chart.destroy();
141 45 }
142   - if (this.node) {
143   - this.node.innerHTML = '';
144   - }
145 46  
146   - this.initChart(nextProps);
147   - const chart = new G2.Chart({
  47 + const chart = new Chart({
148 48 container: this.node,
149   - forceFit: true,
150   - height,
151   - animate: false,
152   - plotCfg: {
153   - margin: [10, 10, 30, 10],
154   - },
  49 + autoFit: true,
  50 + height: 200,
  51 + padding: [20, 20, 60, 20],
155 52 });
156 53  
157   - chart.source(data);
158   -
159 54 chart.tooltip(false);
160 55  
161   - chart.coord('gauge', {
162   - startAngle: -1.2 * Math.PI,
163   - endAngle: 0.20 * Math.PI,
  56 + chart.coordinate('polar', {
  57 + startAngle: -Math.PI / 2,
  58 + endAngle: Math.PI / 2,
  59 + radius: 0.9,
164 60 });
165   - chart.col('value', {
166   - type: 'linear',
167   - nice: true,
168   - min: 0,
169   - max: 100,
170   - tickCount: 6,
  61 +
  62 + chart.axis('value', false);
  63 +
  64 + // Draw background arc
  65 + chart.guide().arc({
  66 + start: [0, 0.95],
  67 + end: [100, 0.95],
  68 + style: {
  69 + stroke: bgColor,
  70 + lineWidth: 12,
  71 + },
171 72 });
172   - chart.axis('value', {
173   - subTick: false,
174   - tickLine: {
  73 +
  74 + // Draw value arc
  75 + chart.guide().arc({
  76 + start: [0, 0.95],
  77 + end: [value, 0.95],
  78 + style: {
175 79 stroke: color,
176   - lineWidth: 2,
177   - value: -14,
178   - },
179   - labelOffset: -12,
180   - formatter: (val) => {
181   - switch (parseInt(val, 10)) {
182   - case 20:
183   - return '差';
184   - case 40:
185   - return '中';
186   - case 60:
187   - return '良';
188   - case 80:
189   - return '优';
190   - default:
191   - return '';
192   - }
  80 + lineWidth: 12,
193 81 },
194 82 });
195   - chart.point().position('value').shape('dashBoard');
196   - draw(data);
197   -
198   - /* eslint no-shadow: 0 */
199   - function draw(data) {
200   - const val = data[0].value;
201   - const lineWidth = 12;
202   - chart.guide().clear();
203   -
204   - chart.guide().arc(() => {
205   - return [0, 0.95];
206   - }, () => {
207   - return [val, 0.95];
208   - }, {
209   - stroke: color,
210   - lineWidth,
211   - });
212   -
213   - chart.guide().arc(() => {
214   - return [val, 0.95];
215   - }, (arg) => {
216   - return [arg.max, 0.95];
217   - }, {
218   - stroke: bgColor,
219   - lineWidth,
220   - });
221 83  
222   - chart.changeData(data);
223   - }
  84 + // Draw center circle
  85 + chart.guide().html({
  86 + position: [50, 0.95],
  87 + html: `<div style="text-align: center; font-size: 12px; color: rgba(0, 0, 0, 0.43); transform: translate(-50%, -50%);">${value}%</div>`,
  88 + });
  89 +
  90 + chart.render();
224 91  
225 92 this.chart = chart;
226   - }
  93 + };
  94 +
  95 + handleRef = (node) => {
  96 + this.node = node;
  97 + };
227 98  
228 99 render() {
229   - return (
230   - <div ref={this.handleRef} />
231   - );
  100 + return <div ref={this.handleRef}></div>;
232 101 }
233 102 }
234 103  
235 104 -export default Gauge;
  105 +export default Gauge;
236 106 \ No newline at end of file
... ...
src/components/Common/BoxDesignCompontent/index.js
  View file @d624af2
... ... @@ -11,7 +11,7 @@ import AntdDraggableModal from &quot;@/components/Common/AntdDraggableModal&quot;;
11 11 import CommonViewTable from "@/components/Common/CommonViewTable";
12 12 import StaticEditTable from "@/components/Common/CommonTable";
13 13 import jsPreviewPdf from "@js-preview/pdf";
14   -import * as commonConfig from "@/utils/config";
  14 +import commonConfig from "@/utils/config";
15 15 import SvgBox from "./svg";
16 16 import styles from "./index.less";
17 17 const BoxDesignEvent = props => {
... ...
src/components/Common/BoxShowImgMaterial/index.css 0 → 100644
  View file @d624af2
  1 +.box {
  2 + position: relative;
  3 + background-color: #f3f3f3;
  4 +}
  5 +.box .materialBox {
  6 + background-color: '#b7e0ff';
  7 +}
... ...
src/components/Common/BoxShowImgMaterial/index.js 0 → 100644
  View file @d624af2
  1 +/* eslint-disable */
  2 +import React, { useEffect, useState, useRef } from "react";
  3 +import { VerticalLeftOutlined, VerticalRightOutlined } from "@ant-design/icons";
  4 +import styles from "./index.less";
  5 +import { bottom } from "react-grid-layout/build/utils";
  6 +const BoxShowImgMaterial = props => {
  7 +
  8 + const boxRef = useRef(null);
  9 + const textRef = useRef(null);
  10 + const textRefs = useRef(null);
  11 + const nTextRefs = useRef(null);
  12 + const nTextRef = useRef(null);
  13 + const [boxKey,setBoxKey] = useState(new Date().getTime())
  14 + const clientWidth = 200;
  15 + const clientHeight = 300;
  16 + const boxScale = 300 / 400;
  17 + // 找出盒型信息
  18 + const { slaveData, selectedNode } = props.state;
  19 + const { boxModel } = props;
  20 + const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
  21 + if (slaveDataDetail) {
  22 + // 最大上机长 上机宽 排版长 排版宽 材料长 材料宽
  23 + var { dMaxLength, dMaxWidth, dMachineLength, dMachineWidth, dWlcd, dWlkd, dSBLB, dXBLB, dZBLB, dYBLB, scale } = slaveDataDetail;
  24 + }
  25 + // 计算可以放置的盒子数量
  26 + const horizontalBoxes = Math.floor(dWlkd / dMachineWidth);
  27 + const verticalBoxes = Math.floor(dWlcd / dMachineLength);
  28 + const scaleX = (clientWidth - 50) / (dWlkd + 60);
  29 + const scaleY = (clientHeight - 25) / (dWlcd + 90);
  30 + // 动态生成多个 materialBox
  31 + const generateMaterialBoxes = () => {
  32 + const boxes = [];
  33 + for (let i = 0; i < horizontalBoxes * verticalBoxes; i++) {
  34 + boxes.push(
  35 + <div
  36 + key={i}
  37 + className={styles.materialBox}
  38 + style={{
  39 + width: `${dMachineWidth}px`,
  40 + height: `${dMachineLength}px`,
  41 + backgroundColor: "#b7e0ff",
  42 + border: "1px soild #333",
  43 + position: "relative",
  44 + }}
  45 + >
  46 + <div
  47 + ref={nTextRef}
  48 + style={{
  49 + position: "absolute",
  50 + bottom: "-30px",
  51 + left: "0px",
  52 + width: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60)}px`,
  53 + fontSize: "11px",
  54 + textAlign: "center",
  55 + height: "30px",
  56 + lineHeight:'30px',
  57 + transform:`scale(${1 / scaleX}, ${1 / scaleY})`,
  58 + transformOrigin:'top left'
  59 + }}
  60 + >
  61 + <VerticalRightOutlined
  62 + style={{
  63 + position: "absolute",
  64 + top: "10px",
  65 + left: "0px",
  66 + }}
  67 + />
  68 + <div
  69 + style={{
  70 + position: "absolute",
  71 + top: "15px",
  72 + left: "5px",
  73 + width: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60) * 0.2}px`,
  74 + backgroundColor: "#333",
  75 + height: "1px",
  76 + }}
  77 + />
  78 + <span
  79 + style={{
  80 + display: "inline-block",
  81 + color: "red",
  82 + }}
  83 + >
  84 + {dMachineWidth}
  85 + </span>
  86 + <VerticalLeftOutlined
  87 + style={{
  88 + position: "absolute",
  89 + top: "10px",
  90 + right: "0px",
  91 + }}
  92 + />
  93 + <div
  94 + style={{
  95 + position: "absolute",
  96 + top: "15px",
  97 + right: "5px",
  98 + width: `${dMachineWidth * (clientWidth - 50) / (dWlkd + 60) * 0.2}px`,
  99 + backgroundColor: "#333",
  100 + height: "1px",
  101 + }}
  102 + />
  103 + </div>
  104 + <div
  105 + ref={nTextRefs}
  106 + style={{
  107 + position: "absolute",
  108 + top: "0",
  109 + right: "-30px",
  110 + height: `${dMachineLength * (clientHeight - 25) / (dWlcd + 90)}px`,
  111 + lineHeight: `${dMachineLength * (clientHeight - 25) / (dWlcd + 90)}px`,
  112 + fontSize: "11px",
  113 + textAlign: "center",
  114 + width: "30px",
  115 + transform:`scale(${1 / scaleX}, ${1 / scaleY})`,
  116 + transformOrigin:'top left'
  117 + }}
  118 + >
  119 + <VerticalRightOutlined
  120 + style={{
  121 + position: "absolute",
  122 + top: "0",
  123 + left: "10px",
  124 + transform: `rotateZ(${90}deg)`,
  125 + }}
  126 + />
  127 + <div
  128 + style={{
  129 + position: "absolute",
  130 + top: "5px",
  131 + left: "15px",
  132 + height: `${dMachineLength *(clientHeight - 25) / (dWlcd + 90)* 0.3}px`,
  133 + backgroundColor: "#333",
  134 + width: "1px",
  135 + }}
  136 + />
  137 + <span
  138 + style={{
  139 + color: "red",
  140 + }}
  141 + >
  142 + {dMachineLength}
  143 + </span>
  144 + <VerticalLeftOutlined
  145 + style={{
  146 + position: "absolute",
  147 + bottom: "0",
  148 + left: "10px",
  149 + transform: `rotateZ(${90}deg)`,
  150 + }}
  151 + />
  152 + <div
  153 + style={{
  154 + position: "absolute",
  155 + bottom: "5px",
  156 + left: "15px",
  157 + height: `${dMachineLength *(clientHeight - 25) / (dWlcd + 90) * 0.3}px`,
  158 + backgroundColor: "#333",
  159 + width: "1px",
  160 + }}
  161 + />
  162 + </div>
  163 + </div>
  164 + );
  165 + }
  166 + return boxes;
  167 + };
  168 + // 计算材料利用率
  169 + const availability = ((((horizontalBoxes * verticalBoxes) * (Number(dMachineLength) * Number(dMachineWidth)) / (Number(dWlcd) * Number(dWlkd)))) * 100).toFixed(2);
  170 + useEffect(() => {
  171 + setBoxKey(new Date().getTime());
  172 + setTimeout(() => {
  173 + if (boxRef.current && textRef.current && textRefs.current && nTextRef.current && nTextRefs.current) {
  174 + // 计算父元素的缩放因子
  175 + const scaleX = (clientWidth - 50) / (dWlkd + 60);
  176 + const scaleY = (clientHeight - 25) / (dWlcd + 90);
  177 +
  178 + // 对父元素应用缩放
  179 + boxRef.current.style.transform = `scale(${scaleX}, ${scaleY})`;
  180 + boxRef.current.style.transformOrigin = "top left";
  181 + // // 对子元素应用逆缩放
  182 + textRef.current.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
  183 + textRef.current.style.transformOrigin = "top left";
  184 + textRefs.current.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
  185 + textRefs.current.style.transformOrigin = "top left";
  186 + }
  187 + }, 0);
  188 +}, [slaveDataDetail]);
  189 +const isMax = slaveDataDetail?.dMaxWidth * slaveDataDetail?.dMaxLength > slaveDataDetail?.dMachineLength * slaveDataDetail?.dMachineWidth
  190 +const isDPartsLength = slaveDataDetail?.dPartsLength < slaveDataDetail?.dMaxLength && slaveDataDetail?.dPartsWidth < slaveDataDetail?.dMaxWidth
  191 +
  192 +
  193 +const isShow = isDPartsLength && slaveDataDetail && slaveDataDetail.dMachineLength && slaveDataDetail.dMaxWidth && slaveDataDetail.dMaxLength && isMax
  194 + return (
  195 + <>
  196 + {isShow ? (
  197 + <div
  198 + key={boxKey}
  199 + className={styles.box}
  200 + style={{
  201 + width: `${dWlkd}px`,
  202 + height: `${dWlcd}px`,
  203 + margin: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
  204 + display: "grid",
  205 + gridTemplateColumns: `repeat(${horizontalBoxes}, ${dMachineWidth}px)`,
  206 + gridTemplateRows: `repeat(${verticalBoxes}, ${dMachineLength}px)`,
  207 + gap: "0", // 可以根据需要调整间距
  208 + position: "relative",
  209 + }}
  210 + ref={boxRef}
  211 + >
  212 + <div
  213 + ref={textRef}
  214 + style={{
  215 + position: "absolute",
  216 + left: "0px",
  217 + width: `${dWlkd * (clientWidth - 50) / (dWlkd + 60)}px`,
  218 + fontSize: "11px",
  219 + textAlign: "center",
  220 + height: "30px",
  221 + bottom:`-120px`,
  222 + lineHeight:'30px'
  223 + }}
  224 + >
  225 + <VerticalRightOutlined
  226 + style={{
  227 + position: "absolute",
  228 + top: "10px",
  229 + left: "0px",
  230 + }}
  231 + />
  232 + <div
  233 + style={{
  234 + position: "absolute",
  235 + top: "15px",
  236 + left: "5px",
  237 + width: `${5}px`,
  238 + backgroundColor: "#333",
  239 + height: "1px",
  240 + }}
  241 + />
  242 + <span ref={textRef}>
  243 + <span
  244 + style={{
  245 + display: "inline-block",
  246 + color: "red",
  247 + }}
  248 + >
  249 + {dWlkd}
  250 + </span>
  251 + <span
  252 + style={{
  253 + display: "inline-block",
  254 + }}
  255 + >
  256 + 材料利用率:
  257 + </span>
  258 + <span
  259 + style={{
  260 + display: "inline-block",
  261 + color: "red",
  262 + }}
  263 + >
  264 + {availability}%
  265 + </span>
  266 + </span>
  267 + <VerticalLeftOutlined
  268 + style={{
  269 + position: "absolute",
  270 + top: "10px",
  271 + right: "0px",
  272 + }}
  273 + />
  274 + <div
  275 + style={{
  276 + position: "absolute",
  277 + top: "15px",
  278 + right: "5px",
  279 + width: `${5}px`,
  280 + backgroundColor: "#333",
  281 + height: "1px",
  282 + }}
  283 + />
  284 + </div>
  285 + <div
  286 + ref={textRefs}
  287 + style={{
  288 + position: "absolute",
  289 + top: "0",
  290 + right: "-140px",
  291 + height: `${dWlcd*(clientHeight - 25) / (dWlcd + 90)}px`,
  292 + lineHeight: `${dWlcd*(clientHeight - 25) / (dWlcd + 90)}px`,
  293 + fontSize: "11px",
  294 + textAlign: "center",
  295 + width: "30px",
  296 + }}
  297 + >
  298 + <VerticalRightOutlined
  299 + style={{
  300 + position: "absolute",
  301 + top: "0",
  302 + left: "10px",
  303 + transform: `rotateZ(${90}deg)`,
  304 + }}
  305 + />
  306 + <div
  307 + style={{
  308 + position: "absolute",
  309 + top: "5px",
  310 + left: "15px",
  311 + height: `${dWlcd*(clientHeight - 25) / (dWlcd + 90) * 0.3}px`,
  312 + backgroundColor: "#333",
  313 + width: "1px",
  314 + }}
  315 + />
  316 + <span
  317 + style={{
  318 + color: "red",
  319 + }}
  320 + >
  321 + {dWlcd}
  322 + </span>
  323 + <VerticalLeftOutlined
  324 + style={{
  325 + position: "absolute",
  326 + bottom: "0",
  327 + left: "10px",
  328 + transform: `rotateZ(${90}deg)`,
  329 + }}
  330 + />
  331 + <div
  332 + style={{
  333 + position: "absolute",
  334 + bottom: "5px",
  335 + left: "15px",
  336 + height: `${dWlcd*(clientHeight - 25) / (dWlcd + 90) * 0.3}px`,
  337 + backgroundColor: "#333",
  338 + width: "1px",
  339 + }}
  340 + />
  341 + </div>
  342 + {generateMaterialBoxes()}
  343 + </div>
  344 + ) : (
  345 + ""
  346 + )}
  347 + </>
  348 + );
  349 +};
  350 +export default BoxShowImgMaterial;
... ...
src/components/Common/BoxShowImgMaterial/index.less 0 → 100644
  View file @d624af2
  1 +.box{
  2 + position: relative;
  3 + background-color: rgb(243, 243, 243);
  4 + .materialBox{
  5 + // position: absolute;
  6 + background-color: '#b7e0ff';
  7 + }
  8 +}
0 9 \ No newline at end of file
... ...
src/components/Common/CommonViewTable/index.js
  View file @d624af2
... ... @@ -269,7 +269,7 @@ export default class CommonViewTable extends Component {
269 269 {
270 270 viewConfigs && viewConfigs.map((child) => {
271 271 const iOrder = sMemo ? 100 : child.iOrder > 100 ? 100 : child.iOrder; /* 排序 */
272   - if (child.sControlName.indexOf('DividerArea') !== -1) {
  272 + if (child.sControlName && child.sControlName.indexOf('DividerArea') !== -1) {
273 273 return (
274 274 <Col key={child.sId} span={24} order={iOrder}>
275 275 <Divider
... ...
src/components/Common/ShowImgMaterial/index.css 0 → 100644
  View file @d624af2
  1 +/* 最大外围 */
  2 +.bigDiv {
  3 + width: 100%;
  4 + padding-top: 14px;
  5 + display: flex;
  6 + flex-direction: column;
  7 +}
  8 +/* 表格区域 */
  9 +.area {
  10 + position: relative;
  11 + /* 1-竖纹 */
  12 + background-image: linear-gradient(90deg, #bae7ff 50%, white 0);
  13 + background-size: 10px 100%;
  14 + border: 1px solid #000;
  15 +}
  16 +.area2 {
  17 + position: relative;
  18 + /* 2-横纹 */
  19 + background-image: linear-gradient(0deg, #bae7ff 50%, white 50%);
  20 + background-size: 100% 20px;
  21 + border: 1px solid #000;
  22 +}
  23 +.fontDiv {
  24 + color: #ff3c3c;
  25 + position: absolute;
  26 + top: 50%;
  27 + left: 40%;
  28 +}
  29 +.fontDiv2 {
  30 + color: #ff3c3c;
  31 + position: absolute;
  32 + top: 63%;
  33 + left: 40%;
  34 +}
  35 +/* 文字区域 */
  36 +.fontArea {
  37 + width: 80%;
  38 + display: flex;
  39 + flex-direction: column;
  40 + justify-content: center;
  41 + margin-left: 10px;
  42 +}
  43 +.divWidth {
  44 + height: 100%;
  45 + position: absolute;
  46 + left: -30px;
  47 +}
  48 +.bBoxDivWidth {
  49 + height: 100%;
  50 + position: absolute;
  51 + right: -9px;
  52 +}
  53 +.divWidthLine {
  54 + width: 2px;
  55 + height: 97%;
  56 + background: #002bb0;
  57 + text-align: center;
  58 +}
  59 +.divHeight {
  60 + width: 100%;
  61 + position: absolute;
  62 + top: -17px;
  63 +}
  64 +.bBoxDivHeight {
  65 + width: 100%;
  66 + position: absolute;
  67 + bottom: -8px;
  68 +}
  69 +.divArrowLeft {
  70 + /* 左侧箭头 */
  71 + width: 2px;
  72 + height: 9px;
  73 + background: #002bb0;
  74 + float: left;
  75 +}
  76 +.divArrowRight {
  77 + /* 左侧箭头 */
  78 + width: 2px;
  79 + height: 8px;
  80 + background: #002bb0;
  81 + float: right;
  82 +}
  83 +.divArrowLeftIcon {
  84 + width: 10px;
  85 + height: 4px;
  86 + position: absolute;
  87 + left: -3px;
  88 + top: -1.5px;
  89 + color: #002bb0;
  90 +}
  91 +.divArrowRightIcon {
  92 + width: 10px;
  93 + height: 4px;
  94 + position: absolute;
  95 + right: -3px;
  96 + top: -1.5px;
  97 + color: #002bb0;
  98 +}
  99 +.divArrowLeftIconLine {
  100 + width: 1px;
  101 + height: 30px;
  102 + position: absolute;
  103 + left: 0px;
  104 + top: 0px;
  105 + background-color: #333;
  106 +}
  107 +.divArrowRightIconLine {
  108 + width: 1px;
  109 + height: 30px;
  110 + position: absolute;
  111 + right: 0px;
  112 + top: 0px;
  113 + background-color: #333;
  114 +}
  115 +.divArrowTop {
  116 + width: 8px;
  117 + height: 2px;
  118 + background: #002bb0;
  119 +}
  120 +.divArrowTopIcon {
  121 + position: absolute;
  122 + top: -1px;
  123 + left: -4.5px;
  124 + width: 10px;
  125 + height: 4px;
  126 + color: #002bb0;
  127 +}
  128 +.divArrowBottomIcon {
  129 + position: absolute;
  130 + bottom: 3px;
  131 + left: -4.5px;
  132 + width: 10px;
  133 + height: 4px;
  134 + color: #002bb0;
  135 +}
  136 +.divArrowBottom {
  137 + width: 8px;
  138 + height: 2px;
  139 + background: #002bb0;
  140 +}
  141 +.divHeightLine {
  142 + height: 1px;
  143 + background: #002bb0;
  144 + text-align: center;
  145 + font-size: 12px;
  146 +}
  147 +.tdStyleM {
  148 + /* 横向 */
  149 + font-size: 12px;
  150 + position: absolute;
  151 + top: 0px;
  152 + left: 46%;
  153 +}
  154 +.tdStyleM1 {
  155 + /* 纵向 */
  156 + font-size: 12px;
  157 + position: absolute;
  158 + left: 0%;
  159 + top: 32%;
  160 +}
... ...
src/components/Common/ShowImgMaterial/index.js 0 → 100644
  View file @d624af2
  1 +/* eslint-disable */
  2 +// eslint-disable-next-line no-plusplus
  3 +// eslint-disable-next-line no-mixed-operators
  4 +
  5 +/* 材料开版图 */
  6 +import React, { Component, createRef } from "react";
  7 +import * as commonUtils from "../../../utils/utils";
  8 +import styles from "./index.less";
  9 +import { LeftOutlined, RightOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
  10 +const dScale = 7;
  11 +export default class ShowImg extends Component {
  12 + constructor(props) {
  13 + super(props);
  14 + this.state = {};
  15 + this.tableRef = createRef(); // 使用 createRef
  16 + }
  17 +
  18 + /* 根据不同条件 计算排版数 */
  19 + //竖排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineLength，dPartsWidth--》dMachineWidth
  20 + getSp = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
  21 + var dMachineWidth = dMachineWidth;
  22 + var dMachineLength = dMachineLength;
  23 + //计算合版数量
  24 + var iTemp = Math.floor(dMachineWidth / dPartsWidth) * Math.floor(dMachineLength / dPartsLength);
  25 + return iTemp;
  26 + };
  27 + //横排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineWidth，dPartsWidth--》dMachineLength
  28 + getHp = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
  29 + var dMachineWidth = dMachineWidth;
  30 + var dMachineLength = dMachineLength;
  31 + //计算合版数量
  32 + var iTemp = Math.floor(dMachineWidth / dPartsLength) * Math.floor(dMachineLength / dPartsWidth);
  33 + return iTemp;
  34 + };
  35 + //横竖取大
  36 + getHSQD = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
  37 + var iTemp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  38 + var iTemp2 = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  39 + if (iTemp2 > iTemp) {
  40 + iTemp = iTemp2;
  41 + // tag= 2;//竖排
  42 + }
  43 + return iTemp;
  44 + };
  45 +
  46 + getTag = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth) => {
  47 + let num = 1;
  48 + var iTemp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  49 + var iTemp2 = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  50 + if (iTemp2 > iTemp) {
  51 + num = 2; //竖排
  52 + }
  53 + return num;
  54 + };
  55 +
  56 + //传入参数 宽、高、长、宽
  57 + getHHP = (dMatLength, dMatWidth, dLength, dWidth) => {
  58 + var p_dMatLength = dMatLength; //
  59 + var p_dMatWidth = dMatWidth; //
  60 + var p_dLength = dLength; //长度*2+两个出血位
  61 + var p_dWidth = dWidth; //高度+两个出血位
  62 + var tr = Math.floor(p_dMatWidth / p_dWidth);
  63 + var td = Math.floor(p_dMatLength / p_dLength);
  64 + //计算合版数量
  65 + var iTemp = Math.floor(p_dMatLength / p_dLength) * Math.floor(p_dMatWidth / p_dWidth);
  66 + var iTemp2 = 0;
  67 + var tmp = true;
  68 + if (dLength >= dWidth) {
  69 + //竖向调用进来的 竖+横
  70 + tmp = dMatWidth > p_dLength;
  71 + } else {
  72 + tmp = dMatLength > dWidth;
  73 + }
  74 + var tr2 = 0;
  75 + var td2 = 0;
  76 + //横排
  77 + if (dLength >= dWidth) {
  78 + if (p_dMatLength - td * p_dLength >= p_dWidth && tmp) {
  79 + if (dLength >= dWidth) {
  80 + //横+竖 才会左边
  81 + // floats=" style='float:left';";
  82 + }
  83 + tr2 = Math.floor(p_dMatWidth / p_dLength);
  84 + td2 = Math.floor((p_dMatLength - td * p_dLength) / p_dWidth);
  85 + }
  86 + } else {
  87 + //竖排
  88 + if (p_dMatWidth - tr * p_dWidth >= p_dLength && tmp) {
  89 + tr2 = Math.floor((p_dMatWidth - tr * p_dWidth) / p_dLength);
  90 + td2 = Math.floor(p_dMatLength / p_dWidth);
  91 + // dTableWidth2 = td2*p_dWidth;
  92 + // dTableHeight2 = tr2*p_dLength;
  93 + // dTrWidth2 = td2*p_dWidth;
  94 + // dTrHeight2 = p_dLength;
  95 + // dTdWidth2 = dLength;
  96 + // dTdHeight2 = dWidth;
  97 + }
  98 + }
  99 + iTemp2 = tr2 * td2;
  100 + iTemp = iTemp + iTemp2;
  101 + return iTemp;
  102 + };
  103 +
  104 + //添加HTML
  105 + // <select id="sPrintingPlate" name="sPrintingPlate">
  106 + // <option value="1">横竖取大</opion>
  107 + // <option value="3">横排</opion>
  108 + // <option value="4">竖排</opion>
  109 + // <option value="2">混排</opion>
  110 + addHtml = (dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, sPrintingPlate, xxfx, wlfx) => {
  111 + const elements = [];
  112 + var dDivHeight = dMachineLength + dBite; //传入的为减去咬口计算时的高度
  113 + var dDivWidth = dMachineWidth; //宽度
  114 + var dTableWidth = 0;
  115 + var dTableHeight = 0;
  116 + var dTrWidth = 0;
  117 + var dTrHeight = 0;
  118 + var dTdWidth = 0;
  119 + var dTdHeight = 0;
  120 + var tr = 0;
  121 + var td = 0;
  122 + if (sPrintingPlate === 3) {
  123 + //横排（垂直纹路）
  124 + dTableHeight = Math.floor(dMachineLength / dPartsWidth) * dPartsWidth;
  125 + dTableWidth = Math.floor(dMachineWidth / dPartsLength) * dPartsLength;
  126 + dTrWidth = Math.floor(dMachineWidth / dPartsLength) * dPartsLength;
  127 + dTrHeight = dPartsWidth;
  128 + dTdWidth = dPartsLength;
  129 + dTdHeight = dPartsWidth;
  130 + tr = Math.floor(dMachineLength / dPartsWidth);
  131 + td = Math.floor(dMachineWidth / dPartsLength);
  132 + } else {
  133 + //竖排（顺纹路）
  134 + dTableHeight = Math.floor(dMachineLength / dPartsLength) * dPartsLength;
  135 + dTableWidth = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth;
  136 + dTrWidth = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth;
  137 + dTrHeight = dPartsLength;
  138 + dTdWidth = dPartsWidth;
  139 + dTdHeight = dPartsLength;
  140 + tr = Math.floor(dMachineLength / dPartsLength);
  141 + td = Math.floor(dMachineWidth / dPartsWidth);
  142 + }
  143 + // alert("宽度："+(dTdWidth-2*dBoold)+" 高度："+(dTdHeight-2*dBoold)+" 出血："+dBoold);
  144 + const sStyleObject = {};
  145 + // sStyleObject.position = 'absolute';
  146 + // sStyleObject.background = '#DDDDFF';
  147 + sStyleObject.width = dDivWidth / dScale + 10;
  148 + sStyleObject.height = dDivHeight / dScale + 10;
  149 + sStyleObject.color = "red";
  150 + const num = {};
  151 + num.display = "block";
  152 + num.position = "absolute";
  153 + num.width = "28px";
  154 + num.top = "48%";
  155 + num.fontSize = "12px";
  156 +
  157 + var floats = "";
  158 + // var html ="";
  159 + // var div = "<div style='background:#DDDDFF;width:" + dDivWidth + "px;height:" + dDivHeight +"px' dBite =" + dBite + " dBoold =" + dBoold + " >";
  160 + // var table = this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,xxfx);
  161 + // html = div + table + "</div>";
  162 +
  163 + elements.push(
  164 + <div style={sStyleObject} className={wlfx === 1 ? styles.area : styles.area2} dBite={dBite} dBlood={dBoold}>
  165 + <div className={styles.divHeight}>
  166 + {/* <div className={styles.divArrowLeft} /> */}
  167 + <LeftOutlined className={styles.divArrowLeftIcon} />
  168 + <div className={styles.divHeightLine}>{dMachineWidth + dBite}</div>
  169 + {/* <div className={styles.divArrowRight} /> */}
  170 + <RightOutlined className={styles.divArrowRightIcon} />
  171 + </div>{" "}
  172 + <div className={styles.divWidth}>
  173 + {/* <div className={styles.divArrowTop} />
  174 + <div className={styles.divWidthLine}>
  175 + <span style={num}>{dMachineLength}</span>
  176 + </div>{" "}
  177 + <div className={styles.divArrowTop} /> */}
  178 + <UpOutlined className={styles.divArrowTopIcon} />
  179 + <div className={styles.divWidthLine}>
  180 + <span style={num}>{dMatWidth}</span>
  181 + </div>{" "}
  182 + <DownOutlined className={styles.divArrowBottomIcon} />
  183 + </div>
  184 + {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx)}
  185 + </div>
  186 + );
  187 +
  188 + return elements;
  189 + };
  190 +
  191 + handleGetChildTd = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx, i) => {
  192 + const tdArr = [];
  193 + /* xxfx 虚线方向 2：横虚线 1：树虚线;3:无需虚线 */
  194 + // console.log('虚线方向：', xxfx);
  195 + const sTdDiv = {};
  196 + sTdDiv.fontSize = "12px";
  197 + sTdDiv.position = "relative";
  198 + const { controlData, controlSelectedRowKeys } = this.props;
  199 + if (commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys)) {
  200 + const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
  201 + if (iIndex > -1) {
  202 + const tableDataRow = controlData[iIndex];
  203 + const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */
  204 + if (sSpineDirection === 1) {
  205 + /* 长 */
  206 + /* 长书脊逻辑 */
  207 + if (xxfx === 2) {
  208 + /* 横虚线 */
  209 + sTdDiv.width = dTdWidth / dScale;
  210 + // sTdDiv.height = '25%';
  211 + sTdDiv.borderBottom = "1px dashed #ff0000";
  212 + } else if (xxfx === 1) {
  213 + /* 树虚线 */
  214 + sTdDiv.width = dTdWidth / dScale / 2;
  215 + sTdDiv.height = dTdHeight / dScale;
  216 + sTdDiv.borderRight = "1px dashed #ff0000";
  217 + }
  218 + } else {
  219 + /* 短书脊逻辑 */
  220 + if (xxfx === 1) {
  221 + /* 横虚线 */
  222 + sTdDiv.width = dTdWidth / dScale;
  223 + // sTdDiv.height = '25%';
  224 + sTdDiv.borderBottom = "1px dashed #ff0000";
  225 + } else if (xxfx === 2) {
  226 + /* 树虚线 */
  227 + sTdDiv.width = dTdWidth / dScale / 2;
  228 + sTdDiv.height = dTdHeight / dScale;
  229 + sTdDiv.borderRight = "1px dashed #ff0000";
  230 + }
  231 + }
  232 + }
  233 + }
  234 +
  235 + for (let j = 0; j < td; j++) {
  236 + tdArr.push(
  237 + <td width={dTdWidth / dScale} height={dTdHeight / dScale} dZyBoold={dBoold} xxfx={xxfx} style={{ position: "relative" }}>
  238 + {((td === 1 && j === 0) || j === 0) && i === 0 ? (
  239 + <div className={styles.tdStyleM}>
  240 + <div className={styles.tdWidthM}>{dTdWidth - dBoold * 2}</div>{" "}
  241 + </div>
  242 + ) : (
  243 + ""
  244 + )}
  245 + {((td === 1 && j === 0) || j === 0) && i === 0 ? (
  246 + <div className={styles.tdStyleM1}>
  247 + <div className={styles.tdWidthM}>{dTdHeight - dBoold * 2}</div>{" "}
  248 + </div>
  249 + ) : (
  250 + ""
  251 + )}
  252 + <div style={sTdDiv} />
  253 + </td>
  254 + );
  255 + }
  256 + return tdArr;
  257 + };
  258 +
  259 + handleGetChildTr = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx) => {
  260 + const trArr = [];
  261 + // eslint-disable-next-line no-plusplus
  262 + for (let i = 0; i < tr; i++) {
  263 + trArr.push(
  264 + <tr width={dTrWidth / dScale} height={dTrHeight / dScale}>
  265 + {this.handleGetChildTd(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx, i)}
  266 + </tr>
  267 + );
  268 + }
  269 + return trArr;
  270 + };
  271 +
  272 + //dDivWidth 对应length,height:对应上级Width xxfx 虚线方向 2：横虚线 1：树虚线;3:无需虚线
  273 + getTable = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx,bgcolor) => {
  274 + const table = [];
  275 + if (dTrWidth > 0 && dTrHeight > 0) {
  276 + /* 当宽度,高度不为空 */
  277 + table.push(
  278 + <table
  279 + bgcolor= {bgcolor? "#b7e0ff":'yellow'}
  280 + border="1"
  281 + width={dTableWidth / dScale}
  282 + height={dTableHeight / dScale}
  283 + className={styles.sTable}
  284 + style={{ floats: floats }}
  285 + >
  286 + {this.handleGetChildTr(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx)}
  287 + </table>
  288 + );
  289 + }
  290 + // var table = " <table bgcolor ='yellow' border='1' width ='" + dTableWidth /4 + "' height ='" + dTableHeight /4 + "' " + floats + ">";
  291 + // for(var i = 0;i<tr;i++){
  292 + // table = table + "<tr width ='"+dTrWidth/4 +"' height ='"+dTrHeight/4 +"' dSxBoold='"+dBoold*4+"' >";
  293 + // for(var j = 0;j<td;j++){
  294 + // table = table + "<td width ='"+dTdWidth/4+"' height = '"+dTdHeight/4+"' dZyBoold='"+dBoold*4+"' xxfx='"+xxfx+"' ></td>";
  295 + // }
  296 + // table = table + "</tr>";
  297 + //
  298 + // }
  299 + // table = table+ "</table>";
  300 + return table;
  301 + };
  302 +
  303 + // //横向+竖 添加HTML
  304 + getHHPHtml = (dMatLength, dMatWidth, dLength, dWidth, dBoold, dBite, wlfx, bBox) => {
  305 + console.log("🚀 ~ ShowImg ~ bBox:", bBox)
  306 + const elements = [];
  307 + var p_dMatLength = dMatLength;
  308 + var p_dMatWidth = dMatWidth; //减去咬口后的高度
  309 + var p_dLength = dLength; //长度*2+两个出血位
  310 + var p_dWidth = dWidth; //高度+两个出血位
  311 +
  312 + var dDivWidth = dMatLength;
  313 + var dDivHeight = dMatWidth;
  314 + var dTableWidth = Math.floor(p_dMatLength / p_dLength) * p_dLength;
  315 + var dTableHeight = Math.floor(p_dMatWidth / p_dWidth) * p_dWidth;
  316 + var dTrWidth = Math.floor(p_dMatLength / p_dLength) * p_dLength;
  317 + var dTrHeight = p_dWidth;
  318 + var dTdWidth = dLength;
  319 + var dTdHeight = dWidth;
  320 + var iTemp2 = 0;
  321 + var floats = "";
  322 + var tr = Math.floor(p_dMatWidth / p_dWidth);
  323 + var td = Math.floor(p_dMatLength / p_dLength);
  324 +
  325 + var tmp = true;
  326 + if (dLength >= dWidth) {
  327 + //竖向调用进来的 竖+横
  328 + tmp = dMatWidth > p_dLength;
  329 + } else {
  330 + tmp = dMatLength > p_dWidth;
  331 + }
  332 + var tr2 = 0;
  333 + var td2 = 0;
  334 + //大的长 - Math.floor(大长 / 小长)*小长>= 小短, 并且大的高度>小的长度
  335 + var dTableWidth2 = 0;
  336 + var dTableHeight2 = 0;
  337 + var dTrWidth2 = 0;
  338 + var dTrHeight2 = 0;
  339 + var dTdWidth2 = 0;
  340 + var dTdHeight2 = 0;
  341 +
  342 + if (dLength >= dWidth) {
  343 + // alert(p_dMatLength - td * p_dLength);
  344 + // alert(p_dWidth);
  345 + if (p_dMatLength - td * p_dLength >= p_dWidth && tmp) {
  346 + if (dLength >= dWidth) {
  347 + //横+竖 才会左边
  348 + floats = " style='float:left';";
  349 + }
  350 + tr2 = Math.floor(p_dMatWidth / p_dLength);
  351 + td2 = Math.floor((p_dMatLength - td * p_dLength) / p_dWidth);
  352 + dTableWidth2 = td2 * p_dWidth;
  353 + dTableHeight2 = tr2 * p_dLength;
  354 + dTrWidth2 = td2 * p_dWidth;
  355 + dTrHeight2 = p_dLength;
  356 + dTdWidth2 = p_dWidth;
  357 + dTdHeight2 = p_dLength;
  358 + }
  359 + } else {
  360 + if (p_dMatWidth - tr * p_dWidth >= p_dLength && tmp) {
  361 + tr2 = Math.floor((p_dMatWidth - tr * p_dWidth) / p_dLength);
  362 + td2 = Math.floor(p_dMatLength / p_dWidth);
  363 + dTableWidth2 = td2 * p_dWidth;
  364 + dTableHeight2 = tr2 * p_dLength;
  365 + dTrWidth2 = td2 * p_dWidth;
  366 + dTrHeight2 = p_dLength;
  367 + dTdWidth2 = p_dWidth;
  368 + dTdHeight2 = p_dLength;
  369 + }
  370 + }
  371 +
  372 + iTemp2 = tr2 * td2;
  373 + // var html ="";
  374 + // var div = "<div style=\"background:#DDDDFF;width:" + dMatLength + "px;height:" + dMatWidth + " \" width =" + dMatLength + "px height ='" + dMatWidth + "' dBite ='" + dBite + "' >";
  375 + // var table = getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,0);
  376 + //
  377 + //
  378 + // if(iTemp2>0){
  379 + // table = table + getTable(dTableWidth2,dTableHeight2,dTrWidth2,dTrHeight2,dTdWidth2,dTdHeight2,floats,dBoold,tr2,td2,0);
  380 + // }
  381 + // html = div + table + "</div>";
  382 + // $("#table").html(html);
  383 + const sStyleObject = {};
  384 + // sStyleObject.position = 'absolute';
  385 + // sStyleObject.background = '#DDDDFF';
  386 + sStyleObject.width = dMatLength / dScale + 10;
  387 + sStyleObject.height = dMatWidth / dScale + 10;
  388 + sStyleObject.color = "red";
  389 + const num = {};
  390 + num.display = "block";
  391 + num.position = "absolute";
  392 + num.width = "28px";
  393 + num.top = "48%";
  394 + num.fontSize = "12px";
  395 + // 快速报价单独处理 bBox 为true
  396 + if (bBox) {
  397 + if (iTemp2 > 0) {
  398 + elements.push(
  399 + <div
  400 + className={wlfx === 1 ? styles.area : styles.area2}
  401 + style={sStyleObject}
  402 + width={dMatLength / dScale}
  403 + height={dMatWidth / dScale}
  404 + dBite={dBite}
  405 + dBlood={dBoold}
  406 + >
  407 + <div className={styles.bBoxDivHeight}>
  408 + {/* <div className={styles.divArrowLeft} /> */}
  409 + <LeftOutlined className={styles.divArrowLeftIcon} style={{color:'#333'}}/>
  410 + <div className={styles.divHeightLine} style={{backgroundColor:'#333'}}>{dMatLength + dBite}</div>
  411 + {/* <div className={styles.divArrowRight} /> */}
  412 + <RightOutlined className={styles.divArrowRightIcon} style={{color:'#333'}}/>
  413 + </div>{" "}
  414 + <div className={styles.bBoxDivWidth}>
  415 + {/* <div className={styles.divArrowTop} />
  416 + <div className={styles.divWidthLine}>
  417 + <span style={num}>{dMatWidth}</span>
  418 + </div>{" "}
  419 + <div className={styles.divArrowTop} /> */}
  420 + <UpOutlined className={styles.divArrowTopIcon} style={{color:'#333'}}/>
  421 + <div className={styles.divWidthLine} style={{backgroundColor:'#333'}}>
  422 + <span style={num}>{dMatWidth}</span>
  423 + </div>{" "}
  424 + <DownOutlined className={styles.divArrowBottomIcon} style={{color:'#333'}}/>
  425 + </div>
  426 + {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
  427 + {this.getTable(dTableWidth2, dTableHeight2, dTrWidth2, dTrHeight2, dTdWidth2, dTdHeight2, floats, dBoold, tr2, td2, 0)}
  428 + </div>
  429 + );
  430 + } else {
  431 + elements.push(
  432 + <div
  433 + className={wlfx === 1 ? styles.area : styles.area2}
  434 + style={bBox?{...sStyleObject,backgroundImage:'none',backgroundColor:'rgb(243, 243, 243)'}: sStyleObject}
  435 + width={dMatLength / dScale}
  436 + height={dMatWidth / dScale}
  437 + dBite={dBite}
  438 + dBlood={dBoold}
  439 + >
  440 + <div className={styles.bBoxDivHeight}>
  441 + {/* <div className={styles.divArrowLeft} /> */}
  442 + <LeftOutlined className={styles.divArrowLeftIcon} style={{color:'#333'}}/>
  443 + <div className={styles.divHeightLine} style={{backgroundColor:'#333',height:'1px'}}>{dMatLength + dBite}</div>
  444 + {/* <div className={styles.divArrowRight} /> */}
  445 + <RightOutlined className={styles.divArrowRightIcon} style={{color:'#333'}}/>
  446 + </div>{" "}
  447 + <div className={styles.bBoxDivWidth}>
  448 + {/* <div className={styles.divArrowTop} /> */}
  449 + <UpOutlined className={styles.divArrowTopIcon} style={{color:'#333'}}/>
  450 + <div className={styles.divWidthLine} style={{backgroundColor:'#333',width:'1px'}}>
  451 + <span style={num}>{dMatWidth}</span>
  452 + </div>{" "}
  453 + <DownOutlined className={styles.divArrowBottomIcon} style={{color:'#333'}}/>
  454 + {/* <div className={styles.divArrowTop} /> */}
  455 + </div>
  456 + {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0,true)}
  457 + </div>
  458 + );
  459 + }
  460 + } else {
  461 + if (iTemp2 > 0) {
  462 + elements.push(
  463 + <div
  464 + className={wlfx === 1 ? styles.area : styles.area2}
  465 + style={sStyleObject}
  466 + width={dMatLength / dScale}
  467 + height={dMatWidth / dScale}
  468 + dBite={dBite}
  469 + dBlood={dBoold}
  470 + >
  471 + <div className={styles.divHeight}>
  472 + <div className={styles.divArrowLeft} />
  473 + <div className={styles.divHeightLine}>{dMatLength + dBite}</div>
  474 + <div className={styles.divArrowRight} />
  475 + </div>{" "}
  476 + <div className={styles.divWidth}>
  477 + <div className={styles.divArrowTop} />
  478 + <div className={styles.divWidthLine}>
  479 + <span style={num}>{dMatWidth}</span>
  480 + </div>{" "}
  481 + <div className={styles.divArrowTop} />
  482 + </div>
  483 + {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
  484 + {this.getTable(dTableWidth2, dTableHeight2, dTrWidth2, dTrHeight2, dTdWidth2, dTdHeight2, floats, dBoold, tr2, td2, 0)}
  485 + </div>
  486 + );
  487 + } else {
  488 + elements.push(
  489 + <div
  490 + className={wlfx === 1 ? styles.area : styles.area2}
  491 + style={sStyleObject}
  492 + width={dMatLength / dScale}
  493 + height={dMatWidth / dScale}
  494 + dBite={dBite}
  495 + dBlood={dBoold}
  496 + >
  497 + <div className={styles.divHeight}>
  498 + <div className={styles.divArrowLeft} />
  499 + <div className={styles.divHeightLine}>{dMatLength + dBite}</div>
  500 + <div className={styles.divArrowRight} />
  501 + </div>{" "}
  502 + <div className={styles.divWidth}>
  503 + <div className={styles.divArrowTop} />
  504 + <div className={styles.divWidthLine}>
  505 + <span style={num}>{dMatWidth}</span>
  506 + </div>{" "}
  507 + <div className={styles.divArrowTop} />
  508 + </div>
  509 + {this.getTable(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, 0)}
  510 + </div>
  511 + );
  512 + }
  513 + }
  514 +
  515 + return elements;
  516 + };
  517 +
  518 + /* 计算排版数 */
  519 + handleGetImgPQty = tableDataRow => {
  520 + let divStr = [];
  521 + let dSingleQty = 0; /* 排版数 */
  522 + let tag = 1; //1横排还是2竖排
  523 + let dPartsWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽 */
  524 + let dPartsLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机高 */
  525 + let dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMaterialWidth, 0)); /* 材料宽 */
  526 + let dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMaterialLength, 0)); /* 材料高 */
  527 + const sPrintingPlate = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sMaterialsPlate, 0)); /* 排版方式 */
  528 + const bBox = tableDataRow.bBox;
  529 + if (tableDataRow.bMachineStyle) {
  530 + /* 如果材料是否取原材料规格打了勾 */
  531 + dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 材料宽 */
  532 + dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 材料高 */
  533 + }
  534 +
  535 + /* 滚轮 */
  536 + if (tableDataRow.bReel) {
  537 + const dCampare1 = Math.floor(dMachineWidth / dPartsWidth) * dPartsWidth; /* 1060 */
  538 + const dCampare2 = Math.floor(dMachineWidth / dPartsLength) * dPartsLength; /* 590*/
  539 + if (dCampare1 > dCampare2) {
  540 + dMachineLength = dPartsLength;
  541 + } else {
  542 + dMachineLength = dPartsWidth;
  543 + }
  544 + }
  545 +
  546 + const dBoold = 0; /* 出血位 */
  547 + const dBite = 0; /* 咬口 */
  548 + // console.log('dPartsWidth', dPartsWidth, dPartsLength);
  549 + var dMachineTmp = 0;
  550 + var dPartsTmp = 0;
  551 + var tagval = "";
  552 + var xxfx = 3; //虚线方向 1：横虚线 2：树虚线;3:无需虚线
  553 + var wlfx = 1; //竖纹
  554 + //机器长宽转换
  555 + if (dMachineWidth > dMachineLength) {
  556 + dMachineTmp = dMachineWidth; //上级高
  557 + dMachineWidth = dMachineLength; //上级宽
  558 + dMachineLength = dMachineTmp;
  559 + wlfx = 2;
  560 + }
  561 + //长宽转换（dLength 高度、dWidth 表示宽度,高度永远大于宽度）
  562 + if (dPartsWidth > dPartsLength) {
  563 + dPartsTmp = dPartsWidth; //上级高
  564 + dPartsWidth = dPartsLength; //上级宽
  565 + dPartsLength = dPartsTmp;
  566 + }
  567 + dMachineWidth = dMachineWidth - dBite;
  568 +
  569 + const sCutMethod = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sCutMethod, 0)); /* 裁切方式 */
  570 + const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */
  571 +
  572 + // console.log('sPrintingPlate', sPrintingPlate);
  573 + // console.log('sCutMethod', sCutMethod);
  574 + // console.log('sSpineDirection', sSpineDirection);
  575 + let tmpBl = 1; //排版数乘的数字，如果书类为2 默认是1
  576 + let tmp = 0;
  577 + //三边裁切
  578 + if (false) {
  579 + //长书(1,3,4)
  580 + if (sSpineDirection === 1) {
  581 + dPartsLength = dPartsLength;
  582 + dPartsWidth = dPartsWidth * 2;
  583 + } else {
  584 + dPartsWidth = dPartsWidth;
  585 + dPartsLength = dPartsLength * 2;
  586 + }
  587 + tmpBl = 2;
  588 + dPartsWidth = dPartsWidth + 2 * dBoold;
  589 + dPartsLength = dPartsLength + 2 * dBoold;
  590 + if (sPrintingPlate === 1) {
  591 + /* 横竖取大 */
  592 + tmp = this.getHSQD(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  593 + dSingleQty = tmp * 2;
  594 + tag = this.getTag(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  595 + if (tag === 2) {
  596 + // alert("横竖取大==版数："+tmp*2);
  597 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
  598 + } else {
  599 + // alert("横竖取大==版数："+tmp*2);
  600 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
  601 + }
  602 +
  603 + // console.log('横竖取大排版数：', dSingleQty);
  604 + } else if (sPrintingPlate === 3) {
  605 + /* 横排 */
  606 + if (wlfx === 1 && sSpineDirection === 1) {
  607 + //长书脊
  608 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  609 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
  610 + dSingleQty = tmp * 2;
  611 + } else if (wlfx === 2 && sSpineDirection === 1) {
  612 + //长书脊
  613 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  614 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
  615 + dSingleQty = tmp * 2;
  616 + } else if (wlfx === 1 && sSpineDirection === 2) {
  617 + //长书脊
  618 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  619 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
  620 + dSingleQty = tmp * 2;
  621 + } else if (wlfx == 2 && sSpineDirection == 2) {
  622 + //长书脊
  623 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  624 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
  625 + dSingleQty = tmp * 2;
  626 + }
  627 + } else if (sPrintingPlate === 4) {
  628 + /* 竖排 */
  629 + //竖排
  630 + if (wlfx === 1 && sSpineDirection === 1) {
  631 + //长书脊
  632 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  633 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
  634 + dSingleQty = tmp * 2;
  635 + } else if (wlfx === 2 && sSpineDirection === 1) {
  636 + //长书脊
  637 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  638 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
  639 + dSingleQty = tmp * 2;
  640 + } else if (wlfx === 1 && sSpineDirection === 2) {
  641 + //长书脊
  642 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  643 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 2, wlfx);
  644 + dSingleQty = tmp * 2;
  645 + } else if (wlfx === 2 && sSpineDirection === 2) {
  646 + //长书脊
  647 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  648 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 1, wlfx);
  649 + dSingleQty = tmp * 2;
  650 + }
  651 + } else if (sPrintingPlate === 2) {
  652 + /* 混排 */
  653 + //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
  654 + }
  655 + } else {
  656 + /* 四边裁 */
  657 + dPartsWidth = dPartsWidth + 2 * dBoold;
  658 + dPartsLength = dPartsLength + 2 * dBoold;
  659 + if (sPrintingPlate === 3) {
  660 + /* 横排 */
  661 + if (wlfx === 1) {
  662 + //长书级
  663 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  664 + dSingleQty = tmp;
  665 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 3, wlfx);
  666 + } else {
  667 + //长书级
  668 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  669 + dSingleQty = tmp;
  670 + // $("#dPlateQty").val(tmp);
  671 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 3, wlfx);
  672 + }
  673 + // var tmp = getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  674 + // alert("横排版数："+tmp);
  675 + // addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2);
  676 + } else if (sPrintingPlate === 4) {
  677 + /* 竖排 */
  678 + //竖排
  679 + if (wlfx === 1) {
  680 + //长书级
  681 + tmp = this.getSp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  682 + dSingleQty = tmp;
  683 + // $("#dPlateQty").val(tmp);
  684 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 4, 3, wlfx);
  685 + } else {
  686 + //长书级
  687 + tmp = this.getHp(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth);
  688 + dSingleQty = tmp;
  689 + // $("#dPlateQty").val(tmp);
  690 + divStr = this.addHtml(dMachineLength, dMachineWidth, dPartsLength, dPartsWidth, dBoold, dBite, 3, 3, wlfx);
  691 + }
  692 + } else {
  693 + /* 除了横排 、竖排 其他都是混排 */
  694 + //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
  695 + // if( sCutMethod===1){
  696 + // console.log("书没有混排");
  697 + // return;
  698 + // }
  699 + //竖排+横排
  700 + let htTmpTag = 0;
  701 + let tmp3 = 0;
  702 + tmp = this.getHHP(dMachineWidth, dMachineLength, dPartsLength, dPartsWidth);
  703 + tmp3 = this.getHHP(dMachineWidth, dMachineLength, dPartsWidth, dPartsLength);
  704 + if (tmp < tmp3) {
  705 + tmp = tmp3;
  706 + htTmpTag = 1;
  707 + }
  708 + // alert("混拼排版数："+tmp);
  709 + // $("#dPlateQty").val(tmp);
  710 + dSingleQty = tmp;
  711 +
  712 + //哪个大取哪个
  713 + if (htTmpTag == 0) {
  714 + divStr = this.getHHPHtml(dMachineWidth, dMachineLength, dPartsLength, dPartsWidth, dBoold, dBite, wlfx, bBox);
  715 + } else {
  716 + divStr = this.getHHPHtml(dMachineWidth, dMachineLength, dPartsWidth, dPartsLength, dBoold, dBite, wlfx, bBox);
  717 + }
  718 + }
  719 + }
  720 +
  721 + const lrl = ((tmp * dPartsLength * dPartsWidth) / (dMachineWidth * (dMachineLength + dBite))) * 100;
  722 +
  723 + const isNumber = value => {
  724 + return typeof value === "number" && !Number.isNaN(value);
  725 + };
  726 + /* 增加利润率显示 */
  727 + const dProfit = commonUtils.convertFixNum(lrl, 2);
  728 + const dProfitStr = commonUtils.isNotEmptyNumber(dProfit) ? dProfit + "%" : 0;
  729 + divStr.push(
  730 + <div className={styles.fontArea} style={{marginTop:`${bBox?30:0}px`}}>
  731 + <div style={{ fontSize: "12px", color: "#000" }}>
  732 + 材料利用率：
  733 + <span style={{ color: "#ff0000" }}>{dProfitStr}</span>{" "}
  734 + </div>
  735 + </div>
  736 + );
  737 +
  738 + return isNumber(dProfit) ? divStr : null;
  739 + };
  740 +
  741 + render() {
  742 + let element = "";
  743 + const { controlData, controlSelectedRowKeys, materialsData, bBox } = this.props;
  744 + console.log(this.props);
  745 +
  746 + if (commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys) && commonUtils.isNotEmptyArr(materialsData)) {
  747 + const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
  748 + const materialsDataFilter = materialsData.filter(
  749 + item => controlSelectedRowKeys.includes(item.sControlId) && item.sType === "0"
  750 + ); /* 取部件材料的第一条11 */
  751 + if (iIndex > -1 && commonUtils.isNotEmptyArr(materialsDataFilter)) {
  752 + const tableDataRow = controlData[iIndex];
  753 + const materialRow = materialsDataFilter[0];
  754 + if (tableDataRow && materialRow) {
  755 + const dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机高 */
  756 + const dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽 */
  757 + /* 材料表的材料规格 */
  758 + let dMaterialLength =
  759 + !commonUtils.isEmpty(materialRow.sMaterialsStyle) && materialRow.sMaterialsStyle.split("*").length === 2
  760 + ? materialRow.sMaterialsStyle.split("*")[1]
  761 + : 0;
  762 + dMaterialLength = commonUtils.convertStrToNumber(commonUtils.isNull(dMaterialLength, 0)); /* 产品宽 */
  763 + dMaterialLength = typeof dMaterialLength === "number" && !isNaN(dMaterialLength) ? dMaterialLength : 0; /* 产品宽 */
  764 +
  765 + let dMaterialWidth =
  766 + !commonUtils.isEmpty(materialRow.sMaterialsStyle) && materialRow.sMaterialsStyle.split("*").length === 2
  767 + ? materialRow.sMaterialsStyle.split("*")[0]
  768 + : 0;
  769 + dMaterialWidth = commonUtils.convertStrToNumber(commonUtils.isNull(dMaterialWidth, 0)); /* 材料高 */
  770 + dMaterialWidth = typeof dMaterialWidth === "number" && !isNaN(dMaterialWidth) ? dMaterialWidth : 0; /* 材料宽 */
  771 + tableDataRow.dMaterialWidth = dMaterialWidth;
  772 + tableDataRow.dMaterialLength = dMaterialLength;
  773 +
  774 + tableDataRow.bMachineStyle = materialRow.bMachineStyle; /* 是否取原材料规格 */
  775 + tableDataRow.bReel = materialRow.bReel;
  776 +
  777 + if (dMachineLength === 0 || dMachineWidth === 0 || dMaterialLength === 0 || dMaterialLength === 0) {
  778 + element = "";
  779 + } else {
  780 + element = this.handleGetImgPQty(tableDataRow);
  781 + }
  782 + }
  783 + }
  784 + }
  785 + if (bBox && this.props.state.slaveData && this.props.state.slaveData.length > 0) {
  786 + const saveIndex = this.props.state.slaveData.findIndex(
  787 + item => item.sTreeNodeName === this.props.state.selectedNode.showName && item.sBoxModel === this.props.boxModel
  788 + );
  789 + const { newMaterialLength, newMaterialWidth, materialLength, materialWidth, dWlcd, dWlkd } = this.props.state.slaveData[saveIndex];
  790 + // 计算出来的最大尺寸
  791 + const tableDataRow = {
  792 + dMaterialLength: dWlcd || 0,
  793 + dMaterialWidth: dWlkd || 0,
  794 + dMachineWidth: materialWidth || 0,
  795 + dMachineLength: materialLength || 0,
  796 + bBox,
  797 + };
  798 + if (materialLength) {
  799 + element = this.handleGetImgPQty(tableDataRow);
  800 + }
  801 +
  802 + setTimeout(() => {
  803 + if (this.tableRef && this.tableRef.current) {
  804 + this.tableRef.current.style.transform = `scale(${1.2})`;
  805 + this.tableRef.current.style.transformOrigin = `0 0`;
  806 + // this.tableRef.current.style.margin = "30px 0 0 50px";
  807 + }
  808 + }, 200);
  809 + }
  810 +
  811 + return (
  812 + <div id="table" className={styles.bigDiv} ref={this.tableRef}>
  813 + {element}
  814 + </div>
  815 + );
  816 + }
  817 +}
... ...
src/components/Common/ShowImgMaterial/index.less 0 → 100644
  View file @d624af2
  1 +@arrow_bg: #002bb0; // 高亮色
  2 +/* 最大外围 */
  3 +.bigDiv{
  4 + width: 100%;
  5 + padding-top: 14px;
  6 + display: flex;
  7 + flex-direction: column;
  8 +}
  9 +
  10 +/* 表格区域 */
  11 +.area{
  12 + position: relative;
  13 + /* 1-竖纹 */
  14 + background-image: linear-gradient(90deg,#bae7ff 50%,white 0);
  15 + background-size: 10px 100%;
  16 + border: 1px solid #000;
  17 + //-ms-transform:rotate(270deg); /* IE 9 */
  18 + //-webkit-transform:rotate(270deg); /* Safari and Chrome */
  19 + //transform:rotate(270deg);
  20 + //left:20px;
  21 + //top:-20px;
  22 +}
  23 +.area2{
  24 + position: relative;
  25 + /* 2-横纹 */
  26 + background-image: linear-gradient(0deg,#bae7ff 50%,white 50%);
  27 + background-size: 100% 20px;
  28 + border: 1px solid #000;
  29 + //-ms-transform:rotate(270deg); /* IE 9 */
  30 + //-webkit-transform:rotate(270deg); /* Safari and Chrome */
  31 + //transform:rotate(270deg);
  32 + //left:20px;
  33 + //top:-20px;
  34 +}
  35 +.sTable{
  36 + //background-image: linear-gradient(0deg,#bae7ff 50%,white 50%);
  37 + //background-size: 100% 20px;
  38 +}
  39 +.fontDiv{
  40 + color: #ff3c3c;
  41 + position: absolute;
  42 + top:50%;
  43 + left:40%;
  44 +}
  45 +.fontDiv2{
  46 + color: #ff3c3c;
  47 + position: absolute;
  48 + top:63%;
  49 + left:40%;
  50 +}
  51 +/* 文字区域 */
  52 +.fontArea{
  53 + width: 80%;
  54 + display: flex;
  55 + flex-direction: column;
  56 + justify-content: center;
  57 + margin-left: 10px;
  58 +}
  59 +
  60 +
  61 +
  62 +.divWidth{
  63 + height: 100%;
  64 + position: absolute;
  65 + left: -30px;
  66 +}
  67 +.bBoxDivWidth{
  68 + height: 100%;
  69 + position: absolute;
  70 + right: -9px;
  71 +}
  72 +.divWidthLine{
  73 + width: 2px;
  74 + height: 97%;
  75 + background: @arrow_bg;
  76 + text-align: center;
  77 +}
  78 +.divHeight{
  79 + width: 100%;
  80 + position: absolute;
  81 + top: -17px;
  82 +}
  83 +.bBoxDivHeight{
  84 + width: 100%;
  85 + position: absolute;
  86 + bottom: -8px;
  87 +}
  88 +.divArrowLeft{ /* 左侧箭头 */
  89 + width: 2px;
  90 + height: 9px;
  91 + background: @arrow_bg;
  92 + float: left;
  93 +}
  94 +.divArrowRight{ /* 左侧箭头 */
  95 + width: 2px;
  96 + height: 8px;
  97 + background: @arrow_bg;
  98 + float: right;
  99 +}
  100 +.divArrowLeftIcon{
  101 + width: 10px;
  102 + height: 4px;
  103 + position: absolute;
  104 + left: -3px;
  105 + top: -1.5px;
  106 + color: @arrow_bg;
  107 +}
  108 +.divArrowRightIcon{
  109 + width: 10px;
  110 + height: 4px;
  111 + position: absolute;
  112 + right: -3px;
  113 + top: -1.5px;
  114 + color: @arrow_bg;
  115 +}
  116 +.divArrowLeftIconLine{
  117 + width: 1px;
  118 + height: 30px;
  119 + position: absolute;
  120 + left: 0px;
  121 + top: 0px;
  122 + background-color: #333;
  123 +}
  124 +.divArrowRightIconLine{
  125 + width: 1px;
  126 + height: 30px;
  127 + position: absolute;
  128 + right: 0px;
  129 + top: 0px;
  130 + background-color: #333;
  131 +}
  132 +.divArrowTop{
  133 + width: 8px;
  134 + height: 2px;
  135 + background: @arrow_bg;
  136 +}
  137 +.divArrowTopIcon{
  138 + position: absolute;
  139 + top: -1px;
  140 + left: -4.5px;
  141 + width: 10px;
  142 + height: 4px;
  143 + color: @arrow_bg;
  144 +}
  145 +.divArrowBottomIcon{
  146 + position: absolute;
  147 + bottom: 3px;
  148 + left: -4.5px;
  149 + width: 10px;
  150 + height: 4px;
  151 + color: @arrow_bg;
  152 +}
  153 +.divArrowBottom{
  154 + width: 8px;
  155 + height: 2px;
  156 + background: @arrow_bg;
  157 +}
  158 +.divHeightLine{
  159 + height: 1px;
  160 + background: @arrow_bg;
  161 + text-align: center;
  162 + font-size: 12px;
  163 +}
  164 +.tdStyleM{ /* 横向 */
  165 + font-size: 12px;
  166 + position: absolute;
  167 + top: 0px;
  168 + left: 46%;
  169 +}
  170 +.tdStyleM1 { /* 纵向 */
  171 + font-size: 12px;
  172 + position: absolute;
  173 + left: 0%;
  174 + top:32%;
  175 +}
... ...
src/components/Common/ShowImgPQty/index.js 0 → 100644
  View file @d624af2
  1 +/* eslint-disable */
  2 +// eslint-disable-next-line no-plusplus
  3 +// eslint-disable-next-line no-mixed-operators
  4 +
  5 +import React, { Component } from 'react';
  6 +import * as commonUtils from '../../../utils/utils';
  7 +import styles from './index.less';
  8 +
  9 +const dScale = 5;
  10 +export default class ShowImg extends Component {
  11 + constructor(props) {
  12 + super(props);
  13 + this.state = {
  14 + };
  15 + }
  16 +
  17 +
  18 + /* 根据不同条件 计算排版数 */
  19 + //竖排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineLength，dPartsWidth--》dMachineWidth
  20 + getSp = (dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth)=>{
  21 + var dMachineWidth = dMachineWidth;
  22 + var dMachineLength = dMachineLength;
  23 + //计算合版数量
  24 + var iTemp = Math.floor(dMachineWidth / dPartsWidth) * Math.floor(dMachineLength /dPartsLength );
  25 + return iTemp;
  26 + }
  27 + //横排（上机高、上机宽、部件高、部件宽、出血咬口） dPartsLength --》dMachineWidth，dPartsWidth--》dMachineLength
  28 + getHp = (dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth) =>{
  29 + var dMachineWidth = dMachineWidth;
  30 + var dMachineLength = dMachineLength;
  31 + //计算合版数量
  32 + var iTemp = Math.floor(dMachineWidth / dPartsLength) * Math.floor(dMachineLength / dPartsWidth);
  33 + return iTemp;
  34 + }
  35 + //横竖取大
  36 + getHSQD = (dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth) =>{
  37 + var iTemp =this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  38 + var iTemp2 =this.getSp(dMachineLength,dMachineWidth,dPartsLength,dPartsWidth);
  39 + if(iTemp2>iTemp){
  40 + iTemp = iTemp2;
  41 + // tag= 2;//竖排
  42 + }
  43 + return iTemp;
  44 + }
  45 +
  46 +
  47 + getTag = (dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth) =>{
  48 + let num = 1;
  49 + var iTemp =this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  50 + var iTemp2 =this.getSp(dMachineLength,dMachineWidth,dPartsLength,dPartsWidth);
  51 + if(iTemp2>iTemp){
  52 + num= 2;//竖排
  53 + }
  54 + return num;
  55 + }
  56 +
  57 + //传入参数 宽、高、长、宽
  58 + getHHP =(dMatLength,dMatWidth ,dLength ,dWidth) =>{
  59 + var p_dMatLength = dMatLength;//
  60 + var p_dMatWidth = dMatWidth;//
  61 + var p_dLength = dLength;//长度*2+两个出血位
  62 + var p_dWidth = dWidth;//高度+两个出血位
  63 + var tr = Math.floor(p_dMatWidth / p_dWidth);
  64 + var td = Math.floor(p_dMatLength / p_dLength);
  65 + //计算合版数量
  66 + var iTemp = Math.floor(p_dMatLength / p_dLength) * Math.floor(p_dMatWidth / p_dWidth);
  67 + var iTemp2 = 0;
  68 + var tmp = true;
  69 + if(dLength>=dWidth){
  70 + //竖向调用进来的 竖+横
  71 + tmp = dMatWidth > p_dLength;
  72 + }else{
  73 + tmp = dMatLength > dWidth;
  74 + }
  75 + var tr2 = 0;
  76 + var td2 = 0;
  77 + //横排
  78 + if(dLength>=dWidth){
  79 + if ((p_dMatLength - td * p_dLength) >= p_dWidth && tmp)
  80 + {
  81 + if(dLength>=dWidth){
  82 + //横+竖 才会左边
  83 + // floats=" style='float:left';";
  84 + }
  85 + tr2 = Math.floor(p_dMatWidth/ p_dLength);
  86 + td2 = Math.floor((p_dMatLength - td * p_dLength)/p_dWidth);
  87 + }
  88 + }else{//竖排
  89 + if ((p_dMatWidth - tr * p_dWidth) >= p_dLength && tmp){
  90 + tr2 = Math.floor((p_dMatWidth - tr * p_dWidth)/p_dLength);
  91 + td2 = Math.floor(p_dMatLength/ p_dWidth);
  92 + // dTableWidth2 = td2*p_dWidth;
  93 + // dTableHeight2 = tr2*p_dLength;
  94 + // dTrWidth2 = td2*p_dWidth;
  95 + // dTrHeight2 = p_dLength;
  96 + // dTdWidth2 = dLength;
  97 + // dTdHeight2 = dWidth;
  98 + }
  99 + }
  100 + iTemp2 = tr2*td2;
  101 + iTemp = iTemp+iTemp2;
  102 + return iTemp;
  103 + }
  104 +
  105 + //添加HTML
  106 + // <select id="sPrintingPlate" name="sPrintingPlate">
  107 + // <option value="1">横竖取大</opion>
  108 + // <option value="3">横排</opion>
  109 + // <option value="4">竖排</opion>
  110 + // <option value="2">混排</opion>
  111 + addHtml=(dMachineLength, dMachineWidth , dPartsLength , dPartsWidth, dBoold ,dBite,sPrintingPlate,xxfx,wlfx)=>{
  112 +
  113 + const elements = [];
  114 + var dDivHeight = dMachineLength+dBite;//传入的为减去咬口计算时的高度
  115 + var dDivWidth = dMachineWidth;//宽度
  116 + var dTableWidth = 0;
  117 + var dTableHeight = 0;
  118 + var dTrWidth = 0;
  119 + var dTrHeight = 0;
  120 + var dTdWidth = 0;
  121 + var dTdHeight = 0;
  122 + var tr = 0;
  123 + var td = 0;
  124 + if(sPrintingPlate===3){//横排（垂直纹路）
  125 + dTableHeight = Math.floor(dMachineLength / dPartsWidth)*dPartsWidth;
  126 + dTableWidth = Math.floor(dMachineWidth / dPartsLength)*dPartsLength;
  127 + dTrWidth = Math.floor(dMachineWidth / dPartsLength)*dPartsLength;
  128 + dTrHeight = dPartsWidth;
  129 + dTdWidth = dPartsLength;
  130 + dTdHeight = dPartsWidth;
  131 + tr = Math.floor(dMachineLength / dPartsWidth);
  132 + td = Math.floor(dMachineWidth / dPartsLength);
  133 + } else {//竖排（顺纹路）
  134 + dTableHeight = Math.floor(dMachineLength / dPartsLength)*dPartsLength;
  135 + dTableWidth = Math.floor(dMachineWidth / dPartsWidth)*dPartsWidth;
  136 + dTrWidth = Math.floor(dMachineWidth / dPartsWidth)*dPartsWidth;
  137 + dTrHeight = dPartsLength;
  138 + dTdWidth = dPartsWidth;
  139 + dTdHeight = dPartsLength;
  140 + tr = Math.floor(dMachineLength / dPartsLength);
  141 + td = Math.floor(dMachineWidth / dPartsWidth);
  142 + }
  143 + // alert("宽度："+(dTdWidth-2*dBoold)+" 高度："+(dTdHeight-2*dBoold)+" 出血："+dBoold);
  144 + const sStyleObject = {};
  145 + // sStyleObject.position = 'absolute';
  146 + // sStyleObject.background = '#DDDDFF';
  147 + sStyleObject.width = dDivWidth / dScale + 10;
  148 + sStyleObject.height = dDivHeight / dScale + 10;
  149 + sStyleObject.color = 'red';
  150 + const num = {};
  151 + num.display = 'block';
  152 + num.position = 'absolute';
  153 + num.width = '28px';
  154 + num.top = '48%';
  155 + num.fontSize = '12px';
  156 +
  157 + var floats = "";
  158 + // var html ="";
  159 + // var div = "<div style='background:#DDDDFF;width:" + dDivWidth + "px;height:" + dDivHeight +"px' dBite =" + dBite + " dBoold =" + dBoold + " >";
  160 + // var table = this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,xxfx);
  161 + // html = div + table + "</div>";
  162 +
  163 + elements.push(<div style={sStyleObject} className={wlfx ===1 ? styles.area :styles.area2} dBite ={dBite} dBlood ={dBoold}>
  164 + <div className={styles.divHeight}><div className={styles.divArrowLeft} /><div className={styles.divHeightLine}>{dMachineWidth + dBite}</div><div className={styles.divArrowRight} /></div> <div className={styles.divWidth}><div className={styles.divArrowTop} /><div className={styles.divWidthLine}><span style={num}>{dMachineLength}</span></div> <div className={styles.divArrowTop} /></div>
  165 + {this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,xxfx)}
  166 + </div>);
  167 +
  168 + return elements;
  169 + }
  170 +
  171 + handleGetChildTd = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx , i) => {
  172 + const tdArr = [];
  173 + /* xxfx 虚线方向 2：横虚线 1：树虚线;3:无需虚线 */
  174 + // console.log('虚线方向：', xxfx);
  175 + const sTdDiv ={};
  176 + sTdDiv.fontSize ='12px';
  177 + sTdDiv.position ='relative';
  178 + const { controlData, controlSelectedRowKeys} = this.props;
  179 + let dCutMethod = 1; /* 默认三边裁 */
  180 + if(commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys)) {
  181 + const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
  182 + if (iIndex > -1) {
  183 + const tableDataRow = controlData[iIndex];
  184 + const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */
  185 + dCutMethod = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sCutMethod, 0)); /* 裁切方式 */
  186 + if(sSpineDirection ===1){ /* 长 */
  187 + /* 长书脊逻辑 */
  188 + if(xxfx ===2) { /* 横虚线 */
  189 + sTdDiv.width = dTdWidth / dScale;
  190 + // sTdDiv.height = '25%';
  191 + sTdDiv.borderBottom='1px dashed #ff0000';
  192 + } else if(xxfx ===1) { /* 树虚线 */
  193 + sTdDiv.width = dTdWidth / dScale / 2;
  194 + sTdDiv.height = dTdHeight / dScale ;
  195 + sTdDiv.borderRight='1px dashed #ff0000';
  196 + }
  197 + } else{
  198 + /* 短书脊逻辑 */
  199 + if(xxfx ===1) { /* 横虚线 */
  200 + sTdDiv.width = dTdWidth / dScale;
  201 + // sTdDiv.height = '25%';
  202 + sTdDiv.borderBottom='1px dashed #ff0000';
  203 + } else if(xxfx ===2) { /* 树虚线 */
  204 + sTdDiv.width = dTdWidth / dScale / 2;
  205 + sTdDiv.height = dTdHeight / dScale ;
  206 + sTdDiv.borderRight='1px dashed #ff0000';
  207 + }
  208 + }
  209 +
  210 + }
  211 + }
  212 +
  213 + for (let j = 0; j < td; j++) {
  214 + tdArr.push(<td width={dTdWidth/dScale } height={dTdHeight/dScale } dZyBoold={dBoold } xxfx={xxfx} style={{'position':'relative'}}>
  215 + {((td === 1 && j ===0)) && i === 0 ? <div className={dCutMethod === 1 ? styles.tdStyleM : styles.tdStyleM}><div className={styles.tdWidth}>{dTdWidth - dBoold * 2 }</div> </div> : ''}
  216 + {((td === 1 && j ===0)) && i === 0 ? <div className={dCutMethod ===1 ? styles.tdStyleM1 : styles.tdStyleM1}><div className={styles.tdWidth}>{dTdHeight - dBoold * 2 }</div> </div> : ''}
  217 + {((td > 1 && j ===0)) && i === 0 ? <div className={dCutMethod === 1 ? styles.tdStyleM : styles.tdStyleM}><div className={styles.tdWidth}>{dTdWidth - dBoold * 2 }</div> </div> : ''}
  218 + {((td > 1 && j ===0)) && i === 0 ? <div className={dCutMethod ===1 ? styles.tdStyleM1 : styles.tdStyleM1}><div className={styles.tdWidth}>{dTdHeight - dBoold * 2 }</div> </div> : ''}
  219 + <div style={sTdDiv}></div>
  220 + </td>);
  221 + }
  222 + return tdArr;
  223 + }
  224 +
  225 + handleGetChildTr = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx) => {
  226 + const trArr = [];
  227 + // eslint-disable-next-line no-plusplus
  228 + for (let i = 0; i < tr; i++) {
  229 + trArr.push(<tr width={dTrWidth / dScale } height={dTrHeight / dScale }>
  230 + {this.handleGetChildTd(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx, i)}
  231 + </tr>);
  232 + }
  233 + return trArr;
  234 + }
  235 +
  236 + //dDivWidth 对应length,height:对应上级Width xxfx 虚线方向 2：横虚线 1：树虚线;3:无需虚线
  237 + getTable = (dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx) =>{
  238 + const table = [];
  239 + table.push(<table bgcolor="yellow" border="1" width={dTableWidth / dScale } height={ dTableHeight / dScale } className={styles.sTable} style={{floats:floats}} >
  240 + {this.handleGetChildTr(dTableWidth, dTableHeight, dTrWidth, dTrHeight, dTdWidth, dTdHeight, floats, dBoold, tr, td, xxfx)}
  241 + </table>)
  242 + // var table = " <table bgcolor ='yellow' border='1' width ='" + dTableWidth /4 + "' height ='" + dTableHeight /4 + "' " + floats + ">";
  243 + // for(var i = 0;i<tr;i++){
  244 + // table = table + "<tr width ='"+dTrWidth/4 +"' height ='"+dTrHeight/4 +"' dSxBoold='"+dBoold*4+"' >";
  245 + // for(var j = 0;j<td;j++){
  246 + // table = table + "<td width ='"+dTdWidth/4+"' height = '"+dTdHeight/4+"' dZyBoold='"+dBoold*4+"' xxfx='"+xxfx+"' ></td>";
  247 + // }
  248 + // table = table + "</tr>";
  249 + //
  250 + // }
  251 + // table = table+ "</table>";
  252 + return table;
  253 + }
  254 +
  255 + // //横向+竖 添加HTML
  256 + getHHPHtml = (dMatLength,dMatWidth ,dLength ,dWidth,dBoold ,dBite,wlfx) =>{
  257 + const elements =[];
  258 + var p_dMatLength = dMatLength;
  259 + var p_dMatWidth = dMatWidth;//减去咬口后的高度
  260 + var p_dLength = dLength;//长度*2+两个出血位
  261 + var p_dWidth = dWidth;//高度+两个出血位
  262 +
  263 + var dDivWidth = dMatLength;
  264 + var dDivHeight = dMatWidth;
  265 + var dTableWidth = Math.floor(p_dMatLength / p_dLength)*p_dLength;
  266 + var dTableHeight = Math.floor(p_dMatWidth / p_dWidth)*p_dWidth;
  267 + var dTrWidth = Math.floor(p_dMatLength / p_dLength)*p_dLength;
  268 + var dTrHeight = p_dWidth;
  269 + var dTdWidth = dLength;
  270 + var dTdHeight = dWidth;
  271 + var iTemp2 = 0;
  272 + var floats="";
  273 + var tr = Math.floor(p_dMatWidth / p_dWidth);
  274 + var td = Math.floor(p_dMatLength / p_dLength);
  275 +
  276 + var tmp = true;
  277 + if(dLength >= dWidth){
  278 + //竖向调用进来的 竖+横
  279 + tmp = dMatWidth > p_dLength;
  280 + }else{
  281 + tmp = dMatLength > p_dWidth;
  282 + }
  283 + var tr2 = 0;
  284 + var td2 = 0;
  285 + //大的长 - Math.floor(大长 / 小长)*小长>= 小短, 并且大的高度>小的长度
  286 + var dTableWidth2 = 0;
  287 + var dTableHeight2 = 0;
  288 + var dTrWidth2 = 0;
  289 + var dTrHeight2 = 0;
  290 + var dTdWidth2 = 0;
  291 + var dTdHeight2 = 0;
  292 +
  293 + if(dLength>=dWidth){
  294 + // alert(p_dMatLength - td * p_dLength);
  295 + // alert(p_dWidth);
  296 + if ((p_dMatLength - td * p_dLength) >= p_dWidth && tmp)
  297 + {
  298 + if(dLength>=dWidth){
  299 + //横+竖 才会左边
  300 + floats=" style='float:left';";
  301 + }
  302 + tr2 = Math.floor(p_dMatWidth/ p_dLength);
  303 + td2 = Math.floor((p_dMatLength - td * p_dLength)/p_dWidth);
  304 + dTableWidth2 = td2*p_dWidth;
  305 + dTableHeight2 = tr2*p_dLength;
  306 + dTrWidth2 = td2*p_dWidth;
  307 + dTrHeight2 = p_dLength;
  308 + dTdWidth2 = p_dWidth;
  309 + dTdHeight2 = p_dLength;
  310 + }
  311 + }else{
  312 + if ((p_dMatWidth - tr * p_dWidth) >= p_dLength && tmp)
  313 + {
  314 + tr2 = Math.floor((p_dMatWidth - tr * p_dWidth)/p_dLength);
  315 + td2 = Math.floor(p_dMatLength/ p_dWidth);
  316 + dTableWidth2 = td2*p_dWidth;
  317 + dTableHeight2 = tr2*p_dLength;
  318 + dTrWidth2 = td2*p_dWidth;
  319 + dTrHeight2 = p_dLength;
  320 + dTdWidth2 = p_dWidth;
  321 + dTdHeight2 = p_dLength;
  322 + }
  323 + }
  324 +
  325 + iTemp2 = tr2 * td2;
  326 + // var html ="";
  327 + // var div = "<div style=\"background:#DDDDFF;width:" + dMatLength + "px;height:" + dMatWidth + " \" width =" + dMatLength + "px height ='" + dMatWidth + "' dBite ='" + dBite + "' >";
  328 + // var table = getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,0);
  329 + //
  330 + //
  331 + // if(iTemp2>0){
  332 + // table = table + getTable(dTableWidth2,dTableHeight2,dTrWidth2,dTrHeight2,dTdWidth2,dTdHeight2,floats,dBoold,tr2,td2,0);
  333 + // }
  334 + // html = div + table + "</div>";
  335 + // $("#table").html(html);
  336 + const sStyleObject = {};
  337 + // sStyleObject.position = 'absolute';
  338 + // sStyleObject.background = '#DDDDFF';
  339 + sStyleObject.width = dMatLength / dScale + 10;
  340 + sStyleObject.height = dMatWidth / dScale + 10;
  341 + sStyleObject.color = 'red';
  342 + const num = {};
  343 + num.display = 'block';
  344 + num.position = 'absolute';
  345 + num.width = '28px';
  346 + num.top = '48%';
  347 + num.fontSize = '12px';
  348 +
  349 + if(iTemp2>0){
  350 + elements.push(<div className={wlfx ===1 ? styles.area :styles.area2} style={sStyleObject} width={dMatLength/dScale} height={dMatWidth / dScale} dBite ={dBite} dBlood ={dBoold}>
  351 + <div className={styles.divHeight}><div className={styles.divArrowLeft} /><div className={styles.divHeightLine}>{dMatLength + dBite}</div><div className={styles.divArrowRight} /></div> <div className={styles.divWidth}><div className={styles.divArrowTop} /><div className={styles.divWidthLine}><span style={num}>{dMatWidth}</span></div> <div className={styles.divArrowTop} /></div>
  352 + {this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,0)}
  353 + {this.getTable(dTableWidth2,dTableHeight2,dTrWidth2,dTrHeight2,dTdWidth2,dTdHeight2,floats,dBoold,tr2,td2,0)}
  354 + </div>);
  355 + } else {
  356 + elements.push(<div className={wlfx ===1 ? styles.area :styles.area2} style={sStyleObject} width={dMatLength/dScale} height={dMatWidth / dScale} dBite ={dBite} dBlood ={dBoold}>
  357 + <div className={styles.divHeight}><div className={styles.divArrowLeft} /><div className={styles.divHeightLine}>{dMatLength + dBite}</div><div className={styles.divArrowRight} /></div> <div className={styles.divWidth}><div className={styles.divArrowTop} /><div className={styles.divWidthLine}><span style={num}>{dMatWidth}</span></div> <div className={styles.divArrowTop} /></div>
  358 + {this.getTable(dTableWidth,dTableHeight,dTrWidth,dTrHeight,dTdWidth,dTdHeight,floats,dBoold,tr,td,0)}
  359 + </div>);
  360 + }
  361 + return elements;
  362 + }
  363 +
  364 +
  365 + /* 计算排版数 */
  366 + handleGetImgPQty = (tableDataRow) => {
  367 + let divStr =[];
  368 + let dSingleQty = 0; /* 排版数 */
  369 + let tag = 1;//1横排还是2竖排
  370 + let dPartsWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dPartsWidth, 0)); /* 产品长 */
  371 + let dPartsLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dPartsLength, 0)); /* 产品宽 */
  372 + let dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽 */
  373 + let dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机长 */
  374 +
  375 + const dBoold = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dBlood, 0)); /* 出血位 */
  376 + const dBite = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dBite, 0)); /* 咬口 */
  377 + // console.log('dPartsWidth', dPartsWidth, dPartsLength);
  378 + var dMachineTmp = 0;
  379 + var dPartsTmp = 0;
  380 + var tagval = "";
  381 + var xxfx = 3;//虚线方向 1：横虚线 2：树虚线;3:无需虚线
  382 + var wlfx = 1;//竖纹
  383 + //机器长宽转换
  384 + if(dMachineWidth > dMachineLength){
  385 + dMachineTmp = dMachineWidth;//上级高
  386 + dMachineWidth = dMachineLength;//上级宽
  387 + dMachineLength = dMachineTmp;
  388 + wlfx = 2;
  389 + }
  390 + //长宽转换（dLength 高度、dWidth 表示宽度,高度永远大于宽度）
  391 + if(dPartsWidth > dPartsLength){
  392 + dPartsTmp = dPartsWidth;//上级高
  393 + dPartsWidth = dPartsLength;//上级宽
  394 + dPartsLength = dPartsTmp;
  395 + }
  396 + dMachineWidth = dMachineWidth-dBite;
  397 +
  398 + const sCutMethod = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sCutMethod, 0)); /* 裁切方式 */
  399 + const sSpineDirection = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sSpineDirection, 0)); /* 书脊方向 */
  400 + const sPrintingPlate = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.sPrintingPlate, 0)); /* 排版方式 */
  401 + // console.log('sPrintingPlate', sPrintingPlate);
  402 + // console.log('sCutMethod', sCutMethod);
  403 + // console.log('sSpineDirection', sSpineDirection);
  404 + let tmpBl = 1;//排版数乘的数字，如果书类为2 默认是1
  405 + let tmp = 0;
  406 + //三边裁切
  407 + if( sCutMethod === 1){
  408 + //长书(1,3,4)
  409 + if(sSpineDirection=== 1){
  410 + dPartsLength = dPartsLength;
  411 + dPartsWidth = dPartsWidth*2;
  412 + }else{
  413 + dPartsWidth = dPartsWidth
  414 + dPartsLength = dPartsLength*2;
  415 + }
  416 + tmpBl = 2;
  417 + dPartsWidth = dPartsWidth + 2*dBoold;
  418 + dPartsLength = dPartsLength + 2*dBoold;
  419 + if(sPrintingPlate === 1){ /* 横竖取大 */
  420 + tmp = this.getHSQD(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  421 + dSingleQty = tmp*2;
  422 + tag = this.getTag(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  423 + if(tag===2){
  424 + // alert("横竖取大==版数："+tmp*2);
  425 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,1 , wlfx);
  426 + } else {
  427 + // alert("横竖取大==版数："+tmp*2);
  428 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2, wlfx);
  429 + }
  430 +
  431 + // console.log('横竖取大排版数：', dSingleQty);
  432 + }else if(sPrintingPlate ===3){ /* 横排 */
  433 + if(wlfx===1 && sSpineDirection===1){
  434 + //长书脊
  435 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  436 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2, wlfx);
  437 + dSingleQty = tmp*2;
  438 + }else if(wlfx===2 && sSpineDirection===1){
  439 + //长书脊
  440 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  441 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,1, wlfx);
  442 + dSingleQty = tmp*2;
  443 + }else if(wlfx===1 && sSpineDirection===2){
  444 + //长书脊
  445 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  446 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,1, wlfx);
  447 + dSingleQty = tmp*2;
  448 + }else if(wlfx==2 && sSpineDirection==2){
  449 + //长书脊
  450 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  451 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2, wlfx);
  452 + dSingleQty = tmp*2;
  453 + }
  454 + }else if(sPrintingPlate===4) { /* 竖排 */
  455 + //竖排
  456 + if(wlfx===1 && sSpineDirection===1){
  457 + //长书脊
  458 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  459 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,1, wlfx);
  460 + dSingleQty = tmp*2;
  461 + }else if(wlfx===2 && sSpineDirection===1){
  462 + //长书脊
  463 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  464 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2, wlfx);
  465 + dSingleQty = tmp*2;
  466 + }else if(wlfx===1 && sSpineDirection===2){
  467 + //长书脊
  468 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  469 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2, wlfx);
  470 + dSingleQty = tmp*2;
  471 + }else if(wlfx===2 && sSpineDirection===2){
  472 + //长书脊
  473 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  474 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,1, wlfx);
  475 + dSingleQty = tmp*2;
  476 + }
  477 + }else if(sPrintingPlate===2){ /* 混排 */
  478 + //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
  479 + }
  480 + }else{ /* 四边裁 */
  481 + dPartsWidth = dPartsWidth+2*dBoold;
  482 + dPartsLength = dPartsLength+2*dBoold;
  483 + if(sPrintingPlate===1){
  484 + tmp = this.getHSQD(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  485 + tag = this.getTag(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  486 + //1：横虚线 2：树虚线;3:无需虚线
  487 + if(tag===2){
  488 + //alert("横竖取大==版数："+tmp);
  489 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,3, wlfx);
  490 + }else{
  491 + //alert("横竖取大==版数："+tmp);
  492 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,3, wlfx);
  493 + }
  494 + dSingleQty = tmp;
  495 + }else if(sPrintingPlate===3){
  496 + if(wlfx===1){
  497 + //长书级
  498 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  499 + dSingleQty = tmp;
  500 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,3, wlfx);
  501 + }else{
  502 + //长书级
  503 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  504 + dSingleQty = tmp;
  505 + // $("#dPlateQty").val(tmp);
  506 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,3, wlfx);
  507 + }
  508 + // var tmp = getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  509 + // alert("横排版数："+tmp);
  510 + // addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,2);
  511 + }else if(sPrintingPlate===4) {
  512 + //竖排
  513 + if(wlfx===1){
  514 + //长书级
  515 + tmp = this.getSp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  516 + dSingleQty = tmp;
  517 + // $("#dPlateQty").val(tmp);
  518 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,4,3, wlfx);
  519 + }else{
  520 + //长书级
  521 + tmp = this.getHp(dMachineLength,dMachineWidth ,dPartsLength ,dPartsWidth);
  522 + dSingleQty = tmp;
  523 + // $("#dPlateQty").val(tmp);
  524 + divStr = this.addHtml(dMachineLength,dMachineWidth ,dPartsLength,dPartsWidth,dBoold ,dBite,3,3, wlfx);
  525 + }
  526 + }else if(sPrintingPlate===2){
  527 + //混排 横排 多余部分 看看是否能够竖着排 如果竖排 看看能否再横着排（折页没有混排）
  528 + if( sCutMethod===1){
  529 + console.log("书没有混排");
  530 + return;
  531 + }
  532 + //竖排+横排
  533 + let htTmpTag = 0;
  534 + let tmp3 = 0;
  535 + tmp = this.getHHP(dMachineWidth,dMachineLength ,dPartsLength ,dPartsWidth);
  536 + tmp3 = this.getHHP(dMachineWidth,dMachineLength ,dPartsWidth,dPartsLength);
  537 + if(tmp<tmp3){
  538 + tmp = tmp3;
  539 + htTmpTag = 1;
  540 + }
  541 + // alert("混拼排版数："+tmp);
  542 + // $("#dPlateQty").val(tmp);
  543 + dSingleQty = tmp;
  544 +
  545 + //哪个大取哪个
  546 + if(htTmpTag==0){
  547 + divStr = this.getHHPHtml(dMachineWidth,dMachineLength,dPartsLength,dPartsWidth,dBoold ,dBite,wlfx);
  548 + }else{
  549 + divStr =this.getHHPHtml(dMachineWidth,dMachineLength ,dPartsWidth,dPartsLength,dBoold ,dBite,wlfx);
  550 + }
  551 +
  552 + }
  553 + }
  554 +
  555 + const lrl= ((tmp*dPartsLength*dPartsWidth)/(dMachineWidth*(dMachineLength+dBite)))*100 ;
  556 +
  557 + /* 增加利润率显示 */
  558 + const dProfit = commonUtils.convertFixNum(lrl,2) ;
  559 + const dProfitStr = commonUtils.isNotEmptyNumber(dProfit) ? dProfit +'%' : 0;
  560 + divStr.push(<div className={styles.fontArea}>
  561 + <div style={{fontSize:'12px',color:'#000'}}> 开版利用率：<span style={{color:'#ff0000'}}>{dProfitStr}</span> </div>
  562 + <div style={{fontSize:'12px',color:'#000'}}> 排版数：<span style={{color:'#ff0000'}}>{dSingleQty}</span> </div>
  563 + </div>);
  564 + return divStr;
  565 + }
  566 +
  567 +
  568 + render() {
  569 + let element ='';
  570 + const { controlData, controlSelectedRowKeys, slaveSelectedRowKeys, slaveData} = this.props;
  571 + if(commonUtils.isNotEmptyArr(controlData) && commonUtils.isNotEmptyArr(controlSelectedRowKeys)){
  572 + const iIndex = controlData.findIndex(item => controlSelectedRowKeys.includes(item.sId));
  573 + if (iIndex > -1) {
  574 + const tableDataRow = controlData[iIndex];
  575 + if(tableDataRow) {
  576 + /* 通过控制表找关联从表的长、宽 */
  577 + let slaveDataRow = {};
  578 + if(commonUtils.isNotEmptyArr(slaveData)) {
  579 + if (commonUtils.isEmptyArr(slaveSelectedRowKeys)) {
  580 + slaveDataRow = slaveData[0];
  581 + } else if (commonUtils.isEmptyObject(tableDataRow.sCombinedMemo) || tableDataRow.sCombinedMemo === '合版信息') {
  582 + const iIndex = slaveData.findIndex(item => slaveSelectedRowKeys.includes(item.sId));
  583 + if (iIndex > -1) {
  584 + slaveDataRow = slaveData[iIndex];
  585 + }
  586 + } else {
  587 + const iIndex = slaveData.findIndex(item => tableDataRow.sCombinedMemo.includes(item.sProductNo));
  588 + if (iIndex > -1) {
  589 + slaveDataRow = slaveData[iIndex];
  590 + }
  591 + }
  592 + }
  593 +
  594 + if(commonUtils.isNotEmptyObject(slaveDataRow)) {
  595 + /* 如果有展开尺寸 则取展开尺寸 否则取产品规格 */
  596 + let sProductStyle = '';
  597 + if(slaveDataRow.sPartsStyle) {
  598 + sProductStyle = slaveDataRow.sPartsStyle;
  599 + }else if(slaveDataRow.sProductStyle) {
  600 + sProductStyle = slaveDataRow.sProductStyle;
  601 + }
  602 + if (sProductStyle) {
  603 + let dProductLength = !commonUtils.isEmpty(sProductStyle) && sProductStyle.split('*').length > 1 ? sProductStyle.split('*')[0] : 0;
  604 + dProductLength = commonUtils.convertStrToNumber(commonUtils.isNull(dProductLength, 0)); /* 产品长 */
  605 + dProductLength = (typeof dProductLength === 'number' && !isNaN(dProductLength)) ? dProductLength : 0; /* 产品长 */
  606 + let dProductWidth = !commonUtils.isEmpty(sProductStyle) && sProductStyle.split('*').length > 1 ? sProductStyle.split('*')[1] : 0;
  607 + dProductWidth = commonUtils.convertStrToNumber(commonUtils.isNull(dProductWidth, 0)); /* 产品宽 */
  608 + dProductWidth = (typeof dProductLength === 'number' && !isNaN(dProductLength)) ? dProductWidth : 0; /* 产品宽 */
  609 + tableDataRow.dPartsWidth = dProductLength;
  610 + tableDataRow.dPartsLength = dProductWidth;
  611 + /* 控制表增加 如果 产品长>产品宽 sSpineDirection 默认1 否则 2 */
  612 + if (dProductLength > dProductWidth) {
  613 + tableDataRow.sSpineDirection = "2"; /* 短书脊 */
  614 + } else {
  615 + tableDataRow.sSpineDirection = "1"; /* 长书脊 */
  616 + }
  617 + tableDataRow.sCutMethod = "2"; /* 默认四边裁 */
  618 + tableDataRow.sPrintingPlate = "1"; /* 默认四边裁 */
  619 + }
  620 + }
  621 + const dLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dPartsWidth, 0)); /* 产品长 */
  622 + const dWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dPartsLength, 0)); /* 产品宽 */
  623 + const dMachineLength = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineLength, 0)); /* 上机长 */
  624 + const dMachineWidth = commonUtils.convertStrToNumber(commonUtils.isNull(tableDataRow.dMachineWidth, 0)); /* 上机宽q */
  625 + if(dLength ===0 || dWidth===0 || dMachineLength===0 || dMachineWidth===0 ){
  626 + element='';
  627 + } else{
  628 + element = this.handleGetImgPQty(tableDataRow);
  629 + }
  630 + }
  631 + }
  632 + }
  633 + return (
  634 + <div id="table" className={styles.bigDiv}>
  635 + {element}
  636 + </div>
  637 + );
  638 + }
  639 +}
... ...
src/components/Common/ShowImgPQty/index.less 0 → 100644
  View file @d624af2
  1 +@arrow_bg: #002bb0; // 高亮色
  2 +/* 最大外围 */
  3 +.bigDiv{
  4 + padding-top: 14px;
  5 + display: flex;
  6 + flex-direction: column;
  7 +}
  8 +
  9 +/* 表格区域 */
  10 +.area{
  11 + position: relative;
  12 + /* 1-竖纹 */
  13 + background-image: linear-gradient(90deg,#bae7ff 50%,white 0);
  14 + background-size: 10px 100%;
  15 + border: 1px solid #000;
  16 + //-ms-transform:rotate(270deg); /* IE 9 */
  17 + //-webkit-transform:rotate(270deg); /* Safari and Chrome */
  18 + //transform:rotate(270deg);
  19 + //left:20px;
  20 + //top:-20px;
  21 +}
  22 +.area2{
  23 + position: relative;
  24 + /* 2-横纹 */
  25 + background-image: linear-gradient(0deg,#bae7ff 50%,white 50%);
  26 + background-size: 100% 20px;
  27 + border: 1px solid #000;
  28 + //-ms-transform:rotate(270deg); /* IE 9 */
  29 + //-webkit-transform:rotate(270deg); /* Safari and Chrome */
  30 + //transform:rotate(270deg);
  31 + //left:20px;
  32 + //top:-20px;
  33 +}
  34 +.sTable{
  35 + //background-image: linear-gradient(0deg,#bae7ff 50%,white 50%);
  36 + //background-size: 100% 20px;
  37 +}
  38 +.fontDiv{
  39 + color: #ff3c3c;
  40 + position: absolute;
  41 + top:50%;
  42 + left:40%;
  43 +}
  44 +.fontDiv2{
  45 + color: #ff3c3c;
  46 + position: absolute;
  47 + top:63%;
  48 + left:40%;
  49 +}
  50 +/* 文字区域 */
  51 +.fontArea{
  52 + width: 80%;
  53 + display: flex;
  54 + flex-direction: column;
  55 + justify-content: center;
  56 + margin-left: 3px;
  57 +}
  58 +
  59 +
  60 +
  61 +.divWidth{
  62 + height: 100%;
  63 + position: absolute;
  64 + left: -30px;
  65 +}
  66 +.divWidthLine{
  67 + width: 2px;
  68 + height: 97%;
  69 + background: @arrow_bg;
  70 + text-align: center;
  71 +}
  72 +.divHeight{
  73 + width: 100%;
  74 + position: absolute;
  75 + top: -16px;
  76 +}
  77 +.divArrowLeft{ /* 左侧箭头 */
  78 + width: 2px;
  79 + height: 9px;
  80 + background: @arrow_bg;
  81 + float: left;
  82 +}
  83 +.divArrowRight{ /* 左侧箭头 */
  84 + width: 2px;
  85 + height: 8px;
  86 + background: @arrow_bg;
  87 + float: right;
  88 +}
  89 +.divArrowTop{
  90 + width: 8px;
  91 + height: 2px;
  92 + background: @arrow_bg;
  93 +}
  94 +.divArrowBottom{
  95 + width: 8px;
  96 + height: 2px;
  97 + background: @arrow_bg;
  98 +}
  99 +.divHeightLine{
  100 + height: 2px;
  101 + background: @arrow_bg;
  102 + text-align: center;
  103 + font-size: 12px;
  104 +}
  105 +
  106 +.tdStyle{
  107 + font-size: 10px;
  108 + position:absolute;
  109 + color:red;
  110 + left: 0%;
  111 + top:36%;
  112 + //height: 100%;
  113 +}
  114 +.tdStyle1{
  115 + width: 100%;
  116 + font-size: 10px;
  117 + position: absolute;
  118 + color:red;
  119 + left: 50%;
  120 + top:20%;
  121 +}
  122 +.tdWidth{
  123 + width: 50%;
  124 +}
  125 +
  126 +/* 四边裁 标尺 */
  127 +.tdStyleM{ /* 横向 */
  128 + width: 100%;
  129 + font-size: 10px;
  130 + position: absolute;
  131 + top: -5px;
  132 + left: 43%;
  133 +}
  134 +.tdStyleM1 { /* 纵向 */
  135 + width: 100%;
  136 + font-size: 10px;
  137 + position: absolute;
  138 + left: 0%;
  139 + top:32%;
  140 +}
  141 +
  142 +
  143 +
... ...
src/components/Common/Typesetting/index.css 0 → 100644
  View file @d624af2
  1 +.coos {
  2 + justify-content: space-between;
  3 +}
  4 +.maxWidthLeft {
  5 + position: absolute;
  6 + left: 0;
  7 + top: 0;
  8 + height: 30px;
  9 +}
  10 +.maxWidthLeft .maxWidthLeftLine {
  11 + position: absolute;
  12 + left: 9px;
  13 + top: 22.5px;
  14 + height: 2px;
  15 + background-color: #333;
  16 +}
  17 +.maxWidthRight {
  18 + position: absolute;
  19 + right: 0;
  20 + height: 30px;
  21 + top: 0;
  22 +}
  23 +.maxWidthRight .maxWidthRightLine {
  24 + position: absolute;
  25 + right: 9px;
  26 + top: 22.5px;
  27 + height: 2px;
  28 + background-color: #333;
  29 +}
  30 +.maxHeightTop {
  31 + position: absolute;
  32 + top: 0;
  33 + left: 0;
  34 +}
  35 +.maxHeightTop .maxHeightTopLine {
  36 + position: absolute;
  37 + right: 9px;
  38 + top: 22.5px;
  39 + height: 2px;
  40 + background-color: #333;
  41 +}
  42 +.maxHeightBottom {
  43 + position: absolute;
  44 + bottom: 0;
  45 + left: 0;
  46 +}
  47 +.maxHeightBottom .maxHeightBottomLine {
  48 + position: absolute;
  49 + right: 15px;
  50 + top: 17px;
  51 + height: 2px;
  52 + background-color: #333;
  53 +}
... ...
src/components/Common/Typesetting/index.less 0 → 100644
  View file @d624af2
  1 +.coos {
  2 + justify-content: space-between;
  3 +}
  4 +
  5 +.maxWidthLeft {
  6 + position: absolute;
  7 + left: 0;
  8 + top: 0;
  9 + height: 30px;
  10 + .maxWidthLeftLine {
  11 + position: absolute;
  12 + left: 9px;
  13 + top: 22.5px;
  14 + height: 2px;
  15 + background-color: #333;
  16 + }
  17 +}
  18 +.maxWidthRight {
  19 + position: absolute;
  20 + right: 0;
  21 + height: 30px;
  22 + top: 0;
  23 + .maxWidthRightLine {
  24 + position: absolute;
  25 + right: 9px;
  26 + top: 22.5px;
  27 + height: 2px;
  28 + background-color: #333;
  29 + }
  30 +}
  31 +.maxHeightTop {
  32 + position: absolute;
  33 + top: 0;
  34 + left: 0;
  35 + .maxHeightTopLine {
  36 + position: absolute;
  37 + right: 9px;
  38 + top: 22.5px;
  39 + height: 2px;
  40 + background-color: #333;
  41 + }
  42 +}
  43 +.maxHeightBottom {
  44 + position: absolute;
  45 + bottom: 0;
  46 + left: 0;
  47 + .maxHeightBottomLine {
  48 + position: absolute;
  49 + right: 15px;
  50 + top: 17px;
  51 + height: 2px;
  52 + background-color: #333;
  53 + }
  54 +}
... ...
src/components/Common/Typesetting/typesetting.js 0 → 100644
  View file @d624af2
  1 +/* eslint-disable */
  2 +import React, { useEffect, useState, useRef } from "react";
  3 +import { Modal } from "antd";
  4 +import { VerticalRightOutlined, VerticalLeftOutlined, LeftOutlined, RightOutlined, UpOutlined, DownOutlined } from "@ant-design/icons";
  5 +import * as commonUtils from "@/utils/utils"; /* 通用方法 */
  6 +import styles from "./index.less";
  7 +// import DynamicSVG from "../../Common/BoxDesign/index";
  8 +import DynamicSVG from "../../Common/BoxDesignCompontent/svg";
  9 +
  10 +const Typesetting = props => {
  11 + const {
  12 + radioValue, //
  13 + app,
  14 + boxPicData,
  15 + onSaveStates,
  16 + boxModel,
  17 + slaveRowData,
  18 + state,
  19 + onSaveDPartsLength,
  20 + } = props;
  21 + const {
  22 + dSBLB, // 上边留白
  23 + dXBLB, // 下边留白
  24 + dZBLB, // 左边留白
  25 + dYBLB, // 右边留白
  26 + // dXBJJ, // 上边距
  27 + dXBJJ, // 下边距
  28 + // dYBJJ, // 左边距
  29 + dYBJJ, // 右边距
  30 + sLengthFormula, // 盒长公式
  31 + sWidthFormula, // 盒宽公式
  32 + sPackDetailPath,
  33 + sColumnNameConfig,
  34 + } = slaveRowData;
  35 +
  36 + const { masterData, selectedNode, slaveData } = state;
  37 + // 生成盒子图片
  38 + const [boxKey, setBoxKey] = useState(new Date().getTime());
  39 + const [boxKeys, setBoxKeys] = useState(new Date().getTime());
  40 + const [isModalOpen, setIsModalOpen] = useState(false);
  41 + const [modalWidth, setModalWidth] = useState(700);
  42 + const [modalHeight, setModalHeight] = useState(500);
  43 + const [modalBoxWidth, setModalBoxWidth] = useState(1200);
  44 + const [scale, setScale] = useState(1);
  45 + const [materialLength, setMaterialLength] = useState(0);
  46 + const [materialWidth, setMaterialWidth] = useState(0);
  47 + const [dProductQty, setDProductQty] = useState(0);
  48 + const [materialName, setMaterialName] = useState("");
  49 + const [dMaterialsKQty, setDMaterialsKQty] = useState(0);
  50 + const [dPartsLength, setDPartsLength] = useState(0);
  51 +
  52 + // 使用 useRef 获取 DOM 元素
  53 + const boxRef = useRef(null);
  54 + const boxsRef = useRef(null);
  55 + const typesettingBox = useRef(null);
  56 + const typesettingBoxs = useRef(null);
  57 + // 获取外层盒子尺寸
  58 + const clientWidth = 400;
  59 + const clientHeight = 300;
  60 + // 动态计算边距的总和
  61 + const totalLeftMargin = dZBLB + dYBLB;
  62 + const totalTopMargin = dSBLB + dXBLB;
  63 + // sMachineStyle
  64 + const slaveDataDetail = slaveData?.find(item => item.sTreeNodeName === selectedNode.showName && item.sBoxModel === boxModel);
  65 + const maxWidth = Number(slaveDataDetail?.dMaxLength);
  66 + const maxHeight = Number(slaveDataDetail?.dMaxWidth);
  67 + const outerWidth = Number(slaveDataDetail?.dMaxLength); // 默认取最大上机尺寸
  68 + const outerHeight = Number(slaveDataDetail?.dMaxWidth); // 默认取最大上机尺寸
  69 +
  70 + // 确认是竖向排列还是横向排列
  71 + const L = masterData?.dLength;
  72 + const W = masterData?.dWidth;
  73 + const H = masterData?.dWidth;
  74 + const D = masterData?.dHeight;
  75 +
  76 + // 动态计算公式值
  77 + const evaluateFormula = (formula, variables) => {
  78 + if (!formula) return 0; // 如果公式为空，返回0
  79 + try {
  80 + // 提取公式中的变量名
  81 + const variableNames = formula.match(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g) || [];
  82 + // 构建函数参数
  83 + const params = variableNames.join(",");
  84 + // 替换公式中的变量为实际值
  85 + const func = new Function(params, `return ${formula}`);
  86 + // 提取变量值
  87 + const args = variableNames.map(name => Number(variables[name]) || 0);
  88 + // 执行函数并返回结果
  89 + return func(...args);
  90 + } catch (error) {
  91 + return 0;
  92 + }
  93 + };
  94 + // 计算公式值
  95 + const variables = {
  96 + L,
  97 + W,
  98 + H,
  99 + D,
  100 +
  101 + ...props.slaveRowData,
  102 + };
  103 + let boxList = [];
  104 + if (sColumnNameConfig) {
  105 + const slaveNewData = JSON.parse(sColumnNameConfig);
  106 + const tables = [
  107 + { name: "盒型类别", value: slaveRowData.sBoxType, type: null },
  108 + { name: "盒身", value: slaveRowData.sBoxBody, type: slaveRowData.sTypes },
  109 + { name: "盒长", value: L, type: null },
  110 + { name: "盒宽", value: W, type: null },
  111 + { name: "盒高", value: D, type: null },
  112 + ];
  113 + const titleList1 = [
  114 + { name: "上方盒舌", value: "dSFHS" },
  115 + { name: "盒底组件", value: "dHDC" },
  116 + { name: "下方盒舌", value: "dXFHS" },
  117 + { name: "左(上)插位组件", value: "dZSCW" },
  118 + { name: "左贴边位", value: "dZTBW" },
  119 + { name: "左(下)插位组件", value: "dZXCW" },
  120 + { name: "右(上)插位组件", value: "dYSCW" },
  121 + { name: "右贴边位", value: "dYTBW" },
  122 + { name: "右(下)插位组件", value: "dYXCW" },
  123 + ];
  124 + slaveNewData.forEach(x => {
  125 + let key = 0;
  126 + if (x.sAssignFormula) {
  127 + key = evaluateFormula(x.sAssignFormula, variables);
  128 + } else {
  129 + key = slaveRowData[x.sName];
  130 + }
  131 + boxList.push({
  132 + value: key,
  133 + sName: titleList1.find(item => item.value === x.sName)?.name || "",
  134 + isEditable: true,
  135 + isSelect: false,
  136 + selectValue: null,
  137 + selectLabel: "",
  138 + selectImage: null,
  139 + type: x.sTypes || null,
  140 + show: true,
  141 + sCode: titleList1.find(item => item.value === x.sName)?.value || "",
  142 + showName: x.showName, // 参数名称
  143 + });
  144 + });
  145 + tables.forEach(x => {
  146 + boxList.push({
  147 + value: x.value,
  148 + sName: x.name,
  149 + isEditable: true,
  150 + isSelect: false,
  151 + selectValue: null,
  152 + selectLabel: "",
  153 + selectImage: null,
  154 + type: x.type || null,
  155 + show: true,
  156 + showName: x.name, // 参数名称
  157 + });
  158 + });
  159 + }
  160 +
  161 + const result = boxList.reduce((acc, { sCode, value }) => ({ ...acc, [sCode]: value }), {});
  162 +
  163 + // 计算表达式结果
  164 + const variabless = {
  165 + L,
  166 + W,
  167 + H,
  168 + D,
  169 +
  170 + ...props.slaveRowData,
  171 + ...result,
  172 + };
  173 +
  174 + let DisableMateriallIcon = L ? sPackDetailPath : null;
  175 + // 盒子展长展开公式计算
  176 + const innerWidth = evaluateFormula(sLengthFormula, variabless);
  177 + const innerHeight = evaluateFormula(sWidthFormula, variabless);
  178 + const { sSettingMethod, sSGroupOffset, iFAngle, iSAngle, sSecondorizontalOffset, sSecondLongitudinalOffset } = radioValue ? radioValue : {};
  179 + const dFWidthOffset = evaluateFormula(radioValue?.sFWidthOffset, variabless); // 首盒纵向偏移
  180 + const dFLengthOffset = evaluateFormula(radioValue?.sFLengthOffset, variabless); // 首盒横向偏移
  181 + const dSWidthOffset = evaluateFormula(radioValue?.sSWidthOffset, variabless); // 次盒纵向偏移
  182 + const dSLengthOffset = evaluateFormula(radioValue?.sSLengthOffset, variabless); // 次盒横向偏移
  183 + const boxLengthOffset = evaluateFormula(sSecondorizontalOffset, variabless); // 第二列横向偏移
  184 + const boxWidthOffset = evaluateFormula(sSecondLongitudinalOffset, variabless); // 第二列纵向偏移
  185 + const isVertical = sSettingMethod === "从上到下"; // true 表示竖向排列，false 表示横向排列 sSettingMethod === '从上到下'
  186 + const reference = sSGroupOffset === "首盒"; // 第三列参考
  187 + const style = {
  188 + width: `${outerWidth}px`,
  189 + height: `${outerHeight}px`,
  190 + backgroundColor: "#f3f3f3",
  191 + position: "relative", // 设置外层 div 为相对定位
  192 + };
  193 + // 计算内层盒子尺寸 加上间距
  194 + let jInnerHeight = innerHeight + dXBJJ + dXBJJ;
  195 + let jInnerWidth = innerWidth + dYBJJ + dYBJJ;
  196 + let dSvgBoxWidth = innerWidth;
  197 + let dSvgBoxHeight = innerHeight;
  198 + if (iFAngle === 90 || iFAngle === 270 || iSAngle === 90 || iSAngle === 270) {
  199 + jInnerHeight = innerWidth + dYBJJ + dYBJJ;
  200 + jInnerWidth = innerHeight + dXBJJ + dXBJJ;
  201 + // dSvgBoxHeight = jInnerHeight;
  202 + // dSvgBoxWidth = jInnerWidth;
  203 + }
  204 + const innerHeightCombined = isVertical
  205 + ? jInnerHeight * 2 + dSWidthOffset + dFWidthOffset
  206 + : Math.max(jInnerHeight + dFWidthOffset, jInnerHeight + dSWidthOffset);
  207 + // 计算内层盒子宽度 从上向下排列 取首盒加偏移量和次盒加偏移量最大的值 从左往右排列 盒子尺寸 * 2 加上首盒偏移量和次盒偏移量
  208 + const innerWidthCombined = isVertical
  209 + ? Math.max(jInnerWidth + dFLengthOffset, jInnerWidth + dSLengthOffset)
  210 + : jInnerWidth * 2 + dSLengthOffset + dFLengthOffset;
  211 + // 加上间距后的最大盒子长宽 计算每列可以放多少个组合 需要计算间距
  212 + // 每个盒子加上边距 和第二组偏移量 如果根据次盒再加上次盒偏移量
  213 + let cols = Math.floor(outerWidth / (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)));
  214 + let rows = Math.floor(outerHeight / (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset)));
  215 + // 判断最后得到的长宽是否大于排版尺寸
  216 + // let colsMaxLength =
  217 + // cols * (innerWidthCombined + dYBJJ + dYBJJ + boxLengthOffset + (reference ? 0 : dSLengthOffset)) -
  218 + // dYBJJ -
  219 + // dYBJJ -
  220 + // boxLengthOffset -
  221 + // (reference ? 0 : dSLengthOffset);
  222 + let colsMaxLength = (cols - 1) * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) + innerWidthCombined;
  223 + while (colsMaxLength >= outerWidth && cols > 0) {
  224 + cols = cols - 1;
  225 + colsMaxLength = (cols - 1) * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) + innerWidthCombined;
  226 + }
  227 +
  228 + // let rowsMaxLength =
  229 + // rows * (innerHeightCombined + dXBJJ + dXBJJ + boxWidthOffset + (reference ? 0 : dSWidthOffset)) -
  230 + // dXBJJ -
  231 + // dXBJJ -
  232 + // boxWidthOffset -
  233 + // (reference ? 0 : dSWidthOffset);
  234 + let rowsMaxLength = (rows - 1) * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset)) + innerHeightCombined;
  235 + while (rowsMaxLength >= outerHeight && rows > 0) {
  236 + rows = rows - 1;
  237 + rowsMaxLength = (rows - 1) * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset)) + innerHeightCombined;
  238 + }
  239 +
  240 + // 最大上机长 上机宽 开料尺寸
  241 + // 计算剩余空间 每组都算上偏移量 那么剩余需要加上后面偏移的总量
  242 + const remainingWidth =
  243 + outerWidth -
  244 + (cols * (innerWidthCombined + boxLengthOffset + (reference ? 0 : dSLengthOffset)) - boxLengthOffset - (reference ? 0 : dSLengthOffset));
  245 + const remainingHeight =
  246 + outerHeight -
  247 + (rows * (innerHeightCombined + boxWidthOffset + (reference ? 0 : dSWidthOffset)) - boxWidthOffset - (reference ? 0 : dSWidthOffset));
  248 + //剩余量能不能放一下单独一个
  249 + const commonHeightCheck = remainingHeight > jInnerHeight;
  250 + const commonWidthCheck = remainingWidth > jInnerWidth;
  251 + const remaining = isVertical ? commonHeightCheck : commonWidthCheck;
  252 + // 抵扣盒默认展示 svg
  253 + // const isSvg = props.slaveRowData.sName === "扣抵盒";
  254 + // 组装svg数据
  255 +
  256 + const svgProps = {
  257 + ...props,
  258 + boxList,
  259 + dSvgBoxWidth,
  260 + dSvgBoxHeight,
  261 + showNew: 2,
  262 + };
  263 + const { dZTBW } = variabless;
  264 + const createDiv = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
  265 + <div
  266 + key={`${col}-${row}-${index}`}
  267 + style={{
  268 + width: `${jInnerWidth}px`,
  269 + height: `${jInnerHeight}px`,
  270 + // backgroundColor: "#fff",
  271 + display: "flex",
  272 + justifyContent: "center",
  273 + alignItems: "center",
  274 + position: "absolute",
  275 + left: `${leftPosition}px`,
  276 + top: `${topPosition}px`,
  277 + transform: `rotateZ(${offsetZ}deg)`,
  278 + zIndex: 10,
  279 + }}
  280 + onDoubleClick={() => {
  281 + onClick();
  282 + }}
  283 + >
  284 + {/* <img src={icon} width="100%" height="100%" /> */}
  285 + <DynamicSVG {...svgProps} />
  286 + {/* {isSvg ? <DynamicSVG {...props} /> : <img src={icon} width="100%" height="100%" />} */}
  287 + </div>
  288 + );
  289 + const createBox = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
  290 + <div
  291 + key={`${col}-${row}-${index}`}
  292 + style={{
  293 + width: `${innerWidthCombined}px`,
  294 + height: `${innerHeightCombined}px`,
  295 + display: "flex",
  296 + justifyContent: "center",
  297 + alignItems: "center",
  298 + position: "absolute",
  299 + overflow: "hidden",
  300 + left: `${calculateLeftPosition(col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset)}px`,
  301 + top: `${calculateTopPosition(row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ)}px`,
  302 + zIndex: 10,
  303 + }}
  304 + onDoubleClick={() => {
  305 + onClick();
  306 + }}
  307 + >
  308 + <div
  309 + key={`${col}-${row}-${index}`}
  310 + style={{
  311 + width: `${(iSAngle === 90 || iSAngle === 270) ? jInnerWidth:innerWidth}px`,
  312 + height: `${(iFAngle === 90 || iFAngle === 270) ? jInnerHeight:innerHeight}px`,
  313 + display: "flex",
  314 + justifyContent: "center",
  315 + alignItems: "center",
  316 + position: "absolute",
  317 + left: `${dFLengthOffset + dYBJJ}px`,
  318 + top: `${iFAngle === 90 || iFAngle === 270 ? 0 : dFWidthOffset + dXBJJ}px`,
  319 + transform: `rotateZ(${iFAngle}deg)`,
  320 + }}
  321 + >
  322 + <DynamicSVG {...svgProps} />
  323 + </div>
  324 + <div
  325 + key={`${col}-${row}-${index}-1`}
  326 + style={{
  327 + width: `${(iSAngle === 90 || iSAngle === 270) ? jInnerWidth:innerWidth}px`,
  328 + height: `${(iSAngle === 90 || iSAngle === 270) ? jInnerHeight:innerHeight}px`,
  329 + display: "flex",
  330 + justifyContent: "center",
  331 + alignItems: "center",
  332 + position: "absolute",
  333 + left: `${isVertical ? dSLengthOffset + dYBJJ : jInnerWidth + dFLengthOffset + dSLengthOffset + dYBJJ}px`,
  334 + top: `${
  335 + isVertical ? jInnerHeight + dXBJJ + dFWidthOffset + dSWidthOffset : iSAngle === 90 || iSAngle === 270 ? 0 : dSWidthOffset + dXBJJ
  336 + }px`,
  337 + transform: `rotateZ(${iSAngle}deg)`,
  338 + }}
  339 + >
  340 + <DynamicSVG {...svgProps} />
  341 + </div>
  342 + </div>
  343 + );
  344 + const createBoxOne = (col, row, index, leftPosition, topPosition, offsetZ, icon) => (
  345 + <div
  346 + key={`${col}-${row}-${index}`}
  347 + style={{
  348 + width: `${jInnerWidth}px`,
  349 + height: `${jInnerHeight}px`,
  350 + display: "flex",
  351 + justifyContent: "center",
  352 + alignItems: "center",
  353 + position: "absolute",
  354 + overflow: "hidden",
  355 + left: `${calculateLeftPosition(col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset)}px`,
  356 + top: `${calculateTopPosition(row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ)}px`,
  357 + zIndex: 10,
  358 + }}
  359 + onDoubleClick={() => {
  360 + onClick();
  361 + }}
  362 + >
  363 + <div
  364 + key={`${col}-${row}-${index}`}
  365 + style={{
  366 + width: `${innerWidth}px`,
  367 + height: `${innerHeight}px`,
  368 + display: "flex",
  369 + justifyContent: "center",
  370 + alignItems: "center",
  371 + position: "absolute",
  372 + left: `${dFLengthOffset + dYBJJ}px`,
  373 + top: `${dFWidthOffset + dXBJJ}px`,
  374 + transform: `rotateZ(${iFAngle}deg)`,
  375 + }}
  376 + >
  377 + {/* <img src={icon} width="100%" height="100%" /> */}
  378 + {/* {isSvg ? <DynamicSVG {...props} /> : <img src={icon} width="100%" height="100%" />} */}
  379 + <DynamicSVG {...svgProps} />
  380 + </div>
  381 + </div>
  382 + );
  383 + // 计算左偏移
  384 + const calculateLeftPosition = (col, reference, isVertical, leftPosition, dYBJJ, dSLengthOffset) => {
  385 + if (isVertical) {
  386 + if (reference) {
  387 + return col === 0 ? leftPosition : leftPosition;
  388 + }
  389 + return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col;
  390 + } else {
  391 + if (reference) {
  392 + return col === 0 ? leftPosition : leftPosition;
  393 + }
  394 + return col === 0 ? leftPosition : leftPosition + boxLengthOffset * col + dSLengthOffset * col;
  395 + }
  396 + };
  397 + // 计算上偏移
  398 + const calculateTopPosition = (row, reference, isVertical, topPosition, dSWidthOffset, dXBJJ) => {
  399 + if (isVertical) {
  400 + if (reference) {
  401 +
  402 + return row === 0 ? topPosition : topPosition + boxWidthOffset * row;
  403 + } else {
  404 + return row === 0 ? topPosition : topPosition + (dSWidthOffset + boxWidthOffset) * row;
  405 + }
  406 + } else {
  407 + if (reference) {
  408 + return row === 0 ? 0 : topPosition + boxWidthOffset * row;
  409 + } else {
  410 + return row === 0 ? 0 : topPosition + (dSWidthOffset + boxWidthOffset) * row;
  411 + }
  412 + }
  413 + };
  414 + const scaleXD = (clientWidth - 50) / (outerWidth + 110);
  415 + const scaleYD = (clientHeight - 5) / (outerHeight + 90);
  416 + useEffect(
  417 + () => {
  418 + // 计算缩放比例
  419 + setBoxKey(new Date().getTime());
  420 + setTimeout(() => {
  421 + const scaleX = (clientWidth - 50) / (outerWidth + 110);
  422 + const scaleY = (clientHeight - 5) / (outerHeight + 90);
  423 + const newScale = Math.min(scaleX, scaleY);
  424 + setScale(newScale);
  425 + if (boxRef.current) {
  426 + boxRef.current.style.transform = `scale(${scaleX}, ${scaleY})`;
  427 + boxRef.current.style.transformOrigin = "top left";
  428 + }
  429 + }, 0);
  430 + },
  431 + [radioValue, slaveRowData, masterData, selectedNode, slaveData]
  432 + );
  433 + // 生成里层 div 的数组
  434 + const innerDivs = [];
  435 + for (let col = 0; col < cols; col++) {
  436 + for (let row = 0; row < rows; row++) {
  437 + const leftPosition = col * innerWidthCombined;
  438 + const topPosition = row * innerHeightCombined;
  439 + innerDivs.push(createBox(col, row, 1, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
  440 + }
  441 + // 如果可以放下首盒
  442 + if (remaining) {
  443 + if (isVertical) {
  444 + let leftPosition = 0;
  445 + let topPosition = 0;
  446 + if (reference) {
  447 + // 是否首盒
  448 + // 首盒的上边距下边距 末尾盒子的上下边距 添加那一行的上边距
  449 + leftPosition = col * innerWidthCombined;
  450 + topPosition = rows * innerHeightCombined;
  451 + } else {
  452 + leftPosition = col * innerWidthCombined;
  453 + topPosition = rows * innerHeightCombined;
  454 + }
  455 + innerDivs.push(createBoxOne(col, rows, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
  456 + } else {
  457 + for (let index = 0; index < rows; index++) {
  458 + // 先默认为首盒参考
  459 + let topPosition = 0;
  460 + let leftPosition = 0;
  461 + if (reference) {
  462 + topPosition = index * (innerHeightCombined + boxWidthOffset);
  463 + leftPosition = cols * (innerWidthCombined + boxLengthOffset);
  464 + } else {
  465 + topPosition = index * (innerHeightCombined + boxWidthOffset + dSWidthOffset);
  466 + leftPosition = cols * (innerWidthCombined + boxLengthOffset + dSLengthOffset);
  467 + }
  468 + innerDivs.push(createDiv(col, index, 3, leftPosition + dZBLB, topPosition + dSBLB, iFAngle, DisableMateriallIcon));
  469 + }
  470 + }
  471 + }
  472 + }
  473 +
  474 + // 判断展开长展开宽是否变化
  475 + if (dPartsLength !== innerWidth && !innerDivs.length) {
  476 + setDPartsLength(innerWidth);
  477 + onSaveDPartsLength(innerWidth, innerHeight, slaveData);
  478 + }
  479 + const propsData = innerDivs[innerDivs.length - 1];
  480 + let openEdition = 0;
  481 + if (propsData && L) {
  482 + const sMaterialsName = slaveData.find(x => x.sTreeNodeName === selectedNode.showName && x.sBoxModel === props.boxModel).sMaterialsName;
  483 + const propsDataLeft = Number(propsData.props.style.left.slice(0, -2));
  484 + const propsDataWidth = Number(propsData.props.style.width.slice(0, -2));
  485 + const propsDataHeight = Number(propsData.props.style.height.slice(0, -2));
  486 + const propsDataTop = Number(propsData.props.style.top.slice(0, -2));
  487 + const newMaterialLength = propsDataLeft + propsDataWidth; // 原纸长
  488 + const newMaterialWidth = propsDataTop + propsDataHeight - dSBLB;
  489 + // 计算开数
  490 + const dSinglePQty = variables
  491 + ? remaining
  492 + ? cols + cols * (rows * 2)
  493 + : cols * (rows * 2)
  494 + : remaining
  495 + ? rows + rows * (cols * 2)
  496 + : rows * (cols * 2);
  497 + const newDProductQty = masterData.dProductQty;
  498 + const dMaterialsKQty = slaveDataDetail.dMaterialsKQty || 1;
  499 + if (
  500 + dPartsLength !== innerWidth ||
  501 + newMaterialLength !== materialLength ||
  502 + newMaterialWidth !== materialWidth ||
  503 + materialName !== sMaterialsName
  504 + ) {
  505 + setMaterialLength(newMaterialLength);
  506 + setMaterialWidth(newMaterialWidth);
  507 + setMaterialName(sMaterialsName);
  508 + setDProductQty(newDProductQty);
  509 + setDPartsLength(innerWidth);
  510 + // setDMaterialsKQty(newDMaterialsKQty)
  511 + const scaleX = (clientWidth - 50) / (outerWidth + 110);
  512 + const scaleY = (clientHeight - 5) / (outerHeight + 90);
  513 + const newScale = Math.min(scaleX, scaleY);
  514 + onSaveStates(
  515 + newMaterialLength,
  516 + newMaterialWidth,
  517 + slaveData,
  518 + masterData,
  519 + dSinglePQty,
  520 + dMaterialsKQty,
  521 + newDProductQty,
  522 + newScale,
  523 + newMaterialLength,
  524 + newMaterialWidth,
  525 + innerWidth,
  526 + innerHeight
  527 + );
  528 + } else if (dProductQty !== newDProductQty) {
  529 + setDProductQty(newDProductQty);
  530 + // 修改数量时不去动别的数据
  531 + onSaveStates(
  532 + newMaterialLength,
  533 + newMaterialWidth,
  534 + slaveData,
  535 + masterData,
  536 + dSinglePQty,
  537 + dMaterialsKQty,
  538 + newDProductQty,
  539 + 1,
  540 + slaveDataDetail.dWlcd,
  541 + slaveDataDetail.dWlkd,
  542 + innerWidth,
  543 + innerHeight
  544 + );
  545 + }
  546 + openEdition = (((newMaterialLength * newMaterialWidth) / (maxWidth * maxHeight)) * 100).toFixed(2);
  547 +
  548 + setTimeout(() => {
  549 + if (typesettingBox.current) {
  550 + typesettingBox.current.style.backgroundColor = "#b7e0ff";
  551 + typesettingBox.current.style.marginTop = dSBLB + "px";
  552 + typesettingBox.current.style.marginLeft = dZBLB + "px";
  553 + typesettingBox.current.style.width = newMaterialLength + dYBLB + "px";
  554 + typesettingBox.current.style.height = newMaterialWidth + dXBLB + "px";
  555 + }
  556 + }, 0); // 使用 0 延迟，将任务放入事件队列
  557 + }
  558 + const isMax = slaveDataDetail?.dMaxLength && Number(slaveDataDetail?.dMaxLength) >= Number(slaveRowData?.dMachineLength);
  559 + console.log("🚀 ~ isMax:", isMax,slaveDataDetail?.dMaxLength,slaveRowData?.dMachineLength)
  560 + const isShow = slaveRowData && slaveRowData.dMachineLength && slaveRowData.dMaxWidth && slaveRowData.dMaxLength && isMax && innerDivs.length;
  561 +
  562 + const onClick = () => {
  563 + setIsModalOpen(true);
  564 + setBoxKeys(new Date().getTime());
  565 + setTimeout(() => {
  566 + const scaleX = 1200 / outerWidth;
  567 + const scaleY = 500 / outerHeight;
  568 + const scales = Math.min(scaleX, scaleY) - 0.2;
  569 + if (boxsRef.current) {
  570 + boxsRef.current.style.transform = `scale(${scales}) translateX(-50%)`;
  571 + boxsRef.current.style.transformOrigin = "top left";
  572 + setModalBoxWidth((outerWidth + totalLeftMargin * 2) * scales);
  573 + setModalHeight(scales > 1 ? scales * modalHeight : (1 + scales) * modalHeight);
  574 + }
  575 + // if(typesettingBox.current) {
  576 + // typesettingBox.current.style.transform = `scale(${scales})`;
  577 + // typesettingBox.current.style.transformOrigin = "top left";
  578 + // }
  579 + }, 0);
  580 + };
  581 + const handleCancel = () => {
  582 + setIsModalOpen(false);
  583 + };
  584 + return (
  585 + <>
  586 + {isShow ? (
  587 + <div
  588 + key={boxKey}
  589 + style={{
  590 + width: "100%",
  591 + height: "100%",
  592 + position: "absolute",
  593 + top: 0,
  594 + left: 0,
  595 + right: 0,
  596 + zIndex: 10,
  597 + maxHeight: `${clientHeight}`,
  598 + padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
  599 + }}
  600 + >
  601 + <div style={style} ref={boxRef}>
  602 + {boxList.length ? innerDivs : []}
  603 + <div
  604 + ref={typesettingBox}
  605 + style={{
  606 + position: "absolute",
  607 + top: 0,
  608 + left: 0,
  609 + }}
  610 + >
  611 + {materialLength ? (
  612 + <div
  613 + style={{
  614 + width: `${materialLength * scaleXD}px`,
  615 + height: "30px",
  616 + lineHeight: "30px",
  617 + position: "absolute",
  618 + bottom: "-32px",
  619 + left: 0,
  620 + fontSize: "11px",
  621 + textAlign: "center",
  622 + color: "#333",
  623 + transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
  624 + transformOrigin: "top left",
  625 + }}
  626 + >
  627 + <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialLength}</span>
  628 + <div className={styles.maxWidthLeft}>
  629 + <VerticalRightOutlined />
  630 + <div
  631 + className={styles.maxWidthLeftLine}
  632 + style={{
  633 + width: `${materialLength * scaleXD * 0.2}px`,
  634 + height: "1px",
  635 + top: "14px",
  636 + left: "5px",
  637 + backgroundColor: "#333",
  638 + }}
  639 + />
  640 + </div>
  641 + <div className={styles.maxWidthRight}>
  642 + <VerticalLeftOutlined />
  643 + <div
  644 + className={styles.maxWidthRightLine}
  645 + style={{
  646 + width: `${materialLength * scaleXD * 0.2}px`,
  647 + height: "1px",
  648 + top: "14px",
  649 + right: "5px",
  650 + backgroundColor: "#333",
  651 + }}
  652 + />
  653 + </div>
  654 + </div>
  655 + ) : null}
  656 + {materialWidth ? (
  657 + <div
  658 + style={{
  659 + width: `${30}px`,
  660 + height: `${materialWidth * scaleYD}px`,
  661 + position: "absolute",
  662 + top: 0,
  663 + right: "-15px",
  664 + fontSize: "11px",
  665 + lineHeight: `${materialWidth * scaleYD}px`,
  666 + color: "#333",
  667 + transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
  668 + transformOrigin: "top left",
  669 + }}
  670 + >
  671 + <span style={{ color: "red", display: "inline-block", width: "30px", textAlign: "center" }}>{materialWidth}</span>
  672 + <div
  673 + style={{
  674 + position: "absolute",
  675 + top: `0px`,
  676 + left: "0",
  677 + width: "30px",
  678 + }}
  679 + >
  680 + <VerticalRightOutlined
  681 + style={{
  682 + position: "absolute",
  683 + top: "0",
  684 + left: "11.5px",
  685 + transform: `rotateZ(${90}deg)`,
  686 + }}
  687 + />
  688 + <div
  689 + style={{
  690 + height: `${materialWidth * scaleYD * 0.3}px`,
  691 + position: "absolute",
  692 + left: "16px",
  693 + top: `5px`,
  694 + width: "1px",
  695 + backgroundColor: "#333",
  696 + }}
  697 + />
  698 + </div>
  699 + <div
  700 + style={{
  701 + position: "absolute",
  702 + bottom: `0px`,
  703 + left: "0",
  704 + width: "30px",
  705 + }}
  706 + >
  707 + <VerticalLeftOutlined
  708 + style={{
  709 + position: "absolute",
  710 + bottom: "0",
  711 + left: "11.5px",
  712 + transform: `rotateZ(${90}deg)`,
  713 + }}
  714 + />
  715 + <div
  716 + style={{
  717 + height: `${materialWidth * scaleYD * 0.3}px`,
  718 + position: "absolute",
  719 + left: "16px",
  720 + bottom: `5px`,
  721 + width: "1px",
  722 + backgroundColor: "#333",
  723 + }}
  724 + />
  725 + </div>
  726 + </div>
  727 + ) : null}
  728 + </div>
  729 + {maxWidth ? (
  730 + <div
  731 + className={styles.maxWidth}
  732 + style={{
  733 + position: "absolute",
  734 + left: 0,
  735 + bottom: "-70px",
  736 + textAlign: "center",
  737 + width: `${maxWidth * scaleXD}px`,
  738 + height: "30px",
  739 + lineHeight: "30px",
  740 + fontSize: "11px",
  741 + transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
  742 + transformOrigin: "top left",
  743 + }}
  744 + >
  745 + <div
  746 + style={{
  747 + overflow: "hide",
  748 + }}
  749 + >
  750 + <span style={{ color: "red" }}>{maxWidth}</span>
  751 + {openEdition ? (
  752 + <span>
  753 + <span>开版利用率：</span>
  754 + <span style={{ color: "red" }}>{openEdition} %</span>
  755 + </span>
  756 + ) : null}
  757 + </div>
  758 + <div className={styles.maxWidthLeft}>
  759 + <VerticalRightOutlined />
  760 + <div
  761 + className={styles.maxWidthLeftLine}
  762 + style={{
  763 + width: `${maxWidth * scaleXD * 0.2}px`,
  764 + height: "1px",
  765 + top: "14px",
  766 + left: "5px",
  767 + }}
  768 + />
  769 + </div>
  770 + <div className={styles.maxWidthRight}>
  771 + <VerticalLeftOutlined />
  772 + <div
  773 + className={styles.maxWidthRightLine}
  774 + style={{
  775 + width: `${maxWidth * scaleXD * 0.2}px`,
  776 + height: "1px",
  777 + top: "14px",
  778 + right: "5px",
  779 + }}
  780 + />
  781 + </div>
  782 + </div>
  783 + ) : null}
  784 + {maxHeight ? (
  785 + <div
  786 + style={{
  787 + position: "absolute",
  788 + right: "-120px",
  789 + top: 0,
  790 + textAlign: "center",
  791 + width: `${30}px`,
  792 + height: `${maxHeight * scaleYD}px`,
  793 + lineHeight: `${maxHeight * scaleYD}px`,
  794 + fontSize: "11px",
  795 + transform: `scale(${1 / scaleXD}, ${1 / scaleYD})`,
  796 + transformOrigin: "top left",
  797 + }}
  798 + >
  799 + <span
  800 + style={{
  801 + color: "red",
  802 + }}
  803 + >
  804 + {maxHeight}
  805 + </span>
  806 + <div
  807 + style={{
  808 + position: "absolute",
  809 + top: `0px`,
  810 + left: 0,
  811 + width: "20px",
  812 + }}
  813 + >
  814 + <VerticalRightOutlined
  815 + style={{
  816 + position: "absolute",
  817 + top: "0",
  818 + left: "10px",
  819 + transform: `rotateZ(${90}deg)`,
  820 + }}
  821 + />
  822 + <div
  823 + style={{
  824 + height: `${maxHeight * scaleYD * 0.3}px`,
  825 + position: "absolute",
  826 + right: "4px",
  827 + top: "5px",
  828 + width: "1px",
  829 + backgroundColor: "#333",
  830 + }}
  831 + />
  832 + </div>
  833 + <div
  834 + style={{
  835 + position: "absolute",
  836 + bottom: `0px`,
  837 + left: 0,
  838 + width: "20px",
  839 + }}
  840 + >
  841 + <VerticalLeftOutlined
  842 + style={{
  843 + position: "absolute",
  844 + bottom: "0",
  845 + left: "10px",
  846 + transform: `rotateZ(${90}deg)`,
  847 + }}
  848 + />
  849 + <div
  850 + style={{
  851 + height: `${maxHeight * scaleYD * 0.3}px`,
  852 + position: "absolute",
  853 + right: "4px",
  854 + bottom: "5px",
  855 + width: "1px",
  856 + backgroundColor: "#333",
  857 + }}
  858 + />
  859 + </div>
  860 + </div>
  861 + ) : null}
  862 + </div>
  863 + </div>
  864 + ) : (
  865 + ""
  866 + )}
  867 +
  868 + <Modal
  869 + width={modalWidth}
  870 + title="详情"
  871 + open={isModalOpen}
  872 + footer={null}
  873 + bodyStyle={{
  874 + overflowY: "hide",
  875 + minHeight: "500px",
  876 + width: `${modalWidth}`,
  877 + padding: "1px",
  878 + }}
  879 + onCancel={handleCancel}
  880 + >
  881 + <div
  882 + key={boxKeys}
  883 + style={{
  884 + width: "100%",
  885 + height: "100%",
  886 + position: "relative",
  887 + top: 0,
  888 + left: 0,
  889 + right: 0,
  890 + zIndex: 10,
  891 + maxHeight: `${clientHeight}`,
  892 + // padding: `${dSBLB}px ${dYBLB}px ${dXBLB}px ${dZBLB}px`,
  893 + }}
  894 + >
  895 + <div style={{ ...style, position: "absolute", left: "50%" }} ref={boxsRef}>
  896 + {boxList.length ? innerDivs : []}
  897 + <div
  898 + ref={typesettingBox}
  899 + style={{
  900 + position: "absolute",
  901 + top: 0,
  902 + left: 0,
  903 + }}
  904 + >
  905 + {materialLength ? (
  906 + <div
  907 + style={{
  908 + width: `${materialLength}px`,
  909 + height: "30px",
  910 + lineHeight: "30px",
  911 + position: "absolute",
  912 + bottom: "-32px",
  913 + left: 0,
  914 + fontSize: "30px",
  915 + textAlign: "center",
  916 + color: "#333",
  917 + }}
  918 + >
  919 + <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialLength}</span>
  920 + <div className={styles.maxWidthLeft}>
  921 + <LeftOutlined style={{ fontSize: "20px" }} />
  922 + <div
  923 + className={styles.maxWidthLeftLine}
  924 + style={{
  925 + width: `${materialLength * 0.1}px`,
  926 + top: "19px",
  927 + left: "9px",
  928 + backgroundColor: "#333",
  929 + }}
  930 + />
  931 + <div
  932 + style={{
  933 + position: "absolute",
  934 + width: "2px",
  935 + height: "30px",
  936 + top: "5px",
  937 + left: "0px",
  938 + backgroundColor: "#333",
  939 + }}
  940 + />
  941 + </div>
  942 + <div className={styles.maxWidthRight}>
  943 + <RightOutlined style={{ fontSize: "20px" }} />
  944 + <div
  945 + className={styles.maxWidthRightLine}
  946 + style={{
  947 + width: `${materialLength * 0.1}px`,
  948 + top: "19px",
  949 + right: "5px",
  950 + backgroundColor: "#333",
  951 + }}
  952 + />
  953 + <div
  954 + style={{
  955 + position: "absolute",
  956 + width: "2px",
  957 + height: "30px",
  958 + top: "5px",
  959 + right: "0px",
  960 + backgroundColor: "#333",
  961 + }}
  962 + />
  963 + </div>
  964 + </div>
  965 + ) : null}
  966 + {materialWidth ? (
  967 + <div
  968 + style={{
  969 + width: `${10}px`,
  970 + height: `${materialWidth}px`,
  971 + position: "absolute",
  972 + top: 0,
  973 + right: "-19px",
  974 + fontSize: "30px",
  975 + lineHeight: `${materialWidth}px`,
  976 + color: "#333",
  977 + }}
  978 + >
  979 + <span style={{ color: "red", display: "inline-block", width: "50px" }}>{materialWidth}</span>
  980 + <div
  981 + style={{
  982 + position: "absolute",
  983 + top: `-${materialWidth / 2 - dSBLB}px`,
  984 + left: "14px",
  985 + width: "20px",
  986 + }}
  987 + >
  988 + <UpOutlined style={{ fontSize: "20px" }} />
  989 + <div
  990 + style={{
  991 + height: `${materialWidth * 0.3}px`,
  992 + position: "absolute",
  993 + right: "10px",
  994 + top: `${materialWidth / 2 - dSBLB + 8}px`,
  995 + width: "2px",
  996 + backgroundColor: "#333",
  997 + }}
  998 + />
  999 + <div
  1000 + style={{
  1001 + height: "2px",
  1002 + width: "30px",
  1003 + backgroundColor: "#333",
  1004 + position: "absolute",
  1005 + top: `${materialWidth / 2 - dSBLB}px`,
  1006 + right: "-4.5px",
  1007 + }}
  1008 + />
  1009 + </div>
  1010 + <div
  1011 + style={{
  1012 + position: "absolute",
  1013 + bottom: `-${materialWidth / 2 - dXBLB - 10}px`,
  1014 + left: "14px",
  1015 + width: "20px",
  1016 + }}
  1017 + >
  1018 + <DownOutlined style={{ fontSize: "20px" }} />
  1019 + <div
  1020 + style={{
  1021 + height: `${materialWidth * 0.3}px`,
  1022 + position: "absolute",
  1023 + right: "9px",
  1024 + bottom: `${materialWidth / 2 - dXBLB}px`,
  1025 + width: "2px",
  1026 + backgroundColor: "#333",
  1027 + }}
  1028 + />
  1029 + <div
  1030 + style={{
  1031 + height: "2px",
  1032 + width: "30px",
  1033 + backgroundColor: "#333",
  1034 + position: "absolute",
  1035 + bottom: `${materialWidth / 2 - dXBLB - 10}px`,
  1036 + right: "-4.5px",
  1037 + }}
  1038 + />
  1039 + </div>
  1040 + </div>
  1041 + ) : null}
  1042 + </div>
  1043 + {maxWidth ? (
  1044 + <div
  1045 + className={styles.maxWidth}
  1046 + style={{
  1047 + position: "absolute",
  1048 + left: 0,
  1049 + bottom: "-70px",
  1050 + textAlign: "center",
  1051 + width: `${maxWidth}px`,
  1052 + height: "30px",
  1053 + lineHeight: "30px",
  1054 + fontSize: "38px",
  1055 + }}
  1056 + >
  1057 + <div
  1058 + style={{
  1059 + overflow: "hide",
  1060 + }}
  1061 + >
  1062 + <span style={{ color: "red" }}>{maxWidth}</span>
  1063 + {openEdition ? (
  1064 + <span>
  1065 + <span>开版利用率：</span>
  1066 + <span style={{ color: "red" }}>{openEdition} %</span>
  1067 + </span>
  1068 + ) : null}
  1069 + </div>
  1070 + <div className={styles.maxWidthLeft}>
  1071 + <LeftOutlined style={{ fontSize: "20px" }} />
  1072 + <div
  1073 + className={styles.maxWidthLeftLine}
  1074 + style={{
  1075 + width: `${maxWidth * 0.1}px`,
  1076 + height: "2px",
  1077 + }}
  1078 + />
  1079 + <div
  1080 + style={{
  1081 + width: "2px",
  1082 + height: "30px",
  1083 + backgroundColor: "#333",
  1084 + position: "absolute",
  1085 + top: `10px`,
  1086 + left: "0px",
  1087 + }}
  1088 + />
  1089 + </div>
  1090 + <div className={styles.maxWidthRight}>
  1091 + <RightOutlined style={{ fontSize: "20px" }} />
  1092 + <div
  1093 + className={styles.maxWidthRightLine}
  1094 + style={{
  1095 + width: `${maxWidth * 0.1}px`,
  1096 + }}
  1097 + />
  1098 + <div
  1099 + style={{
  1100 + width: "2px",
  1101 + height: "30px",
  1102 + backgroundColor: "#333",
  1103 + position: "absolute",
  1104 + top: `10px`,
  1105 + right: "0px",
  1106 + }}
  1107 + />
  1108 + </div>
  1109 + </div>
  1110 + ) : null}
  1111 + {maxHeight ? (
  1112 + <div
  1113 + style={{
  1114 + position: "absolute",
  1115 + right: "-90px",
  1116 + top: 0,
  1117 + textAlign: "center",
  1118 + width: `${30}px`,
  1119 + height: `${maxHeight}px`,
  1120 + fontSize: "38px",
  1121 + }}
  1122 + >
  1123 + <div
  1124 + style={{
  1125 + width: `${120}px`,
  1126 + height: `${maxHeight}px`,
  1127 + lineHeight: `${maxHeight}px`,
  1128 + textAlign: "left",
  1129 + color: "red",
  1130 + }}
  1131 + >
  1132 + {maxHeight}
  1133 + </div>
  1134 + <div
  1135 + style={{
  1136 + position: "absolute",
  1137 + top: `0px`,
  1138 + left: 0,
  1139 + width: "20px",
  1140 + }}
  1141 + >
  1142 + <UpOutlined style={{ fontSize: "20px", position: "absolute", top: "0px", right: "0px" }} />
  1143 + <div
  1144 + style={{
  1145 + height: `${maxHeight * 0.3}px`,
  1146 + position: "absolute",
  1147 + right: "9px",
  1148 + top: "10px",
  1149 + width: "2px",
  1150 + backgroundColor: "#333",
  1151 + }}
  1152 + />
  1153 + <div
  1154 + style={{
  1155 + width: "30px",
  1156 + height: "2px",
  1157 + backgroundColor: "#333",
  1158 + position: "absolute",
  1159 + top: `0px`,
  1160 + right: "-5px",
  1161 + }}
  1162 + />
  1163 + </div>
  1164 + <div
  1165 + style={{
  1166 + position: "absolute",
  1167 + bottom: `0px`,
  1168 + left: 0,
  1169 + width: "20px",
  1170 + }}
  1171 + >
  1172 + <DownOutlined style={{ fontSize: "20px", position: "absolute", bottom: "0px", right: "0px" }} />
  1173 + <div
  1174 + style={{
  1175 + height: `${maxHeight * 0.3}px`,
  1176 + position: "absolute",
  1177 + right: "9px",
  1178 + bottom: "10px",
  1179 + width: "2px",
  1180 + backgroundColor: "#333",
  1181 + }}
  1182 + />
  1183 + <div
  1184 + style={{
  1185 + width: "30px",
  1186 + height: "2px",
  1187 + backgroundColor: "#333",
  1188 + position: "absolute",
  1189 + bottom: `0px`,
  1190 + right: "-5px",
  1191 + }}
  1192 + />
  1193 + </div>
  1194 + </div>
  1195 + ) : null}
  1196 + </div>
  1197 + </div>
  1198 + </Modal>
  1199 + </>
  1200 + );
  1201 +};
  1202 +
  1203 +export default Typesetting;
... ...
src/components/QuickQuote/i.json 0 → 100644
  View file @d624af2
src/components/QuickQuote/index.css 0 → 100644
  View file @d624af2
  1 +.quickQuote {
  2 + width: 100vw;
  3 + height: 100vh;
  4 + padding-top: 50px;
  5 +}
  6 +.quickQuote .content {
  7 + position: relative;
  8 + width: 100%;
  9 + height: 100%;
  10 + display: flex;
  11 +}
  12 +.quickQuote .content :global .ant-btn-primary {
  13 + border-radius: 5px;
  14 +}
  15 +.quickQuote .content .back {
  16 + position: absolute;
  17 + top: 16px;
  18 + left: 360px;
  19 + z-index: 10;
  20 +}
  21 +.quickQuote .content .leftTree {
  22 + width: 250px;
  23 + height: 100%;
  24 + background: #3274b7;
  25 + padding: 10px 0 0 10px;
  26 + overflow: hidden;
  27 +}
  28 +.quickQuote .content .leftTree :global .ant-tree {
  29 + background: transparent;
  30 +}
  31 +.quickQuote .content .leftTree :global .ant-tree .ant-tree-treenode {
  32 + padding-bottom: 10px;
  33 +}
  34 +.quickQuote .content .leftTree :global .ant-tree .ant-tree-title {
  35 + color: #fff;
  36 + font-size: 18px;
  37 + font-weight: bold;
  38 +}
  39 +.quickQuote .content .leftTree :global .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  40 + background-color: #00a183;
  41 +}
  42 +.quickQuote .content .leftTree :global .ant-tree .ant-tree-node-content-wrapper:hover {
  43 + background-color: #009688;
  44 +}
  45 +.quickQuote .content .overFlow {
  46 + overflow: auto;
  47 +}
  48 +.quickQuote .content .rightContent {
  49 + flex: 1;
  50 + background: #f8fafe;
  51 + overflow: auto;
  52 +}
  53 +.quickQuote .content .rightContent .divider {
  54 + color: #000;
  55 + font-size: 18px;
  56 +}
  57 +.quickQuote .content .rightContent .divider:before,
  58 +.quickQuote .content .rightContent .divider:after {
  59 + border-color: #d7d7d7;
  60 +}
  61 +.quickQuote .content .rightContent .tabs {
  62 + height: auto;
  63 +}
  64 +.quickQuote .content .rightContent .tabs :global .ant-tabs-nav-wrap {
  65 + padding-left: 20px;
  66 +}
  67 +.quickQuote .content .rightContent .tabs :global .ant-tabs-tab-btn {
  68 + font-size: 16px;
  69 +}
  70 +.quickQuote .content .rightContent .hideTab :global .ant-tabs-nav {
  71 + display: none;
  72 +}
  73 +.quickQuote .content .rightContent .viewTable {
  74 + width: 100%;
  75 + height: auto;
  76 + padding: 0 20px 0 10px;
  77 + flex: 1;
  78 +}
  79 +.quickQuote .content .rightContent .viewTable :global .viewStyle {
  80 + background-color: transparent;
  81 +}
  82 +.quickQuote .content .rightContent .viewTable :global .ant-form-item-label {
  83 + background-color: transparent !important;
  84 + color: #000 !important;
  85 + flex: 0 0 100px !important;
  86 + max-width: 100px !important;
  87 +}
  88 +.quickQuote .content .rightContent .viewTable :global .ant-form-item-control {
  89 + flex: 1;
  90 + max-width: calc(100% - 100px);
  91 +}
  92 +.quickQuote .content .rightContent .viewTable :global .viewStyle .ant-input-number {
  93 + width: 100% !important;
  94 +}
  95 +.quickQuote .content .rightContent .viewTable :global .viewStyle .ant-col {
  96 + margin-bottom: 2px;
  97 +}
  98 +.quickQuote .content .rightContent .boxPart1 {
  99 + width: 100%;
  100 + height: auto;
  101 + display: flex;
  102 + padding: 0 10px 0 10px;
  103 +}
  104 +.quickQuote .content .rightContent .boxPart1 .boxPart1Left {
  105 + flex: 1;
  106 +}
  107 +.quickQuote .content .rightContent .boxPart1 .boxPart1Right {
  108 + width: auto;
  109 + height: auto;
  110 +}
  111 +.quickQuote .content .rightContent .boxPart1 .boxPart1Right .boxRreview {
  112 + width: 100%;
  113 + height: auto;
  114 + display: flex;
  115 + flex-direction: column;
  116 + align-items: center;
  117 +}
  118 +.quickQuote .content .rightContent .boxPart1 .boxPart1Right .boxRreview .noImg {
  119 + width: 200px;
  120 + height: 200px;
  121 + display: flex;
  122 + align-items: center;
  123 + justify-content: center;
  124 + border: 1px solid #d7d7d7;
  125 + font-size: 16px;
  126 +}
  127 +.quickQuote .content .rightContent .boxPart1 .boxPart1Right .boxRreview .boxRreviewTitile {
  128 + width: 100%;
  129 + height: 30px;
  130 + display: flex;
  131 + align-items: center;
  132 + justify-content: center;
  133 + font-size: 18px;
  134 +}
  135 +.quickQuote .content .rightContent .boxPart1 .boxPart1Right .boxRadio {
  136 + width: 100%;
  137 + height: 30px;
  138 +}
  139 +.quickQuote .content .rightContent .boxPinbanInfo {
  140 + width: 100%;
  141 + height: auto;
  142 + padding: 0 10px 0 10px;
  143 + display: flex;
  144 + position: relative;
  145 +}
  146 +.quickQuote .content .rightContent .boxPinbanInfo .boxComponent {
  147 + width: 400px;
  148 + height: 300px;
  149 + border: 1px solid #d7d7d7;
  150 + position: relative;
  151 +}
  152 +.quickQuote .content .rightContent .boxPinbanInfo .boxComponent .boxComponentWidth {
  153 + position: absolute;
  154 + bottom: -10px;
  155 + left: 0px;
  156 + width: 400px;
  157 + height: 10px;
  158 + border: 1px solid #333;
  159 + border-top: transparent;
  160 +}
  161 +.quickQuote .content .rightContent .boxPinbanInfo .boxComponent .boxComponentWidth .boxComponentWidthTitle {
  162 + width: 400px;
  163 + height: 10px;
  164 + position: absolute;
  165 + top: 15px;
  166 + left: 0px;
  167 + line-height: 10px;
  168 + font-size: 18px;
  169 + text-align: center;
  170 +}
  171 +.quickQuote .content .rightContent .boxPinbanInfo .boxComponent1 {
  172 + width: 200px;
  173 + height: 300px;
  174 + border: 1px solid #d7d7d7;
  175 + position: relative;
  176 + overflow: hidden;
  177 +}
  178 +.quickQuote .content .rightContent .boxPinbanBtn {
  179 + position: absolute;
  180 + top: 0;
  181 + left: 200px;
  182 +}
  183 +.quickQuote .content .rightContent .boxPart2 {
  184 + width: 100%;
  185 + height: auto;
  186 +}
  187 +.quickQuote .content .rightContent .many {
  188 + width: 100%;
  189 + height: 235px;
  190 + padding: 0 10px 0 10px;
  191 + position: relative;
  192 +}
  193 +.quickQuote .content .rightContent .many .calcPrice {
  194 + position: absolute;
  195 + top: -48px;
  196 + right: 100px;
  197 + border-radius: 5px;
  198 +}
  199 +.quickQuote .content .rightContent .many .confirmOrder {
  200 + position: absolute;
  201 + top: -48px;
  202 + right: 10px;
  203 + border-radius: 5px;
  204 + background-color: #53b637;
  205 + border-color: #53b637;
  206 +}
... ...