From 0b08d373869c91dda58dd0e33b13fe59688234f9 Mon Sep 17 00:00:00 2001 From: zzw <wander.zheng@qq.com> Date: 星期三, 29 十一月 2023 17:03:54 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- web/src/views/modules/flowChart/flowChartEdit.vue | 827 +++++++++++++++++++ modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java | 9 web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue | 8 zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml | 11 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java | 3 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java | 20 web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue | 4 web/src/views/modules/sys/task/already-task.vue | 13 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java | 3 web/src/views/modules/project/Environ.vue | 4 web/src/views/modules/flowChart/flowChartView.vue | 474 +++++++++++ web/src/views/modules/project/Project.vue | 4 web/src/views/modules/project/SoftwareTestOrder.vue | 4 web/src/views/modules/flowChart/ConfigNode/project-list-select.vue | 273 ++++++ web/src/views/modules/flowChart/flowChartEdge/index.vue | 143 +++ web/src/views/modules/flowChart/ProcessTrajectory.vue | 42 + modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java | 3 web/src/views/modules/sys/task/stay-task.vue | 8 web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue | 18 web/src/views/modules/flowChart/processTimeline.vue | 111 ++ web/src/views/modules/sys/task/taskCenter.vue | 7 web/src/views/modules/flowChart/ConfigNode/index.vue | 256 ++++++ modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml | 2 web/src/views/modules/flowChart/flowChartNode/index.vue | 235 +++++ 24 files changed, 2,422 insertions(+), 60 deletions(-) diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java index ba35e36..3c06162 100644 --- a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java +++ b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java @@ -14,6 +14,7 @@ import com.zt.common.validator.group.UpdateGroup; import com.zt.life.modules.configItemWarehouse.dto.ConfigItemWarehouseDto; import com.zt.life.modules.configItemWarehouse.model.ConfigItemWarehouse; +import com.zt.life.modules.configItemWarehouse.model.WarehouseConfigItem; import com.zt.life.modules.configItemWarehouse.service.ConfigItemWarehouseService; import com.zt.life.modules.itemCirculatOrder.dto.ItemCirculatOrderDto; import com.zt.life.modules.itemCirculatOrder.model.ItemCirculatOrderTechnical; @@ -60,12 +61,12 @@ @ApiImplicitParam(name = Constant.Q.ORDER_FIELD, value = Constant.QV.ORDER_FIELD, dataType = Constant.QT.STRING), @ApiImplicitParam(name = Constant.Q.ORDER, value = Constant.QV.ORDER, dataType = Constant.QT.STRING), @ApiImplicitParam(name = "code", value = "閰嶇疆椤瑰叆搴撶紪鍙�", dataType = Constant.QT.STRING, format = "code^LK"), - @ApiImplicitParam(name = "projectCode", value = "椤圭洰缂栧彿", dataType = Constant.QT.STRING, format = "project_code^LK"), - @ApiImplicitParam(name = "projectName", value = "椤圭洰鍚嶇О", dataType = Constant.QT.STRING, format = "project_name^LK"), + @ApiImplicitParam(name = "projectCode", value = "椤圭洰缂栧彿", dataType = Constant.QT.STRING, format = "code1^EQ"), + @ApiImplicitParam(name = "softwareName", value = "椤圭洰鍚嶇О", dataType = Constant.QT.STRING, format = "software_name^EQ"), @ApiImplicitParam(name = "libraryType", value = "搴撶被鍨�", dataType = Constant.QT.STRING, format = "library_type^EQ") }) public PageResult<ConfigItemWarehouse> page(@ApiIgnore @QueryParam QueryFilter queryFilter){ - - return PageResult.ok(configItemWarehouseService.page(queryFilter)); + List<ConfigItemWarehouse> configItemWarehouse=configItemWarehouseService.page(queryFilter); + return PageResult.ok(configItemWarehouse); } @GetMapping("getDto") @@ -73,9 +74,12 @@ public Result<ConfigItemWarehouseDto> getDto(Long projectId, Long warehouseId) { ConfigItemWarehouseDto data =configItemWarehouseService.getDto(projectId, warehouseId); if (warehouseId!=null) { - OssDto ossDto = sysOssConfigService.getOssByBusiType(warehouseId, "config_item_warehouse"); - if (ossDto != null) { - data.setFiles(ossDto); + for (WarehouseConfigItem configItem : data.getConfigItemList()) { + Long configItemId = configItem.getId(); + OssDto ossDto = sysOssConfigService.getOssByBusiType(configItemId, "config_item_warehouse"); + if (ossDto != null) { + configItem.setFiles(ossDto); + } } } return Result.ok(data); @@ -106,7 +110,7 @@ return Result.ok(); } - @DeleteMapping + @DeleteMapping("deleteConfigItem") @ApiOperation("鍒犻櫎") @LogOperation("鍒犻櫎") public Result delete(@RequestBody Long[] ids){ diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java index 1c37670..13810f6 100644 --- a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java +++ b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java @@ -25,8 +25,7 @@ private Project project; @ApiModelProperty(value = "閰嶇疆椤瑰叆搴�") private ConfigItemWarehouse configItemWarehouse; - @ApiModelProperty(value = "闄勪欢") - private OssDto files; + @ApiModelProperty(value = "鍏ュ簱閰嶇疆椤�") private List<WarehouseConfigItem> configItemList = new ArrayList<>(); diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java index 596f425..1e24a90 100644 --- a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java +++ b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java @@ -1,5 +1,6 @@ package com.zt.life.modules.configItemWarehouse.model; +import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableName; import com.fasterxml.jackson.annotation.JsonFormat; import com.zt.common.entity.BusiEntity; @@ -84,4 +85,12 @@ @ApiModelProperty(value = "骞翠唤") private String year; + @TableField(exist = false) + @ApiModelProperty(value = "椤圭洰鍚嶇О") + private String softwareName; + + @TableField(exist = false) + @ApiModelProperty(value = "椤圭洰缂栧彿") + private String projectCode; + } diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java index 9a0c518..9460079 100644 --- a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java +++ b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java @@ -2,6 +2,7 @@ import com.baomidou.mybatisplus.annotation.TableName; import com.zt.common.entity.BusiEntity; +import com.zt.life.sys.dto.OssDto; import io.swagger.annotations.ApiModel; import io.swagger.annotations.ApiModelProperty; import lombok.Data; @@ -42,4 +43,6 @@ @ApiModelProperty(value = "瀵嗙骇") private String secretClass; + @ApiModelProperty(value = "闄勪欢") + private OssDto files; } diff --git a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java index 6d98b9e..862c230 100644 --- a/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java +++ b/modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java @@ -100,6 +100,7 @@ configItem.setWarehouseId(warehouseId); configItemService.insert(configItem); } + sysOssConfigService.updateOss(configItem.getId(), configItem.getFiles());// 淇濆瓨闄勪欢 } for (WarehouseCmAudit cmAudit : configItemDto.getCmAuditList()) { @@ -121,8 +122,6 @@ qaAuditService.insert(qaAudit); } } - sysOssConfigService.updateOss(configItemDto.getId(), configItemDto.getFiles());// 淇濆瓨闄勪欢 - return true; } diff --git a/modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml b/modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml index 58e02bc..a39002e 100644 --- a/modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml +++ b/modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml @@ -4,7 +4,7 @@ <mapper namespace="com.zt.life.modules.configItemWarehouse.dao.ConfigItemWarehouseDao"> <select id="getList" resultType="com.zt.life.modules.configItemWarehouse.model.ConfigItemWarehouse"> - select a.* ,p.* + select a.* ,p.*,p.CODE AS projectCode from config_item_warehouse a INNER JOIN project p ON p.id = a.project_id <where> diff --git a/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue b/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue index 30e0824..1b75940 100644 --- a/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue +++ b/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue @@ -1,7 +1,6 @@ <template> - <el-card shadow="never" class="aui-card--fill"> - <div class="mod-configItemWarehouse-configItemWarehouse}"> - <zt-table-wraper query-url="/configItemWarehouse/ConfigItemWarehouse/page" delete-url="/configItemWarehouse/ConfigItemWarehouse" v-slot="{ table }"> + <div class="fa-card-a"> + <zt-table-wraper query-url="/configItemWarehouse/ConfigItemWarehouse/page" delete-url="/configItemWarehouse/ConfigItemWarehouse/deleteConfigItem" v-slot="{ table }"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> <el-form-item> <el-input v-model="dataForm.code" placeholder="璇疯緭鍏ラ厤缃」鍏ュ簱缂栧彿" clearable></el-input> @@ -10,7 +9,7 @@ <el-input v-model="dataForm.projectCode" placeholder="璇疯緭鍏ラ」鐩紪鍙�" clearable></el-input> </el-form-item> <el-form-item> - <el-input v-model="dataForm.projectName" placeholder="璇疯緭鍏ラ」鐩悕绉�" clearable></el-input> + <el-input v-model="dataForm.softwareName" placeholder="璇疯緭鍏ラ」鐩悕绉�" clearable></el-input> </el-form-item> <el-form-item> <zt-dict v-model="dataForm.libraryType" dict="library_type" clearable></zt-dict> @@ -22,10 +21,10 @@ </el-form-item> </el-form> <el-table v-loading="table.dataLoading" :data="table.dataList" height="100px" v-adaptive="{bottomOffset:70}" border @selection-change="table.selectionChangeHandle"> - <el-table-column type="selection" width="40"/> + <el-table-column align="center" type="selection" width="40"/> <el-table-column prop="code" label="閰嶇疆椤瑰叆搴撶紪鍙�"/> <el-table-column prop="projectCode" label="椤圭洰缂栧彿"/> - <el-table-column prop="projectName" label="椤圭洰鍚嶇О"/> + <el-table-column prop="softwareName" label="椤圭洰鍚嶇О"/> <zt-table-column-dict prop="libraryType" label="搴撶被鍨�" dict="library_type"/> <zt-table-column-handle :table="table" edit-perm="configItemWarehouse:update" delete-perm="configItemWarehouse::delete"/> </el-table> @@ -36,8 +35,7 @@ @setProjectInfo="openAddWin"> </ProjectSelect> </zt-table-wraper> - </div> - </el-card> + </div> </template> <script> @@ -49,8 +47,8 @@ dataForm: { code: '', projectCode: '', - projectName: '', - libraryType: '', + softwareName: '', + libraryType: '' } } }, diff --git a/web/src/views/modules/flowChart/ConfigNode/index.vue b/web/src/views/modules/flowChart/ConfigNode/index.vue new file mode 100644 index 0000000..ebf59e9 --- /dev/null +++ b/web/src/views/modules/flowChart/ConfigNode/index.vue @@ -0,0 +1,256 @@ +<template> + <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'"> + <el-card style="height: 100%"> + <el-tabs v-model="activeName" id="tabPane"> + <el-tab-pane label="鏂囨湰" name="first"> + <el-row :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">鏂囨湰澶у皬</el-col> + <el-col :span=16> + <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider> + </el-col> + </el-row> + <el-row :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">瀛椾綋棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker> + </el-col> + </el-row> + <el-row v-show="shape!=='custom-text' || shape!=='custom-circle1'" :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 32px">椤圭洰鍚嶇О</el-col> + <el-col :span=16 > + <el-input @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input> + </el-col> + </el-row> + <el-row :gutter="5" v-show="shape!=='custom-circle1'" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 32px">杩囩▼鍚嶇О</el-col> + <el-col :span=16 > + <el-input v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input> + </el-col> + </el-row> + <el-row v-show="shape!=='custom-text'" :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 32px">鏃ユ湡</el-col> + <el-col :span=16 > + <el-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="yyyy-MM-dd" + style="width: 100%" @change="onDateChange"> + </el-date-picker> + </el-col> + </el-row> + </el-tab-pane> + <el-tab-pane label="鑺傜偣" name="second"> + <el-row align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">杈规棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker> + </el-col> + </el-row> + <el-row align="middle"style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">杈规瀹藉害</el-col> + <el-col :span=16> + <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider> + </el-col> + </el-row> + <el-row align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker> + </el-col> + </el-row> + </el-tab-pane> + </el-tabs> + </el-card> + <el-dialog ref="detailedDialog" title="閫夋嫨椤圭洰" width='85%' :visible.sync="dialogVisible "> + <Inspection @func="procResult" ref="inspectionNode" /> + </el-dialog> + </div> +</template> + +<script> +import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6'; +import Inspection from './project-list-select' +// const {inject} = require("vue"); +export default { + name: "index", + data(){ + return{ + data:{ + dataId:'', + finishDate: '', + inspectName:'' + }, + date:'', + text:'', + dateId:'', + content:'', + dialogVisible:false, + activeName: 'first', + // globalGridAttr:{}, + curCel:Cell, + left_p:document.documentElement.clientHeight*0.9, + } + }, + components:{ + Inspection + }, + props:{ + id: { + type: String, + }, + shape:{ + type: String + }, + refY2:{ + type: Number + }, + globalGridAttr:{ + type: Object, + }, + graph:{ + type: String, + }, + projectId:{ + type: String, + }, + diagramId:{ + type: String, + } + }, + watch:{ + 'id'(val,oldVal){ + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + } + }, + mounted() { + // this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + methods:{ + showDialog() { + let param = {projectId:this.projectId,diagramId:this.diagramId} + console.log(param, 'dialog init param') + this.dialogVisible = true; + this.$nextTick(()=>{ + this.$refs.inspectionNode.init(param) + }) + }, + procResult(node) { + // console.log(node,'node') + this.text =node.nodeName + this.dateId = node.nodeId + this.globalGridAttr.dataId = this.dateId + this.globalGridAttr.inspectName = this.text + this.globalGridAttr.nodeText = this.text + this.data={ + dataId:this.dateId, + inspectName:this.text + } + this.curCel.setData(this.data) + this.curCel.attr('text/text', this.text) + this.curCel.attr('data/dataId', this.dateId) + this.curCel.attr('data/inspectName', this.text) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + this.dialogVisible = false + // console.log(node,'dialog绐楀彛杩斿洖鍊�') + }, + // 鏀瑰彉杈规棰滆壊 + onStrokeChange(e){ + let val = e + this.globalGridAttr.nodeStroke = val + this.curCel.attr('body/stroke', val) + }, + //鏀瑰彉杈规澶у皬 + onStrokeWidthChange(e){ + let val =e + this.globalGridAttr.nodeStrokeWidth = val + this.curCel.attr('body/strokeWidth', val) + }, + //鏀瑰彉鏂囨湰棰滆壊 + onFillChange(e){ + let val = e + this.globalGridAttr.nodeFill=val + this.curCel.attr('body/fill', val) + // this.curCel.attr('title/fill', val) + }, + // 鏀瑰彉瀛椾綋澶у皬 + onFontSizeChange(e){ + let val =e + this.globalGridAttr.nodeFontSize = val + this.curCel.attr('text/fontSize', val) + this.curCel.attr('title/fontSize', val) + }, + // 鏀瑰彉瀛椾綋棰滆壊 + onColorChange(e){ + let val =e + this.globalGridAttr.nodeColor = val + this.curCel.attr('text/fill', val) + this.curCel.attr('title/fill', val) + this.curCel.attr('text/style/color', val) + this.curCel.attr('title/style/color', val) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + // 鏀瑰彉鏂囨湰 + onTextChange(e){ + this.text =e + this.globalGridAttr.nodeText = this.text + this.curCel.attr('label/textWrap/text', this.text) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + + }, + onDateChange(e){ + this.date =e + this.globalGridAttr.nodeDate = this.date + this.data={ + finishDate:this.date, + } + this.curCel.setData(this.data) + if(this.shape=='custom-circle1'){ + this.curCel.attr('text/text', this.date) + } + this.curCel.attr('title/text', this.date) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + nodeOpt(id, globalGridAttr){ + this.curCel=null + if(id){ + let cell = this.graph.getCellById(id) + // console.log(cell,'let cell 123456') + if (!cell || !cell.isNode()) { + return + } + this.curCel = cell + globalGridAttr.nodeStroke = cell.attr('body/stroke') + globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth') + globalGridAttr.nodeFill = cell.attr('body/fill') + // globalGridAttr.nodeFontSize = cell.attr('text/fontSize') + // globalGridAttr.nodeFontSize = cell.attr('title/fontSize') + globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize') + globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill') + // globalGridAttr.nodeColor = cell.attr('text/fill') + // globalGridAttr.nodeColor = cell.attr('title/fill') + // globalGridAttr.nodeColor = cell.attr('text/style/color') + // globalGridAttr.nodeColor = cell.attr('title/style/color') + globalGridAttr.nodeUsers = cell.attr('approve/users') + globalGridAttr.nodeText = cell.attr('label/textWrap/text') + if(this.shape=='custom-circle1'){ + globalGridAttr.nodeDate = cell.attr('text/text') + } + globalGridAttr.nodeDate = cell.attr('title/text') + globalGridAttr.dataId = cell.getData().dataId + globalGridAttr.inspectName =cell.getData().inspectName + // console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789') + cell.getData() + // console.log( cell.getData(),' cell.getData() 909') + } + return this.curCel; + } + } +} +</script> + +<style > +#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{ +width: 100% !important; +} + +#tabPane .el-color-picker__trigger{ + width: 100%; +} +</style> diff --git a/web/src/views/modules/flowChart/ConfigNode/project-list-select.vue b/web/src/views/modules/flowChart/ConfigNode/project-list-select.vue new file mode 100644 index 0000000..063761e --- /dev/null +++ b/web/src/views/modules/flowChart/ConfigNode/project-list-select.vue @@ -0,0 +1,273 @@ +<template> + <div class="v-service-user"> + <zt-table-wraper ref="tableObj" query-url="/maintain/projectNetworkDiagram/getInspectionPage" :lazy="true" :paging='true' + delete-url="/project/inspection" v-slot="{ table }"> + <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> + <el-form-item class="toolbar"> + <el-form-item prop="projectId" style="margin-top: 2px;width: 150px;"> + <zt-select v-model="dataForm.projectId" :datas="model" placeholder="宸ョ▼椤圭洰" clearable></zt-select> + </el-form-item> + <el-form-item style="margin-top: 2px;" v-show="selectProjectFlag"> + <el-input v-model="dataForm.userKey" placeholder="鍏抽敭瀛�" style="width: 150px;" clearable></el-input> + </el-form-item> + <!--<el-form-item prop="projectMajor" style="margin-top: 2px;width: 150px;">--> + <!--<zt-dict v-model="dataForm.projectMajor" dict="project_major" placeholder="宸ョ▼涓撲笟" clearable></zt-dict>--> + <!--</el-form-item>--> + <el-form-item prop="reconditionMajor" style="margin-top: 2px;width: 120px;" v-show="selectProjectFlag"> + <zt-dict v-model="dataForm.reconditionMajor" dict="recondition_major" placeholder="鐩戜慨涓撲笟" + clearable></zt-dict> + </el-form-item> + <el-form-item style="width:130px;margin-top: 2px;" v-show="selectProjectFlag"> + <zt-dict v-model="dataForm.projectType" dict="project_type" placeholder="椤圭洰绫诲瀷" + @keyup.enter.native="table.query()" clearable></zt-dict> + </el-form-item> + <el-form-item style="width:120px;margin-top: 2px;" v-show="selectProjectFlag"> + <el-select v-model="dataForm.planStatus" placeholder="椤圭洰鐘舵��" @change="table.query()" clearable> + <el-option label="鏈畬宸�" value="0"></el-option> + <el-option label="宸插畬宸�" value="1"></el-option> + <el-option label="宸插彇娑�" value="2"></el-option> + </el-select> + </el-form-item> + <el-form-item class="message-btn" style="margin-top: 2px;"> + <el-button type="primary" size="medium" icon="el-icon-search" @click="table.query()">鎼滅储 + </el-button> + </el-form-item> + </el-form-item> + </el-form> + <!--{{ table }}--> + <el-table id="table" ref="table" v-adaptive="{bottomOffset:120}" height="650px" v-loading="table.dataLoading" + :data="table.dataList" :default-expand-all="false" :paging="true" @current-change="showProjectList" + border align-text="left" + @selection-change="table.selectionChangeHandle" row-key="id" width="100%" lazy :load="load" + class="repair_button" + @row-dblclick="rowDblclick" + :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> + <el-table-column type="selection" width="40" v-show="!isShow"/> + <el-table-column prop="projectListCode" label="缂栧彿" width="160" v-if="showColumn.projectListCode" sortable show-overflow-tooltip > + </el-table-column> + <el-table-column prop="projectListName" label="宸ョ▼鍚嶇О" v-if="showColumn.projectListName" show-overflow-tooltip/> + <el-table-column prop="examineConcat" label="妫�楠屽唴瀹�" v-if="showColumn.examineConcat" show-overflow-tooltip/> + <el-table-column prop="maintainUnitName" label="鎵夸慨鍗曚綅" v-if="showColumn.maintainUnit" show-overflow-tooltip/> + </el-table> + </zt-table-wraper> + </div> +</template> + +<script> + export default { + props: { + noImportCodes: { + type: Object + }, + isShow: { + type: Number + }, + projectTypeName: { + type: String + } + }, + data() { + return { + timeNodeArr: [{projectType: '', projectTypeName: '', timeNode: ''}], + timeNodesForm: { + timeNodes: '' + }, + isShowColumn: '', + dialogFormVisible: false, + checkList: {}, + showColumn: { + projectListCode: true, + projectListName: true, + examineConcat: true, + maintainUnit: true, + gmtFinish: true, + reconditionMajor: true, + isSpecial: true, + armyType: true, + isCheck: true, + files: true, + projectTypeName: true, + planStatus: true, + timeRemaining: true, + deadline: true, + cause: true, + }, + fullHeight: (document.documentElement.clientHeight - 210) - 120, + word: {}, + dataForm: { + projectId: '', + diagramId:'', + reconditionMajor: '', + projectTypeName: '', + productId: '', // 閫夋嫨鐨勪骇鍝佽妭鐐� + userKey: '', // 鐢ㄦ埛杈撳叆鍏抽敭瀛� + projectMajor: '', // 宸ョ▼涓撲笟 + id: '', + projectName: '', + planStatus: '', + type: '', + projectNode: '', + floatTime: '', + typeStr: '', + maxDate: '', + minDate: '', + options: [], + }, + constructionOrInspection: 1, + model: '', + timeNodeArr: [], + options: [{value: 0, label: '鍚�'}, {value: 1, label: '鏄�'}], + postList: [{id: '0', name: '鏈畬宸�'}, {id: '1', name: '宸插畬宸�'}, {id: '2', name: '宸插彇娑�'}], + equipments: { + equipments: [] + }, + parts: { + parts: [] + }, + stateFrom: { + id: '', + planStatus: '' + }, + oldDataForm: { + productId: '', + projectId: '', + maintainLevel: '' + }, + queryForm: { + productId: '', + projectId: '', + maintainLevel: '' + }, + technologyData: { + equipmentData: [], + unitData: [] + }, + // postList: [{id: '3', name: '鏈鎵�'}, {id: '0', name: '宸查┏鍥�'}, {id: '1', name: '宸插悓鎰�'}], + twoPostList: [{id: '3', name: '鏈鎵�'}, {id: '0', name: '宸查┏鍥�'}, {id: '1', name: '宸插悓鎰�'}], + isStyle: "margin-top:-10px", + ids: [], + productId: '', + armyCheckNo: '', + selectProjectFlag: false, + timeNodes: false + } + }, + components: { + }, + computed: { + }, + created() { + }, + mounted() { + this.getInfo() + }, + watch: { + }, + methods: { + init(item) { + // this.$nextTick(()=>{ + console.log(item, "dialog init param.....................") + this.dataForm.projectId = item.projectId + this.dataForm.diagramId = item.diagramId + this.selectProjectFlag = true + console.log(this.dataForm, ' init this.dataForm') + this.$refs.tableObj.query() + // }) + }, + rowDblclick(row) { + console.log(row.id,'鍙屽嚮琛岀殑id') + console.log(row.name,'鍙屽嚮琛岀殑鏁版嵁') + this.$emit('func',{nodeId:row.id,nodeName:row.projectListName}) + }, + async getInfo(){ + if (this.$store.state.user.localShip) { + this.dataForm.productId = this.$store.state.user.localShip + } + let res = await this.$http.get(`/homeFunction/projectSelect?productId=${this.dataForm.productId}`) + this.model = res.data + if (this.model.length > 0 && !this.dataForm.projectId) { + this.dataForm.projectId = this.model[0].id + } + } + } + } +</script> +<style lang="less" > + #columnOption { + position: fixed; + z-index: 20; + top: 15%; + left: 80%; + width: 10%; + height: 60%; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: row-reverse; + .content { + width: 100%; + height: 100%; + .head { + width: 100%; + height: 44px; + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + } + .body { + width: 88%; + height: calc(100% - 88px); + box-sizing: border-box; + margin-left:20px; + padding-top: 10px; + overflow-y: auto; + .items { + width: 100%; + height: 100%; + overflow-y: auto; + display: flex; + flex-direction: column; + .el-checkbox__label { + width: 100%; + height: 28px; + line-height: 28px; + margin-bottom: 14px; + display: inline-block; + font-style: normal; + font-weight: normal; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + padding-left: 14px; + } + .el-checkbox:hover { + background-color: #f5f7fa; + } + } + } + #footer { + width: 100%; + height: 44px; + display: flex; + justify-content: center; + align-items: center; + size: 20px; + } + } + } + // 鎺у埗娣″叆娣″嚭鏁堟灉 + .fade-enter-active, + .fade-leave-active { + transition: opacity 0.3s; + } + .fade-enter, + .fade-leave-to { + opacity: 0; + } + #columnOption .el-checkbox{ + display: block; + margin-top:10px; + } +</style> diff --git a/web/src/views/modules/flowChart/ProcessTrajectory.vue b/web/src/views/modules/flowChart/ProcessTrajectory.vue new file mode 100644 index 0000000..4fa2bfc --- /dev/null +++ b/web/src/views/modules/flowChart/ProcessTrajectory.vue @@ -0,0 +1,42 @@ +<!--娴佺▼杞ㄨ抗--> +<template> + <zt-dialog ref="dialog" :hasConfirm="false" title="娴佺▼鍔炵悊杞ㄨ抗" append-to-body + @close="close"> + <el-table :data="tableData" v-adaptive="{bottomOffset: 100}" + height="250" + v-loading="this.dataLoading"> + <el-table-column align="center" label="姝ラ鍚�" prop="stepName"></el-table-column> + <el-table-column align="center" label="瑙掕壊鍚�" prop="receiveName"></el-table-column> + <el-table-column align="center" label="鎺ュ彈浠诲姟鏃堕棿" prop="receiveTime"></el-table-column> + <el-table-column align="center" label="瀹屾垚鏃堕棿" prop="finishTime"></el-table-column> + </el-table> + </zt-dialog> +</template> + +<script> + export default { + name: 'ProcessTrajectory', + data(){ + return{ + tableData:[], + dataLoading:false, + } + }, + methods:{ + async init(params){ + this.dataLoading = true + let res =await this.$http.get(`wf/getFlowTrack`,{params: params}) + console.log(res.data,'processTra res.data') + if(res){ + this.tableData = res.data + console.log(res.data,'getFlowTrack res.data') + } + this.dataLoading = false + } + } + } +</script> + +<style scoped> + +</style> diff --git a/web/src/views/modules/flowChart/flowChartEdge/index.vue b/web/src/views/modules/flowChart/flowChartEdge/index.vue new file mode 100644 index 0000000..f80528c --- /dev/null +++ b/web/src/views/modules/flowChart/flowChartEdge/index.vue @@ -0,0 +1,143 @@ +<template> + <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'"> + <el-card style="height: 100%"> + <el-tabs v-model="activeName" id="EdgeTabPane"> + <el-tab-pane label="绾挎潯" name="first"> + <el-row :gutter="5" align="middle" style="margin-top:20px;"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">瀹藉害</el-col> + <el-col :span=16> + <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider> + </el-col> + </el-row> + <el-row :gutter="5" align="middle" style="margin-top:20px;"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.stroke" style="width: 100%" @change="onStrokeChange"></el-color-picker> + </el-col> + </el-row> +<!-- <el-row :gutter="5" align="middle" style="margin-top:20px;">--> +<!-- <el-col :span=8 style="font-size: 16px;line-height: 32px">绫诲瀷</el-col>--> +<!-- <el-col :span=16>--> +<!-- <el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">--> +<!-- <el-option--> +<!-- v-for="item in options"--> +<!-- :key="item.value"--> +<!-- :label="item.label"--> +<!-- :value="item.value">--> +<!-- </el-option>--> +<!-- <!– <el-option value="normal">榛樿</el-option>–>--> +<!-- <!– <el-option value="smooth">骞虫粦</el-option>–>--> +<!-- <!– <el-option value="rounded">鍦嗗舰</el-option>–>--> +<!-- <!– <el-option value="jumpover">鎶樼嚎</el-option>–>--> +<!-- </el-select>--> +<!-- </el-col>--> +<!-- </el-row>--> + <el-row :gutter="5" align="middle" style="margin-top:20px;"> + <el-col :span=8 style="font-size: 16px;line-height: 32px">鏍囩</el-col> + <el-col :span=16> + <el-input v-model="globalGridAttr.label" style="width: 100%" @change="onLabelChange"/> + </el-col> + </el-row> + </el-tab-pane> + </el-tabs> + </el-card> + </div> +</template> + +<script> +import { Edge} from '@antv/x6'; +export default { + name: "index", + data(){ + return{ + left_p:document.documentElement.clientHeight*0.9, + activeName: 'first', + // globalGridAttr:{}, + curCell:Edge, + options: [{ + value: 'normal', + label: '榛樿' + }, { + value: 'smooth', + label: '骞虫粦杩炵嚎' + }] + } + }, + props:{ + id: { + type: String, + }, + globalGridAttr:{ + type: Object, + }, + graph:{ + type: String, + } + }, + watch:{ + 'id'(val,oldVal){ + const cell = this.graph.getCellById(this.id) + if(!cell || !cell.isEdge()){ + return + } + this.curCell = cell + let connector = cell.getConnector() || { + name:'榛樿' + } + this.globalGridAttr.stroke = cell.attr('line/stroke') + this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth') + this.globalGridAttr.connector = connector.name + // console.log(cell.getLabels()[0],'cell.getLabels()[0]') + // this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||'' + } + }, + methods:{ + onStrokeWidthChange(val) { + + this.globalGridAttr.strokeWidth = val + this.curCell.attr('line/strokeWidth', val) + }, + + onStrokeChange(e) { + const val = e + this.globalGridAttr.stroke = val + this.curCell.attr('line/stroke', val) + }, + + + onConnectorChange(val){ + this.globalGridAttr.connector = val + this.curCell.setConnector(val) + }, + + onLabelChange(e) { + const val = e + this.globalGridAttr.label = val + this.curCell.setLabels([ + { + attrs: { + text: { + text: val, + }, + }, + position: { + distance: 0.50, + }, + } + ]) + } + } +} +</script> + +<style > +#EdgeTabPane .el-tabs__header.is-top .el-tabs__nav-scroll{ + width: 100% !important; +} +#EdgeTabPane .el-tabs__nav.is-top{ + -webkit-transform: translateX(35px) !important +} +#EdgeTabPane .el-color-picker__trigger{ + width: 100%; +} +</style> diff --git a/web/src/views/modules/flowChart/flowChartEdit.vue b/web/src/views/modules/flowChart/flowChartEdit.vue new file mode 100644 index 0000000..82c17c2 --- /dev/null +++ b/web/src/views/modules/flowChart/flowChartEdit.vue @@ -0,0 +1,827 @@ +<template> + <div> + <el-row :gutter="[8,8]"> + <el-col :span="3"> + <div class="fa-card-a"> + <div id="stencil2" :style="'height:'+ left_p + 'px'"></div> + </div> + </el-col> + <el-col :span="21"> + <div class="fa-card-a"> + <el-form :inline="true"> + <el-form-item prop="flowId" style="margin-left:10px;width: 180px;"> + <zt-select v-model="flowId" :datas="flowList" @change="flowChange" placeholder="宸ョ▼椤圭洰" + clearable></zt-select> + </el-form-item> + <el-form-item> + <el-button type="primary" v-show="dataForm.id" @click="saveDiagram()">淇濆瓨</el-button> + </el-form-item> + </el-form> + <div id="flowChart"> + </div> + <flowChartNode v-show="type === 'node'" :flowId="flowId" :id="id" :globalGridAttr="globalGridAttr" + :graph="graph"/> + <flowChart-edge v-show="type === 'edge'" :flowId="flowId" :id="id" :globalGridAttr="globalGridAttr" + :graph="graph"/> + </div> + </el-col> + </el-row> + </div> +</template> + +<script> +import {Graph, Shape, Addon, Cell} from '@antv/x6'; +import ConfigNode from './ConfigNode/index.vue' +import flowChartNode from './flowChartNode/index.vue' +import flowChartEdge from './flowChartEdge/index.vue' + +export default { + name: "flowChart-edit", + components: { + flowChartNode, + ConfigNode, + flowChartEdge + }, + data() { + return { + shape: '', + diagramList:[], + diagramName:'', + diagramId:'', + flowList: '', + flowId: '', + diagramJson: '', + dataForm: { // 娴佺▼鍥惧唴瀹� + id: null, + diagram: null + }, + type: '', + id: '', + graph: null, + emptyJson: { + // 鑺傜偣 + nodes: [ + { + id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑 + width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊� + height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊� + label: '璇ユ祦绋嬪浘杩樻病鏈夐厤缃�', + attrs: { + body: { + strokeWidth: 0 + }, + } + // text: { + // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘', + // // fontSize: 56, + // fill: 'rgba(0,0,0,0.7)' + // }, + // }, + } + ], + }, + globalGridAttr: { + type: 'mesh', + size: 10, + color: '#e5e5e5', + thickness: 1, + colorSecond: '#d0d0d0', + thicknessSecond: 1, + factor: 4, + bgColor: '#e5e5e5', + showImage: true, + repeat: 'watermark', + angle: 30, + position: 'center', + bgSize: JSON.stringify({width: 150, height: 150}), + opacity: 0.1, + + stroke: '#5F95FF', + strokeWidth: 1, + connector: 'normal', + label: '', + + nodeStroke: '#5F95FF', + nodeStrokeWidth: 1, + nodeFill: '#ffffff', + nodeFontSize: 12, + nodeColor: '#080808', + nodeText: '', + nodeDate: '', + nodeUsers: '', + nodeDataDate: '', + nodeDataText: '' + }, + isReady: false, + curCel: Cell, + left_p: document.documentElement.clientHeight -220, + ports: { + groups: { + top: { + position: 'top', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + right: { + position: 'right', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + bottom: { + position: 'bottom', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + left: { + position: 'left', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + }, + items: [ + { + group: 'top', + }, + { + group: 'right', + }, + { + group: 'bottom', + }, + { + group: 'left', + }, + ], + } + } + }, + watch: { + }, + methods: { + async getFlowList() { + let res = await this.$http.get(`/WfDef/getFlowList`) + this.flowList = res.data + console.log(this.flowList,'this.flowList') + for (let i = 0; i < this.flowList.length; i++) { + if (this.flowList[i] && this.flowList[i].id) { + this.flowId = this.flowList[i].id + console.log(this.flowId, 'this.flowId 6789') + break + } + } + this.flowChange(this.flowId) + }, + flowChange() { + this.dataForm.id = this.flowId + // this.flowId = this.dataForm.id + console.log(this.flowId,'this.flowId') + this.getDiagram() + }, + async getDiagram() { + let res = await this.$http.get(`/WfDef/${this.flowId}`) + if (res.data !== null) { + this.dataForm = res.data + if (res.data.diagram != null && res.data.diagram != '') + this.diagramJson = JSON.parse(this.dataForm.diagram) + else + this.diagramJson = this.emptyJson + console.log(this.diagramJson, 'this.Diagram json') + this.graph.fromJSON(this.diagramJson) + this.graph.centerContent() + this.graph.zoomToFit() + // this.graph.freeze('flowChart') + } else { + this.dataForm.id = null +/* this.graph.fromJSON(this.emptyJson) + this.graph.centerContent() + this.graph.zoomToFit() + this.graph.freeze()*/ + } + }, + init1() { + // console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth') + // console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight') + this.graph = new Graph({ + container: document.getElementById('flowChart'), + width: document.documentElement.clientWidth, + height: document.documentElement.clientHeight - 240, + // async: true, + grid: { + visible: true, + }, + onToolItemCreated({ tool }) { + const handle = tool + const options = handle.options + if (options && options.index % 2 === 1) { + tool.setAttrs({ fill: 'red' }) + } + }, + autoResize: true, + history: true, + panning: { + enabled: false, + }, + scroller: { + enabled: true, + pageVisible: true, + pageBreak: true, + pannable: true, + }, + mousewheel: { + enabled: true, + zoomAtMousePosition: true, + modifiers: 'ctrl', + minScale: 0.5, + maxScale: 2, + }, + connecting: { + router: { name: 'manhattan' }, + connector: { name: 'rounded' }, + // anchor: 'center', + connectionPoint: 'anchor', + allowBlank: false, + createEdge() { + return new Shape.Edge({ + attrs: { + line: { + stroke: '#A2B1C3', + strokeWidth: 2, + targetMarker: 'classic' + } + }, + tools: { + name: 'segments', + args: { + snapRadius: 20, + attrs: { + fill: '#444', + }, + }, + }, + zIndex: 0, + }) + }, + validateConnection({targetMagnet}) { + return !!targetMagnet + }, + }, + highlighting: { + magnetAdsorbed: { + name: 'stroke', + args: { + attrs: { + fill: '#5F95FF', + stroke: '#5F95FF', + }, + }, + }, + }, + resizing: { + enabled:true, + restricted:true + }, + rotating: true, + selecting: { + enabled: true, + rubberband: true, + rubberEdge: true, + showNodeSelectionBox: true, + }, + snapline: true, + keyboard: true, + clipboard: true, + }) + // graph.fromJSON( + // {nodes:nodes, + // edges:edges} + // ) + this.graph.centerContent() + const stencil = new Addon.Stencil({ + title: '', + target: this.graph, + stencilGraphWidth: 200, + stencilGraphHeight: 480, + // collapsable: true, + groups: [ + { + title: '鍥惧厓', + name: 'group1', + } + ], + layoutOptions: { + columns: 1, + columnWidth: 120, + // rowHeight: 75, + }, + }) + document.getElementById('stencil2').appendChild(stencil.container) + + Graph.registerNode( + 'custom-polygon', + { + inherit: 'polygon', + width: 86, + height: 56, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + }, + // title:{ + // text:'', + // refX: 40, + // refY: 38, + // fontSize: 14, + // fill: '#262626', + // 'text-anchor': 'start', + // }, + text: { + // refX: 40, + // refY: 14, + fontSize: 14, + fill: '#262626', + // 'text-anchor': 'start', + }, + }, + // markup: [ + // { + // tagName: 'polygon', + // selector: 'body', + // }, + // { + // tagName: 'text', + // selector: 'title', + // }, + // { + // tagName: 'text', + // selector: 'text', + // }, + // ], + ports: { + ...this.ports + // items: [ + // { + // group: 'top', + // }, + // { + // group: 'bottom', + // }, + // ], + }, + }, + true, + ) + + Graph.registerNode( + 'custom-circle', + { + inherit: 'ellipse', + width: 86, + height: 56, + data: { + dataId: '', + finishDate: '' + }, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + }, + title: { + text: '', + fontSize: 14, + fill: '#262626', + refX: 0.5, + refY: '100%', + refY2: 4, + textAnchor: 'middle', + textVerticalAnchor: 'top', + }, + text: { + fontSize: 14, + fill: '#262626', + refX: 0.5, + refY: 0.5, + textAnchor: 'middle', + textVerticalAnchor: 'middle', + }, + }, + markup: [ + { + tagName: 'ellipse', + selector: 'body', + }, + { + tagName: 'text', + selector: 'title', + }, + { + tagName: 'text', + selector: 'text', + }, + ], + ports: {...this.ports}, + }, + true, + ) + const r6 = this.graph.createNode({ + shape: 'text-block', + label: '鍙�夎繃绋�', + width: 86, + height: 56, + data: { + stepMarker:'' + }, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + rx: 6, + ry: 6 + }, + text: { + text: '鍙�夎繃绋�', + fontSize: 14, + fill: '#262626', + refX: '0', + refY: -0.5, + refY2: '0', + textAnchor: 'middle', + textVerticalAnchor: 'middle', + }, + }, + markup: [ + { + tagName: 'rect', + selector: 'body', + }, + { + tagName: 'text', + selector: 'text', + }, + ], + ports: {...this.ports}, + }) + const r4 = this.graph.createNode({ + shape: 'custom-polygon', + data: { + stepMarker:'' + }, + attrs: { + body: { + refPoints: '0,10 10,0 20,10 10,20', + }, + }, + label: '鍐崇瓥', + }) + const r5 = this.graph.createNode({ + shape: 'custom-circle', + data: { + stepMarker:'' + }, + label: '闃舵', + }) + stencil.load([r4, r5,r6], 'group1') + + this.graph.bindKey(['meta+c', 'ctrl+c'], () => { + const cells = this.graph.getSelectedCells() + if (cells.length) { + this.graph.copy(cells) + } + return false + }) + + this.graph.bindKey(['meta+x', 'ctrl+x'], () => { + const cells = this.graph.getSelectedCells() + if (cells.length) { + this.graph.cut(cells) + } + return false + }) + + this.graph.bindKey(['meta+v', 'ctrl+v'], () => { + if (!this.graph.isClipboardEmpty()) { + const cells = this.graph.paste({offset: 32}) + this.graph.cleanSelection() + this.graph.select(cells) + } + return false + }) +//undo redo + this.graph.bindKey(['meta+z', 'ctrl+z'], () => { + if (this.graph.history.canUndo()) { + this.graph.history.undo() + } + return false + }) + + this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => { + if (this.graph.history.canRedo()) { + this.graph.history.redo() + } + return false + }) + +// select all + this.graph.bindKey(['meta+a', 'ctrl+a'], () => { + const nodes = this.graph.getNodes() + if (nodes) { + this.graph.select(nodes) + } + }) +//delete + this.graph.bindKey('delete', () => { + const cells = this.graph.getSelectedCells() + if (cells.length) { + this.graph.removeCells(cells) + } + }) +// zoom + this.graph.bindKey(['ctrl+1', 'meta+1'], () => { + const zoom = this.graph.zoom() + if (zoom < 1.5) { + this.graph.zoom(0.1) + } + }) + + this.graph.bindKey(['ctrl+2', 'meta+2'], () => { + const zoom = this.graph.zoom() + if (zoom > 0.5) { + this.graph.zoom(-0.1) + } + }) + + this.graph.on('blank:click', ({cell}) => { + this.reset() + this.type = 'grid' + // this.id = cell.id + }) + + this.graph.on('cell:click', ({cell}) => { + // this.type.value = cell.isNode() ? "node" : "edge" + this.type = cell.isNode() ? "node" : "edge" + this.shape = cell.shape + this.id = cell.id + // this.nodeOpt(this.id, this.globalGridAttr) + }) + //鍗曞嚮杈硅妭鐐� + this.graph.on('edge:click', ({edge}) => { + this.reset() + edge.attr('line/stroke', 'orange') + edge.prop('labels/0', { + attrs: { + body: { + stroke: 'orange', + }, + }, + }) + }) + // 鍗曞嚮node鑺傜偣 + this.graph.on('node:click', ({node}) => { + this.reset() + node.attr('line/stroke', 'orange') + node.prop('labels/0', { + attrs: { + body: { + stroke: 'orange', + }, + }, + }) + }) + // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌 + this.graph.on('node:delete', ({view, e}) => { + e.stopPropagation() + view.cell.remove() + }) + + this.graph.on('node:customevent', ({name, view, e}) => { + if (name === 'node:delete') { + e.stopPropagation() + view.cell.remove() + } + }) + // 鍙屽嚮缂栬緫 + this.graph.on('cell:dblclick', ({cell, e}) => { + const isNode = cell.isNode() + const name = cell.isNode() ? 'node-editor' : 'edge-editor' + cell.removeTool(name) + cell.addTools({ + name, + args: { + event: e, + attrs: { + backgroundColor: isNode ? '#EFF4FF' : '#FFF', + text: { + fontSize: 16, + fill: '#262626', + }, + }, + }, + }) + }) + + this.graph.on('node:mouseenter', ({node}) => { + const flowChart = document.getElementById('flowChart') + const ports = flowChart.querySelectorAll( + '.x6-port-body', + ) + this.showPorts(ports, true) + }) + + this.graph.on('node:mouseleave', ({node}) => { + // if (node.hasTool('button-remove')) { + // node.removeTool('button-remove') + // } + const flowChart = document.getElementById('flowChart') + const ports = flowChart.querySelectorAll( + '.x6-port-body', + ) + this.showPorts(ports, false) + }) + + this.graph.on('edge:mouseenter', ({cell}) => { + cell.addTools([ + { + name: 'source-arrowhead', + }, + { + name: 'target-arrowhead', + args: { + attrs: { + fill: 'red', + }, + }, + }, + ]) + cell.addTools( + [ + { + name: 'segments', + args: {snapRadius: 20, attrs: {fill: '#444'}} + } + ] + ) + }) + + this.graph.on('edge:mouseleave', ({cell}) => { + cell.removeTools() + }) + }, + reset() { + this.graph.drawBackground({color: '#fff'}) + const nodes = this.graph.getNodes() + const edges = this.graph.getEdges() + nodes.forEach((node) => { + node.attr('body/stroke', '#5F95FF') + }) + edges.forEach((edge) => { + edge.attr('line/stroke', '#5F95FF') + edge.prop('labels/0', { + attrs: { + body: { + stroke: '#5F95FF', + }, + }, + }) + }) + }, + showPorts(ports, show) { + for (let i = 0, len = ports.length; i < len; i = i + 1) { + ports[i].style.visibility = show ? "visible" : "hidden" + } + }, + nodeOpt(id, globalGridAttr) { + this.curCel = null + if (id) { + let cell = this.graph.getCellById(id) + // console.log(cell, 'let cell 123456') + if (!cell || !cell.isNode()) { + return + } + this.curCel = cell + globalGridAttr.nodeStroke = cell.attr('body/stroke') + globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth') + globalGridAttr.nodeFill = cell.attr('body/fill') + globalGridAttr.nodeFontSize = cell.attr('text/fontSize') + globalGridAttr.nodeFontSize = cell.attr('title/fontSize') + globalGridAttr.nodeColor = cell.attr('text/fill') + globalGridAttr.nodeColor = cell.attr('title/fill') + // globalGridAttr.nodeColor = cell.attr('label/text/fill') + // globalGridAttr.nodeColor = cell.attr('label/title/fill') + globalGridAttr.nodeUsers = cell.attr('approve/users') + globalGridAttr.nodeText = cell.attr('text/text') + globalGridAttr.nodeDate = cell.attr('title/text') + // let data={ + // dataId:this.flowId, + // finishDate: globalGridAttr.nodeDate, + // } + // cell.setData(data) + // console.log( cell.getData(),' cell.getData() 909') + } + return this.curCel; + }, + async saveDiagram() { + console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') + this.dataForm.diagram = JSON.stringify(this.graph.toJSON()) + console.log(this.dataForm, 'dataFrom') + await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/WfDef`, this.dataForm).then(async res => { + if (res.msg === 'success') { + this.$alert('淇濆瓨鎴愬姛', '鎻愮ず', { + confirmButtonText: '纭畾' + }) + } + }) + } + }, + mounted() { + this.getFlowList() + this.init1() + // this.nodeOpt(this.id, this.globalGridAttr) + // let data={ + // dataId: this.flowId, + // finishDate: this.date + // } + // this.curCel.setData(data) + // if(this.dataForm) { + // this.graph.fromJSON(this.diagramJson) + // } + this.type = 'grid' + } +} +</script> + +<style> +#flowChart { + display: flex; + border: 1px solid #dfe3e8; + width: 100% !important; +} + +.x6-graph-scroller.x6-graph-scroller-pannable { + width: 100% !important; +} + +#stencil2 { + width: 100%; + height: 100%; + position: relative; + border-right: 1px solid #dfe3e8; +} + +.x6-widget-stencil { + position: relative; + height: 100%; +} + +.x6-widget-stencil-content { + position: relative; + height: 100%; +} +.x6-graph-scroller.x6-graph-scroller-paged.x6-graph-scroller-pannable{ + box-shadow:1px 1px 3px #606266; + border-radius: 10px; +} +</style> diff --git a/web/src/views/modules/flowChart/flowChartNode/index.vue b/web/src/views/modules/flowChart/flowChartNode/index.vue new file mode 100644 index 0000000..23af11b --- /dev/null +++ b/web/src/views/modules/flowChart/flowChartNode/index.vue @@ -0,0 +1,235 @@ +<template> + <div style="position: absolute;top:6%;right:0;z-index:1000;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'"> + <el-card style="height: 100%"> + <el-tabs v-model="activeName" id="tabPane"> + <el-tab-pane label="鏂囨湰" name="first"> + <el-row :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">鏂囨湰澶у皬</el-col> + <el-col :span=16> + <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider> + </el-col> + </el-row> + <el-row :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">瀛椾綋棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker> + </el-col> + </el-row> + <el-row :gutter="5" align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 32px">鏂囨湰鍐呭</el-col> + <el-col :span=16 > +<!-- <el-input v-model="globalGridAttr.nodeText" style="width: 100%" @change="onTextChange"></el-input>--> + <el-select style="width: 100%" :value-key="key" v-model="globalGridAttr.nodeText" @change="onTextChange($event)"> + <el-option v-for="item in FlowStepList" + :key="item.stepMarker" + :label="item.stepTitle" + :value="item.stepMarker"> + </el-option> + </el-select> + </el-col> + </el-row> + </el-tab-pane> + <el-tab-pane label="鑺傜偣" name="second"> + <el-row align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">杈规棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker> + </el-col> + </el-row> + <el-row align="middle"style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 38px">杈规瀹藉害</el-col> + <el-col :span=16> + <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider> + </el-col> + </el-row> + <el-row align="middle" style="margin-top:20px"> + <el-col :span=8 style="font-size: 16px;line-height: 40px">棰滆壊</el-col> + <el-col :span=16> + <el-color-picker v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker> + </el-col> + </el-row> + </el-tab-pane> + </el-tabs> + </el-card> + </div> +</template> + +<script> +import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6'; +// const {inject} = require("vue"); +export default { + name: "index", + data(){ + return{ + data:'', + FlowStepList:[], + date:'', + text:'', + content:'', + activeName: 'first', + // globalGridAttr:{}, + curCel:Cell, + left_p:document.documentElement.clientHeight*0.9, + } + }, + props:{ + id: { + type: String, + }, + shape:{ + type: String + }, + globalGridAttr:{ + type: Object, + }, + graph:{ + type: String, + }, + flowId:{ + type: String, + } + }, + watch:{ + 'id'(val,oldVal){ + this.getFlowStepList() + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + 'flowId'(val,oldVal){ + this.FlowStepList = [] + this.getFlowStepList() + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + // this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + } + }, + mounted() { + this.getFlowStepList() + // this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + methods:{ + async getFlowStepList(){ + let res= await this.$http.get(`/WfDef/getFlowStepList?flowId=${this.flowId}`) + if(res.data){ + this.FlowStepList =res.data + } + console.log(this.FlowStepList,'this.FlowStepList') + }, + // 鏀瑰彉杈规棰滆壊 + onStrokeChange(e){ + // this.curCel = Cell + let val = e + this.globalGridAttr.nodeStroke = val + this.curCel.attr('body/stroke', val) + }, + //鏀瑰彉杈规澶у皬 + onStrokeWidthChange(e){ + let val =e + this.globalGridAttr.nodeStrokeWidth = val + this.curCel.attr('body/strokeWidth', val) + }, + //鏀瑰彉鑳屾櫙棰滆壊 + onFillChange(e){ + let val = e + this.globalGridAttr.nodeFill=val + this.curCel.attr('body/fill', val) + }, + // 鏀瑰彉瀛椾綋澶у皬 + onFontSizeChange(e){ + let val =e + this.globalGridAttr.nodeFontSize = val + this.curCel.attr('text/fontSize', val) + this.curCel.attr('title/fontSize', val) + }, + // 鏀瑰彉瀛椾綋棰滆壊 + onColorChange(e){ + let val =e + this.globalGridAttr.nodeColor = val + this.curCel.attr('text/fill', val) + this.curCel.attr('title/fill', val) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + // 鏀瑰彉鏂囨湰 + onTextChange(e){ + let selectItemObj= this.FlowStepList.find((item)=>{ + return item.stepMarker===e + }) + + this.curCel.setData({ + stepMarker:e + }) + this.curCel.attr('text/text', selectItemObj.name) + this.globalGridAttr.nodeText = e + this.curCel = this.nodeOpt(this.id, this.globalGridAttr) + +/* this.text =e + if(this.text.indexOf("锛�")!==-1){ + let arr = this.text.split("锛�") + let title = arr[1] + this.data={ + stepMarker:obj.stepMarker + } + this.curCel.setData(this.data) + this.curCel.attr('text/text',title) + this.globalGridAttr.nodeText = obj.stepMarker //this.text + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }else { + let title = this.text + this.data={ + stepMarker:obj.stepMarker + } + this.curCel.setData(this.data) + this.curCel.attr('text/text',title) + this.globalGridAttr.nodeText = obj.stepMarker //this.text + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }*/ + }, + onDateChange(e){ + this.date =e + this.globalGridAttr.nodeDate = this.date + this.curCel.attr('title/text', this.date) + this.curCel = this.nodeOpt(this.id,this.globalGridAttr) + }, + nodeOpt(id, globalGridAttr){ + this.curCel=null + if(id){ + let cell = this.graph.getCellById(id) + console.log(cell,'let cell 123456') + if (!cell || !cell.isNode()) { + return + } + this.curCel = cell + console.log(this.curCel.getData(),'this.curCel.getData()') + + globalGridAttr.nodeStroke = cell.attr('body/stroke') + globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth') + globalGridAttr.nodeFill = cell.attr('body/fill') + globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize') + //globalGridAttr.nodeFontSize = cell.attr('title/fontSize') + globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill') + // globalGridAttr.nodeColor = cell.attr('title/fill') + // globalGridAttr.nodeColor = cell.attr('label/text/fill') + // globalGridAttr.nodeColor = cell.attr('label/title/fill') + // globalGridAttr.nodeColor = cell.attr('label/style/fill') + + //globalGridAttr.nodeUsers = cell.attr('approve/users') + //globalGridAttr.nodeDate = cell.attr('title/text') + + globalGridAttr.nodeText = this.curCel.getData().stepMarker + console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText globalGridAttr.nodeText') + cell.getData() + console.log( cell.getData(),' cell.getData() 909') + } + return this.curCel; + } + } +} +</script> + +<style > +#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{ + width: 100% !important; +} + +#tabPane .el-color-picker__trigger{ + width: 100%; +} +</style> diff --git a/web/src/views/modules/flowChart/flowChartView.vue b/web/src/views/modules/flowChart/flowChartView.vue new file mode 100644 index 0000000..5a1aa6d --- /dev/null +++ b/web/src/views/modules/flowChart/flowChartView.vue @@ -0,0 +1,474 @@ +<template> + <div> + <el-form :inline="true" style="padding: 0"> + <zt-form-item style="float: left;margin-bottom: 0"> + <zt-button style="background:#EAEBEE;border: 1px solid #EAEBEE;color:#000">鏈畬鎴�</zt-button> + <zt-button style="background:#F1F0A3;border: 1px solid #F1F0A3;color:#000">杩涜涓�</zt-button> + <zt-button style="background:#5FF13A;border: 1px solid #5FF13A;color:#000">宸插畬鎴�</zt-button> + </zt-form-item> + </el-form> + <div id="flowChartView" style="border: 1px solid #EAEBEE;border-radius: 6px; + box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);overflow-x: hidden"> + </div> +<!-- <el-tooltip id="toolTip" class="box-item" effect="dark" content="1234" placement="top">--> +<!-- <div></div>--> +<!-- </el-tooltip>--> + </div> +</template> + +<script> +import {Graph, Shape, Addon, Cell,ToolsView,NodeView} from '@antv/x6'; +export default { + name: "flowChart-view", + components: { + }, + props:{ + flowChartHeight:'' + }, + data() { + return { + prop:{ + content:'', + visible:false, + }, + knob:HTMLDivElement, + flowCode:'', + diagramList:[], + diagramName:'', + diagramId:'', + flowList: '', + flowId: '', + diagramJson: '', + dataForm: { // 娴佺▼鍥惧唴瀹� + id: null, + diagram: null + }, + emptyJson: { + // 鑺傜偣 + nodes: [ + { + id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑 + width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊� + height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊� + label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘', + attrs: { + body: { + strokeWidth: 0 + }, + } + // text: { + // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘', + // // fontSize: 56, + // fill: 'rgba(0,0,0,0.7)' + // }, + // }, + } + ], + }, + type: '', + id: '', + graph: null, + globalGridAttr: { + type: 'mesh', + size: 10, + color: '#e5e5e5', + thickness: 1, + colorSecond: '#d0d0d0', + thicknessSecond: 1, + factor: 4, + bgColor: '#e5e5e5', + showImage: true, + repeat: 'watermark', + angle: 30, + position: 'center', + bgSize: JSON.stringify({width: 150, height: 150}), + opacity: 0.1, + + stroke: '#5F95FF', + strokeWidth: 1, + connector: 'normal', + label: '', + + nodeStroke: '#5F95FF', + nodeStrokeWidth: 1, + nodeFill: '#ffffff', + nodeFontSize: 12, + nodeColor: '#080808', + nodeText: '', + nodeDate: '', + nodeUsers: '', + nodeDataDate: '', + nodeDataText: '' + }, + isReady: false, + curCel: Cell, + left_p: document.documentElement.clientHeight * 0.85, + ports: { + groups: { + top: { + position: 'top', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + right: { + position: 'right', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + bottom: { + position: 'bottom', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + left: { + position: 'left', + attrs: { + circle: { + r: 8, + magnet: true, + stroke: '#5F95FF', + strokeWidth: 1, + fill: '#fff', + style: { + visibility: 'hidden', + }, + }, + }, + }, + }, + items: [ + { + group: 'top', + }, + { + group: 'right', + }, + { + group: 'bottom', + }, + { + group: 'left', + }, + ], + } + } + }, + watch: { + }, + methods: { + async init(params) { + let res = await this.$http.get(`/WfDef/getFlowStatusJson`,{params:params}) + console.log(res.data,'res.data ') + if (res.data !== null) { + this.dataForm = res.data + this.graph.unfreeze('flowChartView') + if (this.dataForm.diagram!=null){ + this.graph.fromJSON(JSON.parse(this.dataForm.diagram)) + } else{ + this.graph.fromJSON(this.emptyJson) + } + this.graph.positionContent('top',{ padding: { left: 0 }}) + // this.graph.zoomToFit() + this.graph.freeze('flowChartView') + if(flowCode!='planFlow' && flowCode!='wltFlow' && flowCode!='xbsy' && flowCode!='hxsy' && flowCode!='kybgFlow' + && flowCode!='jsfaFlow' && flowCode!='jzjysFlow' && flowCode!='zjgcFlow'){ + if(this.graph.scroller){ + for(let graph in this.graph.scroller.widgetOptions){ + this.graph.scroller.widgetOptions[graph] = false + } + } + // this.graph.disablePanning() + this.graph.lockScroller() + } + } else { + this.graph.unfreeze('flowChartView') + this.dataForm.id = null + console.log(this.data, 'this.data asdfg') + this.graph.fromJSON(this.emptyJson) + this.graph.centerContent() + // this.graph.zoomToFit() + this.graph.freeze('flowChartView') + } + }, + init2() { + this.graph = new Graph({ + container: document.getElementById('flowChartView'), + width: document.documentElement.clientWidth*0.5, + height:this.flowChartHeight? 595:document.documentElement.clientHeight-220, + // async: true, + // grid: { + // visible: true, + // }, + // autoResize: true, + // panning: { + // enabled: true, + // }, + scroller: { + enabled: true, + pannable: true, + }, + mousewheel: { + enabled: true, + zoomAtMousePosition: true, + modifiers: 'ctrl', + minScale: 0.1, + maxScale: 10, + }, + connecting: { + router: { name: 'manhattan' }, + connector: { name: 'rounded' }, + connectionPoint: 'anchor', + allowBlank: false, + snap: { + radius: 20, + } + }, + }) + this.graph.centerContent() + Graph.registerNode( + 'custom-polygon', + { + inherit: 'polygon', + width: 86, + height: 56, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + }, + text: { + fontSize: 20, + fill: '#262626', + }, + }, + ports: { + ...this.ports + }, + }, + true, + ) + + Graph.registerNode( + 'custom-circle', + { + inherit: 'ellipse', + width: 86, + height: 56, + data: { + dataId: '', + finishDate: '' + }, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + }, + title: { + text: '', + fontSize: 20, + fill: '#262626', + refX: 0.5, + refY: '100%', + refY2: 4, + textAnchor: 'middle', + textVerticalAnchor: 'top', + }, + text: { + fontSize: 20, + fill: '#262626', + refX: 0.5, + refY: 0.5, + textAnchor: 'middle', + textVerticalAnchor: 'middle', + }, + }, + + markup: [ + { + tagName: 'ellipse', + selector: 'body', + }, + { + tagName: 'text', + selector: 'title', + }, + { + tagName: 'text', + selector: 'text', + }, + ], + ports: {...this.ports}, + }, + true, + ) + const r6 = this.graph.createNode({ + shape: 'text-block', + label: '鍙�夎繃绋�', + width: 86, + height: 56, + data: { + dataId: '', + finishDate: '' + }, + attrs: { + body: { + strokeWidth: 1, + stroke: '#5F95FF', + fill: '#EFF4FF', + rx: 6, + ry: 6 + }, + text: { + text: '鍙�夎繃绋�', + fontSize: 20, + fill: '#262626', + refX: '0', + refY: -0.5, + refY2: '0', + textAnchor: 'middle', + textVerticalAnchor: 'middle', + }, + }, + markup: [ + { + tagName: 'rect', + selector: 'body', + }, + { + tagName: 'text', + selector: 'text', + }, + ], + ports: {...this.ports}, + }) + const r4 = this.graph.createNode({ + shape: 'custom-polygon', + attrs: { + body: { + refPoints: '0,10 10,0 20,10 10,20', + }, + }, + label: '鍐崇瓥', + }) + const r5 = this.graph.createNode({ + shape: 'custom-circle', + data: { + dataId: '', + finishDate: '' + }, + label: '闃舵', + }) + // 鍗曞嚮node鑺傜偣 + this.graph.on('node:click', ({node}) => { + let stepMarker = node.getData().stepMarker || '' + this.$emit('fatherMethod',stepMarker) + console.log(node.getData(),stepMarker,' node.getData()') + }) + // // 榧犳爣绉诲叆node鑺傜偣 + this.graph.on('node:mouseenter', ({node,e}) => { + const style = this.knob.style + // e.stopPropagation() + setTimeout(()=>{ + if (e) { + if (node.getData().receiveName && node.getData().receiveName!==undefined) { + const p = this.graph.clientToGraph(e.clientX, e.clientY) + style.display = 'block' + style.left = `${p.x}px` + style.top = `${p.y}px` + style.width = (node.getData().tipsWidth +30+ 'px') + style.height = (40 + 'px') + style.textAlign = 'center' + style.background = '#000' + style.color = '#fff' + style.lineHeight = (40 + 'px') + this.knob.innerText = node.getData().receiveName === undefined ? '鏆傛棤' : node.getData().receiveName + }else{ + style.display = 'none' + style.left = '-1000px' + style.top = '-1000px' + } + } else { + style.display = 'none' + style.left = '-1000px' + style.top = '-1000px' + } + },50) + }) + // // 榧犳爣绉诲嚭node鑺傜偣 + this.graph.on('node:mouseleave', ({node}) => { + const style = this.knob.style + style.display = 'none' + }) + } + }, + mounted() { + this.init2() + this.type = 'grid' + this.knob = document.createElement('div',false) + // this.knob = document.getElementById('toolTip') + this.knob.style.position = 'absolute' + document.getElementById('flowChartView').appendChild(this.knob) + } +} +</script> + +<style> +#flowChartView { + display: flex; + border: 1px solid #dfe3e8; + width: 100% !important; +} +#flowChartView .x6-cell.x6-node { + cursor: inherit; +} +.x6-graph-scroller.x6-graph-scroller-pannable { + width: 100% !important; +} + +.x6-widget-stencil { + position: relative; + height: 100%; +} + +.x6-widget-stencil-content { + position: relative; + height: 100%; +} +.clear::after{ + content: ''; + display: table; + clear: both; +} +</style> diff --git a/web/src/views/modules/flowChart/processTimeline.vue b/web/src/views/modules/flowChart/processTimeline.vue new file mode 100644 index 0000000..0ad1db2 --- /dev/null +++ b/web/src/views/modules/flowChart/processTimeline.vue @@ -0,0 +1,111 @@ +<template> + <el-row :gutter="10"> + <el-col> + <FlowChartView :flowChartHeight="flowChartHeight" ref="flowChartView"></FlowChartView> + </el-col> + <el-col> + <ProcessTrajectory ref="processTrajectory" @refreshDataList="getQuery()"></ProcessTrajectory> + </el-col> + </el-row> +</template> + +<script> + import FlowChartView from './flowChartView' + import ProcessTrajectory from './ProcessTrajectory' + + export default { + name: "processTimeline", + props:{ + flowChartHeight:'' + }, + data() { + return { + contractComponent: null, + dataForm2: { + id: '', + projectId: '', + approveStepId: '', + }, + isBlankPage:true, + word: {}, + transTitle: ['鏁伴噺'], + stepCountList: [], + constructionList: [], + isBackground1: false, + approvalNum: '', + refuseNum: '', + num: '', + repairNum: '', + approveStepId: '', + pier: '', + agreed: '', + repair: '', + approve: '', + projectId: '', + processData: false, + flowCode: '', + selectFlowCode: '', + showFlowCode: '', + stepMarker: '', + statusData: {}, + noneFrame: false, + }; + }, + components: { + FlowChartView, + ProcessTrajectory + }, + watch: {}, + created() { + }, + computed: {}, + methods: { + init(row) { + console.log(row, 'row init') + this.showFlowCode = this.selectFlowCode = this.flowCode = row.flowCode + this.showFlowCode = 'planFlow' + this.stepMarker = row.stepMarker + let params={ + flowCode:row.flowCode, + bizId:row.bizId + } + this.$nextTick(() => { + this.$refs.flowChartView.init(params) + this.$refs.processTrajectory.init(params) + }) + }, + indexFormat(index) { + return index += 1 + }, + handleInfiniteLoadingBeforeGet() { + this.page = 1; + this.dataListAll = [] + this.dataList = [] + }, + async getQuery(){ + this.handleInfiniteLoadingBeforeGet() + this.dataLoading = true + let params = { + djxlSystem: this.dataForm.djxlSystem, + } + let res = await this.$http.get(`/newPlan/taskCenter/page`,{ + params: params + }) + if (res.success) { + this.dataLoading = false + this.handleInfiniteLoadingAfterGet(res) + console.log(this.dataList, 'getQuery:this.dataList') + } else { + this.dataLoading = true + } + }, + }, + mounted() { + // this.kwReplacement() + } + } +</script> + +<style> + +</style> diff --git a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue index 0a1b4af..7e73462 100644 --- a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue +++ b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue @@ -121,7 +121,7 @@ </div> <div class="el-border-left-right acceptDate" style="width: 20%;height: 80px;"> <el-form-item style="width: 100%;padding-left:20px;margin:0;"> - {{dataForm.circulatOrder.acceptDate}} + {{ dataForm.circulatOrder.acceptDate | filterTime('YYYY骞碝M鏈圖D鏃�') }} </el-form-item> </div> <div style="width: 84px;text-align: center;font-weight: 600"> @@ -176,7 +176,8 @@ </div> <div class="el-border-left-right" style="width: 20%;height: 40px;"> <el-form-item style="width: 100%;padding-left:20px;margin:0;"> - {{dataForm.circulatOrder.detectDate}} +<!-- {{dataForm.circulatOrder.detectDate}}--> + {{ dataForm.circulatOrder.detectDate | filterTime('YYYY骞碝M鏈圖D鏃�') }} </el-form-item> </div> <div style="width: 84px;text-align: center;font-weight: 600"> @@ -228,7 +229,8 @@ </div> <div class="el-border-left-right " style="width: 20%;height: 40px;"> <el-form-item style="width: 100%;padding-left:20px;margin:0;"> - {{dataForm.circulatOrder.issueDate}} +<!-- {{dataForm.circulatOrder.issueDate}}--> + {{ dataForm.circulatOrder.issueDate | filterTime('YYYY骞碝M鏈圖D鏃�') }} </el-form-item> </div> <div style="width: 84px;text-align: center;font-weight: 600"> diff --git a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue index 414a9ab..219780a 100644 --- a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue +++ b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue @@ -1,6 +1,5 @@ <template> - <el-card shadow="never" class="aui-card--fill"> - <div class="mod-itemCirculatOrder-itemCirculatOrder}"> + <div class="fa-card-a"> <zt-table-wraper query-url="/itemCirculatOrder/ItemCirculatOrder/page" delete-url="/itemCirculatOrder/ItemCirculatOrder/deleteCirculat" v-slot="{ table }"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> <el-form-item> @@ -33,7 +32,6 @@ </ProjectSelect> </zt-table-wraper> </div> - </el-card> </template> <script> diff --git a/web/src/views/modules/project/Environ.vue b/web/src/views/modules/project/Environ.vue index 05dc14b..f301a53 100644 --- a/web/src/views/modules/project/Environ.vue +++ b/web/src/views/modules/project/Environ.vue @@ -1,6 +1,5 @@ <template> - <el-card shadow="never" class="aui-card--fill"> - <div class="mod-project-environ}"> + <div class="fa-card-a"> <zt-table-wraper query-url="/project/Environ/page" delete-url="/project/Environ/deleteEnviron" v-slot="{ table }" @dataLoaded="dataLoaded"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> <el-form-item> @@ -31,7 +30,6 @@ </ProjectSelect> </zt-table-wraper> </div> - </el-card> </template> <script> diff --git a/web/src/views/modules/project/Project.vue b/web/src/views/modules/project/Project.vue index c368ee6..4466ff4 100644 --- a/web/src/views/modules/project/Project.vue +++ b/web/src/views/modules/project/Project.vue @@ -1,6 +1,5 @@ <template> - <el-card shadow="never" class="aui-card--fill"> - <div class="mod-project-project}"> + <div class="fa-card-a"> <zt-table-wraper query-url="/project/Project/page" delete-url="/project/Project/deleteProject" v-slot="{ table }"> <el-form :inline="true" class="form-input-width-1" :model="dataForm" @keyup.enter.native="table.query()"> <el-form-item> @@ -52,7 +51,6 @@ <add-or-update @refreshDataList="table.query"/> </zt-table-wraper> </div> - </el-card> </template> <script> diff --git a/web/src/views/modules/project/SoftwareTestOrder.vue b/web/src/views/modules/project/SoftwareTestOrder.vue index 431fa8f..80b448b 100644 --- a/web/src/views/modules/project/SoftwareTestOrder.vue +++ b/web/src/views/modules/project/SoftwareTestOrder.vue @@ -1,6 +1,5 @@ <template> - <el-card shadow="never" class="aui-card--fill"> - <div class="mod-project-softwareTestOrder}"> + <div class="fa-card-a"> <zt-table-wraper query-url="/project/SoftwareTestOrder/page" delete-url="/project/SoftwareTestOrder/deleteOrder" v-slot="{ table }"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> @@ -51,7 +50,6 @@ <Preview ref="view" :pageMarkerfun="SoftwareTestOrder"></Preview> </zt-table-wraper> </div> - </el-card> </template> <script> diff --git a/web/src/views/modules/sys/task/already-task.vue b/web/src/views/modules/sys/task/already-task.vue index a5fc4a0..0691a61 100644 --- a/web/src/views/modules/sys/task/already-task.vue +++ b/web/src/views/modules/sys/task/already-task.vue @@ -6,7 +6,7 @@ <el-input type="text" v-model="dataForm.djxlSystem" v-if="false" /> </el-form> <el-table ref="table" - :height="getTransformHeight(transformHeight)" + :height="getTransformHeight()" class="pushtable table-is__left-tz" v-loading="dataLoading" :data="dataList" @@ -27,13 +27,13 @@ <el-table-column align="center" prop="stepName" label="褰撳墠鐘舵��" width="240px"/> <el-table-column align="center" prop="receiveName" label="鍔炵悊浜�" width="120px"/> <!-- <el-table-column align="center" prop="statusName" label="鎴戠殑鎰忚" />--> - <el-table-column label="鎿嶄綔" width="220px"> + <el-table-column label="鎿嶄綔" width="180px"> <template v-slot="{ row }"> <zt-table-button v-show="row.canRecall == 1 && !$store.state.user.isAdmin" @click="reCall(row)">鎾ゅ洖</zt-table-button> <zt-table-button @click="check(row,'')" v-if="row.flowCode !== 'yearPlanFlow'">鏌ョ湅</zt-table-button> <zt-table-button @click="check(row,'')" v-if="row.flowCode === 'yearPlanFlow'">淇敼</zt-table-button> <zt-table-button @click="flowChart(row)">娴佺▼鍥�</zt-table-button> - <zt-table-button v-if="row.flowCode != 'yearPlan2'" @click="getFlowTrack(row)">鍔炵悊杞ㄨ抗</zt-table-button> +<!-- <zt-table-button v-if="row.flowCode != 'yearPlan2'" @click="getFlowTrack(row)">鍔炵悊杞ㄨ抗</zt-table-button>--> </template> </el-table-column> <infinite-loading @@ -57,6 +57,7 @@ import cloneDeep from 'lodash/cloneDeep' import InfiniteLoading from 'vue-infinite-loading' import ItemCirculatOrder from '@/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate' + import Cookies from "js-cookie"; export default { data() { @@ -146,13 +147,9 @@ }); }, - getTransformHeight(transformHeight){ + getTransformHeight(){ let Height=document.documentElement.clientHeight - if(transformHeight){ return Height-(650-403) - }else{ - return Height-650 - } }, async getQuery(){ this.handleInfiniteLoadingBeforeGet() diff --git a/web/src/views/modules/sys/task/stay-task.vue b/web/src/views/modules/sys/task/stay-task.vue index b3921d5..81e4532 100644 --- a/web/src/views/modules/sys/task/stay-task.vue +++ b/web/src/views/modules/sys/task/stay-task.vue @@ -6,7 +6,7 @@ <el-input type="text" v-model="dataForm.djxlSystem" v-if="false"/> </el-form> <el-table ref="table" - :height="getTransformHeight(transformHeight)" + :height="getTransformHeight()" v-loading="dataLoading" :data="dataList" style='margin-top:10px;transition: .5s;' @@ -182,13 +182,9 @@ this.dataLoading = true } }, - getTransformHeight(transformHeight) { + getTransformHeight() { let Height = document.documentElement.clientHeight - if (transformHeight) { return Height - (650 - 403) - } else { - return Height - 650 - } }, async reCall(row) { if (await this.$tip.confirm('纭畾瑕佽繘琛屾挙鍥炲悧?')) { diff --git a/web/src/views/modules/sys/task/taskCenter.vue b/web/src/views/modules/sys/task/taskCenter.vue index d13ae74..4d3bcf4 100644 --- a/web/src/views/modules/sys/task/taskCenter.vue +++ b/web/src/views/modules/sys/task/taskCenter.vue @@ -12,12 +12,16 @@ <alreadyTask :system="system" ref="alreadyTask" @alreadyTask="getDiagram1"></alreadyTask> </el-tab-pane> </el-tabs> + <el-dialog v-dialogDrag title="椤圭洰杩涘害鍥�" top="10vh" width='85%' :visible.sync="dialogVisible"> + <processTimeline ref="processTimeline"></processTimeline> + </el-dialog> </div> </template> <script> import stayTask from './stay-task' import alreadyTask from './already-task' + import processTimeline from '../../flowChart/processTimeline' export default { data() { @@ -31,7 +35,8 @@ }, components: { stayTask, - alreadyTask + alreadyTask, + processTimeline }, mounted() { }, diff --git a/zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml b/zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml index 48f8158..f1580fc 100644 --- a/zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml +++ b/zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml @@ -116,14 +116,11 @@ </select> <select id="getStyleList" resultType="com.zt.modules.workflowconfig.model.WfDef"> - select Content as diagram - from WX_NETWORK_DIAGRAM + select diagram + from wf_def where is_delete = 0 - <if test="projectId!=null and projectId!=''"> - and PROJECT_ID = #{projectId} - </if> - <if test="diagramId!=null and diagramId!=''"> - and DIAGRAM_ID = #{diagramId} + <if test="flowCode!=null and flowCode!=''"> + and CODE = #{flowCode} </if> </select> -- Gitblit v1.9.1