|  | @@ -8,16 +8,24 @@
 | 
	
		
			
				|  |  |          />
 | 
	
		
			
				|  |  |          <span class="headerTitle">系统图编辑器</span>
 | 
	
		
			
				|  |  |          <div class="operBtnDiv" v-if="operState === 0">
 | 
	
		
			
				|  |  | -          <span>回到首页</span>
 | 
	
		
			
				|  |  | -          <span>编辑系统图</span>
 | 
	
		
			
				|  |  | -          <span>上架系统图</span>
 | 
	
		
			
				|  |  | -          <span>下架系统图</span>
 | 
	
		
			
				|  |  | +          <!-- <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>保存图纸</span>
 | 
	
		
			
				|  |  | -          <span>放弃编辑</span>
 | 
	
		
			
				|  |  | +          <span @click="cancelClick">放弃编辑</span>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  | -        <span class="delBtn">删除图纸</span>
 | 
	
		
			
				|  |  | +        <span class="delBtn" @click="delGraph">删除图纸</span>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |        <div class="secondOperDivContainer">
 | 
	
		
			
				|  |  |          <img
 | 
	
	
		
			
				|  | @@ -61,7 +69,7 @@
 | 
	
		
			
				|  |  |        <div class="graphInfoContainer" v-if="operState === 0 || operState === 1">
 | 
	
		
			
				|  |  |          <div class="graphInfoFirst">
 | 
	
		
			
				|  |  |            <span class="graphInfoName">系统图名称</span>
 | 
	
		
			
				|  |  | -          <span class="graphInfoFirstEdit">编辑</span>
 | 
	
		
			
				|  |  | +          <span class="graphInfoFirstEdit" @click="intoEditState">编辑</span>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  |          <div class="graphInfoContent">
 | 
	
		
			
				|  |  |            <span>高压系统1#系统图</span>
 | 
	
	
		
			
				|  | @@ -102,16 +110,165 @@
 | 
	
		
			
				|  |  |            <span>草稿</span>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  | -      <div></div>
 | 
	
		
			
				|  |  | +      <div class="graphRegion">
 | 
	
		
			
				|  |  | +        <graph ref="graphc" @click="graphClickCall"></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>
 | 
	
		
			
				|  |  | +            <div class="title titleMargin">起点</div>
 | 
	
		
			
				|  |  | +            <div class="coridGroup title">
 | 
	
		
			
				|  |  | +              <span>x</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitle2">y</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div>
 | 
	
		
			
				|  |  | +            <div class="title titleMargin">拐点1</div>
 | 
	
		
			
				|  |  | +            <div class="coridGroup title">
 | 
	
		
			
				|  |  | +              <span>x</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitle2">y</span>
 | 
	
		
			
				|  |  | +              <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div class="detailSplitLine"></div>
 | 
	
		
			
				|  |  | +          <div class="title titleMargin">连接关系</div>
 | 
	
		
			
				|  |  | +          <div class="titleMargin">
 | 
	
		
			
				|  |  | +            <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">
 | 
	
		
			
				|  |  | +            <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">1#进线柜</div>
 | 
	
		
			
				|  |  | +          <div class="detailSplitLine"></div>
 | 
	
		
			
				|  |  | +          <div class="title titleMargin">
 | 
	
		
			
				|  |  | +            <span>x</span>
 | 
	
		
			
				|  |  | +            <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +            <span class="coridTitle2">y</span>
 | 
	
		
			
				|  |  | +            <span class="coridTitleText titleText">100</span>
 | 
	
		
			
				|  |  | +          </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 type="color" v-model="fontColor" />
 | 
	
		
			
				|  |  | +            <div v-text="fontColor"></div>
 | 
	
		
			
				|  |  | +            <div>100%</div>
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +          <div class="title titleMargin">背景颜色</div>
 | 
	
		
			
				|  |  | +          <div class="titleMargin fontColor">
 | 
	
		
			
				|  |  | +            <input type="color" v-model="backColor" />
 | 
	
		
			
				|  |  | +            <div v-text="backColor"></div>
 | 
	
		
			
				|  |  | +            <div>100%</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>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    <addGraph :isVisible="operState == 2"></addGraph>
 | 
	
		
			
				|  |  | +    <addGraph
 | 
	
		
			
				|  |  | +      :isVisible="operState == 2"
 | 
	
		
			
				|  |  | +      @created="createSuccessed"
 | 
	
		
			
				|  |  | +      v-if="operState == 2"
 | 
	
		
			
				|  |  | +    ></addGraph>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  | -import { mapState } from "vuex";
 | 
	
		
			
				|  |  | -import { sysGraphController } from "@/controller/sysGraphController";
 | 
	
		
			
				|  |  | -import addGraph from './addGraph.vue'
 | 
	
		
			
				|  |  | +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";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  |    props: [],
 | 
	
	
		
			
				|  | @@ -147,64 +304,213 @@ export default {
 | 
	
		
			
				|  |  |        operState: -1,
 | 
	
		
			
				|  |  |        //系统图ID
 | 
	
		
			
				|  |  |        diagramId: "",
 | 
	
		
			
				|  |  | +      /**
 | 
	
		
			
				|  |  | +       * 选择的系统图上的区域的类型
 | 
	
		
			
				|  |  | +       * -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",
 | 
	
		
			
				|  |  | +      //背景颜色
 | 
	
		
			
				|  |  | +      backColor: "#ffffff",
 | 
	
		
			
				|  |  | +      //系统图数据
 | 
	
		
			
				|  |  | +      graphInfo: {},
 | 
	
		
			
				|  |  | +      /**
 | 
	
		
			
				|  |  | +       * 选择的设备,格式如下:
 | 
	
		
			
				|  |  | +       * {
 | 
	
		
			
				|  |  | +            id: "",
 | 
	
		
			
				|  |  | +            name:'',
 | 
	
		
			
				|  |  | +            legendObj: {
 | 
	
		
			
				|  |  | +              content: "图的地址或base64串",
 | 
	
		
			
				|  |  | +              size: {
 | 
	
		
			
				|  |  | +                width: 12,
 | 
	
		
			
				|  |  | +                height: 12,
 | 
	
		
			
				|  |  | +              },
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            //设备的绝对位置
 | 
	
		
			
				|  |  | +            absolutePosition: {
 | 
	
		
			
				|  |  | +              x: 1,
 | 
	
		
			
				|  |  | +              y: 1,
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            anchorArr:[{
 | 
	
		
			
				|  |  | +              name:'锚点名称',
 | 
	
		
			
				|  |  | +              //锚点相对于设备图例的位置
 | 
	
		
			
				|  |  | +              relativePosition:{
 | 
	
		
			
				|  |  | +                x:1,y:1
 | 
	
		
			
				|  |  | +              }
 | 
	
		
			
				|  |  | +            }]
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +       */
 | 
	
		
			
				|  |  | +      selEquip: {},
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  | -  computed: {
 | 
	
		
			
				|  |  | -    ...mapState(["projects"]),
 | 
	
		
			
				|  |  | -  },
 | 
	
		
			
				|  |  | +  computed: {},
 | 
	
		
			
				|  |  |    methods: {
 | 
	
		
			
				|  |  | -    //取消创建
 | 
	
		
			
				|  |  | -    cancelCreate: function () {
 | 
	
		
			
				|  |  | -      window.close();
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 新建成功后执行的操作
 | 
	
		
			
				|  |  | +     * graphInfo 系统图数据
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    createSuccessed: function (graphInfo) {
 | 
	
		
			
				|  |  | +      //进入编辑状态
 | 
	
		
			
				|  |  | +      this.operState = 1;
 | 
	
		
			
				|  |  | +      this.graphInfo = graphInfo;
 | 
	
		
			
				|  |  | +      this.$refs.graphc.drawEntry(graphInfo);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //线的起点选择事件
 | 
	
		
			
				|  |  | +    selStartPointChange: function () {
 | 
	
		
			
				|  |  | +      console.log(this.selLineStartPoint);
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    //选择项目后要查询该项目下的专业、系统类型、系统实例
 | 
	
		
			
				|  |  | -    selProjectChange: async function () {
 | 
	
		
			
				|  |  | +    //线的终点选择事件
 | 
	
		
			
				|  |  | +    selEndPointChange: function () {
 | 
	
		
			
				|  |  | +      console.log(this.selLineEndPoint);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //字号选择事件
 | 
	
		
			
				|  |  | +    selFontSizeChange: function () {},
 | 
	
		
			
				|  |  | +    //根据系统图ID获取系统图数据
 | 
	
		
			
				|  |  | +    getDiagramById: async function () {
 | 
	
		
			
				|  |  |        this.fullscreenLoading = true;
 | 
	
		
			
				|  |  | -      this.systemInsArr = [];
 | 
	
		
			
				|  |  | -      try {
 | 
	
		
			
				|  |  | -        this.systemInsArr = await sysGraphController.getSysInstanceByProject(
 | 
	
		
			
				|  |  | -          this.selProject.id,
 | 
	
		
			
				|  |  | -          this.selProject.groupCode
 | 
	
		
			
				|  |  | -        );
 | 
	
		
			
				|  |  | -      } catch (error) {
 | 
	
		
			
				|  |  | -        console.error(error);
 | 
	
		
			
				|  |  | +      var resultObj = await sysGraphController.getDiagramById(this.diagramId);
 | 
	
		
			
				|  |  | +      if (resultObj.result != logicConfig.resultObj.success) {
 | 
	
		
			
				|  |  | +        this.fullscreenLoading = false;
 | 
	
		
			
				|  |  | +        Message.error(resultObj.reason);
 | 
	
		
			
				|  |  | +        return;
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | +      this.graphInfo = resultObj.data;
 | 
	
		
			
				|  |  | +      this.fullscreenLoading = false;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //进入编辑模式
 | 
	
		
			
				|  |  | +    intoEditState: function () {
 | 
	
		
			
				|  |  | +      this.operState = 1;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 设备、线、文本点击事件的回调
 | 
	
		
			
				|  |  | +     * dataObj 解析后的数据
 | 
	
		
			
				|  |  | +     * type 1 设备;  2 线;  3 文本
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    graphClickCall: function (dataObj, type) {
 | 
	
		
			
				|  |  | +      this.selGraphPartType = type;
 | 
	
		
			
				|  |  | +      this.selEquip = dataObj || {};
 | 
	
		
			
				|  |  | +      var _this = this;
 | 
	
		
			
				|  |  | +      Vue.nextTick(function () {
 | 
	
		
			
				|  |  | +        _this.$refs.graphc.resetDraw();
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /**
 | 
	
		
			
				|  |  | +     * 放弃编辑按钮事件
 | 
	
		
			
				|  |  | +     */
 | 
	
		
			
				|  |  | +    cancelClick: function () {
 | 
	
		
			
				|  |  | +      this.operState = 0;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //上架系统图
 | 
	
		
			
				|  |  | +    publishGraph: async function () {
 | 
	
		
			
				|  |  | +      this.fullscreenLoading = true;
 | 
	
		
			
				|  |  | +      var resultObj = await sysGraphController.publishSysGraph(this.diagramId);
 | 
	
		
			
				|  |  |        this.fullscreenLoading = false;
 | 
	
		
			
				|  |  | +      switch (resultObj.result) {
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.success:
 | 
	
		
			
				|  |  | +          this.graphInfo.extraProps.state = graphStateEnum.Publish;
 | 
	
		
			
				|  |  | +          return Message.success("上架成功");
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.failure:
 | 
	
		
			
				|  |  | +          return Message.success("上架失败,原因:" + (resultObj.reason || ""));
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    //系统实例选择事件
 | 
	
		
			
				|  |  | -    instanceChange: async function () {
 | 
	
		
			
				|  |  | +    //下架系统图
 | 
	
		
			
				|  |  | +    draftGraph: async function () {
 | 
	
		
			
				|  |  |        this.fullscreenLoading = true;
 | 
	
		
			
				|  |  | -      try {
 | 
	
		
			
				|  |  | -        //此时的数组内为选择的最低级节点,即系统实例
 | 
	
		
			
				|  |  | -        var checkedNodes = this.$refs.instanceCascader.getCheckedNodes();
 | 
	
		
			
				|  |  | -        //系统类型
 | 
	
		
			
				|  |  | -        var typeNode = checkedNodes[0].parent;
 | 
	
		
			
				|  |  | -        //查询系统类型下的系统模版
 | 
	
		
			
				|  |  | -        var templateArr = await sysGraphController.getTemplateBySysCode(
 | 
	
		
			
				|  |  | -          typeNode.data.code
 | 
	
		
			
				|  |  | -        );
 | 
	
		
			
				|  |  | -        this.systemTemplateArr = templateArr;
 | 
	
		
			
				|  |  | -      } catch (error) {
 | 
	
		
			
				|  |  | -        console.error(error);
 | 
	
		
			
				|  |  | +      var resultObj = await sysGraphController.draftGraph(this.diagramId);
 | 
	
		
			
				|  |  | +      this.fullscreenLoading = false;
 | 
	
		
			
				|  |  | +      switch (resultObj.result) {
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.success:
 | 
	
		
			
				|  |  | +          this.graphInfo.extraProps.state = graphStateEnum.Draft;
 | 
	
		
			
				|  |  | +          return Message.success("下架成功");
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.failure:
 | 
	
		
			
				|  |  | +          return Message.success("下架失败,原因:" + (resultObj.reason || ""));
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    //删除系统图
 | 
	
		
			
				|  |  | +    delGraph: async function () {
 | 
	
		
			
				|  |  | +      this.fullscreenLoading = true;
 | 
	
		
			
				|  |  | +      var resultObj = await sysGraphController.delSysGraph(this.diagramId);
 | 
	
		
			
				|  |  |        this.fullscreenLoading = false;
 | 
	
		
			
				|  |  | +      switch (resultObj.result) {
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.success:
 | 
	
		
			
				|  |  | +          return Message.success("删除图纸成功");
 | 
	
		
			
				|  |  | +        case logicConfig.resultObj.failure:
 | 
	
		
			
				|  |  | +          return Message.success(
 | 
	
		
			
				|  |  | +            "删除图纸失败,原因:" + (resultObj.reason || "")
 | 
	
		
			
				|  |  | +          );
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      },
 | 
	
		
			
				|  |  | -    //新增按钮事件
 | 
	
		
			
				|  |  | -    
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    created() {
 | 
	
		
			
				|  |  |      this.operState = !this.$route.query.ost
 | 
	
		
			
				|  |  |        ? -1
 | 
	
		
			
				|  |  |        : parseInt(this.$route.query.ost);
 | 
	
		
			
				|  |  | -    this.diagramId = !this.$route.query.did
 | 
	
		
			
				|  |  | -      ? -1
 | 
	
		
			
				|  |  | -      : parseInt(this.$route.query.did);
 | 
	
		
			
				|  |  | +    this.diagramId = !this.$route.query.did ? -1 : this.$route.query.did;
 | 
	
		
			
				|  |  |      this.selectScale = this.scaleArr[3];
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  mounted() {},
 | 
	
		
			
				|  |  | +  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
 | 
	
		
			
				|  |  | +    addGraph,
 | 
	
		
			
				|  |  | +    graph,
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
	
		
			
				|  | @@ -222,6 +528,7 @@ export default {
 | 
	
		
			
				|  |  |    box-shadow: 0px 2px 10px rgb(31 36 41 / 10%);
 | 
	
		
			
				|  |  |    display: flex;
 | 
	
		
			
				|  |  |    flex-direction: column;
 | 
	
		
			
				|  |  | +  z-index: 2;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  #divGraphEdit .firstOperDivContainer {
 | 
	
	
		
			
				|  | @@ -261,7 +568,6 @@ export default {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  #divGraphEdit .imgBar {
 | 
	
		
			
				|  |  |    margin-left: 33px;
 | 
	
		
			
				|  |  | -  vertical-align: middle;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  #divGraphEdit .sanjiaoBar {
 | 
	
	
		
			
				|  | @@ -296,12 +602,10 @@ export default {
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  #divGraphEdit .imgLeftTop {
 | 
	
		
			
				|  |  | -  vertical-align: middle;
 | 
	
		
			
				|  |  |    margin-left: 26px;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  #divGraphEdit .rightLeftTop {
 | 
	
		
			
				|  |  | -  vertical-align: middle;
 | 
	
		
			
				|  |  |    margin-left: 22px;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -345,4 +649,131 @@ export default {
 | 
	
		
			
				|  |  |    margin-top: 12px;
 | 
	
		
			
				|  |  |    margin-left: 36px;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +#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 .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;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +#divGraphEdit .rightDetail .selectPrefix {
 | 
	
		
			
				|  |  | +  color: #000000;
 | 
	
		
			
				|  |  | +  font-size: 14px;
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  | +  line-height: 32px;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +#divGraphEdit .rightDetail .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>
 |