joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改table的绘制表格的问题

Browse Source
This commit is contained in:
lVAL 2020-10-10 09:37:58 +08:00
parent dbdb3f7e51
commit 3ac15df91e
3 changed files with 210 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
src/iscs/shape/stateTable.js
View File

@ -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: '滑动门&应急门关门故障',
@ -167,79 +168,73 @@ export default class StateTable extends Group {
}
create() {
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 contentIndex = 2;
if (model.headerType === 'none') {
rowNum = model.rowNum - 1;
contentIndex = 1;
}
model.columnWidthList.forEach(item => {
columnWidth += item;
const line = new Line({
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: {
x1: columnWidth,
y1: model.headerType === 'merge' ? model.rowHeight : 0,
x2: columnWidth,
y2: rowNum * model.rowHeight
x: isMegerHeader? 0: sumColumnSize,
y: sumRowSize,
width: isMegerHeader? sumWidth: width,
height
},
style: {
stroke: model.borderColor || '#FFF',
lineWidth: 2
lineWidth: 1,
fill: model.tableData[i-1]? model.tableData[i-1]['bg'+(j+1)]||defBg : defBg
}
});
this.grouper.add(line);
this.lines.push(line);
rects.push(rect);
this.grouper.add(rect);
sumColumnSize += width;
});
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);
}
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,8 +264,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
}
});
width += item;
@ -278,74 +273,96 @@ export default class StateTable extends Group {
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 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: elem / 2 + width,
cy: model.rowHeight * (i + contentIndex) - model.rowHeight / 2,
r: model.rowHeight / 3
cx: rect.shape.x + rect.shape.width / 2,
cy: rect.shape.y + rect.shape.height / 2,
r: model.rowHeightList[i] / 3
},
style: {
fill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : '#4CCDE4'
fill: contextColor
}
});
this.grouper.add(circle);
this.tabelContent.push(circle);
contexts.push(circle);
} else {
const text = new Text({
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: elem / 2 + width,
y: model.rowHeight * (i + contentIndex),
x: rect.shape.x + rect.shape.width / 2,
y: rect.shape.y + rect.shape.height / 2,
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',
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: '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
textVerticalAlign: 'center',
textPadding
}
});
if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].unit) {
const unitText = new Text({
} else {
text = 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),
x: rect.shape.x + rect.shape.width / 2,
y: rect.shape.y + rect.shape.height / 2,
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',
fontSize: model.fontSize,
text: context,
textFill: contextColor,
textBackgroundColor: bg,
textLineHeight: model.fontSize,
textAlign: 'center',
textPosition: 'inside',
textVerticalAlign: 'bottom',
textLineHeight: model.rowHeight
textVerticalAlign: 'center',
textPadding
}
});
this.grouper.add(unitText);
this.tabelContent.push(unitText);
}
this.grouper.add(text);
this.tabelContent.push(text);
contexts.push(text);
}
}
width += elem;
});
this.contextsArr.push(contexts)
});
this.add(this.grouper);
}

52
src/views/iscs/iscsDraw/icscComponents/stateTable.vue
View File

@ -10,10 +10,13 @@
<el-form-item label="y坐标:" prop="y">
<el-input-number v-model="addModel.y" controls-position="right" :min="1" size="small" />
</el-form-item>
<el-form-item label="文字颜色:">
<el-color-picker v-model="addModel.textColor" size="small" />
<el-form-item label="背景颜色:">
<el-color-picker v-model="addModel.bgColor" size="small" show-alpha />
</el-form-item>
<el-form-item label="表格颜色:">
<el-form-item label="文字颜色:">
<el-color-picker v-model="addModel.textColor" size="small" show-alpha />
</el-form-item>
<el-form-item label="边框颜色:">
<el-color-picker v-model="addModel.borderColor" size="small" />
</el-form-item>
<el-form-item label="列数:" prop="columnNum">
@ -27,8 +30,10 @@
<el-form-item label="行数:" prop="rowNum">
<el-input-number v-model="addModel.rowNum" controls-position="right" :min="1" size="small" @change="changeRowNum" />
</el-form-item>
<el-form-item label="行高:" prop="rowHeight">
<el-input-number v-model="addModel.rowHeight" controls-position="right" :min="1" size="small" />
<el-form-item label="行高:" prop="height">
<template v-for="(item, index) in addModel.rowHeightList">
<el-input-number :key="index" v-model="addModel.rowHeightList[index]" style="display: block; margin-bottom: 5px" controls-position="right" :min="1" size="small" />
</template>
</el-form-item>
<el-form-item label="表头类型:" prop="headerType">
<el-select v-model="addModel.headerType" size="small">
@ -62,14 +67,14 @@
<el-table-column :key="i" :label="'列'+(i + 1)" :prop="'column'+ (i + 1)">
<template slot-scope="scope">
<el-input v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small" />
<!-- <el-select v-else v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" filterable size="small">
<el-option
v-for="it in stateList"
:key="it.value"
:label="it.label"
:value="it.value"
/>
</el-select> -->
<div style="display:flex;justify-content:space-around;align-items: center;">
<div>背景</div>
<el-color-picker v-model="addModel.tableData[scope.$index]['bg'+(i+1)]" size="small" show-alpha />
</div>
<div style="display:flex;justify-content:space-around;align-items: center;">
<div>颜色</div>
<el-color-picker v-model="addModel.tableData[scope.$index]['color'+(i+1)]" size="small" />
</div>
</template>
</el-table-column>
</template>
@ -94,12 +99,13 @@ export default {
return {
addModel:{
code: '',
rowHeight: 25,
x: 10,
y: 10,
columnNum: 2,
rowNum: 2,
columnWidthList: [50, 50],
rowHeightList: [25, 25],
bgColor: '',
textColor: '',
borderColor: '',
headerType: 'normal',
@ -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.bgColor = model.bgColor;
this.addModel.textColor = model.textColor;
this.addModel.borderColor = model.borderColor;
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;
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,
rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType,
tableData: this.addModel.tableData,
_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,
rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType,
tableData: this.addModel.tableData,
headerFontSize: this.addModel.headerFontSize,
@ -256,7 +269,6 @@ export default {
this.showDeleteButton = false;
this.addModel = {
code: '',
rowHeight: 25,
x: 10,
y: 10,
textColor: '',
@ -264,6 +276,7 @@ export default {
columnNum: 2,
rowNum: 2,
columnWidthList: [50, 50],
rowHeightList: [25, 25],
headerType: 'normal',
tableData: [{}, {}],
headerFontSize: 14,
@ -289,11 +302,14 @@ export default {
}
},
changeRowNum(num) {
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++) {
this.addModel.rowHeightList.push(25);
this.addModel.tableData.push({});
}
}

12
src/views/iscs/iscsDraw/iscsEnvironment/index.vue
View File

@ -57,6 +57,14 @@
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane label="表格" name="StateTable">
<state-table
ref="stateTable"
style="width: 100%;height: 100%;"
@createDataModel="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
@ -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: [
],