Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
8c625de4 by 焦泽平
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/renchao/CadastralSystem

2 parents 53440744 7b990c04
Inline Side-by-side
Showing 7 changed files with 151 additions and 14 deletions
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
37 "vue-router": "^3.4.9", 37 "vue-router": "^3.4.9",
38 "vuex": "^3.6.0", 38 "vuex": "^3.6.0",
39 "webpack-theme-color-replacer": "^1.3.14", 39 "webpack-theme-color-replacer": "^1.3.14",
40 "x2js": "^3.4.0",
40 "xlsx": "^0.16.9" 41 "xlsx": "^0.16.9"
41 }, 42 },
42 "devDependencies": { 43 "devDependencies": {
......
...@@ -78,4 +78,17 @@ export function templateLoad(data) { ...@@ -78,4 +78,17 @@ export function templateLoad(data) {
78 method: 'get', 78 method: 'get',
79 }) 79 })
80 } 80 }
81 /**
82 * 获取工作流大纲
83 */
84 export function getProcessOutline(data) {
85 return request({
86 url: '/workflow/getProcessOutline',
87 method: 'get',
88 params: {
89 processInstanceId:data,
90 isCurrent:true
91 }
92 })
93 }
81 94
......
...@@ -38,7 +38,6 @@ ...@@ -38,7 +38,6 @@
38 }, 38 },
39 methods: { 39 methods: {
40 loadingStatus() { 40 loadingStatus() {
41 console.log("是否禁用")
42 let bsm=this.$store.state.hbsm; 41 let bsm=this.$store.state.hbsm;
43 queryStatus(bsm).then(res => { 42 queryStatus(bsm).then(res => {
44 if (res.success) { 43 if (res.success) {
......
...@@ -70,7 +70,6 @@ export default { ...@@ -70,7 +70,6 @@ export default {
70 }) 70 })
71 }, 71 },
72 loadingStatus() { 72 loadingStatus() {
73 console.log("是否禁用")
74 let bsm=this.$route.query.bsm; 73 let bsm=this.$route.query.bsm;
75 queryStatus(bsm).then(res => { 74 queryStatus(bsm).then(res => {
76 if (res.success) { 75 if (res.success) {
......
1 <template> 1 <template>
2 <div class="flowBox"> 2 <div class="flowBox">
3 <div class="node" v-for="node in flowData.Process.Nodes.ManualNode" :key="node.id">{{node.name}}</div> 3 <div class="node-wrap">
4 <div class="node"
5 v-for="node in flowData.Nodes.ManualNode"
6 :key="node.id"
7 :class="[
8 {'wjh' : node.activityState == 1},
9 {'jh' : node.activityState == 2 },
10 {'gq' : node.activityState == 3 },
11 {'wc' : node.activityState == 4 },
12 {'zz' : node.activityState == 5 }
13 ]"
14 >
15 {{node.name}}
16 </div>
17 </div>
4 </div> 18 </div>
5 </template> 19 </template>
6 20
...@@ -12,7 +26,13 @@ export default { ...@@ -12,7 +26,13 @@ export default {
12 flowData:{ 26 flowData:{
13 type:Object, 27 type:Object,
14 default:null 28 default:null
15 } 29 },
30 flowState:{
31 type:Array,
32 default: () => {
33 return [];
34 },
35 },
16 }, 36 },
17 data(){ 37 data(){
18 return { 38 return {
...@@ -22,8 +42,8 @@ export default { ...@@ -22,8 +42,8 @@ export default {
22 mounted(){ 42 mounted(){
23 this.$nextTick(()=>{ 43 this.$nextTick(()=>{
24 console.log(this.flowData,'flowData.Nodes'); 44 console.log(this.flowData,'flowData.Nodes');
45 console.log(this.flowState,'flowState');
25 }) 46 })
26
27 }, 47 },
28 methods:{}, 48 methods:{},
29 computed: {}, 49 computed: {},
...@@ -33,7 +53,8 @@ export default { ...@@ -33,7 +53,8 @@ export default {
33 <style scoped lang="less"> 53 <style scoped lang="less">
34 .flowBox{ 54 .flowBox{
35 width: 150%; 55 width: 150%;
36 height: 100%; 56 height: 100%;
57 position: relative;
37 // 网格背景 58 // 网格背景
38 background-image: -webkit-gradient( 59 background-image: -webkit-gradient(
39 linear, 60 linear,
...@@ -49,6 +70,49 @@ export default { ...@@ -49,6 +70,49 @@ export default {
49 rgba(0, 0, 0, 0) 10% 70 rgba(0, 0, 0, 0) 10%
50 ), 71 ),
51 linear-gradient(rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); 72 linear-gradient(rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
52 background-size: 10px 10px; 73 background-size: 10px 10px;
74 .node-wrap{
75 position: absolute;
76 top: 50%;
77 left: 20px;
78 .node{
79 display: inline-block;
80 min-width: 80px;
81 line-height: 30px;
82 background-color: #A9A9A9;
83 text-align: center;
84 border-radius: 6px;
85 margin-right: 50px;
86 position: relative;
87 color: #ffffff;
88 }
89 .node::after{
90 content: "";
91 position: absolute;
92 width: 50px;
93 height: 30px;
94 left: 100%;
95 background-image: url("../../../assets/images/arrow.jpg");
96 background-size: 50px 30px;
97 }
98 .node:last-child:after{
99 display: none;
100 }
101 .wjh{
102 background-color: #A9A9A9;
103 }
104 .jh{
105 background-color: #449D44;
106 }
107 .gq{
108 background-color: #F0AD4E;
109 }
110 .wc{
111 background-color: #5BC0DE;
112 }
113 .zz{
114 background-color: #F13F2F;
115 }
116 }
53 } 117 }
54 </style> 118 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,13 +3,20 @@ ...@@ -3,13 +3,20 @@
3 <div 3 <div
4 class="flowContent" 4 class="flowContent"
5 > 5 >
6 <flowNode :flowData="flowData"></flowNode> 6 <flowNode :flowData="flowData" :flowState="flowState" v-if="flowShow"></flowNode>
7 <ul class="legend">
8 <li><span class="circle wjh"></span><span class="name">未激活</span></li>
9 <li><span class="circle jh"></span><span class="name">激活</span></li>
10 <li><span class="circle gq"></span><span class="name">挂起</span></li>
11 <li><span class="circle wc"></span><span class="name">完成</span></li>
12 <li><span class="circle zz"></span><span class="name">终止</span></li>
13 </ul>
7 </div> 14 </div>
8 </div> 15 </div>
9 </template> 16 </template>
10 17
11 <script> 18 <script>
12 import { getActivityDetail,templateLoad } from "@api/user"; 19 import { getActivityDetail,templateLoad,getProcessOutline } from "@api/user";
13 import flowNode from "./flownode" 20 import flowNode from "./flownode"
14 export default { 21 export default {
15 name: "", 22 name: "",
...@@ -19,6 +26,7 @@ export default { ...@@ -19,6 +26,7 @@ export default {
19 return { 26 return {
20 flowData:{}, 27 flowData:{},
21 flowShow:false, 28 flowShow:false,
29 flowState:[]
22 } 30 }
23 }, 31 },
24 created() {}, 32 created() {},
...@@ -31,15 +39,34 @@ export default { ...@@ -31,15 +39,34 @@ export default {
31 "params": {}, 39 "params": {},
32 "workflowPeriod": "current", 40 "workflowPeriod": "current",
33 "workitemInstanceId": this.$route.query.workitemInstanceId 41 "workitemInstanceId": this.$route.query.workitemInstanceId
34 } 42 }
43 vm.loadingShow('数据获取中');
35 getActivityDetail(params).then((res) => { 44 getActivityDetail(params).then((res) => {
36 console.log(res.processInstance.templetId); 45 console.log(res.processInstance.templetId);
37 templateLoad(res.processInstance.templetId).then((res) => { 46 templateLoad(res.processInstance.templetId).then((res1) => {
38 console.log(this.$x2js.xml2js(res)); 47 console.log(this.$x2js.xml2js(res1).Process,'Process');
39 this.flowData = this.$x2js.xml2js(res); 48 getProcessOutline(res.processInstance.id).then((res2) => {
49 vm.loadingHide();
50 this.flowData = this.$x2js.xml2js(res1).Process;
51 console.log(res2.activityOutlines,'res.activityOutlines');
52 this.flowState = res2.activityOutlines;
53 this.$nextTick(()=>{
54 this.flowData.Nodes.ManualNode.push(this.flowData.Nodes.EndNode);
55 this.flowData.Nodes.ManualNode.unshift(this.flowData.Nodes.StartNode);
56 // this.flowData.Nodes.StartNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.StartNode.id)[0].activityType;
57 // this.flowData.Nodes.EndNode.activityType = this.flowState.filter( i => i.activityTemplateId == this.flowData.Nodes.EndNode.id)[0].activityType;
58 this.flowData.Nodes.ManualNode.forEach(item => {
59 item.activityState = this.flowState.filter( i => i.activityTemplateId == item.id)[0].activityState;
60 });
61 this.flowShow = true;
62 })
63 })
64 .catch((error) => {
65 vm.loadingHide();
66 });
40 }) 67 })
41 .catch((error) => {}); 68 .catch((error) => {});
42 }) 69 })
43 .catch((error) => {}); 70 .catch((error) => {});
44 }, 71 },
45 }, 72 },
...@@ -49,11 +76,45 @@ export default { ...@@ -49,11 +76,45 @@ export default {
49 </script> 76 </script>
50 <style scoped lang="less"> 77 <style scoped lang="less">
51 .main { 78 .main {
79 position: relative;
52 .flowContent { 80 .flowContent {
53 width: calc(100% + 6px); 81 width: calc(100% + 6px);
54 height: 100%; 82 height: 100%;
55 position: relative; 83 position: relative;
56 overflow-x: scroll; 84 overflow-x: scroll;
57 } 85 }
86 .legend{
87 position: absolute;
88 top: 20px;
89 right: 20px;
90 li{
91 margin-bottom: 10px;
92 .circle{
93 display: inline-block;
94 width: 12px;
95 height: 12px;
96 border-radius: 6px;
97 }
98 .name{
99 margin-left: 10px;
100 font-weight: bold;
101 }
102 .wjh{
103 background-color: #A9A9A9;
104 }
105 .jh{
106 background-color: #449D44;
107 }
108 .gq{
109 background-color: #F0AD4E;
110 }
111 .wc{
112 background-color: #5BC0DE;
113 }
114 .zz{
115 background-color: #F13F2F;
116 }
117 }
118 }
58 } 119 }
59 </style> 120 </style>
......