From 3e800b5efbd282370d02cdc0773811fa77359b67 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 29 十一月 2023 16:12:13 +0800
Subject: [PATCH] 流程图
---
web/src/views/modules/flowChart/flowChartEdit.vue | 827 ++++++++++++++++++++
web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue | 8
web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue | 4
web/src/views/modules/sys/task/already-task.vue | 13
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 +
web/src/views/modules/sys/task/stay-task.vue | 8
web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue | 8
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 ++++++
web/src/views/modules/flowChart/flowChartNode/index.vue | 235 +++++
17 files changed, 2,386 insertions(+), 35 deletions(-)
diff --git a/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue b/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue
index 30e0824..caae99e 100644
--- a/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue
+++ b/web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue
@@ -1,6 +1,5 @@
<template>
- <el-card shadow="never" class="aui-card--fill">
- <div class="mod-configItemWarehouse-configItemWarehouse}">
+ <div class="fa-card-a">
<zt-table-wraper query-url="/configItemWarehouse/ConfigItemWarehouse/page" delete-url="/configItemWarehouse/ConfigItemWarehouse" v-slot="{ table }">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
<el-form-item>
@@ -22,7 +21,7 @@
</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="椤圭洰鍚嶇О"/>
@@ -36,8 +35,7 @@
@setProjectInfo="openAddWin">
</ProjectSelect>
</zt-table-wraper>
- </div>
- </el-card>
+ </div>
</template>
<script>
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..410f6bf
--- /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.processTrajectory.init(params)
+ this.$refs.flowChartView.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() {
},
--
Gitblit v1.9.1