!731 bbs显示性能优化

pull/731/MERGE
肖诗雅 5 years ago committed by ChenX
parent 7d62a192aa
commit 36ee406bad

@ -75,6 +75,8 @@
},
"dependencies": {
"@blueprintjs/core": "^3.23.1",
"@types/react-virtualized-auto-sizer": "^1.0.0",
"@types/react-window": "^1.8.1",
"detect-browser": "^4.8.0",
"dxf-parser": "^1.0.0-alpha.1",
"golden-layout": "^1.5.9",
@ -88,6 +90,8 @@
"react-color": "^2.18.0",
"react-dom": "^16.12.0",
"react-rnd2": "^1.0.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"stats.js": "^0.17.0",
"three": "^0.113.2",
"xaop": "^1.3.3"

@ -107,9 +107,8 @@ class LookOverBoardInfosTool
if (b.LayerNails.length > 0)
for (let objId of b.LayerNails)
{
let nail = objId.Object as CylinderHole;
if (!nail.IsErase)
addDrillToMap("层板钉", nail);
if (!objId?.IsErase)
addDrillToMap("层板钉", objId.Object as CylinderHole);
}
//分析五金

@ -1,25 +1,29 @@
import React = require("react");
import { HTMLSelect, Icon, Alert, Tag } from "@blueprintjs/core";
import { Alert, HTMLSelect, Icon, Tag } from "@blueprintjs/core";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { end } from "xaop";
import { EBoardKeyList } from "../../../Common/BoardKeyList";
import { CheckObjectType } from "../../../Common/CheckoutVaildValue";
import { safeEval } from "../../../Common/eval";
import { FixedNotZero } from "../../../Common/Utils";
import { Board } from "../../../DatabaseServices/Entity/Board";
import { LinesType, IBaseOption } from "../../Store/BoardInterface";
import { ToasterInput } from "../Toaster";
import { observable } from "mobx";
import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord";
import { ObjectId } from "../../../DatabaseServices/ObjectId";
import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord";
import { IBaseOption, LinesType } from "../../Store/BoardInterface";
import { ToasterInput } from "../Toaster";
import { ListItemSelectEventEmitter } from "./LookOverBoardInfos";
export interface IBoardInfoListProps
{
className: string;
index: number;
br: Board;
UpdateSeletctedBr: Function;
ModifyDataRecord: Function;
isSelected: boolean;
processGroupData: Map<string, ObjectId[]>;
style: React.CSSProperties;
isSelect: boolean;
}
export interface IBoardInfoOptions extends IBaseOption
{
@ -45,26 +49,42 @@ interface ITagData
index: number;
pg: ProcessingGroupRecord;
}
/**
*
* @export
* @class BoardInfoList
*/
@observer
export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardInfoOptions>
{
trRef;
@observable private tags: Set<ITagData> = new Set();
private showAlert = observable.box(false);
private removepg: ProcessingGroupRecord[] = [];
trRef: HTMLDivElement;
@observable isSelected: boolean = false;
private removeFuncs: Function[] = [];
constructor(props)
{
super(props);
this.InitState(this.props.br);
}
UNSAFE_componentWillReceiveProps(nextProps)
componentDidMount()
{
this.isSelected = this.props.isSelect;
this.ToggleBgColor();
this.removeFuncs.push(
end(ListItemSelectEventEmitter, ListItemSelectEventEmitter.SingerSelectItemEvent, (msg: boolean) => this.isSelected = false)
);
}
componentWillUnmount()
{
for (let f of this.removeFuncs)
f();
this.removeFuncs.length = 0;
}
UNSAFE_componentWillReceiveProps(nextProps: IBoardInfoListProps)
{
if (nextProps.br)
this.InitState(nextProps.br);
}
UNSAFE_componentWillMount()
@ -94,12 +114,13 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
HandleOnClick = (findSameTypeBrDataKey?: string) =>
{
const { index, UpdateSeletctedBr } = this.props;
this.ToggleBgColor();
UpdateSeletctedBr(index, findSameTypeBrDataKey);
this.isSelected = !this.isSelected;
};
private ToggleBgColor = () =>
ToggleBgColor = () =>
{
this.trRef.style.background === "rgb(206, 217, 224)" ? this.trRef.style.background = "#fff" : this.trRef.style.background = "#CED9E0";
if (this.trRef)
this.trRef.style.background = this.isSelected ? "#CED9E0" : "#fff";
};
private updateTags = () =>
{
@ -132,10 +153,16 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
};
public render()
{
const { index, br, ModifyDataRecord, isSelected } = this.props;
const { index, br, ModifyDataRecord } = this.props;
return (
<tr ref={el => this.trRef = el} style={{ background: `${isSelected ? "#CED9E0" : "#fff"}` }} >
<td>
<div
className="bbs-list-tr"
ref={el => this.trRef = el}
style={{
...this.props.style, width: "fit-content", background: `${this.isSelected ? "#CED9E0" : "#fff"}`
}} >
<div className="bbs-list-td bbs-td">{index + 1}</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.RoomName}
@ -145,8 +172,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.RoomName); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.RoomName, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.CabinetName}
@ -156,8 +183,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.CabinetName); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.CabinetName, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={"brName"}
@ -167,9 +194,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick("brName"); }}
onBlur={(e) => { ModifyDataRecord(index, br, "brName", e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.Height}
@ -179,8 +205,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.Height); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Height, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.Width}
@ -190,8 +216,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.Width); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Width, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.Thick}
@ -201,9 +227,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.Thick); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Thick, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<HTMLSelect
value={this.state.lines}
options={
@ -222,7 +247,7 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
},
]
}
onClick={() => { this.ToggleBgColor(); }}
onClick={() => this.ToggleBgColor()}
onChange={e =>
{
this.setState({ [EBoardKeyList.Lines]: safeEval(e.target.value) });
@ -232,8 +257,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
// 如果把HandleOnClick方法放在onChange或onClick则会导致label不切换
onFocus={() => { this.HandleOnClick(EBoardKeyList.Lines); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<input
className="bp3-input"//加工 数据关联待完善
onClick={() => { this.HandleOnClick(); }}
@ -274,17 +299,17 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
</div>
{/* todo添加加工组 */}
</Alert>
</td>
</div>
{
br.IsSpecialShape ?
<td colSpan={4} style={{ minWidth: 246 }}>
<div className="bbs-list-td bbs-td" style={{ minWidth: 246 }}>
<input className="bp3-input bp3-minimal" style={{ width: "100%", textAlign: "center" }} value="异形板件请查看高级封边" contentEditable={false}
onClick={() => { this.HandleOnClick(EBoardKeyList.UpSealed); }}
/>
</td>
</div>
:
<>
<td>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.UpSealed}
@ -294,8 +319,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.UpSealed); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.UpSealed, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.DownSealed}
@ -305,8 +330,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.DownSealed); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.DownSealed, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.LeftSealed}
@ -316,8 +341,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.LeftSealed); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.LeftSealed, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.RightSealed}
@ -327,11 +352,11 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.RightSealed); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.RightSealed, e.target.value); }}
/>
</td>
</div>
</>
}
<td>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={"boardName"}
@ -341,8 +366,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick("boardName"); }}
onBlur={(e) => { ModifyDataRecord(index, br, "boardName", e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.Mat}
@ -352,8 +377,8 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.Mat); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Mat, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<ToasterInput
type={CheckObjectType.BBS}
optKey={EBoardKeyList.Color}
@ -363,14 +388,14 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, IBoardIn
onClick={() => { this.HandleOnClick(EBoardKeyList.Color); }}
onBlur={(e) => { ModifyDataRecord(index, br, EBoardKeyList.Color, e.target.value); }}
/>
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<Icon icon={br.IsSpecialShape ? "tick" : "blank"} />
</td>
<td>
</div>
<div className="bbs-list-td bbs-td">
<Icon icon={br.BoardModeling.length > 0 ? "tick" : "blank"} />
</td>
</tr>
</div>
</div>
);
}
}

