<template>
<div id="divGraphEdit" v-loading.fullscreen.lock="fullscreenLoading">
<div class="firstRow">
<div class="firstOperDivContainer">
<img
class="imgBar"
src="../../assets/images/systemGraph/editLogo.svg"
/>
<span class="headerTitle">系统图编辑器</span>
<div class="operBtnDiv" v-if="operState === 0">
<!-- <span>回到首页</span> -->
<span @click="intoEditState">编辑系统图</span>
<span
v-if="(graphInfo.extraProps || {}).state == 'Draft'"
@click="publishGraph"
>上架系统图</span
>
<span
v-if="(graphInfo.extraProps || {}).state == 'Publish'"
@click="draftGraph"
>下架系统图</span
>
</div>
<div class="operBtnDiv" v-if="operState === 1">
<span @click="saveGraph">保存图纸</span>
<span @click="cancelClick">放弃编辑</span>
</div>
<span class="delBtn" @click="delGraph">删除图纸</span>
</div>
<div class="secondOperDivContainer">
<img
@click="toggleLeft"
class="imgBar"
src="../../assets/images/systemGraph/barController.svg"
/>
<span
class="sanjiaoBar"
:class="{
'el-icon-caret-bottom': isVisibleLeft,
'el-icon-caret-top': !isVisibleLeft,
}"
@click="toggleLeft"
></span>
<hr class="splitLine" />
<el-select
v-model="selectScale"
value-key="value"
@change="selScaleChange"
>
<el-option
v-for="item in scaleArr"
:key="item.value"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
<span class="el-icon-zoom-in zoomin" @click="scaleZoomin"></span>
<span class="el-icon-zoom-out zoomout" @click="scaleZoomout"></span>
<!-- <hr class="splitLine" v-if="operState == 1" />
<img
v-if="operState == 1"
class="imgLeftTop"
src="../../assets/images/systemGraph/leftTop.svg"
/>
<img
v-if="operState == 1"
class="rightLeftTop"
src="../../assets/images/systemGraph/rightTop.svg"
/>
<hr class="splitLine" v-if="operState == 1" />
<img
v-if="operState == 1"
class="imgLeftTop"
src="../../assets/images/systemGraph/text.svg"
/> -->
<span class="resetBtn" v-if="operState == 1" @click="resetGraph"
>重置为自动出图样式</span
>
</div>
</div>
<div class="secondRow">
<div
class="graphInfoContainer"
v-if="(operState === 0 || operState === 1) && isVisibleLeft"
>
<div class="graphInfoFirst">
<span class="graphInfoName">系统图名称</span>
<span
class="graphInfoFirstEdit"
@click="intoGraphNameEditState"
v-if="!isEditGraphName"
>编辑</span
>
<span
class="graphInfoFirstEdit"
@click="saveGraphName"
v-if="isEditGraphName"
>保存</span
>
<span
class="graphInfoFirstEdit"
@click="cancelSaveGraphName"
v-if="isEditGraphName"
>取消</span
>
</div>
<div class="graphInfoContent">
<span v-text="graphInfo.name" v-if="!isEditGraphName"
>高压系统1#系统图</span
>
<el-input
v-model="graphInfo.name"
v-if="isEditGraphName"
@change="graphNameChange"
></el-input>
</div>
<div class="graphInfoName">
<span>系统图类型</span>
</div>
<div class="graphInfoContent">
<span v-text="graphInfo.graphTypeName">高压配电</span>
</div>
<div class="graphInfoName">
<span>系统实例</span>
</div>
<div class="graphInfoContent">
<span v-text="graphInfo.systemInstanceName">实例1</span>
</div>
<div class="graphInfoName">
<span>系统图模版</span>
</div>
<div class="graphInfoContent">
<span v-text="graphInfo.templateName">模版1</span>
</div>
<div class="graphInfoName">
<span>所属项目</span>
</div>
<div class="graphInfoContent">
<span v-text="project.name">银泰中心</span>
</div>
<div class="graphInfoName">
<span>当前状态</span>
</div>
<div class="graphInfoContent">
<span v-text="graphInfo.stateName">草稿</span>
</div>
</div>
<div class="graphRegion">
<graph
ref="graphc"
@click="graphClickCall"
@closeright="closeRight"
></graph>
</div>
<div class="rightDetail" v-if="selGraphPartType != -1">
<div v-if="selGraphPartType == 1">
<div class="title titleMargin">设备类</div>
<div class="titleText eqName" v-text="selEquip.name">进线柜</div>
<div class="detailSplitLine"></div>
<div class="title titleMargin">
<span>x</span>
<span
class="coridTitleText titleText"
v-text="(selEquip.absolutePosition || {}).x"
>100</span
>
<span class="coridTitle2">y</span>
<span
class="coridTitleText titleText"
v-text="(selEquip.absolutePosition || {}).y"
>100</span
>
</div>
<div class="title titleMargin">
<span>比例</span>
<span class="scaleTitleText titleText">100%</span>
</div>
<div class="detailSplitLine"></div>
<div class="title titleMargin">锚点</div>
<div
class="anchorContainer"
v-for="anchor in selEquip.anchorArr"
:key="anchor.name"
>
<span v-text="anchor.name">T3</span>
<span>已连接</span>
</div>
</div>
<div v-if="selGraphPartType == 2">
<div class="title titleMargin">连线</div>
<div class="detailSplitLine"></div>
<div
v-for="(linePoint, _index) in selLine.path || []"
:key="_index.toString()"
>
<div
class="title titleMargin"
v-text="
_index == 0
? '起点'
: _index == selLine.path.length - 1
? '终点'
: '拐点' + _index
"
>
起点
</div>
<div class="coridGroup title">
<span>x</span>
<span class="coridTitleText titleText" v-text="linePoint.x"
>100</span
>
<span class="coridTitle2">y</span>
<span class="coridTitleText titleText" v-text="linePoint.y"
>100</span
>
</div>
</div>
<!-- <div class="detailSplitLine"></div>
<div class="title titleMargin">连接关系</div>
<div class="titleMargin lianjieguanxi">
<el-select
v-model="selLineStartPoint"
value-key="id"
@change="selStartPointChange"
>
<div slot="prefix" class="selectPrefix">起点</div>
<el-option
v-for="item in lineStartPointArr"
:key="item.id"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</div>
<div class="titleMargin lianjieguanxi">
<el-select
v-model="selLineEndPoint"
value-key="id"
@change="selEndPointChange"
>
<div slot="prefix" class="selectPrefix">终点</div>
<el-option
v-for="item in lineEndPointArr"
:key="item.id"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</div> -->
</div>
<div v-if="selGraphPartType == 3">
<div class="title titleMargin">文字</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" v-if="operState == 0">
<span>x</span>
<span
class="coridTitleText titleText"
v-text="(selText.absolutePosition || {}).x"
>100</span
>
<span class="coridTitle2">y</span>
<span
class="coridTitleText titleText"
v-text="(selText.absolutePosition || {}).y"
>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">
<img
src="@/assets/images/systemGraph/fontStyle.svg"
class="fontStyleSvg"
/>
<el-select
v-model="selFontSize"
value-key="id"
@change="selFontSizeChange"
placeholder=""
>
<el-option
v-for="item in fontSizeArr"
:key="item.id"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
</div>
<div class="title titleMargin">字体颜色</div>
<div class="titleMargin fontColor">
<input
v-if="operState == 1"
type="color"
v-model="fontColor"
@change="selFontColorChange"
/>
<div v-text="fontColor"></div>
<div>100%</div>
</div>
<div class="title titleMargin">背景颜色</div>
<div class="titleMargin fontColor">
<input
v-if="operState == 1"
type="color"
v-model="fontBackColor"
@change="selFontBackColorChange"
/>
<div v-text="fontBackColor"></div>
<div>100%</div>
</div>
</div>
<div
class="delBtn"
v-if="selGraphPartType == 1 && operState == 1"
@click="delEquip"
>
删除设备
</div>
<div
class="delBtn"
v-if="selGraphPartType == 2 && operState == 1"
@click="delLine"
>
删除管线
</div>
<div
class="delBtn"
v-if="selGraphPartType == 3 && operState == 1"
@click="delText"
>
删除文字
</div>
</div>
</div>
<addGraph
:isVisible="operState == 2"
v-if="operState == 2"
@graphCreated="createSuccessed"
></addGraph>
</div>
</template>
<script>
import { graphStateEnum } from "@/controller/systemGraph/graphStateEnum";
import { sysGraphController } from "@/controller/systemGraph/sysGraphController";
import addGraph from "./addGraph.vue";
import graph from "./graph.vue";
import { logicConfig } from "@/logicConfig";
import { Message } from "element-ui";
import Vue from "vue";
import vueStore from "@/store";
import { mapState } from "vuex";
export default {
props: [],
data() {
return {
fullscreenLoading: false,
//缩放范围
scaleArr: [
{
name: "25%",
value: 25,
},
{
name: "50%",
value: 50,
},
{
name: "75%",
value: 75,
},
{
name: "100%",
value: 100,
},
{
name: "150%",
value: 150,
},
],
//选择的缩放范围
selectScale: {},
//操作状态 0 预览； 1 编辑； 2 新建
operState: -1,
//系统图ID
diagramId: "",
//项目信息
project: {},
/**
* 选择的系统图上的区域的类型
* -1 什么也没选； 1 设备; 2 线; 3 文字
*/
selGraphPartType: -1,
//线的起点数组，用于右侧详情选择
lineStartPointArr: [
{
id: "111",
name: "1#设备-B1",
},
{
id: "222",
name: "1#设备-B2",
},
],
//选择的线的起点，用于右侧详情选择
selLineStartPoint: {
id: "111",
name: "1#设备-B1",
},
//线的终点数组，用于右侧详情选择
lineEndPointArr: [
{
id: "111",
name: "2#设备-B1",
},
{
id: "222",
name: "2#设备-B2",
},
],
//选择的线的终点，用于右侧详情选择
selLineEndPoint: {
id: "111",
name: "2#设备-B1",
},
//字号数组
fontSizeArr: [
{
id: 12,
name: "12px",
},
{
id: 14,
name: "14px",
},
{
id: 16,
name: "16px",
},
],
//选择的字号
selFontSize: {},
//字体颜色
fontColor: "#eb5757",
//字体背景颜色
fontBackColor: "#ffffff",
//系统图原始数据
graphOriginInfo: {},
//系统图数据
graphInfo: {},
/**
* 选择的设备，格式如下：
* {
id: "",
name:'',
legendObj: {
content: "图的地址或base64串",
size: {
width: 12,
height: 12,
},
},
//设备的绝对位置
absolutePosition: {
x: 1,
y: 1,
},
anchorArr:[{
name:'锚点名称',
//锚点相对于设备图例的位置
relativePosition:{
x:1,y:1
}
}]
}
*/
selEquip: {},
/*选择的文本，格式如下：
{
id:'',
text:'',
style:{
fontColor: '',
fontSize: '',
backColor:'',
fontWeight:1
},
//文本的绝对位置
absolutePosition: {
x: 1,
y: 1,
},
}*/
selText: {},
/**
* 选择的线，格式如下：
* {
id: '',
path:[{x:1,y:1}],
style: {
lineWidth: 4, //线宽
lineColor: '#8D9399', //线的颜色
}
}
*/
selLine: {},
//是否展示左侧系统图基础信息
isVisibleLeft: true,
//是否处于编辑系统图名称状态
isEditGraphName: false,
};
},
computed: {
...mapState(["projects"]),
},
methods: {
/**
* 新建成功后执行的操作
* graphInfo 系统图数据
*/
createSuccessed: function (graphInfo) {
//进入编辑状态
this.operState = 1;
this.graphOriginInfo = JSON.parse(JSON.stringify(graphInfo));
this.graphInfo = graphInfo;
this.diagramId = graphInfo.id;
this.$refs.graphc.drawEntry(graphInfo);
for (let i = 0; i < this.projects.length; i++) {
let currProject = this.projects[i];
if (currProject.id == graphInfo.projectId) {
this.project = {
id: currProject.id,
name: currProject.name,
groupCode: currProject.groupCode,
};
vueStore.commit("updateSelectProject", this.project);
break;
}
}
},
//线的起点选择事件
selStartPointChange: function () {
console.log(this.selLineStartPoint);
},
//线的终点选择事件
selEndPointChange: function () {
console.log(this.selLineEndPoint);
},
//字号选择事件
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,
fontBackColor: 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 });
this.updateGraphInfo(3, 5, { id: this.selText.id });
},
//根据系统图ID获取系统图数据
getDiagramById: async function () {
this.fullscreenLoading = true;
var resultObj = await sysGraphController.getDiagramById(
this.diagramId,
this.project.groupCode,
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.fullscreenLoading = false;
},
//进入编辑模式
intoEditState: function () {
this.operState = 1;
},
/**
* 设备、线、文本点击事件的回调
* dataObj 解析后的数据
* type 1 设备； 2 线； 3 文本
*/
graphClickCall: function (dataObj, type) {
var _this = this;
var oldPartType = this.selGraphPartType;
this.selGraphPartType = type;
switch (type) {
//设备
case 1:
this.selEquip = dataObj || {};
break;
//线
case 2:
this.selLine = 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.fontColor;
this.fontBackColor = this.selText.style.backColor;
break;
}
var _this = this;
//oldPartType为-1的时候，说明右侧面板之前是关闭的，那么展示后会导致图形区域变小，所以需要重绘图形
if (oldPartType == -1) {
Vue.nextTick(function () {
_this.$refs.graphc.resetDraw();
});
}
},
//关闭右侧详情框
closeRight: function () {
var _this = this;
this.selGraphPartType = -1;
Vue.nextTick(function () {
_this.$refs.graphc.resetDraw();
});
},
/**
* 保存图纸按钮事件
*/
saveGraph: async function () {
this.fullscreenLoading = true;
var saveResultObj = await sysGraphController.saveSysGraph(
this.graphInfo,
this.project.id,
this.project.groupCode
);
switch (saveResultObj.result) {
case logicConfig.resultObj.failure:
this.fullscreenLoading = false;
Message.error("保存失败：" + (saveResultObj.message || ""));
return;
case logicConfig.resultObj.success:
this.graphOriginInfo = JSON.parse(JSON.stringify(this.graphInfo));
//保存成功后，更新系统图状态为下架
var draftResultObj = await sysGraphController.draftGraph(
this.diagramId
);
this.fullscreenLoading = false;
switch (draftResultObj.result) {
case logicConfig.resultObj.success:
Message.success("保存成功");
break;
case logicConfig.resultObj.failure:
Message.error(
"保存成功，更新状态失败，原因：" + (resultObj.message || "")
);
break;
}
break;
}
},
/**
* 放弃编辑按钮事件
*/
cancelClick: function () {
var _this = this;
this.graphInfo = JSON.parse(JSON.stringify(this.graphOriginInfo));
this.operState = 0;
this.selGraphPartType = -1;
Vue.nextTick(function () {
_this.$refs.graphc.drawEntry(_this.graphInfo);
});
},
//上架系统图
publishGraph: async function () {
this.fullscreenLoading = true;
var resultObj = await sysGraphController.publishSysGraph(this.diagramId);
this.fullscreenLoading = false;
switch (resultObj.result) {
case logicConfig.resultObj.success:
this.graphOriginInfo.extraProps.state = graphStateEnum.Publish;
this.graphInfo.extraProps.state = graphStateEnum.Publish;
return Message.success("上架成功");
case logicConfig.resultObj.failure:
return Message.error("上架失败，原因：" + (resultObj.message || ""));
}
},
//下架系统图
draftGraph: async function () {
this.fullscreenLoading = true;
var resultObj = await sysGraphController.draftGraph(this.diagramId);
this.fullscreenLoading = false;
switch (resultObj.result) {
case logicConfig.resultObj.success:
this.graphOriginInfo.extraProps.state = graphStateEnum.Draft;
this.graphInfo.extraProps.state = graphStateEnum.Draft;
return Message.success("下架成功");
case logicConfig.resultObj.failure:
return Message.error("下架失败，原因：" + (resultObj.message || ""));
}
},
//删除系统图
delGraph: function () {
this.$confirm("图纸删除后将不可进行查看和编辑, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
this.fullscreenLoading = true;
var resultObj = await sysGraphController.delSysGraph(this.diagramId);
this.fullscreenLoading = false;
switch (resultObj.result) {
case logicConfig.resultObj.success:
this.$confirm("删除成功，页面将关闭", "提示", {
confirmButtonText: "确定",
type: "success",
showCancelButton: false,
closeOnClickModal: false,
showClose: false,
closeOnPressEscape: false,
}).then(async () => {
window.close();
});
return;
case logicConfig.resultObj.failure:
return Message.error(
"删除图纸失败，原因：" + (resultObj.message || "")
);
}
})
.catch(() => {});
},
//左侧系统图基础信息面板打开或隐藏
toggleLeft: function () {
var _this = this;
this.isVisibleLeft = !this.isVisibleLeft;
Vue.nextTick(function () {
_this.$refs.graphc.resetDraw();
});
},
//缩放比例选择事件
selScaleChange: function () {
this.$refs.graphc.graphScale(this.selectScale.value / 100);
},
//比例放大按钮点击事件
scaleZoomin: function () {
var newScale = this.$refs.graphc.graphScaleCompute(0.25);
this.$refs.graphc.graphScale(newScale);
},
//比例缩小按钮点击事件
scaleZoomout: function () {
var newScale = this.$refs.graphc.graphScaleCompute(-0.25);
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 });
},
//删除选择的线
delLine: function () {
this.$refs.graphc.updateDataAndGraph(2, 8, { id: this.selLine.id });
this.updateGraphInfo(2, 8, { id: this.selLine.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 移除文本节点； 6 修改文本位置； 7 修改文本内容; 8删除线
* exprObj 扩展数据，支持：{id:'数据id',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
*/
updateGraphInfo: function (dataType, operType, exprObj) {
var _this = this;
switch (dataType) {
case 2:
operLine();
break;
default:
_each(this.graphInfo.template.frame.children);
break;
}
function operLine() {
var arr = _this.graphInfo.lines;
for (let i = 0; i < arr.length; i++) {
if (arr[i].id == exprObj.id) {
switch (operType) {
case 8:
arr.splice(i, 1);
break;
}
break;
}
}
}
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.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;
}
if (_dataObj.compType == "container") {
var result = _each(_dataObj.children);
if (result) {
_dataObj.children = result;
return dataArr;
}
}
}
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(() => {});
},
//进入系统图名称编辑状态
intoGraphNameEditState: function () {
this.isEditGraphName = true;
},
//保存系统图名称
saveGraphName: async function () {
this.fullscreenLoading = true;
var resultObj = await sysGraphController.saveGraphName({
id: this.diagramId,
name: this.graphInfo.name,
});
if (resultObj.result != logicConfig.resultObj.success) {
this.fullscreenLoading = false;
Message.error("保存失败");
return;
}
this.graphOriginInfo.name = this.graphInfo.name;
this.isEditGraphName = false;
this.fullscreenLoading = false;
Message.success("保存成功");
},
//取消保存系统图名称
cancelSaveGraphName: function () {
this.graphInfo.name = this.graphOriginInfo.name;
this.isEditGraphName = false;
},
},
created() {
this.operState = !this.$route.query.ost
? -1
: parseInt(this.$route.query.ost);
this.diagramId = !this.$route.query.did ? -1 : this.$route.query.did;
this.selectScale = this.scaleArr[3];
this.project = {
id: this.$route.query.pri,
groupCode: this.$route.query.gc,
name: this.$route.query.prn,
};
if (this.operState === 0 || this.operState === 1) {
vueStore.commit("updateSelectProject", this.project);
}
},
mounted() {
var _this = this;
(async function () {
//操作状态 0 预览； 1 编辑； 2 新建 进来时是预览或编辑状态时需要加载系统图数据并绘图
if (_this.operState === 0 || _this.operState === 1) {
await _this.getDiagramById();
_this.$refs.graphc.drawEntry(_this.graphInfo);
}
})();
},
components: {
addGraph,
graph,
},
};
</script>
<style>
#divGraphEdit {
height: 100%;
display: flex;
flex-direction: column;
}
#divGraphEdit .firstRow {
height: 96px;
background: #ffffff;
box-shadow: 0px 2px 10px rgb(31 36 41 / 10%);
display: flex;
flex-direction: column;
z-index: 2;
}
#divGraphEdit .firstOperDivContainer {
flex: 1;
border-bottom: solid 1px #f2f2f2;
line-height: 48px;
}
#divGraphEdit .firstOperDivContainer > span:not(:first-child),
#divGraphEdit .operBtnDiv span {
cursor: pointer;
}
#divGraphEdit .secondOperDivContainer {
flex: 1;
}
#divGraphEdit .headerTitle {
font-weight: 600;
margin-left: 15px;
}
#divGraphEdit .operBtnDiv {
display: inline-block;
margin-left: 52px;
font-weight: 500;
}
#divGraphEdit .operBtnDiv span {
margin-left: 20px;
}
#divGraphEdit .delBtn {
float: right;
margin-right: 49px;
cursor: pointer;
}
#divGraphEdit .imgBar {
margin-left: 33px;
}
#divGraphEdit .sanjiaoBar {
vertical-align: middle;
}
#divGraphEdit .splitLine {
display: inline-block;
height: 30px;
border-left: solid 1px #d8d8d8;
vertical-align: middle;
margin-left: 26px;
border-top: none;
}
#divGraphEdit .secondOperDivContainer input {
border: none !important;
width: 66px;
padding: 0;
}
#divGraphEdit .secondOperDivContainer .el-select {
margin-left: 26px;
}
#divGraphEdit .zoomin {
margin-left: 20px;
}
#divGraphEdit .zoomout {
margin-left: 14px;
}
#divGraphEdit .imgLeftTop {
margin-left: 26px;
}
#divGraphEdit .rightLeftTop {
margin-left: 22px;
}
#divGraphEdit .resetBtn {
float: right;
margin-right: 49px;
line-height: 48px;
cursor: pointer;
}
#divGraphEdit .secondRow {
flex: 1;
display: flex;
flex-direction: row;
}
#divGraphEdit .graphInfoContainer {
background: #fafafa;
width: 200px;
height: 100%;
box-shadow: 0px 0px 1px rgb(0 0 0 / 25%);
}
#divGraphEdit .graphInfoFirst {
margin-top: 31px;
}
#divGraphEdit .graphInfoName {
margin-left: 12px;
margin-top: 21px;
font-size: 12px;
color:#6F777F;
}
#divGraphEdit .graphInfoFirstEdit {
margin-right: 12px;
float: right;
color: #0091ff;
cursor: pointer;
}
#divGraphEdit .graphInfoContent {
margin-top: 12px;
margin-left: 36px;
font-weight: normal;
}
#divGraphEdit .graphRegion {
flex: 1;
height: 100%;
overflow: hidden;
}
#divGraphEdit .rightDetail {
width: 200px;
height: 100%;
background: #fafafa;
box-shadow: -1px 0px 1px rgb(0 0 0 / 25%);
box-sizing: border-box;
padding: 6px 12px 12px 12px;
}
#divGraphEdit .rightDetail > div:first-child {
height: 100%;
}
#divGraphEdit .rightDetail .title {
color: #6f777f;
font-size: 12px;
}
#divGraphEdit .rightDetail .titleMargin {
margin-top: 19px;
}
#divGraphEdit .rightDetail .coridGroup {
margin-top: 9px;
}
#divGraphEdit .rightDetail .titleText {
font-size: 14px;
color: #000000;
}
#divGraphEdit .rightDetail .eqName {
margin-top: 11px;
}
#divGraphEdit .rightDetail .detailSplitLine {
width: 100%;
height: 0;
margin-top: 19px;
border-bottom: 1px solid #979797;
}
#divGraphEdit .rightDetail .coridTitle2 {
margin-left: 45px;
}
#divGraphEdit .rightDetail .coridTitleText {
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;
}
#divGraphEdit .rightDetail .anchorContainer {
margin-top: 15px;
}
#divGraphEdit .rightDetail .anchorContainer > span:last-child {
margin-left: 22px;
}
#divGraphEdit .rightDetail .delBtn {
color: #eb5757;
position: absolute;
bottom: 16px;
margin-left: 62px;
cursor: pointer;
}
#divGraphEdit .rightDetail .selectPrefix {
color: #000000;
font-size: 14px;
height: 100%;
line-height: 32px;
}
#divGraphEdit .rightDetail .lianjieguanxi .el-input__inner {
padding-left: 42px;
}
#divGraphEdit .rightDetail .fontSizeContainer .el-input__inner {
padding: 0 15px;
width: 80px;
}
#divGraphEdit .rightDetail .fontSizeContainer .el-select {
margin-left: 42px;
}
#divGraphEdit .rightDetail .fontColor {
position: relative;
}
#divGraphEdit .rightDetail .fontColor input {
border: none;
background: none;
width: 30px;
height: 31px;
padding: 0;
top: 0;
bottom: 0;
position: absolute;
}
#divGraphEdit .rightDetail .fontColor > div {
line-height: 31px;
display: inline-block;
}
#divGraphEdit .rightDetail .fontColor div:nth-child(2) {
margin-left: 43px;
}
#divGraphEdit .rightDetail .fontColor div:nth-child(3) {
margin-left: 16px;
}
#divGraphEdit img {
vertical-align: middle;
}
</style>