|
@@ -225,13 +225,21 @@
|
|
</div>
|
|
</div>
|
|
<div v-if="selGraphPartType == 3">
|
|
<div v-if="selGraphPartType == 3">
|
|
<div class="title titleMargin">文字</div>
|
|
<div class="title titleMargin">文字</div>
|
|
- <div class="titleText eqName">1#进线柜</div>
|
|
|
|
|
|
+ <div class="titleText eqName" v-text="selText.text">1#进线柜</div>
|
|
<div class="detailSplitLine"></div>
|
|
<div class="detailSplitLine"></div>
|
|
<div class="title titleMargin">
|
|
<div class="title titleMargin">
|
|
<span>x</span>
|
|
<span>x</span>
|
|
- <span class="coridTitleText titleText">100</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ class="coridTitleText titleText"
|
|
|
|
+ v-text="(selText.absolutePosition || {}).x"
|
|
|
|
+ >100</span
|
|
|
|
+ >
|
|
<span class="coridTitle2">y</span>
|
|
<span class="coridTitle2">y</span>
|
|
- <span class="coridTitleText titleText">100</span>
|
|
|
|
|
|
+ <span
|
|
|
|
+ class="coridTitleText titleText"
|
|
|
|
+ v-text="(selText.absolutePosition || {}).y"
|
|
|
|
+ >100</span
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
<div class="detailSplitLine"></div>
|
|
<div class="detailSplitLine"></div>
|
|
<div class="title titleMargin">字体样式</div>
|
|
<div class="title titleMargin">字体样式</div>
|
|
@@ -257,20 +265,42 @@
|
|
</div>
|
|
</div>
|
|
<div class="title titleMargin">字体颜色</div>
|
|
<div class="title titleMargin">字体颜色</div>
|
|
<div class="titleMargin fontColor">
|
|
<div class="titleMargin fontColor">
|
|
- <input type="color" v-model="fontColor" />
|
|
|
|
|
|
+ <input
|
|
|
|
+ type="color"
|
|
|
|
+ v-model="fontColor"
|
|
|
|
+ @change="selFontColorChange"
|
|
|
|
+ />
|
|
<div v-text="fontColor"></div>
|
|
<div v-text="fontColor"></div>
|
|
<div>100%</div>
|
|
<div>100%</div>
|
|
</div>
|
|
</div>
|
|
<div class="title titleMargin">背景颜色</div>
|
|
<div class="title titleMargin">背景颜色</div>
|
|
<div class="titleMargin fontColor">
|
|
<div class="titleMargin fontColor">
|
|
- <input type="color" v-model="backColor" />
|
|
|
|
- <div v-text="backColor"></div>
|
|
|
|
|
|
+ <input
|
|
|
|
+ type="color"
|
|
|
|
+ v-model="fontBackColor"
|
|
|
|
+ @change="selFontBackColorChange"
|
|
|
|
+ />
|
|
|
|
+ <div v-text="fontBackColor"></div>
|
|
<div>100%</div>
|
|
<div>100%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="delBtn" v-if="selGraphPartType == 1">删除设备</div>
|
|
|
|
- <div class="delBtn" v-if="selGraphPartType == 2">删除管线</div>
|
|
|
|
- <div class="delBtn" v-if="selGraphPartType == 3">删除文字</div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="delBtn"
|
|
|
|
+ v-if="selGraphPartType == 1 && operState == 1"
|
|
|
|
+ @click="delEquip"
|
|
|
|
+ >
|
|
|
|
+ 删除设备
|
|
|
|
+ </div>
|
|
|
|
+ <div class="delBtn" v-if="selGraphPartType == 2 && operState == 1">
|
|
|
|
+ 删除管线
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="delBtn"
|
|
|
|
+ v-if="selGraphPartType == 3 && operState == 1"
|
|
|
|
+ @click="delText"
|
|
|
|
+ >
|
|
|
|
+ 删除文字
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -378,8 +408,8 @@ export default {
|
|
selFontSize: {},
|
|
selFontSize: {},
|
|
//字体颜色
|
|
//字体颜色
|
|
fontColor: "#eb5757",
|
|
fontColor: "#eb5757",
|
|
- //背景颜色
|
|
|
|
- backColor: "#ffffff",
|
|
|
|
|
|
+ //字体背景颜色
|
|
|
|
+ fontBackColor: "#ffffff",
|
|
//系统图原始数据
|
|
//系统图原始数据
|
|
graphOriginInfo: {},
|
|
graphOriginInfo: {},
|
|
//系统图数据
|
|
//系统图数据
|
|
@@ -411,6 +441,23 @@ export default {
|
|
}
|
|
}
|
|
*/
|
|
*/
|
|
selEquip: {},
|
|
selEquip: {},
|
|
|
|
+ /*选择的文本,格式如下:
|
|
|
|
+ {
|
|
|
|
+ id:'',
|
|
|
|
+ text:'',
|
|
|
|
+ style:{
|
|
|
|
+ color: '',
|
|
|
|
+ fontSize: '',
|
|
|
|
+ backGround:'',
|
|
|
|
+ fontWeight:1
|
|
|
|
+ },
|
|
|
|
+ //文本的绝对位置
|
|
|
|
+ absolutePosition: {
|
|
|
|
+ x: 1,
|
|
|
|
+ y: 1,
|
|
|
|
+ },
|
|
|
|
+ }*/
|
|
|
|
+ selText: {},
|
|
//是否展示左侧系统图基础信息
|
|
//是否展示左侧系统图基础信息
|
|
isVisibleLeft: true,
|
|
isVisibleLeft: true,
|
|
};
|
|
};
|
|
@@ -437,7 +484,40 @@ export default {
|
|
console.log(this.selLineEndPoint);
|
|
console.log(this.selLineEndPoint);
|
|
},
|
|
},
|
|
//字号选择事件
|
|
//字号选择事件
|
|
- selFontSizeChange: function () {},
|
|
|
|
|
|
+ selFontSizeChange: function () {
|
|
|
|
+ //更新graphInfo中的数据
|
|
|
|
+ this.updateGraphInfo(3, 2, { id: this.selText.id });
|
|
|
|
+ //更新图形以及图形数据源
|
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 2, {
|
|
|
|
+ id: this.selText.id,
|
|
|
|
+ fontSize: this.selFontSize.id,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //字体颜色改变事件
|
|
|
|
+ selFontColorChange: function () {
|
|
|
|
+ //更新graphInfo中的数据
|
|
|
|
+ this.updateGraphInfo(3, 3, { id: this.selText.id });
|
|
|
|
+ //更新图形以及图形数据源
|
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 3, {
|
|
|
|
+ id: this.selText.id,
|
|
|
|
+ fontColor: this.fontColor,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //字体backColor颜色改变事件
|
|
|
|
+ selFontBackColorChange: function () {
|
|
|
|
+ //更新graphInfo中的数据
|
|
|
|
+ this.updateGraphInfo(3, 4, { id: this.selText.id });
|
|
|
|
+ //更新图形以及图形数据源
|
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 4, {
|
|
|
|
+ id: this.selText.id,
|
|
|
|
+ fontColor: this.fontBackColor,
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ //删除选择的文本节点
|
|
|
|
+ delText: function () {
|
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 5, { id: this.selText.id });
|
|
|
|
+ this.updateGraphInfo(3, 5, { id: this.selText.id });
|
|
|
|
+ },
|
|
//根据系统图ID获取系统图数据
|
|
//根据系统图ID获取系统图数据
|
|
getDiagramById: async function () {
|
|
getDiagramById: async function () {
|
|
this.fullscreenLoading = true;
|
|
this.fullscreenLoading = true;
|
|
@@ -465,12 +545,37 @@ export default {
|
|
* type 1 设备; 2 线; 3 文本
|
|
* type 1 设备; 2 线; 3 文本
|
|
*/
|
|
*/
|
|
graphClickCall: function (dataObj, type) {
|
|
graphClickCall: function (dataObj, type) {
|
|
|
|
+ var _this = this;
|
|
|
|
+ var oldPartType = this.selGraphPartType;
|
|
this.selGraphPartType = type;
|
|
this.selGraphPartType = type;
|
|
- this.selEquip = dataObj || {};
|
|
|
|
|
|
+ switch (type) {
|
|
|
|
+ //设备
|
|
|
|
+ case 1:
|
|
|
|
+ this.selEquip = dataObj || {};
|
|
|
|
+ break;
|
|
|
|
+ //线
|
|
|
|
+ case 2:
|
|
|
|
+ // this.selEquip = dataObj || {};
|
|
|
|
+ break;
|
|
|
|
+ //文本
|
|
|
|
+ case 3:
|
|
|
|
+ this.selText = dataObj || {};
|
|
|
|
+ this.selFontSize =
|
|
|
|
+ _this.fontSizeArr.filter((_c) => {
|
|
|
|
+ return _c.id == _this.selText.style.fontSize;
|
|
|
|
+ })[0] || {};
|
|
|
|
+ this.fontColor = this.selText.style.color;
|
|
|
|
+ this.fontBackColor = this.selText.style.backGround;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
var _this = this;
|
|
var _this = this;
|
|
- Vue.nextTick(function () {
|
|
|
|
- _this.$refs.graphc.resetDraw();
|
|
|
|
- });
|
|
|
|
|
|
+ //oldPartType为-1的时候,说明右侧面板之前是关闭的,那么展示后会导致图形区域变小,所以需要重绘图形
|
|
|
|
+ if (oldPartType == -1) {
|
|
|
|
+ Vue.nextTick(function () {
|
|
|
|
+ _this.$refs.graphc.resetDraw();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 保存图纸按钮事件
|
|
* 保存图纸按钮事件
|
|
@@ -579,6 +684,88 @@ export default {
|
|
var newScale = this.$refs.graphc.graphScaleCompute(-0.25);
|
|
var newScale = this.$refs.graphc.graphScaleCompute(-0.25);
|
|
this.$refs.graphc.graphScale(newScale);
|
|
this.$refs.graphc.graphScale(newScale);
|
|
},
|
|
},
|
|
|
|
+ //删除选择的设备节点
|
|
|
|
+ delEquip: function () {
|
|
|
|
+ this.$refs.graphc.updateDataAndGraph(1, 1, { id: this.selEquip.id });
|
|
|
|
+ this.updateGraphInfo(1, 1, { id: this.selEquip.id });
|
|
|
|
+ },
|
|
|
|
+ //graphInfo中移出对应的数据
|
|
|
|
+ removeFromData: function (id) {
|
|
|
|
+ this.graphInfo.template.frame.children = remove(
|
|
|
|
+ this.graphInfo.template.frame.children
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ function remove(dataArr) {
|
|
|
|
+ for (let i = 0; i < dataArr.length; i++) {
|
|
|
|
+ let _dataObj = dataArr[i];
|
|
|
|
+ if (_dataObj.id == id) {
|
|
|
|
+ dataArr.splice(i, 1);
|
|
|
|
+ return dataArr;
|
|
|
|
+ }
|
|
|
|
+ if (_dataObj.compType == "container") {
|
|
|
|
+ var result = remove(_dataObj.children);
|
|
|
|
+ if (result) {
|
|
|
|
+ _dataObj.children = result;
|
|
|
|
+ return dataArr;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return null;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 更新graphInfo中的数据
|
|
|
|
+ * dataType 1 设备; 2 线; 3 文本
|
|
|
|
+ * operType 1 移除设备节点; 2 更新文本字体大小; 3 更新文本颜色; 4 更新文本背景色; 5 移除文本节点
|
|
|
|
+ * exprObj 扩展数据,支持:{id:'数据id'}
|
|
|
|
+ */
|
|
|
|
+ updateGraphInfo: function (dataType, operType, exprObj) {
|
|
|
|
+ var _this = this;
|
|
|
|
+ _each(this.graphInfo.template.frame.children);
|
|
|
|
+
|
|
|
|
+ function _each(dataArr) {
|
|
|
|
+ for (let i = 0; i < dataArr.length; i++) {
|
|
|
|
+ let _dataObj = dataArr[i];
|
|
|
|
+
|
|
|
|
+ var _id =
|
|
|
|
+ dataType == 1
|
|
|
|
+ ? _dataObj.id
|
|
|
|
+ : dataType == 3
|
|
|
|
+ ? (_dataObj.label || {}).id
|
|
|
|
+ : "";
|
|
|
|
+ if (_id == exprObj.id) {
|
|
|
|
+ switch (operType) {
|
|
|
|
+ case 1:
|
|
|
|
+ dataArr.splice(i, 1);
|
|
|
|
+ break;
|
|
|
|
+ case 2:
|
|
|
|
+ _dataObj.label.style.fontSize = _this.selFontSize.id;
|
|
|
|
+ break;
|
|
|
|
+ case 3:
|
|
|
|
+ _dataObj.label.style.color = _this.fontColor;
|
|
|
|
+ break;
|
|
|
|
+ case 4:
|
|
|
|
+ _dataObj.label.style.backGround = _this.fontBackColor;
|
|
|
|
+ break;
|
|
|
|
+ case 5:
|
|
|
|
+ _dataObj.label.content = "";
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return dataArr;
|
|
|
|
+ }
|
|
|
|
+ if (_dataObj.compType == "container") {
|
|
|
|
+ var result = _each(_dataObj.children);
|
|
|
|
+ if (result) {
|
|
|
|
+ _dataObj.children = result;
|
|
|
|
+ return dataArr;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return null;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
this.operState = !this.$route.query.ost
|
|
this.operState = !this.$route.query.ost
|
|
@@ -595,7 +782,7 @@ export default {
|
|
mounted() {
|
|
mounted() {
|
|
var _this = this;
|
|
var _this = this;
|
|
(async function () {
|
|
(async function () {
|
|
- //操作状态 0 预览; 1 编辑; 2 新建
|
|
|
|
|
|
+ //操作状态 0 预览; 1 编辑; 2 新建 进来时是预览或编辑状态时需要加载系统图数据并绘图
|
|
if (_this.operState === 0 || _this.operState === 1) {
|
|
if (_this.operState === 0 || _this.operState === 1) {
|
|
await _this.getDiagramById();
|
|
await _this.getDiagramById();
|
|
_this.$refs.graphc.drawEntry(_this.graphInfo);
|
|
_this.$refs.graphc.drawEntry(_this.graphInfo);
|