|
@@ -74,7 +74,9 @@
|
|
|
class="imgLeftTop"
|
|
|
src="../../assets/images/systemGraph/text.svg"
|
|
|
/> -->
|
|
|
- <span class="resetBtn" v-if="operState == 1">重置为自动出图样式</span>
|
|
|
+ <span class="resetBtn" v-if="operState == 1" @click="resetGraph"
|
|
|
+ >重置为自动出图样式</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="secondRow">
|
|
@@ -131,7 +133,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="graphRegion">
|
|
|
- <graph ref="graphc" @click="graphClickCall"></graph>
|
|
|
+ <graph
|
|
|
+ ref="graphc"
|
|
|
+ @click="graphClickCall"
|
|
|
+ @closeright="closeRight"
|
|
|
+ ></graph>
|
|
|
</div>
|
|
|
<div class="rightDetail" v-if="selGraphPartType != -1">
|
|
|
<div v-if="selGraphPartType == 1">
|
|
@@ -190,7 +196,7 @@
|
|
|
</div>
|
|
|
<div class="detailSplitLine"></div>
|
|
|
<div class="title titleMargin">连接关系</div>
|
|
|
- <div class="titleMargin">
|
|
|
+ <div class="titleMargin lianjieguanxi">
|
|
|
<el-select
|
|
|
v-model="selLineStartPoint"
|
|
|
value-key="id"
|
|
@@ -206,7 +212,7 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="titleMargin">
|
|
|
+ <div class="titleMargin lianjieguanxi">
|
|
|
<el-select
|
|
|
v-model="selLineEndPoint"
|
|
|
value-key="id"
|
|
@@ -225,9 +231,16 @@
|
|
|
</div>
|
|
|
<div v-if="selGraphPartType == 3">
|
|
|
<div class="title titleMargin">文字</div>
|
|
|
- <div class="titleText eqName" v-text="selText.text">1#进线柜</div>
|
|
|
+ <div class="titleText eqName">
|
|
|
+ <span v-text="selText.text" v-if="operState == 0"></span>
|
|
|
+ <el-input
|
|
|
+ v-model="selText.text"
|
|
|
+ v-if="operState == 1"
|
|
|
+ @change="textContentChange"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
<div class="detailSplitLine"></div>
|
|
|
- <div class="title titleMargin">
|
|
|
+ <div class="title titleMargin" v-if="operState == 0">
|
|
|
<span>x</span>
|
|
|
<span
|
|
|
class="coridTitleText titleText"
|
|
@@ -241,6 +254,28 @@
|
|
|
>100</span
|
|
|
>
|
|
|
</div>
|
|
|
+ <div class="title titleMargin" v-if="operState == 1">
|
|
|
+ <div>
|
|
|
+ <span>x</span>
|
|
|
+ <div class="textCrodDiv" v-if="operState == 1">
|
|
|
+ <el-input
|
|
|
+ v-model="(selText.absolutePosition || {}).x"
|
|
|
+ @change="textXChange"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">
|
|
|
+ <span>y</span>
|
|
|
+ <div class="textCrodDiv" v-if="operState == 1">
|
|
|
+ <el-input
|
|
|
+ v-model="(selText.absolutePosition || {}).y"
|
|
|
+ @change="textYChange"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="detailSplitLine"></div>
|
|
|
<div class="title titleMargin">字体样式</div>
|
|
|
<div class="titleMargin fontSizeContainer">
|
|
@@ -266,6 +301,7 @@
|
|
|
<div class="title titleMargin">字体颜色</div>
|
|
|
<div class="titleMargin fontColor">
|
|
|
<input
|
|
|
+ v-if="operState == 1"
|
|
|
type="color"
|
|
|
v-model="fontColor"
|
|
|
@change="selFontColorChange"
|
|
@@ -276,6 +312,7 @@
|
|
|
<div class="title titleMargin">背景颜色</div>
|
|
|
<div class="titleMargin fontColor">
|
|
|
<input
|
|
|
+ v-if="operState == 1"
|
|
|
type="color"
|
|
|
v-model="fontBackColor"
|
|
|
@change="selFontBackColorChange"
|
|
@@ -447,9 +484,9 @@ export default {
|
|
|
id:'',
|
|
|
text:'',
|
|
|
style:{
|
|
|
- color: '',
|
|
|
+ fontColor: '',
|
|
|
fontSize: '',
|
|
|
- backGround:'',
|
|
|
+ backColor:'',
|
|
|
fontWeight:1
|
|
|
},
|
|
|
//文本的绝对位置
|
|
@@ -514,6 +551,63 @@ export default {
|
|
|
fontColor: this.fontBackColor,
|
|
|
});
|
|
|
},
|
|
|
+ //文本X轴坐标变化后事件
|
|
|
+ textXChange: function () {
|
|
|
+ this.selText.absolutePosition.x = parseFloat(
|
|
|
+ this.selText.absolutePosition.x
|
|
|
+ );
|
|
|
+ this.selText.oldAbsolutePosition.x = parseFloat(
|
|
|
+ this.selText.oldAbsolutePosition.x
|
|
|
+ );
|
|
|
+ var xChange =
|
|
|
+ this.selText.absolutePosition.x - this.selText.oldAbsolutePosition.x;
|
|
|
+ this.selText.oldAbsolutePosition.x = this.selText.absolutePosition.x;
|
|
|
+ //更新graphInfo中的数据
|
|
|
+ this.updateGraphInfo(3, 6, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { xChange: xChange, yChange: 0 },
|
|
|
+ });
|
|
|
+ //更新图形以及图形数据源
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 6, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { xChange: xChange, yChange: 0 },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //文本Y轴坐标变化后事件
|
|
|
+ textYChange: function () {
|
|
|
+ this.selText.absolutePosition.y = parseFloat(
|
|
|
+ this.selText.absolutePosition.y
|
|
|
+ );
|
|
|
+ this.selText.oldAbsolutePosition.y = parseFloat(
|
|
|
+ this.selText.oldAbsolutePosition.y
|
|
|
+ );
|
|
|
+ var yChange =
|
|
|
+ this.selText.absolutePosition.y - this.selText.oldAbsolutePosition.y;
|
|
|
+ this.selText.oldAbsolutePosition.y = this.selText.absolutePosition.y;
|
|
|
+ //更新graphInfo中的数据
|
|
|
+ this.updateGraphInfo(3, 6, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { xChange: 0, yChange: yChange },
|
|
|
+ });
|
|
|
+ //更新图形以及图形数据源
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 6, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { xChange: 0, yChange: yChange },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //文本内容改变后的事件
|
|
|
+ textContentChange: function () {
|
|
|
+ //更新graphInfo中的数据
|
|
|
+ this.updateGraphInfo(3, 7, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { content: this.selText.text },
|
|
|
+ });
|
|
|
+ //更新图形以及图形数据源
|
|
|
+ this.$refs.graphc.updateDataAndGraph(3, 7, {
|
|
|
+ id: this.selText.id,
|
|
|
+ text: { content: this.selText.text },
|
|
|
+ });
|
|
|
+ },
|
|
|
//删除选择的文本节点
|
|
|
delText: function () {
|
|
|
this.$refs.graphc.updateDataAndGraph(3, 5, { id: this.selText.id });
|
|
@@ -565,8 +659,8 @@ export default {
|
|
|
_this.fontSizeArr.filter((_c) => {
|
|
|
return _c.id == _this.selText.style.fontSize;
|
|
|
})[0] || {};
|
|
|
- this.fontColor = this.selText.style.color;
|
|
|
- this.fontBackColor = this.selText.style.backGround;
|
|
|
+ this.fontColor = this.selText.style.fontColor;
|
|
|
+ this.fontBackColor = this.selText.style.backColor;
|
|
|
break;
|
|
|
}
|
|
|
|
|
@@ -578,6 +672,14 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ //关闭右侧详情框
|
|
|
+ closeRight: function () {
|
|
|
+ var _this = this;
|
|
|
+ this.selGraphPartType = -1;
|
|
|
+ Vue.nextTick(function () {
|
|
|
+ _this.$refs.graphc.resetDraw();
|
|
|
+ });
|
|
|
+ },
|
|
|
/**
|
|
|
* 保存图纸按钮事件
|
|
|
*/
|
|
@@ -617,9 +719,13 @@ export default {
|
|
|
* 放弃编辑按钮事件
|
|
|
*/
|
|
|
cancelClick: function () {
|
|
|
+ var _this = this;
|
|
|
this.graphInfo = JSON.parse(JSON.stringify(this.graphOriginInfo));
|
|
|
- this.$refs.graphc.drawEntry(this.graphInfo);
|
|
|
this.operState = 0;
|
|
|
+ this.selGraphPartType = -1;
|
|
|
+ Vue.nextTick(function () {
|
|
|
+ _this.$refs.graphc.drawEntry(_this.graphInfo);
|
|
|
+ });
|
|
|
},
|
|
|
//上架系统图
|
|
|
publishGraph: async function () {
|
|
@@ -736,8 +842,8 @@ export default {
|
|
|
/**
|
|
|
* 更新graphInfo中的数据
|
|
|
* dataType 1 设备; 2 线; 3 文本
|
|
|
- * operType 1 移除设备节点; 2 更新文本字体大小; 3 更新文本颜色; 4 更新文本背景色; 5 移除文本节点
|
|
|
- * exprObj 扩展数据,支持:{id:'数据id'}
|
|
|
+ * operType 1 移除设备节点; 2 更新文本字体大小; 3 更新文本颜色; 4 更新文本背景色; 5 移除文本节点; 6 修改文本位置; 7 修改文本内容
|
|
|
+ * exprObj 扩展数据,支持:{id:'数据id',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
|
|
|
*/
|
|
|
updateGraphInfo: function (dataType, operType, exprObj) {
|
|
|
var _this = this;
|
|
@@ -765,11 +871,20 @@ export default {
|
|
|
_dataObj.label.style.color = _this.fontColor;
|
|
|
break;
|
|
|
case 4:
|
|
|
- _dataObj.label.style.backGround = _this.fontBackColor;
|
|
|
+ _dataObj.label.style.backColor = _this.fontBackColor;
|
|
|
break;
|
|
|
case 5:
|
|
|
_dataObj.label.content = "";
|
|
|
break;
|
|
|
+ case 6:
|
|
|
+ _dataObj.label.location.x =
|
|
|
+ _dataObj.label.location.x + exprObj.text.xChange;
|
|
|
+ _dataObj.label.location.y =
|
|
|
+ _dataObj.label.location.y + exprObj.text.yChange;
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ _dataObj.label.content = exprObj.text.content;
|
|
|
+ break;
|
|
|
}
|
|
|
|
|
|
return dataArr;
|
|
@@ -785,6 +900,34 @@ export default {
|
|
|
return null;
|
|
|
}
|
|
|
},
|
|
|
+ //重置为自动出图样式点击事件
|
|
|
+ resetGraph: async function () {
|
|
|
+ this.$confirm("重置后将不可进行恢复, 是否继续?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ this.fullscreenLoading = true;
|
|
|
+ this.selGraphPartType = -1;
|
|
|
+ var resultObj = await sysGraphController.resetData({
|
|
|
+ id: this.diagramId,
|
|
|
+ groupCode: this.project.groupCode,
|
|
|
+ projectId: this.project.id,
|
|
|
+ });
|
|
|
+ if (resultObj.result != logicConfig.resultObj.success) {
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ Message.error("重置失败:" + resultObj.message);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.graphOriginInfo = JSON.parse(JSON.stringify(resultObj.data));
|
|
|
+ this.graphInfo = resultObj.data;
|
|
|
+ this.$refs.graphc.drawEntry(this.graphInfo);
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ Message.success("重置成功");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
this.operState = !this.$route.query.ost
|
|
@@ -1009,6 +1152,16 @@ export default {
|
|
|
margin-left: 23px;
|
|
|
}
|
|
|
|
|
|
+#divGraphEdit .rightDetail .textCrodDiv {
|
|
|
+ display: inline-block;
|
|
|
+ width: 158px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#divGraphEdit .rightDetail .textCrodDiv .el-input__inner {
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
#divGraphEdit .rightDetail .scaleTitleText {
|
|
|
margin-left: 6px;
|
|
|
}
|
|
@@ -1035,7 +1188,7 @@ export default {
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
|
|
|
-#divGraphEdit .rightDetail .el-input__inner {
|
|
|
+#divGraphEdit .rightDetail .lianjieguanxi .el-input__inner {
|
|
|
padding-left: 42px;
|
|
|
}
|
|
|
|