Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!2492 新增:复合实体属性页面添加房名柜名拾取,重构界面

Browse Source
pull/2496/MERGE
黄诗津 7 months ago committed by ChenX
parent f9b58b8a56
commit 7878c097e5
4 changed files with 281 additions and 142 deletions
Show Stats Download Patch File Download Diff File

27
src/UI/Components/Modal/HardwareModal.tsx
Unescape View File

@ -2,11 +2,8 @@ import { Button, Classes, Icon, Intent } from '@blueprintjs/core';
import * as React from 'react';
import { MathUtils } from 'three';
import { app } from '../../../ApplicationServices/Application';
import { EBoardKeyList } from '../../../Common/BoardKeyList';
import { Board } from '../../../DatabaseServices/Entity/Board';
import { HardwareTopline } from '../../../DatabaseServices/Hardware/HardwareTopline';
import { CommandWrap } from '../../../Editor/CommandMachine';
import { PromptStatus } from '../../../Editor/PromptResult';
import { BaseHardwareStore } from '../../Store/RightPanelStore/HardwareStore';
import { BoardModalType } from "../Board/BoardModalType";
import { Config_ModalType, UserConfigComponent } from '../Board/UserConfigComponent';
@ -60,11 +57,6 @@ export function GetHardwareModal(Com, props: IMetalsModal)
<div className={Classes.DIALOG_FOOTER} >
<UserConfigComponent store={store} type={type} isNotUpdateStore={true} configType={Config_ModalType.UserConfigModal} />
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
className={Classes.INTENT_SUCCESS}
text="拾取"
onClick={this.getOption}
/>
<Button
className={Classes.INTENT_SUCCESS}
text="确定"
@ -108,24 +100,5 @@ export function GetHardwareModal(Com, props: IMetalsModal)
props.store.Entity = undefined;
app.Editor.ModalManage.Destory();
};
public getOption = async () =>
{
app.Editor.ModalManage.ToggleShow();
app.Editor.MaskManage.Clear();
let enRes = await app.Editor.GetEntity({
Msg: "选择要拾取房名柜名的板件",
Filter: { filterTypes: [Board] }
});
if (enRes.Status === PromptStatus.OK)
{
let option = props.store.option;
const data = (enRes.Entity as Board).BoardProcessOption;
option[EBoardKeyList.RoomName] = data[EBoardKeyList.RoomName];
option[EBoardKeyList.CabinetName] = data[EBoardKeyList.CabinetName];
}
app.Editor.MaskManage.ShowMask();
app.Editor.ModalManage.ToggleShow();
};
};
}

251
src/UI/Components/RightPanel/CommonMetalPanel.tsx
Unescape View File

