增加 门禁iscs背景图，以及iscs_new的部分代码

src/iscs/shape/picture.js

@@ -78,6 +78,8 @@ import bgStationC from '@/assets/iscs_picture/bg-station-C.png'
 import bgStationD from '@/assets/iscs_picture/bg-station-D.png'
 import bgStationE from '@/assets/iscs_picture/bg-station-E.png'
 import bgStationF from '@/assets/iscs_picture/bg-station-F.png'
+import bgDoorStationA from '@/assets/iscs_picture/bg-door-station-A.png';
+import bgDoorStandA from '@/assets/iscs_picture/bg-door-stand-A.png';
 
 const pictureObj = {
     'psdLeft': psdLeft,
@@ -155,7 +157,9 @@ const pictureObj = {
 	bgStationC,
 	bgStationD,
 	bgStationE,
-	bgStationF
+	bgStationF,
+	bgDoorStationA,
+	bgDoorStandA
 };
 export default class Picture extends Group {
     constructor(device) {

src/iscs_new/shape/Compose.js

@@ -0,0 +1,9 @@
+import AbstractShape from './Shape';
+
+class Compose extends AbstractShape {
+	constructor({models}) {
+		super(model)
+	}
+}
+
+export default Compose;

src/iscs_new/shape/Element.js

@@ -0,0 +1,8 @@
+import AbstractShape from './Shape';
+
+class Element extends AbstractShape {
+	constructor() {
+	}
+}
+
+export default Element;

src/iscs_new/shape/Shape.js

@@ -0,0 +1,27 @@
+import { Rect } from "../graph/graphic";
+
+// 图形抽象层
+export default class AbstractShape {
+	constructor(model) {
+		this.model = model;
+	}
+
+	// 拖动
+	draft({x, y}) {}
+
+	// 设置高亮
+	active() {}
+
+	// 取消高亮
+	inactive() {}
+
+	// 设置获取焦点
+	focus() {}
+
+	// 设置取消焦点
+	blur() {}
+
+	// 设置状态
+	setState(state) {}
+}
+

src/iscs_new/shape/graph/LinePipe/index.js

@@ -0,0 +1,623 @@
+import * as graphic from '../../../graph/graphic';
+import * as utils from '../../../utils/utils';
+import RadialGradient from 'zrender/src/graphic/RadialGradient';
+import LinearGradient from 'zrender/src/graphic/LinearGradient';
+import panelType from '../../../constant/panelType';
+import ConstSelect from '@/scripts/ConstConfig';
+import { handleColor } from '@/map/utils/utils.js';
+import store from '@/store';
+import { MapTypeEnum } from '@/scripts/ConstDic.js';
+import Vue from 'vue';
+
+class Adaptor {
+	constructor({model}, state, graph) {
+		this.__graph = graph;
+		this.__model = model;
+		this.__state = state;
+	}
+
+	get() {
+		const model = this.__model;
+		const sceneType = this.__state.mapType;
+		const block = sceneType ? utils.getBlockBySceneType(model, sceneType) : null;
+
+		this.__graph._block = block;
+
+		return Object.assign(model, block);
+	}
+}
+
+export default class LinePipe extends graphic.Group {
+	constructor(painter, shape, state) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._state = state;
+		this._block = null;
+		this._adaptor = new Adaptor(shape, state, this);
+		this._elMap = {
+			lines: [],
+			circles: [],
+			line: null,
+			flow: null,
+			lArrow: null,
+			rArrow: null,
+			lText: null,
+			rText: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const mapType = store.state.map.mapType;
+		const model = this._adaptor.get();
+		const style = this._shape.style;
+		const draw = this._shape.draw;
+		const color = model.color;
+		const isVisible = this._state.isDraw
+			? true
+			: model.hasOwnProperty('visible') ? model.visible: true;
+
+		let modelData = {};
+		if (model.sceneTypes) {
+			const modelIndex = model.sceneTypes.indexOf(mapType);
+			modelData = model.graphList[modelIndex]; // 对应模式下数据
+		} else {
+			modelData = Object.assign(modelData, model);
+		}
+
+		if (isVisible && this._block) {
+			if (model && modelData.points && modelData.points.length >= 2) {
+
+				if (mapType == MapTypeEnum.Site) {
+					modelData.points.forEach((point, index) => {
+						if (index) {
+							const line = new graphic.Polyline({
+								zlevel: model.zlevel,
+								z: model.z,
+								z2: this.getZ2(index, mapType),
+								silent: !draw,
+								shape: {
+									smooth: model.smooth / 10
+								},
+								style: {
+									blend: 'source-over',
+									lineWidth: parseFloat(modelData.width),
+									stroke: this.getLinearGradient(color)
+								}
+							});
+							this._elMap.lines.push(utils.lineProxy(line, modelData.points[index-1], modelData.points[index]));
+
+							if (index > 0 && index < modelData.points.length-1) {
+								const circle = new graphic.Circle({
+									zlevel: model.zlevel,
+									z: model.z,
+									z2: model.layer || 0,
+									silent: !draw,
+									shape: {
+										cx: modelData.points[index].x,
+										cy: modelData.points[index].y,
+										r: parseFloat(modelData.width || 2) / 2
+									},
+									style: {
+										blend: 'source-over',
+										fill: this.getRadialGradient(color)
+									}
+								});
+								this._elMap.circles.push(circle);
+							}
+						}
+					});
+				} else {
+					this._elMap.line = new graphic.Polyline({
+						zlevel: model.zlevel,
+						z: model.z,
+						z2: model.layer || 0,
+						silent: !draw,
+						shape: {
+							points: modelData.points.map(elem => { return [elem.x, elem.y]; }),
+							smooth: model.smooth / 10
+						},
+						style: {
+							lineJoin: 'round',
+							lineWidth: parseFloat(modelData.width) || style[panelType.LinePipe].line.lineWidth,
+							stroke: color
+						}
+					});
+				}
+
+				// 文字和状态
+				if (!this._shape.draw) {
+					this._elMap.flow = new graphic.Polyline({
+						zlevel: model.zlevel,
+						// z: model.z,
+						// z2: model.layer + 5,
+						z: model.z + 1,
+						z2: model.layer || 0,
+						silent: true,
+						shape: {
+							points: modelData.points.map(elem => { return [elem.x, elem.y]; }),
+							smooth: model.smooth / 10
+						},
+						style: {
+							lineDash: [8, 8],
+							lineWidth: parseFloat(modelData.width) * (mapType == MapTypeEnum.Site? 0.8 : 1)
+						}
+					});
+					this._elMap.flow.hide();
+				}
+				const lradian = utils.getRadian(modelData.points[1], modelData.points[0]);
+				this._elMap.lText = new graphic.Text({
+					zlevel: model.zlevel,
+					z: model.z+9,
+					z2: (model.layer || 0),
+					silent: true,
+					style: {
+						x: modelData.points[0].x+Math.sin(lradian)*(parseFloat(modelData.width/2)+style.fontSize+5),
+						y: modelData.points[0].y+Math.cos(lradian)*(parseFloat(modelData.width/2)+style.fontSize+5),
+						fontWeight: 'normal',
+						fontSize: style.fontSize,
+						fontFamily: style.fontFamily,
+						text: 'A',
+						textFill: '#fff',
+						textAlign: 'left',
+						textVerticalAlign: 'top',
+						textPadding: [2, 2]
+					}
+				});
+				this._elMap.lText.hide();
+
+				const rradian = utils.getRadian(modelData.points[modelData.points.length-2], modelData.points[modelData.points.length-1]);
+				this._elMap.rText = new graphic.Text({
+					zlevel: model.zlevel,
+					z: model.z+9,
+					z2: (model.layer || 0),
+					silent: true,
+					style: {
+						x: modelData.points[modelData.points.length-1].x+Math.sin(rradian)*(parseFloat(modelData.width/2)+style.fontSize+5),
+						y: modelData.points[modelData.points.length-1].y+Math.cos(rradian)*(parseFloat(modelData.width/2)+style.fontSize+5),
+						fontWeight: 'normal',
+						fontSize: style.fontSize,
+						fontFamily: style.fontFamily,
+						text: 'B',
+						textFill: '#fff',
+						textAlign: 'right',
+						textVerticalAlign: 'bottom',
+						textPadding: [2, 2]
+					}
+				});
+				this._elMap.rText.hide();
+				// 左侧显示
+				if (['Inlet', 'Outlet'].includes(modelData.leftArrow)) {
+					if (mapType !== MapTypeEnum.Site) {
+						const dx = modelData.points[1].x - modelData.points[0].x;
+						const dy = modelData.points[1].y - modelData.points[0].y;
+
+						this._elMap.lArrow = new graphic.ArrowLine({
+							zlevel: model.zlevel,
+							z: model.z,
+							z2: model.layer || 0,
+							silent: true,
+							origin: [
+								modelData.points[0].x,
+								modelData.points[0].y
+							],
+							rotation: -Math.atan2(dy, dx),
+							shape: {
+								x: modelData.points[0].x,
+								y: modelData.points[0].y,
+								isLeft: true,
+								toLeft: modelData.leftArrow == 'Outlet'
+							},
+							style: {
+								lineWidth: style[panelType.LinePipe].arrow.lineWidth,
+								stroke: color
+							}
+						});
+					} else {
+						const circle = new graphic.Circle({
+							zlevel: model.zlevel,
+							z: model.z,
+							z2: model.layer || 0,
+							silent: !draw,
+							shape: {
+								cx: modelData.points[0].x,
+								cy: modelData.points[0].y,
+								r: parseFloat(modelData.width) / 2
+							},
+							style: {
+								blend: 'source-over',
+								fill: this.getRadialGradient(color)
+							}
+						});
+						this._elMap.circles.push(circle);
+					}
+				}
+				// 右侧显示
+				if (['Inlet', 'Outlet'].includes(modelData.rightArrow)) {
+					const arrowIndex = modelData.points.length - 1;
+					if (mapType !== MapTypeEnum.Site) {
+						const dx = modelData.points[arrowIndex].x - modelData.points[arrowIndex-1].x;
+						const dy = modelData.points[arrowIndex].y - modelData.points[arrowIndex-1].y;
+
+						this._elMap.rArrow = new graphic.ArrowLine({
+							zlevel: model.zlevel,
+							z: model.z,
+							z2: model.layer || 0,
+							silent: true,
+							origin: [
+								modelData.points[arrowIndex].x,
+								modelData.points[arrowIndex].y
+							],
+							rotation: -Math.atan2(dy, dx),
+							shape: {
+								x: modelData.points[arrowIndex].x,
+								y: modelData.points[arrowIndex].y,
+								isLeft: arrowIndex == 0,
+								toLeft: modelData.rightArrow == 'Inlet'
+							},
+							style: {
+								lineWidth: style[panelType.LinePipe].arrow.lineWidth,
+								stroke: color
+							}
+						});
+					} else {
+						const circle = new graphic.Circle({
+							zlevel: model.zlevel,
+							z: model.z,
+							z2: model.layer || 0,
+							silent: !draw,
+							shape: {
+								cx: modelData.points[arrowIndex].x,
+								cy: modelData.points[arrowIndex].y,
+								r: parseFloat(modelData.width) / 2
+							},
+							style: {
+								blend: 'source-over',
+								fill: this.getRadialGradient(color)
+							}
+						});
+						this._elMap.circles.push(circle);
+					}
+				}
+
+				if ((ConstSelect.ConstMap.LSvgs[modelData.leftArrow]||{}).path) {
+					const rotation = -Math.atan2(
+						modelData.points[1].y-modelData.points[0].y,
+						modelData.points[1].x-modelData.points[0].x
+					);
+					const path = ConstSelect.ConstMap.LSvgs[modelData.leftArrow].path;
+					this._elMap.lArrow = new graphic.Svg({
+						zlevel: model.zlevel,
+						z: model.z,
+						z2: (model.layer || 0),
+						origin: [0, 0],
+						rotation,
+						shape: {
+							x: modelData.points[0].x,
+							y: modelData.points[0].y,
+							path
+						},
+						style: {
+							lineWidth: style[panelType.LinePipe].arrow.lineWidth,
+							stroke: path.includes('stroke')? modelData.color: 'transparent ',
+							fill: path.includes('fill')? modelData.color: 'transparent '
+						}
+					});
+				}
+
+				if ((ConstSelect.ConstMap.RSvgs[modelData.rightArrow]||{}).path) {
+					const len = modelData.points.length-1;
+					const rotation = -Math.atan2(
+						modelData.points[len].y-modelData.points[len-1].y,
+						modelData.points[len].x-modelData.points[len-1].x
+					);
+					const path = ConstSelect.ConstMap.RSvgs[modelData.rightArrow].path;
+					this._elMap.rArrow = new graphic.Svg({
+						zlevel: model.zlevel,
+						z: model.z,
+						z2: (model.layer || 0),
+						origin: [0, 0],
+						rotation,
+						shape: {
+							x: modelData.points[len].x,
+							y: modelData.points[len].y,
+							path
+						},
+						style: {
+							lineWidth: style[panelType.LinePipe].arrow.lineWidth,
+							stroke: path.includes('stroke')? modelData.color: 'transparent ',
+							fill: path.includes('fill')? modelData.color: 'transparent '
+						}
+					});
+				}
+
+				if (this._elMap.lines) {
+					this._elMap.lines.forEach(item => {
+						item.setStyle('lineDash', {
+							'Solid': null,						// 实线
+							'Dotted': [12, 6],					// 虚线
+							'Point': [4, 4],					// 点线
+							'DotPointA': [12, 4, 4, 4],			// 一类虚点线
+							'DotPointB': [12, 4, 4, 4, 4, 4]	// 二类虚点线
+						}[model.type]);
+					});
+				}
+				if (this._elMap.line) {
+					this._elMap.line.setStyle('lineDash', {
+						'Solid': null,						// 实线
+						'Dotted': [12, 6],					// 虚线
+						'Point': [4, 4],					// 点线
+						'DotPointA': [12, 4, 4, 4],			// 一类虚点线
+						'DotPointB': [12, 4, 4, 4, 4, 4]	// 二类虚点线
+					}[model.type]);
+				}
+			}
+		}
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+
+	}
+
+	getRadialGradient(color) {
+		return store.state.map.mapType == MapTypeEnum.Site
+			? new RadialGradient(0.5, 0.5, 0.5,
+				[
+					{offset: 0, color: '#FFFFFF'},
+					{offset: 1, color: color}
+				])
+			: color;
+	}
+
+	getLinearGradient(color) {
+		return store.state.map.mapType == MapTypeEnum.Site
+			? new LinearGradient(0, 0, 0, 1,
+				[
+					{offset: 0, color: color},
+					{offset: 0.5, color: '#FFFFFF'},
+					{offset: 1, color: color}
+				])
+			: color;
+	}
+
+	getZ2(index, mapType) {
+		const model = this._adaptor.get(mapType);
+		const layer = model.layer || 0;
+		const dx = model.points[index].x-model.points[index-1].x;
+		const dy = model.points[index].y-model.points[index-1].y;
+		return model.points.length>2? dx==0? layer : dy==0? layer+2 : layer+1 : layer+2;
+	}
+
+	setShape(model) {
+		const style = this._shape.style;
+
+		if (this._elMap.lines && this._elMap.lines.length) {
+			this._elMap.lines.forEach((line, index) => {
+				utils.lineProxy(line, model.points[index], model.points[index+1]);
+			});
+		}
+
+		if (this._elMap.circles && this._elMap.circles.length) {
+			this._elMap.circles.forEach((circle, index) => {
+				circle.setShape({
+					cx: model.points[index+1].x,
+					cy: model.points[index+1].y
+				});
+			});
+		}
+
+		if (this._elMap.lText) {
+			const lradian = utils.getRadian(model.points[1], model.points[0]);
+			this._elMap.lText.setStyle({
+				x: model.points[0].x + Math.sin(lradian) * (parseFloat(model.width/2) + style.fontSize + 5),
+				y: model.points[0].y + Math.cos(lradian) * (parseFloat(model.width/2) + style.fontSize + 5)
+			});
+		}
+		if (this._elMap.rText) {
+			const rradian = utils.getRadian(model.points[model.points.length-2], model.points[model.points.length-1]);
+			this._elMap.rText.setStyle({
+				x: model.points[model.points.length-1].x + Math.sin(rradian) * (parseFloat(model.width/2) + style.fontSize + 5),
+				y: model.points[model.points.length-1].y + Math.cos(rradian) * (parseFloat(model.width/2) + style.fontSize + 5)
+			});
+		}
+
+		if (model.graphList) {
+			const index = model.sceneTypes.findIndex(ele => ele == Vue.prototype.$map.state.mapType);
+			model.graphList[index].points = JSON.parse(JSON.stringify(model.points));
+		}
+
+		if (this._elMap.line) {
+			this._elMap.line.setShape({
+				points: model.points.map(elem => { return [elem.x, elem.y]; })
+			});
+		}
+
+		if (this._elMap.flow) {
+			this._elMap.flow.setShape({
+				points: model.points.map(elem => { return [elem.x, elem.y]; })
+			});
+		}
+
+		if (this._elMap.lArrow) {
+			const rotation = -Math.atan2(
+				model.points[1].y-model.points[0].y,
+				model.points[1].x-model.points[0].x
+			);
+			this._elMap.lArrow.attr('rotation', rotation);
+			this._elMap.lArrow.setShape({
+				x: model.points[0].x,
+				y: model.points[0].y
+			});
+		}
+
+		if (this._elMap.rArrow) {
+			const len = model.points.length-1;
+			const rotation = -Math.atan2(
+				model.points[len].y-model.points[len-1].y,
+				model.points[len].x-model.points[len-1].x
+			);
+			this._elMap.rArrow.attr('rotation', rotation);
+			this._elMap.rArrow.setShape({
+				x: model.points[len].x,
+				y: model.points[len].y
+			});
+		}
+	}
+
+	setState(model) {
+		const data = model.entity.data;
+		const mapType = store.state.map.mapType;
+		const pipeColorMap = store.state.map.pipeColorMap;
+		const projectSign = store.state.project.sign;
+
+		if (data && this._elMap.flow) {
+			if (data.filled) {
+				this._elMap.flow.show();
+				switch (data.from) {
+				case 'A': this.setFlowRun(data, true); break;
+				case 'B': this.setFlowRun(data, false); break;
+				default: this.setFlowStop(); break;
+				}
+
+				if (data.filler) {
+					if (projectSign == 'neepu') {
+						pipeColorMap[data.filler] && this._elMap.flow.setStyle({stroke: pipeColorMap[data.filler].name});
+					} else {
+						const stroke = model.color;
+						this._elMap.flow.setStyle({stroke});
+					}
+					if (mapType !== MapTypeEnum.Site) {
+						this._elMap.line.hide();
+					}
+					// this._elMap.line.hide();
+				}
+			} else {
+				this._elMap.flow.hide();
+				if (mapType !== MapTypeEnum.Site) {
+					this._elMap.line.show();
+				}
+			}
+		}
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+		model.points.map(elem => {
+			elem.x += e.dx;
+			elem.y += e.dy;
+		});
+
+		this.setShape(model);
+	}
+
+	setFlowRun(data, clockwise) {
+		const offsetMap = clockwise ? [32, 16, 0] : [0, 16, 32];
+		// const flowSpeed = Math.ceil(data.speed);
+		const flowSpeed = 5;
+		if (this._elMap.flow) {
+			this._elMap.flow.stopAnimation();
+			if (flowSpeed > 0) {
+				this._elMap.flow.animate('style', true)
+					.when(0, { lineDashOffset: offsetMap[0] * flowSpeed })
+					.when(1000, { lineDashOffset: offsetMap[1] * flowSpeed })
+					.when(2000, { lineDashOffset: offsetMap[2] * flowSpeed })
+					.start();
+			}
+		}
+
+	}
+
+	setFlowStop() {
+		if (this._elMap.flow) {
+			this._elMap.flow.stopAnimation();
+		}
+	}
+
+	setFlowClear() {
+		if (this._elMap.flow) {
+			this.remove(this._elMap.flow);
+		}
+	}
+
+	doActive(zr) {
+		if (zr||this.__zr) {
+			const style = this._shape.style;
+			const level = zr||this.__zr;
+			const falg = handleColor(this._shape.model.color, '#fff');
+			const stroke = falg ? style.pipeHover2Color : style.pipeHover2ColorDef;
+			if (this._elMap.line) {
+				level.addHover(this._elMap.line, { stroke });
+			}
+
+			this._elMap.lines.forEach(elem => {
+				if (elem) {
+					level.addHover(elem, { stroke });
+				}
+			});
+
+			this._elMap.lText && this._elMap.lText.show();
+
+			this._elMap.rText && this._elMap.rText.show();
+
+			if (!(
+				['Inlet', 'Outlet'].includes(this._shape.model.leftArrow) ||
+				['Inlet', 'Outlet'].includes(this._shape.model.rightArrow))) {
+				[this._elMap.lArrow, this._elMap.rArrow].forEach(el =>{
+					if (el) {
+						level.addHover(el, {
+							stroke: el.shape.path.includes('stroke')
+								? stroke
+								: 'transparent',
+							fill: el.shape.path.includes('fill')
+								? stroke
+								: 'transparent'
+						});
+					}
+				});
+			}
+		}
+	}
+
+	doInactive(zr) {
+		if (zr||this.__zr) {
+			const level = zr||this.__zr;
+			[this._elMap.line,
+				...this._elMap.lines,
+				this._elMap.lText,
+				this._elMap.rText,
+				this._elMap.lArrow,
+				this._elMap.rArrow
+			].forEach(elem => {
+				if (elem) {
+					level.removeHover(elem);
+				}
+			});
+			this._elMap.lText && this._elMap.lText.hide();
+
+			this._elMap.rText && this._elMap.rText.hide();
+		}
+	}
+
+	getViewTipsPoint() {}
+}

src/iscs_new/shape/graph/Measure/index.js

@@ -0,0 +1,183 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import * as utils from '../../../utils/utils';
+import Vue from 'vue';
+import store from '@/store';
+import ConstConfig from '@/scripts/ConstConfig';
+
+class Adaptor {
+	constructor({model}, state, graph) {
+		this.__graph = graph;
+		this.__model = model;
+		this.__state = state;
+	}
+
+	get() {
+		const model = this.__model;
+		const sceneType = this.__state.mapType;
+		const block = sceneType ? utils.getBlockBySceneType(model, sceneType) : null;
+
+		this.__graph._block = block;
+
+		return Object.assign(model, block);
+	}
+}
+
+export default class Measure extends graphic.Group {
+	constructor(painter, shape, state) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._state = state;
+		this._painter = painter;
+		this._state = state;
+		this._block = null;
+		this._adaptor = new Adaptor(shape, state, this);
+		this._elMap = {
+			text: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		const model = this._shape.model;
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		} else if (model.description) {
+			this._painter.$tipsHandle.trigger('show', {
+				x: e.offsetX,
+				y: e.offsetY,
+				text: model.description,
+				target: e.target
+			});
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw &&!map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		} else {
+			this._painter.$tipsHandle.trigger('hide');
+		}
+	}
+
+	create() {
+		const model = this._adaptor.get();
+		const modelLink = Vue.prototype.$maps.getLinkByModel(model); // 关联关系
+		let textFill = model.color || '#fff';
+		if (modelLink) {
+			textFill = modelLink.writable ? '#13f95a': model.color || '#fff';
+		}
+
+		if (this._block) {
+			this._elMap.text = new graphic.Text({
+				zlevel: model.zlevel,
+				z: model.z,
+				style: {
+					x: model.point.x,
+					y: model.point.y,
+					fontFamily: 'Times New Roman',
+					fontWeight: 'normal',
+					fontSize: model.size,
+					textVerticalAlign: 'middle',
+					textBackgroundColor: 'transparent',
+					text: this.format('--', model.unit),
+					textFill: model.color || '#fff',
+					textAlign: 'center',
+					textPadding: [3, 3, 1, 3],
+					rich: {
+						txt: {
+							fontSize: model.size,
+							textVerticalAlign: 'middle',
+							textFill: textFill
+						},
+						sup: {
+							fontSize: parseInt(model.size / 3),
+							textVerticalAlign: 'top'
+						},
+						sub: {
+							fontSize: parseInt(model.size / 3),
+							textVerticalAlign: 'bottom'
+						}
+					}
+				}
+			});
+		}
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		if (this._elMap.text) {
+			this._elMap.text.setStyle({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+	}
+
+	setState(model) {
+		const data = model.entity.data ||{};
+		const decimalPlace = model.decimalPlace||0;
+
+		if (this._elMap.text && data) {
+			const value = data.value == undefined? '--' : Number(data.value||0).toFixed(decimalPlace);
+			this._elMap.text.setStyle({text: this.format(value, model.unit) });
+		}
+	}
+
+	format(value, unit) {
+		const projectSign = store.state.project.sign;
+		let msg = value;
+		if (projectSign != 'neepu') {
+			const obj = ConstConfig.ConstSelect.UnitTypeList.find(el => el.value == unit);
+			if (value != '--' && obj && obj.convert) {
+				msg = obj.convert(value);
+			}
+			return `{txt|${msg}} ${unit}`;
+		}
+		return `{txt|${msg}} ${unit}`;
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.text && level) {
+			level.addHover(this._elMap.text, {
+				opacity: style.maskOpacity,
+				textBackgroundColor: color.lift(style.measureHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if (this._elMap.text &&level) {
+			level.removeHover(this._elMap.text);
+		}
+	}
+
+	getViewTipsPoint() {
+		const model = this._shape.model;
+		return {
+			x: model.point.x,
+			y: model.point.y
+		};
+	}
+}

src/iscs_new/shape/graph/Pid/index.js

@@ -0,0 +1,159 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+
+export default class Pid extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			text: null,
+			button: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		const model = this._shape.model;
+		if (this._shape.draw) {
+			this._elMap.button.attr({cursor: 'pointer'});
+			this.doActive(this.__zr);
+		} else if (model.description) {
+			this._painter.$tipsHandle.trigger('show', {
+				x: e.offsetX,
+				y: e.offsetY,
+				text: model.description,
+				target: e.target
+			});
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this._elMap.button.attr({cursor: 'default'});
+			this.doInactive(this.__zr);
+		} else {
+			this._painter.$tipsHandle.trigger('hide');
+		}
+	}
+
+	create() {
+		const model = this._shape.model;
+		const style = this._shape.style;
+
+		this._elMap.button = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			shape: {
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2,
+				width: model.width,
+				height: model.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.Pid].button.fill,
+				stroke: style[panelType.Pid].button.stroke,
+				lineWidth: style[panelType.Pid].button.lineWidth,
+				shadowColor: '#dfdfdf',
+				shadowOffsetX: 1,
+				shadowOffsetY: 1
+			}
+		});
+
+		this._elMap.text = new graphic.Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 2,
+			style: {
+				x: model.point.x,
+				y: model.point.y,
+				fontWeight: style[panelType.Pid].text.fontWeight,
+				fontFamily: style.fontFamily,
+				fontSize: model.fontSize,
+				text: model.text,
+				textFill: '#000',
+				textPadding: [4, 4],
+				textAlign: 'center',
+				textVerticalAlign: 'middle'
+			}
+		});
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		if (this._elMap.button) {
+			this._elMap.button.setShape({
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2
+			});
+		}
+
+		if (this._elMap.text) {
+			this._elMap.text.setStyle({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+	}
+
+	setState(model) {}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.button && level) {
+			level.addHover(this._elMap.button, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.graphHover2Color, style.liftLevel)
+			});
+		}
+
+		if (this._elMap.text && level) {
+			level.addHover(this._elMap.text, {
+				opacity: style.maskOpacity,
+				textFill: color.lift(style.textHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if ( this._elMap.button && level) {
+			level.removeHover(this._elMap.button);
+		}
+
+		if ( this._elMap.text && level) {
+			level.removeHover(this._elMap.text);
+		}
+	}
+
+	getViewTipsPoint() {
+		if (this._elMap.button) {
+			const button = this._elMap.button.getBoundingRect();
+			return {
+				x: button.x + button.width/2,
+				y: button.y
+			};
+		}
+	}
+}

src/iscs_new/shape/graph/Popup/index.js

@@ -0,0 +1,149 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+
+export default class Popup extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			text: null,
+			button: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this._elMap.button.attr({cursor: 'pointer'});
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this._elMap.button.attr({cursor: 'default'});
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const model = this._shape.model;
+		const style = this._shape.style;
+
+		this._elMap.button = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			shape: {
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2,
+				width: model.width,
+				height: model.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.Popup].button.fill,
+				stroke: style[panelType.Popup].button.stroke,
+				lineWidth: style[panelType.Popup].button.lineWidth,
+				shadowColor: '#dfdfdf',
+				shadowOffsetX: 1,
+				shadowOffsetY: 1
+			}
+		});
+
+		this._elMap.text = new graphic.Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 2,
+			style: {
+				x: model.point.x,
+				y: model.point.y,
+				fontWeight: style[panelType.Popup].text.fontWeight,
+				fontFamily: style.fontFamily,
+				fontSize: model.fontSize,
+				text: model.text,
+				textFill: '#000',
+				textPadding: [4, 4],
+				textAlign: 'center',
+				textVerticalAlign: 'middle'
+			}
+		});
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		if (this._elMap.button) {
+			this._elMap.button.setShape({
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2
+			});
+		}
+
+		if (this._elMap.text) {
+			this._elMap.text.setStyle({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+	}
+
+	setState(model) {}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.button && level) {
+			level.addHover(this._elMap.button, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.graphHover2Color, style.liftLevel)
+			});
+		}
+
+		if (this._elMap.text && level) {
+			level.addHover(this._elMap.text, {
+				opacity: style.maskOpacity,
+				textFill: color.lift(style.textHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if ( this._elMap.button && level) {
+			level.removeHover(this._elMap.button);
+		}
+
+		if ( this._elMap.text && level) {
+			level.removeHover(this._elMap.text);
+		}
+	}
+
+	getViewTipsPoint() {
+		if (this._elMap.button) {
+			const button = this._elMap.button.getBoundingRect();
+			return {
+				x: button.x + button.width/2,
+				y: button.y
+			};
+		}
+	}
+}

src/iscs_new/shape/graph/ProgramControl/index.js

@@ -0,0 +1,308 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+
+export default class ProgramControl extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			line: null,
+			button: null,
+			blockStart: null,
+			blockReset: null,
+			blockStop: null,
+			start: null,
+			reset: null,
+			stop: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		const model = this._shape.model;
+		if (this._shape.draw) {
+			this._elMap.button.attr({cursor: 'pointer'});
+			this.doActive(this.__zr);
+		} else if (model.description) {
+			this._painter.$tipsHandle.trigger('show', {
+				x: e.offsetX,
+				y: e.offsetY,
+				text: model.description,
+				target: e.target
+			});
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this._elMap.button.attr({cursor: 'default'});
+			this.doInactive(this.__zr);
+		} else {
+			this._painter.$tipsHandle.trigger('hide');
+		}
+	}
+
+	create() {
+		const model = this._shape.model;
+		const style = this._shape.style;
+
+		this._elMap.line = new graphic.Line({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 9,
+			shape: {
+				x1: model.point.x+style[panelType.ProgramControl].button.width/2,
+				y1: model.point.y+style[panelType.ProgramControl].button.height/2,
+				x2: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y2: model.point.y-style[panelType.ProgramControl].button.height/2
+			},
+			style: {
+				stroke: style[panelType.ProgramControl].line.stroke,
+				lineWidth: style[panelType.ProgramControl].line.lineWidth,
+				lineCap: 'round'
+			}
+		});
+
+		this._elMap.button = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width,
+				height: style[panelType.ProgramControl].button.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.ProgramControl].button.fill,
+				stroke: style[panelType.ProgramControl].button.stroke,
+				lineWidth: style[panelType.ProgramControl].button.lineWidth
+			}
+		});
+
+		this._elMap.blockStart = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 3,
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.ProgramControl].block.fill,
+				stroke: style[panelType.ProgramControl].block.stroke,
+				lineWidth: style[panelType.ProgramControl].block.lineWidth
+			}
+		});
+
+		this._elMap.blockReset = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 3,
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.ProgramControl].block.fill,
+				stroke: style[panelType.ProgramControl].block.stroke,
+				lineWidth: style[panelType.ProgramControl].block.lineWidth
+			}
+		});
+
+		this._elMap.blockStop = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 3,
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.ProgramControl].block.fill,
+				stroke: style[panelType.ProgramControl].block.stroke,
+				lineWidth: style[panelType.ProgramControl].block.lineWidth,
+				r: [1]
+			}
+		});
+
+		this._elMap.start = new graphic.Svg({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 5,
+			origin: [0, 0],
+			rotation: 0,
+			scale: [1, 1],
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				path: 'M6 12 L-4 6 L-4 18Z'
+			},
+			style: {
+				fill: style[panelType.ProgramControl].indicate.fill
+			}
+		});
+
+		this._elMap.reset = new graphic.Svg({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 5,
+			origin: [0, 0],
+			rotation: 0,
+			scale: [1, 1],
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				path: 'M6 6 L6 18 L1 18 L1 6Z M-6 6 L-6 18 L-1 18 L-1 6Z'
+			},
+			style: {
+				fill: style[panelType.ProgramControl].indicate.fill
+			}
+		});
+
+		this._elMap.stop = new graphic.Svg({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 5,
+			origin: [0, 0],
+			rotation: 0,
+			scale: [1, 1],
+			shape: {
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				path: 'M6 6 L6 18 L-6 18 L-6 6Z'
+			},
+			style: {
+				fill: style[panelType.ProgramControl].indicate.fill
+			}
+		});
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		const style = this._shape.style;
+		if (this._elMap.line) {
+			this._elMap.line.setShape({
+				x1: model.point.x+style[panelType.ProgramControl].button.width/2,
+				y1: model.point.y+style[panelType.ProgramControl].button.height/2,
+				x2: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y2: model.point.y-style[panelType.ProgramControl].button.height/2
+			});
+		}
+
+		if (this._elMap.button) {
+			this._elMap.button.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2
+			});
+		}
+
+		if (this._elMap.blockStart) {
+			this._elMap.blockStart.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height
+			});
+		}
+
+		if (this._elMap.blockReset) {
+			this._elMap.blockReset.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height
+			});
+		}
+
+		if (this._elMap.blockStop) {
+			this._elMap.blockStop.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2,
+				width: style[panelType.ProgramControl].button.width/3,
+				height: style[panelType.ProgramControl].button.height
+			});
+		}
+
+		if (this._elMap.start) {
+			this._elMap.start.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2
+			});
+		}
+
+		if (this._elMap.reset) {
+			this._elMap.reset.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2
+			});
+		}
+
+		if (this._elMap.stop) {
+			this._elMap.stop.setShape({
+				x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2 + style[panelType.ProgramControl].button.width/6,
+				y: model.point.y-style[panelType.ProgramControl].button.height/2
+			});
+		}
+	}
+
+	setState(model) {}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.button && level) {
+			level.addHover(this._elMap.button, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.graphHover2Color, style.liftLevel),
+				stroke: color.lift(style.graphHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if ( this._elMap.button && level) {
+			level.removeHover(this._elMap.button);
+		}
+	}
+
+	getViewTipsPoint() {
+		if (this._elMap.button) {
+			const button = this._elMap.button.getBoundingRect();
+			return {
+				x: button.x + button.width/2,
+				y: button.y
+			};
+		}
+	}
+}