@ -1,36 +1,38 @@
import React = require("react");
import { Button, Card, Classes, Icon, InputGroup, Intent, Divider, IconName } from "@blueprintjs/core";
import { Button, Card, Classes, Divider, IconName, InputGroup, Intent } from "@blueprintjs/core";
import { observable } from "mobx";
import { observer } from "mobx-react";
import AutoSizer from 'react-virtualized-auto-sizer';
import { VariableSizeList as List } from 'react-window';
import { begin, end } from "xaop";
import { DrillingReactor } from "../../../Add-on/DrawDrilling/DrillingReactor";
import { DrillTypeCount, lookOverBoardInfosTool } from "../../../Add-on/LookOverBoardInfos/LookOverBoardInfosTool";
import { app } from "../../../ApplicationServices/Application";
import { arrayRemove } from "../../../Common/ArrayExt";
import { EBoardKeyList } from "../../../Common/BoardKeyList";
import { CheckObjectType, CheckoutValid } from "../../../Common/CheckoutVaildValue";
import { safeEval } from "../../../Common/eval";
import { FileSystem } from "../../../Common/FileSystem";
import { KeyBoard } from "../../../Common/KeyEnum";
import { FixedNotZero } from "../../../Common/Utils";
import { CylinderHole } from "../../../DatabaseServices/3DSolid/CylinderHole";
import { CommandHistoryRecord } from "../../../DatabaseServices/CommandHistoryRecord";
import { CreateObjectData } from "../../../DatabaseServices/CreateObjectData";
import { Board } from "../../../DatabaseServices/Entity/Board";
import { FileServer } from "../../../DatabaseServices/FileServer";
import { ObjectId } from "../../../DatabaseServices/ObjectId";
import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord";
import { SelectSetBase } from "../../../Editor/SelectBase";
import { equaln } from "../../../Geometry/GeUtils";
import { IMetalsType } from "../../../Production/Product";
import { EFindType } from "../../Store/BoardFindInterface";
import { ComposingType, FaceDirection, LinesType } from "../../Store/BoardInterface";
import { LinesType } from "../../Store/BoardInterface";
import { ModalFooter, ModalHeader } from "../Modal/ModalContainer";
import { ModalState } from "../Modal/ModalsManage";
import { AppToaster } from "../Toaster";
import { BoardInfoList, IBoardInfoOptions } from "./BoardInfosList";
import { DrillingReactor } from "../../../Add-on/DrawDrilling/DrillingReactor";
import { CommandHistoryRecord } from "../../../DatabaseServices/CommandHistoryRecord";
import { CreateObjectData } from "../../../DatabaseServices/CreateObjectData";
import { CylinderHole } from "../../../DatabaseServices/3DSolid/CylinderHole";
import { DrillTypeCount, lookOverBoardInfosTool } from "../../../Add-on/LookOverBoardInfos/LookOverBoardInfosTool";
import { ModalHeader, ModalFooter } from "../Modal/ModalContainer";
import { IMetalsType } from "../../../Production/Product";
import { HardwareCompositeEntity } from './../../../DatabaseServices/Hardware/HardwareCompositeEntity';
import { HardwareTopline } from './../../../DatabaseServices/Hardware/HardwareTopline';
import { arrayRemove } from "../../../Common/ArrayExt";
import { ObjectId } from "../../../DatabaseServices/ObjectId";
import { ProcessingGroupRecord } from "../../../DatabaseServices/ProcessingGroup/ProcessingGroupRecord";
import { BoardInfoList, IBoardInfoOptions } from "./BoardInfosList";
interface BoradDataInArray
{
@ -46,10 +48,26 @@ interface LookOverBoardInfosModalProps
{
boardList: (Board | IMetalsType)[];
}
interface SortBtnData
{
text: string;
icon: IconName;
}
//列表选中时发出的事件
class ListItemSelectEvent
{
//选中单个列表事件,事件发出后,其他的item取消选中
SingerSelectItemEvent()
{
}
}
export const ListItemSelectEventEmitter = new ListItemSelectEvent;
/**
*
* @export
* @class LookOverBoardInfosModal
* (bbs)
*/
@observer
export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosModalProps, {}>
@ -70,14 +88,18 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
//需要修改的数据
modifyBoardData: Map<Board, IBoardInfoOptions> = new Map();
//列表中被选中的板件
@observable selectedBrOnList: Board[] = [];
selectedBrOnList: Board[] = [];
//查看同类板件的依据(如宽高、房间名等)
@observable findSameTypeBrDataKey: string;
//是否多选/单选
@observable isCtrlDown: boolean = false;
titleData = ["房名", "柜名", " 板件名", " 高", " 宽", " 厚", " 纹路", " 加工", "上封边", "下封边", "左封边", "右封边", " 板材名", "材料", "颜色", "异形", "造型"];
processGroupMap: Map<string, ObjectId[]> = new Map();//板件加工组 按名分类 便于区分
//可排序标题按钮的数据
@observable sortBtnData: SortBtnData[] = [ //tips:注意空格
{ text: " 高", icon: "blank" },
{ text: " 宽", icon: "blank" },
{ text: " 厚", icon: "blank" },
];
UNSAFE_componentWillMount()
{
this.UpdateDrillCount();
@ -127,10 +149,18 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
m.sort((a, b) => a.Index - b.Index);
}
}
InitWidth = () =>
{
let modal = document.getElementById("modal");
let modalc0 = modal.children[0] as HTMLElement;
modal.style.width = Math.min(1160, (window.innerWidth * 0.8)) + "px";
modalc0.style.width = modal.style.width;
};
//注册事件
componentDidMount()
{
let ed = app.Editor;
this.InitWidth();
let selectCtrl = app.Editor.SelectCtrl;
let dr = new DrillingReactor();
const UpdateByRedoUndo = (historyRec: CommandHistoryRecord) =>
@ -190,10 +220,12 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
e.stopPropagation();
return true;
}),
end(ed.KeyCtrl, ed.KeyCtrl.OnKeyUp, (e: KeyboardEvent) =>
begin(app.Editor.ModalManage, app.Editor.ModalManage.onKeyUp, (e: KeyboardEvent) =>
{
if (e.keyCode === KeyBoard.Control)
this.isCtrlDown = false;
e.stopPropagation();
return true;
}),
end(dr, dr.StartReactor, () =>
{
@ -287,7 +319,7 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
);
this.boardDataInArray.push({ br: b, arr: arr });
}
this.boardDataInArray.unshift({ br: null, arr: this.titleData });
this.boardDataInArray.unshift({ br: null, arr: TitleBanner.titleData });
};
//获取板的加工组名(加序号的) 在导出csv时使用
GetBrPGNamesWithNumber = (br: Board) =>
@ -365,13 +397,16 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
UpdateSeletctedBr = (index: number, findSameTypeBrDataKey?: string) =>
{
let br = this.dataList.realBr[index];
if (this.isCtrlDown)
{
if (this.selectedBrOnList.includes(br))
this.selectedBrOnList = this.selectedBrOnList.filter((b) => b !== br);
else
{
if (this.isCtrlDown)//true多选 false单选
this.selectedBrOnList.push(br);
}
else
{
ListItemSelectEventEmitter.SingerSelectItemEvent();
this.selectedBrOnList = [br];
}
@ -575,9 +610,19 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
FileSystem.WriteFile(`${fileServer.currentFileInfo.name}批量查看板件属性.csv`, "\ufeff" + str);
};
//排序
handleOrder = (type: string, asc: boolean) =>
handleOrder = (btnText: string) =>
{
let d: SortBtnData;
let asc: boolean = false;
for (let data of this.sortBtnData)
{
switch (type)
if (data.text === btnText)
{
asc = data.icon === "symbol-triangle-up";
d = data;
}
}
switch (btnText)
{
case " 高":
this.UpdateDisplayData(this.searchRes.realBr.sort((a, b) => { return asc ? a.Height - b.Height : b.Height - a.Height; }));
@ -588,13 +633,20 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
case " 厚":
this.UpdateDisplayData(this.searchRes.realBr.sort((a, b) => { return asc ? a.Thickness - b.Thickness : b.Thickness - a.Thickness; }));
break;
default:
break;
}
//改变图标
if (d.icon === "blank")
d.icon = "symbol-triangle-up";
else
d.icon = d.icon === "symbol-triangle-up" ? "symbol-triangle-down" : "symbol-triangle-up";
};
//------------------------------对话框功能相关 结束------------------------------//
render()
{
const keyword = [" 高", " 宽", " 厚"];//tips:注意空格
const listItemHeight = 23;
return (
<>
<div
@ -607,50 +659,66 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
icon="bold"
close={() => { this.OnOk(ModalState.Cancel); }}
/>
<div className={Classes.DIALOG_BODY + " flex " + Classes.CARD}>
<div className={Classes.DIALOG_BODY + " flex " + Classes.CARD} style={{ height: 400, width: "100%" }}>
{/* 列表 */}
<Card>
{/* 列表标题 */}
<div>
<table>
<thead>
<tr>{this.titleData.map((data) =>
{
return (<th>
<AutoSizer>
{
keyword.includes(data) ?
<TitleSortButton text={data} func={this.handleOrder} />
:
<>{data}</>
}
</th>);
})}</tr>
</thead>
</table>
</div>
<table>
<tbody>
({ height, width }) => (
<>
<div
style={{ height: height * 0.85, width: width }}
onScroll={() =>
{
this.searchRes.dataBr.map((br, index) =>
let a = document.getElementsByClassName("bbs-list")[0].scrollLeft;
let b = document.getElementsByClassName("bbs-list-tr title")[0] as HTMLDivElement;
b.style.left = (-a) + "px";
}}
>
<TitleBanner sortBtnData={this.sortBtnData} handleOrder={this.handleOrder} style={{ height: listItemHeight }} />
<AutoSizer>
{
({ height, width }) => (
<List
height={height - listItemHeight}
className="bbs-list"
width={width}
itemCount={this.searchRes.dataBr.length}
itemSize={() => listItemHeight}
>
{
return (
({ index, style }) => (
<BoardInfoList
className="bbs-tr"
index={index}
br={br}
br={this.searchRes.dataBr[index]}
isSelect={this.selectedBrOnList.includes(this.searchRes.realBr[index])}
UpdateSeletctedBr={this.UpdateSeletctedBr}
ModifyDataRecord={this.ModifyDataMap}
isSelected={this.selectedBrOnList.includes(this.searchRes.realBr[index])}
style={style}
processGroupData={this.processGroupMap}
/>
);
})
)
}
</tbody>
</table>
</List>
)
}
</AutoSizer>
</div>
<Divider style={{ height: 1, width: width * 0.99 }} />
{/* 配件信息 */}
{
<div style={{ height: height * 0.15 - 1, width: width, overflow: "auto", paddingLeft: 10 }} >
{/* 配件信息 */}
<PartsTable partsCount={this.drillCount} titles={["配件拆单名", "数量", "单位"]} />
<PartsTable partsCount={this.hardwareCount} titles={["五金名", "数量", "单位"]} />
</div>
}
</>
)
}
</AutoSizer>
</Card>
</div>
<ModalFooter hasConfig={false}>
@ -701,22 +769,40 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
);
}
}
@observer
class TitleSortButton extends React.Component<{ text: string, func: Function; }, {}>
class TitleBanner extends React.Component<{ sortBtnData: SortBtnData[], style: any, handleOrder: Function; }, {}>
{
@observable icon: IconName = "blank";
handleClick = () =>
static titleData = ["序号", "房名", "柜名", " 板件名", " 高", " 宽", " 厚", " 纹路", " 加工", "上封边", "下封边", "左封边", "右封边", " 板材名", "材料", "颜色", "异形", "造型"];
render()
{
if (this.icon === "blank")
this.icon = "symbol-triangle-up";
else
this.icon = this.icon === "symbol-triangle-up" ? "symbol-triangle-down" : "symbol-triangle-up";
this.props.func(this.props.text, this.icon === "symbol-triangle-up");
};
return (
<div className="bbs-list-tr title" style={{ ...this.props.style, width: "fit-content", position: "relative" }}>
{
TitleBanner.titleData.map((data) =>
<div className="bbs-list-th bbs-td">
{
this.props.sortBtnData.findIndex((d) => d.text === data) === -1 ?
<>{data}</>
:
<TitleSortButton
sortBtnData={this.props.sortBtnData[this.props.sortBtnData.findIndex((d) => d.text === data)]}
func={this.props.handleOrder}
/>
}
</div>
)}
</div>
);
}
}
class TitleSortButton extends React.Component<{ sortBtnData: SortBtnData, func: Function; }, {}>
{
render()
{
return (
<Button className={"sort-btn"} text={this.props.text} small minimal rightIcon={this.icon} onClick={() => this.handleClick()} />
<Button className={"sort-btn"} text={this.props.sortBtnData.text} small minimal rightIcon={this.props.sortBtnData.icon} onClick={() => this.props.func(this.props.sortBtnData.text)} />
);
}
}
@ -734,21 +820,18 @@ class PartsTable extends React.Component<IPartsTableProps, {}>
{
const { partsCount } = this.props;
if (!partsCount?.length)
if (!partsCount)
return null;
return (
<>
<Divider />
<div>
<table><thead><tr>
<table>
<thead><tr>
{
this.props.titles.map(s => <th>{s}</th>)
}
</tr></thead></table>
</div>
<table>
</tr></thead>
<tbody>
{
partsCount.length > 0 ?
partsCount.map((data) =>
{
return (
@ -758,11 +841,15 @@ class PartsTable extends React.Component<IPartsTableProps, {}>
<td>{``}</td>
</tr>
);
})
}) :
<tr>
<td>{"[ 无 ]"}</td>
<td>{0}</td>
<td>{``}</td>
</tr>
}
</tbody>
</table>
</>
);
}
}

