组件版设计器结合jsLPSolver实现规划求解 - part2

收藏

本帖最后由 Lynn.Dou 于 2021-8-30 13:54 编辑

接上文：组件版设计器结合jsLPSolver实现规划求解 - part1
本篇文章主要介绍以下两部分：
1、如何在组件版设计器中自定义工具栏按钮：规划求解
2、如何实现点击按钮后出现的规划求解弹窗

1、自定义工具栏按钮
实现思路是修改designer的config结构，这里我们新增加一个ribbon，并在ribbon中添加一个button。
（大家可以根据自己的需要设置规划求解按钮的位置）
代码如下：

//excelSolver方法（点击按钮后执行的操作）
function excelSolver(context) {
}
//新增操作选项卡
const operateRibbon = {
id: "operate",
text: "操作",
buttonGroups: []
};
//定义点击规划求解按钮时对应的命令
const operateCommands = {
solver: {
title: "规划求解",
commandName: "solver",
execute: async (context) => {
excelSolver(context);
},
iconClass: "ribbon-button-upload"
}
}
//新增规划求解按钮
const operateConfig = {
label: "规划求解",
thumbnailClass: "ribbon-thumbnail-spreadsettings",
commandGroup: {
children: [{
direction: "vertical",
commands: ["solver"]
}]
}
}
//在ribbon中加入自定义的命令和按钮
operateRibbon.buttonGroups.push(operateConfig);
// 导出 designerConfig
const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
//将命令注册到config的commandMap属性上
designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, operateCommands);
//将新增选项卡添加到designerConfig中
designerConfig.ribbon.push(operateRibbon);
//将designerConfig作为参数初始化designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);

复制代码

这样在工具栏就新建一个ribbon和按钮了。
如下图：
image.png909544067.png

2、定义点击按钮的弹窗
1) 在 excelSolver 方法中执行打开弹窗命令

function excelSolver(context) {
var option = {};
GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {
})
}

复制代码

2）定义弹窗结构

var CreateId = {
type: "FlexContainer",
margin: "10px",
children: [{
type: "FlexContainer",
children: [
{
type: "TextBlock",
text: "设置目标：",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "target1",
style: "width: 300px",
margin: "5px 15px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "target2",
style: "width: 300px",
margin: "5px 15px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "到",
margin: "5px"
},
{
type: "ColumnSet",
children: [{
type: "Radio",
bindingPath: "radioValue",
columnCount: 2,
margin: "5px",
items: [{
text: '最大值',
value: 'max'
},
{
text: '最小值',
value: 'min'
}
]
}]
}
]
},
{
type: "TextBlock",
text: "可变因素:",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "optimalQuantity1",
style: "width: 120px",
margin: "5px 15px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "person1",
style: "width: 120px",
margin: "5px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "cost1",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "optimalQuantity2",
style: "width: 120px",
margin: "5px 15px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "person2",
style: "width: 120px",
margin: "5px"
},
{
type: "RangeSelect",
needSheetName: false,
absoluteReference: true,
bindingPath: "cost2",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "TextBlock",
text: "约束条件：",
margin: "5px"
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总数量",
//bindingPath: "quantityAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare1",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "quantityNumber",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总人数",
//bindingPath: "personAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare2",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "personNumber",
style: "width: 120px",
margin: "5px"
}
]
},
{
type: "ColumnSet",
children: [
{
type: "TextBlock",
text: "总费用",
//bindingPath: "costAll",
style: "width: 50px",
margin: "5px 15px"
},
{
type: "ListComboEditor",
bindingPath: "compare3",
style: "width: 120px",
margin: "5px",
items: [
{
text: "<=",
value: "max"
},
{
text: ">=",
value: "min"
},
{
text: "=",
value: "equal"
}
]
},
{
type: "TextEditor",
bindingPath: "costNumber",
style: "width: 120px",
margin: "5px"
}
]
}
]
}
]
}

复制代码

//规划求解dialog
const richSheetTagTemplate = {
title: "规划求解",
content: [{
type: "TabControl",
width: 500,
height: 500,
bindingPath: "dialogOption",
children: [{
key: "solverTab",
text: "规划求解",
children: [
CreateId
]
}]
}]
}

复制代码

//注册模版
GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);

复制代码

此时点击规划求解按钮，弹出弹窗如下图：

image.png722136535.png

在下篇文章：
组件版设计器结合jsLPSolver实现规划求解 - part3
中我们将介绍如何将jsLPSolver与弹窗结合，实现规划求解。

（注：完整demo见part3）

		自动登录	找回密码
密码			立即注册

组件版设计器结合jsLPSolver实现规划求解 - part2

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人