src/iscs_new/shape/graph/Switching/index.js

@@ -0,0 +1,195 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+
+export default class Switching extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			text: null,
+			button: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+		this.on('mousedown', this.mousedown, this);
+		this.on('mouseup', this.mouseup, this);
+	}
+
+	mousedown(e) {
+		const model = this._shape.model;
+		if (model.isReset &&
+			!this._shape.draw &&
+			this._elMap.button) {
+			this._elMap.button.setStyle({
+				fill: '#FF0000'
+			});
+		}
+	}
+
+	mouseup(e) {
+		const model = this._shape.model;
+		const style = this._shape.style;
+		if (model.isReset &&
+			!this._shape.draw &&
+			this._elMap.button) {
+			setTimeout(() => {
+				this._elMap.button.setStyle({
+					fill: style[panelType.Switching].button.fill
+				});
+			}, 200);
+
+		}
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this._elMap.button.attr({cursor: 'pointer'});
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this._elMap.button.attr({cursor: 'default'});
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const model = this._shape.model;
+		const style = this._shape.style;
+
+		this._elMap.button = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			shape: {
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2,
+				width: model.width,
+				height: model.height,
+				r: [1]
+			},
+			style: {
+				fill: style[panelType.Switching].button.fill,
+				stroke: style[panelType.Switching].button.stroke,
+				lineWidth: style[panelType.Switching].button.lineWidth,
+				shadowColor: '#dfdfdf',
+				shadowOffsetX: 1,
+				shadowOffsetY: 1
+			}
+		});
+
+		this._elMap.text = new graphic.Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 2,
+			style: {
+				x: model.point.x,
+				y: model.point.y,
+				fontWeight: style[panelType.Switching].text.fontWeight,
+				fontFamily: style.fontFamily,
+				fontSize: model.fontSize,
+				text: model.putInText,
+				textFill: '#000',
+				textPadding: [4, 4],
+				textAlign: 'center',
+				textVerticalAlign: 'middle'
+			}
+		});
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		if (this._elMap.button) {
+			this._elMap.button.setShape({
+				x: model.point.x-model.width/2,
+				y: model.point.y-model.height/2
+			});
+		}
+
+		if (this._elMap.text) {
+			this._elMap.text.setStyle({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+	}
+
+	setState(model) {
+		const entity = model.entity||{};
+		const data = entity.data ||{};
+		if (!model.isReset &&
+			!this._shape.draw &&
+			entity.data) {
+			if (this._elMap.button) {
+				this._elMap.button.setStyle({
+					fill: data.status? '#FF0000' : '#3CB371'
+				});
+			}
+
+			if (this._elMap.text) {
+				this._elMap.text.setStyle({
+					text: data.status? model.putInText: model.cutOffText
+				});
+			}
+		}
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.button && level) {
+			level.addHover(this._elMap.button, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.graphHover2Color, style.liftLevel)
+			});
+		}
+
+		if (this._elMap.text && level) {
+			level.addHover(this._elMap.text, {
+				opacity: style.maskOpacity,
+				textFill: color.lift(style.textHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if ( this._elMap.button && level) {
+			level.removeHover(this._elMap.button);
+		}
+
+		if ( this._elMap.text && level) {
+			level.removeHover(this._elMap.text);
+		}
+	}
+
+	getViewTipsPoint() {
+		if (this._elMap.button) {
+			const button = this._elMap.button.getBoundingRect();
+			return {
+				x: button.x + button.width/2,
+				y: button.y
+			};
+		}
+	}
+}

src/iscs_new/shape/graph/Table/constant/export.js

@@ -0,0 +1,12 @@
+export {default as Table_Template} from './table-template.js';
+export {default as Table_Water_Device_Screen} from './table-water-device-screen.js';
+export {default as Table_Water_Elements} from './table-water-elements.js';
+export {default as Table_Supercritical_Furnace_Sampling} from './table-supercritical-furnace-sampling.js';
+
+export const templateList = [
+	{value: 'Table-Template', label: '模板示例'},
+	{value: 'Table-Water-Device-Screen', label: '水汽取样装置-设备表'},
+	{value: 'Table-Water-Elements', label: '水汽取样装置-元素表'},
+	{value: 'Table-Supercritical-Furnace-Sampling', label: '超临界直流炉取样点-设备表'}
+]
+;

src/iscs_new/shape/graph/Table/constant/table-supercritical-furnace-sampling.js

@@ -0,0 +1,176 @@
+const textStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#0000FF',
+	textAlign: 'center',
+	textVerticalAlign: 'middle'
+};
+
+const orderStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#000000',
+	textAlign: 'center',
+	textVerticalAlign: 'middle'
+};
+
+export default {
+	z2: 1,
+	shape: {
+		dataSource: [
+			[
+				{
+					type: 'text',
+					text: '序号',
+					...textStyle
+				},
+				{
+					type: 'order',
+					text: '1',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '2',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '3',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '4',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '5',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '6',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '7',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '8',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '9',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '10',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '11',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '12',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '13',
+					...orderStyle
+				}
+			],
+			[
+				{
+					type: 'text',
+					text: '名称',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '除氧器出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '除氧器入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '省煤器入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '启动分离器排水',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '顶棚入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '饱和蒸汽',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '过热蒸汽',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '再热蒸汽出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '凝结水泵出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '高压加热器疏水',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '低压加热器疏水',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '加氨、加氧点后',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '凝补水箱入口',
+					...textStyle
+				}
+			]
+		],
+		wList: [60, ...new Array(13).fill(110)],
+		hList: new Array(2).fill(32)
+	},
+	style: {
+		lineWidth: 1,
+		backgroundColor: '#ffffcc',
+		stroke: '#000000'
+	}
+};

