adm-diagram-front/adm_comp/src/views/DiagramTemplate.vue

<template>
	<div>
		<el-row>
		  <!-- 模板树 -->
		  <el-col :span="6" >
			<div style="height: 100vh;overflow: scroll;">
				<el-tree :data="templates" :props="{children: 'children', label: nodeLabel, value: 'id'}"
					@node-click="openTemplate"
					default-expand-all
					:expand-on-click-node="false"
					style="width: 500px;">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ node.label}}</span>
						<span style="padding-left: 10px;">
							<el-button type="text" size="mini" icon="el-icon-plus" @click="() => newTemplate(node)" v-if="data.type == 'type'">
								新建模板
							</el-button>
							<el-popconfirm title="确定删除模板？" v-if="data.diagramType" @confirm="() => delTemplate(node)">
							  <el-button slot="reference" type="text" size="mini" icon="el-icon-remove">删除</el-button>
							</el-popconfirm>
							<el-button slot="reference" type="text" @click="() => editTemplate(node)" v-if="data.diagramType" size="mini" icon="el-icon-edit">修改</el-button>
						</span>
					</span>
				</el-tree>
			</div>
		  </el-col>
		  
		  <!-- 编辑区 -->
		  <el-col :span="18" style="border-left: 1px solid #f4f4f4">
			<!-- 工具条 -->
			<div ref="header" style="padding: 2px;border-bottom: 1px solid #f4f4f4">
				<span class="editor-title">{{currentTemplate.name}}</span>
				
				<el-button-group>
					<el-button size="mini" @click="() => addCon()" :disabled="!(state == 1 && !isEquipCompSel())">添加容器</el-button>
				</el-button-group>
				<el-button-group>
					<el-button size="mini" @click="() => moveCon(-1)" :disabled="state != 1">上移/左移</el-button>
					<el-button size="mini" @click="() => moveCon(1)" :disabled="state != 1">下移/右移</el-button>
				</el-button-group>
				&nbsp;
				<el-button-group>
					<el-button size="mini" @click="() => setProps()" :disabled="!(state == 1 || state == 2)">属性设置</el-button>
					<el-popconfirm title="确定删除选中对象？" @confirm="() => delCon()">
						<el-button slot="reference" size="mini" :disabled="!(state == 1 || state == 2)">删除</el-button>
					</el-popconfirm>
				</el-button-group>
				&nbsp;
				<el-button-group>
					<el-button size="mini" @click="() => editFilter()" :disabled="!isEquipCompSel()">设备过滤</el-button>
					<el-button size="mini" @click="() => editPack()" :disabled="!isEquipCompSel() || state != 1">设备打包</el-button>
				</el-button-group>
				&nbsp;
				<el-button-group>
					<el-button size="mini" @click="() => editDynGroup()" :disabled="state != 1 || isEquipCompSel()">动态组</el-button>
				</el-button-group>
				&nbsp;
				<el-button-group>
					<el-button size="mini" @click="() => beginMainLine()" :disabled="state == -1 || state == 9">绘制干管/线</el-button>
					<el-button size="mini" @click="() => nextLine()" :disabled="state != 9">下一条线</el-button>
					<el-button size="mini" @click="() => cancelMainLine()" :disabled="state != 9">取消绘制</el-button>
					<el-button size="mini" @click="() => finishMainLine()" :disabled="state != 9">完成绘制</el-button>
				</el-button-group>
				
				<!--选中信息-->
				<div class="info">
					<span>{{selectionInfo}}</span>
					<span style="margin-left: 30px;color: #a3a3a3;">{{dynInfo}}</span>
				</div>
			</div>
			
			 <!-- 编辑界面 -->
			<div ref="editor" :style="editorStyle">
				
			</div>
		  </el-col>
		</el-row>

		<!-- 模板信息对话框 -->
		<el-dialog title="容器属性" :visible.sync="dlgTemplateVisible">
			<div class="el-dialog-div">
				<el-form :model="propsData" label-width="130px">
					<el-form-item label="模板名称">
						<el-input v-model="propsData.name"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input
						  type="textarea"
						  :rows="2"
						  v-model="propsData.remark">
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgTemplateVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyTemplate'>确 定</el-button>
			</div>
		</el-dialog>

		<!-- 编辑容器对话框 -->
		<el-dialog title="容器属性" :visible.sync="dlgConVisible">
			<div class="el-dialog-div">
				<el-form :model="propsData" label-width="130px">
					<el-form-item label="容器Id">
						<el-input v-model="propsData.id" :disabled="propsData.root"></el-input>
					</el-form-item>
					<el-form-item label="容器名称">
						<el-input v-model="propsData.name" :disabled="propsData.root"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input
						  type="textarea"
						  :rows="2"
						  v-model="propsData.remark">
						</el-input>
					</el-form-item>
					
					<br>
					<el-form-item label="布局方式">
						<el-radio-group v-model="propsData.layout">
							<el-radio :label="1">行式</el-radio>
							<el-radio :label="2">列式</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="边距">
						<el-input-number v-model="propsData.margin" :min="2" :max="200"></el-input-number>
					</el-form-item>
					<el-form-item label="间距">
						<el-input-number v-model="propsData.space" :min="2" :max="200"></el-input-number>
					</el-form-item>
					
					<br>
					<el-form-item label="预设高度">
						<el-input-number v-model="propsData.minH" :min="100" :max="1000" :disabled="propsData.root"></el-input-number>
					</el-form-item>
					<el-form-item label="预设宽度">
						<el-input-number v-model="propsData.minW" :min="100" :max="1000" :disabled="propsData.root"></el-input-number>
					</el-form-item>
					<el-form-item label="定位">
						<el-checkbox v-model="propsData.absolute" :disabled="propsData.root">自由定位</el-checkbox>
					</el-form-item>
					
					<br>
					<el-form-item label="设备容器">
						<el-select
						  v-model="propsData.equipTypes"
						  multiple 
						  placeholder="设备类型,输入名称或代码搜索"
						  style="width: 600px;"
						  :disabled="propsData.root || propsData.hasChildren"
						  filterable
						  remote
						  :remote-method="queryEquipTypes"
						  >
						  <el-option
							v-for="item in equipOptions"
							:key="item.id"
							:label="item.name + ' - ' + item.code"
							:value="item.code">
						  </el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item label="无设备时自动隐藏" v-if="propsData.equipTypes && propsData.equipTypes.length > 0">
						<el-radio-group v-model="propsData.auto_hidden">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgConVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyCon'>确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 编辑干管对话框 -->
		<el-dialog title="干管属性" :visible.sync="dlgLineVisible">
			<el-form :model="propsData" label-width="200px">
				<el-form-item label="Id">
					<el-input v-model="propsData.id"></el-input>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="propsData.name"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input
					  type="textarea"
					  :rows="2"
					  v-model="propsData.remark">
					</el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-radio-group v-model="propsData.pipeType">
						<el-radio :label="null">无</el-radio>
						<el-radio label="supply">供</el-radio>
						<el-radio label="return">回</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<br>
				<el-form-item label="应用模式">
					<el-radio-group v-model="propsData.bindEquipment">
						<el-radio :label="false">承载连接关系</el-radio>
						<el-radio :label="true">绑定管道设备</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<br>
				<el-form-item label="可放置在干管上的设备">
					<el-select
					  v-model="propsData.equipTypes"
					  multiple 
					  placeholder="设备类型,输入名称或代码搜索"
					  style="width: 600px;"
					  :disabled="propsData.root"
					  filterable
					  remote
					  :remote-method="queryEquipTypes"
					  >
					  <el-option
						v-for="item in equipOptions"
						:key="item.id"
						:label="item.name + ' - ' + item.code"
						:value="item.code">
					  </el-option>
					</el-select>
				</el-form-item>
				
				<br>
				<el-form-item label="干管承载的关系类型" v-if="!propsData.bindEquipment">
					<el-cascader
					  placeholder="搜索"
					  :options="dicRels" :props="{expandTrigger: 'hover', multiple: true, label: 'name', value: 'code'}"
					  v-model="propsData.passbyRels" filterable collapse-tags clearable 
					  ref="relCascader" style="width: 400px;"></el-cascader>
				</el-form-item>
				<el-form-item label="直连干管的设备类型">
					<el-select
					  v-model="propsData.connectEquips"
					  multiple 
					  placeholder="设备类型,输入名称或代码搜索"
					  style="width: 600px;"
					  filterable
					  remote
					  :remote-method="queryEquipTypes"
					  >
					  <el-option
						v-for="item in equipOptions"
						:key="item.id"
						:label="item.name + ' - ' + item.code"
						:value="item.code">
					  </el-option>
					</el-select>
				</el-form-item>
				
			</el-form>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgLineVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyMainPipe'>确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 设备过滤对话框 -->
		<el-dialog title="设备过滤" :visible.sync="dlgFilterVisible">
			<FilterPanel ref="filterPanel" :dataFilter="dataFilter"></FilterPanel>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgFilterVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyFilter'>确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 设备打包对话框 -->
		<el-dialog title="设备打包" :visible.sync="dlgPackVisible">
			<div>
				<el-form :model="propsData" label-width="100px">
					<el-form-item label="">
						<el-checkbox v-model="propsData.enablePack">启用打包</el-checkbox>
					</el-form-item>
					<el-form-item label="打包选项">
						<el-radio-group v-model="propsData.packByType" :disabled="!propsData.enablePack">
							<el-radio :label="true">按设备类型打包</el-radio>
							<el-radio :label="false">所有类型打包成一个</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="打包图例">
						<el-input
						  v-model="propsData.legendId"
						  clearable
						  :disabled="!propsData.enablePack || propsData.packByType"
						  >
						</el-input>
					</el-form-item>
					<el-form-item label="打包名称">
						<el-input
						  v-model="propsData.packName"
						  clearable
						  :disabled="!propsData.enablePack || propsData.packByType"
						  >
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgPackVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyPack'>确 定</el-button>
			</div>
		</el-dialog>

		<!-- 容器动态组对话框 -->
		<el-dialog title="动态组" :visible.sync="dlgDynGroupVisible">
			<div>
				<el-form :model="propsData" label-width="100px">
					<el-form-item label="">
						<el-checkbox v-model="propsData.enableDynGroup">启用动态组</el-checkbox>
					</el-form-item>
					<el-form-item label="数据分组依据">
						<el-select v-model="propsData.dynSource" :disabled="!propsData.enableDynGroup">
							<el-option
								v-for="item in dynSourceOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="分组标签位置">
						<el-radio-group v-model="propsData.labelPosition" :disabled="!propsData.enableDynGroup">
							<el-radio label="left">左</el-radio>
							<el-radio label="bottom">下</el-radio>
							<el-radio label="right">右</el-radio>
							<el-radio label="top">上</el-radio>
							<el-radio :label="null">无</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dlgDynGroupVisible = false">取 消</el-button>
				<el-button type="primary" @click='modifyDynGroup'>确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Watch
	} from "vue-property-decorator";
	import FilterPanel from '@/components/FilterPanel.vue';
	import {TemplateEditor} from '@/lib/TemplateEditor';
	import {Container} from '@/lib/DiagramModel';

	@Component({components:{FilterPanel}})
	export default class DiagramTemplate extends Vue {
		editorStyle = {
			width: "100%",
			height: "",
			"overflow": "scroll"
		};
		
		templates = [];
		currentTemplate:any = {};
		
		editor:TemplateEditor = null;
		state = -1; //编辑状态(-1:关闭; 0:打开; 1:选中容器; 2:选中干管; 9:绘制干管)

		dlgTemplateVisible = false;
		dlgConVisible = false;
		dlgLineVisible = false;
		dlgFilterVisible = false;
		dlgPackVisible = false;
		dlgDynGroupVisible = false;
		
		propsData: any = {};
		dataFilter: any = {};
		selectionInfo = '~';
		dynInfo = '';
		
		equipTypes:any[] = null; //编辑时，系统对应的设备类型
		equipOptions:any[] = []; //属性设定时，下拉框中的设备类型列表(动态)
		dicRels:any[] = [];
		dicEquips:any[] = [];
		dynSourceOptions:any[] = [];
				
		mounted() {
			this.onWindowresize();
			this.editor = new TemplateEditor(this.$refs.editor);
			this.editor.setEditorPart(this);
								
			this['$axios'].get(this['$common'].url + "template/getTemplates")
				.then(res => {
					this.templates = res.data.data;
				})
				.catch(err => {
					//console.log(err);
				});
			
			this['$axios'].get(this['$common'].url + "relTypes")
				.then(res => {
					this.dicRels = res.data.data;
				})
				.catch(err => {
					//console.log(err);
				});
				
			this['$axios'].post(this['$common'].url + "equipTypes")
				.then(res => {
					const root = res.data;
					this.dicEquips = root.data;
				})
				.catch(err => {
					console.log(err);
				});	
		}
		
		//系统图模板树的节点显示
		nodeLabel(data, node) {
			if(data.type) //文件夹
				return data.name;
			else if(data.diagramType)//模板
				return '[模板] ' + data.name;
		}
		
		//新建模板文件
		newTemplate(node){
			this.$prompt('请输入模板名称', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info',
						inputValidator: val => {return val != null}
			       }).then(instance => {
						const params:any = {name: instance['value'], type: node.data.id};
						this['$axios'].post(this['$common'].url + "template/newTemplate", params)
							.then(res => {
								const root = res.data;
								if(root.message == 'success') {
									const newObj = root.data;
									node.data.children.push(newObj);
									
									this.$message({
										type: 'success',
										message: '操作成功!'
									});
									
									this.openTemplate(newObj);
								}
							})
							.catch(err => {
								console.log(err);
							});	
			       }).catch(() => {
								
			       });
		}
		
		//删除模板
		delTemplate(node){
			const params:any = {id: node.data.id};
			this['$axios'].post(this['$common'].url + "template/delTemplate", params)
				.then(res => {
					const root = res.data;
					if(root.data == true) {
						const parent = node.parent;
						const children = parent.data.children || parent.data;
						const index = children.findIndex(d => d.id === node.data.id);
						children.splice(index, 1);
						
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
						this.openTemplate({});
					}
				})
				.catch(err => {
					console.log(err);
				});	
		}
		
		//编辑模板信息
		editTemplate(node){
			const props: any = {id: node.data.id, name: node.data.name, remark: node.data.remark};
			this.propsData = props;
			this.dlgTemplateVisible = true;
		}
		
		//修改模板信息
		modifyTemplate(){
			if(!this.propsData.name) {
				this.$message({
					type: 'warning',
					message: '名称不合法'
				});
				return;
			}
						
			this['$axios'].post(this['$common'].url + "template/editTemplateInfo", this.propsData)
				.then(res => {
					const root = res.data;
					if(root.data == true) {
						this.currentTemplate.name = this.propsData.name;
						this.currentTemplate.remark = this.propsData.remark;
						this.propsData = {};
						
						this.dlgTemplateVisible = false;
					}
				})
				.catch(err => {
					console.log(err);
				});	
		}
		
		//在编辑器中打开模板文件
		openTemplate(data){
			if(data.type) //文件夹
				return;
				
			if(this.currentTemplate != data) {
				this.currentTemplate = data;
				this.selectionInfo = '~';
				this.dynInfo = '';
				
				this.editor.show(this.currentTemplate);
				
				if(!this.currentTemplate.id) //编辑对象为空
					this.state = -1;
				else {
					this.onSelectionChange();
					
					const sys = this.currentTemplate.diagramType.substr(0, 4);
					const arr = [];
					this.dicEquips.forEach(item => {
						if(item.systemCode == sys)
							arr.push(item);
					});
					this.equipTypes = arr;
				}
			}
		}
		
		created(){
			//window.addEventListener('resize', this.onWindowresize);
		}
		
		onWindowresize(){
			this.editorStyle.height = (window.innerHeight - this.$refs.header['offsetHeight']) + 'px';
		}
		
		//选中组件的事件触发
		onSelectionChange(){
			this.state = this.editor.getState();
			
			if(this.editor)
				this.selectionInfo = this.editor.buildSelInfo();
		}
		
		isEquipCompSel(){
			if(this.state == 1 || this.state == 2) {
				const sel = this.editor.getSelComp();
				return sel.equipmentTypes != null && sel.equipmentTypes.length > 0;
			}
			return false;
		}

		//添加容器
		addCon(){
			this.$prompt('请输入容器id', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info',
						inputValidator: val => {return val != null && this.checkId(val)}
			       }).then(instance => {
						const params:any = {newCompId: instance['value'], currentCompId:this.editor.getSelComp().id, templateId: this.currentTemplate.id};
						this.propsData = {id: params.newCompId}; //方便后续选中操作
						this.callAction('addCon', params);
			       }).catch(() => {
								
			       });
		}
		
		//检测id是否冲突
		checkId(id:string):boolean {
			return this.editor.getCompById(id) == null;
		}
		
		//删除容器
		delCon(){
			const sel = this.editor.getSelComp();
			var type;
			if(sel.children) { //容器
				if(sel.id == 'frame') {
					this.$message({
						type: 'info',
						message: '不能删除根容器!'
					});
					return;
				}
				type = "container";
			} else { //干管
				type = "mainPipe";
			}
			
			const params:any = {currentCompId: sel.id, templateId: this.currentTemplate.id};
			this.callAction(type == 'container' ? 'delCon' : 'delLine', params);
		}
		
		//移动容器
		moveCon(offset) {
			if(this.editor.getSelComp().parent == null)
				return;

			const params:any = {currentCompId:this.editor.getSelComp().id, templateId: this.currentTemplate.id, moveOffset: offset};
			this.callAction('moveCon', params);
		}

		//打开属性编辑界面
		setProps() {
			this.equipOptions = this.equipTypes;
			
			const sel = this.editor.getSelComp();
			
			const props:any = {id0: sel.id, id: sel.id, name: sel.name, remark: sel.remark};
			if(sel.children) { //容器
				if(sel.id == 'frame') 
					props.root = true;
				if(sel.children.length > 0)
					props.hasChildren = true;
				
				props.layout = sel.layout.layout;
				props.margin = sel.layout.marginTop; //暂时取上方值
				props.space = sel.layout.spaceH;
				
				props.minH = sel.position.minH;
				props.minW = sel.position.minW;
				props.absolute = sel.position.absolute;
				
				props.equipTypes = sel.equipmentTypes;
				
				if(sel.props) {
					props.auto_hidden = sel.props['auto_hidden'];
				}
				
				this.propsData = props;
				this.dlgConVisible = true;
			} else { //干管
				props.pipeType = sel.pipeType;
				props.equipTypes = sel.equipmentTypes;
				props.bindEquipment = sel.bindEquipment;
				if(sel.passbyRels){
					props.passbyRels = [];
					for(const r of sel.passbyRels) {
						props.passbyRels.push(r.split("/"));
					}
				}
				
				props.connectEquips = sel.connectEquips;
				
				this.propsData = props;
				this.dlgLineVisible = true;
			}
		}
		
		//设备容器下拉框搜索
		queryEquipTypes(query){
			if (query !== '') 
				this.equipOptions = this.dicEquips.filter(data => this.filterMatch(data.name, query) || this.filterMatch(data.code, query));
			else
				this.equipOptions = this.equipTypes;
		}
		
		filterMatch(str, filter){
			return str.toLowerCase().indexOf(filter.toLowerCase()) !== -1;
		}
		
		//修改容器属性		
		modifyCon(){
			if(this.propsData.id != this.propsData.id0 && !this.checkId(this.propsData.id)) {
				this.$message({
					type: 'warning',
					message: 'id冲突!'
				});
				return;
			}
			
			if(this.propsData.auto_hidden !== null){
				this.propsData.props = {auto_hidden: this.propsData.auto_hidden};
			}
			
			const params:any = {templatePropsData: this.propsData, currentCompId: this.propsData.id0, templateId: this.currentTemplate.id};
			this.callAction('modifyCon', params);
		}
		
		//修改干管属性
		modifyMainPipe(){
			if(this.propsData.id != this.propsData.id0 && !this.checkId(this.propsData.id)) {
				this.$message({
					type: 'warning',
					message: 'id冲突!'
				});
				return;
			}
			
			if(this.propsData.passbyRels) {
				const rels = [];
				for(const arr of this.propsData.passbyRels) {
					rels.push(arr.join("/"));
				}
				this.propsData.passbyRels = rels;
			}
			const params:any = {templatePropsData: this.propsData, currentCompId: this.propsData.id0, templateId: this.currentTemplate.id};
			this.callAction('modifyMainPipe', params);
		}

		//编辑设备过滤条件
		editFilter(){
			const sel = this.editor.getSelComp();
			this.dataFilter = sel.dataFilter != null ? sel.dataFilter : {};//为null时赋一个新对象，触发子组件watch
			
			this.dlgFilterVisible = true;
		}
		
		//修改设备过滤条件
		modifyFilter(){
			var filter = (this.$refs.filterPanel as FilterPanel).buildFilter();
			if(filter && filter.errMsg){
				this.$message({
					type: 'warning',
					message: filter.errMsg
				});
				return;
			}
			
			const params:any = {currentCompId: this.editor.getSelComp().id, templateId: this.currentTemplate.id, dataFilter: filter};
			this.callAction('modifyFilter', params);
		}
		
		//编辑设备打包配置
		editPack(){
			const sel = this.editor.getSelComp();
			
			const props:any = {};
			if(sel.equipPack) {
				props.enablePack = true;
				props.packByType = sel.equipPack.packByType;
				props.legendId = sel.equipPack.legendId;
				props.packName = sel.equipPack.packName;
			} else {
				props.enablePack = false;
				props.packByType = true;
			}
			this.propsData = props;
			
			this.dlgPackVisible = true;
		}
		
		//修改设备打包配置
		modifyPack(){
			var pack: any;
			if(!this.propsData.enablePack)
				pack = null;
			else
				pack = this.propsData;
			const params:any = {currentCompId: this.editor.getSelComp().id, templateId: this.currentTemplate.id, equipPack: pack};
			this.callAction('modifyPack', params);
		}
		
		//编辑容器的动态组配置
		editDynGroup(){
			const sel = this.editor.getSelComp();
			
			if(sel.id == 'frame') {
				this.$message({
					type: 'info',
					message: '根容器不支持动态组!'
				});
				return;
			}
			
			const props:any = {};
			if(sel.dynGroup) {
				props.enableDynGroup = true;
				props.dynSource = sel.dynGroup.dynSource;
				props.labelPosition = sel.dynGroup.labelPosition;
			} else {
				props.enableDynGroup = false;
			}
			this.propsData = props;
			
			this.dynSourceOptions = [{value:'floor', label: '楼层'}, {value:'building', label: '建筑'}];
			if(this.currentTemplate.mainPipes){
				for(const mp of this.currentTemplate.mainPipes) {
					if(mp.bindEquipment){
						this.dynSourceOptions.push({value: 'mainPipe:' + mp.id, label: '干管:' + mp.name});
					}
				}
			}
			const equipBoxes: any[] = Container.getEquipBoxes(sel);
			for(const box of equipBoxes) {
				this.dynSourceOptions.push({value: 'containerElement:' + box.id, label: '容器中设备:' + (box.name != null ? box.name : box.id)});
			}
			
			this.dlgDynGroupVisible = true;
		}
		
		//修改容器的动态组配置
		modifyDynGroup(){
			if(!this.propsData.dynSource) {
				this.$message({
					type: 'warning',
					message: '缺少必要的信息!'
				});
				return;
			}
			
			var dynGroup: any;
			if(!this.propsData.enableDynGroup)
				dynGroup = null;
			else
				dynGroup = this.propsData;
			const params:any = {currentCompId: this.editor.getSelComp().id, templateId: this.currentTemplate.id, dynGroup: dynGroup};
			this.callAction('modifyDynGroup', params);
		}
		
		//调用服务端编辑操作，返回新的模板对象，然后刷新
		callAction(action, params) {
			this['$axios'].post(this['$common'].url + 'template/' + action, params)
				.then(res => {
					const root = res.data;
					if(root.message == 'success') {
						//记录之前的选中对象id
						var selId = this.propsData.id;
						if(!selId) {
							const sel:any = this.editor.getSelComp();	
							if(sel)
								selId = sel.id;
						}
						
						const newObj = root.data;
						if(newObj == null)
							return;
							
						this.currentTemplate.frame = newObj.frame;
						this.currentTemplate.mainPipes = newObj.mainPipes;
						this.currentTemplate.scatteredContainers = newObj.scatteredContainers;
						
						// this.$message({
						// 	type: 'success',
						// 	message: '操作成功!'
						// });
						
						if(this.dlgConVisible)
							this.dlgConVisible = false;
						if(this.dlgLineVisible)
							this.dlgLineVisible = false;
						if(this.dlgFilterVisible)
							this.dlgFilterVisible = false;
						if(this.dlgPackVisible)
							this.dlgPackVisible = false;
						if(this.dlgDynGroupVisible)
							this.dlgDynGroupVisible = false;
						this.propsData = {};
						
						this.editor.show(this.currentTemplate);
						this.editor.setSelComp(this.editor.getCompById(selId));
					}
				})
				.catch(err => {
					console.log(err);
				});	
		}

		//开始绘制干管
		beginMainLine(){
			this.changeState(9);
		}
		
		//下一条线
		nextLine() {
			this.editor.currentTmpMainPipe = null;
		}
		
		//取消干管绘制操作
		cancelMainLine(){
			this.dynInfo = '';
			
			this.changeState(this.editor.getState());
			this.editor.redraw();
		}
		
		//完成干管绘制
		finishMainLine(){
			this.dynInfo = '';
			
			for(var i = 0; i < this.editor.tmpMainPipe.length; i++) {
				const line = this.editor.tmpMainPipe[i];
				if(line.length < 2) {
					this.editor.tmpMainPipe.splice(i, 1);
					i--;
				}
			}
			if(this.editor.tmpMainPipe.length == 0) {
				this.cancelMainLine();
				return;
			}
				
			const lines:any[] = [];
			this.editor.tmpMainPipe.forEach(item => {
				const line:any[] = [];
				lines.push(line);
				
				for(const p of item){
					line.push({x:p.x - this.editor.margin, y:p.y - this.editor.margin})
				}
			});

			const params:any = {lines: lines, templateId: this.currentTemplate.id};
			this.callAction('addMainPipe', params);
		}
		
		//切换编辑状态
		changeState(state) {
			this.state = state;
			this.editor.setState(state);
		}
		
	}
</script>

<style>
	.panel {
		padding: 30px;
	}
	.custom-tree-node {
		/* 	flex: 1;
		display: flex; */
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 20px;
	}
	.editor-title {
		font-size: 14px;
		font-weight: bold;
		padding:0 10px;
	}
	.info {
		font-size: 12px;
		padding:0 10px;
	}
	.el-dialog-div{
		height: 60vh;
		overflow: auto;
	}
</style>