diff --git a/src/styles/index.scss b/src/styles/index.scss
index 07d3236..1bf94c5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -92,3 +92,7 @@
 .search-div .el-form-item {
   margin-bottom:10px !important;
 }
+
+.clear-float{
+  clear:both
+}

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 07d3236..1bf94c5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -92,3 +92,7 @@
 .search-div .el-form-item {
   margin-bottom:10px !important;
 }
+
+.clear-float{
+  clear:both
+}
diff --git a/src/views/jobManage/detailJob.vue b/src/views/jobManage/detailJob.vue
index 400a00f..a997802 100644
--- a/src/views/jobManage/detailJob.vue
+++ b/src/views/jobManage/detailJob.vue
@@ -59,17 +59,13 @@
       <el-row v-if="firstImageList.length>0" :gutter="20">
         <el-col :span="20">
           <el-form-item label="现场图片">
-            <el-upload
-              ref="upload"
-              :file-list="firstImageList"
-              :class="{hide:hideUpload}"
-              :on-preview="handlePictureCardPreview"
-              accept=".jpg,.jpeg,.png "
-              action="http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/uploadImgs"
-              list-type="picture-card"
-              disabled>
-              <i class="el-icon-plus"/>
-            </el-upload>
+            <el-image
+              v-for="firstImage in firstImageList"
+              :key="firstImage"
+              :src="firstImage"
+              :preview-src-list="firstImageList"
+              fit="fill"
+              style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>
             <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
               <div class="imgBox">
                 <img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
@@ -85,20 +81,15 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row v-if="handleImageList.length>0" :gutter="20">
+      <el-row v-if="handleImageList.length>0">
         <el-col :span="24">
           <el-form-item label="维护图片">
-            <el-upload
-              ref="upload"
-              :file-list="handleImageList"
-              :class="{hide:hideUpload}"
-              :on-preview="handlePictureCardPreview"
-              accept=".jpg,.jpeg,.png "
-              action="http://rest.apizza.net/mock/cfbb939c147bb6d68372de83af189fee/uploadImgs"
-              list-type="picture-card"
-              disabled>
-              <i class="el-icon-plus"/>
-            </el-upload>
+            <el-image
+              v-for="handleImage in handleImageList"
+              :key="handleImage"
+              :src="handleImage"
+              fit="fill"
+              style="width:150px;height: 150px;border-radius: 5px; margin-right:10px;"/>
             <el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
               <div class="imgBox">
                 <img :src="dialogImageUrl" alt="" style="margin:0 auto; max-height: 400px; max-width: 700px">
@@ -109,22 +100,23 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="14">
-          <el-form-item label="工单动态">
-            <el-steps :active="activeStep">
-              <el-step
-                v-for="(activity, index) in activities"
-                :key="index"
-                :title="activity.content"
-                :description="activity.timestamp"/>
-            </el-steps>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="14">
-          <el-form-item v-if="jobForm.flow" label="转单记录">
-            {{ jobForm.flow }}
-          </el-form-item>
+          <div>
+            <div class="table-label">
+              工单动态
+            </div>
+            <div class="table-content">
+              <el-timeline>
+                <el-timeline-item
+                  v-for="(activity, index) in activities"
+                  :key="index"
+                  :timestamp="activity.time"
+                  color="#0bbd87">
+                  {{ activity.name }}
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+            <div class="clear-float"/>
+          </div>
         </el-col>
       </el-row>
     </el-form>
@@ -133,6 +125,8 @@
 
 <script>
 import { getJobInfo } from '@/api/job'
+import { compareCalendar } from '@/utils/string'
+
 export default {
   name: 'DetailJob',
   data() {
@@ -185,13 +179,21 @@
       loading: true
     }
   },
-  // mounted() {
-  //   const jobId = this.$route.params.id
-  //   this.getJobInfo(jobId)
-  // },
+  created() {
+    const jobId = this.$route.query.jobId
+    if (jobId) {
+      this.getJobInfo(jobId)
+    } else {
+      this.$message.error('参数加载错误')
+    }
+  },
   activated() {
-    const jobId = this.$route.params.id
-    this.getJobInfo(jobId)
+    const jobId = this.$route.query.jobId
+    if (jobId) {
+      this.getJobInfo(jobId)
+    } else {
+      this.$message.error('参数加载错误')
+    }
   },
   methods: {
     // 初始化对话框
@@ -216,7 +218,8 @@
             const urls = job.firstStatePhotos.split(';')
             for (const url of urls) {
               if (url) {
-                this.firstImageList.push({ name: url, url: base_url + url })
+                // this.firstImageList.push({ name: url, url: base_url + url })
+                this.firstImageList.push(base_url + url)
               }
             }
           } else {
@@ -228,7 +231,8 @@
             const urls = job.handlePhotos.split(';')
             for (const url of urls) {
               if (url) {
-                this.handleImageList.push({ name: url, url: base_url + url })
+                // this.handleImageList.push({ name: url, url: base_url + url })
+                this.handleImageList.push(base_url + url)
               }
             }
           } else {
@@ -236,94 +240,50 @@
           }
           // 处理工单动态
           // 若有getJobTime有值，表示有人接单