src/iscs_new/shape/graph/Table/constant/table-template.js

@@ -0,0 +1,58 @@
+export default {
+	z2: 1,
+	shape: {
+		dataSource: [
+			[
+				{
+					type: 'order',
+					fontSize: 14,
+					fontWeight: 'bold',
+					fontFamily: 'consolas',
+					text: '1',
+					textFill: '#000',
+					textAlign: 'center',
+					textVerticalAlign: 'middle'
+				}, {
+					type: 'button',
+					fontSize: 16,
+					fontWeight: 'normal',
+					fontFamily: 'consolas',
+					text: 'button',
+					textFill: '#000',
+					textAlign: 'center',
+					textVerticalAlign: 'middle'
+				}
+			],
+			[
+				{
+					type: 'element',
+					fontSize: 16,
+					fontWeight: 'bold',
+					fontFamily: 'consolas',
+					text: 'element',
+					textFill: '#000',
+					textAlign: 'center',
+					textVerticalAlign: 'middle'
+				},
+				{
+					type: 'text',
+					name: '3',
+					fontSize: 22,
+					fontWeight: 'bold',
+					fontFamily: 'consolas',
+					text: 'text',
+					textFill: '#000',
+					textAlign: 'center',
+					textVerticalAlign: 'middle'
+				}
+			]
+		],
+		wList: [180, 180, 180],
+		hList: [36, 36, 36]
+	},
+	style: {
+		lineWidth: 1,
+		backgroundColor: '#ffffcc',
+		stroke: '#000000'
+	}
+};

