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

Merge branch 'test' of https://git.code.tencent.com/lian-cbtc/jl-client into test

Browse Source
This commit is contained in:
fan 2020-10-10 13:12:34 +08:00
commit 3beefa0cfe
3 changed files with 210 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
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 Line from 'zrender/src/graphic/shape/Line';
import Text from 'zrender/src/graphic/Text'; import Text from 'zrender/src/graphic/Text';
import Circle from 'zrender/src/graphic/shape/Circle'; import Circle from 'zrender/src/graphic/shape/Circle';
import { merge } from 'lodash';
const stateMap = { const stateMap = {
slidingDoorEmergencyDoorOpenMalfunction : '滑动门&应急门开门故障', slidingDoorEmergencyDoorOpenMalfunction : '滑动门&应急门开门故障',
slidingDoorEmergencyDoorCloseMalfunction: '滑动门&应急门关门故障', slidingDoorEmergencyDoorCloseMalfunction: '滑动门&应急门关门故障',
@ -166,80 +167,74 @@ export default class StateTable extends Group {
this.create(); this.create();
} }
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({ this.grouper = new Group({
id: model.code, id: model.code,
position: [model.point.x, model.point.y] position: [model.point.x, model.point.y]
}); });
this.lines = [];
let columnWidth = 0; let rowNum = model.rowNum;
let rowNum = model.rowNum;
let contentIndex = 2; let contentIndex = 2;
if (model.headerType === 'none') { if (model.headerType === 'none') {
rowNum = model.rowNum - 1; rowNum = model.rowNum - 1;
contentIndex = 1; contentIndex = 1;
} }
model.columnWidthList.forEach(item => {
columnWidth += item; if (model.rowHeight||!model.rowHeightList) {
const line = new Line({ model.rowHeightList = new Array(model.rowNum).fill(model.rowHeight);
zlevel: this.zlevel, }
z: this.z,
shape: { let sumRowSize = 0;
x1: columnWidth, model.rowHeightList.forEach((height,i) => {
y1: model.headerType === 'merge' ? model.rowHeight : 0, const rects = [];
x2: columnWidth, let sumColumnSize = 0;
y2: rowNum * model.rowHeight let isMegerHeader = model.headerType === 'merge' && i == 0;
},
style: { if (model.headerType === 'none' && i == 0) {
stroke: model.borderColor || '#FFF', return;
lineWidth: 2 }
}
}); model.columnWidthList.forEach((width,j) => {
this.grouper.add(line); const defBg = model.bgColor||'rgba(0,0,0,0)'
this.lines.push(line); const rect = new Rect({
}); zlevel: this.zlevel,
this.tabelBorder = new Rect({ z: this.z,
zlevel: this.zlevel, shape: {
z: this.z, x: isMegerHeader? 0: sumColumnSize,
shape: { y: sumRowSize,
x: 0, width: isMegerHeader? sumWidth: width,
y: 0, height
width: columnWidth, },
height: rowNum * model.rowHeight style: {
}, stroke: model.borderColor || '#FFF',
style: { lineWidth: 1,
stroke: model.borderColor || '#aFFF', fill: model.tableData[i-1]? model.tableData[i-1]['bg'+(j+1)]||defBg : defBg
fill: 'rgba(255, 255, 255, 0)', }
lineWidth: 2 });
}
}); rects.push(rect);
this.grouper.add(this.tabelBorder); this.grouper.add(rect);
for (let i = 0; i < rowNum; i++) { sumColumnSize += width;
const line = new Line({ });
zlevel: this.zlevel,
z: this.z, this.rectsArr.push(rects);
shape: { sumRowSize += height;
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.header = []; this.header = [];
if (model.headerType === 'merge') { if (model.headerType === 'merge') {
const header = new Text({ const header = new Text({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z + 1, z: model.z + 1,
style: { style: {
x: columnWidth / 2, x: sumWidth / 2,
y: model.rowHeight, y: model.rowHeightList[0] / 2,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: model.headerFontSize, fontSize: model.headerFontSize,
fontFamily: 'consolas', fontFamily: 'consolas',
@ -247,8 +242,8 @@ export default class StateTable extends Group {
textFill: model.textColor || '#FFF', textFill: model.textColor || '#FFF',
textAlign: 'center', textAlign: 'center',
textPosition: 'inside', textPosition: 'inside',
textVerticalAlign: 'bottom', textVerticalAlign: 'center',
textLineHeight: model.rowHeight textLineHeight: model.headerFontSize
} }
}); });
this.grouper.add(header); this.grouper.add(header);
@ -261,7 +256,7 @@ export default class StateTable extends Group {
z: model.z + 1, z: model.z + 1,
style: { style: {
x: item / 2 + width, x: item / 2 + width,
y: model.rowHeight, y: model.rowHeightList[0] / 2,
fontWeight: 'normal', fontWeight: 'normal',
fontSize: model.headerFontSize, fontSize: model.headerFontSize,
fontFamily: 'consolas', fontFamily: 'consolas',
@ -269,84 +264,106 @@ export default class StateTable extends Group {
textFill: model.textColor || '#FFF', textFill: model.textColor || '#FFF',
textAlign: 'center', textAlign: 'center',
textPosition: 'inside', textPosition: 'inside',
textVerticalAlign: 'bottom', textVerticalAlign: 'center',
textLineHeight: model.rowHeight textLineHeight: model.headerFontSize
} }
}); });
width += item; width += item;
this.grouper.add(header); this.grouper.add(header);
this.header.push(header); this.header.push(header);
}); });
} }
this.tabelContent = [];
model.tableData.forEach((item, i)=> { model.tableData.forEach((item, i)=> {
let width = 0; const rects = this.rectsArr[i+1];
const contexts = [];
model.columnWidthList.forEach((elem, j) => { model.columnWidthList.forEach((elem, j) => {
if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].type === 'Circle') { const rect = rects[j];
const circle = new Circle({ if (rect) {
zlevel: model.zlevel, if (stateMap[item['column' + (j + 1)]] &&
z: model.z + 1, stateMap[item['column' + (j + 1)]].type === 'Circle') {
_subType: stateMap[item['column' + (j + 1)]], const contextColor = stateMap[item['column' + (j + 1)]].color||item['color'+(j + 1)]||'#4CCDE4';
shape: { const circle = new Circle({
cx: elem / 2 + width, zlevel: model.zlevel,
cy: model.rowHeight * (i + contentIndex) - model.rowHeight / 2, z: model.z + 1,
r: model.rowHeight / 3 _subType: stateMap[item['column' + (j + 1)]],
}, shape: {
style: { cx: rect.shape.x + rect.shape.width / 2,
fill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : '#4CCDE4' cy: rect.shape.y + rect.shape.height / 2,
} r: model.rowHeightList[i] / 3
}); },
this.grouper.add(circle); style: {
this.tabelContent.push(circle); fill: contextColor
} else { }
const text = new Text({ });
zlevel: model.zlevel, this.grouper.add(circle);
z: model.z + 1, contexts.push(circle);
_subType: stateMap[item['column' + (j + 1)]], } else {
style:{ const bg = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].background : null;
x: elem / 2 + width, const textPadding = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textPadding : 0;
y: model.rowHeight * (i + contentIndex), const context = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].default : item['column' + (j + 1)];
fontWeight: 'normal', const contextColor = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : item['color'+(j + 1)]||(this.model.textColor ? this.model.textColor : '#4CCDE4');
fontSize: model.fontSize, const unit = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unit : '';
fontFamily: 'consolas', const unitColor = stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unitColor : item['color'+(j + 1)]||(this.model.textColor ? this.model.textColor : '#4CCDE4')
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', let text = null;
textAlign: 'center', if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].unit) {
textPosition: 'inside', text = new Text({
textVerticalAlign: 'bottom', zlevel: model.zlevel,
textPadding: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textPadding : 0, z: model.z + 1,
textBackgroundColor: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textBackgroundColor : null, _subType: stateMap[item['column' + (j + 1)]],
textLineHeight: model.rowHeight style:{
} x: rect.shape.x + rect.shape.width / 2,
}); y: rect.shape.y + rect.shape.height / 2,
if (stateMap[item['column' + (j + 1)]] && stateMap[item['column' + (j + 1)]].unit) { fontWeight: 'normal',
const unitText = new Text({ fontFamily: 'consolas',
zlevel: model.zlevel, fontSize: model.fontSize,
z: model.z + 1, text: `{context|${context}} {unit|${unit}}`,
_subType: stateMap[item['column' + (j + 1)]], rich: {
style:{ context: {
x: elem + width - 5, textFill: contextColor,
y: model.rowHeight * (i + contentIndex), },
fontWeight: 'normal', unit: {
fontSize: model.fontSize, textFill: unitColor,
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', textBackgroundColor: bg,
textAlign: 'right', textLineHeight: model.fontSize,
textPosition: 'inside', textAlign: 'center',
textVerticalAlign: 'bottom', textPosition: 'inside',
textLineHeight: model.rowHeight textVerticalAlign: 'center',
} textPadding
}); }
this.grouper.add(unitText); });
this.tabelContent.push(unitText); } else {
} text = new Text({
this.grouper.add(text); zlevel: model.zlevel,
this.tabelContent.push(text); z: model.z + 1,
} _subType: stateMap[item['column' + (j + 1)]],
width += elem; 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); this.add(this.grouper);
} }
setModel(dx, dy) { setModel(dx, dy) {

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

@ -10,10 +10,13 @@
<el-form-item label="y坐标:" prop="y"> <el-form-item label="y坐标:" prop="y">
<el-input-number v-model="addModel.y" controls-position="right" :min="1" size="small" /> <el-input-number v-model="addModel.y" controls-position="right" :min="1" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="文字颜色:"> <el-form-item label="背景颜色:">
<el-color-picker v-model="addModel.textColor" size="small" /> <el-color-picker v-model="addModel.bgColor" size="small" show-alpha />
</el-form-item> </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-color-picker v-model="addModel.borderColor" size="small" />
</el-form-item> </el-form-item>
<el-form-item label="列数:" prop="columnNum"> <el-form-item label="列数:" prop="columnNum">
@ -27,8 +30,10 @@
<el-form-item label="行数:" prop="rowNum"> <el-form-item label="行数:" prop="rowNum">
<el-input-number v-model="addModel.rowNum" controls-position="right" :min="1" size="small" @change="changeRowNum" /> <el-input-number v-model="addModel.rowNum" controls-position="right" :min="1" size="small" @change="changeRowNum" />
</el-form-item> </el-form-item>
<el-form-item label="行高:" prop="rowHeight"> <el-form-item label="行高:" prop="height">
<el-input-number v-model="addModel.rowHeight" controls-position="right" :min="1" size="small" /> <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>
<el-form-item label="表头类型:" prop="headerType"> <el-form-item label="表头类型:" prop="headerType">
<el-select v-model="addModel.headerType" size="small"> <el-select v-model="addModel.headerType" size="small">
@ -62,14 +67,14 @@
<el-table-column :key="i" :label="'列'+(i + 1)" :prop="'column'+ (i + 1)"> <el-table-column :key="i" :label="'列'+(i + 1)" :prop="'column'+ (i + 1)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-model="addModel.tableData[scope.$index]['column'+ (i + 1)]" size="small" /> <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"> <div style="display:flex;justify-content:space-around;align-items: center;">
<el-option <div>背景</div>
v-for="it in stateList" <el-color-picker v-model="addModel.tableData[scope.$index]['bg'+(i+1)]" size="small" show-alpha />
:key="it.value" </div>
:label="it.label" <div style="display:flex;justify-content:space-around;align-items: center;">
:value="it.value" <div>颜色</div>
/> <el-color-picker v-model="addModel.tableData[scope.$index]['color'+(i+1)]" size="small" />
</el-select> --> </div>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
@ -94,16 +99,17 @@ export default {
return { return {
addModel:{ addModel:{
code: '', code: '',
rowHeight: 25,
x: 10, x: 10,
y: 10, y: 10,
columnNum: 2, columnNum: 2,
rowNum: 2, rowNum: 2,
columnWidthList: [50, 50], columnWidthList: [50, 50],
rowHeightList: [25, 25],
bgColor: '',
textColor: '', textColor: '',
borderColor: '', borderColor: '',
headerType: 'normal', headerType: 'normal',
tableData: [{}], tableData: [{}],
headerContextList: [], headerContextList: [],
headerFontSize: 14, headerFontSize: 14,
fontSize: 12 fontSize: 12
@ -176,19 +182,25 @@ export default {
this.showDeleteButton = true; this.showDeleteButton = true;
this.isUpdate = true; this.isUpdate = true;
this.addModel.code = model.code; this.addModel.code = model.code;
this.addModel.rowHeight = model.rowHeight;
this.addModel.x = model.point.x; this.addModel.x = model.point.x;
this.addModel.y = model.point.y; this.addModel.y = model.point.y;
this.addModel.columnNum = model.columnNum; 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.textColor = model.textColor;
this.addModel.borderColor = model.borderColor; this.addModel.borderColor = model.borderColor;
this.addModel.columnWidthList = model.columnWidthList; this.addModel.columnWidthList = model.columnWidthList;
this.addModel.headerType = model.headerType; this.addModel.rowHeightList = model.rowHeightList;
this.addModel.headerType = model.headerType;
this.addModel.tableData = model.tableData; this.addModel.tableData = model.tableData;
this.addModel.headerFontSize = model.headerFontSize; this.addModel.headerFontSize = model.headerFontSize;
this.addModel.fontSize = model.fontSize; 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, columnNum: this.addModel.columnNum,
rowNum: this.addModel.rowNum, rowNum: this.addModel.rowNum,
rowHeight: this.addModel.rowHeight, columnWidthList: this.addModel.columnWidthList,
columnWidthList: this.addModel.columnWidthList, rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType, headerType: this.addModel.headerType,
tableData: this.addModel.tableData, tableData: this.addModel.tableData,
_type: 'StateTable', _type: 'StateTable',
bgColor: this.addModel.bgColor,
textColor: this.addModel.textColor, textColor: this.addModel.textColor,
borderColor: this.addModel.borderColor, borderColor: this.addModel.borderColor,
headerFontSize: this.addModel.headerFontSize, headerFontSize: this.addModel.headerFontSize,
@ -238,8 +251,8 @@ export default {
code: this.addModel.code, code: this.addModel.code,
columnNum: this.addModel.columnNum, columnNum: this.addModel.columnNum,
rowNum: this.addModel.rowNum, rowNum: this.addModel.rowNum,
rowHeight: this.addModel.rowHeight, columnWidthList: this.addModel.columnWidthList,
columnWidthList: this.addModel.columnWidthList, rowHeightList: this.addModel.rowHeightList,
headerType: this.addModel.headerType, headerType: this.addModel.headerType,
tableData: this.addModel.tableData, tableData: this.addModel.tableData,
headerFontSize: this.addModel.headerFontSize, headerFontSize: this.addModel.headerFontSize,
@ -256,14 +269,14 @@ export default {
this.showDeleteButton = false; this.showDeleteButton = false;
this.addModel = { this.addModel = {
code: '', code: '',
rowHeight: 25,
x: 10, x: 10,
y: 10, y: 10,
textColor: '', textColor: '',
borderColor: '', borderColor: '',
columnNum: 2, columnNum: 2,
rowNum: 2, rowNum: 2,
columnWidthList: [50, 50], columnWidthList: [50, 50],
rowHeightList: [25, 25],
headerType: 'normal', headerType: 'normal',
tableData: [{}, {}], tableData: [{}, {}],
headerFontSize: 14, headerFontSize: 14,
@ -289,14 +302,17 @@ export default {
} }
}, },
changeRowNum(num) { changeRowNum(num) {
const length = this.addModel.tableData.length; const len = this.addModel.rowHeightList.length;
const length = this.addModel.tableData.length;
if (length + 1 > num) { if (length + 1 > num) {
this.addModel.rowHeightList.splice(num - 1, len - num);
this.addModel.tableData.splice(num - 2, length + 1 - num); this.addModel.tableData.splice(num - 2, length + 1 - num);
} else if (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({}); this.addModel.tableData.push({});
} }
} }
} }
} }

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

@ -57,6 +57,14 @@
@createDataModel="createDataModel" @createDataModel="createDataModel"
@deleteDataModel="deleteDataModel" @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-tab-pane>
</el-tabs> </el-tabs>
</el-card> </el-card>
@ -71,6 +79,7 @@ import IscsRect from '../icscComponents/rect';
import IscsButton from '../icscComponents/button'; import IscsButton from '../icscComponents/button';
import IscsCircle from '../icscComponents/circle'; import IscsCircle from '../icscComponents/circle';
import IscsTriangle from '../icscComponents/triangle'; import IscsTriangle from '../icscComponents/triangle';
import StateTable from '../icscComponents/stateTable';
export default { export default {
name: 'IscsOperate', name: 'IscsOperate',
@ -80,7 +89,8 @@ export default {
IscsText, IscsText,
IscsButton, IscsButton,
IscsCircle, IscsCircle,
IscsTriangle IscsTriangle,
StateTable
}, },
mixins: [ mixins: [
], ],