Commit f5857191 authored by 李纪文's avatar 李纪文

fix: 组态增加表格组件

parent c8ee806a
......@@ -13,7 +13,15 @@ import TopRotatingTool from './js/RotatingTool';
import BarLink from './js/BarLink';
import WaterFlowControlView from './js/WaterFlowControlView';
import { getSketchPadList, getSketchPadContent, getPointAddress, getHistoryInfo } from './apis';
import { deepCopy, hexToRgba, textStyle, querySkipUrl, isJson, stationData } from './js/utils';
import {
deepCopy,
hexToRgba,
textStyle,
querySkipUrl,
isJson,
stationData,
isNumber,
} from './js/utils';
import './index.less';
const goJS = go.GraphObject.make;
......@@ -287,7 +295,7 @@ const ConfigurationView = (props) => {
break;
}
} catch (err) {
console.log(err);
// console.log(err);
}
};
......@@ -311,7 +319,7 @@ const ConfigurationView = (props) => {
break;
}
} catch (err) {
console.log(err);
// console.log(err);
}
};
......@@ -1023,6 +1031,121 @@ const ConfigurationView = (props) => {
),
);
// 表格节点定义
myDiagram.nodeTemplateMap.add(
'tableCase',
goJS(
go.Node,
'Auto',
{ locationSpot: go.Spot.Center, zOrder: 1 },
new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('angle').makeTwoWay(),
goJS(
go.Shape,
{
fill: 'white',
strokeWidth: 1,
stroke: '#808080',
},
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
),
goJS(
go.Panel,
'Table',
{
padding: 0,
defaultRowSeparatorStroke: '#808080',
defaultColumnSeparatorStroke: '#808080',
defaultRowSeparatorStrokeWidth: 1,
defaultColumnSeparatorStrokeWidth: 1,
background: '#ffffff',
// defaultSeparatorPadding: new go.Margin(18, 0, 8, 0),
},
new go.Binding('background', 'fillColor').makeTwoWay(),
new go.Binding('defaultRowSeparatorStroke', 'stroke').makeTwoWay(),
new go.Binding('defaultRowSeparatorStrokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('defaultColumnSeparatorStroke', 'stroke').makeTwoWay(),
new go.Binding('defaultColumnSeparatorStrokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('itemArray', 'content').makeTwoWay(),
{
// 表内容
defaultAlignment: go.Spot.Left,
itemTemplate: goJS(
go.Panel,
'TableRow',
new go.Binding('itemArray', 'columns').makeTwoWay(),
{
itemTemplate: goJS(
go.Panel, // each of which as "attr" and "text" properties
'Spot',
{ background: 'transparent', alignment: go.Spot.Center },
new go.Binding('column').makeTwoWay(),
new go.Binding('columnSpan', 'cSpan').makeTwoWay(),
new go.Binding('rowSpan', 'rSpan').makeTwoWay(),
new go.Binding('padding', 'padding', function (v) {
if (v && isNumber(v)) return v;
const padding = v ? v.split(',') : null;
return padding
? new go.Margin(
padding[0] * 1 || 0,
padding[1] * 1 || 0,
padding[2] * 1 || 0,
padding[3] * 1 || 0,
)
: 0;
}).makeTwoWay(),
goJS(
go.Shape,
'RoundedRectanglePlus',
{
name: 'SHAPE',
fill: 'transparent',
stroke: '#ffffff',
strokeWidth: 0,
parameter1: 0,
},
new go.Binding('fill', 'background').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
),
goJS(
go.TextBlock,
textStyle(),
{ editable: true },
{
// margin: new go.Margin(2, 10, 10, 2),
wrap: go.TextBlock.WrapFit,
textAlign: 'center',
font: 'bold 12px Helvetica, Arial, sans-serif',
stroke: '#454545',
},
new go.Binding('text').makeTwoWay(),
new go.Binding('font', 'style').makeTwoWay(),
new go.Binding('stroke', 'color').makeTwoWay(),
new go.Binding('textAlign', 'align').makeTwoWay(),
// new go.Binding('textSize', 'width', function(v) {
// return new go.Size(v, NaN);
// }),
new go.Binding('maxSize', 'width', function (v) {
return new go.Size(v, NaN);
}).makeTwoWay(),
new go.Binding('minSize', 'width', function (v) {
return new go.Size(v, NaN);
}).makeTwoWay(),
),
),
},
),
},
),
),
);
// img节点定义
myDiagram.nodeTemplateMap.add(
'imgCase',
......
......@@ -1538,6 +1538,121 @@ const ConfigurationView = (props) => {
),
);
// 表格节点定义
myDiagram.nodeTemplateMap.add(
'tableCase',
goJS(
go.Node,
'Auto',
{ locationSpot: go.Spot.Center, zOrder: 1 },
new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('angle').makeTwoWay(),
goJS(
go.Shape,
{
fill: 'white',
strokeWidth: 1,
stroke: '#808080',
},
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
),
goJS(
go.Panel,
'Table',
{
padding: 0,
defaultRowSeparatorStroke: '#808080',
defaultColumnSeparatorStroke: '#808080',
defaultRowSeparatorStrokeWidth: 1,
defaultColumnSeparatorStrokeWidth: 1,
background: '#ffffff',
// defaultSeparatorPadding: new go.Margin(18, 0, 8, 0),
},
new go.Binding('background', 'fillColor').makeTwoWay(),
new go.Binding('defaultRowSeparatorStroke', 'stroke').makeTwoWay(),
new go.Binding('defaultRowSeparatorStrokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('defaultColumnSeparatorStroke', 'stroke').makeTwoWay(),
new go.Binding('defaultColumnSeparatorStrokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('itemArray', 'content').makeTwoWay(),
{
// 表内容
defaultAlignment: go.Spot.Left,
itemTemplate: goJS(
go.Panel,
'TableRow',
new go.Binding('itemArray', 'columns').makeTwoWay(),
{
itemTemplate: goJS(
go.Panel, // each of which as "attr" and "text" properties
'Spot',
{ background: 'transparent', alignment: go.Spot.Center },
new go.Binding('column').makeTwoWay(),
new go.Binding('columnSpan', 'cSpan').makeTwoWay(),
new go.Binding('rowSpan', 'rSpan').makeTwoWay(),
new go.Binding('padding', 'padding', function (v) {
if (v && isNumber(v)) return v;
const padding = v ? v.split(',') : null;
return padding
? new go.Margin(
padding[0] * 1 || 0,
padding[1] * 1 || 0,
padding[2] * 1 || 0,
padding[3] * 1 || 0,
)
: 0;
}).makeTwoWay(),
goJS(
go.Shape,
'RoundedRectanglePlus',
{
name: 'SHAPE',
fill: 'transparent',
stroke: '#ffffff',
strokeWidth: 0,
parameter1: 0,
},
new go.Binding('fill', 'background').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
),
goJS(
go.TextBlock,
textStyle(),
{ editable: true },
{
// margin: new go.Margin(2, 10, 10, 2),
wrap: go.TextBlock.WrapFit,
textAlign: 'center',
font: 'bold 12px Helvetica, Arial, sans-serif',
stroke: '#454545',
},
new go.Binding('text').makeTwoWay(),
new go.Binding('font', 'style').makeTwoWay(),
new go.Binding('stroke', 'color').makeTwoWay(),
new go.Binding('textAlign', 'align').makeTwoWay(),
// new go.Binding('textSize', 'width', function(v) {
// return new go.Size(v, NaN);
// }),
new go.Binding('maxSize', 'width', function (v) {
return new go.Size(v, NaN);
}).makeTwoWay(),
new go.Binding('minSize', 'width', function (v) {
return new go.Size(v, NaN);
}).makeTwoWay(),
),
),
},
),
},
),
),
);
// img节点定义
myDiagram.nodeTemplateMap.add(
'imgCase',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment