vue2/src/
const fs = require("fs");
const path = require("path");
const file = path.join(__dirname, "./node_modules/gojs/release/go.js");
//去除gojs水印
fs.readFile(file, "utf8", function (err, data) {
if (err) throw err;
let hasMatch = false;
let content = data.replace(
/[\w\W]{8}7eba17a4ca3b1a8346[\w\W]{31}/gi,
function (match) {
if (match) hasMatch = true;
return "function(){return true;}";
}
); //旧版去水印
if (!hasMatch) {
//新版去水印
content = data.replace(
/[^\)^\{}]*7ca11abfd7330390[^;]*/gi,
function (match) {
//查找绘制文本的语句
let arr = /\]\(([^\,]+)/.exec(match); //查找语句中的获取水印文本函数
//console.log(arr);
return arr && arr.length >= 1 && arr[1]; //用该函数整个替换绘制函数
}
);
}
fs.writeFile(file, content, "utf8", (err) => {
if (err) throw err;
// console.log('success done');
});
});
gojs 封装
<template>
<div class="base_work_shop">
<div class="workshop_main" ref="workshop"></div>
</div>
</template>
<script>
import go from "gojs";
var $ = go.GraphObject.make; // 后面很多用到该变量来初始化diagram
export default {
props: {
// workListNodeDataArray: {}, //绘制页面数据
// workListLinkDataArray: {}, //连线数据
diagram: {},
allowMove: {
default: false, //是否允许拖动
},
move: {
default: true, //是否允许画布拖动
},
},
data() {
return {
myDiagram: {},
workListNodeDataArray: {}, //绘制页面数据
workListLinkDataArray: {}, //连线数据
nodeFlag: true,
linkFlag:true
};
},
watch: {
// workListNodeDataArray: {
// handler(newValue) {
// console.log('node',newValue);
// // 第一次加载节点
// if(this.nodeFlag){
// newValue.forEach((item) => {
// // console.log(item);
// this.myDiagram.model.addNodeData(item);
// this.nodeFlag = false
// });
// }
// },
// deep: true,
// },
// workListLinkDataArray: {
// handler(newValue) {
// console.log('link',newValue);
// // 第一次加载线
// if(this.linkFlag){
// newValue.forEach((item) => {
// this.myDiagram.model.addLinkData(item);
// this.linkFlag = false
// });
// }
// },
// deep: true,
// },
},
computed: {
// cptInit() {
// return () => {
// let _this = this;
// let myDiagram = $(go.Diagram, this.$refs.workshop, {
// "undoManager.isEnabled": true, //支持ctrl-z 和 ctrl-y 操作
// "toolManager.mouseWheelBehavior": _this.move
// ? go.ToolManager.WheelZoom
// : go.ToolManager.WheelNone, //go.ToolManager.WheelZoom 鼠标滚轮事件放大和缩小，不是向上和向下 go.ToolManager.WheelNone 静止
// initialContentAlignment: go.Spot.Center, // 居中显示内容
// allowMove: _this.allowMove, //允许拖动
// LinkDrawn: _this._maybeChangeLinkCategory, // these two DiagramEvents call a
// LinkRelinked: _this._maybeChangeLinkCategory, // function that is defined below
// });
// let imgdel = require("@img/login/u1.jpg");
// myDiagram.nodeTemplate = $(
// "Node",
// "Auto",
// {
// locationSpot: go.Spot.Center,
// layerName: "Background",
// }, // always have regular nodes behind Links
// new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
// go.Point.stringify
// ),
// $(
// "Shape",
// "RoundedRectangle",
// {
// fill: "white",
// stroke: null,
// portId: "",
// fromLinkable: true,
// toLinkable: true,
// cursor: "pointer",
// },
// new go.Binding("fill", "color")
// ),
// // 第一行
// $(
// "Panel",
// "Vertical",
// {
// // wrap: go.TextBlock.WrapFit, // 尺寸自适应
// },
// $(
// "Panel",
// "Horizontal",
// {},
// // OEE
// $("Panel", "Horizontal", {
// background: "yellow",
// margin: 3,
// width: 10,
// height: 10,
// }),
// $(
// "TextBlock",
// "oee",
// {
// width: 30,
// stroke: "#fff",
// textAlign: "center",
// background: "green",
// click: this._btn3,
// },
// new go.Binding("text", "efficiency")
// ),
// // 产量
// $("Panel", "Horizontal", {
// background: "red",
// width: 10,
// height: 10,
// margin: 3,
// }),
// $(
// "TextBlock",
// "yield",
// {
// width: 30,
// stroke: "#fff",
// textAlign: "center",
// background: "green",
// click: this._btn3,
// },
// new go.Binding("text", "yield")
// )
// ),
// // 第二行
// $(
// "Panel",
// "Horizontal",
// {},
// // 运行设备数
// $(
// "TextBlock",
// "ok",
// {
// width: 33,
// stroke: "#fff",
// textAlign: "center",
// // border:"5",
// background: "green",
// click: this._btn3,
// },
// new go.Binding("text", "ok")
// ),
// // 停工
// $(
// "TextBlock",
// "err",
// {
// width: 33,
// stroke: "#fff",
// textAlign: "center",
// background: "green",
// click: this._btn3,
// },
// new go.Binding("text", "err")
// ),
// // 异常设备数
// $(
// "TextBlock",
// "warn",
// {
// width: 33,
// stroke: "#fff",
// textAlign: "center",
// background: "green",
// click: this._btn3,
// },
// new go.Binding("text", "warn")
// )
// ),
// $(
// "Panel",
// "Horizontal",
// {
// alignment: go.Spot.Right,
// },
// // 删除
// $("Picture", imgdel, {
// width: 10,
// height: 10,
// click: _this._del,
// }),
// $("TextBlock", "\u200B", {})
// ),
// // 照片
// $(
// "Picture",
// {
// width: 80,
// height: 80,
// background: "green",
// click: _this._seeEquipment,
// },
// new go.Binding("source")
// ),
// $(
// "TextBlock",
// { margin: 4, stroke: "#2E68CC" }, // make some extra space for the shape around the text
// new go.Binding("text", "name")
// ) // the label shows the node data's key
// )
// );
// // myDiagram.linkTemplate = $(
// // "Link",
// // { relinkableFrom: true, relinkableTo: true, toShortLength: 2 },
// // $("Shape", { stroke: "#2E68CC", strokeWidth: 2 }),
// // $("Shape", { fill: "#2E68CC", stroke: null, toArrow: "Standard" })
// // );
// // 增加连线
// myDiagram.linkTemplateMap.add(
// "linkToLink",
// $(
// "Link",
// { relinkableFrom: true, relinkableTo: true },
// $("Shape", { stroke: "green", strokeWidth: 2 })
// )
// );
// let temp = {
// class: "go.GraphLinksModel",
// linkLabelKeysProperty: "labelKeys",
// nodeDataArray: this.workListNodeDataArray,
// linkDataArray: this.workListLinkDataArray,
// };
// myDiagram.model = go.Model.fromJson(JSON.stringify(temp));
// this.$emit("update:diagram", myDiagram);
// this.myDiagram = myDiagram;
// this._load();
// };
// },
},
async created() {
// 获取 历史数据
await this.$store.dispatch('workshop/workshop_getWorkshopLoc',{})
this.workListNodeDataArray = this.$store.state.workshop.workshopLoc.workListNodeDataArray;
this.workListLinkDataArray = this.$store.state.workshop.workshopLoc.workListLinkDataArray;
console.log('this.workListNodeDataArray',this.workListNodeDataArray);
// 初始化函数 画图
this.cptInit();
},
methods: {
// 初始化函数
cptInit() {
let _this = this;
let myDiagram = $(go.Diagram, this.$refs.workshop, {
"undoManager.isEnabled": true, //支持ctrl-z 和 ctrl-y 操作
"toolManager.mouseWheelBehavior": _this.move
? go.ToolManager.WheelZoom
: go.ToolManager.WheelNone, //go.ToolManager.WheelZoom 鼠标滚轮事件放大和缩小，不是向上和向下 go.ToolManager.WheelNone 静止
initialContentAlignment: go.Spot.Center, // 居中显示内容
allowMove: _this.allowMove, //允许拖动
LinkDrawn: _this._maybeChangeLinkCategory, // these two DiagramEvents call a
LinkRelinked: _this._maybeChangeLinkCategory, // function that is defined below
});
let imgdel = require("@img/login/u1.jpg");
myDiagram.nodeTemplate = $(
"Node",
"Auto",
{
locationSpot: go.Spot.Center,
layerName: "Background",
}, // always have regular nodes behind Links
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
go.Point.stringify
),
$(
"Shape",
"RoundedRectangle",
{
fill: "white",
stroke: null,
portId: "",
fromLinkable: true,
toLinkable: true,
cursor: "pointer",
},
new go.Binding("fill", "color")
),
// 第一行
$(
"Panel",
"Vertical",
{
// wrap: go.TextBlock.WrapFit, // 尺寸自适应
},
$(
"Panel",
"Horizontal",
{},
// 百分比
$(
"TextBlock",
"0%",
{
width: 50,
stroke: "#fff",
textAlign: "center",
// border:"5",
background: "green",
click: this.checkDev,
},
new go.Binding("text", "efficiency")
)
),
$(
"Panel",
"Horizontal",
{
alignment: go.Spot.Right,
},
// 删除
$("Picture", imgdel, {
width: 10,
height: 10,
click: _this._del,
}),
$("TextBlock", "\u200B", {})
),
// 照片
$(
"Picture",
{
width: 80,
height: 80,
background: "green",
click: _this._seeEquipment,
},
new go.Binding("source")
),
$(
"TextBlock",
{ margin: 4, stroke: "#2E68CC" }, // make some extra space for the shape around the text
new go.Binding("text", "wsName")
) // the label shows the node data's key
)
);
// myDiagram.linkTemplate = $(
// "Link",
// { relinkableFrom: true, relinkableTo: true, toShortLength: 2 },
// $("Shape", { stroke: "#2E68CC", strokeWidth: 2 }),
// $("Shape", { fill: "#2E68CC", stroke: null, toArrow: "Standard" })
// );
// 增加连线
myDiagram.linkTemplateMap.add(
"linkToLink",
$(
"Link",
{ relinkableFrom: true, relinkableTo: true },
$("Shape", { stroke: "green", strokeWidth: 2 })
)
);
// 赋值历史数据
let temp = {
class: "go.GraphLinksModel",
linkLabelKeysProperty: "labelKeys",
nodeDataArray: this.workListNodeDataArray,
linkDataArray: this.workListLinkDataArray,
};
myDiagram.model = go.Model.fromJson(JSON.stringify(temp));
this.$emit("update:diagram", myDiagram);
this.myDiagram = myDiagram;
this._load();
},
_btnStyle(color) {
color = color || "green";
return {
width: 33,
stroke: "#fff",
textAlign: "center",
background: color,
click: this._btn3,
};
},
// 删除布局事件
_del(e, obj) {
let item = obj.part.data;
// 更新展示列表
this.$emit("delShowList", item);
// 移除节点 更新视图
this.myDiagram.model.removeNodeData(item);
},
// 点击百分比 进去 车间信息
checkDev(e, obj) {
this.$router.push(`/home/workshopState?wsid=${obj.part.data.key}&wsName=${obj.part.data.wsName}`)
console.log("这是触发的按钮事件--------start");
console.log(obj.part.data);
console.log(obj.text);
console.log("这是触发的按钮事件---------end");
},
// 查看厂房里的设备
_seeEquipment(e, obj) {},
_load() {
let _this = this;
let temp = {
class: "go.GraphLinksModel",
linkLabelKeysProperty: "labelKeys",
nodeDataArray: this.workListNodeDataArray,
linkDataArray: this.workListLinkDataArray,
};
if (this.diagram) {
this.diagram.model = go.Model.fromJson(JSON.stringify(temp));
}
},
_updateWorkList() {
this._load();
},
_maybeChangeLinkCategory(e) {
var link = e.subject;
var linktolink = link.fromNode.isLinkLabel || link.toNode.isLinkLabel;
e.diagram.model.setCategoryForLinkData(
link.data,
linktolink ? "linkToLink" : ""
);
},
},
};
</script>
<style lang="less" scoped>
.base_work_shop {
width: 100%;
height: 100%;
background-color: @bgColor;
.workshop_main {
width: 100%;
height: 100%;
}
}
</style>
扫一扫
3400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
