diff --git a/.umirc.ts b/.umirc.ts index 29536d4..d161303 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -28,7 +28,7 @@ export default defineConfig({ routes: [{ path: "*" }], }, ], - + title: "小羚羊EBC前台业务系统", npmClient: "pnpm", dva: {}, icons: { diff --git a/package.json b/package.json index 987c900..a76892e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "numeral": "^2.0.6", "react-dnd": "^14.0.5", "react-dnd-html5-backend": "^14.1.0", - "react-draggable": "^4.4.6", + "react-draggable": "4.4.5", "react-fittext": "1.0.0", "react-flow-renderer": "^10.3.17", "react-grid-layout": "^1.3.4", @@ -41,7 +41,7 @@ "react-resizable": "^3.0.5", "react-sortable-hoc": "^2.0.0", "react-to-print": "^3.0.5", - "umi": "^4.4.6" + "umi": "^4.4.11" }, "devDependencies": { "@types/react": "^18.0.33", diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js index 5f17344..fc56053 100644 --- a/src/components/Charts/Pie/index.js +++ b/src/components/Charts/Pie/index.js @@ -144,7 +144,6 @@ class Pie extends Component { // clean this.node.innerHTML = ''; - console.log("🚀 ~ Pie ~ renderChart ~ G2:", G2) const { Stat } = G2; diff --git a/src/components/Common/BoxDesignCompontent/index.js b/src/components/Common/BoxDesignCompontent/index.js index 487be66..b5f7d93 100644 --- a/src/components/Common/BoxDesignCompontent/index.js +++ b/src/components/Common/BoxDesignCompontent/index.js @@ -160,7 +160,6 @@ const BoxDesignCompontent = baseProps => { tableColum.forEach(item => { titleList.push(item.showName); }); - console.log("🚀 ~ tableColum:", tableColum); boxBodyList.forEach(item => { titleList.push(item.showName); }); @@ -410,6 +409,7 @@ const BoxDesignCompontent = baseProps => { const zscw = boxList.find(x => x.sName === "左(上)插位组件"); const yscw = boxList.find(x => x.sName === "右(上)插位组件"); const yxcw = boxList.find(x => x.sName === "右(下)插位组件"); + const hdzj = boxList.find(x => x.sName === "盒底组件"); const zxcwType = zxcw?.type; const zxcwValue = zxcw?.value; const zscwType = zscw?.type; @@ -432,7 +432,7 @@ const BoxDesignCompontent = baseProps => { const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); - if (zxcwType === "4001" || zxcwType === "4006") { + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftBottomValue = Number(zxcwValue) + boxHeight; leftBottom = " + dZXCW + W"; } else if (zxcwType === "4002" || zxcwType === "4003") { @@ -445,7 +445,7 @@ const BoxDesignCompontent = baseProps => { leftBottomValue = boxHeight * 2; leftBottom = "+ W * 2"; } - if (yscwType === "6001" || yscwType === "6006") { + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightTopValue = Number(yscwValue) + boxHeight; rightTop = "dYSCW + W + "; } else if (yscwType === "6002" || yscwType === "6003") { @@ -458,7 +458,7 @@ const BoxDesignCompontent = baseProps => { rightTopValue = boxHeight * 2; rightTop = "W * 2+ "; } - if (zscwType === "3001" || zscwType === "3006") { + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { leftTopValue = Number(zscwValue) + boxHeight; leftTop = "dZSCW + W +"; } else if (zscwType === "3002" || zscwType === "3003") { @@ -471,7 +471,7 @@ const BoxDesignCompontent = baseProps => { leftTopValue = boxHeight * 2; leftTop = "W * 2 +"; } - if (yxcwType === "7001" || yxcwType === "7006") { + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { rightBottomValue = Number(yxcwValue) + boxHeight; rightBottom = "+ dYXCW + W"; } else if (yxcwType === "7002" || yxcwType === "7003") { @@ -484,13 +484,13 @@ const BoxDesignCompontent = baseProps => { rightBottomValue = boxHeight * 2; rightBottom = "+ W * 2"; } - sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (leftBottomValue > rightBottomValue ? leftBottom : rightBottom); + sWidthFormula = (leftTopValue > rightTopValue ? leftTop : rightTop) + "D" + (hdzj? ' + dHDC': (leftBottomValue > rightBottomValue ? leftBottom : rightBottom)) ; } else if (boxType && boxType === "2") { // 单折 const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L * 2 + W" + (ytbw ? " +dYTBW" : ""); - if (zxcwType === "4001" || zxcwType === "4006") { + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftBottomValue = Number(zxcwValue) + boxHeight; leftBottom = " + dZXCW + W"; } else if (zxcwType === "4002" || zxcwType === "4003") { @@ -503,7 +503,7 @@ const BoxDesignCompontent = baseProps => { leftBottomValue = boxHeight * 2; leftBottom = "+ W * 2"; } - if (yscwType === "6001" || yscwType === "6006") { + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightTopValue = Number(yscwValue) + boxHeight; rightTop = "dYSCW + W + "; } else if (yscwType === "6002" || yscwType === "6003") { @@ -516,7 +516,7 @@ const BoxDesignCompontent = baseProps => { rightTopValue = boxHeight * 2; rightTop = "W * 2+ "; } - if (zscwType === "3001" || zscwType === "3006") { + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { leftTopValue = Number(zscwValue) + boxHeight; leftTop = "dZSCW + W +"; } else if (zscwType === "3002" || zscwType === "3003") { @@ -529,7 +529,7 @@ const BoxDesignCompontent = baseProps => { leftTopValue = boxHeight * 2; leftTop = "W * 2 +"; } - if (yxcwType === "7001" || yxcwType === "7006") { + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { rightBottomValue = Number(yxcwValue) + boxHeight; rightBottom = "+ dYXCW + W"; } else if (yxcwType === "7002" || yxcwType === "7003") { @@ -547,7 +547,7 @@ const BoxDesignCompontent = baseProps => { const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; sLengthFormula = (ztbw ? "dZTBW+ " : "") + "L + W * 2" + (ytbw ? " +dYTBW" : ""); - if (zxcwType === "4001" || zxcwType === "4006") { + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftBottomValue = Number(zxcwValue) + boxHeight; leftBottom = " + dZXCW + W"; } else if (zxcwType === "4002" || zxcwType === "4003") { @@ -560,7 +560,7 @@ const BoxDesignCompontent = baseProps => { leftBottomValue = boxHeight * 2; leftBottom = "+ W * 2"; } - if (yscwType === "6001" || yscwType === "6006") { + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightTopValue = Number(yscwValue) + boxHeight; rightTop = "dYSCW + W + "; } else if (yscwType === "6002" || yscwType === "6003") { @@ -573,7 +573,7 @@ const BoxDesignCompontent = baseProps => { rightTopValue = boxHeight * 2; rightTop = "W * 2+ "; } - if (zscwType === "3001" || zscwType === "3006") { + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { leftTopValue = Number(zscwValue) + boxHeight; leftTop = "dZSCW + W +"; } else if (zscwType === "3002" || zscwType === "3003") { @@ -586,7 +586,7 @@ const BoxDesignCompontent = baseProps => { leftTopValue = boxHeight * 2; leftTop = "W * 2 +"; } - if (yxcwType === "7001" || yxcwType === "7006") { + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { rightBottomValue = Number(yxcwValue) + boxHeight; rightBottom = "+ dYXCW + W"; } else if (yxcwType === "7002" || yxcwType === "7003") { @@ -618,7 +618,7 @@ const BoxDesignCompontent = baseProps => { let rightValue = ""; let topValue = ""; let bottomValue = ""; - if (zxcwType === "4001" || zxcwType === "4006") { + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { // leftValue = leftValue + Number(zxcwValue) + boxHeight * 2; leftValue = "dZXCW + D * 2 +"; } else if (zxcwType === "4002" || zxcwType === "4003") { @@ -628,7 +628,7 @@ const BoxDesignCompontent = baseProps => { } else if (zxcwType === "4005") { leftValue = "D * 3 +"; } - if (yscwType === "6001" || yscwType === "6006") { + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightValue = "+ dYSCW + D * 2"; } else if (yscwType === "6002" || yscwType === "6003") { rightValue = "+ dYSCW + D"; @@ -637,7 +637,7 @@ const BoxDesignCompontent = baseProps => { } else if (yscwType === "6005") { rightValue = " + D * 3"; } - if (zscwType === "3001" || zscwType === "3006") { + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { topValue = "dZSCW + D * 2 +"; } else if (zscwType === "3002" || zscwType === "3003") { topValue = "dZSCW + D +"; @@ -646,7 +646,7 @@ const BoxDesignCompontent = baseProps => { } else if (zscwType === "3005") { topValue = "D * 3+"; } - if (yxcwType === "7001" || yxcwType === "7006") { + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { bottomValue = "+ dYXCW + D * 2"; } else if (yxcwType === "7002" || yxcwType === "7003") { bottomValue = "+ dYXCW + D "; @@ -664,7 +664,7 @@ const BoxDesignCompontent = baseProps => { const ztbw = boxList.find(x => x.sName === "左贴边位")?.type && boxList.find(x => x.sName === "左贴边位")?.value; const ytbw = boxList.find(x => x.sName === "右贴边位")?.type && boxList.find(x => x.sName === "右贴边位")?.value; sLengthFormula = (ztbw ? "dZTBW+ " : "") + "D * 2 + W * 2" + (ytbw ? " +dYTBW" : ""); - if (zxcwType === "4001" || zxcwType === "4006") { + if (zxcwType === "4001" || zxcwType === "4006" || zxcwType === "4007") { leftBottomValue = Number(zxcwValue) + boxHeight; leftBottom = " + dZXCW + D"; } else if (zxcwType === "4002" || zxcwType === "4003") { @@ -677,7 +677,7 @@ const BoxDesignCompontent = baseProps => { leftBottomValue = boxHeight * 2; leftBottom = "+ D * 2"; } - if (yscwType === "6001" || yscwType === "6006") { + if (yscwType === "6001" || yscwType === "6006" || yscwType === "6007") { rightTopValue = Number(yscwValue) + boxHeight; rightTop = "dYSCW + D + "; } else if (yscwType === "6002" || yscwType === "6003") { @@ -690,7 +690,7 @@ const BoxDesignCompontent = baseProps => { rightTopValue = boxHeight * 2; rightTop = "D * 2+ "; } - if (zscwType === "3001" || zscwType === "3006") { + if (zscwType === "3001" || zscwType === "3006" || zscwType === "3007") { leftTopValue = Number(zscwValue) + boxHeight; leftTop = "dZSCW + D +"; } else if (zscwType === "3002" || zscwType === "3003") { @@ -703,7 +703,7 @@ const BoxDesignCompontent = baseProps => { leftTopValue = boxHeight * 2; leftTop = "D * 2 +"; } - if (yxcwType === "7001" || yxcwType === "7006") { + if (yxcwType === "7001" || yxcwType === "7006" || yxcwType === "7007") { rightBottomValue = Number(yxcwValue) + boxHeight; rightBottom = "+ dYXCW + D"; } else if (yxcwType === "7002" || yxcwType === "7003") { @@ -729,8 +729,8 @@ const BoxDesignCompontent = baseProps => { sName: boxList.find(item => item.sName === "盒型名称")?.value || "", sMakeUpPath: boxList.find(item => item.sName === "盒身")?.selectImage || "", sTypes: boxList.find(item => item.sName === "盒身")?.type || "", - sLengthFormula: sLengthFormula, - sWidthFormula: sWidthFormula, + sLengthFormula: masterData.sLengthFormula || sLengthFormula, + sWidthFormula: masterData.sWidthFormula || sWidthFormula, }; onOk({ slaveData: newSlaveData, masterData: newMasterData }); // 提交数据 diff --git a/src/components/Common/BoxProject/index.css b/src/components/Common/BoxProject/index.css new file mode 100644 index 0000000..0193fa9 --- /dev/null +++ b/src/components/Common/BoxProject/index.css @@ -0,0 +1,77 @@ +.boxDesignContent { + display: flex; + justify-content: space-between; + width: 100%; + height: 500px; + align-items: center; +} +.boxDesignContent .tabs { + width: 30%; + height: 100%; +} +.boxDesignContent .content { + width: 70%; + display: flex; + align-items: center; + height: 100%; +} +.boxDesignContent .content .boxTree { + width: 20%; + border: 1px solid #00ff55; + overflow-y: auto; + height: 500px; +} +.boxDesignContent .content .design { + width: 800px; + height: 500px; + border: 1px solid red; + overflow-y: auto; + position: relative; +} +.boxDesignContent .content .design .svgContent { + width: 50%; + height: 65%; + margin: 0 auto; + margin-top: 150px; +} +.boxDesignContent .content .design .svgContent .svgBox { + width: 100%; + height: 60%; + background-color: #00eeff; +} +.boxDesignContent .content .design .boxTop { + display: flex; + align-items: center; + justify-content: space-between; + width: 90%; +} +.boxDesignContent .content .design .boxTop .boxFlex { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; +} +.boxDesignContent .content .design .boxLeft { + width: 180px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + left: 0; + top: 50%; +} +.boxDesignContent .content .design .boxRight { + width: 180px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + right: 0; + top: 50%; +} +.svgContainer { + width: 100%; + height: 100%; + object-fit: contain; + /* 确保 SVG 保持比例 */ +} diff --git a/src/components/Common/BoxProject/index.js b/src/components/Common/BoxProject/index.js new file mode 100644 index 0000000..bf79f4d --- /dev/null +++ b/src/components/Common/BoxProject/index.js @@ -0,0 +1,342 @@ +/* eslint-disable */ +import React, { Component, useState, useEffect } from "react"; +import CommonBase from "../../Common/CommonBase"; /* 获取配置及数据 */ +import CommonSales from "../../Common/CommonBillEvent"; /* 继承销售模块业务功能 */ +import * as commonFunc from "../../Common/commonFunc"; /* 通用单据方法 */ /* 通用单据方法 */ +import { Form } from "@ant-design/compatible"; +import { Spin, Tree, Select, Input } from "antd-v4"; +import styles from "./index.less"; +import { ArrowLeftOutlined, FolderFilled, FolderOpenFilled, FileTextFilled, PlusOutlined, MinusOutlined } from "@ant-design/icons"; +import SvgBox from "./svg"; +import img1 from "../../../assets/paiban1.png"; +class BoxProject extends Component { + constructor(props) { + super(props); + this.state = { + boxList: [], + }; + } + // 添加一个方法来更新 boxList + updateBoxList = newBoxList => { + this.setState({ boxList: newBoxList }); + }; + render() { + const { pageLoading, masterData, fastOrderModalVisible } = this.props; + const { boxList } = this.state; + return ( + + + + ); + } +} +const BoxProjectContent = Form.create({ + mapPropsToFields(props) { + const { masterData, masterConfig } = props; + const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig); + return obj; + }, +})(props => { + const { updateBoxList, boxList } = props; // 获取父组件传递的更新方法 + // 获取树形节点 + const treeData = [ + { + title: "parent 1", + key: "0-0", + icon: , + children: [ + { + title: "leaf", + key: "0-0-0", + icon: , + }, + { + title: "leaf", + key: "0-0-1", + icon: ({ selected }) => (selected ? : ), + }, + ], + }, + ]; + const options = [ + { value: null, label: "", image: null }, + { value: 0, label: "图片1", image: img1 }, + { value: 1, label: "图片2", image: img1 }, + // { value: 2, label: "图片3", image: img1 }, + ]; + // 生成盒型输入框数据并更新到父组件的 state + useEffect( + () => { + let list = []; + for (let index = 0; index < 9; index++) { + const data = { + isEditable: false, + value: "", + type: null, + }; + list.push(data); + } + updateBoxList(list); // 调用父组件的方法更新 boxList + }, + [updateBoxList] + ); + + const handleFocus = (e, index) => { + if (boxList && boxList.length) { + const updatedBoxList = [...boxList]; + updatedBoxList[index].isEditable = true; + updateBoxList(updatedBoxList); + } + }; + + const handleBlur = (e, index) => { + if (boxList && boxList.length) { + const updatedBoxList = [...boxList]; + updatedBoxList[index].isEditable = false; + updateBoxList(updatedBoxList); + } + }; + + const handleChange = (e, index) => { + const updatedBoxList = [...boxList]; + updatedBoxList[index].value = e.target.value; + updateBoxList(updatedBoxList); + }; + + const handleSelect = (name, selectConfig, index) => { + const updatedBoxList = [...boxList]; + updatedBoxList[index].type = name; + updateBoxList(updatedBoxList); + }; + const titleList = [ + "上方盒舌", + "盒底组件", + "下方盒舌", + "左(上)插位组件", + "左贴边位", + "左(下)插位组件", + "右(上)插位组件", + "右贴边位", + "右(下)插位组件", + ]; + const svgProps = { + ...props, + boxList, + showNew:0 + }; + // const renderTreeNodes = data => { + // return data.map(item => { + // const { showName, children = [], sId } = item; + // const treeNodeProps = { + // title: showName, + // key: sId, + // treeNode: item, + // selectable: !children.length, + // switcherIcon: params => { + // const { expanded, isLeaf } = params; + // let icon = ""; + // if (isLeaf) { + // icon = ; + // } else if (expanded) { + // icon = ; + // } else { + // icon = ; + // } + // return icon; + // }, + // }; + + // return {!!children.length && renderTreeNodes(children)}; + // }); + // }; + return ( +
+
+
111
+
+
+ { + // props.setState(pre => ({ ...pre, selectedNode: select.selectedNodes[0]?.treeNode || {} })); + }} + // defaultSelectedKeys={[activeTree]} + defaultExpandAll={true} + selectedKeys={[1]} + treeData={treeData} + > + {/* {renderTreeNodes(treeData)} */} + +
+
+ {/* 数值输入 */} + {/* 上 */} + {boxList && boxList.length ? ( +
+ {Array.from({ length: 3 }).map((_, index) => ( +
+ {titleList[index]} + +
+
参数:
+ handleChange(e, index)} + onFocus={e => handleFocus(e, index)} + onBlur={e => handleBlur(e, index)} + readOnly={!boxList[index]?.isEditable} + style={{ width: 180 }} + /> +
+
+ ))} +
+ ) : ( + "" + )} + + {/* 左 */} + {boxList && boxList.length ? ( +
+ {Array.from({ length: 3 }, (_, i) => i + 3).map(index => ( +
+ {titleList[index]} + +
+
参数:
+ handleChange(e, index)} + onFocus={e => handleFocus(e, index)} + onBlur={e => handleBlur(e, index)} + readOnly={!boxList[index]?.isEditable} + style={{ width: 180 }} + /> +
+
+ ))} +
+ ) : ( + "" + )} + {/* 右 */} + {boxList && boxList.length ? ( +
+ {Array.from({ length: 3 }, (_, i) => i + 6).map(index => ( +
+ {titleList[index]} + +
+
参数:
+ handleChange(e, index)} + onFocus={e => handleFocus(e, index)} + onBlur={e => handleBlur(e, index)} + readOnly={!boxList[index]?.isEditable} + style={{ width: 180 }} + /> +
+
+ ))} +
+ ) : ( + "" + )} + +
+
+
+
+ ); +}); + +const SvgConten = props => { + const [length, setLength] = useState(0); + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); + const handleChange = (e, index) => { + if (index === 0) { + setLength(e.target.value); + } else if (index === 1) { + setWidth(e.target.value); + } else { + setHeight(e.target.value); + } + }; + const svgBoxProps = { + ...props, + boxSize:{ + length, + width, + height + } + } + return ( +
+
+ +
+ 盒长 + handleChange(e, 0)} /> +
+
+ 盒宽 + handleChange(e, 1)} /> +
+
+ 盒高 + handleChange(e, 2)} /> +
+
+
+ ); +}; +export default CommonBase(CommonSales(BoxProject)); diff --git a/src/components/Common/BoxProject/index.less b/src/components/Common/BoxProject/index.less new file mode 100644 index 0000000..5d56541 --- /dev/null +++ b/src/components/Common/BoxProject/index.less @@ -0,0 +1,77 @@ +.boxDesignContent { + display: flex; + justify-content: space-between; + width: 100%; + height: 500px; + align-items: center; + .tabs { + width: 30%; + height: 100%; + } + .content { + width: 70%; + display: flex; + align-items: center; + height: 100%; + .boxTree { + width: 20%; + border: 1px solid rgb(0, 255, 85); + overflow-y: auto; + height: 500px; + } + .design { + width: 800px; + height: 500px; + border: 1px solid red; + overflow-y: auto; + position: relative; + .svgContent { + width: 50%; + height: 65%; + margin: 0 auto; + margin-top: 150px; + .svgBox { + width: 100%; + height: 60%; + background-color: rgb(0, 238, 255); + } + } + .boxTop { + display: flex; + align-items: center; + justify-content: space-between; + width: 90%; + .boxFlex { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-direction: column; + } + } + .boxLeft { + width: 180px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + left: 0; + top: 50%; + } + .boxRight { + width: 180px; + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: absolute; + right: 0; + top: 50%; + } + } + } +} +.svgContainer { + width: 100%; + height: 100%; + object-fit: contain; /* 确保 SVG 保持比例 */ +} + diff --git a/src/components/Common/BoxProject/svg.js b/src/components/Common/BoxProject/svg.js new file mode 100644 index 0000000..4ec6e66 --- /dev/null +++ b/src/components/Common/BoxProject/svg.js @@ -0,0 +1,281 @@ +/* eslint-disable */ +import React, { useRef, useState, useEffect } from "react"; +import styles from "./index.less"; +import { + createPathElement, + createTopTongue, + createTopTongueType1, + createTrapezoid, + createDynamicTop, + createNoneProject, +} from "../BoxDesign/createAirplaneBox"; +const SvgBox = props => { + console.log("🚀 ~ propsprops:", props); + const svgContainerRef = useRef(null); + const svgRef = useRef(null); + const [boxKey, setBoxKey] = useState(new Date().getTime()); + const { boxList, boxSize } = props; + + // 盒身 + useEffect( + () => { + initSVG(); + }, + [boxList, boxSize] + ); + // 初始化svg + const initSVG = () => { + const svg = svgRef.current; + svg.innerHTML = ""; + // const {svgType} = props + const svgType = 0; + // 获取长宽高 + const width = Number(boxSize?.length); + const height = Number(boxSize?.width); + const deep = Number(boxSize?.height); + console.log(boxList, "boxLists"); + + let pathList = []; + // 判断盒型类型 根据不同盒型展示不同的盒身 0 四面盒身 + if (svgType === 0) { + const rectangles = [ + { x: 0, y: 0, width, height }, + { x: 0 + width, y: 0, width: deep, height }, + { x: 0 + deep + width, y: 0, width, height }, + { x: 0 + width * 2 + deep, y: 0, width: deep, height }, + ]; + rectangles.forEach(rect => { + svg.appendChild(createPathElement(rect.x, rect.y, rect.width, rect.height)); + }); + // 处理部件 + // 上方盒舌 + pathList.push(createUpperBoxTongueLeft(boxList[0]?.type, width, height, deep, Number(boxList[0]?.value), width, 0, 2, -2, 1, 5)); + // 下边盒舌 + pathList.push(createUpperBoxTongueRight(boxList[0]?.type, width, height, deep, Number(boxList[0]?.value), width * 2 + deep * 2, 0, -2, 5)); + // 左边贴边 + pathList.push(createTrapezoidLeft(boxList[4]?.type, height, 0, 0, Number(boxList[4]?.value))); + // 右边贴边 + pathList.push(createTrapezoidRight(boxList[7]?.type, height, width * 2 + deep * 2, 0, -Number(boxList[7]?.value))); + // 下边舌 + pathList.push(createUpperBoxTongueLeft(boxList[2]?.type, width, height, deep, -Number(boxList[2]?.value), width, height, 2, 2, 0, -5)); + pathList.push( + createUpperBoxTongueRight(boxList[2]?.type, width, height, deep, -Number(boxList[2]?.value), width * 2 + deep * 2, height, -2, 2, 1, -5) + ); + // 左上部件 + pathList.push(createDynamicTopLeft(boxList[3]?.type, width, height, deep, 0, 0, Number(boxList[3]?.value))); + // 右上部件 + pathList.push(createDynamicTopRight(boxList[6]?.type, width, height, deep, width + deep, 0, Number(boxList[6]?.value))); + // 左下部件 + pathList.push(createDynamicTopLeft(boxList[5]?.type, width, height, -deep, 0, height, -Number(boxList[5]?.value))); + // 右下部件 + pathList.push(createDynamicTopRight(boxList[8]?.type, width, height, -deep, width + deep, height, -Number(boxList[8]?.value))); + // 盒底组件 + pathList.push(createBoxBottomComponent(0)); + pathList.forEach(x => { + svg.appendChild(x); + }); + } + // 计算展长展宽 还需要加上贴边 + const viewBoxWidth = (width * 2 + deep * 2) * 1.5; + // 要判断是否有上下部件 + let max = 0; + if (boxList[0]?.value && boxList[0]?.type !== null) { + max = Number(boxList[0].value); + } + const targetIndicesSh = [0, 2]; + const targetIndices = [3, 5, 6, 8]; + if (boxList && boxList.length) { + const filterShData = targetIndicesSh.map(index => boxList[index]).filter(item => item.type !== null && item.value !== ""); + const filteredData = targetIndices.map(index => boxList[index]).filter(item => item.type !== null && item.value !== ""); + if (filterShData && filterShData.length) { + max = Math.max(...filterShData.map(item => Number(item.value))) ; + } + if (filteredData && filteredData.length) { + max = Math.max(...filteredData.map(item => Number(item.value))) * 3; + } + } + const viewBoxHeight = (height + max) * 2; + // 更新 SVG 的 viewBox 和尺寸 + const svgContainer = svgContainerRef.current; + svg.setAttribute("viewBox", `${-viewBoxWidth * 0.1} ${-viewBoxHeight * 0.3} ${viewBoxWidth} ${viewBoxHeight}`); + svg.setAttribute("width", `${viewBoxWidth}px`); + svg.setAttribute("height", `${viewBoxHeight}px`); + // svgContainer.style.width = `${viewBoxWidth}px`; + // svgContainer.style.height = `${viewBoxHeight}px`; + }; + // 上方盒舌左边 + const createUpperBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 + let data = {}; + switch (upperBoxTongueType) { + case 0: + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); + break; + case 1: + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右上方盒舌 + const createUpperBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 + let data = {}; + switch (upperBoxTongueType) { + case 0: + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); + break; + case 1: + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右上方盒舌 + const createBottomBoxTongueRight = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 + let data = {}; + switch (upperBoxTongueType) { + case 0: + data = createTopTongue(-deep, offsetX, offsetY, size, -2, 5, 0, true); + break; + case 1: + data = createTopTongueType1(-deep, offsetX, offsetY, -size, -3, -2); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + const createBottomBoxTongueLeft = (upperBoxTongueType, width, height, deep, size, offsetX, offsetY) => { + if (!size) return createNoneProject(); + // 根据不同类型创建不同形状的盒舌 upperBoxTongueType 如果null则返回 + let data = {}; + switch (upperBoxTongueType) { + case 0: + data = createTopTongue(deep, offsetX, offsetY, size, 2, 5, 1, false); + break; + case 1: + data = createTopTongueType1(deep, offsetX, offsetY, -size, 3, 2); + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + + // 左边贴位 + const createTrapezoidLeft = (trapezoidLeftType, height, offsetX, offsetY, dg) => { + if (!dg) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case 0: + data = createTrapezoid(height, offsetX, offsetY, dg); + break; + case 1: + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右边贴位 + const createTrapezoidRight = (trapezoidLeftType, height, offsetX, offsetY, dg) => { + if (!dg) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case 0: + data = createTrapezoid(height, offsetX, offsetY, dg); + break; + case 1: + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 左上部件 + const createDynamicTopLeft = (trapezoidLeftType, width, height, deep, offsetX, offsetY, size) => { + if (!size) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case 0: + data = createDynamicTop(width, height, deep, offsetX, offsetY, size); + break; + case 1: + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 右上部件 + const createDynamicTopRight = (trapezoidLeftType, width, height, deep, offsetX, offsetY, size) => { + if (!size) return createNoneProject(); + let data = {}; + switch (trapezoidLeftType) { + case 0: + data = createDynamicTop(width, height, deep, offsetX, offsetY, size); + break; + case 1: + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + // 盒底组件 特殊的盒底组件 + const createBoxBottomComponent = trapezoidLeftType => { + let data = {}; + switch (trapezoidLeftType) { + case 0: + data = createNoneProject(); + break; + case 1: + break; + default: + data = createNoneProject(); + break; + } + return data; + }; + return ( +
+ +
+ ); +}; + +export default SvgBox; diff --git a/src/components/Common/BoxShowImgMaterial/index.less b/src/components/Common/BoxShowImgMaterial/index.less index 4492db9..2d916dd 100644 --- a/src/components/Common/BoxShowImgMaterial/index.less +++ b/src/components/Common/BoxShowImgMaterial/index.less @@ -4,6 +4,6 @@ .materialBox{ // position: absolute; background-color: '#b7e0ff'; - border: 2px solid #333; + border: 2px solid #333; } } \ No newline at end of file diff --git a/src/components/Common/BoxShowImgMaterial/indexNew.js b/src/components/Common/BoxShowImgMaterial/indexNew.js index dab0d43..4617575 100644 --- a/src/components/Common/BoxShowImgMaterial/indexNew.js +++ b/src/components/Common/BoxShowImgMaterial/indexNew.js @@ -38,7 +38,6 @@ const BoxShowImgMaterial = props => { width: `${dMachineLength}px`, height: `${dMachineWidth}px`, backgroundColor: "#b7e0ff", - border: "1px soild #333", position: "relative", }} > @@ -171,7 +170,7 @@ const BoxShowImgMaterial = props => { ).toFixed(2); useEffect( () => { - // setBoxKey(new Date().getTime()); + setBoxKey(new Date().getTime()); setTimeout(() => { // if (boxRef.current && textRef.current && textRefs.current && nTextRef.current && nTextRefs.current) if (boxRef.current && textRef.current && textRefs.current && nTextRef.current && nTextRefs.current) { diff --git a/src/components/Common/CheckModel.js b/src/components/Common/CheckModel.js new file mode 100644 index 0000000..fdffd16 --- /dev/null +++ b/src/components/Common/CheckModel.js @@ -0,0 +1,271 @@ +/* eslint-disable array-callback-return,no-undef */ +import React, { Component } from 'react'; +import { Table, Button, Checkbox, Input, message } from 'antd-v4'; +import config from '@/utils/config'; +import styles from '@/index.less'; +import AntdDraggableModal from '@/components/Common/AntdDraggableModal'; + +const InputGroup = Input.Group; +const { TextArea } = Input; + +class CheckModel extends Component { + constructor(props) { + super(props); + this.state = { + visible: props.visible, + sActiveId: props.sActiveId, /* 窗体Id */ + sReturnMessage: props.sReturnMessage, + sCheckModelId: props.sCheckModelId, + loading: false, + data: [], + dataPerson: [], + listVisible: false, + inputValue: '', + checkDisplay: '', + checked: '', + sTbName: props.sTbName, + sBillKey: props.sBillKey, + sBillNo: props.sBillNo, + sCheckMemo: '', + }; + this.header = {}; + } + + + componentWillMount() { + const { systemData } = this.props.app; + const ckxTmpCheck = systemData.filter(item => (item.sName === 'CkxTmpCheck'))[0]; + const checkDisplay = ckxTmpCheck.sValue === '0' ? 'none' : 'block'; + this.setState({ checkDisplay }); + } + + + componentWillReceiveProps(nextProps) { + const { gdsformconst, sReturnMessage, sBillNo } = nextProps; + if (sReturnMessage.length > 0) { + const data = []; + sReturnMessage.forEach((child, i) => { + const sName = child.split('-'); + data.push({ + key: i, + condition: sName[0], + sMemo: sName[1], + }); + }); + this.setState({ data, sBillNo }); + } + const checkCondition = gdsformconst.filter(item => (item.sName === 'checkCondition')); + const checkSmemo = gdsformconst.filter(item => (item.sName === 'checkSmemo')); + const checkUserId = gdsformconst.filter(item => (item.sName === 'checkUserId')); + const checkUserName = gdsformconst.filter(item => (item.sName === 'checkUserName')); + if (checkCondition.length > 0) { + this.header.checkCondition = checkCondition[0].showName; + } + if (checkSmemo.length > 0) { + this.header.checkSmemo = checkSmemo[0].showName; + } + if (checkUserId.length > 0) { + this.header.checkUserId = checkUserId[0].showName; + } + if (checkUserName.length > 0) { + this.header.checkUserName = checkUserName[0].showName; + } + this.setState({ + visible: nextProps.visible, + sCheckModelId: nextProps.sCheckModelId, + sReturnMessage: nextProps.sReturnMessage, + }); + } + /* 取消 */ + handleCancel = () => { + this.setState({ visible: false }); + } + + handleChange = (e) => { + this.setState({ checked: e.target.checked, sCheckMemo: e.target.value }); + } + + handleOk = () => { + const { + checked, sCheckModelId, sTbName, sBillKey, sBillNo, sReturnMessage, dataPerson, sCheckMemo, + } = this.state; + const { sActiveId } = this.state; + const { token } = this.props.app; + const url = `${config.server_host}business/doExamine?sModelsId=${sActiveId}`; + if (checked === true) { + const paramsMap = { + iFlag: 1, + iTmpCheck: 1, + sFormGuid: sActiveId, + sGuid: this.props.app.currentPane.checkedId, + }; + const value = { + sClientType: '1', + sProName: sBillKey, + paramsMap, + }; + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + authorization: token, + }, + body: JSON.stringify(value), + }; + fetch(url, options).then(response => response.json()).then((json) => { + if (json.code === 1) { + message.success(json.msg); + } else { + message.error(json.msg); + } + }); + } else { + let dataPersonString = ''; + for (const item of dataPerson) { + dataPersonString = `${dataPersonString},${item.userId}`; + } + dataPersonString = dataPersonString.substring(1); + const paramsMap = { + sFormGuid: sActiveId, + sBillKey, + sTbName, + sGuid: this.props.app.currentPane.checkedId, + sBillNo, + sCheckCondition: sReturnMessage, + sMemo: sCheckMemo, + sCheckModelGuid: sCheckModelId, + sCheckPerson: dataPersonString, + }; + + const value = { + sClientType: '1', + sProName: 'Sp_System_AutoSendCheckMsg', + paramsMap, + }; + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + authorization: token, + }, + body: JSON.stringify(value), + }; + fetch(url, options).then(response => response.json()).then((json) => { + if (json.code === 1) { + message.success(json.msg); + } else { + message.error(json.msg); + } + }); + } + this.setState({ visible: false }); + }; + + handlePpopUp = () => { + const { sCheckModelId } = this.props; + const { sActiveId } = this.state; + const { token } = this.props.app; + const url = `${config.server_host}checkModel/getUserListByModelId/${sCheckModelId}?sModelsId=${sActiveId}`; + const options = { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + authorization: token, + }, + }; + fetch(url, options).then(response => response.json()).then((json) => { + const { dataPerson } = this.state; + if (json.code === 1) { + const { rows } = json.dataset; + rows.forEach((child) => { + dataPerson.push({ + key: child.sUserId, + userId: child.sUserId, + UserName: child.sUserName, + }); + }); + this.setState({ dataPerson }); + message.success(json.msg); + } else { + message.error(json.msg); + } + }); + this.setState({ listVisible: true }); + }; + + handleDoubleClick = (record) => { + this.setState({ inputValue: record.UserName, listVisible: false }); + }; + + render() { + const { loading } = this.state; + const { + visible, data, listVisible, dataPerson, inputValue, + } = this.state; + const columns = [{ + title: this.header.checkCondition !== undefined ? this.header.checkCondition : '审核条件', + dataIndex: 'condition', + key: 'condition', + }, { + title: this.header.checkSmemo !== undefined ? this.header.checkSmemo : '备注', + dataIndex: 'sMemo', + key: 'sMemo', + }]; + const columnsPerson = [{ + title: this.header.checkUserId !== undefined ? this.header.checkUserId : '人员编号', + dataIndex: 'userId', + key: 'userId', + }, { + title: this.header.checkUserName !== undefined ? this.header.checkUserName : '人员名称', + dataIndex: 'UserName', + key: 'UserName', + }]; + return ( +
+ { + visible ? + 关闭, + , + ]} + > + +
+ 允许临时审核通过 +
+