123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659 |
- <template>
- <div :id="maxContainerId" class="graphParentContainer"></div>
- </template>
- <script>
- import * as PIXI from "pixi.js";
- export default {
- props: [],
- data() {
- return {
- maxContainerId:
- new Date().getTime().toString() +
- "_" +
- Math.random().toString().substring(2),
-
- nodeArr: [],
-
- lineArr: [],
-
- labelArr: [],
-
- canvasProObj: {
-
- centerPointerPx: { x: 0, y: 0 },
-
- originalScale: 1,
-
- xJiaValue: 0,
-
- yJiaValue: 0,
-
- textureSource: {},
-
- pixiScale: 1,
-
- positionPxX: 0,
-
- positionPxY: 0,
-
- deep: 0.1,
-
- mouseState: 0,
-
- prevMousePosition: {},
- },
- };
- },
- computed: {},
- methods: {
-
- drawEntry: function (graphInfo) {
- if (!graphInfo) return;
-
- var graphDataObj = this.parseDataToDraw(graphInfo);
- this.nodeArr = graphDataObj.nodeArr;
- this.lineArr = graphDataObj.lineArr;
- this.labelArr = graphDataObj.labelArr;
- this.drawGraph();
- },
-
- resetDraw: function () {
- this.drawGraph();
- },
-
- drawGraph: function () {
- var _this = this;
-
-
-
-
- var pixiContainer = document.getElementById(this.maxContainerId);
-
-
- if (!!_this.pixiApp) {
- while (_this.pixiApp.stage.children.length > 0) {
- _this.pixiApp.stage.removeChildAt(0);
- }
- }
- var pixiApp;
- if (_this.pixiApp == null) {
- pixiApp = new PIXI.Application({
- width: pixiContainer.clientWidth,
- height: pixiContainer.clientHeight,
- antialias: true,
- transparent: true,
- resolution: 1,
-
- });
- pixiApp.renderer.autoResize = true;
- pixiContainer.appendChild(pixiApp.view);
- _this.pixiApp = pixiApp;
- } else pixiApp = _this.pixiApp;
- _this.computeOriginZuobPosition();
-
- _this.nodeArr.forEach((_dataObj) => {
-
- var graphicsRect = new PIXI.Graphics();
- graphicsRect.lineStyle({
- width: 1,
- color: "0x0091ff",
- alpha: 1,
- alignment: 0.5,
- });
- let newCordObj = _this.convertCoordToLeftOrigina({
- x: _dataObj.absolutePosition.x,
- y: _dataObj.absolutePosition.y,
- });
- var newWidth =
- _dataObj.legendObj.size.width * _this.canvasProObj.originalScale;
- var newHeight =
- _dataObj.legendObj.size.height * _this.canvasProObj.originalScale;
- graphicsRect.drawRect(newCordObj.x, newCordObj.y, newWidth, newHeight);
-
- graphicsRect.hitArea = graphicsRect.getBounds();
- graphicsRect.name = _dataObj.id;
-
- graphicsRect.interactive = true;
- graphicsRect.on("click", (event) => {
- _this.clickEventCall(event, 1);
- });
- pixiApp.stage.addChild(graphicsRect);
- return;
- var _legendObj = _dataObj.legendObj;
-
- if (!_this.canvasProObj.textureSource[_legendObj.image.content]) {
- _this.canvasProObj.textureSource[_legendObj.image.content] =
- PIXI.Texture.from(_legendObj.image.content);
- }
-
- var spriteInstanceCoord = _this.convertCoordToLeftOrigina({
- x: _dataObj.position.x,
- y: _dataObj.position.y,
- });
- var spriteWidth =
- _legendObj.defaultSize.width * _this.canvasProObj.originalScale;
- var spriteHeight =
- _legendObj.defaultSize.height * _this.canvasProObj.originalScale;
- var legendSprite = new PIXI.Sprite(
- _this.canvasProObj.textureSource[_legendObj.image.content]
- );
- legendSprite.x = spriteInstanceCoord.x;
- legendSprite.y = spriteInstanceCoord.y;
- legendSprite.width = spriteWidth;
- legendSprite.height = spriteHeight;
- pixiApp.stage.addChild(legendSprite);
- });
-
- _this.labelArr.forEach((_labelObj) => {
- var pixiTextStyle = new PIXI.TextStyle({
- fill: _labelObj.style.color,
- fontSize: _labelObj.style.fontSize,
- fontWeight: _labelObj.style.fontWeight,
-
-
- });
- var textInstance = new PIXI.Text(_labelObj.text, pixiTextStyle);
- textInstance.name = _labelObj.id;
- let newCordObj = _this.convertCoordToLeftOrigina({
- x: _labelObj.absolutePosition.x,
- y: _labelObj.absolutePosition.y,
- });
- textInstance.position.set(newCordObj.x, newCordObj.y);
-
-
- textInstance.interactive = true;
- textInstance.on("click", (event) => {
- _this.clickEventCall(event, 3);
- });
- pixiApp.stage.addChild(textInstance);
- });
-
- _this.lineArr.forEach((_cLine) => {
- var lineColor = "0x" + _cLine.style.lineColor.substring(1);
- var lineInstance = new PIXI.Graphics();
- lineInstance.lineStyle(_cLine.style.lineWidth, lineColor, 1, 0, false);
- var _newStart = _this.convertCoordToLeftOrigina({
- x: _cLine.path[0].x,
- y: _cLine.path[0].y,
- });
- var _newEnd = _this.convertCoordToLeftOrigina({
- x: _cLine.path[1].x,
- y: _cLine.path[1].y,
- });
- lineInstance.moveTo(_newStart.x, _newStart.y);
- lineInstance.lineTo(_newEnd.x, _newEnd.y);
- pixiApp.stage.addChild(lineInstance);
- });
- },
-
- parseDataToDraw: function (graphInfo) {
- var nodeArr = [];
-
- var lineArr = [];
-
- var labelArr = [];
- if (graphInfo.template) {
- var rootContainerArr = graphInfo.template.frame.children;
- parseNode(rootContainerArr, graphInfo.template.frame.location);
- parseLine(graphInfo.lines || []);
- parseMainPies(graphInfo.template.mainPipes);
- }
- return {
- nodeArr,
- lineArr,
- labelArr,
- };
-
- function parseNode(dataArr, absolutePosition) {
- dataArr.forEach((_dataObj) => {
- var newAbsolutePosition = {
- x: _dataObj.location.x + absolutePosition.x,
- y: _dataObj.location.y + absolutePosition.y,
- };
-
- if (_dataObj.label && _dataObj.label.content) {
- let _labelObj = _dataObj.label;
- _labelObj.id = _labelObj.id || Math.random().toString();
- let _style = _labelObj.style || {};
- _style.color =
- _style.color ||
- window.__systemConf.systemGraph.peiDian.text.color;
- _style.fontSize =
- _style.fontSize ||
- window.__systemConf.systemGraph.peiDian.text.size;
- _style.backGround =
- _style.backGround ||
- window.__systemConf.systemGraph.peiDian.text.backGround;
- _style.fontWeight =
- _style.fontWeight ||
- window.__systemConf.systemGraph.peiDian.text.weight;
- var textNewAbsolutePosition = {
- x: _labelObj.location.x + newAbsolutePosition.x,
- y: _labelObj.location.y + newAbsolutePosition.y,
- };
- labelArr.push({
- id: _labelObj.id,
- text: _labelObj.content,
- style: {
- color: _style.color,
- fontSize: _style.fontSize,
- backGround: _style.backGround,
- fontWeight: _style.fontWeight,
- },
-
- absolutePosition: textNewAbsolutePosition,
- });
- _labelObj.style = _style;
- _dataObj.label = _labelObj;
- }
- switch (_dataObj.compType) {
-
- case "container":
- parseNode(_dataObj.children, newAbsolutePosition);
- break;
-
- case "equipmentNode":
- let anchorArr = [];
- let anchorKeys = Object.keys(_dataObj.anchorLocations || {});
- anchorKeys.forEach((_anchorKey) => {
- anchorArr.push({
- name: _anchorKey,
-
- relativePosition: _dataObj.anchorLocations[_anchorKey],
- });
- });
- nodeArr.push({
- id: _dataObj.id,
- name: _dataObj.dataObject.localName,
-
- legendObj: {
- content: "图的地址或base64串",
- size: {
- width: _dataObj.size.x,
- height: _dataObj.size.y,
- },
- },
-
- absolutePosition: newAbsolutePosition,
- anchorArr: anchorArr,
- });
- break;
- }
- });
- }
-
- function parseLine(lines) {
- lines.forEach((_line) => {
- if (_line.flag != "duplicate") {
- _line.id = _line.id || _line.dataObjectId;
- let lineDefaultStyle = window.__systemConf.systemGraph.peiDian.line;
- lineArr.push({
- id: _line.id,
- path: _line.locationPath,
- style: {
- lineWidth: lineDefaultStyle.width,
- lineColor: lineDefaultStyle.color,
- },
- });
- }
- });
- }
-
- function parseMainPies(_dataArr) {
- _dataArr.forEach((_data) => {
- _data.id = _data.id || _data.dataObjectId;
- let lineDefaultStyle = window.__systemConf.systemGraph.peiDian.line;
- var pathArr = eachPathArr(_data.locationPath || [], []);
- lineArr.push({
- id: _data.id,
- path: pathArr,
- style: {
- lineWidth: lineDefaultStyle.width,
- lineColor: lineDefaultStyle.color,
- },
- });
- });
- }
-
- function eachPathArr(_arr, returnArr) {
- _arr.forEach((_data) => {
- if (_data instanceof Array) {
- eachPathArr(_data, returnArr);
- } else
- returnArr.push({
- x: _data.x,
- y: _data.y,
- });
- });
- return returnArr;
- }
- },
-
- computeOriginZuobPosition: function () {
- var _this = this;
- var pixiContainer = document.getElementById(this.maxContainerId);
- var maxPxX = pixiContainer.clientWidth;
- var maxPxY = pixiContainer.clientHeight;
-
- _this.canvasProObj.centerPointerPx = {
- x: maxPxX / 2,
- y: maxPxY / 2,
- };
- var originaMinX = null,
- originaMaxX = null,
- originaMinY = null,
- originaMaxY = null;
-
- compute();
-
- var xJiaValue = (maxPxX - originaMaxX - originaMinX) / 2;
- xJiaValue = originaMinX + xJiaValue < 0 ? 0 - originaMinX : xJiaValue;
-
- var yJiaValue = (maxPxY - originaMaxY - originaMinY) / 2;
- yJiaValue = originaMinY + yJiaValue < 0 ? 0 - originaMinY : yJiaValue;
- _this.canvasProObj.xJiaValue = xJiaValue;
- _this.canvasProObj.yJiaValue = yJiaValue;
-
- setScale();
-
- function compute() {
- _this.nodeArr.forEach((_c) => {
- var _legendObj = _c.legendObj;
- originaMinX =
- originaMinX == null
- ? _c.absolutePosition.x
- : Math.min(originaMinX, _c.absolutePosition.x);
- originaMaxX =
- originaMaxX == null
- ? _c.absolutePosition.x + _legendObj.size.width
- : Math.max(
- originaMaxX,
- _c.absolutePosition.x + _legendObj.size.width
- );
- originaMinY =
- originaMinY == null ? _c.absolutePosition.y : Math.min(originaMinY);
- originaMaxY =
- originaMaxY == null
- ? _c.absolutePosition.y + _legendObj.size.height
- : Math.max(
- originaMaxY,
- _c.absolutePosition.y + _legendObj.size.height
- );
- });
- _this.lineArr.forEach((_cLine) => {
- _cLine.path.forEach((_c) => {
- originaMinX =
- originaMinX == null ? _c.x : Math.min(originaMinX, _c.x);
- originaMaxX =
- originaMaxX == null ? _c.x : Math.max(originaMaxX, _c.x);
- originaMinY =
- originaMinY == null ? _c.y : Math.min(originaMinY, _c.y);
- originaMaxY =
- originaMaxY == null ? _c.y : Math.max(originaMaxY, _c.y);
- });
- });
- }
-
- function setScale() {
- var xScale = maxPxX / (originaMaxX + xJiaValue);
- var yScale = maxPxY / (originaMaxY + yJiaValue);
- _this.canvasProObj.originalScale = Math.min(xScale, yScale);
-
- _this.canvasProObj.originalScale = Math.min(
- 1,
- _this.canvasProObj.originalScale
- );
- }
- },
-
- convertCoordToLeftOrigina: function (_obj) {
- _obj.x =
- (_obj.x + this.canvasProObj.xJiaValue) *
- this.canvasProObj.originalScale;
- _obj.y =
- (_obj.y + this.canvasProObj.yJiaValue) *
- this.canvasProObj.originalScale;
- return _obj;
- },
-
- clickEventCall: function (event, type) {
- var graphInstance = event.target || event.currentTarget;
- var dataId = graphInstance.name;
- var dataArr =
- type == 1
- ? this.nodeArr
- : type == 2
- ? this.lineArr
- : type == 3
- ? this.labelArr
- : [];
- var dataObj = dataArr.filter((_data) => {
- return _data.id == dataId;
- })[0];
- this.$emit("click", dataObj, type);
- },
-
- graphScaleCompute: function (deepVal) {
- return this.canvasProObj.pixiScale + deepVal;
- },
-
- graphScale: function (newScale) {
- newScale = Math.min(5, newScale);
- newScale = Math.max(0.25, newScale);
-
- this.pixiApp.stage.scale.x = newScale;
- this.pixiApp.stage.scale.y = newScale;
-
- this.canvasProObj.pixiScale = newScale;
-
- this.canvasProObj.positionPxX =
- (1 - newScale) * this.canvasProObj.centerPointerPx.x;
- this.canvasProObj.positionPxY =
- (1 - newScale) * this.canvasProObj.centerPointerPx.y;
- this.pixiApp.stage.position.set(
- this.canvasProObj.positionPxX,
- this.canvasProObj.positionPxY
- );
- },
-
-
- updateDataAndGraph: function (dataType, operType, exprObj) {
-
-
-
- var dataArr =
- dataType == 1
- ? this.nodeArr
- : dataType == 2
- ? this.lineArr
- : dataType == 3
- ? this.labelArr
- : [];
- for (let i = 0; i < dataArr.length; i++) {
- let _dataObj = dataArr[i];
- if (_dataObj.id == exprObj.id) {
- var stageChild = this.pixiApp.stage.getChildByName(exprObj.id);
- var _stageStyle = stageChild.style;
- switch (operType) {
- case 1:
- case 5:
- dataArr.splice(i, 1);
- this.pixiApp.stage.removeChild(stageChild);
- break;
- case 2:
- _dataObj.style.fontSize = exprObj.fontSize;
- _stageStyle.fontSize = exprObj.fontSize;
- stageChild.style = _stageStyle;
- break;
- case 3:
- _dataObj.style.color = exprObj.fontColor;
- _stageStyle.fill = exprObj.fontColor;
- stageChild.style = _stageStyle;
- break;
- case 4:
- _dataObj.style.backGround = exprObj.fontBackColor;
-
-
- break;
- }
- break;
- }
- }
- },
- },
- created() {},
- mounted() {},
- components: {},
- };
- </script>
- <style scoped>
- .graphParentContainer {
- width: 100%;
- height: 100%;
- background: #ffffff;
- }
- </style>
|