diff --git a/src/iscs/shape/stateTable.js b/src/iscs/shape/stateTable.js
index a3d4f0e35..6f43cace9 100644
--- a/src/iscs/shape/stateTable.js
+++ b/src/iscs/shape/stateTable.js
@@ -3,6 +3,7 @@ import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line';
import Text from 'zrender/src/graphic/Text';
import Circle from 'zrender/src/graphic/shape/Circle';
+import { merge } from 'lodash';
const stateMap = {
slidingDoorEmergencyDoorOpenMalfunction : '滑动门&应急门开门故障',
slidingDoorEmergencyDoorCloseMalfunction: '滑动门&应急门关门故障',
@@ -166,80 +167,74 @@ export default class StateTable extends Group {
this.create();
}
create() {
- const model = this.model;
+ const model = this.model;
+ const sumWidth = model.columnWidthList.reduce((a,b) => {return a+b;})
+
+ this.rectsArr = [];
+ this.contextsArr = [];
this.grouper = new Group({
id: model.code,
position: [model.point.x, model.point.y]
- });
- this.lines = [];
- let columnWidth = 0;
- let rowNum = model.rowNum;
+ });
+
+ let rowNum = model.rowNum;
let contentIndex = 2;
if (model.headerType === 'none') {
rowNum = model.rowNum - 1;
- contentIndex = 1;
- }
- model.columnWidthList.forEach(item => {
- columnWidth += item;
- const line = new Line({
- zlevel: this.zlevel,
- z: this.z,
- shape: {
- x1: columnWidth,
- y1: model.headerType === 'merge' ? model.rowHeight : 0,
- x2: columnWidth,
- y2: rowNum * model.rowHeight
- },
- style: {
- stroke: model.borderColor || '#FFF',
- lineWidth: 2
- }
- });
- this.grouper.add(line);
- this.lines.push(line);
- });
- this.tabelBorder = new Rect({
- zlevel: this.zlevel,
- z: this.z,
- shape: {
- x: 0,
- y: 0,
- width: columnWidth,
- height: rowNum * model.rowHeight
- },
- style: {
- stroke: model.borderColor || '#aFFF',
- fill: 'rgba(255, 255, 255, 0)',
- lineWidth: 2
- }
- });
- this.grouper.add(this.tabelBorder);
- for (let i = 0; i < rowNum; i++) {
- const line = new Line({
- zlevel: this.zlevel,
- z: this.z,
- shape: {
- x1: 0,
- y1: i * model.rowHeight,
- x2: columnWidth,
- y2: i * model.rowHeight
- },
- style: {
- stroke: model.borderColor || '#FFF',
- lineWidth: 2
- }
- });
- this.grouper.add(line);
- this.lines.push(line);
- }
+ contentIndex = 1;
+ }
+
+ if (model.rowHeight||!model.rowHeightList) {
+ model.rowHeightList = new Array(model.rowNum).fill(model.rowHeight);
+ }
+
+ let sumRowSize = 0;
+ model.rowHeightList.forEach((height,i) => {
+ const rects = [];
+ let sumColumnSize = 0;
+ let isMegerHeader = model.headerType === 'merge' && i == 0;
+
+ if (model.headerType === 'none' && i == 0) {
+ return;
+ }
+
+ model.columnWidthList.forEach((width,j) => {
+ const defBg = model.bgColor||'rgba(0,0,0,0)'
+ const rect = new Rect({
+ zlevel: this.zlevel,
+ z: this.z,
+ shape: {
+ x: isMegerHeader? 0: sumColumnSize,
+ y: sumRowSize,
+ width: isMegerHeader? sumWidth: width,
+ height
+ },
+ style: {
+ stroke: model.borderColor || '#FFF',
+ lineWidth: 1,
+ fill: model.tableData[i-1]? model.tableData[i-1]['bg'+(j+1)]||defBg : defBg
+ }
+ });
+
+ rects.push(rect);
+ this.grouper.add(rect);
+ sumColumnSize += width;
+ });
+
+ this.rectsArr.push(rects);
+ sumRowSize += height;
+ })
+
+
+
this.header = [];
if (model.headerType === 'merge') {
const header = new Text({
zlevel: model.zlevel,
z: model.z + 1,
style: {
- x: columnWidth / 2,
- y: model.rowHeight,
+ x: sumWidth / 2,
+ y: model.rowHeightList[0] / 2,
fontWeight: 'normal',
fontSize: model.headerFontSize,
fontFamily: 'consolas',
@@ -247,8 +242,8 @@ export default class StateTable extends Group {
textFill: model.textColor || '#FFF',
textAlign: 'center',
textPosition: 'inside',
- textVerticalAlign: 'bottom',
- textLineHeight: model.rowHeight
+ textVerticalAlign: 'center',
+ textLineHeight: model.headerFontSize
}
});
this.grouper.add(header);
@@ -261,7 +256,7 @@ export default class StateTable extends Group {
z: model.z + 1,
style: {
x: item / 2 + width,
- y: model.rowHeight,
+ y: model.rowHeightList[0] / 2,
fontWeight: 'normal',
fontSize: model.headerFontSize,
fontFamily: 'consolas',
@@ -269,84 +264,106 @@ export default class StateTable extends Group {
textFill: model.textColor || '#FFF',
textAlign: 'center',
textPosition: 'inside',
- textVerticalAlign: 'bottom',
- textLineHeight: model.rowHeight
+ textVerticalAlign: 'center',
+ textLineHeight: model.headerFontSize
}
});
width += item;
this.grouper.add(header);
this.header.push(header);
});
- }
- this.tabelContent = [];
+ }
+
model.tableData.forEach((item, i)=> {
- let width = 0;
+ const rects = this.rectsArr[i+1];
+ const contexts = [];
model.columnWidthList.forEach((elem, j) => {
- if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].type === 'Circle') {
- const circle = new Circle({
- zlevel: model.zlevel,
- z: model.z + 1,
- _subType: stateMap[item['column' + (j + 1)]],
- shape: {
- cx: elem / 2 + width,
- cy: model.rowHeight * (i + contentIndex) - model.rowHeight / 2,
- r: model.rowHeight / 3
- },
- style: {
- fill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : '#4CCDE4'
- }
- });
- this.grouper.add(circle);
- this.tabelContent.push(circle);
- } else {
- const text = new Text({
- zlevel: model.zlevel,
- z: model.z + 1,
- _subType: stateMap[item['column' + (j + 1)]],
- style:{
- x: elem / 2 + width,
- y: model.rowHeight * (i + contentIndex),
- fontWeight: 'normal',
- fontSize: model.fontSize,
- fontFamily: 'consolas',
- text: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].default : item['column' + (j + 1)],
- textFill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : this.model.textColor ? this.model.textColor : '#4CCDE4',
- textAlign: 'center',
- textPosition: 'inside',
- textVerticalAlign: 'bottom',
- textPadding: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textPadding : 0,
- textBackgroundColor: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textBackgroundColor : null,
- textLineHeight: model.rowHeight
- }
- });
- if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].unit) {
- const unitText = new Text({
- zlevel: model.zlevel,
- z: model.z + 1,
- _subType: stateMap[item['column' + (j + 1)]],
- style:{
- x: elem + width - 5,
- y: model.rowHeight * (i + contentIndex),
- fontWeight: 'normal',
- fontSize: model.fontSize,
- fontFamily: 'consolas',
- text: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unit : '',
- textFill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unitColor : this.model.textColor ? this.model.textColor : '#4CCDE4',
- textAlign: 'right',
- textPosition: 'inside',
- textVerticalAlign: 'bottom',
- textLineHeight: model.rowHeight
- }
- });
- this.grouper.add(unitText);
- this.tabelContent.push(unitText);
- }
- this.grouper.add(text);
- this.tabelContent.push(text);
- }
- width += elem;
+ const rect = rects[j];
+ if (rect) {
+ if (stateMap[item['column' + (j + 1)]] &&
+ stateMap[item['column' + (j + 1)]].type === 'Circle') {
+ const contextColor = stateMap[item['column' + (j + 1)]].color||item['color'+(j + 1)]||'#4CCDE4';
+ const circle = new Circle({
+ zlevel: model.zlevel,
+ z: model.z + 1,
+ _subType: stateMap[item['column' + (j + 1)]],
+ shape: {
+ cx: rect.shape.x + rect.shape.width / 2,
+ cy: rect.shape.y + rect.shape.height / 2,
+ r: model.rowHeightList[i] / 3
+ },
+ style: {
+ fill: contextColor
+ }
+ });
+ this.grouper.add(circle);
+ contexts.push(circle);
+ } else {
+ const bg = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].background : null;
+ const textPadding = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textPadding : 0;
+ const context = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].default : item['column' + (j + 1)];
+ const contextColor = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : item['color'+(j + 1)]||(this.model.textColor ? this.model.textColor : '#4CCDE4');
+ const unit = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unit : '';
+ const unitColor = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unitColor : item['color'+(j + 1)]||(this.model.textColor ? this.model.textColor : '#4CCDE4')
+
+ let text = null;
+ if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].unit) {
+ text = new Text({
+ zlevel: model.zlevel,
+ z: model.z + 1,
+ _subType: stateMap[item['column' + (j + 1)]],
+ style:{
+ x: rect.shape.x + rect.shape.width / 2,
+ y: rect.shape.y + rect.shape.height / 2,
+ fontWeight: 'normal',
+ fontFamily: 'consolas',
+ fontSize: model.fontSize,
+ text: `{context|${context}} {unit|${unit}}`,
+ rich: {
+ context: {
+ textFill: contextColor,
+ },
+ unit: {
+ textFill: unitColor,
+ }
+ },
+ textBackgroundColor: bg,
+ textLineHeight: model.fontSize,
+ textAlign: 'center',
+ textPosition: 'inside',
+ textVerticalAlign: 'center',
+ textPadding
+ }
+ });
+ } else {
+ text = new Text({
+ zlevel: model.zlevel,
+ z: model.z + 1,
+ _subType: stateMap[item['column' + (j + 1)]],
+ style:{
+ x: rect.shape.x + rect.shape.width / 2,
+ y: rect.shape.y + rect.shape.height / 2,
+ fontWeight: 'normal',
+ fontFamily: 'consolas',
+ fontSize: model.fontSize,
+ text: context,
+ textFill: contextColor,
+ textBackgroundColor: bg,
+ textLineHeight: model.fontSize,
+ textAlign: 'center',
+ textPosition: 'inside',
+ textVerticalAlign: 'center',
+ textPadding
+ }
+ });
+ }
+ this.grouper.add(text);
+ contexts.push(text);
+ }
+ }
});
- });
+ this.contextsArr.push(contexts)
+ });
this.add(this.grouper);
}
setModel(dx, dy) {
diff --git a/src/views/iscs/iscsDraw/icscComponents/stateTable.vue b/src/views/iscs/iscsDraw/icscComponents/stateTable.vue
index d89ad16cb..ea6db13dc 100644
--- a/src/views/iscs/iscsDraw/icscComponents/stateTable.vue
+++ b/src/views/iscs/iscsDraw/icscComponents/stateTable.vue
@@ -10,10 +10,13 @@
-
-
+
+
-
+
+
+
+
@@ -27,8 +30,10 @@
-
-
+
+
+
+
@@ -62,14 +67,14 @@
-
+
+
@@ -94,16 +99,17 @@ export default {
return {
addModel:{
code: '',
- rowHeight: 25,
x: 10,
- y: 10,
+ y: 10,
columnNum: 2,
rowNum: 2,
- columnWidthList: [50, 50],
+ columnWidthList: [50, 50],
+ rowHeightList: [25, 25],
+ bgColor: '',
textColor: '',
borderColor: '',
headerType: 'normal',
- tableData: [{}],
+ tableData: [{}],
headerContextList: [],
headerFontSize: 14,
fontSize: 12
@@ -176,19 +182,25 @@ export default {
this.showDeleteButton = true;
this.isUpdate = true;
this.addModel.code = model.code;
- this.addModel.rowHeight = model.rowHeight;
this.addModel.x = model.point.x;
this.addModel.y = model.point.y;
this.addModel.columnNum = model.columnNum;
- this.addModel.rowNum = model.rowNum;
+ this.addModel.rowNum = model.rowNum;
+ this.addModel.bgColor = model.bgColor;
this.addModel.textColor = model.textColor;
this.addModel.borderColor = model.borderColor;
- this.addModel.columnWidthList = model.columnWidthList;
- this.addModel.headerType = model.headerType;
+ this.addModel.columnWidthList = model.columnWidthList;
+ this.addModel.rowHeightList = model.rowHeightList;
+ this.addModel.headerType = model.headerType;
this.addModel.tableData = model.tableData;
this.addModel.headerFontSize = model.headerFontSize;
this.addModel.fontSize = model.fontSize;
- this.addModel.headerContextList = model.headerContextList;
+ this.addModel.headerContextList = model.headerContextList;
+ if (model.rowHeight||!model.rowHeightList) {
+ this.addModel.rowHeightList = new Array(model.rowNum).fill(model.rowHeight);
+ this.addModel.rowHeight = model.rowHeight = 0;
+ }
+
}
}
},
@@ -210,11 +222,12 @@ export default {
},
columnNum: this.addModel.columnNum,
rowNum: this.addModel.rowNum,
- rowHeight: this.addModel.rowHeight,
- columnWidthList: this.addModel.columnWidthList,
+ columnWidthList: this.addModel.columnWidthList,
+ rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType,
tableData: this.addModel.tableData,
- _type: 'StateTable',
+ _type: 'StateTable',
+ bgColor: this.addModel.bgColor,
textColor: this.addModel.textColor,
borderColor: this.addModel.borderColor,
headerFontSize: this.addModel.headerFontSize,
@@ -238,8 +251,8 @@ export default {
code: this.addModel.code,
columnNum: this.addModel.columnNum,
rowNum: this.addModel.rowNum,
- rowHeight: this.addModel.rowHeight,
- columnWidthList: this.addModel.columnWidthList,
+ columnWidthList: this.addModel.columnWidthList,
+ rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType,
tableData: this.addModel.tableData,
headerFontSize: this.addModel.headerFontSize,
@@ -256,14 +269,14 @@ export default {
this.showDeleteButton = false;
this.addModel = {
code: '',
- rowHeight: 25,
x: 10,
y: 10,
textColor: '',
borderColor: '',
columnNum: 2,
rowNum: 2,
- columnWidthList: [50, 50],
+ columnWidthList: [50, 50],
+ rowHeightList: [25, 25],
headerType: 'normal',
tableData: [{}, {}],
headerFontSize: 14,
@@ -289,14 +302,17 @@ export default {
}
},
changeRowNum(num) {
- const length = this.addModel.tableData.length;
+ const len = this.addModel.rowHeightList.length;
+ const length = this.addModel.tableData.length;
if (length + 1 > num) {
+ this.addModel.rowHeightList.splice(num - 1, len - num);
this.addModel.tableData.splice(num - 2, length + 1 - num);
} else if (length + 1 < num) {
- for (let i = 0; i < num - length - 1; i++) {
+ for (let i = 0; i < num - length - 1; i++) {
+ this.addModel.rowHeightList.push(25);
this.addModel.tableData.push({});
}
- }
+ }
}
}
diff --git a/src/views/iscs/iscsDraw/iscsEnvironment/index.vue b/src/views/iscs/iscsDraw/iscsEnvironment/index.vue
index c140b0ed0..e96204404 100644
--- a/src/views/iscs/iscsDraw/iscsEnvironment/index.vue
+++ b/src/views/iscs/iscsDraw/iscsEnvironment/index.vue
@@ -57,6 +57,14 @@
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
+
+
+
@@ -71,6 +79,7 @@ import IscsRect from '../icscComponents/rect';
import IscsButton from '../icscComponents/button';
import IscsCircle from '../icscComponents/circle';
import IscsTriangle from '../icscComponents/triangle';
+import StateTable from '../icscComponents/stateTable';
export default {
name: 'IscsOperate',
@@ -80,7 +89,8 @@ export default {
IscsText,
IscsButton,
IscsCircle,
- IscsTriangle
+ IscsTriangle,
+ StateTable
},
mixins: [
],