adm-frontend/src/components/systemGraph/edit.vue

<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>