|
@@ -0,0 +1,909 @@
|
|
|
+<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">
|
|
|
+ <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" @onConfirm="() => delTemplate(node)">
|
|
|
+ <el-button slot="reference" type="text" size="mini" icon="el-icon-remove">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <el-button-group>
|
|
|
+ <el-button size="mini" @click="() => setProps()" :disabled="!(state == 1 || state == 2)">属性设置</el-button>
|
|
|
+ <el-popconfirm title="确定删除选中对象?" @onConfirm="() => delCon()">
|
|
|
+ <el-button slot="reference" size="mini" :disabled="!(state == 1 || state == 2)">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </el-button-group>
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <el-button-group>
|
|
|
+ <el-button size="mini" @click="() => editDynGroup()" :disabled="state != 1 || isEquipCompSel()">动态组</el-button>
|
|
|
+ </el-button-group>
|
|
|
+
|
|
|
+ <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="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:绘制干管)
|
|
|
+
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //在编辑器中打开模板文件
|
|
|
+ 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>
|