-          this.activities = []
-          if (job.getJobTime) {
-            const activity = {
-              content: job.getJobPerson + '已接单',
-              timestamp: job.getJobTime
-            }
-            this.activities.push(activity)
-            this.activeStep += 1
-          } else { // 否则添加空的状态
-            const activity = {
-              content: '待处理',
-              timestamp: ''
-            }
-            this.activities.push(activity)
+          const activities = []
+          const jobForm = job
+          if (jobForm.createTime && jobForm.createTime !== '0000-00-00 00:00:00') {
+            activities.push({ time: jobForm.createTime, name: '创建工单', num: 1 })
           }
-          // 若有人确认，状态改为已确认
-          if (job.confirmJobTime) {
-            const activity = {
-              content: job.confirmJobPerson + '已确认',
-              timestamp: job.confirmJobTime
-            }
-            this.activities.push(activity)
-            this.activeStep += 1
-          } else if (job.alarmType === '1') { // 若无人确认且为数据异常插入空的待确认
-            if (job.jobStatus !== '4' && job.jobStatus !== '3') { // 状态不为已取消的话，显示待确认
-              const activity = {
-                content: '待确认',
-                timestamp: ''
-              }
-              this.activities.push(activity)
+          if (jobForm.getJobTime && jobForm.getJobTime !== '0000-00-00 00:00:00') {
+            let getName = jobForm.getJobPerson ? jobForm.getJobPerson : '系统'
+            getName = getName + '接单'
+            activities.push({ time: jobForm.getJobTime, name: getName, num: 2 })
+          }
+          if (jobForm.confirmJobTime && jobForm.confirmJobTime !== '0000-00-00 00:00:00') {
+            let confirmName = jobForm.confirmJobPerson ? jobForm.confirmJobPerson : '系统'
+            confirmName = confirmName + '确认工单'
+            activities.push({ time: jobForm.confirmJobTime, name: confirmName, num: 3 })
+          }
+          if (jobForm.handleJobTime && jobForm.handleJobTime !== '0000-00-00 00:00:00') {
+            if (jobForm.jobStatus === '4') {
+              let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
+              handleName = handleName + '取消工单'
+              activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
+            } else {
+              let handleName = jobForm.handleJobPerson ? jobForm.handleJobPerson : '系统'
+              handleName = handleName + '完成工单'
+              activities.push({ time: jobForm.handleJobTime, name: handleName, num: 4 })
             }
           }
-          if (job.handleJobTime) {
-            // 若有处理时间，状态置为已完成或已取消
-            // 若没有处理人则处理人为系统
-            let handleJobPerson = job.handleJobPerson
-            if (!handleJobPerson) {
-              handleJobPerson = '系统'
+          if (jobForm.flow && jobForm.flow.length > 0) {
+            for (const item of jobForm.flow) {
+              const transName = item.from + '转单给' + item.to
+              activities.push({ time: item.time, name: transName, num: 4 })
             }
-            if (job.jobStatus === '3') { // 正常完成
-              const activity1 = {
-                content: handleJobPerson + '处理中',
-                timestamp: job.handleJobTime
-              }
-              const activity2 = {
-                content: handleJobPerson + '已完成',
-                timestamp: job.handleJobTime
-              }
-              this.activities.push(activity1)
-              this.activities.push(activity2)
-              this.activeStep += 1
-            } else if (job.jobStatus === '4') { // 已取消
-              const activity1 = {
-                content: handleJobPerson + '已取消',
-                timestamp: job.handleJobTime
-              }
-              this.activities.push(activity1)
-              this.activeStep += 1
-            }
-          } else if (this.jobForm.jobStatusName === '完成') {
-            // 特殊情况处理:已确认之后结束的工单,将完成人和时间用确认人代替
-            const activity = {
-              content: job.confirmJobPerson + '已完成',
-              timestamp: job.confirmJobTime
-            }
-            this.activities.push(activity)
-          } else {
-            const activity1 = {
-              content: '处理中',
-              timestamp: ''
-            }
-            const activity2 = {
-              content: '已完成',
-              timestamp: ''
-            }
-            this.activities.push(activity1)
-            this.activities.push(activity2)
           }
-          if (Array.isArray(job.flow) && job.flow.length > 0) {
-            for (const step of job.flow) {
-              const from = step.from
-              const to = step.to
-              const timestamp = step.time
-              this.jobForm.flow = timestamp + ' 由 ' + from + ' 转给 ' + to
-            }
-          } else {
-            this.jobForm.flow = ''
+          if (activities.length > 1) {
+            activities.sort((b, a) => {
+              const cmp = compareCalendar(a.time, b.time)
+              if (cmp === 0) {
+                if (a.num > b.num) return -1
+                else return 1
+              } else {
+                return compareCalendar(a.time, b.time)
+              }
+            })
           }
+          this.activities = activities
         }
       })
     },
@@ -367,5 +327,21 @@
     .el-step.is-horizontal .el-step__line{
       top:17px;
     }
+    .table-label{
+      width: 120px;
+      float: left;
+      text-align: right;
+      font-size: 14px;
+      font-weight: 700;
+      color: #606266;
+      line-height: 40px;
+      padding: 0 12px 0 0;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+    .table-content{
+      float:left;
+      padding-top: 15px;
+    }
   }
 </style>