From ad7b55704e7708fb5904b7c5b7534404f7373c83 Mon Sep 17 00:00:00 2001 From: ival <610568032@qq.com> Date: Mon, 29 Mar 2021 13:09:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E9=97=A8=E7=A6=81iscs?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=EF=BC=8C=E4=BB=A5=E5=8F=8Aiscs=5Fne?= =?UTF-8?q?w=E7=9A=84=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/iscs_picture/bg-door-stand-A.png | Bin 0 -> 12216 bytes src/assets/iscs_picture/bg-door-station-A.png | Bin 0 -> 14426 bytes src/iscs/shape/picture.js | 6 +- src/iscs_new/shape/Compose.js | 9 + src/iscs_new/shape/Element.js | 8 + src/iscs_new/shape/Shape.js | 27 + src/iscs_new/shape/graph/LinePipe/index.js | 623 ++++++++++++++++++ src/iscs_new/shape/graph/Measure/index.js | 183 +++++ src/iscs_new/shape/graph/Pid/index.js | 159 +++++ src/iscs_new/shape/graph/Popup/index.js | 149 +++++ .../shape/graph/ProgramControl/index.js | 308 +++++++++ src/iscs_new/shape/graph/Switching/index.js | 195 ++++++ .../shape/graph/Table/constant/export.js | 12 + .../table-supercritical-furnace-sampling.js | 176 +++++ .../graph/Table/constant/table-template.js | 58 ++ .../constant/table-water-device-screen.js | 176 +++++ .../Table/constant/table-water-elements.js | 129 ++++ src/iscs_new/shape/graph/Table/index.js | 144 ++++ src/iscs_new/shape/graph/Table/tableIndex.js | 111 ++++ src/iscs_new/shape/graph/Text/index.js | 136 ++++ src/iscs_new/shape/graph/Warning/index.js | 172 +++++ src/iscs_new/shape/graph/index.js | 31 + src/iscs_new/shape/index.js | 14 + .../iscs/iscsDraw/icscComponents/picture.vue | 2 + 24 files changed, 2827 insertions(+), 1 deletion(-) create mode 100644 src/assets/iscs_picture/bg-door-stand-A.png create mode 100644 src/assets/iscs_picture/bg-door-station-A.png create mode 100644 src/iscs_new/shape/Compose.js create mode 100644 src/iscs_new/shape/Element.js create mode 100644 src/iscs_new/shape/Shape.js create mode 100644 src/iscs_new/shape/graph/LinePipe/index.js create mode 100644 src/iscs_new/shape/graph/Measure/index.js create mode 100644 src/iscs_new/shape/graph/Pid/index.js create mode 100644 src/iscs_new/shape/graph/Popup/index.js create mode 100644 src/iscs_new/shape/graph/ProgramControl/index.js create mode 100644 src/iscs_new/shape/graph/Switching/index.js create mode 100644 src/iscs_new/shape/graph/Table/constant/export.js create mode 100644 src/iscs_new/shape/graph/Table/constant/table-supercritical-furnace-sampling.js create mode 100644 src/iscs_new/shape/graph/Table/constant/table-template.js create mode 100644 src/iscs_new/shape/graph/Table/constant/table-water-device-screen.js create mode 100644 src/iscs_new/shape/graph/Table/constant/table-water-elements.js create mode 100644 src/iscs_new/shape/graph/Table/index.js create mode 100644 src/iscs_new/shape/graph/Table/tableIndex.js create mode 100644 src/iscs_new/shape/graph/Text/index.js create mode 100644 src/iscs_new/shape/graph/Warning/index.js create mode 100644 src/iscs_new/shape/graph/index.js create mode 100644 src/iscs_new/shape/index.js diff --git a/src/assets/iscs_picture/bg-door-stand-A.png b/src/assets/iscs_picture/bg-door-stand-A.png new file mode 100644 index 0000000000000000000000000000000000000000..bebbfe90c13b030be1e194d7cc6459d5a1e48ebf GIT binary patch literal 12216 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
M>abn7n7{$e(Md`o(_9(vw4-7_)zXR}F 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 b$!#T?{lN(hPv*!Ev9!+Xs+FkN{PDj4uv6b# literal 0 HcmV?d00001 diff --git a/src/iscs/shape/picture.js b/src/iscs/shape/picture.js index 4f031ae99..bb59d80b4 100644 --- a/src/iscs/shape/picture.js +++ b/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) { diff --git a/src/iscs_new/shape/Compose.js b/src/iscs_new/shape/Compose.js new file mode 100644 index 000000000..a4f47a9a0 --- /dev/null +++ b/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; diff --git a/src/iscs_new/shape/Element.js b/src/iscs_new/shape/Element.js new file mode 100644 index 000000000..79a65732d --- /dev/null +++ b/src/iscs_new/shape/Element.js @@ -0,0 +1,8 @@ +import AbstractShape from './Shape'; + +class Element extends AbstractShape { + constructor() { + } +} + +export default Element; diff --git a/src/iscs_new/shape/Shape.js b/src/iscs_new/shape/Shape.js new file mode 100644 index 000000000..7d001a145 --- /dev/null +++ b/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) {} +} + diff --git a/src/iscs_new/shape/graph/LinePipe/index.js b/src/iscs_new/shape/graph/LinePipe/index.js new file mode 100644 index 000000000..fe609e2b4 --- /dev/null +++ b/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() {} +} diff --git a/src/iscs_new/shape/graph/Measure/index.js b/src/iscs_new/shape/graph/Measure/index.js new file mode 100644 index 000000000..46753f758 --- /dev/null +++ b/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 + }; + } +} diff --git a/src/iscs_new/shape/graph/Pid/index.js b/src/iscs_new/shape/graph/Pid/index.js new file mode 100644 index 000000000..6f165235b --- /dev/null +++ b/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 + }; + } + } +} diff --git a/src/iscs_new/shape/graph/Popup/index.js b/src/iscs_new/shape/graph/Popup/index.js new file mode 100644 index 000000000..84c05207e --- /dev/null +++ b/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 + }; + } + } +} diff --git a/src/iscs_new/shape/graph/ProgramControl/index.js b/src/iscs_new/shape/graph/ProgramControl/index.js new file mode 100644 index 000000000..01b80058c --- /dev/null +++ b/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 + }; + } + } +} diff --git a/src/iscs_new/shape/graph/Switching/index.js b/src/iscs_new/shape/graph/Switching/index.js new file mode 100644 index 000000000..8a0e47d05 --- /dev/null +++ b/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 + }; + } + } +} diff --git a/src/iscs_new/shape/graph/Table/constant/export.js b/src/iscs_new/shape/graph/Table/constant/export.js new file mode 100644 index 000000000..15557e243 --- /dev/null +++ b/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: '超临界直流炉取样点-设备表'} +] +; diff --git a/src/iscs_new/shape/graph/Table/constant/table-supercritical-furnace-sampling.js b/src/iscs_new/shape/graph/Table/constant/table-supercritical-furnace-sampling.js new file mode 100644 index 000000000..742d19ca4 --- /dev/null +++ b/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' + } +}; diff --git a/src/iscs_new/shape/graph/Table/constant/table-template.js b/src/iscs_new/shape/graph/Table/constant/table-template.js new file mode 100644 index 000000000..85f33647f --- /dev/null +++ b/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' + } +}; diff --git a/src/iscs_new/shape/graph/Table/constant/table-water-device-screen.js b/src/iscs_new/shape/graph/Table/constant/table-water-device-screen.js new file mode 100644 index 000000000..9acadf497 --- /dev/null +++ b/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' + } +}; diff --git a/src/iscs_new/shape/graph/Table/constant/table-water-elements.js b/src/iscs_new/shape/graph/Table/constant/table-water-elements.js new file mode 100644 index 000000000..144cf2857 --- /dev/null +++ b/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' + } +}; diff --git a/src/iscs_new/shape/graph/Table/index.js b/src/iscs_new/shape/graph/Table/index.js new file mode 100644 index 000000000..b6aaf5f44 --- /dev/null +++ b/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() {} + +} diff --git a/src/iscs_new/shape/graph/Table/tableIndex.js b/src/iscs_new/shape/graph/Table/tableIndex.js new file mode 100644 index 000000000..1dbf9eb57 --- /dev/null +++ b/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) {} + +} diff --git a/src/iscs_new/shape/graph/Text/index.js b/src/iscs_new/shape/graph/Text/index.js new file mode 100644 index 000000000..a090263f4 --- /dev/null +++ b/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 = /\{<(?\w+)>\}\{<(?\w+)>\}(?(.|\n)*)|(?(.|\n)*)/; + const groups = (pattern.exec(model.name)||{}).groups||{}; + return groups; + } + + getTextBgColor(model) { + const pattern = /\{<(?\w+)>\}(?(.|\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() {} +} diff --git a/src/iscs_new/shape/graph/Warning/index.js b/src/iscs_new/shape/graph/Warning/index.js new file mode 100644 index 000000000..9d025978a --- /dev/null +++ b/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 + }; + } +} diff --git a/src/iscs_new/shape/graph/index.js b/src/iscs_new/shape/graph/index.js new file mode 100644 index 000000000..717c5e74b --- /dev/null +++ b/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; + diff --git a/src/iscs_new/shape/index.js b/src/iscs_new/shape/index.js new file mode 100644 index 000000000..20e22dac9 --- /dev/null +++ b/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; + }; + } +}; + diff --git a/src/views/iscs/iscsDraw/icscComponents/picture.vue b/src/views/iscs/iscsDraw/icscComponents/picture.vue index 63bdde004..5af89efbe 100644 --- a/src/views/iscs/iscsDraw/icscComponents/picture.vue +++ b/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: {