diff --git a/supervise-portal-ui/src/api/flow/read.js b/supervise-portal-ui/src/api/flow/read.js
new file mode 100644
index 00000000..7348ed25
--- /dev/null
+++ b/supervise-portal-ui/src/api/flow/read.js
@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+// 查看待阅和已阅列表
+export function pagerList(data) {
+  return request({
+    url: '/message/v1/messagelist/todoAllReadList',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+// 待阅列表--修改为已阅
+export function changeRead(data) {
+  return request({
+    url: '/message/v1/messagelist/changeRead?sids=' + data,
+    method: 'get'
+  })
+}
+
+// 待办已办待阅已阅获取人员
+export function sysstaffinfo() {
+  return request({
+    url: '/portal/v1/sysstaffinfo/v1/sysstaffinfo/selectStaffLists',
+    method: 'get'
+  })
+}
diff --git a/supervise-portal-ui/src/api/system/home/home.js b/supervise-portal-ui/src/api/system/home/home.js
index 93906f92..76f77908 100644
--- a/supervise-portal-ui/src/api/system/home/home.js
+++ b/supervise-portal-ui/src/api/system/home/home.js
@@ -8,6 +8,14 @@ export function getTodoNum(data) {
   })
 }
 
+// 获取当前用户的待阅数量
+export function getToBeReadNum(data) {
+  return request({
+    url: '/message/v1/Message/getTodoNum/' + data,
+    method: 'get'
+  })
+}
+
 // 获取当前用户的最新消--首页面右上角展示
 export function messageNotice(data) {
   return request({
diff --git a/supervise-portal-ui/src/router/index.js b/supervise-portal-ui/src/router/index.js
index 0536a492..cf5bcab7 100644
--- a/supervise-portal-ui/src/router/index.js
+++ b/supervise-portal-ui/src/router/index.js
@@ -35,7 +35,7 @@ export const constantRoutes = [
   {
     path: '/index',
     redirect: 'organizationManage'
-    
+
     // component: Layout,
     // redirect: '/index',
     // children: [{
@@ -293,6 +293,14 @@ export const constantRoutes = [
     path: '/done',
     component: () => import('@/views/flow/doneList.vue')
   },
+  {
+    path: '/toberead',
+    component: () => import('@/views/flow/tobereadList.vue')
+  },
+  {
+    path: '/haveread',
+    component: () => import('@/views/flow/havereadList.vue')
+  },
 
 //	{
 //		path: '/',
diff --git a/supervise-portal-ui/src/views/Home/Home.vue b/supervise-portal-ui/src/views/Home/Home.vue
index be780d13..4413de77 100644
--- a/supervise-portal-ui/src/views/Home/Home.vue
+++ b/supervise-portal-ui/src/views/Home/Home.vue
@@ -32,12 +32,15 @@
             <img src="@/assets/home/ltIcon2.png">
             <p>已办工作</p>
           </li>
-          <li>
-            <img src="@/assets/home/ltIcon3.png">
+          <li @click="tobereadwork">
+            <div style="position: relative">
+              <el-badge v-if="shuliang.toBeReadCount !== 0" :value="shuliang.toBeReadCount" size="mini" class="mark"/>
+              <img src="@/assets/home/ltIcon4.png">
+            </div>
             <p>待阅工作</p>
           </li>
-          <li>
-            <img src="@/assets/home/ltIcon4.png">
+          <li @click="havereadwork">
+            <img src="@/assets/home/ltIcon3.png">
             <p>已阅工作</p>
           </li>
         </ul>
@@ -222,7 +225,8 @@
   import User from '@/api/User/login.js'
   import {
     getTodoNum,
-    messageNotice
+    messageNotice,
+    getToBeReadNum
   } from '@/api/system/home/home'
 
   export default {
@@ -288,7 +292,8 @@
         userInfo: {},
         orgDept_list: [],
         shuliang: {
-          workCount: ''
+          workCount: '',
+          toBeReadCount: ''
         },
         message_list: [],
         token: '',
@@ -354,6 +359,11 @@
             this.shuliang.workCount = resp.data
           }
         })
+        getToBeReadNum(window.sessionStorage.getItem('userSid')).then((resp) => {
+          if (resp.success) {
+            this.shuliang.toBeReadCount = resp.data
+          }
+        })
         messageNotice(window.sessionStorage.getItem('userSid')).then((resp) => {
           if (resp.success && resp.data !== null) {
             this.message_list = resp.data
@@ -419,6 +429,12 @@
         // this.$router.push({ path: '/done' + '?token=' + getStorage() })
         //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
       },
+      tobereadwork() {
+        window.open('/#/toberead' + '?token=' + getStorage(), '_blank')
+      },
+      havereadwork() {
+        window.open('/#/haveread' + '?token=' + getStorage(), '_blank')
+      },
       logout() {
         this.$confirm('确定要退出吗, 是否继续?', '提示', {
           confirmButtonText: '确定',
diff --git a/supervise-portal-ui/src/views/flow/havereadList.vue b/supervise-portal-ui/src/views/flow/havereadList.vue
new file mode 100644
index 00000000..497b7fa2
--- /dev/null
+++ b/supervise-portal-ui/src/views/flow/havereadList.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div style="text-align: right">
+        <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
+      </div>
+    </div>
+    <div class="searchcon">
+      <div class="search">
+        <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
+          <el-form-item label="工作名称">
+            <el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="发起人">
+            <el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
+              <el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发送日期">
+            <el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+            <span style="padding: 0 8px">至</span>
+            <el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+          </el-form-item>
+          <el-button type="primary" @click="handleFilter">查询</el-button>
+        </el-form>
+      </div>
+    </div>
+    <div class="listtop">
+      <div class="tit">已阅列表</div>
+      <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <div class="">
+      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
+        <el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
+        <el-table-column width="180px" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作名称" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgTitle }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送人" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sendTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送部门" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送来源" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgSource }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="阅读日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.modifyTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审批记录" align="center">
+          <template slot-scope="scope">
+            <span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pages">
+      <div class="tit"/>
+      <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <!-- Start查看页面 -->
+    <el-dialog
+      title=""
+      :visible.sync="centerDialogVisible"
+      width="78%"
+      height="1%"
+      :before-close="closeIt"
+      center>
+      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
+    </el-dialog>
+    <!-- End查看页面-->
+
+    <!-- 编辑信息 -->
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle">
+      <!--流程流转记录-->
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
+      <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
+    </el-dialog>
+
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import flowRecords from '@/components/flow/flowRecord'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import { getStorage } from '@/utils/auth'
+import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
+import { pagerList } from '@/api/flow/read'
+import { flowRecord } from '@/api/workflow/finished'
+import upload from '@/components/uploadFile/upload'
+
+export default {
+  name: '',
+  components: {
+    pageye,
+    Pagination,
+    flowRecords,
+    upload
+  },
+  data() {
+    return {
+      taskList: [],
+      user_list: [],
+      xmlData: '',
+      dialogHeight: '80%',
+      centerDialogVisible: false, // 弹框
+      editDialog: false,
+      flowRecordList: [],
+      listLoading: false,
+      list: [],
+      tableKey: 0,
+      url: '',
+      commentVisible: false, // 评论内容弹框
+      comment_ImgList: [],
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: '',
+        fileList: []
+      },
+      line_row: {},
+      loginInfo: {
+        userSid: ''
+      },
+      selectUrl_list: {
+        proc_def_id: '', // 流程定义id
+        taskDefKey: '', // 节点id
+        type: '' // 类型
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          names: '',
+          createStartTime: '',
+          createEndTime: '',
+          userSid: '',
+          state: '1', // 0是待阅,1是已阅
+          orgPath: '',
+          startUserSid: ''
+        }
+      }
+    }
+  },
+  mounted() {
+    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
+    window.addEventListener('message', this.handleMessage)
+  },
+  created() {
+    // 加载列表
+    this.init()
+  },
+  methods: {
+    async handleMessage(event) {
+      var code = ''
+      if (event.data.params !== null && event.data.params !== undefined) {
+        code = event.data.params.code
+      }
+      if (code === 1) {
+        this.init()
+        this.centerDialogVisible = false
+      } else if (code === 2) {
+        this.dialogHeight = event.data.params.data
+        this.setIframeHeight(document.getElementById('iframe_done'))
+      }
+    },
+    setIframeHeight(iframe) {
+      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
+    },
+    init() {
+      sysstaffinfo().then((resp) => {
+        if (resp.success) {
+          this.user_list = resp.data
+        }
+      })
+      this.getList()
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
+      this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
+      pagerList(this.listQuery).then((rep) => {
+        this.listLoading = false
+        if (rep.success) {
+          this.list = rep.data.records
+          this.listQuery.total = rep.data.total
+        } else {
+          this.list = []
+          this.listQuery.total = 0
+        }
+      })
+    },
+    handleFilter() {
+      this.listQuery.pageNumber = 1
+      this.getList()
+    },
+    /** 打开详情 */
+    handleCheck(row) {
+      this.selectUrl_list.proc_def_id = row.procDefId
+      this.selectUrl_list.taskDefKey = row.taskDefKey
+      this.selectUrl_list.type = 2 // 详情
+      const parameter_list = {
+        businessSid: row.businessSid,
+        instanceId: row.procInsId,
+        taskId: row.taskId,
+        taskDefKey: row.taskDefKey,
+        taskName: row.taskName,
+        deployId: row.procDefId
+      }
+      selectUrl(this.selectUrl_list).then((response) => {
+        if (response.success && response.data.url !== '') {
+          // this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+          // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+        } else if (response.success && response.data.url === '') {
+          this.$notify({
+            title: '提示',
+            message: '请联系系统管理员',
+            type: 'error',
+            duration: 2000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: '执行失败',
+            type: 'error',
+            duration: 2000
+          })
+        }
+      })
+      this.getFlowRecordList(row.procInsId, row.procDefId)
+      this.centerDialogVisible = true
+    },
+    handleComment() {
+      this.commentVisible = true
+      this.comment = {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: '',
+        fileList: []
+      }
+      this.comment_ImgList = []
+    },
+    handleCommentConfirm() {
+      if (this.comment.content === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+        return
+      }
+      if (this.comment_ImgList.length > 0) {
+        for (var i = 0; i < this.comment_ImgList.length; i++) {
+          this.comment.fileList.push(this.comment_ImgList[i].url)
+        }
+      }
+      this.comment.reviewer = window.sessionStorage.getItem('name')
+      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+      this.comment.processId = this.line_row.procInsId
+      commentSave(this.comment).then((resp) => {
+        if (resp.success) {
+          this.commentVisible = false
+          this.handleFlowRecord(this.line_row)
+        }
+      })
+    },
+    closeIt() {
+      this.url = ''
+      this.centerDialogVisible = false
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row) {
+      this.line_row = row
+      this.getModelDetail(row.procDefId)
+      this.getFlowViewer(row.procInsId)
+      this.getFlowRecordList(row.procInsId, row.procDefId)
+      this.editDialog = true
+    },
+    /** xml 文件 */
+    getModelDetail(procDefId) {
+      var token = getStorage()
+      // 发送请求，获取xml
+      readXml(procDefId, token).then(res => {
+        this.xmlData = res.data
+      })
+    },
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      var token = getStorage()
+      getFlowViewer(procInsId, token).then(res => {
+        this.taskList = res.data
+      })
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, procDefId) {
+      var token = getStorage()
+      const params = { procInsId: procInsId, deployId: procDefId, token: token }
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        if (res.data.formData) {
+          this.formConf = res.data.formData
+          this.formConfOpen = true
+        }
+      }).catch(res => {
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.listtop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 0px 10px 15px;
+  margin: 0;
+}
+
+.listtop .tit {
+  font-weight: bold;
+}
+
+.listtop .pagination {
+  margin: 0;
+  padding: 0;
+}
+
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0px 0px 15px 15px;
+}
+
+.pages .tit {
+  font-weight: bold;
+}
+
+.pages .pagination {
+  margin: 0;
+}
+.dialogStyle /deep/ .el-dialog__body {
+  padding-top: 0px !important;
+}
+</style>
diff --git a/supervise-portal-ui/src/views/flow/tobereadList.vue b/supervise-portal-ui/src/views/flow/tobereadList.vue
new file mode 100644
index 00000000..2c812329
--- /dev/null
+++ b/supervise-portal-ui/src/views/flow/tobereadList.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="app-container">
+    <div class="tab-header webtop">
+      <div style="text-align: right">
+        <a href="javascript:window.opener=null;window.open('','_self');window.close();" class="text-center">关闭</a>
+      </div>
+    </div>
+    <div class="searchcon">
+      <div class="search">
+        <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
+          <el-form-item label="工作名称">
+            <el-input v-model="listQuery.params.names" placeholder="流程名称" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="发起人">
+            <el-select v-model="listQuery.params.startUserSid" filterable placeholder="请选择">
+              <el-option v-for="item in user_list" :key="item.userSid" :label="item.staffName" :value="item.userSid"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发送日期">
+            <el-date-picker v-model="listQuery.params.createStartTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+            <span style="padding: 0 8px">至</span>
+            <el-date-picker v-model="listQuery.params.createEndTime" type="date" placeholder="选择日期" clearable value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+          </el-form-item>
+          <el-button type="primary" @click="handleFilter">查询</el-button>
+        </el-form>
+      </div>
+    </div>
+    <div class="listtop">
+      <div class="tit">待阅列表</div>
+      <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <div class="">
+      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width:100%">
+        <el-table-column width="60px" label="序号" type="index" :index="indexMethod" align="center"/>
+        <el-table-column width="180px" label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="primary" size="small" @click="handleCheck(scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作名称" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgTitle }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送人" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送日期" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.sendTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送部门" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.senderDeptName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="发送来源" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.msgSource }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="审批记录" align="center">
+          <template slot-scope="scope">
+            <span class="bluezi" @click="handleFlowRecord(scope.row)">查看</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pages">
+      <div class="tit"/>
+      <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
+    </div>
+    <!-- Start查看页面 -->
+    <el-dialog :visible.sync="centerDialogVisible" width="78%" height="1%" center @close="colsePage">
+      <iframe frameborder="0" id="iframe_done" style="width:100%;" :src="this.centerDialogVisible === true ? url :''"></iframe>
+    </el-dialog>
+    <!-- End查看页面-->
+
+    <!-- 编辑信息 -->
+    <el-dialog title="审批记录" :visible.sync="editDialog" width="80%" style="overflow: hidden" class="dialogStyle" @close="colsePage">
+      <!--流程流转记录-->
+      <div style="text-align: right">
+        <el-button type="primary" size="small" @click="handleComment">评论</el-button>
+      </div>
+      <flow-records :xmlData="xmlData" :taskData="taskList" :flowRecordList="flowRecordList"></flow-records>
+    </el-dialog>
+
+    <!-- 审批人员填写评论 -->
+    <el-dialog title="评论" :visible.sync="commentVisible" width="50%">
+      <el-input type="textarea" placeholder="请输入内容" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 10}">
+      </el-input>
+      <upload ref="imgUpload" v-model="comment_ImgList" bucket="map" :upload-data="{type:'0001'}"/>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleCommentConfirm">确定</el-button>
+        <el-button size="small" @click="commentVisible = false">取消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import flowRecords from '@/components/flow/flowRecord'
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import { getStorage } from '@/utils/auth'
+import { selectUrl, readXml, getFlowViewer, commentSave, sysstaffinfo } from '@/api/flow/todo'
+import { pagerList, changeRead } from '@/api/flow/read'
+import { flowRecord } from '@/api/workflow/finished'
+import upload from '@/components/uploadFile/upload'
+
+export default {
+  name: '',
+  components: {
+    pageye,
+    Pagination,
+    flowRecords,
+    upload
+  },
+  data() {
+    return {
+      taskList: [],
+      user_list: [],
+      xmlData: '',
+      dialogHeight: '80%',
+      centerDialogVisible: false, // 弹框
+      editDialog: false,
+      flowRecordList: [],
+      listLoading: false,
+      list: [],
+      tableKey: 0,
+      url: '',
+      commentVisible: false, // 评论内容弹框
+      comment_ImgList: [],
+      comment: {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: '',
+        fileList: []
+      },
+      line_row: {},
+      loginInfo: {
+        userSid: ''
+      },
+      selectUrl_list: {
+        proc_def_id: '', // 流程定义id
+        taskDefKey: '', // 节点id
+        type: '' // 类型
+      },
+      listQuery: {
+        current: 1,
+        size: 10,
+        total: 0,
+        params: {
+          names: '',
+          createStartTime: '',
+          createEndTime: '',
+          userSid: '',
+          state: '0', // 0是待阅,1是已阅
+          orgPath: '',
+          startUserSid: ''
+        }
+      }
+    }
+  },
+  mounted() {
+    // 在外部vue的window上添加postMessage的监听，而且绑定处理函数handleMessage
+    window.addEventListener('message', this.handleMessage)
+  },
+  created() {
+    // 加载列表
+    this.init()
+  },
+  methods: {
+    async handleMessage(event) {
+      var code = ''
+      if (event.data.params !== null && event.data.params !== undefined) {
+        code = event.data.params.code
+      }
+      if (code === 1) {
+        this.init()
+        this.centerDialogVisible = false
+      } else if (code === 2) {
+        this.dialogHeight = event.data.params.data
+        this.setIframeHeight(document.getElementById('iframe_done'))
+      }
+    },
+    setIframeHeight(iframe) {
+      iframe.height = this.dialogHeight // iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
+    },
+    init() {
+      sysstaffinfo().then((resp) => {
+        if (resp.success) {
+          this.user_list = resp.data
+        }
+      })
+      this.getList()
+    },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.params.userSid = window.sessionStorage.getItem('userSid')
+      this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath')
+      pagerList(this.listQuery).then((rep) => {
+        this.listLoading = false
+        if (rep.success) {
+          this.list = rep.data.records
+          this.listQuery.total = rep.data.total
+        } else {
+          this.list = []
+          this.listQuery.total = 0
+        }
+      })
+    },
+    handleFilter() {
+      this.listQuery.pageNumber = 1
+      this.getList()
+    },
+    /** 打开详情 */
+    handleCheck(row) {
+      changeRead(row.sid).then((res) => {
+        if (res.success) {
+          this.selectUrl_list.proc_def_id = row.procDefId
+          this.selectUrl_list.taskDefKey = row.taskDefKey
+          this.selectUrl_list.type = 2 // 详情
+          const parameter_list = {
+            businessSid: row.businessSid,
+            instanceId: row.procInsId,
+            taskId: row.taskId,
+            taskDefKey: row.taskDefKey,
+            taskName: row.taskName,
+            deployId: row.procDefId
+          }
+          selectUrl(this.selectUrl_list).then((response) => {
+            if (response.success && response.data.url !== '') {
+              // this.url = 'http://192.168.1.103:9531' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+              this.url = 'http://anrui.yyundong.com' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+              // this.url = 'http://120.46.172.184' + response.data.url + '?token=' + getStorage() + '&data=' + encodeURI((JSON.stringify(parameter_list)))
+            } else if (response.success && response.data.url === '') {
+              this.$notify({
+                title: '提示',
+                message: '请联系系统管理员',
+                type: 'error',
+                duration: 2000
+              })
+            } else {
+              this.$notify({
+                title: '提示',
+                message: '执行失败',
+                type: 'error',
+                duration: 2000
+              })
+            }
+          })
+          this.getFlowRecordList(row.procInsId, row.procDefId)
+          this.centerDialogVisible = true
+          // this.$router.push({path: '/todo' + '?token=' + getStorage()})
+        }
+      })
+    },
+    handleComment() {
+      this.commentVisible = true
+      this.comment = {
+        reviewer: '',
+        reviewerSid: '',
+        time: '',
+        content: '',
+        processId: '',
+        processInstSid: '',
+        fileList: []
+      }
+      this.comment_ImgList = []
+    },
+    handleCommentConfirm() {
+      if (this.comment.content === '') {
+        this.$message({ showClose: true, type: 'error', message: '请填写评论' })
+        return
+      }
+      if (this.comment_ImgList.length > 0) {
+        for (var i = 0; i < this.comment_ImgList.length; i++) {
+          this.comment.fileList.push(this.comment_ImgList[i].url)
+        }
+      }
+      this.comment.reviewer = window.sessionStorage.getItem('name')
+      this.comment.reviewerSid = window.sessionStorage.getItem('userSid')
+      this.comment.processId = this.line_row.procInsId
+      commentSave(this.comment).then((resp) => {
+        if (resp.success) {
+          this.commentVisible = false
+          this.handleFlowRecord(this.line_row)
+        }
+      })
+    },
+    closeIt() {
+      this.url = ''
+      this.centerDialogVisible = false
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row) {
+      this.line_row = row
+      changeRead(row.sid).then((res) => {
+        if (res.success) {
+          this.getModelDetail(row.procDefId)
+          this.getFlowViewer(row.procInsId)
+          this.getFlowRecordList(row.procInsId, row.procDefId)
+          this.editDialog = true
+        }
+      })
+    },
+    colsePage() {
+      this.getList()
+    },
+    /** xml 文件 */
+    getModelDetail(procDefId) {
+      var token = getStorage()
+      // 发送请求，获取xml
+      readXml(procDefId, token).then(res => {
+        this.xmlData = res.data
+      })
+    },
+    // 已办环节的节点
+    getFlowViewer(procInsId) {
+      var token = getStorage()
+      getFlowViewer(procInsId, token).then(res => {
+        this.taskList = res.data
+      })
+    },
+    /** 流程流转记录 */
+    getFlowRecordList(procInsId, procDefId) {
+      var token = getStorage()
+      const params = { procInsId: procInsId, deployId: procDefId, token: token }
+      flowRecord(params).then(res => {
+        this.flowRecordList = res.data
+        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
+        if (res.data.formData) {
+          this.formConf = res.data.formData
+          this.formConfOpen = true
+        }
+      }).catch(res => {
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.listtop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 0px 10px 15px;
+  margin: 0;
+}
+
+.listtop .tit {
+  font-weight: bold;
+}
+
+.listtop .pagination {
+  margin: 0;
+  padding: 0;
+}
+
+.pages {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0px 0px 15px 15px;
+}
+
+.pages .tit {
+  font-weight: bold;
+}
+
+.pages .pagination {
+  margin: 0;
+}
+.dialogStyle /deep/ .el-dialog__body {
+  padding-top: 0px !important;
+}
+</style>