src/iscs_new/shape/graph/Table/constant/table-water-device-screen.js

@@ -0,0 +1,176 @@
+const textStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#0000FF',
+	textAlign: 'center',
+	textVerticalAlign: 'middle'
+};
+
+const orderStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#000000',
+	textAlign: 'center',
+	textVerticalAlign: 'middle'
+};
+
+export default {
+	z2: 1,
+	shape: {
+		dataSource: [
+			[
+				{
+					type: 'text',
+					text: '序号',
+					...textStyle
+				},
+				{
+					type: 'order',
+					text: '1',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '2',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '3',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '4',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '5',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '6',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '7',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '8',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '9',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '10',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '11',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '12',
+					...orderStyle
+				},
+				{
+					type: 'order',
+					text: '13',
+					...orderStyle
+				}
+			],
+			[
+				{
+					type: 'text',
+					text: '名称',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '凝结水泵出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '除氧器入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '除氧器出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '省煤器进口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '主蒸汽',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '饱和蒸汽',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '炉水',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '再热气入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '再热气出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '低加热出口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '精处理',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '补给水箱入口',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: '补给水泵出口',
+					...textStyle
+				}
+			]
+		],
+		wList: [60, ...new Array(13).fill(110)],
+		hList: new Array(2).fill(32)
+	},
+	style: {
+		lineWidth: 1,
+		backgroundColor: '#ffffcc',
+		stroke: '#000000'
+	}
+};

