diff --git a/src/api/process/index.ts b/src/api/process/index.ts
index 724bcfa..f3f67c3 100644
--- a/src/api/process/index.ts
+++ b/src/api/process/index.ts
@@ -51,3 +51,18 @@ export function getHisProcessNodeInfo(config : Object) { // 获取历史节点
 	})
 }
 
+export function getNodePositionInfo(config : Object) {
+	return http({
+		url: '/act/task/getNodePositionInfo',
+		method: 'GET',
+		data: config
+	})
+}
+
+export function getHisInfo(config : Object) {
+	return http({
+		url: '/act/task/processHistoryList',
+		method: 'GET',
+		data: config
+	})
+}
diff --git a/src/pages-process/taskHandle.vue b/src/pages-process/taskHandle.vue
index 6d8051c..db05e3b 100644
--- a/src/pages-process/taskHandle.vue
+++ b/src/pages-process/taskHandle.vue
@@ -9,14 +9,38 @@
 </route>
 <template>
 	<PageLayout nav-title="流程办理">
-		<wd-tabs v-model="tab" swipeable color="#39b54a" autoLineWidth>
+		<wd-tabs v-model="tab" color="#39b54a" autoLineWidth>
 		    <wd-tab  title="单据">
 		    </wd-tab>
 			<wd-tab title="任务处理">
 			  <view class="content">内容2</view>
 			</wd-tab>
 			<wd-tab title="流程图">
-				<img :src="imgPath" style="border:2px;cursor:hand;" alt="流程图" usemap="#planetmap">
+				<view class="container">
+					<view style="margin-bottom: 20px;height: 400px;overflow: hidden;overflow-y: auto;overflow-x: auto;background-color: #fff;">
+						<img :src="imgPath" style="border:2px;cursor:hand;" alt="流程图" usemap="#planetmap">
+			<!-- 			<map name="planetmap">
+						  <template v-for="(item, key, index) in nodePositionInfo.positionList">
+						   <area shape="rect" :coords="item.coords" title="Venus" @touchstart="showNodeInfo(nodePositionInfo.hisTasks,item.id)">
+						  </template>
+						</map> -->
+					</view>
+					<wd-card title="流程历史追踪" type="rectangle">
+						<wd-steps :active="completedNum" vertical>
+						  <wd-step  v-for="item in dataSource" >
+						   <template #title>
+							   <view class="content shadow-blur text-sm bg-green">
+								   <text>流程节点：{{item.name=='start'?'开始':item.name}}<br></text>
+								   <text>负责人：{{item.assigneeName}}<br></text>
+								   <text>开始时间：{{item.startTime}}<br></text>
+								   <text>结束时间：{{item.endTime}}<br></text>
+								   <text>{{item.deleteReason}}</text>
+							   </view>
+							</template>
+						  </wd-step>
+						</wd-steps>
+					</wd-card>
+				</view>
 			</wd-tab>
 		</wd-tabs>
 	</PageLayout>
@@ -24,7 +48,8 @@
 
 <script setup lang="ts">
 	import {
-		ref
+		ref,
+		computed
 	} from 'vue'
 	import {
 		onLoad,
@@ -38,23 +63,34 @@
 	} from '@/store'
 	import {
 		getProcessNodeInfo,
-		getHisProcessNodeInfo
+		getHisProcessNodeInfo,
+		getNodePositionInfo,
+		getHisInfo
 	} from '@/api/process'
 	import {
 		getEnvBaseUrl
 	} from '@/utils/index'
 	import { json } from 'stream/consumers';
+	import qs from 'qs';
 	
 	const formData = ref({})
+	const nodePositionInfo = ref({})
+	const dataSource = ref([])
 	const path = ref('') //url路径
 	const appStore = useAppStore();
 	const tab = ref(0)
+	const completedNum = ref(0);
 	
 
 	const handleClickLeft = () => {
 		uni.navigateBack()
 	}
 	
+	const showNodeInfo= (data,taskId)=>{
+		console.log(data)
+	  // this.$refs.nodeInfoModel.close();
+	  // this.$refs.nodeInfoModel.showInfo(data,taskId);
+	}
 
 	onLoad((options) => {
 		let useData = JSON.parse(options.data);
@@ -78,21 +114,91 @@
 				path.value = tempFormUrl; //url路径
 			}
 		})
+		console.log(useData)
+		getNodePositionInfo({processInstanceId:useData.processInstanceId}).then((res)=>{
+			console.log(res)
+			if (res.success) {
+			  nodePositionInfo.value = res.result
+			  console.log(res)
+			}
+		})
+		
+		getHisInfo({processInstanceId:useData.processInstanceId}).then((res)=>{
+			console.log(res)
+			if (res.success) {
+			  console.log(res)
+			  dataSource.value = res.result.records
+			  completedNum.value = res.result.records.length-1
+			}
+		})
 	})
 	
-	const imgPath =   () => {
-	  var params = JSON.stringify({
-	    'processInstanceId': formData.procInsId
-	  })
-	  let url = `${getEnvBaseUrl()}/act/task/traceImage?${params}`;
-	  console.log(url)
-	  return url;
-	}
-
+	const imgPath =  computed(()=>{
+		var params = qs.stringify({
+		  'processInstanceId': formData.value.procInsId
+		})
+		let url = `${getEnvBaseUrl()}/act/task/traceImage?${params}`;
+		console.log(url)
+		return url;
+	})
 </script>
 
 <style lang="scss" scoped>
 	::v-deep .wd-tabs__line{
 		background: #39b54a;
 	}
+	::v-deep  .wd-step.is-finished .wd-step__icon-outer{
+		border-color: #39b54a;
+		color: #fff;
+		background-color: #39b54a;
+	}
+	
+	::v-deep .wd-step.is-process .wd-step__icon-outer{
+		border-color: #f0f0f0;
+		color: #fff;
+		background-color: #f0f0f0;
+	}
+	
+	
+	.container {
+		padding: 5px 0 5px;
+		min-height: 100vh;
+		background-color: #f7f7f7;
+	}
+	
+	.bg-green {
+	    background-color: #39b54a;
+	    color: #fff;
+	}
+	
+	.content{
+		padding: 5px 25px 5px 15px;
+	}
+	.shadow-blur{
+		position: relative;
+	}
+	
+	.shadow-blur::before {
+	    content: "";
+	    display: block;
+	    background: inherit;
+	    -webkit-filter: blur(5px);
+	    filter: blur(5px);
+	    position: absolute;
+	    width: 100%;
+	    height: 100%;
+	    top: 5px;
+	    left: 5px;
+	    z-index: -1;
+	    opacity: .4;
+	    -webkit-transform-origin: 0 0;
+	    transform-origin: 0 0;
+	    border-radius: inherit;
+	    -webkit-transform: scale(1);
+	    transform: scale(1);
+	}
+	.text-sm{
+		font-size: 12px;
+	}
+	
 </style>
\ No newline at end of file