@ -9,10 +9,12 @@ import { EBoardKeyList } from '../../../Common/BoardKeyList';
import { CheckObjectType } from '../../../Common/CheckoutVaildValue';
import { CommandNames } from '../../../Common/CommandNames';
import { FixedNotZero } from '../../../Common/Utils';
import { Board } from '../../../DatabaseServices/Entity/Board';
import { Entity } from '../../../DatabaseServices/Entity/Entity';
import { HardwareTopline } from '../../../DatabaseServices/Hardware/HardwareTopline';
import { ProcessingGroupRecord } from '../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord';
import { CommandWrap } from '../../../Editor/CommandMachine';
import { PromptStatus } from '../../../Editor/PromptResult';
import { BaseHardwareStore } from '../../Store/RightPanelStore/HardwareStore';
import { ToasterInput } from '../Toaster';
@ -25,10 +27,6 @@ export interface ICommonMetalPanelProps
@observer
export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
private par = [["房间名:", EBoardKeyList.RoomName], ["柜名:", EBoardKeyList.CabinetName], ["单位:", "unit"]];
private pars1 = [["价格表达式:", "actualExpr"]];
private pars2 = [["型号:", "model"], ["厂家:", "factory"], ["品牌:", "brand"], ["规格:", "spec"]];
private pars3 = [["材质:", EBoardKeyList.Mat], ["颜色:", "color"]];
private size = new Vector3();
private length: string;
@ -72,43 +70,67 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
}, CommandNames.删除加工组);
};
private getOption = async () =>
{
app.Editor.ModalManage.ToggleShow();
app.Editor.MaskManage.Clear();
await CommandWrap(async () =>
{
let enRes = await app.Editor.GetEntity({
Msg: "选择板件",
Filter: { filterTypes: [Board] }
});
if (enRes.Status === PromptStatus.OK)
{
const { store } = this.props;
const data = (enRes.Entity as Board).BoardProcessOption;
store.option[EBoardKeyList.RoomName] = data[EBoardKeyList.RoomName];
store.option[EBoardKeyList.CabinetName] = data[EBoardKeyList.CabinetName];
}
}, "选择板件属性");
if (this.props.store.Entity)
{
app.Editor.MaskManage.ShowMask();
}
app.Editor.ModalManage.ToggleShow();
};
componentDidMount(): void
{
this.updateTags();
}
UNSAFE_componentWillMount()
constructor(props)
{
if (this.props.store.Entity)
super(props);
const { store, isTopline } = this.props;
if (store.Entity)
{
this.par.push(["实体名:", "name"], ["备注", "comments"]);
let box = this.props.store.Entity.BoundingBoxInOCS;
let box = store.Entity.BoundingBoxInOCS;
box.getSize(this.size);
}
if (this.props.isTopline)
if (isTopline)
{
this.pars1[0][0] = "每米单价";
this.length = FixedNotZero((this.props.store.Entity as HardwareTopline).MaxLength, 2);
this.length = FixedNotZero((store.Entity as HardwareTopline).MaxLength, 2);
}
}
public render()
private RoomAndCabinetName = () =>
{
const { otherOptions, option } = this.props.store;
const { option } = this.props.store;
const roomAndCabinetName = [["房间名:", EBoardKeyList.RoomName], ["柜名:", EBoardKeyList.CabinetName]];
return (
<div className="common-matal">
{
!this.props.store.Entity &&
<Label className={Classes.INLINE}>
<span>实体名:</span>
<input tabIndex={1} type="text" className={Classes.INPUT} value={option.name} onChange={e => option.name = e.target.value} />
</Label>
}
<div className="metal-type">
<div className="room-cabinet-name" style={{ display: "flex" }}>
<div>
{
this.par.map(([t, k]) =>
roomAndCabinetName.map(([t, k]) =>
{
return (
<Label className={Classes.INLINE} key={k}>
<Label className={`${Classes.INLINE}`} key={k}>
<span>{t}</span>
<input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
</Label>
@ -116,6 +138,22 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
})
}
</div>
<button
className="bp3-button bp3-intent-success"
onClick={this.getOption}
>拾取</button>
</div>
);
};
private ProcessingGroupAndPrice = () =>
{
const { isTopline } = this.props;
const { option } = this.props.store;
const price = isTopline ? [["每米单价:", "actualExpr"]] : [["价格表达式:", "actualExpr"]];
return (
<>
<label className="bp3-label bp3-inline .modifier" style={{ display: "flex" }}>
<span style={{ width: 65 }}>加工组:</span>
<div style={{ display: "inline-flex", flex: 1, minWidth: 120 }}>
@ -160,40 +198,10 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
""
}
</div>
{/* todo添加加工组 */}
</Alert>
</label>
{
this.props.isTopline &&
<div className="metal-type">
<Label>
<span>旋转轮廓角度:</span>
<input
tabIndex={1}
style={{ width: "50%", marginTop: 0 }}
className={Classes.INPUT}
value={this.props.store.rotation}
onChange={e => this.props.store.rotation = e.target.value}
/>
</Label>
{
[["每段加长:", "addLen"]].map(([t, k]) =>
<Label key={k}>
<span>{t}</span>
<input
tabIndex={1}
style={{ width: "50%", marginTop: 0 }}
className={Classes.INPUT}
value={option[k]}
onChange={e => option[k] = e.target.value}
/>
</Label>
)
}
</div>
}
{
this.pars1.map(([t, k]) =>
price.map(([t, k]) =>
{
return (
<Label className={Classes.INLINE} style={{ display: "inline-flex", width: "100%" }} key={k}>
@ -203,38 +211,22 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
);
})
}
<div className="metal-type">
{
this.pars2.map(([t, k]) =>
{
return (
<Label className={Classes.INLINE} key={k}>
<span>{t}</span>
<input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
</Label>
</>
);
})
}
{
!this.props.isTopline &&
<Label className={Classes.INLINE}>
<span>数量</span>
<ToasterInput
type={CheckObjectType.None}
option={option}
optKey="count"
/>
</Label>
}
</div>
};
private MetalParam = () =>
{
this.props.store.Entity && !this.props.isTopline &&
<div className="metal-type">
const { option } = this.props.store;
const pars2 = [["型号:", "model"], ["厂家:", "factory"], ["品牌:", "brand"], ["规格:", "spec"]];
return (
<div className="metal-param">
{
this.pars3.map(([t, k]) =>
pars2.map(([t, k]) =>
{
return (
<Label className={Classes.INLINE} key={k}>
<Label className={`metal-label ${Classes.INLINE}`} key={k}>
<span>{t}</span>
<input tabIndex={1} type="text" className={Classes.INPUT} value={option[k]} onChange={e => option[k] = e.target.value} />
</Label>
@ -242,9 +234,16 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
})
}
</div>
}
);
};
private EntityInfo = () =>
{
this.props.store.Entity &&
const { otherOptions, Entity } = this.props.store;
return (
<>
{
Entity &&
<div className="center">
<span>实体长:{this.size.x.toFixed(2)}</span>
<span>实体宽:{this.size.y.toFixed(2)}</span>
@ -270,6 +269,90 @@ export class CommonMetalPanel extends React.Component<ICommonMetalPanelProps> {
})
}
</ul>
</>
);
};
render()
{
const { store, isTopline } = this.props;
const { option, Entity } = store;
const isRightMetalPanel = !Entity;
const metalTypeFields = isRightMetalPanel ? [["实体名:", "name"], ["单位:", "unit"]] : [["单位:", "unit"], ["实体名:", "name"], ["备注:", "comments"]];
const materialAndColor = [["材质:", EBoardKeyList.Mat], ["颜色:", "color"]];
return (
<div className={`common-matal_${isTopline ? 1 : isRightMetalPanel ? 2 : 3}`}>
{this.RoomAndCabinetName()}
<div className="metal-param_name">
{
metalTypeFields.map(([t, k]) => (
<Label className={`metal-label ${Classes.INLINE}`} key={k}>
<span>{t}</span>
<input
tabIndex={1}
type="text"
className={Classes.INPUT}
value={option[k]}
onChange={(e) => (option[k] = e.target.value)}
/>
</Label>
))
}
</div>
{
isTopline && (
<div className="metal-param">
<Label className="metal-label">
<span>旋转轮廓角度:</span>
<input
tabIndex={1}
style={{ width: "50%", marginTop: 0 }}
className={Classes.INPUT}
value={store.rotation}
onChange={(e) => (store.rotation = e.target.value)}
/>
</Label>
{[["每段加长:", "addLen"]].map(([t, k]) => (
<Label className="metal-label" key={k}>
<span>{t}</span>
<input
tabIndex={1}
style={{ width: "50%", marginTop: 0 }}
className={Classes.INPUT}
value={option[k]}
onChange={(e) => (option[k] = e.target.value)}
/>
</Label>
))}
</div>
)
}
{this.ProcessingGroupAndPrice()}
{this.MetalParam()}
{!isTopline && <Label className={`metal-label_count ${Classes.INLINE}`}>
<span>数量:</span>
<ToasterInput type={CheckObjectType.None} option={option} optKey="count" />
</Label>}
{!isTopline && !isRightMetalPanel && (
<div className="metal-param">
{
materialAndColor.map(([t, k]) => (
<Label className={`metal-label ${Classes.INLINE}`} key={k}>
<span>{t}</span>
<input
tabIndex={1}
type="text"
className={Classes.INPUT}
value={option[k]}
onChange={(e) => (option[k] = e.target.value)}
/>
</Label>
))
}
</div>
)}
{this.EntityInfo()}
</div>
);
}

2
src/UI/Components/RightPanel/CompositeMetalsPanel.tsx
Unescape View File

@ -40,7 +40,7 @@ export class CompositeMatalPanel extends React.Component<ICompositeMatalPanelPan
<>
<div className="metals">
<div>
<Label className={Classes.INLINE}>
<Label className={`metal-type ${Classes.INLINE}`}>
<span>类型</span>
<HTMLSelect
value={option.type}

113
src/UI/Components/RightPanel/RightPanel.less
Unescape View File

@ -341,6 +341,11 @@
#RightPanel,
#modal {
.bp3-label {
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
.metal-root {
.cf-select {
width: calc(100% + 20px);
@ -372,7 +377,20 @@
}
}
.common-matal {
.metal-type {
width: 45%;
display: flex;
justify-content: space-between;
&>:nth-child(2) {
width: 70%;
}
}
.common-matal_1,
.common-matal_2,
.common-matal_3
{
&>label {
display: flex;
align-items: center;
@ -426,41 +444,106 @@
}
}
}
.room-cabinet-name{
display: flex;
&>:first-child {
width: 45%;
.bp3-label{
display: flex;
span {
flex:1
}
input {
margin: 0;
width: 70%;
}
}
}
& .metal-type {
button {
margin-left: 2px;
width: 30px;
height: 42px;
}
}
.metal-param,
.metal-param_name
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
&>label {
.metal-label {
width: 45%;
display: flex;
align-items: center;
&>span:first-child {
flex: 1;
white-space: nowrap;
span {
flex:1
}
&>span:last-child:not(.bp3-control-indicator) {
width: 70%;
input {
margin: 0;
width: 70%;
}
}
}
input,
span {
width: 100%;
margin: 0;
.common-matal_2 {
.room-cabinet-name {
&>:first-child {
width: 70%;
}
button {
height: 45px;
}
}
&>input:not([type="checkbox"]) {
.metal-param_name {
display: flex;
flex-direction: column;
.metal-label {
width: 70%;
}
}
.metal-label_count {
display: flex;
justify-content: space-between;
width: 45%;
.bp3-popover-wrapper {
line-height: 20px;
width: 70%;
input {
width: 100%;
margin: 0;
}
}
}
}
.common-matal_3{
.metal-label_count {
display: flex;
justify-content: space-between;
width: 45%;
.bp3-popover-wrapper {
width: 70%;
input {
margin: 0;
}
}
}
}
}

Write Preview
Loading…
Cancel
Save