src/iscs_new/shape/graph/Table/constant/table-water-elements.js

@@ -0,0 +1,129 @@
+const textStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#0000FF',
+	textAlign: 'center',
+	textVerticalAlign: 'middle'
+};
+
+const richStyle = {
+	fontSize: 14,
+	fontWeight: 'bold',
+	fontFamily: 'consolas',
+	textFill: '#0000FF',
+	textAlign: 'center',
+	rich: {
+		sup: {
+			fontSize: 6,
+			textVerticalAlign: 'top'
+		},
+		sub: {
+			fontSize: 6,
+			textVerticalAlign: 'bottom'
+		}
+	}
+};
+
+export default {
+	z2: 1,
+	shape: {
+		dataSource: [
+			[
+				{
+					type: 'text',
+					text: 'PH',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: 'PH分析仪',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: 'N{sub|2}H{sub|4}',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '联氨分析仪',
+					...textStyle
+				}
+			],
+			[
+				{
+					type: 'text',
+					text: 'CC',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '阳电导率分析仪',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: 'SO{sub|2}',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '硅酸根分析仪',
+					...textStyle
+				}
+			],
+			[
+				{
+					type: 'text',
+					text: 'SC',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '比电导率分析仪',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: 'PO{sub|4}{sup|3-}',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '磷酸根分析仪',
+					...textStyle
+				}
+			],
+			[
+				{
+					type: 'text',
+					text: 'O{sub|2}',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '溶解氧分析仪',
+					...textStyle
+				},
+				{
+					type: 'text',
+					text: 'NA',
+					...richStyle
+				},
+				{
+					type: 'text',
+					text: '钠离子分析仪',
+					...textStyle
+				}
+			]
+		],
+		wList: [60, 140, 60, 140],
+		hList: [32, 32, 32, 32]
+	},
+	style: {
+		lineWidth: 1,
+		backgroundColor: '#ffffcc',
+		stroke: '#000000'
+	}
+};

