修改table的绘制表格的问题

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: '滑动门&应急门关门故障',
@@ -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;
+		if (model.rowHeight||!model.rowHeightList) {
-            const line = new Line({
+			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,
+						x: isMegerHeader? 0:  sumColumnSize,
-                    y1: model.headerType === 'merge' ? model.rowHeight : 0,
+						y: sumRowSize,
-                    x2: columnWidth,
+						width: isMegerHeader? sumWidth: width,
-                    y2: rowNum * model.rowHeight
+						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,
+			this.rectsArr.push(rects);
-            z: this.z,
+			sumRowSize += height;
-            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.header = [];
         if (model.headerType === 'merge') {
             const header = new Text({
                 zlevel: model.zlevel,
                 z: model.z + 1,
                 style: {
-                    x: columnWidth / 2,
+                    x: sumWidth / 2,
-                    y: model.rowHeight,
+                    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',
+                    textVerticalAlign: 'center',
-                    textLineHeight: model.rowHeight
+                    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',
+                        textVerticalAlign: 'center',
-                        textLineHeight: model.rowHeight
+                        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,
+								cx: rect.shape.x + rect.shape.width / 2,
-                            cy: model.rowHeight * (i + contentIndex) - model.rowHeight / 2,
+								cy: rect.shape.y + rect.shape.height / 2,
-                            r: model.rowHeight / 3
+								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,
+									x: rect.shape.x + rect.shape.width / 2,
-                            y: model.rowHeight * (i + contentIndex),
+									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)],
+									fontSize: model.fontSize,
-                            textFill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].color : this.model.textColor ? this.model.textColor : '#4CCDE4',
+									text: `{context|${context}} {unit|${unit}}`,
+									rich: {
+										context: {
+											textFill: contextColor,
+										},
+										unit: {
+											textFill: unitColor,
+										}
+									},
+									textBackgroundColor: bg,
+									textLineHeight: model.fontSize,
 									textAlign: 'center',
 									textPosition: 'inside',
-                            textVerticalAlign: 'bottom',
+									textVerticalAlign: 'center',
-                            textPadding: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].textPadding : 0,
+									textPadding
-                            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) {
+						} else {
-                        const unitText = new Text({
+							text = new Text({
 								zlevel: model.zlevel,
 								z: model.z + 1,
 								_subType: stateMap[item['column' + (j + 1)]],
 								style:{
-                                x: elem + width - 5,
+									x: rect.shape.x + rect.shape.width / 2,
-                                y: model.rowHeight * (i + contentIndex),
+									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 : '',
+									fontSize: model.fontSize,
-                                textFill: stateMap[item['column' + (j + 1)]] ? stateMap[item['column' + (j + 1)]].unitColor : this.model.textColor ? this.model.textColor : '#4CCDE4',
+									text: context,
-                                textAlign: 'right',
+									textFill: contextColor,
+									textBackgroundColor: bg,
+									textLineHeight: model.fontSize,
+									textAlign: 'center',
 									textPosition: 'inside',
-                                textVerticalAlign: 'bottom',
+									textVerticalAlign: 'center',
-                                textLineHeight: model.rowHeight
+									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);
     }

src/views/iscs/iscsDraw/icscComponents/stateTable.vue

@@ -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-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 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-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 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">
+				<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>
             </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({});
                 }
 			}

src/views/iscs/iscsDraw/iscsEnvironment/index.vue

@@ -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: [
     ],