流程跟踪页面

@@ -17,15 +17,20 @@ import './assets/iconfont/iconfont.css'
 import ElTreeSelect from 'el-select-tree'
 import ElTreeSelect from 'el-select-tree'
 //树型选择器
 //树型选择器
 Vue.use(ElTreeSelect);
 Vue.use(ElTreeSelect);
-//引入富文本编辑器
-import  VueQuillEditor from 'vue-quill-editor'  
-// 导入富文本编辑器的样式
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-// 将富文本编译器 注册为全局组件
-Vue.use(VueQuillEditor)
+// //引入富文本编辑器
+// import  VueQuillEditor from 'vue-quill-editor'  
+// // 导入富文本编辑器的样式
+// import 'quill/dist/quill.core.css'
+// import 'quill/dist/quill.snow.css'
+// import 'quill/dist/quill.bubble.css'
+// // 将富文本编译器 注册为全局组件
+// Vue.use(VueQuillEditor)
 import "./libs/fliter"; //引入全局过滤器
 import "./libs/fliter"; //引入全局过滤器
+//引入xml转json
+import x2js from 'x2js'
+Vue.prototype.$x2js = new x2js({
+  attributePrefix:'' //转换完的数据格式 （默认的是带 _ 的）
+})
 // 让IE11支持Vue-router跳转功能
 // 让IE11支持Vue-router跳转功能
 if (
 if (
   '-ms-scroll-limit' in document.documentElement.style && 
   '-ms-scroll-limit' in document.documentElement.style && 

+<template>
+  <div class="flowBox">
+    <div class="node" v-for="node in flowData.Process.Nodes.ManualNode" :key="node.id">{{node.name}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"",
+  components:{},
+  props:{
+    flowData:{
+      type:Object,
+      default:null
+    }
+  },
+  data(){
+    return {
+    }
+  },
+  created(){},
+  mounted(){
+    this.$nextTick(()=>{
+      console.log(this.flowData,'flowData.Nodes'); 
+    })
+    
+  },
+  methods:{},
+  computed: {},
+  watch: {},
+}
+</script>
+<style scoped  lang="less">
+.flowBox{
+		width: 150%;
+		height: 100%;
+  	//    网格背景
+		background-image: -webkit-gradient(
+				linear,
+				left top,
+				right top,
+				color-stop(10%, rgba(0, 0, 0, 0.15)),
+				color-stop(10%, rgba(0, 0, 0, 0))
+			),
+			-webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(0, 0, 0, 0.15)), color-stop(10%, rgba(0, 0, 0, 0)));
+		background-image: linear-gradient(
+				90deg,
+				rgba(0, 0, 0, 0.15) 10%,
+				rgba(0, 0, 0, 0) 10%
+			),
+			linear-gradient(rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
+		background-size: 10px 10px;
+}
+</style>
\ No newline at end of file

+<template>
+	<div class="main">
+		<div
+			class="flowContent"
+		>
+			<flowNode :flowData="flowData"></flowNode>
+		</div>
+	</div>
+</template>
+
+<script>
+import { getActivityDetail,templateLoad } from "@api/user";
+import flowNode from "./flownode"
+export default {
+	name: "",
+	components: {flowNode},
+	props: {},
+	data() {
+        return {
+			flowData:{},
+			flowShow:false,
+        }
+	},
+	created() {},
+	mounted() {
+        this.getTemplate();
+    },
+	methods: {
+        getTemplate(){
+            let params = {
+                "params": {},
+                "workflowPeriod": "current",
+                "workitemInstanceId": this.$route.query.workitemInstanceId
+            }
+            getActivityDetail(params).then((res) => {
+                console.log(res.processInstance.templetId);
+                templateLoad(res.processInstance.templetId).then((res) => {
+					console.log(this.$x2js.xml2js(res));
+					this.flowData = this.$x2js.xml2js(res);
+                })
+                .catch((error) => {});
+            })
+            .catch((error) => {});
+        },
+	},
+	computed: {},
+	watch: {},
+};
+</script>
+<style scoped lang="less">
+.main {
+	.flowContent {
+		width: calc(100% + 6px);
+		height: 100%;
+		position: relative;
+    	overflow-x: scroll;
+	}
+}
+</style>