@ -41,22 +41,61 @@
overflow: auto;
.bp3-card{
width: 100%;
overflow: auto;
overflow: hidden;
padding-top: 5px;
height: 100%;
padding-right: 0px;
padding-left: 0px;
}
}
}
.bbs-list,.bbs-list *{
margin: 0 auto;
padding: 0;
font-size: 14px;
}
.bbs-list{
// display: table;
width: 100%;
border-collapse: collapse;
}
.bbs-list-tr{
// display: table-row;
padding-left: 5px;
>span{
width: 25px;
text-align: center;
}
display: flex;
flex-wrap: nowrap;
}
.bbs-list-th{
display: table-cell;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.bbs-list-td{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.bbs-td{
line-height: 22px;
height: 22px;
min-width: 62px;
&:nth-child(1){
min-width: 40px;
}
&:nth-child(8){
min-width: 73px;
}
table {
border-spacing: unset;
th{
min-width:62px;//fixed width
.sort-btn{
height: 18px !important;
padding: 0 !important;
font-weight: bold;
width: 100%;
font-size: 8px;
display: -webkit-inline-box;
.bp3-button-text{
margin: 0;
@ -66,24 +105,4 @@
height: 12px;
}
}
}
th:nth-child(7){
width: 71px;
}
th:nth-child(16),th:nth-child(17){
width: 32px;
}
.bp3-dialog-body{
height: 100%;
overflow: auto;
}
tbody{
tr{
td{
min-width: 62px;
text-align: center;
}
}
}
}
}

@ -72,6 +72,7 @@ export class ModalManage
{
// this.m_ModalContainer.addEventListener('dragstart', e => e.preventDefault());
this.m_ModalContainer.addEventListener('keydown', e => this.OnKeyDown(e));
this.m_ModalContainer.addEventListener('keyup', e => this.onKeyUp(e));
this.m_ModalContainer.addEventListener('focus', () =>
{
app.Editor.MaskManage.ShowMask();
@ -156,6 +157,9 @@ export class ModalManage
}
e.stopPropagation();
}
onKeyUp(e: KeyboardEvent)
{
}
RenderModeless(Component: any, pos: ModalPosition, props?: any, resizable = false, isMinimize = true)
{
this.m_IsModal = false;

Loading…
Cancel
Save