src/iscs_new/shape/graph/Table/index.js

@@ -0,0 +1,144 @@
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+
+export default class Table extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			table: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const draw = this._shape.draw;
+		const model = this._shape.model;
+		const style = this._shape.style;
+
+		this._elMap.header = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: -1,
+			cursor: draw? 'pointer': 'default',
+			shape: {
+				x: model.point.x,
+				y: model.point.y,
+				width: model.width,
+				height: style[panelType.Table].header.height
+			},
+			style: {
+				stroke: model.lineColor,
+				lineWidth: model.lineWidth,
+				fill: model.headerBg
+			}
+		});
+
+		this._elMap.body = new graphic.Rect({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: -1,
+			silent: true,
+			shape: {
+				x: model.point.x,
+				y: model.point.y+style[panelType.Table].header.height,
+				width: model.width,
+				height: model.height
+			},
+			style: {
+				stroke: model.lineColor,
+				lineWidth: model.lineWidth,
+				fill: model.bodyBg
+			}
+		});
+
+		this._elMap.title = new graphic.Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			z2: 0,
+			cursor: draw? 'pointer': 'default',
+			style: {
+				x: model.point.x+model.width/2,
+				y: model.point.y+style[panelType.Table].header.height/2,
+				fontWeight: style[panelType.Table].header.fontWeight,
+				fontSize: style[panelType.Table].header.fontSize,
+				fontFamily: style.fontFamily,
+				text: model.title||'标题',
+				textAlign: 'center',
+				textVerticalAlign: 'middle'
+			}
+		});
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+
+	}
+
+	setShape(model) {
+		const style = this._shape.style;
+
+		if (this._elMap.header) {
+			this._elMap.header.setShape({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+
+		if (this._elMap.body) {
+			this._elMap.body.setShape({
+				x: model.point.x,
+				y: model.point.y+style[panelType.Table].header.height
+			});
+		}
+
+		if (this._elMap.title) {
+			this._elMap.title.setStyle({
+				x: model.point.x+model.width/2,
+				y: model.point.y+style[panelType.Table].header.height/2
+			});
+		}
+	}
+
+	setState(model, e) {
+
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+
+	}
+
+	doInactive(zr) {
+
+	}
+
+	getViewTipsPoint() {}
+
+}

src/iscs_new/shape/graph/Table/tableIndex.js

@@ -0,0 +1,111 @@
+import store from '@/store';
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import * as View from './constant/export.js';
+import { transformed } from '../../../utils/transform';
+
+export default class Table extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+		this._elMap = {
+			table: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const draw = this._shape.draw;
+		const mapType = store.state.map.mapType;
+		const model = this._shape.model;
+		const template = (model.template || 'Table-Template').replace(/-/g, '_');
+		const option = View[template];
+
+		if (model.sceneTypes && model.sceneTypes.includes(mapType)) {
+			this._elMap.table = new graphic.Table({
+				zlevel: model.zlevel || option.zlevel,
+				z: model.z || option.z,
+				z2: model.z2 || option.z2,
+				cursor: draw? 'pointer': 'default',
+				shape: {
+					point: model.point,
+					...option.shape
+				},
+				style: option.style
+			});
+
+			transformed(this._elMap.table, {
+				scale: [model.scale, model.scale],
+				rotation: model.rotation || 0
+			});
+		}
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+
+	}
+
+	setShape(model) {
+
+	}
+
+	setState(model, e) {
+
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+		const scale = model.scale;
+
+		model.point.x += e.dx / scale;
+		model.point.y += e.dy / scale;
+
+		if (this._elMap.table) {
+			this._elMap.table.dragging({dx: e.dx/scale, dy: e.dy/scale});
+		}
+
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const table = this._elMap.table;
+		const level = zr||this.__zr;
+		if (table && table._elMap.bg && level) {
+			level.addHover(table._elMap.bg, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.maskHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const table = this._elMap.table;
+		const level = zr||this.__zr;
+		if (table && table._elMap.bg && level) {
+			level.removeHover(table._elMap.bg);
+		}
+	}
+
+	getShapeTipsPoint(step) {}
+
+}

src/iscs_new/shape/graph/Text/index.js

@@ -0,0 +1,136 @@
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import store from '@/store';
+
+export default class Text2 extends graphic.Group {
+	constructor(painter, shape) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._painter = painter;
+
+		this._rotation = null;
+		this._origin = null;
+
+		this._elMap = {
+			text: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		}
+	}
+
+	create() {
+		const draw = this._shape.draw;
+		const mapType = store.state.map.mapType;
+		const model = this._shape.model;
+		const backGroundColor = this.getTextBgColor(model);
+		const textStyle = this.getTextStyle(model);
+
+		this._rotation = -Math.PI / 180 * Number(model.rotate||0);
+		this._origin = [model.point.x, model.point.y];
+
+		if (model.sceneTypes && model.sceneTypes.includes(mapType)) {
+			this._elMap.text = new graphic.Text({
+				zlevel: model.zlevel,
+				z: model.z,
+				origin: this._origin,
+				rotation: this._rotation,
+				silent: !draw,
+				style: {
+					x: model.point.x,
+					y: model.point.y,
+					fontWeight: 'normal',
+					textBackgroundColor: backGroundColor,
+					fontSize: model.fontSize,
+					fontFamily: model.font,
+					text: textStyle.textValue || textStyle.value || '',
+					textLineHeight: model.fontSize+4,
+					textFill: model.fontColor,
+					textPadding: [4, 4],
+					textAlign: textStyle.textAlign,
+					textVerticalAlign: 'middle'
+				}
+			});
+		}
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	getTextStyle(model) {
+		const pattern = /\{<(?<textAlign>\w+)>\}\{<(?<textVerticalAlign>\w+)>\}(?<textValue>(.|\n)*)|(?<value>(.|\n)*)/;
+		const groups = (pattern.exec(model.name)||{}).groups||{};
+		return groups;
+	}
+
+	getTextBgColor(model) {
+		const pattern = /\{<(?<active>\w+)>\}(?<string>(.|\n)*)/;
+		const groups = (pattern.exec(model.backGroundColor)||{}).groups||{};
+
+		return groups.active == 'image'
+			? { image: `${process.env.VUE_APP_BASE_RESOURCE_URL}${groups.string}` }
+			: groups.active == 'color'
+				? groups.string
+				: model.backGroundColor;
+	}
+
+	setShape(model) {
+		if (this._elMap.text) {
+			this._origin = [model.point.x, model.point.y];
+			this._elMap.text.attr('origin', this._origin);
+			this._elMap.text.setStyle({
+				x: model.point.x,
+				y: model.point.y
+			});
+		}
+	}
+
+	setState(model) {
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.text && level) {
+			level.addHover(this._elMap.text, {
+				opacity: style.maskOpacity,
+				textBackgroundColor: color.lift(style.textHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if (this._elMap.text && level) {
+			level.removeHover(this._elMap.text);
+		}
+	}
+
+	getViewTipsPoint() {}
+}

src/iscs_new/shape/graph/Warning/index.js

@@ -0,0 +1,172 @@
+import RadialGradient from 'zrender/src/graphic/RadialGradient';
+import * as color from 'zrender/src/tool/color';
+import * as graphic from '../../../graph/graphic';
+import panelType from '../../../constant/panelType';
+import ConstConfig from '@/scripts/ConstConfig';
+
+export default class Warning extends graphic.Group {
+	constructor(painter, shape, state) {
+		super();
+		this._code = shape.model.code;
+		this._type = shape.model._type;
+		this._shape = shape;
+		this._state = state;
+		this._painter = painter;
+		this._state = state;
+		this._elMap = {
+			circle: null
+		};
+
+		this.create();
+
+		this.on('mouseover', this.mouseover, this);
+		this.on('mouseout', this.mouseout, this);
+	}
+
+	mouseover(e) {
+		const model = this._shape.model;
+		if (this._shape.draw) {
+			this.doActive(this.__zr);
+		} else if (model.description) {
+			this._painter.$tipsHandle.trigger('show', {
+				x: e.offsetX,
+				y: e.offsetY,
+				text: model.description,
+				target: e.target
+			});
+		}
+	}
+
+	mouseout(e) {
+		const map = this._painter.$map;
+		if (this._shape.draw && !map.isHover(this._code)) {
+			this.doInactive(this.__zr);
+		} else {
+			this._painter.$tipsHandle.trigger('hide');
+		}
+	}
+
+	create() {
+		const model = this._shape.model;
+		const style = this._shape.style;
+		const distance = 8;
+
+		this._elMap.circle = new graphic.Circle({
+			zlevel: model.zlevel,
+			z: model.z,
+			shape: {
+				cx: model.point.x,
+				cy: model.point.y,
+				r: model.radius||10
+			},
+			style: {
+				lineWidth: style[panelType.Warning].circle.lineWidth,
+				stroke: style[panelType.Warning].circle.stroke,
+				fill: new RadialGradient(0.5, 0.5, 0.5, [
+					{offset: 0, color: '#eeeeee'},
+					{offset: 1, color: '#666666'}
+				])
+			}
+		});
+
+		const signX = ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
+			? -1
+			: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
+				? 1
+				: 0;
+		const signY = ConstConfig.ConstMap.LocationMode.Top.value == model.showPosition
+			? -1
+			: ConstConfig.ConstMap.LocationMode.Bottom.value == model.showPosition
+				? 1
+				: 0;
+		this._elMap.text = new graphic.Text({
+			zlevel: model.zlevel,
+			z: model.z,
+			style: {
+				x: model.point.x + signX*(model.radius+distance),
+				y: model.point.y + signY*(model.radius+distance*2),
+				fontFamily: style.fontFamily,
+				fontWeight: style[panelType.Warning].text.fontWeight,
+				fontSize: style[panelType.Warning].text.fontSize,
+				textFill: style[panelType.Warning].text.textFill,
+				textVerticalAlign: 'middle',
+				text: model.description,
+				textAlign: ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
+					? 'right'
+					: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
+						? 'left'
+						: 'center'
+			}
+		});
+
+		model.textShow? this._elMap.text.show(): this._elMap.text.hide();
+
+		this.setState(model);
+
+		Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
+	}
+
+	setShape(model) {
+		if (this._elMap.circle) {
+			this._elMap.circle.setShape({
+				cx: model.point.x,
+				cy: model.point.y
+			});
+		}
+
+		if (this._elMap.text) {
+			const distance = 8;
+			const signX = ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
+				? -1
+				: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
+					? 1
+					: 0;
+			const signY = ConstConfig.ConstMap.LocationMode.Top.value == model.showPosition
+				? -1
+				: ConstConfig.ConstMap.LocationMode.Bottom.value == model.showPosition
+					? 1
+					: 0;
+			this._elMap.text.setStyle({
+				x: model.point.x + signX*(model.radius+distance),
+				y: model.point.y + signY*(model.radius+distance*2)
+			});
+		}
+	}
+
+	setState(model) {
+	}
+
+	dragging(e) {
+		const model = this._shape.model;
+
+		model.point.x += e.dx;
+		model.point.y += e.dy;
+		this.setShape(model);
+	}
+
+	doActive(zr) {
+		const style = this._shape.style;
+		const level = zr||this.__zr;
+		if (this._elMap.circle && level) {
+			level.addHover(this._elMap.circle, {
+				opacity: style.maskOpacity,
+				fill: color.lift(style.graphHover2Color, style.liftLevel)
+			});
+		}
+	}
+
+	doInactive(zr) {
+		const level = zr||this.__zr;
+		if (this._elMap.circle &&level) {
+			level.removeHover(this._elMap.circle);
+		}
+	}
+
+	getViewTipsPoint() {
+		const model = this._shape.model;
+		return {
+			x: model.point.x,
+			y: model.point.y
+		};
+	}
+}

src/iscs_new/shape/graph/index.js

@@ -0,0 +1,31 @@
+import graphType from '../../constant/graphType';
+
+import Text2 from './Text/index';
+import Table from './Table/index';
+import Table1 from './Table/tableIndex';
+import LinePipe from './LinePipe/index';
+import Resource from './Resource/index';
+import Measure from './Measure/index';
+import Warning from './Warning/index';
+import Switching from './Switching/index';
+import Popup from './Popup/index';
+import ProgramControl from './ProgramControl/index';
+import Pid from './Pid/index';
+
+/** 图库*/
+const mapShape = {};
+
+mapShape[graphType.Text] = Text2;
+mapShape[graphType.Table] = Table;
+mapShape[graphType.Table1] = Table1;
+mapShape[graphType.LinePipe] = LinePipe;
+mapShape[graphType.Resource] = Resource;
+mapShape[graphType.Measure] = Measure;
+mapShape[graphType.Warning] = Warning;
+mapShape[graphType.Switching] = Switching;
+mapShape[graphType.Popup] = Popup;
+mapShape[graphType.ProgramControl] = ProgramControl;
+mapShape[graphType.Pid] = Pid;
+
+export default mapShape;
+

src/iscs_new/shape/index.js

@@ -0,0 +1,14 @@
+import graphMapShape from './graph';
+
+export default {
+	__Shape: {
+		...graphMapShape,
+	},
+	getBuilder(type) {
+		const ShapeClazz = this.__Shape[type];
+		return (...args) => {
+			return ShapeClazz? new ShapeClazz(...args) : null;
+		};
+	}
+};
+

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

@@ -132,6 +132,8 @@ export default {
                 { name: '站厅D', value: 'bgStationD' },
                 { name: '站厅E', value: 'bgStationE' },
                 { name: '站厅F', value: 'bgStationF' },
+				{ name: '门禁站厅A', value: 'bgDoorStationA' },
+                { name: '门禁站台A', value: 'bgDoorStandA' }
             ],
 
             rules: {